/* static/css/main.css */

/* ==========================================================================
   Global font variables for public site
   Loaded via <link> tags in templates/base.html
   ========================================================================== */

   :root {
    /* ----------------------------------------------------------------------
       Core UI sans-serif stack
       ----------------------------------------------------------------------
       Usage example:
       body { font-family: var(--font-sans-inter); }
    ---------------------------------------------------------------------- */
    --font-sans-inter:
        "Inter",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-sans-roboto:
        "Roboto",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-sans-open-sans:
        "Open Sans",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-sans-lato:
        "Lato",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-sans-source-sans-3:
        "Source Sans 3",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-sans-work-sans:
        "Work Sans",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-sans-nunito:
        "Nunito",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-sans-poppins:
        "Poppins",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-sans-raleway:
        "Raleway",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    /* ----------------------------------------------------------------------
       Extra sans / modern UI fonts
       ----------------------------------------------------------------------
       Usage example:
       .nav-label { font-family: var(--font-sans-dm-sans); }
       .pill-small { font-family: var(--font-sans-plus-jakarta); }
    ---------------------------------------------------------------------- */
    --font-sans-dm-sans:
        "DM Sans",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-sans-plus-jakarta:
        "Plus Jakarta Sans",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-sans-outfit:
        "Outfit",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-sans-rubik:
        "Rubik",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-sans-montserrat:
        "Montserrat",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-sans-noto-sans:
        "Noto Sans",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-sans-space-grotesk:
        "Space Grotesk",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-sans-bricolage-grotesque:
        "Bricolage Grotesque",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-sans-instrument-sans:
        "Instrument Sans",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;


    /* Custom fonts (added via Front UI Settings) — do not edit manually below */

    --font-sans-tangerine:
        "Tangerine",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    /* ----------------------------------------------------------------------
       Serif fonts (for headings, highlights, long-form copy)
       ----------------------------------------------------------------------
       Usage example:
       h1, h2 { font-family: var(--font-serif-playfair); }
       .feature-intro { font-family: var(--font-serif-lora); }
    ---------------------------------------------------------------------- */
    --font-serif-merriweather:
        "Merriweather",
        "Georgia",
        "Times New Roman",
        serif;

    --font-serif-lora:
        "Lora",
        "Georgia",
        "Times New Roman",
        serif;

    --font-serif-crimson-text:
        "Crimson Text",
        "Georgia",
        "Times New Roman",
        serif;

    --font-serif-crimson-pro:
        "Crimson Pro",
        "Georgia",
        "Times New Roman",
        serif;

    --font-serif-playfair:
        "Playfair Display",
        "Georgia",
        "Times New Roman",
        serif;

    --font-serif-dm-serif-text:
        "DM Serif Text",
        "Georgia",
        "Times New Roman",
        serif;

    --font-serif-dm-serif-display:
        "DM Serif Display",
        "Georgia",
        "Times New Roman",
        serif;

    --font-serif-newsreader:
        "Newsreader",
        "Georgia",
        "Times New Roman",
        serif;

    --font-serif-roboto-serif:
        "Roboto Serif",
        "Georgia",
        "Times New Roman",
        serif;

    /* ----------------------------------------------------------------------
       Display / condensed fonts (badges, labels, loud headings)
       ----------------------------------------------------------------------
       Usage example:
       .badge-label { font-family: var(--font-display-oswald); }
       .hero-kicker { font-family: var(--font-display-bebas); text-transform: uppercase; }
    ---------------------------------------------------------------------- */
    --font-display-oswald:
        "Oswald",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-display-bebas:
        "Bebas Neue",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-display-barlow-condensed:
        "Barlow Condensed",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-display-spartan:
        "Spartan",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-display-instrument-serif:
        "Instrument Serif",
        "Georgia",
        "Times New Roman",
        serif;

    /* ----------------------------------------------------------------------
       Monospace fonts (code blocks, technical labels, “nerd pills”)
       ----------------------------------------------------------------------
       Usage example:
       code, pre { font-family: var(--font-mono-jetbrains); }
       .code-pill { font-family: var(--font-mono-fira-code); }
    ---------------------------------------------------------------------- */
    --font-mono-jetbrains:
        "JetBrains Mono",
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        "Courier New",
        monospace;

    --font-mono-azeret:
        "Azeret Mono",
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        "Courier New",
        monospace;

    --font-mono-fira-code:
        "Fira Code",
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        "Courier New",
        monospace;

    --font-mono-source-code:
        "Source Code Pro",
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        "Courier New",
        monospace;

    /* ----------------------------------------------------------------------
       Site-wide semantic aliases
       ----------------------------------------------------------------------
       These give you a single switch for global typography.
       Change the right-hand side to swap the site’s main fonts.
       ----------------------------------------------------------------------
       Usage:
         body, main, footer, content headings -> var(--font-content)
         header, .sub-header                   -> var(--font-header)
         code, pre                            -> var(--font-mono)
         .plan-pill                           -> var(--font-pill)
    ---------------------------------------------------------------------- */
                --font-content: var(--font-sans-inter);
                /* All content outside header/sub-header; single switch to change content font */
                --font-header: var(--font-sans-nunito);
                /* Header and sub-header only */
                --font-body: var(--font-content);
                /* Alias; body/main/footer use this */
                --font-heading: var(--font-content);
                /* Content headings use content font; header* overridden below */
                --font-pill: var(--font-sans-plus-jakarta);
                --font-accent: var(--font-sans-space-grotesk);
    --font-mono:        var(--font-mono-jetbrains);

    /* ----------------------------------------------------------------------
       Typography scale (text-size families)
       ----------------------------------------------------------------------
       Change these to resize headings and body text site-wide. Use
       --text-scale on a page (e.g. body.about-page { --text-scale: 0.875 })
       to scale all sizes at once (0.75 = smaller, 1 = default, 1.125 = larger).
       ---------------------------------------------------------------------- */
    --text-scale:       1.0;
    /* H1–5 headings (canonical sizes from research, H3 = 16px reference) */
    --text-h1:          2.05rem;   /* 24px, 600 — page title */
    --text-h2:          1.25rem;  /* 20px, 600 — section heading */
    --text-h3:          1.05rem;    /* 16px, 400 — reference / subsection */
    --text-h4:          0.9375rem; /* 15px, 500 — minor heading */
    --text-h5:          0.875rem;  /* 14px, 500 — smallest heading */
    /* B1–5 body (canonical sizes, B2 = 16px reference) */
    --text-body-1:      1.0rem; /* 17px, 400 — lead / large body */
    --text-body-2:      1rem;      /* 16px, 400 — default body */
    --text-body-3:      0.95rem; /* 15px, 400 — secondary body */
    --text-body-4:      0.9375rem; /* 15px, 400 — small body */
    --text-body-5:      0.875rem;  /* 14px, 400 — smallest body (14px minimum) */

    /* ----------------------------------------------------------------------
       Header & sub-header text sizes (separate from content typography)
       ----------------------------------------------------------------------
       These control only the site header (brand, nav links) and the
       sub-header bar. They do not use --text-scale.
       ---------------------------------------------------------------------- */
                --text-header-brand: 1.75rem;
                /* "Hike Camp Seek" brand text size */
                --text-header-brand-weight: 500;
                /* "Hike Camp Seek" brand text weight */
                --color-brand-text: var(--hcs-primary);
                /* "Hike Camp Seek" brand text colour */
                --text-header-links: 1.0rem;
                /* Home, About, Log in, etc. */
                --text-sub-header: 1.0rem;
                /* Sub-header bar base (e.g. alert count) */
    --text-sub-header-title: 1.75rem; /* Sub-header page title (e.g. "ABOUT US | MISSION STATEMENT") */

    /* ----------------------------------------------------------------------
       Header spacing (separate from content)
       ----------------------------------------------------------------------
       Gap between logo and brand text; gap between nav links.
       ---------------------------------------------------------------------- */
    --header-brand-gap:   0.8rem;  /* space between logo and "Hike Camp Seek" */
    --header-links-gap:   1.2rem;   /* space between Home, About, Log in, etc. */

    /* ----------------------------------------------------------------------
       Other text (not in typography scale)
       ----------------------------------------------------------------------
       Base html size (px), footer scale, user menu sizes, hero/CTA.
       ---------------------------------------------------------------------- */
    --base-font-size:     16px;    /* html/body root font-size */
    --text-footer-scale:  1.0;    /* footer: var(--text-body-3) * this * --text-scale */
    --text-user-menu-avatar: 1.05rem;   /* avatar circle label */
                --text-user-menu-label: 1.0rem;
                /* "Logged in as" label */
                --text-user-menu-item: 1.0rem;
                /* dropdown item text */
        --text-home-hero-h1: 2.2;
        /* home page hero h1 size multiplier */
        --text-home-hero-h2: 1.8;
        /* home page hero h2 size multiplier */
        /* Home page hero margins (main.css) — .home-hero-text h1/h2 */
        --margin-home-hero-h1-top: 1.0rem;
        --margin-home-hero-h1-bottom: 1.0rem;
        --margin-home-hero-h2-top: 1.0rem;
        --margin-home-hero-h2-bottom: 1.0rem;
        /* Home page hero image cards — .home-hero-image-card max-width (px) */
        --home-hero-card-max-width: 500px;
    --text-plan-pill:     1.2rem;  /* hero CTA / plan pill button */

    /* Font family for each "other text" area (suffix → var(--font-sans-{suffix})) */
    --font-footer:            var(--font-sans-inter);
    --font-user-menu-avatar:  var(--font-sans-inter);
    --font-user-menu-label:   var(--font-sans-inter);
    --font-user-menu-item:    var(--font-sans-inter);
    --font-hero-h1:           var(--font-sans-inter);
                --font-home-hero-h1: var(--font-sans-montserrat);
                --font-home-hero-h2: var(--font-sans-montserrat);
                --font-brand-text: var(--font-sans-montserrat);
                /* "Hike Camp Seek" brand text in header */
                --font-plan-pill: var(--font-sans-inter);
                /* was --font-pill; now editable here */
                /* ==================================================================       HCS Colour Scheme — Semantic Role Tokens (Tier 2)
       7 groups × 30 tokens (25 + 3 cascade card tokens).
       These are the palette-level design tokens. Component tokens below
       reference these via var() so a palette swap cascades everywhere.
       See docs/Colour_Scheme_Audit.md §1a for full mapping.
       ================================================================== */

    /* --- Group 1: Primary / Brand (Hunter Green) --- */
                --hcs-primary: #1f5d4e;
                /* base fill: nav links, primary buttons, brand */
    --hcs-on-primary:             #ffffff;   /* text/icons ON primary fill */
                --hcs-primary-container: #eaf0ef;
                /* light tint: subtle highlight, hover bg */
                --hcs-on-primary-container: #12211d;
                /* text ON primary container */
                --hcs-primary-border: #314e47;
                /* border beside primary elements */
                --hcs-primary-hover: #194a3e;
                /* darker green for hover states */

    /* --- Group 2: Accent / Warm (Burnt Caramel) --- */
                --hcs-accent: #609d96;
                /* base fill: auth submit, warm actions */
                --hcs-on-accent: #ffffff;
                /* text ON accent fill */
                --hcs-accent-container: #d7e0df;
                /* light tint: header bg, warm surface */
                --hcs-on-accent-container: #21312f;
                /* text ON accent container: headings */
                --hcs-accent-border: #293d3b;
                /* border: auth card border */

    /* --- Group 3: Earth / Muted (Golden Earth) --- */
                --hcs-earth: #8fa68a;
                /* base fill: plan pills */
                --hcs-on-earth: #ffffff;
                /* text ON earth fill */
                --hcs-earth-container: #e7f1e4;
                /* light tint: plan badge bg */
                --hcs-on-earth-container: #23381e;
                /* text ON earth container */
                --hcs-earth-border: #2d4927;
                /* border: plan pill border */
                --hcs-earth-hover: #7c9776;
                /* darker gold for hover states */

    /* --- Group 4: Surface / Light (Dust Grey) --- */
                --hcs-surface: #ffffff;
                /* base fill: cards, panels */
                --hcs-on-surface: #111827;
                /* text ON surface: body text, headings */
                --hcs-surface-container: #f4f5f5;
                /* alt surface: hover, dropdown bg */
                --hcs-on-surface-container: #3e434c;
                /* text ON alt surface (muted) */
                --hcs-surface-border: #e7e8e9;
                /* border: card, table, separator */

    /* --- Group 5: Dark / Contrast (Carbon Black) --- */
                --hcs-dark: #2e3230;
                /* base fill: CTA bg, dark panels */
                --hcs-on-dark: #f8fafc;
                /* text ON dark fill */
                --hcs-dark-container: #39463f;
                /* alt dark: slightly lighter panel */
                --hcs-on-dark-container: #e6eae8;
                /* muted text ON dark container */
                --hcs-dark-border: #526059;
                /* border: dark element borders */

    /* --- Group 6: Auth Cascade Outer (home cascade card) --- */
    --hcs-cascade-outer-border: #002b2b;
    --hcs-cascade-bg: #002b2b;
    /* --- Group 7: Auth Cascade Inner (home cascade card) --- */
    --hcs-cascade-inner-border: #ffdbca;

    /* ----------------------------------------------------------------------
       Text colours (main.css) — editable in Front UI Settings
       ---------------------------------------------------------------------- */
    --color-body:              var(--hcs-on-surface);
    --color-heading:           var(--hcs-on-surface);
    --color-footer-text:       var(--hcs-on-dark);  /* light text on dark/earth-toned footer (used site-wide) */
    --color-user-menu-avatar:  var(--hcs-on-primary);
    --color-user-menu-label:   var(--hcs-on-surface);
    --color-user-menu-item:    var(--hcs-on-surface);
    --color-user-menu-danger:  #b91c1c;
    --color-hero-text:         var(--hcs-on-dark);  /* light text over dark hero image */
        --color-home-hero-h1: var(--hcs-primary-container);  /* primary-tinted hero heading */
    --color-home-hero-h2:      var(--hcs-earth-container);  /* warm earth-tinted hero subheading */
    --color-btn-primary-text:  var(--hcs-on-primary);

    /* ----------------------------------------------------------------------
       UI colours — backgrounds, borders, buttons (main.css)
       ---------------------------------------------------------------------- */
    --color-body-bg:                   var(--hcs-surface-container);
    --color-header-bg:                 var(--hcs-accent-container);  /* Site header / top bar (base.html .top-nav) */
    --color-header-bg-opacity:         0.8;  /* Opacity for header background (0.0-1.0) */
    --color-header-text:               var(--hcs-primary);  /* Site header links and brand text */
        --color-sub-header-bg: var(--hcs-primary-container);  /* light primary tint for sub-header bar */
        /* Sub-header bar under top nav (base.html .sub-header) */
    --color-sub-header-bg-opacity:     0.75;  /* Opacity for sub-header background (0.0-1.0) */
    --header-underline-display:        none; /* Toggle header/sub-header divider line: block | none */
                --color-footer-bg: var(--hcs-dark);
                /* solid dark footer background (matches auth pages) */
                --color-footer-bg-opacity: 1.0;
                /* Opacity for footer background (0.0-1.0) */
                --color-footer-border: var(--hcs-dark-border);
                /* dark border for footer top edge */
    --color-user-menu-avatar-bg:       var(--hcs-dark-container);
    --color-user-menu-dropdown-bg:     var(--hcs-surface);
    --color-user-menu-item-hover-bg:   var(--hcs-surface-container);
    --color-user-menu-danger-hover-bg: #fee2e2;
    --color-user-menu-separator:       var(--hcs-surface-border);
    --color-card-bg:                   var(--hcs-surface);
    --color-card-border:               var(--hcs-surface-border);
    --color-btn-primary-bg:            #2563eb;
    --color-btn-primary-hover-bg:      #1d4ed8;
    --color-plan-pill-bg:              var(--hcs-earth-container);
    --color-plan-pill-border:          var(--hcs-earth-border);
    --color-hero-action-border:        #ffffff;
    --color-hero-action-bg:            var(--hcs-on-primary-container);
    --color-hero-action-primary-bg:    var(--hcs-accent);
    --color-hero-action-primary-border:#ffffff;

    /* ----------------------------------------------------------------------
       Colour scheme by category (alert_list, saved_trips, alert_form, etc.)
       See docs/Colour_Scheme_Audit.md
       ---------------------------------------------------------------------- */
    --color-plan-pill-primary-bg:       var(--hcs-earth);
    --color-plan-pill-primary-text:     var(--hcs-on-earth);
    --color-plan-pill-primary-border:   var(--hcs-earth-border);
    --color-plan-pill-primary-hover-bg: var(--hcs-earth-hover);
    --color-status-badge-active-bg:     #dcfce7;
    --color-status-badge-active-text:   #166534;
    --color-status-badge-expired-bg:     #fee2e2;
    --color-status-badge-expired-text:   #b91c1c;
    --color-btn-danger-bg:              #fee2e2;
    --color-btn-danger-text:            #b91c1c;
    --color-btn-danger-border:          #b91c1c;
    --color-validation-success-bg:      #dcfce7;
    --color-validation-success-text:    #166534;
    --color-form-input-border:          var(--hcs-surface-border);
    --color-table-border:               var(--hcs-surface-border);
}

/* ==========================================================================
   Base element styles
   ========================================================================== */

html,
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-content);        /* Inter for all content; change via --font-content in :root */
    font-size: var(--base-font-size);
    line-height: 1.5;
    color: var(--color-body);
    background-color: var(--color-body-bg);
}

/* Force form controls to inherit font from parent.
   Chrome (and other Blink/WebKit browsers) do NOT inherit font properties
   into input, select, textarea, and button by default — they use the
   browser agent stylesheet (~13.333px). Firefox does inherit.
   This reset ensures consistent rendering across all browsers. */
input,
select,
textarea,
button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* Content area: main uses content font; footer uses --font-footer (editable in Front UI) */
.site-main {
    font-family: var(--font-content);
}
.site-footer {
    font-family: var(--font-footer);
}

/* All headings use content font by default */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-content);
    margin: 0 0 0.5rem;
    color: var(--color-heading);
}

/* Header and sub-header (only) use header font */
header,
header *,
.sub-header,
.sub-header * {
    font-family: var(--font-header);
}

code,
pre,
kbd,
samp {
    font-family: var(--font-mono);           /* Monospace for code */
}

/* ==========================================================================
   Typography scale utilities (H1–5 headings, B1–5 body)
   ==========================================================================
   Canonical sizes and weights from research (Section 8, Typography doc).
   Each class sets font-family, font-size, font-weight explicitly.
   Set --text-scale on a container (e.g. body.about-page { --text-scale: 0.75 }) to scale all.
   ========================================================================== */
.h1,
.text-h1 { font-family: var(--font-content); font-size: calc(var(--text-h1) * var(--text-scale, 1)); font-weight: 600; }
.h2,
.text-h2 {
    font-family: var(--font-content);
    font-size: calc(var(--text-h2) * var(--text-scale, 1));
    font-weight: 600;
}
.h3,
.text-h3 { font-family: var(--font-content); font-size: calc(var(--text-h3) * var(--text-scale, 1)); font-weight: 400; }
.h4,
.text-h4 { font-family: var(--font-content); font-size: calc(var(--text-h4) * var(--text-scale, 1)); font-weight: 500; }
.h5,
.text-h5 { font-family: var(--font-content); font-size: calc(var(--text-h5) * var(--text-scale, 1)); font-weight: 500; }
.b1,
.text-body-1 { font-family: var(--font-content); font-size: calc(var(--text-body-1) * var(--text-scale, 1)); font-weight: 400; }
.b2,
.text-body-2 { font-family: var(--font-content); font-size: calc(var(--text-body-2) * var(--text-scale, 1)); font-weight: 400; }
.b3,
.text-body-3 { font-family: var(--font-content); font-size: calc(var(--text-body-3) * var(--text-scale, 1)); font-weight: 400; }
.b4,
.text-body-4 { font-family: var(--font-content); font-size: calc(var(--text-body-4) * var(--text-scale, 1)); font-weight: 400; }
.b5,
.text-body-5 { font-family: var(--font-content); font-size: calc(var(--text-body-5) * var(--text-scale, 1)); font-weight: 400; }

/* Sub-header page title (Montserrat at --text-sub-header-title size).
   Use on the text element inside .sub-header__content-inner when the
   sub-header serves as the page title (e.g. "ABOUT US | MISSION STATEMENT").
   Pages that use the sub-header as a small label (alert_list, saved_trips)
   keep the base --text-sub-header size and do not need this class.
   NOTE: Does NOT use --text-scale — header/sub-header text is independent
   of content typography scaling (see ":root" comment block above). */
.sub-header-title,
.text-sub-header-title { font-family: var(--font-header); font-size: var(--text-sub-header-title); font-weight: 400; }

/* Sub-header: allow extra content (e.g. refresh button) alongside title */
.sub-header__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.sub-header__content-inner { flex: 1; }

/* Page refresh button (mobile only, for alert_list and saved_trips_list) */
.page-refresh-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  margin-left: auto;
}
.page-refresh-btn:hover { opacity: 0.8; }
.page-refresh-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.page-refresh-btn svg { width: 22px; height: 22px; }
@media (max-width: 768px) {
  .page-refresh-btn { display: flex; }
}
@media (min-width: 769px) {
  .page-refresh-btn { display: none !important; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    background: color-mix(in srgb, var(--color-footer-bg) calc(var(--color-footer-bg-opacity, 1.0) * 100%), transparent);
    color: var(--color-footer-text);
    padding: 1.5rem 2.5rem;
    font-size: calc(var(--text-body-3) * var(--text-footer-scale) * var(--text-scale, 1));
    border-top: 1px solid var(--color-footer-border);
}

/* ---- Footer: top row (brand + nav) ---- */
.footer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.footer__brand-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: inherit;
    text-decoration: none;
}

.footer__brand-link:hover {
    opacity: 0.85;
}

.footer__logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.footer__brand-text {
    font-family: var(--font-brand-text);
    font-size: var(--text-header-brand);
    font-weight: var(--text-header-brand-weight);
    color: var(--color-footer-text);
}

.footer__nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.footer__nav a {
    color: var(--color-footer-text);
    text-decoration: none;
    font-size: 0.9rem;
    opacity: 0.9;
    transition: opacity 0.15s;
}

.footer__nav a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* ---- Footer: bottom row (copyright + social) ---- */
.footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 1rem;
}

.footer__copyright {
    margin: 0;
    font-size: 0.8rem;
    opacity: 0.75;
}

.footer__social {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.footer__social-link {
    color: var(--color-footer-text);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1.5px solid var(--color-footer-text);
    border-radius: 50%;
    transition: opacity 0.15s;
    opacity: 0.85;
}

.footer__social-link:hover {
    opacity: 1;
}

.footer__social-link svg {
    width: 16px;
    height: 16px;
}

/* Legacy footer link styles (kept for any remaining links) */
.site-footer a {
    color: inherit;
}

.site-footer a:hover {
    text-decoration: none;
}

/* ==========================================================================
   Header user avatar menu
   ========================================================================== */

.top-nav__user-menu {
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-right: 10px;
}

.user-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.35rem 0.5rem;
    margin-right: 10px;
    margin-bottom: -0.3rem; /* allows pointer to move down without leaving hover */
}

.user-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border: none;
    background: transparent;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.user-menu-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    background: var(--color-user-menu-avatar-bg);
    color: var(--color-user-menu-avatar);
    font-size: var(--text-user-menu-avatar);
    font-family: var(--font-user-menu-avatar);
    line-height: 1;
}

.user-menu-avatar-icon {
    flex-shrink: 0;
    display: block;
}

.user-menu-label {
    font-size: var(--text-user-menu-label);
    font-family: var(--font-user-menu-label);
    font-weight: 500;
    color: var(--color-user-menu-label);
}

.user-menu-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    min-width: 10.5rem;
    padding: 0.5rem 0;
    background: var(--color-user-menu-dropdown-bg);
    border-radius: 0.5rem;
    box-shadow:
        0 10px 15px rgba(0, 0, 0, 0.1),
        0 4px 6px rgba(0, 0, 0, 0.05);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.25rem);
    pointer-events: none;
    transition:
        opacity 150ms ease,
        transform 150ms ease,
        visibility 150ms ease;
    z-index: 50;
}

.user-menu:hover .user-menu-dropdown,
.user-menu:focus-within .user-menu-dropdown,
.user-menu.is-open .user-menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.user-menu-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: auto;
    padding: 0.35rem 0.85rem;
    font-size: var(--text-user-menu-item);
    font-family: var(--font-user-menu-item);
    color: var(--color-user-menu-item);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
}

.user-menu-item:hover,
.user-menu-item:focus {
    background: var(--color-user-menu-item-hover-bg);
}

.user-menu-item--danger {
    color: var(--color-user-menu-danger);
}

.user-menu-item--danger:hover,
.user-menu-item--danger:focus {
    background: var(--color-user-menu-danger-hover-bg);
}

.user-menu-separator {
    margin: 0.25rem 0;
    border: none;
    border-top: 1px solid var(--color-user-menu-separator);
}

/* ==========================================================================
   Example utility classes for quick experimentation
   ========================================================================== */

/* Usage:
   <div class="font-inter">...</div>
   <div class="font-playfair">...</div>
   etc.
*/

.font-inter             { font-family: var(--font-sans-inter); }
.font-roboto            { font-family: var(--font-sans-roboto); }
.font-open-sans         { font-family: var(--font-sans-open-sans); }
.font-lato              { font-family: var(--font-sans-lato); }
.font-source-sans-3     { font-family: var(--font-sans-source-sans-3); }
.font-work-sans         { font-family: var(--font-sans-work-sans); }
.font-nunito            { font-family: var(--font-sans-nunito); }
.font-poppins           { font-family: var(--font-sans-poppins); }
.font-raleway           { font-family: var(--font-sans-raleway); }

.font-dm-sans           { font-family: var(--font-sans-dm-sans); }
.font-plus-jakarta      { font-family: var(--font-sans-plus-jakarta); }
.font-outfit            { font-family: var(--font-sans-outfit); }
.font-rubik             { font-family: var(--font-sans-rubik); }
.font-montserrat        { font-family: var(--font-sans-montserrat); }
.font-noto-sans         { font-family: var(--font-sans-noto-sans); }
.font-space-grotesk     { font-family: var(--font-sans-space-grotesk); }
.font-bricolage         { font-family: var(--font-sans-bricolage-grotesque); }
.font-instrument-sans   { font-family: var(--font-sans-instrument-sans); }

.font-merriweather      { font-family: var(--font-serif-merriweather); }
.font-lora              { font-family: var(--font-serif-lora); }
.font-crimson-text      { font-family: var(--font-serif-crimson-text); }
.font-crimson-pro       { font-family: var(--font-serif-crimson-pro); }
.font-playfair          { font-family: var(--font-serif-playfair); }
.font-dm-serif-text     { font-family: var(--font-serif-dm-serif-text); }
.font-dm-serif-display  { font-family: var(--font-serif-dm-serif-display); }
.font-newsreader        { font-family: var(--font-serif-newsreader); }
.font-roboto-serif      { font-family: var(--font-serif-roboto-serif); }

.font-oswald            { font-family: var(--font-display-oswald); }
.font-bebas             { font-family: var(--font-display-bebas); text-transform: uppercase; }
.font-barlow-condensed  { font-family: var(--font-display-barlow-condensed); }
.font-spartan           { font-family: var(--font-display-spartan); }
.font-instrument-serif  { font-family: var(--font-display-instrument-serif); }

.font-jetbrains         { font-family: var(--font-mono-jetbrains); }
.font-azeret            { font-family: var(--font-mono-azeret); }
.font-fira-code         { font-family: var(--font-mono-fira-code); }
.font-source-code       { font-family: var(--font-mono-source-code); }

/* ==========================================================================
   Example component hook-up: .plan-pill
   ========================================================================== */

/* Usage:
   <span class="plan-pill">Starter</span>
   To change the pill font:
   .plan-pill { font-family: var(--font-pill); }
   Or directly:
   .plan-pill { font-family: var(--font-sans-poppins); }
*/


.page {
    max-width: 900px;
    margin: 2rem auto;
    padding: 1.5rem;
    font-family: var(--font-sans-inter);
}

.page-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.hero-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.home-hero-text {
    text-align: center;
    color: var(--color-hero-text);
    text-shadow: 0 8px 16px rgba(0, 0, 0, 0.45);
    margin: 60px auto 0;
    padding: 0 1rem;
    max-width: 960px;
    box-sizing: border-box;
}

.home-hero-text h1 {
    text-align: center;
    color: var(--color-hero-text);
    text-shadow: 0 8px 16px rgba(0, 0, 0, 0.45);
    margin: var(--margin-home-hero-h1-top, 0) auto var(--margin-home-hero-h1-bottom, 0.5rem) 0;
    padding: 0 1rem;
    max-width: 900px;
    font-size: calc(var(--text-h1) * var(--text-home-hero-h1, 2.5) * var(--text-scale, 1));
    font-family: var(--font-home-hero-h1, var(--font-content));
    letter-spacing: 0.05em;
    box-sizing: border-box;
}

.home-hero-text h2 {
    text-align: center;
    color: var(--color-hero-text);
    text-shadow: 0 8px 16px rgba(0, 0, 0, 0.45);
    margin: var(--margin-home-hero-h2-top, 0) auto var(--margin-home-hero-h2-bottom, 0) 0;
    padding: 0 1rem;
    max-width: 640px;
    line-height: 1.4;
    box-sizing: border-box;
}

.home-hero-actions {
    margin: 3.5rem auto 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    max-width: 960px;
    width: 100%;
}

.home-hero-action-row {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
}

.home-hero-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 300px;
    height: 70px;
    padding: 0;
    border-radius: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: rgba(13, 33, 9, 0.55);
    color: var(--color-hero-text);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 16px 24px rgba(0, 0, 0, 0.25);
}

.home-hero-action:hover,
.home-hero-action:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 22px 30px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.home-hero-action--primary {
    background: color-mix(in srgb, var(--color-hero-action-primary-bg) 70%, transparent);
    border-color: color-mix(in srgb, var(--color-hero-action-primary-border) 95%, transparent);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    width: 300px;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
}

.home-hero-action--primary:hover,
.home-hero-action--primary:focus-visible {
    box-shadow: 0 22px 30px rgba(191, 131, 90, 0.45);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}


.card {
    background: var(--color-card-bg);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--color-card-border);
}

.card h1,
.card h2 {
    margin-top: 0;
    margin-bottom: 1rem;
}

.btn-primary {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    background: var(--color-btn-primary-bg);
    color: var(--color-btn-primary-text);
    font-weight: 500;
}

.btn-primary:hover {
    background: var(--color-btn-primary-hover-bg);
}

.plan-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5rem;
    min-height: 1.9rem;
    margin-left: 0.5rem;
    padding: 0.35rem 1.25rem;
    border-radius: 999px;
    background: var(--color-plan-pill-bg);
    border: 1px solid var(--color-plan-pill-border);
    font-size: var(--text-plan-pill);
    font-weight: 510;      /* semi-bold; use 700 for full bold, I think 500 is normal */
    font-family: var(--font-plan-pill);  /* editable in Front UI Settings → Other text */
  }

/* Public pages: Feather-style label icons (home, about, faqs, account) */
.public-label-icon {
  display: inline-block;
  vertical-align: middle;
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.35em;
  flex-shrink: 0;
}
.public-label-icon.public-label-icon--after {
  margin-right: 0;
  margin-left: 0.35em;
}
.public-label-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
}

/* ==========================================================================
   Mobile nav: hamburger menu (phone only)
   ========================================================================== */

/* Hamburger hidden on desktop */
@media (min-width: 769px) {
  .nav-toggle {
    display: none;
  }
}

/* On phone: hide inline links, show hamburger on second row below avatar */
@media (max-width: 768px) {
  /* Row 1: Brand (logo + text) | User menu. Row 2: Hamburger (full width, centered) */
  .top-nav {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 0.5rem 0.75rem;
  }
  .top-nav__brand {
    grid-row: 1;
    grid-column: 1;
    min-width: 0;
    overflow: hidden;
    flex: 1 1 auto;
  }
  .top-nav__brand-logo {
    flex-shrink: 0;
  }
  .top-nav__brand > .top-nav__brand-text {
    min-width: 0;
    overflow: hidden;
  }
  .top-nav__brand a {
    min-width: 0;
    overflow: hidden;
  }
  .top-nav__brand-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }
  .top-nav__user-menu {
    grid-row: 1;
    grid-column: 2;
    flex-shrink: 0;
  }
  .top-nav__links {
    grid-row: 2;
    grid-column: 1 / -1;
    position: relative;
    justify-content: center;
    flex-shrink: 0;
  }

  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: inherit;
    border-radius: 4px;
    transition: background 0.15s ease;
  }

  .nav-toggle:hover {
    background: rgba(0, 0, 0, 0.06);
  }

  .nav-toggle[aria-expanded="true"] {
    background: rgba(0, 0, 0, 0.08);
  }

  .nav-toggle__bar {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Links hidden by default, shown in dropdown when menu open */
  .top-nav__links .nav__link-sub-div {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    margin-top: 0.5rem;
    flex-direction: column;
    background: var(--color-header-bg, var(--hcs-accent-container));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    overflow: hidden;
    z-index: 100;
    padding: 0.5rem 0;
  }

  .top-nav__links:has(.nav-toggle[aria-expanded="true"]) .nav__link-sub-div {
    display: flex;
  }

  .top-nav__links .nav__link-sub-div a {
    display: block;
    padding: 0.85rem 1.25rem;
    color: var(--color-header-text, var(--hcs-on-surface));
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    white-space: nowrap;
  }

  .top-nav__links .nav__link-sub-div a:last-child {
    border-bottom: none;
  }

  .top-nav__links .nav__link-sub-div a:hover {
    background: rgba(0, 0, 0, 0.05);
  }

  /* Shrink header on scroll (long pages only) */
  header .top-nav,
  header + .sub-header {
    transition: padding 0.2s ease, font-size 0.2s ease;
  }
  header .top-nav__logo {
    transition: width 0.2s ease, height 0.2s ease;
  }
  header.header--shrunk .top-nav {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }
  header.header--shrunk .top-nav__logo {
    width: 32px;
    height: 32px;
  }
  header.header--shrunk .top-nav__brand-text {
    font-size: 1.25rem;
  }
  header.header--shrunk + .sub-header {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  header.header--shrunk + .sub-header .sub-header-title {
    font-size: 1.25rem;
  }

  /* Truncate user label on mobile: show only avatar */
  .user-menu-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Back-to-top button: fixed bottom-right, above bottom tab bar (70px) + gap */
  .back-to-top {
    position: fixed;
    bottom: calc(70px + 1rem + env(safe-area-inset-bottom, 0));
    right: calc(1rem + env(safe-area-inset-right, 0));
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--hcs-primary, #69995d);
    color: var(--hcs-on-primary, #fff);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: opacity 0.2s, transform 0.2s;
  }

  .back-to-top:hover {
    opacity: 0.9;
    transform: translateY(-2px);
  }

  .back-to-top:focus-visible {
    outline: 2px solid var(--hcs-primary);
    outline-offset: 2px;
  }
  /* Auth pages with no bottom tab bar: use lower position (tab bar hidden on login/signup/password-reset only) */
  body.auth-body.login-with-image .back-to-top,
  body.auth-body.signup-with-image .back-to-top,
  body.auth-body.password-reset-with-image .back-to-top,
  body.auth-body.password-reset-done-with-image .back-to-top,
  body.auth-body.password-reset-confirm-with-image .back-to-top,
  body.auth-body.password-reset-complete-with-image .back-to-top {
    bottom: calc(1rem + env(safe-area-inset-bottom, 0));
  }

  /* FAB: Create alert (home page only) */
  .home-fab {
    position: fixed;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0));
    right: calc(1rem + env(safe-area-inset-right, 0));
    z-index: 45;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--hcs-primary, #69995d);
    color: var(--hcs-on-primary, #fff);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: opacity 0.2s, transform 0.2s;
    text-decoration: none;
  }

  .home-fab:hover {
    opacity: 0.9;
    transform: translateY(-2px);
  }

  .home-fab:focus-visible {
    outline: 2px solid var(--hcs-primary);
    outline-offset: 2px;
  }
}

/* FAB: hidden on desktop */
@media (min-width: 769px) {
  .home-fab {
    display: none !important;
  }
}

/* Back-to-top: hidden on desktop */
@media (min-width: 769px) {
  .back-to-top {
    display: none !important;
  }
}

/* Bottom tab bar: mobile only */
.bottom-tab-bar {
  display: none;
}
@media (max-width: 768px) {
  .bottom-tab-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    padding: 0.35rem 0.25rem;
    padding-bottom: calc(0.35rem + env(safe-area-inset-bottom, 0));
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  }
  .bottom-tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.25rem 0.2rem;
    color: #64748b;
    text-decoration: none;
    font-size: clamp(0.55rem, 2.2vw, 0.7rem);
    border-radius: 8px;
    min-width: 0;
    flex: 1 1 0;
    overflow: hidden;
  }
  .bottom-tab-item .bottom-tab-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .bottom-tab-item:hover,
  .bottom-tab-item:focus-visible {
    color: var(--hcs-primary, #69995d);
  }
  .bottom-tab-item.bottom-tab-item--active {
    color: var(--hcs-primary, #69995d);
    font-weight: 500;
  }
  .bottom-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }
  .bottom-tab-icon svg {
    width: 100%;
    height: 100%;
  }
  /* Hide on login/signup/password-reset pages */
  body.auth-body.login-with-image .bottom-tab-bar,
  body.auth-body.signup-with-image .bottom-tab-bar,
  body.auth-body.password-reset-with-image .bottom-tab-bar,
  body.auth-body.password-reset-done-with-image .bottom-tab-bar,
  body.auth-body.password-reset-confirm-with-image .bottom-tab-bar,
  body.auth-body.password-reset-complete-with-image .bottom-tab-bar {
    display: none !important;
  }
  /* Add padding to main so content isn't hidden behind tab bar (when tab bar is shown) */
  .site-main {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0));
  }
  body.login-with-image .site-main,
  body.signup-with-image .site-main,
  body.password-reset-with-image .site-main,
  body.password-reset-done-with-image .site-main,
  body.password-reset-confirm-with-image .site-main,
  body.password-reset-complete-with-image .site-main {
    padding-bottom: 0;
  }
}
@media (min-width: 769px) {
  .bottom-tab-bar {
    display: none !important;
  }
}

/* ==========================================================================
   Mobile optimizations (max-width: 768px)
   Input zoom prevention, touch-action, tap highlight, :active, min font
   ========================================================================== */
@media (max-width: 768px) {
  /* 2.1 Input zoom prevention (iOS) - 16px min prevents zoom on focus */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
  /* 2.2 Touch-action - removes 300ms tap delay */
  button,
  a,
  [role="button"],
  .btn,
  .alert-form-btn,
  .catalog-card,
  .bottom-tab-item,
  .nav-toggle,
  .user-menu-trigger,
  .page-refresh-btn,
  .back-to-top,
  .home-fab {
    touch-action: manipulation;
  }
  /* 2.3 Tap highlight */
  * {
    -webkit-tap-highlight-color: transparent;
  }
  /* 2.4 :active feedback */
  button:active,
  a:active,
  [role="button"]:active,
  .btn:active,
  .alert-form-btn:active,
  .catalog-card:active,
  .bottom-tab-item:active {
    opacity: 0.9;
  }
  /* 2.6 Minimum font size */
  body {
    font-size: 16px;
  }
  /* 2.10 Tap target spacing - min 8px gap between adjacent tap targets */
  .alerts-actions,
  .alerts-table tbody td[data-label="Status & Actions"] > div,
  .saved-trips-actions,
  .bottom-tab-bar {
    gap: 8px;
  }
  /* Bottom sheet drag handle (catalog, alert_form, operator_map) */
  .bottom-sheet-drag-handle {
    flex-shrink: 0;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
  }
  .bottom-sheet-drag-handle::before {
    content: '';
    width: 40px;
    height: 4px;
    background: #cbd5e1;
    border-radius: 2px;
  }
}

@media (min-width: 769px) {
  .bottom-sheet-drag-handle {
    display: none !important;
  }
}

/* ----------------------------------------------------------------------
   Minimal header (site-header--minimal) – swap to header_legacy to revert
   ---------------------------------------------------------------------- */
.site-header--minimal {
  background: #fcfdfc;
}

.site-header--minimal .minimal-header-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

.site-header--minimal .minimal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-bottom: 1px solid #d7dfda;
  background: #fcfdfc;
}

.site-header--minimal .minimal-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #173f31;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.site-header--minimal .minimal-header__brand:hover {
  color: #173f31;
}

.site-header--minimal .minimal-header__logo-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #173f31;
  color: #eef7f2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.site-header--minimal .minimal-header__logo-mark img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.site-header--minimal .minimal-header__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex: 1;
  flex-wrap: wrap;
}

.site-header--minimal .minimal-header__nav a {
  color: #2c3b34;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 580;
}

.site-header--minimal .minimal-header__nav a:hover {
  color: #173f31;
}

.site-header--minimal .minimal-header__user {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.site-header--minimal .minimal-header__user-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  color: #2c3b34;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  border: none;
  background: transparent;
  font-family: inherit;
}

.site-header--minimal .minimal-header__user-trigger:hover {
  background: #edf2ef;
  color: #2c3b34;
}

.site-header--minimal .minimal-header__user-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: #173f31;
  color: #f1f7f4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.site-header--minimal .minimal-header__user-avatar svg {
  width: 1.1em;
  height: 1.1em;
}

.site-header--minimal .minimal-header__dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 10.5rem;
  padding: 0.5rem 0;
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.25rem);
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
  z-index: 1000;
  border: 1px solid #e2e8f0;
}

.site-header--minimal .minimal-header__user.is-open .minimal-header__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.site-header--minimal .minimal-header__dropdown a,
.site-header--minimal .minimal-header__dropdown button {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  text-align: left;
  border: none;
  background: none;
  font: inherit;
  color: #111827;
  text-decoration: none;
  cursor: pointer;
}

.site-header--minimal .minimal-header__dropdown a:hover,
.site-header--minimal .minimal-header__dropdown button:hover {
  background: #f1f5f9;
}

.site-header--minimal .minimal-header__dropdown .minimal-header__dropdown-danger {
  color: #b91c1c;
}

.site-header--minimal .minimal-header__dropdown .minimal-header__dropdown-danger:hover {
  background: #fee2e2;
}

.site-header--minimal .minimal-header__dropdown hr {
  margin: 0.5rem 0;
  border: none;
  border-top: 1px solid #e2e8f0;
}

.site-header--minimal .minimal-header__nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.site-header--minimal .minimal-header__nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #2c3b34;
  border-radius: 1px;
}

.site-header--minimal .minimal-header__nav-mobile {
  display: none;
  width: 100%;
  padding: 1rem 0 0;
  flex-direction: column;
  gap: 0.5rem;
}

.site-header--minimal .minimal-header__nav-mobile a {
  padding: 0.75rem;
  border-radius: 8px;
  color: #2c3b34;
  text-decoration: none;
}

.site-header--minimal .minimal-header__nav-mobile a:hover {
  background: #edf2ef;
}

@media (max-width: 900px) {
  .site-header--minimal .minimal-header__nav {
    display: none;
  }
  .site-header--minimal .minimal-header__nav-toggle {
    display: flex;
  }
  .site-header--minimal .minimal-header__nav-mobile.is-open {
    display: flex;
  }
}

/* 2.5 prefers-reduced-motion - applies at all viewport sizes */
@media (prefers-reduced-motion: reduce) {
  .back-to-top,
  .header--shrunk,
  .catalog-filters-bottom-sheet-panel,
  .alert-form-filters-bottom-sheet-panel,
  .operator-map-filters-bottom-sheet-panel,
  .faq-item,
  .home-fab,
  button,
  .btn,
  .alert-form-btn {
    transition: none !important;
  }
}