/* shared-chrome.css — footer chrome for the pages that style themselves.

   Eight pages here (404, faq, st-thomas, st-john, st-croix, bvi-day-trip,
   private-charters, st-thomas-catamaran-sail) never load styles.css: they
   carry their own inline layout and used to inline a copy of the footer CSS
   with it. That copy is what kept them on the old dark footer, so it was
   removed and replaced by this file, which is the one place the footer design
   now lives for them. New Zealand already does exactly this.

   Only the footer is here. These pages style their own headers inline and
   nothing in this file may reach them. Do not redesign here — change
   styles.css and copy the result across. */

: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;
}

/* ===== 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 .footer-logo-img,
.footer-logo-img {
    height: 160px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Footer — the Key West Sandbar Tours design, ported s61.

   The previous footer was --gray-900 (#171717). USVI and England ship their
   wordmark as an opaque image with a white background, so on a phone the logo
   read as a white rectangle stuck on a black panel; New Zealand's and
   Amsterdam's marks are transparent navy line art, which on that same panel
   nearly vanished. A cream panel with navy art is the fix for both, and KWST
   already has it, so the design is copied rather than reinvented. Colours are
   KWST's cream/border/navy with this network's own teal (--ocean-mid) standing
   in for KWST's. */
.footer {
    background: #FDF5E6;
    color: #1B3A57;
    border-top: 1px solid #E8DFD0;
    padding: 0;
    margin-top: var(--space-3xl);
}

.footer-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 60px;
    margin-bottom: 0;
    padding: 44px 0 24px;
}

.footer-brand {
    flex: 0 0 100%;
    text-align: center;
}

/* width:auto because 404.html styles a bare .logo { width: 120px } for its own
   page mark, which otherwise squashes the footer wordmark to 120px wide. */
.footer-brand .logo { display: block; width: auto; margin-bottom: 12px; }

/* the mark is a block-level <img>, so text-align on the brand column does
   not centre it — auto margins do, the way KWST centres its own. */
.footer-brand .footer-logo-img { display: block; margin: 0 auto; }

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

.footer .logo-text { color: #1B3A57; }

.footer-brand p {
    color: #555;
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 0 0 8px;
}

.footer-tagline { color: #088395; }

.footer-links { text-align: left; }

.footer-links h4 {
    color: #088395;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.footer-links ul { list-style: none; margin: 0; padding: 0; }

.footer-links ul li { margin-bottom: 9px; }

.footer-links a {
    color: #555;
    font-size: 0.92rem;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-links a:hover { color: #088395; }

.footer-network {
    text-align: center;
    padding: 0 0 24px;
}

.footer-network h4 {
    color: #088395;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.footer-network ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 24px;
}

.footer-network a {
    color: #555;
    font-size: 0.88rem;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-network a:hover { color: #088395; }

.footer-bottom {
    padding: 16px 0 30px;
    border-top: 1px solid #E8DFD0;
    text-align: center;
}

.footer-bottom p {
    margin: 0 0 6px;
    font-size: 0.85rem;
    color: #888;
}

.footer-bottom a { color: #888; text-decoration: none; }

.footer-bottom a:hover { color: #088395; }

@media (max-width: 768px) {
    .footer-grid { gap: 40px; padding: 32px 0 16px; }
}

/* Phone: KWST lets the three columns wrap where they fall, which leaves the
   third one hanging half-indented under the other two. Giving each column half
   the row keeps that wrap tidy — two columns, then the third centred. */
@media (max-width: 600px) {
    .footer-grid { gap: 28px 20px; }
    .footer-links { flex: 0 0 calc(50% - 10px); text-align: center; }
}

@media (max-width: 768px) {
    .footer { padding-bottom: 100px; }

    .footer-brand { text-align: center; }

    .footer-brand .logo { justify-content: center; }

    .footer-platform-tagline { text-align: center; }

    .footer-bottom { text-align: center; }
}