/*
 * main.css — Dark Grotto Theme
 * ==============================
 * Hand-crafted dark theme for www.darkgrotto.com. No CSS framework — all styles
 * are defined here using CSS custom properties (variables) for consistent theming.
 *
 * Typography: Inter from Google Fonts (loaded in layouts/partials/head.html)
 * with system-ui fallback stack.
 *
 * Color palette: Cave-inspired dark theme with blue accent (cave water).
 * All colors are defined as CSS custom properties in :root for easy modification.
 *
 * Layout: Flexbox-based with CSS Grid for service cards. Max content width
 * is 1100px, centered with auto margins.
 *
 * Responsive breakpoints:
 *   - 768px (tablet): hamburger nav, stacked footer, reduced spacing
 *   - 480px (phone):  single-column services grid, smaller hero text
 *
 * File organization:
 *   1. CSS Custom Properties (theme variables)
 *   2. Reset / Base styles
 *   3. Header / Navigation (sticky, hamburger on mobile)
 *   4. Hero section (landing page)
 *   5. Buttons (primary/secondary variants)
 *   6. Services grid (landing page)
 *   7. Page content (typography for Markdown-rendered pages)
 *   8. About page (bio, certs, career timeline, affiliations, awards)
 *   9. Blog (post list, post cards, single post, tags)
 *  10. Contact form (inputs, status messages, hCaptcha)
 *  11. Company info card
 *  12. Cookie consent banner (fixed bottom, GDPR-compliant)
 *  13. Footer
 *  14. Responsive media queries
 */

/* ==========================================================================
   1. CSS Custom Properties — Theme Variables
   ==========================================================================
   All theme colors, fonts, and layout dimensions are defined here.
   Changing these values will update the entire site's appearance.

   Color naming convention:
     --color-bg-*      Background shades (darkest → lightest)
     --color-accent*   Primary brand color (cave water blue) and variants
     --color-text-*    Text colors (primary, headings, muted)
     --color-border    Border/divider color
   ========================================================================== */
:root {
  /* Background colors — layered from deepest (page bg) to hover state */
  --color-bg-deepest:   #0a0a0f;     /* Page background — near-black with blue tint */
  --color-bg-dark:      #121218;     /* Cards, elevated sections, footer */
  --color-bg-medium:    #1a1a24;     /* Secondary elevation (inline code, badges) */
  --color-bg-hover:     #22222e;     /* Hover states on dark backgrounds */

  /* Accent colors — cave water blue, used for links, CTAs, and highlights */
  --color-accent:       #4a7fb5;     /* Primary accent — links, buttons, borders */
  --color-accent-light: #6ba3d6;     /* Hover state for accent elements */
  --color-accent-glow:  rgba(74, 127, 181, 0.15);  /* Subtle glow for box-shadows and tag backgrounds */

  /* Text colors */
  --color-text-primary: #d4d4dc;     /* Body text — light gray with slight warmth */
  --color-text-heading: #e8e8f0;     /* Headings — brighter than body text */
  --color-text-muted:   #7a7a8c;     /* Secondary text — dates, metadata, captions */

  /* Borders */
  --color-border:       #2a2a38;     /* Dividers, card borders, separators */

  /* Typography — Inter loaded from Google Fonts in head.html partial */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Layout constraints */
  --max-width: 1100px;               /* Maximum content width for readability */
  --header-height: 64px;             /* Sticky header height — used for nav positioning */
}

/* ==========================================================================
   2. Reset / Base Styles
   ==========================================================================
   Minimal CSS reset: border-box sizing, zero margins/padding, smooth scroll.
   Body uses flexbox column layout so footer sticks to bottom on short pages
   (main has flex: 1 to fill remaining space).
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--color-bg-deepest);
  color: var(--color-text-primary);
  line-height: 1.7;
  min-height: 100vh;
  display: flex;                     /* Flexbox column for sticky footer pattern */
  flex-direction: column;
}
main { flex: 1; }                    /* Expands to push footer to bottom */
img { max-width: 100%; height: auto; display: block; }  /* Responsive images */
a { color: var(--color-accent); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--color-accent-light); }

/* ==========================================================================
   3. Header / Navigation
   ==========================================================================
   Sticky header with frosted-glass effect (backdrop-filter: blur).
   Navigation uses flexbox for horizontal layout on desktop.
   Mobile hamburger menu is hidden by default, shown at 768px breakpoint.

   HTML structure (layouts/partials/header.html):
     .site-header > .nav-container > .site-logo + .nav-toggle + .nav-menu

   The .nav-toggle button and hamburger animation are controlled by
   aria-expanded attribute, toggled by static/js/main.js.
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;                      /* Above all content, below cookie banner (1000) */
  background: rgba(10, 10, 15, 0.95); /* Semi-transparent for frosted glass effect */
  backdrop-filter: blur(8px);        /* Blurs content behind header when scrolling */
  border-bottom: 1px solid var(--color-border);
  height: var(--header-height);
}
.nav-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;    /* Logo left, nav right */
  height: 100%;
}

/* Site logo — "Dark Grotto" text with "LLC" suffix */
.site-logo {
  display: flex;
  align-items: baseline;             /* Aligns "LLC" text with main logo text */
  gap: 0.4rem;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-text-heading);
}
.site-logo:hover { color: var(--color-accent-light); }
.logo-llc { font-size: 0.75rem; color: var(--color-text-muted); font-weight: 400; }

/* Desktop navigation menu — horizontal link list */
.nav-menu {
  list-style: none;
  display: flex;
  gap: 2rem;
}
.nav-menu a {
  color: var(--color-text-primary);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent; /* Invisible border for active indicator */
  transition: color 0.2s, border-color 0.2s;
}
/* Active page and hover — accent underline indicator.
   .active class is set by Hugo's $.IsMenuCurrent in header.html */
.nav-menu a:hover,
.nav-menu a.active {
  color: var(--color-accent-light);
  border-bottom-color: var(--color-accent);
}

/* Hamburger menu toggle button — hidden on desktop, shown at 768px breakpoint.
   Uses CSS pseudo-elements (::before, ::after) to create three horizontal bars.
   When aria-expanded="true" (toggled by main.js), the middle bar fades out and
   the top/bottom bars rotate to form an X. */
.nav-toggle {
  display: none;                     /* Hidden on desktop */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}
.hamburger,
.hamburger::before,
.hamburger::after {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text-primary);
  transition: transform 0.3s, opacity 0.3s;
  position: relative;
}
.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  left: 0;
}
.hamburger::before { top: -7px; }   /* Top bar — 7px above middle */
.hamburger::after { top: 7px; }     /* Bottom bar — 7px below middle */

/* X animation when menu is open (aria-expanded="true") */
.nav-toggle[aria-expanded="true"] .hamburger { background: transparent; }           /* Hide middle bar */
.nav-toggle[aria-expanded="true"] .hamburger::before { top: 0; transform: rotate(45deg); }  /* Top bar rotates to \ */
.nav-toggle[aria-expanded="true"] .hamburger::after { top: 0; transform: rotate(-45deg); }  /* Bottom bar rotates to / */

/* ==========================================================================
   4. Hero Section
   ==========================================================================
   Full-width hero banner on the landing page (layouts/index.html).
   Uses a vertical gradient from medium background to deepest for depth.

   HTML structure (layouts/partials/hero.html):
     .hero > .hero-container > .hero-title + .hero-subtitle + .hero-cta
   ========================================================================== */
.hero {
  padding: 6rem 1.5rem 5rem;
  text-align: center;
  background: linear-gradient(180deg, var(--color-bg-medium) 0%, var(--color-bg-deepest) 100%);
  border-bottom: 1px solid var(--color-border);
}
.hero-container { max-width: 720px; margin: 0 auto; }  /* Narrower than page content for readability */
.hero-title {
  font-size: 2.75rem;
  font-weight: 700;
  color: var(--color-text-heading);
  line-height: 1.2;
  margin-bottom: 1.25rem;
}
.hero-subtitle {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  margin-bottom: 2.5rem;
  line-height: 1.6;
}
.hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   5. Buttons
   ==========================================================================
   Two button variants used across the site:
     .btn-primary  — Solid accent background (hero CTA, contact form submit)
     .btn-secondary — Outlined with transparent background (hero CTA alternate)

   Both use the .btn base class for shared properties.
   ========================================================================== */
.btn {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
  cursor: pointer;
  border: none;
  font-family: var(--font-body);     /* Override default button font */
}
.btn-primary {
  background: var(--color-accent);
  color: #fff;
}
.btn-primary:hover {
  background: var(--color-accent-light);
  color: #fff;
  box-shadow: 0 0 20px var(--color-accent-glow);  /* Subtle blue glow on hover */
  transform: translateY(-1px);       /* Slight lift effect */
}
.btn-secondary {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}
.btn-secondary:hover {
  background: var(--color-accent-glow);
  color: var(--color-accent-light);
}

/* ==========================================================================
   6. Services Grid
   ==========================================================================
   Auto-fit responsive grid of service cards on the landing page.
   Cards use CSS Grid auto-fit with a 240px minimum to automatically wrap
   from 4 columns on desktop to fewer columns on smaller screens.

   HTML structure (layouts/partials/services.html):
     .services > .services-container > .section-title + .services-grid > .service-card*
   ========================================================================== */
.services {
  padding: 5rem 1.5rem;
}
.services-container { max-width: var(--max-width); margin: 0 auto; }
.section-title {
  text-align: center;
  font-size: 2rem;
  color: var(--color-text-heading);
  margin-bottom: 3rem;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));  /* Auto-wrap responsive grid */
  gap: 1.5rem;
}
.service-card {
  background: var(--color-bg-dark);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 2rem;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.service-card:hover {
  transform: translateY(-4px);       /* Lift effect on hover */
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
  border-color: var(--color-accent); /* Accent border highlight */
}
.service-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
}
.service-card h3 {
  color: var(--color-text-heading);
  margin-bottom: 0.75rem;
  font-size: 1.15rem;
}
.service-card p {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ==========================================================================
   7. Page Content — Typography
   ==========================================================================
   Default styles for Markdown-rendered content pages. Applied to all pages
   that use the .page-content wrapper (about, company, contact, privacy,
   cookies, blog posts, default single/list layouts).

   Handles headings (h1-h3), paragraphs, lists, blockquotes, code blocks,
   and inline code. Code uses Fira Code monospace font.
   ========================================================================== */
.page-content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 4rem 1.5rem;
}
.page-content h1 {
  font-size: 2.25rem;
  color: var(--color-text-heading);
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);  /* Underline separator for page titles */
}
.page-content h2 {
  font-size: 1.5rem;
  color: var(--color-text-heading);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.page-content h3 {
  font-size: 1.2rem;
  color: var(--color-text-heading);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.page-content p {
  margin-bottom: 1rem;
}
.page-content ul, .page-content ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}
.page-content li {
  margin-bottom: 0.4rem;
}
/* Blockquotes — left accent border with dark background */
.page-content blockquote {
  border-left: 3px solid var(--color-accent);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  background: var(--color-bg-dark);
  border-radius: 0 6px 6px 0;
}
/* Code blocks (``` fenced code in Markdown) */
.page-content pre {
  background: var(--color-bg-dark);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 1.25rem;
  overflow-x: auto;                  /* Horizontal scroll for long lines */
  margin-bottom: 1.5rem;
}
.page-content code {
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 0.9em;
}
/* Inline code (single backtick `code` in Markdown) — different from code blocks */
.page-content :not(pre) > code {
  background: var(--color-bg-medium);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
}

/* ==========================================================================
   8. About Page
   ==========================================================================
   Styles for the consultant bio page (layouts/pages/about.html).
   Includes header layout, summary paragraph, certification badges,
   career timeline with vertical line and dot markers, affiliations list,
   and awards list with star icons.

   Data comes from content/about.md front matter arrays, iterated in the
   about.html layout template.
   ========================================================================== */

/* Header — flex layout for potential future headshot image alongside title */
.about-header {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin-bottom: 2rem;
}
/* Bio summary paragraph — slightly larger text for emphasis */
.about-summary {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-text-primary);
  margin-bottom: 2rem;
}
/* Certification badges — horizontal wrapping list of small accent-colored chips */
.cert-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.cert-badge {
  background: var(--color-bg-medium);
  border: 1px solid var(--color-border);
  padding: 0.3rem 0.75rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-accent);        /* Accent-colored text for visual distinction */
}

/* Career timeline — vertical line with dot markers at each position.
   Uses CSS ::before pseudo-element for the timeline dot (8px blue circle). */
.career-item {
  border-left: 2px solid var(--color-border);  /* Vertical timeline line */
  padding-left: 1.5rem;
  margin-bottom: 2rem;
  position: relative;
}
.career-item::before {
  content: '';
  position: absolute;
  left: -5px;                        /* Centered on the 2px border-left */
  top: 6px;
  width: 8px;
  height: 8px;
  background: var(--color-accent);   /* Blue dot marker */
  border-radius: 50%;
}
.career-item h3 {
  margin-top: 0;
}
.career-dates {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}
.career-role {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.95rem;
}

/* Affiliations — clean list with bottom borders between items */
.affiliations-list {
  list-style: none;
  padding: 0;
}
.affiliations-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

/* Awards — list with star (★) icon markers using CSS ::before */
.awards-list {
  list-style: none;
  padding: 0;
}
.awards-list li {
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
}
.awards-list li::before {
  content: '★';
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

/* ==========================================================================
   9. Blog
   ==========================================================================
   Styles for the blog listing page (layouts/posts/list.html) and individual
   blog posts (layouts/posts/single.html).

   Post cards are used on both the blog listing and the default list layout.
   Tags are rendered as small accent-colored chips.

   CSS classes:
     .post-list    — Container for the blog listing page
     .post-card    — Individual post preview card (used in list views)
     .post-header  — Title + metadata section on single post pages
     .post-body    — Full post content on single post pages
     .post-meta    — Date, author metadata line
     .post-tags    — Flexbox container for tag chips
     .post-tag     — Individual tag chip
     .post-excerpt — Preview text on list pages (from Hugo .Summary)
   ========================================================================== */

/* Blog listing page container */
.post-list {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 4rem 1.5rem;
}
.post-list h1 {
  font-size: 2.25rem;
  color: var(--color-text-heading);
  margin-bottom: 2rem;
}

/* Post card — used in blog listing and default list layouts */
.post-card {
  background: var(--color-bg-dark);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.post-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.post-card h2 {
  margin-bottom: 0.5rem;
}
.post-card h2 a {
  color: var(--color-text-heading);
}
.post-card h2 a:hover {
  color: var(--color-accent-light);
}

/* Post metadata — date, author, shared between list and single views */
.post-meta {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}
.post-excerpt {
  color: var(--color-text-primary);
  font-size: 0.95rem;
}

/* Single post header — title area with bottom border separator */
.post-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}
.post-header h1 {
  border: none;                      /* Override .page-content h1 border */
  padding: 0;
  margin-bottom: 0.5rem;
}

/* Single post body — slightly larger text and increased line-height for readability */
.post-body {
  font-size: 1.05rem;
  line-height: 1.8;
}
.post-body h2 { margin-top: 2.5rem; }

/* Tag chips — used in both list and single post views */
.post-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.post-tag {
  background: var(--color-accent-glow);  /* Translucent accent background */
  color: var(--color-accent);
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  font-size: 0.8rem;
}

/* ==========================================================================
   10. Contact Form
   ==========================================================================
   Styles for the contact form (layouts/partials/contact-form.html).
   Form submits via AJAX to /api/contact (handled by static/js/main.js).
   Includes input/textarea styling, focus states with accent glow, and
   success/error status message boxes.

   The .h-captcha class provides spacing for the hCaptcha widget, which is
   injected by the hCaptcha JS SDK loaded conditionally in contact-form.html.
   hCaptcha theming: https://docs.hcaptcha.com/configuration#thememode
   ========================================================================== */
.contact-form {
  max-width: 600px;                  /* Narrower than page content for form readability */
}
.form-group {
  margin-bottom: 1.5rem;
}
.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--color-text-heading);
  font-size: 0.9rem;
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--color-bg-dark);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
/* Focus state — accent border with translucent glow ring */
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-glow);  /* Focus ring */
}
.form-group textarea {
  min-height: 150px;
  resize: vertical;                  /* Allow vertical resize only */
}

/* Form status messages — shown/hidden by main.js after form submission.
   Hidden by default (display: none); .success or .error class makes them visible. */
.form-status {
  padding: 1rem;
  border-radius: 6px;
  margin-top: 1rem;
  display: none;                     /* Hidden until form submission completes */
}
.form-status.success {
  display: block;
  background: rgba(46, 160, 67, 0.15);    /* Green tint background */
  border: 1px solid rgba(46, 160, 67, 0.4);
  color: #3fb950;                    /* GitHub-style green for success */
}
.form-status.error {
  display: block;
  background: rgba(248, 81, 73, 0.15);    /* Red tint background */
  border: 1px solid rgba(248, 81, 73, 0.4);
  color: #f85149;                    /* GitHub-style red for errors */
}

/* hCaptcha widget container — spacing only; widget is rendered by hCaptcha SDK */
.h-captcha {
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   10b. Contact Form — Confirmation Modal
   ==========================================================================
   Full-screen overlay modal shown after successful contact form submission.
   Requires the user to acknowledge receipt by clicking "OK", clicking the
   backdrop, or pressing Escape. Shown/hidden by static/js/main.js via the
   .visible class.

   HTML structure (layouts/partials/contact-form.html):
     .modal-overlay > .modal-content > h3 + p + button

   z-index: 2000 — above the cookie consent banner (1000) and header (100)
   to ensure the confirmation is always the topmost element.
   ========================================================================== */
.modal-overlay {
  display: none;                     /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);   /* Semi-transparent dark backdrop */
  z-index: 2000;                     /* Above everything including cookie banner */
  justify-content: center;
  align-items: center;
}
.modal-overlay.visible {
  display: flex;                     /* Centered flexbox layout when visible */
}
.modal-content {
  background: var(--color-bg-dark);
  border: 1px solid var(--color-accent);
  border-radius: 8px;
  padding: 2.5rem;
  max-width: 440px;
  width: 90%;
  text-align: center;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6), 0 0 30px var(--color-accent-glow);
}
.modal-content h3 {
  color: var(--color-text-heading);
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.modal-content p {
  color: var(--color-text-primary);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.75rem;
}
.modal-content .btn {
  min-width: 120px;                  /* Ensure button has a comfortable click target */
}

/* ==========================================================================
   11. Company Info Card
   ==========================================================================
   Styled card for the company information page (layouts/pages/company.html).
   Displays mailing address and phone number pulled from hugo.toml
   [params.company] via .Site.Params.company.address and .phone.
   ========================================================================== */
.company-info-card {
  background: var(--color-bg-dark);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 1.5rem;
}
.company-info-card h3 {
  margin-top: 0;
  color: var(--color-accent);        /* Accent-colored card heading */
}
.company-detail {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.company-detail-label {
  font-weight: 600;
  color: var(--color-text-heading);
  min-width: 80px;                   /* Consistent label alignment */
}

/* ==========================================================================
   12. Cookie Consent Banner
   ==========================================================================
   GDPR-compliant cookie consent banner fixed to the bottom of the viewport.
   Shown/hidden by static/js/cookie-consent.js via the .visible class.

   GDPR compliance notes:
     - Banner blocks no cookies until consent is given
     - Accept All and Reject All buttons have equal visual prominence
     - Users can reopen via "Cookie Settings" button in the footer
     - Consent state is stored in a first-party cookie (cookie_consent)

   HTML structure (layouts/partials/cookie-consent.html):
     .cookie-banner > .cookie-banner-content > .cookie-banner-text + .cookie-banner-actions

   z-index: 1000 — highest z-index in the site (header is 100) to ensure
   the banner is always visible above all other content.
   ========================================================================== */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-bg-dark);
  border-top: 1px solid var(--color-border);
  padding: 1.25rem 1.5rem;
  z-index: 1000;                     /* Above everything, including sticky header */
  display: none;                     /* Hidden by default; .visible shows it */
  box-shadow: 0 -4px 20px rgba(0,0,0,0.5);  /* Upward shadow for depth */
}
.cookie-banner.visible { display: block; }
.cookie-banner-content {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;                   /* Wraps to column on narrow screens */
}
.cookie-banner-text {
  flex: 1;
  min-width: 250px;                  /* Prevents text from getting too narrow */
  font-size: 0.9rem;
  color: var(--color-text-primary);
}
.cookie-banner-text a {
  color: var(--color-accent);        /* Links to cookie/privacy policy pages */
}
.cookie-banner-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Cookie banner buttons — equal visual weight for GDPR compliance.
   Both use .cookie-btn base class with variant modifiers. */
.cookie-btn {
  padding: 0.5rem 1.25rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: var(--font-body);
  transition: background 0.2s;
}
/* Accept button — accent background (same weight as reject, per GDPR) */
.cookie-btn-accept {
  background: var(--color-accent);
  color: #fff;
}
.cookie-btn-accept:hover { background: var(--color-accent-light); }
/* Reject button — subtle dark background with border (equal prominence to accept) */
.cookie-btn-reject {
  background: var(--color-bg-medium);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}
.cookie-btn-reject:hover { background: var(--color-bg-hover); }

/* ==========================================================================
   13. Footer
   ==========================================================================
   Site footer (layouts/partials/footer.html). Contains copyright notice,
   company address, policy links (privacy/cookies), and the "Cookie Settings"
   button that reopens the consent banner.

   Uses flexbox with wrap for responsive layout — stacks to column on mobile.
   The margin-top: auto on .site-footer works with the body flexbox to push
   the footer to the bottom even on short pages (sticky footer pattern).
   ========================================================================== */
.site-footer {
  background: var(--color-bg-dark);
  border-top: 1px solid var(--color-border);
  padding: 2rem 1.5rem;
  margin-top: auto;                  /* Pushes footer to bottom (flexbox sticky footer) */
}
.footer-container {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;    /* Info left, links right */
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-info p {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.footer-address { margin-top: 0.25rem; }
.footer-links {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}
.footer-links a {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.footer-links a:hover { color: var(--color-accent-light); }

/* Cookie Settings button in footer — styled as a text link, not a standard button.
   Triggers cookie-consent.js to reopen the banner via #open-cookie-settings ID. */
.cookie-settings-btn {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  font-family: var(--font-body);
  transition: color 0.2s;
}
.cookie-settings-btn:hover { color: var(--color-accent-light); }

/* ==========================================================================
   14. Responsive Media Queries
   ==========================================================================
   Two breakpoints handle the responsive layout:

   768px (tablet):
     - Show hamburger menu, hide horizontal nav
     - Nav menu becomes a vertical dropdown below header
     - Reduce hero padding and font sizes
     - Stack footer to centered column layout
     - Stack cookie banner content vertically
     - Stack about page header vertically

   480px (phone):
     - Further reduce hero title size
     - Force services grid to single column
     - Stack hero CTA buttons vertically
   ========================================================================== */
@media (max-width: 768px) {
  /* Show hamburger toggle button on tablet/mobile */
  .nav-toggle { display: block; }

  /* Convert horizontal nav to vertical dropdown.
     Hidden by default; .open class (toggled by main.js) makes it visible. */
  .nav-menu {
    display: none;
    position: absolute;
    top: var(--header-height);       /* Dropdown starts below the header */
    left: 0;
    right: 0;
    background: var(--color-bg-dark);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    padding: 1rem 1.5rem;
    gap: 0;
  }
  .nav-menu.open { display: flex; } /* Shown when hamburger is clicked */
  .nav-menu li a {
    display: block;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border);  /* Dividers between items */
  }
  .nav-menu li:last-child a { border-bottom: none; }

  /* Reduce hero section spacing and font sizes */
  .hero { padding: 4rem 1.5rem 3rem; }
  .hero-title { font-size: 2rem; }
  .hero-subtitle { font-size: 1rem; }

  /* Reduce page content padding */
  .page-content { padding: 2.5rem 1.5rem; }
  .page-content h1 { font-size: 1.75rem; }

  /* Stack footer to centered column */
  .footer-container { flex-direction: column; text-align: center; }
  .footer-links { justify-content: center; }

  /* Stack cookie banner content vertically on narrow screens */
  .cookie-banner-content { flex-direction: column; text-align: center; }
  .cookie-banner-actions { justify-content: center; }

  /* Stack about page header (for future headshot + title layout) */
  .about-header { flex-direction: column; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 1.6rem; }
  .services-grid { grid-template-columns: 1fr; }  /* Single column on phone */
  .hero-cta { flex-direction: column; align-items: center; }  /* Stack CTA buttons */
}