/*
  ============================================================
  ALEX DEV PORTFOLIO — style.css

  WEEK 3: Colors, fonts, spacing (added in Week 3)
  WEEK 4: Box model concepts (padding, border, margin)
  WEEK 5: Flexbox layouts + media queries

  TABLE OF CONTENTS:
  1.  CSS Variables (custom properties)
  2.  Reset & Base Styles
  3.  Typography
  4.  Layout Utilities
  5.  Header & Navigation (Flexbox — Week 5)
  6.  Hero Section
  7.  Buttons
  8.  Cards & Card Grid (Flexbox — Week 5)
  9.  About Section
  10. Skills Table
  11. Projects Page
  12. Contact Page & Form
  13. Footer
  14. Dark Mode
  15. Media Queries — Responsive Design (Week 5)
  ============================================================
*/


/* ============================================================
   1. CSS VARIABLES (Custom Properties)
   ============================================================
   WEEK 3 — CSS Fundamentals

   CSS variables let you define a value ONCE and reuse it everywhere.
   Change one variable → the change updates across the entire site.

   Syntax: --variable-name: value;
   Usage:  color: var(--variable-name);

   We define them on :root so they're available on every element.
   ============================================================ */

:root {
  /* Colour palette */
  --color-primary:    #ff6b35;   /* Orange — our main brand colour */
  --color-secondary:  #1a1a2e;   /* Deep navy — used for dark backgrounds */
  --color-accent:     #e94560;   /* Pink-red — for highlights and hover states */

  /* Background and text colours */
  --color-bg:         #ffffff;   /* Page background */
  --color-bg-soft:    #f8f9fa;   /* Slightly off-white for sections */
  --color-text:       #2d2d2d;   /* Main body text — NOT pure black (easier on eyes) */
  --color-text-muted: #6b7280;   /* Lighter text for subtitles and captions */

  /* Border */
  --color-border:     #e5e7eb;

  /* Spacing scale — consistent gaps throughout the site */
  --space-xs:   0.5rem;    /*  8px */
  --space-sm:   1rem;      /* 16px */
  --space-md:   1.5rem;    /* 24px */
  --space-lg:   2rem;      /* 32px */
  --space-xl:   3rem;      /* 48px */
  --space-2xl:  5rem;      /* 80px */

  /* Typography */
  --font-body:    'Segoe UI', system-ui, sans-serif;
  --font-heading: 'Segoe UI', system-ui, sans-serif;

  /* Borders */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;

  /* Transitions */
  --transition: 0.2s ease;
}


/* ============================================================
   2. RESET & BASE STYLES
   ============================================================
   WEEK 4 — The CSS Box Model

   The star selector (*) targets EVERY element on the page.

   box-sizing: border-box — THE most important CSS rule you'll add.

   DEFAULT (content-box):
     width: 300px + padding: 20px + border: 2px = 344px TOTAL
     The element is WIDER than you specified!

   WITH border-box:
     width: 300px TOTAL — padding and border are included.
     The element is EXACTLY as wide as you said.

   Always add this. No exceptions.
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;  /* Week 4: Include padding + border in width/height */
  margin: 0;               /* Remove browser default margins */
  padding: 0;              /* Remove browser default padding */
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.6;        /* Space between lines of text — 1.6 is comfortable to read */
}

img {
  max-width: 100%;         /* Images never overflow their container */
  display: block;          /* Removes the invisible gap below inline images */
}


/* ============================================================
   3. TYPOGRAPHY
   ============================================================
   WEEK 3 — CSS Fundamentals: Fonts & Text
   ============================================================ */

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.2;              /* Tighter line-height for headings */
  color: var(--color-secondary); /* Headings use our dark navy colour */
  margin-bottom: var(--space-sm);
}

h1 { font-size: 2.5rem; }   /* 40px */
h2 { font-size: 2rem; }     /* 32px */
h3 { font-size: 1.5rem; }   /* 24px */

p {
  margin-bottom: var(--space-sm);
  color: var(--color-text);
}

a {
  color: var(--color-primary);
  text-decoration: none;         /* Remove underline from links by default */
}

a:hover {
  text-decoration: underline;    /* Show underline on hover — accessibility best practice */
}

.accent {
  color: var(--color-primary);   /* Orange colour for branded text like "Alex." */
}

.optional {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-weight: normal;
}


/* ============================================================
   4. LAYOUT UTILITIES
   ============================================================ */

/* A max-width container that stays centred on wide screens */
.container {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

section {
  padding: var(--space-2xl) var(--space-md); /* Big vertical padding between sections */
  max-width: 1100px;
  margin: 0 auto;
}

.section-subtitle {
  color: var(--color-text-muted);
  font-size: 1.1rem;
  margin-bottom: var(--space-lg);
}

.section-cta {
  text-align: center;
  margin-top: var(--space-lg);
}


/* ============================================================
   5. HEADER & NAVIGATION
   ============================================================
   WEEK 5 — Flexbox Layouts

   display: flex on the header makes it a FLEX CONTAINER.
   Direct children (logo, nav) become FLEX ITEMS.

   justify-content: space-between — pushes logo to LEFT, nav to RIGHT.
   align-items: center — vertically centres both in the header bar.
   ============================================================ */

.site-header {
  display: flex;                       /* Week 5: Enable Flexbox */
  justify-content: space-between;      /* Logo left, nav right */
  align-items: center;                 /* Vertically centre both */
  padding: var(--space-sm) var(--space-lg);
  background-color: var(--color-secondary);
  position: sticky;                    /* Stays at top when scrolling */
  top: 0;
  z-index: 100;                        /* Ensure it stays above all other content */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* Logo link */
.logo a {
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  text-decoration: none;
}

/* Navigation list — horizontal links */
.main-nav ul {
  display: flex;           /* Nav items side by side */
  align-items: center;
  gap: var(--space-md);    /* Space between nav items */
  list-style: none;        /* Remove bullet points */
}

.main-nav a {
  color: rgba(255, 255, 255, 0.8);   /* Slightly transparent white */
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transition);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
}

.main-nav a:hover,
.main-nav a.active {
  color: white;
  background-color: rgba(255, 255, 255, 0.1);
  text-decoration: none;
}

/* Mobile hamburger button — hidden on desktop, shown on mobile */
.menu-toggle {
  display: none;           /* Week 15: Shown only on mobile via @media query */
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: white;
  font-size: 1.25rem;
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

/* Dark mode toggle button in the nav */
.dark-toggle {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.85rem;
  transition: background var(--transition);
}

.dark-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
}


/* ============================================================
   6. HERO SECTION
   ============================================================
   WEEK 5 — Flexbox: Perfect centering with flex-direction: column
   ============================================================ */

.hero {
  display: flex;
  flex-direction: column;    /* Stack children vertically */
  justify-content: center;   /* Centre vertically */
  align-items: flex-start;   /* Align to the left */
  min-height: 70vh;          /* At least 70% of the viewport height */
  background: linear-gradient(135deg, var(--color-secondary) 0%, #16213e 100%);
  color: white;
  padding: var(--space-2xl) var(--space-md);
  max-width: 100%;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem); /* Fluid font size — scales with viewport */
  color: white;
  margin-bottom: var(--space-md);
}

.hero-subtitle {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.75);
  max-width: 540px;
  margin-bottom: var(--space-lg);
}

.hero-buttons {
  display: flex;       /* Buttons side by side */
  gap: var(--space-sm);
  flex-wrap: wrap;     /* Wrap to next line if screen is too narrow */
}

/* Page hero (used on projects.html and contact.html) */
.page-hero {
  background: var(--color-secondary);
  color: white;
  padding: var(--space-2xl) var(--space-md);
  text-align: center;
  max-width: 100%;
}

.page-hero h1 {
  color: white;
}

.page-hero p {
  color: rgba(255, 255, 255, 0.7);
}


/* ============================================================
   7. BUTTONS
   ============================================================
   WEEK 4 — Box Model: Padding gives buttons their shape

   Without padding, a button would hug its text tightly.
   Padding adds breathing room INSIDE the element.
   ============================================================ */

.btn {
  /*
    WEEK 4 BOX MODEL DEMO:
    content: the button text ("View My Work")
    padding: 0.75rem 1.5rem — space inside between text and edges
    border: 2px solid ... — the outline
    margin: (applied by parent's gap) — space between buttons
  */
  display: inline-block;
  padding: 0.75rem 1.5rem;          /* Vertical | Horizontal */
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
  transition: all var(--transition);
}

.btn-primary {
  background-color: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  text-decoration: none;
}

.btn-secondary {
  background-color: transparent;
  color: white;
  border-color: rgba(255, 255, 255, 0.5);
}

.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
  text-decoration: none;
}

.btn-full {
  width: 100%;         /* Button fills the full width of its container */
  text-align: center;
}


/* ============================================================
   8. CARDS & CARD GRID
   ============================================================
   WEEK 4 — Box Model: margin, padding, border on cards
   WEEK 5 — Flexbox: the card grid layout
   ============================================================ */

/*
  WEEK 5 FLEXBOX CARD GRID:

  .card-grid is the FLEX CONTAINER.
  Each .card is a FLEX ITEM.

  flex-wrap: wrap — When there's no room for more cards in a row,
  they drop down to the NEXT row automatically.

  gap: 1.5rem — Clean spacing between all cards.
*/
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/*
  WEEK 4 BOX MODEL ON CARDS:

  margin:  (handled by parent's gap)
  border:  1px solid var(--color-border)
  padding: var(--space-md)        ← space inside between content and edges
  content: h3, p, link inside
*/
.card {
  flex: 1;                          /* Each card grows equally to fill available space */
  min-width: 260px;                 /* Cards are at least 260px wide before wrapping */
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);        /* Week 4: Space between content and border */
  transition: transform var(--transition), box-shadow var(--transition);
}

.card:hover {
  transform: translateY(-4px);     /* Card lifts up slightly on hover */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.card h2,
.card h3 {
  margin-bottom: var(--space-xs);
  font-size: 1.2rem;
}

.card p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin-bottom: var(--space-sm);
}

.card-link {
  font-weight: 600;
  color: var(--color-primary);
  font-size: 0.9rem;
}

/* Full-width card variant for projects page */
.card-full {
  min-width: 280px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.card-emoji {
  font-size: 2rem;
}

/* Technology tags list inside project cards */
.tech-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin-bottom: var(--space-md);
}

.tech-list li {
  background-color: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;        /* Pill shape */
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.card-links {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.card-links .btn-secondary {
  color: var(--color-text);
  border-color: var(--color-border);
}

.card-links .btn-secondary:hover {
  background-color: var(--color-bg-soft);
}


/* ============================================================
   9. ABOUT SECTION
   ============================================================ */

.about {
  background-color: var(--color-bg-soft);
  border-radius: var(--radius-lg);
}

.about-content {
  display: flex;                 /* Week 5: Flexbox for side-by-side layout */
  align-items: center;
  gap: var(--space-xl);
  flex-wrap: wrap;               /* Stack on small screens */
}

.about-text {
  flex: 1;
  min-width: 280px;
}

.about-image img {
  border-radius: 50%;            /* Circular profile image */
  border: 4px solid var(--color-primary);
}


/* ============================================================
   10. SKILLS TABLE
   ============================================================
   WEEK 3 — Tables

   Tables use collapse border model and alternating row colours.
   ============================================================ */

.skills-table {
  width: 100%;
  border-collapse: collapse;     /* Remove double borders between cells */
  margin-top: var(--space-md);
}

.skills-table th,
.skills-table td {
  /* WEEK 4 BOX MODEL: padding adds space inside each cell */
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.skills-table th {
  background-color: var(--color-secondary);
  color: white;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Alternating row colours (zebra striping) */
.skills-table tbody tr:nth-child(even) {
  background-color: var(--color-bg-soft);
}

.skills-table tbody tr:hover {
  background-color: #fff3ee;     /* Subtle orange tint on hover */
}


/* ============================================================
   11. PROJECTS PAGE
   ============================================================ */

.projects-section {
  padding-top: var(--space-xl);
}


/* ============================================================
   12. CONTACT PAGE & FORM
   ============================================================
   WEEK 3 — Forms
   WEEK 5 — Flexbox two-column layout
   ============================================================ */

/* Two-column layout: form left, info right */
.contact-grid {
  display: flex;               /* Week 5: Flexbox */
  gap: var(--space-xl);
  align-items: flex-start;     /* Don't stretch columns to equal height */
  flex-wrap: wrap;             /* Stack on mobile */
}

.contact-form-wrapper {
  flex: 2;                     /* Form takes 2/3 of the available space */
  min-width: 280px;
}

.contact-info {
  flex: 1;                     /* Info takes 1/3 of the available space */
  min-width: 240px;
}

/* Individual form groups (label + input pairs) */
.form-group {
  margin-bottom: var(--space-md);   /* Week 4: Margin pushes groups apart */
}

.form-group label {
  display: block;             /* Label on its own line above the input */
  font-weight: 600;
  margin-bottom: var(--space-xs);
  font-size: 0.9rem;
  color: var(--color-secondary);
}

/* Style all input-like elements the same way */
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  /* WEEK 4: Padding creates space between text and input edges */
  padding: var(--space-sm);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: border-color var(--transition);
}

/* Highlight the focused input with our brand colour */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;                           /* Remove browser default blue outline */
  border-color: var(--color-primary);      /* Add our own coloured border */
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15); /* Soft glow */
}

.form-group textarea {
  resize: vertical;            /* User can only resize vertically, not horizontally */
}

/* Week 7: JavaScript writes into this paragraph */
.form-feedback {
  margin-top: var(--space-sm);
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
}

.form-feedback.success { color: #16a34a; }   /* Green for success */
.form-feedback.error   { color: #dc2626; }   /* Red for error */

/* Contact info sidebar */
.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.contact-icon {
  font-size: 1.5rem;
  margin-top: 2px;
}

.contact-detail strong {
  display: block;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.response-note {
  background-color: var(--color-bg-soft);
  border-left: 3px solid var(--color-primary);
  padding: var(--space-sm) var(--space-md);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-top: var(--space-lg);
  font-size: 0.9rem;
}


/* ============================================================
   13. FOOTER
   ============================================================ */

.site-footer {
  background-color: var(--color-secondary);
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  padding: var(--space-lg) var(--space-md);
}

.site-footer p {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--space-xs);
  font-size: 0.9rem;
}

.footer-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
}

.footer-nav a {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
  text-decoration: none;
}

.footer-nav a:hover {
  color: white;
  text-decoration: none;
}


/* ============================================================
   14. DARK MODE
   ============================================================
   WEEK 7 — DOM Manipulation & CSS Classes

   When JavaScript adds the class "dark-mode" to <body>,
   ALL of these CSS rules activate automatically.

   JS does:  document.body.classList.toggle('dark-mode')
   CSS does: body.dark-mode .site-header { background: ...; }

   This is the power of combining JS + CSS classes.
   No inline styles needed — just add/remove a class.
   ============================================================ */

body.dark-mode {
  --color-bg:         #121212;
  --color-bg-soft:    #1e1e1e;
  --color-text:       #e5e7eb;
  --color-text-muted: #9ca3af;
  --color-border:     #374151;
  --color-secondary:  #0a0a1a;
}

body.dark-mode .site-header {
  background-color: #0a0a1a;
}

body.dark-mode .card {
  background-color: #1e1e1e;
}

body.dark-mode .skills-table th {
  background-color: #0a0a1a;
}

body.dark-mode .form-group input,
body.dark-mode .form-group select,
body.dark-mode .form-group textarea {
  background-color: #1e1e1e;
  color: #e5e7eb;
}


/* ============================================================
   15. MEDIA QUERIES — RESPONSIVE DESIGN
   ============================================================
   WEEK 5 — Media Queries & Responsive Design

   A @media query applies CSS rules ONLY when a condition is true.
   The most common condition: max-width (screen is SMALLER than X).

   HOW TO READ: "When the screen is 768px wide or smaller, apply these rules."

   Mobile-first approach:
   1. Write styles for MOBILE first (no media query needed)
   2. Then add media queries for LARGER screens
   ============================================================ */

/* ── Tablet and below: max 768px ── */
@media (max-width: 768px) {

  /* Shrink heading sizes on mobile */
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }

  /* NAVIGATION: Show hamburger, hide links by default */
  .menu-toggle {
    display: block;          /* Show the ☰ button on mobile */
  }

  .main-nav {
    display: none;           /* Hide the nav links by default on mobile */
    position: absolute;
    top: 64px;               /* Below the header */
    left: 0;
    right: 0;
    background-color: var(--color-secondary);
    padding: var(--space-md);
    z-index: 99;
  }

  /* When JS adds class "open" to the nav, show it */
  .main-nav.open {
    display: block;
  }

  .main-nav ul {
    flex-direction: column;  /* Stack links vertically */
    gap: var(--space-xs);
  }

  /* HERO: Centre text on mobile */
  .hero {
    align-items: center;
    text-align: center;
    min-height: 60vh;
  }

  .hero-buttons {
    justify-content: center;
  }

  /* ABOUT: Stack image below text on mobile */
  .about-content {
    flex-direction: column;
    text-align: center;
  }

  .about-image {
    order: -1;  /* Move image ABOVE the text */
  }

  /* CONTACT GRID: Stack form and info vertically */
  .contact-grid {
    flex-direction: column;
  }

  /* SKILLS TABLE: Scroll horizontally if table is too wide */
  .skills {
    overflow-x: auto;
  }
}

/* ── Small mobile: max 480px ── */
@media (max-width: 480px) {

  section {
    padding: var(--space-xl) var(--space-sm);
  }

  .hero h1 {
    font-size: 1.75rem;
  }

  /* Force cards to full width on very small screens */
  .card {
    min-width: 100%;
  }
}