/*
 * Global styles for Caden Ice's portfolio
 * The design draws inspiration from modern, minimal portfolio layouts
 * similar to Yusef Turín's site, with generous whitespace, clear
 * typography and subtle accents. Sections are separated with plenty of
 * breathing room and a small dot following each heading as a design motif.
 */

/* CSS variables for easy theme adjustments */
:root {
  --primary-bg: #0b0e11; /* dark backdrop for hero */
  --section-bg: #11151c; /* darker background for sections */
  --accent: #ff6b35;     /* accent colour for buttons and highlights */
  --text-dark: #d4d9e3; /* light text for dark backgrounds */
  --text-light: #ffffff;
  /* slightly lighter card background on dark sections */
  --card-bg: #1c2531;
  --card-shadow: rgba(0, 0, 0, 0.3);
  --radius: 16px;
  --transition: all 0.25s ease;
}

/* Ensure all elements stay within viewport */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  max-width: 100%;
}

html {
  overflow-x: hidden;
  width: 100%;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--text-dark);
  line-height: 1.6;
  background-color: var(--section-bg);
  width: 100%;
  overflow-x: hidden;
  position: relative;
}

/* Ensure images never overflow their containers on smaller screens.
   This rule prevents horizontal scrolling by constraining the width
   and preserving aspect ratio. */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Container utility */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Navigation bar */
header {
  position: relative;
  z-index: 1000;
}

.nav-container {
  position: fixed;
  top: 20px;
  left: 20px;
  right: 20px;
  width: auto;
  max-width: 1160px;
  margin: 0 auto;
  /* dark translucent nav bar ensures menu items remain readable on any background */
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.5px;
  color: var(--text-light);
}

.nav-links {
  display: flex;
  gap: 1.2rem;
  font-weight: 500;
  flex-wrap: wrap;
}

.nav-links a {
  color: var(--text-light);
  transition: var(--transition);
  padding: 5px;
}

.nav-links a:hover {
  color: var(--accent);
}

/* Mobile navigation toggle button. Hidden on larger screens; displayed on
   mobile devices. */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.6rem;
  color: var(--text-light);
  cursor: pointer;
}

/* Active nav link */
.nav-links a.active {
  color: var(--accent);
}

.nav-social a {
  color: var(--text-light);
  margin-left: 1rem;
  font-size: 1.1rem;
  transition: var(--transition);
}

.nav-social a:hover {
  color: var(--accent);
}

.hero {
  position: relative;
  /* Use the consolidated hero image.  The image lives one directory up in
     assets/images/hero.jpg relative to this CSS file, so adjust the path
     accordingly. */
  background-image: url('../images/A2F4BD6F-6E01-4A1C-89C0-51E1ACC02257_1_105_c.jpeg');
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  align-items: center;
  color: var(--text-light);
  text-align: center;

  /* Push the hero content below the fixed navigation bar. Without this
     padding the heading would sit underneath the nav on page load. */
  padding-top: 5rem;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Soften the dark overlay to allow the underlying hero image to be
     visible on mobile devices while still ensuring text legibility. */
  background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
}

.hero h1 {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  color: #dfe5f5;
}

.button {
  background: var(--accent);
  color: var(--text-light);
  padding: 0.7rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  transition: var(--transition);
  display: inline-block;
}

.button:hover {
  background: darken(var(--accent), 10%);
  transform: translateY(-2px);
}

/* Section default styling */
.section {
  padding: 5rem 0;
}

.section h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  font-weight: 700;
  position: relative;
}

.section .dot {
  color: var(--accent);
}

/* Skills */
.skills {
  background: var(--section-bg);
}

.skills-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

.skill-group {
  flex: 1 1 250px;
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: 0 4px 8px var(--card-shadow);
}

.skill-group h3 {
  margin-bottom: 1rem;
  font-weight: 600;
}

.skill-group ul {
  list-style: none;
}

.skill-group li {
  margin-bottom: 0.5rem;
  position: relative;
  padding-left: 1.2rem;
}

.skill-group li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* Experience */
.experience-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.experience-item {
  background: var(--card-bg);
  padding: 1.5rem;
  border-radius: var(--radius);
  box-shadow: 0 4px 8px var(--card-shadow);
}

.experience-item h3 {
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
  font-weight: 600;
}

.experience-item .date {
  display: block;
  font-size: 0.9rem;
  /* lighter text colour for dark background cards */
  color: #9aa4b1;
  margin-bottom: 0.7rem;
}

/* Blog cards */
.blog-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.blog-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 8px var(--card-shadow);
  display: flex;
  flex-direction: column;
}

.blog-image img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.blog-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-content h3 {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.blog-content .date {
  font-size: 0.85rem;
  color: #9aa4b1;
  margin-bottom: 0.8rem;
}

.blog-content p {
  flex-grow: 1;
  margin-bottom: 1rem;
}

.blog-content .read-more {
  align-self: flex-start;
  color: var(--accent);
  font-weight: 600;
  transition: var(--transition);
}

.blog-content .read-more:hover {
  text-decoration: underline;
}

/* About */
.about-container {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  align-items: center;
}

.about-image {
  flex: 1 1 300px;
  max-width: 400px;
}

.about-image img {
  width: 100%;
  border-radius: var(--radius);
}

.about-content {
  flex: 2 1 400px;
}

.about-content p {
  margin-bottom: 1rem;
}

/* Books */
.books {
  background: var(--section-bg);
}

.books-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.book-card {
  background: var(--card-bg);
  padding: 1.5rem;
  border-radius: var(--radius);
  box-shadow: 0 4px 8px var(--card-shadow);
}

.book-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.book-card h4 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #9aa4b1;
  margin-bottom: 0.7rem;
}

.book-card p {
  font-size: 0.9rem;
  color: #c7cedb;
}

/* Contact & FAQ */
.contact-container {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
}

.contact-form {
  flex: 1 1 300px;
  background: var(--card-bg);
  padding: 2rem;
  border-radius: var(--radius);
  box-shadow: 0 4px 8px var(--card-shadow);
  min-width: 0;
}

.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-form input,
.contact-form textarea {
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: var(--radius);
  font-size: 1rem;
  width: 100%;
  min-width: 0;
}

.contact-form button {
  background: var(--accent);
  color: var(--text-light);
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.contact-form button:hover {
  transform: translateY(-2px);
}

.faq {
  flex: 1 1 300px;
  background: var(--card-bg);
  padding: 2rem;
  border-radius: var(--radius);
  box-shadow: 0 4px 8px var(--card-shadow);
  min-width: 0;
  overflow-wrap: break-word;
}

.faq h2 {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.faq-item + .faq-item {
  margin-top: 1rem;
}

.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  padding-right: 1.5rem;
  color: var(--text-light);
}

.faq-question::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 0;
  color: var(--text-light);
  font-size: 1.2rem;
  transition: var(--transition);
}

.faq-answer {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  display: none;
  color: var(--text-light);
}

.faq-item.active .faq-answer {
  display: block;
}

.faq-item.active .faq-question::after {
  transform: rotate(45deg);
}

/* Footer */
footer {
  background: var(--primary-bg);
  color: var(--text-light);
  padding: 2rem 0;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.footer-social a {
  margin-left: 1rem;
  color: var(--text-light);
  transition: var(--transition);
}

.footer-social a:hover {
  color: var(--accent);
}

/* Blog post page styles */
.blog-post {
  max-width: 800px;
  margin: 0 auto;
  padding-top: 6rem;
}

.blog-post h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.blog-post .date {
  font-size: 0.9rem;
  color: #9aa4b1;
  margin-bottom: 2rem;
  display: block;
}

.blog-post p {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  line-height: 1.7;
}

.blog-post .read-more {
  color: var(--accent);
  font-weight: 600;
  transition: var(--transition);
}

.blog-post .read-more:hover {
  text-decoration: underline;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .container {
    padding: 0 15px;
  }
  
  .hero h1 {
    font-size: 2.4rem;
  }
  
  .nav-container {
    left: 10px;
    right: 10px;
    padding: 0.8rem 1rem;
  }
  
  .contact-container {
    flex-direction: column;
    gap: 2rem;
  }
  
  .about-container {
    flex-direction: column;
  }

  /* On small screens hide the navigation links by default and
     stack them vertically when opened. The open class is toggled
     via JavaScript when the menu icon is clicked. */
  .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }
  .nav-links.open {
    display: flex;
  }
  .nav-toggle {
    display: block;
  }

  /* Ensure the contact form and FAQ fit within the viewport on mobile.
     Without this the cards can exceed the container width once padding
     is applied, causing horizontal scroll and forcing users to zoom out. */
  .contact-form,
  .faq {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
  }
  
  .faq h2 {
    font-size: 1.6rem;
    line-height: 1.3;
  }
  
  /* Mobile blog post adjustments */
  .blog-post h1 {
    font-size: 2rem;
  }
  
  .blog-post p {
    font-size: 1rem;
  }
}