/* =========================================================================
   RESKIN of the sibling brand's shared component library (loaded before this file —
   see templates/shiphappens/base.html). Its whole stylesheet reads
   its colors/fonts from CSS custom properties by design ("token NAMES are
   preserved so every existing component restyles from here" — their own
   comment), which is what makes this possible: every page not yet rebuilt
   from scratch (fleet, yacht detail, checkout, about, contact, blog, legal)
   still uses the SAME proven markup, JS and interaction patterns (carousels,
   the smart fleet search, live checkout pricing) — just repainted in the
   Ship Happens palette/type instead of Petrol & Honey's. Structural tokens
   (spacing/radius/shadow/motion) are left untouched on purpose: changing
   proportions in complex components (lightbox, custom selects, carousel)
   for zero visual benefit is pure risk. The "cinematic" dark-luxury
   TEXTURES (film grain, radial vignette, gold foil shimmer) ARE replaced
   below, not just recolored — keeping a gold shimmer in flamingo pink
   would still read as the same design language underneath.
   ========================================================================= */

/* Self-hosted variable fonts (latin subset, same pattern as the sibling brand's
   styles.css) — replaces the Google Fonts CDN link, closing the render-blocking
   external-request gap found in the 2026-09-27 audit. Paths are literal (no ?v=) so
   base.html's preloads match these URLs byte-for-byte. */
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("/static/fonts/unbounded-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/sora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --color-primary: var(--ink);
  --color-primary-dark: #0A1519;
  --color-primary-soft: #1A343B;
  --color-accent: var(--flamingo);
  --color-accent-deep: #C93861;
  --color-accent-light: #FF9CB8;
  --color-accent-text: #FF8FAE;

  --color-bg: var(--ink);
  --color-surface: #17313A;
  --color-surface-alt: #1E3D46;
  --color-surface-dark: #0E1F24;

  --color-ink: var(--foam);
  --color-text: #F3EFE6;
  --color-text-muted: #A9B7B4;
  --color-line: rgba(255, 253, 248, 0.10);
  --color-line-strong: rgba(255, 253, 248, 0.20);

  --color-on-dark: var(--foam);
  --color-on-dark-muted: #A9B7B4;
  --color-on-dark-line: rgba(255, 253, 248, 0.16);

  /* Samar's explicit call after reviewing it live: dark mode everywhere, no light
     "intermission" slab anywhere on this brand — it was reading as a broken contrast bug,
     not an intentional accent. Same dark surface as the rest of the page, not a separate tone. */
  --color-intermission: var(--color-surface-dark);
  --color-intermission-ink: var(--color-text);
  --color-intermission-muted: var(--color-text-muted);
  --color-intermission-accent: var(--flamingo);
  --color-intermission-line: var(--color-line);

  /* Flat Deco gradient/glow, not a filmic vignette+grain */
  --color-bg-gradient: linear-gradient(180deg, #17313A 0%, #12262B 65%);
  --grade-shadow: var(--ink);
  --grade-highlight: var(--sunburst);
  --grade-overlay: linear-gradient(180deg, rgba(18, 38, 43, 0) 55%, rgba(10, 21, 25, 0.6) 100%);
  --hairline-accent: linear-gradient(90deg, transparent 0%, var(--mint) 50%, transparent 100%);
  --edge-light: linear-gradient(90deg, transparent 0%, var(--sunburst) 50%, transparent 100%);
  --foil-gradient: linear-gradient(135deg, var(--flamingo) 0%, var(--sunburst) 100%);
  --shadow-gold-glow: 0 0 0 rgba(0, 0, 0, 0);
  --grain-tint: rgba(0, 0, 0, 0);

  /* --font-display / --font-body are redefined once, below, to Unbounded/Sora — this
     block only needs to override the shared color tokens. */
}

/* The grain/vignette were hardcoded rules, not pure tokens — kill them outright rather
   than reskin them; Deco is flat color and shape, not film texture. */
body::after { display: none; }
body::before { background: var(--color-bg-gradient); }

/* =========================================================================
   SHIP HAPPENS MIAMI — brand stylesheet
   Design direction: Miami Art Deco (Ocean Drive color-blocking + porthole/
   disc motifs), NOT a recolor of the sibling brand's navy/gold "Petrol & Honey" look.
   Signature device: the circular "porthole" photo crop — used once per
   section, never on every element. Mobile-first, CSS custom properties,
   prefers-reduced-motion respected throughout.

   STATUS (2026-09-21): tokens + base chrome (nav/footer) + home page only.
   Remaining customer pages (fleet, yacht, checkout, about, contact, ...)
   are the next slice of this build — see docs/shiphappensmiami-plan.md.
   Fonts are linked from Google Fonts for this first pass; the sibling brand
   self-hosts its two families (project rule: "Fonts preloaded, max 2
   families") and this brand should match that before launch.
   ========================================================================= */

:root {
  /* --- Color: Ocean Drive, not the marina at night --- */
  --ink:        #12262B;   /* deep teal-black — text, footer, hero background */
  --canvas:     #FBF3E2;   /* warm shell/stucco — page background */
  --foam:       #FFFDF8;   /* card surface, slightly warm white */
  --flamingo:   #FF4D7D;   /* primary accent — CTAs, price, the one bold mark */
  --sunburst:   #FFC94A;   /* secondary accent — small marks, active states */
  --mint:       #3FCFB4;   /* tertiary accent — links, secondary buttons */
  --ink-soft:   #12262Bcc; /* ink at reduced opacity for secondary text on canvas */
  --foam-soft:  #FFFDF8cc; /* foam at reduced opacity for secondary text on ink */
  --line:       #12262B22;

  /* --- Type --- */
  --font-display: "Unbounded", system-ui, sans-serif;
  --font-body:    "Sora", system-ui, sans-serif;
  --text-sm:   0.9375rem;
  --text-base: 1.0625rem;
  --text-lg:   1.25rem;
  --text-xl:   1.6rem;
  --text-2xl:  2.1rem;
  --text-3xl:  2.9rem;
  --text-4xl:  3.8rem;

  /* --- Space --- */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px;  --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px;

  --radius-pill: 999px;
  --radius-card: 28px;
  --shadow-card: 0 12px 28px -14px var(--ink);
  --duration-normal: 300ms;
  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); line-height: 1.05; margin: 0; letter-spacing: -0.01em; }
p { margin: 0 0 var(--space-4); max-width: 62ch; }
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--flamingo); outline-offset: 3px; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-6); }
@media (min-width: 720px) { .container { padding: 0 var(--space-8); } }

.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--duration-normal) var(--easing-default),
              background var(--duration-normal) var(--easing-default);
}
.btn--flamingo { background: var(--flamingo); color: var(--foam); }
.btn--flamingo:hover { transform: translateY(-2px); background: #ff3569; }
.btn--outline { background: transparent; color: var(--foam); border-color: var(--foam-soft); }
.btn--outline:hover { border-color: var(--foam); }

/* --- Top bar + nav (pill nav, not a bordered rectangle bar) --- */
.sh-topbar { background: var(--ink); color: var(--foam-soft); font-size: var(--text-sm); }
.sh-topbar .container { display: flex; justify-content: flex-end; gap: var(--space-6); padding-top: var(--space-2); padding-bottom: var(--space-2); }
.sh-topbar a { text-decoration: none; }
.sh-topbar a:hover { color: var(--sunburst); }

.sh-header { background: var(--canvas); position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); }
.sh-header__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; padding: var(--space-4) 0; gap: var(--space-3); }
.sh-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); text-decoration: none; color: var(--ink); }
.sh-brand__mark { display: block; flex-shrink: 0; }
.sh-brand span { color: var(--flamingo); }
.sh-nav { display: none; }
@media (min-width: 900px) {
  .sh-nav { display: flex; align-items: center; gap: var(--space-2); background: var(--foam); border-radius: var(--radius-pill); padding: var(--space-1); box-shadow: 0 2px 0 var(--line) inset; }
  .sh-nav a { text-decoration: none; color: var(--ink); font-size: var(--text-sm); font-weight: 600; padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); }
  .sh-nav a[aria-current="page"], .sh-nav a:hover { background: var(--ink); color: var(--foam); }
}
.sh-header__cta { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
/* Real bug, found live 2026-09-24: the header CTA button + hamburger never wrapped and had
   no mobile hiding rule, so the button was truncated and the hamburger pushed 100% off the
   390px viewport — every mobile visitor had NO way to open the nav at all. Button now hides
   below 640px (it's duplicated inside the mobile menu itself, see base.html) so only the
   brand + a properly-sized hamburger have to fit on a phone-width screen. */
.sh-header__book { display: none; }
@media (min-width: 640px) { .sh-header__book { display: inline-flex; } }
/* No .sh-header__phone: a duplicate phone link here (in addition to the always-visible
   topbar one) overflowed the header at 1440px alongside the CTA button — sitewide
   overflow-x:clip silently cropped the button rather than showing the overflow. Removed
   the redundant element instead of adding more responsive-hiding complexity (found 2026-09-27). */
.sh-menu-btn { display: inline-flex; flex-shrink: 0; background: none; border: 2px solid var(--ink); border-radius: var(--radius-pill); }
.sh-menu-btn summary { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: var(--text-lg); line-height: 1; }
.sh-menu-btn summary::-webkit-details-marker { display: none; }
@media (min-width: 900px) { .sh-menu-btn { display: none; } }

/* --- Hero: asymmetric, oversized display type, one static sunburst flourish --- */
.sh-hero { background: var(--ink); color: var(--foam); position: relative; overflow: hidden; padding: var(--space-16) 0 var(--space-24); }
.sh-hero__rays {
  position: absolute; top: -20%; left: -10%; width: 620px; height: 620px;
  background: repeating-conic-gradient(var(--sunburst) 0deg 4deg, transparent 4deg 16deg);
  opacity: 0.14; border-radius: 50%; pointer-events: none;
}
.sh-hero__grid { position: relative; display: grid; gap: var(--space-12); align-items: center; }
@media (min-width: 900px) { .sh-hero__grid { grid-template-columns: 1.1fr 0.9fr; } }
.sh-hero h1 { font-size: var(--text-4xl); font-weight: 800; }
.sh-hero__sub { color: var(--foam-soft); font-size: var(--text-lg); max-width: 42ch; margin-top: var(--space-4); }
.sh-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); align-items: center; }
.sh-hero__meta { color: var(--foam-soft); font-size: var(--text-sm); }

/* The porthole: the one recurring circular-crop device, used for the hero photo
   and each fleet card's photo — nowhere else, so it stays a signature, not wallpaper. */
.porthole { position: relative; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; border: 10px solid var(--foam); box-shadow: var(--shadow-card); }
.porthole img { width: 100%; height: 100%; object-fit: cover; }
.sh-hero__photo .porthole { border-color: var(--sunburst); max-width: 420px; margin: 0 auto; }

/* --- Trust strip: three plain facts, no numbering (nothing here is a sequence) --- */
.sh-trust { background: var(--mint); color: var(--ink); padding: var(--space-8) 0; }
.sh-trust__grid { display: grid; gap: var(--space-6); text-align: center; }
@media (min-width: 720px) { .sh-trust__grid { grid-template-columns: repeat(3, 1fr); text-align: left; } }
.sh-trust__item strong { display: block; font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-1); }
.sh-trust__item p { margin: 0; color: var(--ink-soft); }

/* --- Fleet teaser --- */
.sh-fleet { padding: var(--space-24) 0; }
.sh-section__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-4); margin-bottom: var(--space-12); }
.sh-section__head h2 { font-size: var(--text-3xl); max-width: 16ch; }
.sh-section__head p { color: var(--ink-soft); margin: 0; }
.sh-fleet__grid { display: grid; gap: var(--space-8); grid-template-columns: 1fr; }
@media (min-width: 640px) { .sh-fleet__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .sh-fleet__grid { grid-template-columns: repeat(3, 1fr); } }

.sh-yacht { text-decoration: none; color: var(--ink); display: block; }
.sh-yacht .porthole { width: 148px; margin-bottom: var(--space-4); }
.sh-yacht__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); margin-bottom: var(--space-1); }
.sh-yacht__meta { color: var(--ink-soft); font-size: var(--text-sm); margin-bottom: var(--space-3); }
.sh-yacht__price { display: inline-block; background: var(--flamingo); color: var(--foam); font-weight: 700; font-size: var(--text-sm); padding: var(--space-1) var(--space-4); border-radius: var(--radius-pill); }

/* --- CTA band --- */
.sh-cta { background: var(--ink); color: var(--foam); padding: var(--space-20) 0; text-align: center; }
.sh-cta h2 { font-size: var(--text-3xl); color: var(--sunburst); margin: 0 auto var(--space-6); max-width: 20ch; }
.sh-cta p { color: var(--foam-soft); margin: 0 auto var(--space-8); }

/* --- Footer --- */
.sh-footer { background: var(--ink); color: var(--foam-soft); padding: var(--space-16) 0 var(--space-8); font-size: var(--text-sm); }
.sh-footer a { text-decoration: none; }
.sh-footer a:hover { color: var(--mint); }
.sh-footer__grid { display: grid; gap: var(--space-8); margin-bottom: var(--space-12); }
@media (min-width: 720px) { .sh-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.sh-footer__brand { font-family: var(--font-display); font-weight: 800; color: var(--foam); font-size: var(--text-lg); }
.sh-footer nav { display: flex; flex-direction: column; gap: var(--space-2); }
.sh-footer__bottom { border-top: 1px solid #ffffff22; padding-top: var(--space-6); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); }

/* Admin pages fall back to the shared templates (never brand-scoped) — this stylesheet
   never needs to touch /admin, so there is no admin-specific override here by design. */

/* =========================================================================
   DARK-MODE HARDENING (2026-09-22, from Samar's live review screenshots)
   Two real bugs found:
   1. The reused yacht-card WhatsApp button showed an empty colored box — the icon
      is an SVG sprite <use> reference and templates/shiphappens/base.html never
      included the sprite sheet. Fixed there; nothing to do here.
   2. Body copy in a few reused sections (yacht detail specs/included lists, the
      destinations page subhead) was reading as very low-contrast — close to
      unreadable — even though the token math said otherwise. Rather than keep
      chasing the exact cascade path with no browser to inspect computed styles,
      force the common text containers to explicit high-contrast colors here,
      last in the file so it wins regardless of what specific selector was
      actually responsible. Belt-and-suspenders on purpose — verify contrast is
      actually fixed on the real site, since this was written blind.
   ========================================================================= */
body, main, #main { background: var(--color-bg); color: var(--color-text); }
.section-head p, .page-hero p, .split__body p, .yd-desc, .yd-section p,
.yd-spec span, .yd-spec strong, .yd-list li, .dest-card__body p, .exp-card__body p,
.landing-related p, .form-note, .co-note {
  color: var(--color-text) !important;
}
.yd-spec span, .fleet-toolbar__group label, .yacht-card__spec, .yacht-card__cat {
  color: var(--color-text-muted) !important;
}

/* A bit more breathing room in the fleet cards — Samar: "the cards appear too tight". */
#fleet-grid .yacht-card__body { padding: var(--space-5); gap: var(--space-4); }
.yacht-card__actions--compact { gap: var(--space-3); }