/*
 * templates-web.css — Website Templates public-site stylesheet.
 *
 * ONE shared, responsive stylesheet for all 10 skins x 4 families.
 * Personality is almost entirely TOKEN-driven: skins.php's
 * wtEmitThemeCss() emits a `:root{--wt-*}` block ahead of this file (see
 * wtRenderHead.php) with every colour/radius/shadow/border/font/hero value
 * a skin needs — this file never hardcodes a skin's colours. The handful of
 * `[data-skin="…"]` rules below are genuine exceptions (documented inline)
 * where a token alone can't express the difference.
 *
 * Layout hooks:
 *   [data-family]      — set on <body> by the render engine (WtEngine::
 *                         assembleDoc()/renderChromeOpen(), class.websitetemplates.php)
 *   [data-wt-family]   — set on the inner block wrapper (wtRenderFamily(),
 *                         wtRenderBlocks.php) for pages rendered as
 *                         full 'wt' documents
 * Both carry the same 4 values (classic|grid|sidebar|showcase); family rules
 * below match on either so they work whether an element's family-scoped
 * ancestor is <body> (chrome-wrapped legacy pages) or the inner wrapper
 * (full WT page render).
 *
 * [data-skin] is set on <body> alongside [data-family] — the 10 skin ids
 * from wtSchema.php's WT_SKINS.
 *
 * No build step — plain CSS, custom properties, no
 * preprocessor. Authored mobile-first-adjacent but organised base-then-media
 * (the prototype has NO responsive CSS at all — every breakpoint here is
 * new, budgeted work, not a port).
 */

/* ── Reset (minimal — this file owns the whole public document) ────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--wt-page-bg, #fff);
  color: var(--wt-body-text, #333);
  font-family: var(--wt-font-body, system-ui, sans-serif);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body[data-skin] { color-scheme: var(--wt-color-scheme, light); }
/* The page colours must beat Bootstrap's `body { background:#fff; color:#333 }`. A page
   with a quote block (and every chrome-wrapped legacy page) loads bootstrap.min.css AFTER
   this file, and an equal-specificity `body` rule from a later stylesheet wins, which put
   light text on a white page for the dark skins (Coastal Teal). `body[data-wt]` is more
   specific, so the skin's page-bg / body-text apply whatever the load order. Only the
   colours are raised: fonts and spacing are deliberately left as they were. */
body[data-wt] {
  background: var(--wt-page-bg, #fff);
  color: var(--wt-body-text, #333);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--wt-font-head, inherit); color: var(--wt-ink, inherit); }
button { font: inherit; }

/* ── Base typography scale (skin supplies weight/tracking, not size) ───── */

h1.wt-h1 {
  font-weight: var(--wt-heading-weight, 700);
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.06;
  letter-spacing: var(--wt-heading-tracking, 0);
  margin: 0 0 16px;
}
h2.wt-h2 {
  font-weight: var(--wt-heading-weight, 700);
  font-size: 27px;
  line-height: 1.12;
  letter-spacing: var(--wt-heading-tracking, 0);
  margin: 6px 0 0;
}
.wt-prose { font-size: 15px; line-height: 1.7; color: var(--wt-body-text); margin: 0 0 15px; }
.wt-eyebrow {
  display: block;
  font: 700 11px/1.2 var(--wt-font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wt-accent-text, var(--wt-accent));
  margin-bottom: 10px;
}

/* ── Containers / sections (family-aware width, spacing token) ─────────── */

.wt-container { max-width: 760px; margin: 0 auto; padding: 0 26px; }
[data-family="grid"] .wt-container, [data-wt-family="grid"] .wt-container,
[data-family="showcase"] .wt-container, [data-wt-family="showcase"] .wt-container {
  max-width: 1080px;
}
/* Sidebar gets a wider cap: the 340px aside would otherwise leave the main
   column narrower than the classic single-column layout. */
[data-family="sidebar"] .wt-container, [data-wt-family="sidebar"] .wt-container {
  max-width: 1280px;
}

.wt-section {
  padding: calc(28px + (var(--wt-section-spacing, 55)) * 0.62px) 26px;
}
.wt-section-alt {
  background: var(--wt-alt-bg);
  color: var(--wt-alt-text, inherit);
}

/* ── Generic component primitives (shared by chrome + every future block) ─ */

.wt-card {
  background: var(--wt-surface);
  border-radius: var(--wt-radius-lg);
  box-shadow: var(--wt-card-shadow);
  border: var(--wt-card-border);
}

.wt-btn {
  display: inline-block;
  font-family: var(--wt-font-body);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  border: 0;
  padding: 13px 22px;
  border-radius: var(--wt-btn-radius);
  text-transform: var(--wt-btn-transform);
  letter-spacing: var(--wt-btn-letter-spacing);
  white-space: nowrap;
  text-decoration: none;
  transition: opacity .15s ease;
}
.wt-btn:hover { opacity: .88; }
.wt-btn-primary { background: var(--wt-primary); color: #fff; }
.wt-btn-ghost {
  background: transparent;
  color: inherit;
  border: 1.5px solid currentColor;
}

.wt-chip {
  display: inline-block;
  font: 700 11px/1 var(--wt-font-body);
  color: var(--wt-accent-text, var(--wt-accent));
  background: var(--wt-accent-tint);
  padding: 6px 10px;
  border-radius: var(--wt-chip-radius);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.wt-hero {
  position: relative;
  overflow: hidden;
  padding: var(--wt-hero-pad-top) 26px var(--wt-hero-pad-bottom);
  background: var(--wt-hero-bg);
  color: var(--wt-hero-text);
  border-bottom: var(--wt-hero-border);
}
.wt-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--wt-hero-scrim);
  pointer-events: none;
}
.wt-hero-content { position: relative; z-index: 2; }

/* A photo on a non-'photo' skin: those skins have dark text and no scrim, so
   re-point the hero tokens on this element only. */
.wt-hero--has-photo {
  --wt-hero-bg: #1a1f26;
  --wt-hero-text: #fff;
  --wt-hero-sub-text: rgba(255, 255, 255, .85);
  --wt-hero-scrim: linear-gradient(180deg, rgba(10, 12, 16, .42), rgba(10, 12, 16, .72));
  --wt-hero-border: none;
  --wt-hero-watermark: rgba(255, 255, 255, .10);
}
.wt-hero-sub { font-size: 16px; line-height: 1.6; color: var(--wt-hero-sub-text); max-width: 560px; margin: 0 auto; }
.wt-hero-eyebrow { color: var(--wt-hero-eyebrow); }
.wt-watermark {
  position: absolute;
  right: -30px;
  bottom: -40px;
  z-index: 1;
  font: 900 300px/1 var(--wt-font-head);
  color: var(--wt-hero-watermark);
  pointer-events: none;
  user-select: none;
}

.wt-quote-band { padding: 70px 26px; background: var(--wt-quote-bg); color: var(--wt-quote-text); }

/* Grid of cards — default 3 columns; the grid family scales via --wt-grid-cols. */
.wt-grid-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
[data-family="grid"] .wt-grid-cards, [data-wt-family="grid"] .wt-grid-cards {
  grid-template-columns: repeat(var(--wt-grid-cols, 3), 1fr);
}

/* Sidebar family: content + sticky aside. */
[data-family="sidebar"] .wt-layout-sidebar, [data-wt-family="sidebar"] .wt-layout-sidebar {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
  align-items: start;
}
.wt-aside { position: sticky; top: 20px; }

/* Showcase family: alternating image/text bands. */
[data-family="showcase"] .wt-showcase-row, [data-wt-family="showcase"] .wt-showcase-row {
  display: flex;
  gap: 40px;
  align-items: center;
  padding: 40px 0;
}
[data-family="showcase"] .wt-showcase-row:nth-child(even),
[data-wt-family="showcase"] .wt-showcase-row:nth-child(even) {
  flex-direction: row-reverse;
}
.wt-showcase-row > * { flex: 1 1 0; min-width: 0; }

/* ── Flag utility classes ────────────────────────────────────────────────
 * Most flag personality (boxy borders, pill radii, glass blur, dark
 * colour-scheme, uppercase buttons) is already baked into the tokens above
 * per skin (a boxy skin's --wt-card-shadow is already 'none' and its
 * --wt-card-border already 2px solid ink — see skins.php). These classes
 * exist as an OPT-IN escape hatch for a block author who wants a specific
 * treatment on one element regardless of the active skin (e.g. force a
 * pill-shaped button inside an otherwise square-cornered skin). Compound
 * selectors (`.wt-card.wt-boxy`) so they always win over the plain
 * `.wt-card` rule without needing `!important`.
 * ────────────────────────────────────────────────────────────────────── */

.wt-card.wt-boxy, .wt-btn.wt-boxy {
  border: 2px solid var(--wt-ink);
  box-shadow: none;
  border-radius: 0;
}
.wt-nav.wt-glass, .wt-card.wt-glass {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.wt-btn.wt-pill, .wt-chip.wt-pill { border-radius: 999px; }
.wt-card.wt-hairline { box-shadow: none; border: 1px solid var(--wt-rule); }
.wt-card.wt-thick { border-width: 3px; }
.wt-upper { text-transform: uppercase; letter-spacing: .05em; }
[data-skin] .wt-dark, .wt-dark { color-scheme: dark; }

/* ── [data-skin]-scoped exceptions (where a token alone isn't enough) ───── */

/* Premium is the one genuinely dark skin — set the UA colour-scheme so
   native form controls / scrollbars follow it instead of rendering as
   light-on-dark widgets. */
[data-skin="premium"] { color-scheme: dark; }

/* Old-school + Bold are the two boxy/upper skins with a heavier nav rule —
   already carried by --wt-nav-border, called out here only so the nav
   brand mark (a filled square, see .wt-nav-logo) squares off to match
   rather than keeping its default rounded corner. */
[data-skin="oldschool"] .wt-nav-logo, [data-skin="bold"] .wt-nav-logo { border-radius: 2px; }

/* Minimal's hairline rule + wide letter-spacing reads better with a touch
   more nav padding than the token-driven default. */
[data-skin="minimal"] .wt-nav-inner { padding-top: 20px; padding-bottom: 20px; }

/* ── Nav chrome (blocks/nav.php) ─────────────────────────────────────────
 * Structural + mobile-hamburger CSS. Colours/borders/radii all come from
 * tokens (--wt-nav-bg/--wt-nav-border/--wt-logo-radius/--wt-btn-*) so this
 * section is layout-only.
 * ────────────────────────────────────────────────────────────────────── */

.wt-nav-wrap { position: relative; z-index: 20; }
.wt-nav { background: var(--wt-nav-bg); border-bottom: var(--wt-nav-border); backdrop-filter: blur(var(--wt-blur)); -webkit-backdrop-filter: blur(var(--wt-blur)); }
.wt-nav-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.wt-nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.wt-nav-logo {
  width: 38px; height: 38px;
  border-radius: var(--wt-logo-radius);
  background: var(--wt-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 800 18px/1 var(--wt-font-head);
  flex-shrink: 0;
}
.wt-nav-brand-text { font: 800 16px/1.1 var(--wt-font-head); color: var(--wt-ink); letter-spacing: var(--wt-heading-tracking); }

/* Company logo in place of the lettermark and name: height-constrained for any
   aspect ratio; max-width keeps a wide banner logo from crowding the menu. */
.wt-nav-brand-img {
  display: block;
  /* Taller than the lettermark; the nav bar grows with it. */
  height: 54px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
}
@media (max-width: 900px) {
  .wt-nav-brand-img { height: 46px; max-width: 200px; }
}
@media (max-width: 480px) {
  .wt-nav-brand-img { height: 38px; max-width: 160px; }
}

.wt-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 34px; height: 34px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.wt-nav-toggle span { display: block; width: 100%; height: 2px; background: var(--wt-ink); border-radius: 1px; }

.wt-nav-menu { display: flex; align-items: center; gap: 22px; }
/* margin-bottom: 0 - the UA's default <ul> bottom margin (16px) was adding
   dead space under the menu inside the nav bar. */
.wt-nav-list { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 0; }
.wt-nav-item a {
  font: 600 13px/1 var(--wt-font-body);
  color: var(--wt-body-text);
  text-decoration: none;
  padding: 6px 0;
}
.wt-nav-item.wt-nav-active a { color: var(--wt-primary-text, var(--wt-primary)); }
.wt-nav-cta { font-size: 12.5px; padding: 10px 16px; }

/* ── Footer chrome (blocks/footer.php) ───────────────────────────────────
 * footerBg/text always resolve to a dark bg + white text across all 10
 * skins (see skins.php --wt-footer-bg — proto's footerStyle.color is a
 * constant #fff regardless of skin), so text colour is hardcoded here
 * rather than tokenised for a value that never varies.
 * ────────────────────────────────────────────────────────────────────── */

.wt-footer { background: var(--wt-footer-bg); color: #fff; }
.wt-footer-inner { max-width: 1080px; margin: 0 auto; padding: 46px 26px 34px; }
.wt-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
  margin-bottom: 28px;
}
.wt-footer-logo {
  width: 34px; height: 34px;
  border-radius: var(--wt-logo-radius);
  background: var(--wt-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 800 16px/1 var(--wt-font-head);
  margin-bottom: 12px;
}
/* Company logo on a white plate: the footer is always dark, and the logo's
   colours are unknown. inline-flex keeps the plate hugging the image. */
/* Scoped with .wt-footer-col to out-specify the (0,2,0)
   `.wt-footer-col a, .wt-footer-col div` rule below. */
.wt-footer-col .wt-footer-brand-plate {
  display: inline-flex;
  opacity: 1;
  align-items: center;
  background: #fff;
  border-radius: var(--wt-logo-radius);
  padding: 10px 12px;
  margin-bottom: 12px;
  max-width: 100%;
}
.wt-footer-brand-img {
  display: block;
  height: 40px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
}
@media (max-width: 480px) {
  .wt-footer-brand-img { height: 34px; max-width: 160px; }
}

/* A grid track cannot shrink below its content by default, so one unbroken
   200-character tagline used to push the whole footer wider than the page and
   run under the next column. min-width:0 lets the column shrink; overflow-wrap
   breaks a word that still does not fit. */
.wt-footer-col { min-width: 0; }
.wt-footer-brand { font: 800 16px/1.2 var(--wt-font-head); margin-bottom: 4px; overflow-wrap: anywhere; }
.wt-footer-tagline { font-size: 13px; opacity: .75; overflow-wrap: anywhere; }
.wt-footer-col a, .wt-footer-col div { overflow-wrap: anywhere; }
.wt-footer-head {
  font: 700 12px/1 var(--wt-font-body);
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .6;
  margin-bottom: 12px;
}
.wt-footer-col a, .wt-footer-col div { display: block; font-size: 13.5px; margin-bottom: 8px; color: #fff; text-decoration: none; opacity: .92; }
/* The logo square is itself a div inside .wt-footer-col, so the generic rule above
   (display:block, 13.5px, opacity .92) used to win over .wt-footer-logo and the initial
   sat top-left instead of centred. Re-assert the square's own box with higher
   specificity (0,2,0 beats 0,1,1). */
.wt-footer-col .wt-footer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 16px/1 var(--wt-font-head);
  margin-bottom: 12px;
  opacity: 1;
}
.wt-footer-areas { display: flex; flex-wrap: wrap; gap: 8px; }
.wt-footer-areas .wt-chip { background: rgba(255,255,255,.12); color: #fff; }
.wt-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: 12.5px;
  opacity: .75;
}
.wt-footer-powered a { color: inherit; text-decoration: underline; }

/* ── Responsive breakpoints (authored fresh — the prototype has none) ───
 * Mirrors the Page Builder's device-preview widths (wtBuilder.js: tablet
 * ~834px, mobile ~390px) without hardcoding to those exact canvas widths.
 * ────────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) and (min-width: 641px) {
  /* Two-up between phone and desktop - 3 cards at ~200px each were
     unreadable on a tablet. */
  .wt-grid-cards,
  [data-family="grid"] .wt-grid-cards,
  [data-wt-family="grid"] .wt-grid-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  [data-family="sidebar"] .wt-layout-sidebar, [data-wt-family="sidebar"] .wt-layout-sidebar {
    grid-template-columns: 1fr;
  }
  .wt-aside { position: static; }
}

@media (max-width: 780px) {
  .wt-nav-toggle { display: flex; }
  .wt-nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--wt-surface);
    border-bottom: var(--wt-nav-border);
    padding: 8px 26px 18px;
  }
  .wt-nav-menu.wt-nav-open { display: flex; }
  .wt-nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .wt-nav-item a { display: block; padding: 12px 0; border-bottom: 1px solid var(--wt-rule); }
  .wt-nav-cta { margin: 14px 0 4px; text-align: center; }
}

@media (max-width: 640px) {
  .wt-grid-cards { grid-template-columns: 1fr; }
  /* Repeat the family selector: the [data-wt-family="grid"] rule is (0,2,0)
     and a media query adds no specificity. */
  [data-family="grid"] .wt-grid-cards,
  [data-wt-family="grid"] .wt-grid-cards { grid-template-columns: 1fr; }
  [data-family="showcase"] .wt-showcase-row, [data-wt-family="showcase"] .wt-showcase-row {
    flex-direction: column;
  }
  .wt-hero { padding-left: 20px; padding-right: 20px; }
  h1.wt-h1 { font-size: clamp(26px, 8vw, 34px); }
  .wt-footer-bottom { flex-direction: column; align-items: flex-start; }
  .wt-watermark {
    right: -18px;
    bottom: -24px;
    font-size: clamp(130px, 46vw, 200px);
  }
}

/* ---- in-page anchors (#quote) ----
   Smooth jump to the quote block, with room above it for a sticky nav.
   Honours prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
#quote { scroll-margin-top: 16px; }

/* ---- section anchors ----
   Blocks carry ids (#fleet, #about, ...) so nav and CTA links can scroll to
   them; keep the target clear of the top edge when it lands. */
.wt-family section[id] { scroll-margin-top: 16px; }

/* ---- legacy content inside the WT chrome ----
   Articles, funnel steps, extras and the 404 page are the site's original
   markup, which brought its own page container. Inside the WT chrome nothing
   supplied one, so the text ran to the screen edge. Bound it to the same
   centred column as the header and footer; WT blocks are unaffected. */
.wt-legacy-body {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 26px;
  box-sizing: border-box;
  overflow-wrap: break-word;
  /* Contain the legacy markup's floats. Funnel pages (quote / booking result)
     sit in Bootstrap `.col-*` columns, which float left; without this the
     wrapper collapsed to 0 height and the footer was drawn over the quote and
     its text wrapped around it. */
  display: flow-root;
}
.wt-legacy-body::after { content: ""; display: table; clear: both; }
.wt-legacy-body img { max-width: 100%; height: auto; }
.wt-legacy-body table { max-width: 100%; }

/* ---- default "Page not found" body (site has no 404 content of its own) ---- */
.wt-notfound { text-align: center; padding: 48px 0 24px; }
.wt-notfound__title {
  font-weight: var(--wt-heading-weight, 700);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
  margin: 0 0 12px;
}
.wt-notfound__text { margin: 0 auto 24px; max-width: 520px; color: var(--wt-body-text); }
.wt-notfound__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---- iOS Safari: a focused form control under 16px makes the page zoom in ----
   Public WT pages, the embedded quote form and the legacy quote funnel inside the WT
   chrome all carry body[data-wt]. Mobile and tablet widths only; user zoom stays
   enabled (the viewport meta is untouched). !important because the legacy quote
   stylesheets size inputs with id selectors. */
@media (max-width: 1024px) {
  body[data-wt] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="hidden"]):not([type="file"]):not([type="color"]),
  body[data-wt] select,
  body[data-wt] textarea {
    font-size: 16px !important;
  }
}