/* shared-chrome.css
   Shared :root variables + footer + brand body font, copied VERBATIM from
   styles.css, for the self-styled pages that do not load styles.css.
   Load this BEFORE a page's own inline <style>. Do not redesign here. */

:root {
    /* Trust Badge Colors */
    --trust-bg: #F0F9F8;
    --trust-text: #2A9D8F;
    --teal: #2A9D8F;
    /* Primary Colors */
    --ocean-deep: #0A4D68;
    --ocean-mid: #088395;
    --ocean-light: #05BFDB;
    --coral: #FF6B6B;
    --sunset-gold: #FFD93D;
    --sand: #FFF8E7;
    --palm-green: #2D6A4F;
    
    /* Neutrals */
    --white: #FFFFFF;
    --off-white: #FAFAFA;
    --gray-100: #F5F5F5;
    --gray-200: #E5E5E5;
    --gray-300: #D4D4D4;
    --gray-400: #A3A3A3;
    --gray-500: #737373;
    --gray-600: #525252;
    --gray-700: #404040;
    --gray-800: #262626;
    --gray-900: #171717;
    
    /* Logo Colors - CONSISTENT EVERYWHERE */
    --logo-text: #0A4D68;
    
    /* Typography */
    --font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    
    /* Borders & Shadows */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-full: 9999px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 40px rgba(0,0,0,0.15);
    
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
}

body { font-family: var(--font-body); }
h1, h2, h3, h4, .tour-title { font-family: var(--font-display); }

/* ===== Header (unify self-styled pages with index) =====
   Copied from styles.css .header/.logo/.nav rules. Scoped to the .header /
   .nav-desktop / .nav-mobile / .mobile-menu-btn classes, which the other
   self-styled pages' bare <header> elements do NOT use — so adding these can't
   disturb those pages until their markup is migrated. Logo rules are scoped to
   .header .logo so they can't touch the footer's .logo. The weather widget is
   omitted (needs app.js to populate; these pages don't load it). The button
   reset (styles.css L70) is folded into .mobile-menu-btn rather than made global.
   A fixed header needs a top offset on the content; that lives per-page (milford
   inline), not here, so unmigrated pages get no phantom gap. */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--gray-200);
}
.header.scrolled { box-shadow: var(--shadow-md); }
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    max-width: 1280px;
    margin: 0 auto;
}
.header .logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    transition: transform var(--transition-fast);
}
.header .logo:hover { transform: scale(1.02); }
.header .logo-img {
    height: 80px;
    width: auto;
    vertical-align: middle;
}
.header .logo-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.nav-desktop {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
}
.nav-desktop a {
    font-weight: 500;
    color: var(--gray-700);
    padding: var(--space-sm) 0;
    position: relative;
}
.nav-desktop a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--ocean-mid);
    transition: width var(--transition-base);
}
.nav-desktop a:hover { color: var(--ocean-deep); }
.nav-desktop a:hover::after { width: 100%; }
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: var(--space-sm);
    background: none;
    border: none;
    cursor: pointer;
}
.mobile-menu-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--gray-700);
    transition: all var(--transition-fast);
}
.nav-mobile {
    display: none;
    flex-direction: column;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    padding: var(--space-md) var(--space-lg);
}
.nav-mobile.active { display: flex; }
.nav-mobile a {
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--gray-100);
    font-weight: 500;
    color: var(--gray-700);
}
@media (max-width: 768px) {
    .header-container { padding: var(--space-sm) var(--space-md); }
    .header .logo-group { align-items: flex-start; }
    .header .logo-img { height: 60px; }
    .nav-desktop { display: none; }
    .mobile-menu-btn { display: flex; }
}

/* ===== Footer base-rule dependencies =====
   The self-styled pages don't load styles.css, so the footer lacks the global
   base rules its component styles below assume (styles.css L65/68/69/71):
   the * reset (margin/padding/box-sizing), img display:block, a color/underline,
   ul/ol list-style, and the body line-height:1.6 the footer link text inherits
   (404.html's inline body omits it, so its footer rendered tight without this).
   Scoped to .footer so they can't leak into these pages' own
   inline layouts. Placed before the component rules so those win on equal
   specificity (e.g. .footer-links h4 margin-bottom beats .footer h4 margin:0).
   Note: .footer img omits height:auto so it can't override .footer-logo-img. */
.footer { line-height: 1.6; }
.footer, .footer * { box-sizing: border-box; }
.footer h1, .footer h2, .footer h3, .footer h4,
.footer p, .footer ul, .footer ol, .footer li { margin: 0; padding: 0; }
.footer ul, .footer ol { list-style: none; }
.footer a { color: inherit; text-decoration: none; transition: color var(--transition-fast); }
.footer img { display: block; max-width: 100%; }

/* ===== Footer (verbatim from styles.css) ===== */
.footer-logo-img {
    height: 120px;
    width: auto;
}

.footer {
    background: var(--gray-900);
    color: var(--gray-300);
    padding: var(--space-3xl) 0 var(--space-xl);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

.footer-brand .logo { margin-bottom: var(--space-sm); }

.footer-platform-tagline {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gray-500);
    margin-bottom: var(--space-md);
}

/* Footer logo text - white for visibility on dark background */
.footer .logo-text { color: var(--white); }

.footer-brand p {
    font-size: 0.9375rem;
    line-height: 1.7;
    margin-bottom: var(--space-sm);
}

.footer-tagline { color: var(--sunset-gold); }

.footer-links h4 {
    color: var(--white);
    font-weight: 600;
    margin-bottom: var(--space-md);
}

.footer-links ul li { margin-bottom: var(--space-sm); }

.footer-links a {
    font-size: 0.9375rem;
    transition: color var(--transition-fast);
}

.footer-links a:hover { color: var(--ocean-light); }

.footer-bottom {
    padding-top: var(--space-xl);
    border-top: 1px solid var(--gray-700);
    text-align: center;
}

.footer-bottom p {
    font-size: 0.875rem;
    margin-bottom: var(--space-sm);
}

.footer-logo-img {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    padding: 10px;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}

@media (max-width: 768px) {
    .footer-logo-img {
        height: 90px;
    }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
    .footer-brand { grid-column: 1 / -1; }
    .footer { padding-bottom: 100px; }
    .footer {
        padding: var(--space-2xl) 0 var(--space-lg);
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--space-xl);
    }
    
    .footer-brand {
        text-align: center;
    }
    
    .footer-brand .logo {
        justify-content: center;
    }
    
    .footer-platform-tagline {
        text-align: center;
    }
    
    .footer-links ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-sm) var(--space-md);
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: var(--space-sm);
        text-align: center;
    }
}

@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }