/* ============================================================
   Clearwater Beach Wedding — shared design system
   Loaded LAST in <head> so it harmonises the per-page inline CSS
   that every template still carries. Mostly token-driven: the
   pages already consume --primary/--dark/etc., so redefining the
   tokens re-skins the whole site at once.

   House style, for anything added later:
     - coral is the action colour, sea-glass teal is decoration
     - squared geometry (3px), hairline borders, no drop shadows
     - accents are RULES (top borders, left bars), not shadows
     - nothing lifts on hover; colour carries the state change
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Coastal palette — coral and sea glass on shell white */
  --cbw-deep:        #0b3c49;  /* deep teal; the dark surface colour */
  --cbw-deep-2:      #12505f;
  --cbw-ink:         #16313a;
  --cbw-ink-soft:    #35505a;
  --cbw-muted:       #5a6e75;  /* AA on white (5.42:1) */
  --cbw-coral:       #c2503c;  /* AA on white (4.63:1) — the action colour */
  --cbw-coral-600:   #a03f2e;
  --cbw-coral-300:   #f0917c;  /* AA on --cbw-deep (5.18:1) */
  /* Sea glass is 3.28:1 on white: rules, borders, icons and large
     display type only. Never small body text — use coral or ink. */
  --cbw-aqua:        #2a9d9b;
  --cbw-aqua-300:    #7fd3cf;
  --cbw-shell:       #fbf9f6;
  --cbw-sand:        #f2ebe2;
  --cbw-line:        #e1d9cf;

  /* Flat by design. These stay defined because the page templates
     reference --shadow; they just resolve to almost nothing now. */
  --cbw-shadow-sm:   0 1px 0 rgba(11,60,73,.05);
  --cbw-shadow:      0 1px 0 rgba(11,60,73,.07);
  --cbw-shadow-lg:   0 2px 0 rgba(11,60,73,.09);

  --cbw-display: 'Fraunces', 'Hoefler Text', Georgia, 'Times New Roman', serif;
  --cbw-body: 'Jost', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --cbw-radius: 3px;
  --cbw-nav-h: 96px;  /* utility strip + nav bar; see section 7 */

  /* --- Re-map the legacy per-page variables onto the new palette ---

     DO NOT remap --text, --muted, --bg, --card or --chip here. blog.html
     owns those as theme tokens and redefines them under
     @media (prefers-color-scheme: dark) and .dark — both at :root, i.e.
     the same specificity as this block. A media query adds no specificity,
     so anything set here wins in BOTH themes and pins dark-mode text to a
     near-black value on a near-black background (measured 1.14:1).
     Their light-mode defaults (#111/#222 and #666/#667085/#6b7280) already
     clear AA on white, so leaving them alone costs nothing. */
  --primary:      var(--cbw-coral);
  --dark:         var(--cbw-deep);
  --ink:          var(--cbw-ink);
  --text-dark:    var(--cbw-ink);
  --text-muted:   var(--cbw-muted);
  --border:       var(--cbw-line);
  --border-light: var(--cbw-line);
  --line:         var(--cbw-line);
  --font-family:  var(--cbw-body);
  --font:         var(--cbw-body);
  --ff:           var(--cbw-body);
  --shadow:       var(--cbw-shadow);
  --link:         var(--cbw-coral);   /* blog.html shipped #0d6efd: 4.2:1 */
  --radius:       var(--cbw-radius);
  --r:            var(--cbw-radius);

  /* add-ons.html token set */
  --cbw-bg:          var(--cbw-shell);
  --cbw-text:        var(--cbw-ink);
  --cbw-accent:      var(--cbw-coral);
  --cbw-accent-dark: var(--cbw-coral-600);
  --cbw-card:        #fff;
  --cbw-gradient:    linear-gradient(180deg, #0b3c49 0%, #12505f 100%);
}

/* ---------- 2. Base ---------- */
html {
  scroll-behavior: smooth;
  /* keep anchor targets clear of the sticky navigation bar */
  scroll-padding-top: calc(var(--cbw-nav-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

/* No `color` here on purpose. Every template already sets its own body
   colour, and blog.html drives its from --text so the value flips with the
   theme. Hardcoding ink here beat that rule (same specificity, later file)
   and pinned dark-mode body text to #16313a on #0f1115. */
body {
  font-family: var(--cbw-body);
  font-weight: 400;
  line-height: 1.68;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; }
img { height: auto; }

::selection { background: var(--cbw-aqua-300); color: var(--cbw-deep); }

/* Visible keyboard focus everywhere — the templates had none. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--cbw-aqua);
  outline-offset: 3px;
  border-radius: 2px;
}

.cbw-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--cbw-coral);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
}
.cbw-skip:focus { left: 0; }

/* ---------- 3. Typography ---------- */
/* NOTE: deliberately no `color` on the bare heading/paragraph selectors.
   Several pages place these classes on dark surfaces (.footer-cta, hero
   bands) and rely on inheriting #fff — forcing a colour here would make
   that text invisible. Colour stays with each page's own rules. */
h1, h2,
header h1, header h2,
header.hero h1 {
  font-family: var(--cbw-display);
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.08;
}

h1, header h1, header.hero h1 {
  font-size: clamp(2.4rem, 1.3rem + 3.7vw, 4.3rem);
  margin: 0 0 .3em;
}

h2 {
  font-size: clamp(1.8rem, 1.15rem + 2vw, 2.75rem);
  margin: 0 0 .5em;
}

h3, h4, h5 {
  font-family: var(--cbw-body);
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1.32;
}

/* Section eyebrow / kicker. A coral em-dash leads the label — replaces the
   old centred gold capitals.
   Selector is doubled so it outranks the `header p` / `.hero p` rules that
   the page templates (and section 5 below) apply to every paragraph. */
.cbw-kicker,
p.cbw-kicker,
header p.cbw-kicker,
header[role="banner"] p.cbw-kicker,
header.hero p.cbw-kicker,
.cbw-cta-band p.cbw-kicker {
  display: inline-block;
  font-family: var(--cbw-body);
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cbw-deep);
  margin: 0 0 1em;
  text-shadow: none;
}
.cbw-kicker::before {
  content: "\2014\00a0\00a0";
  color: var(--cbw-coral);
}
.cbw-kicker--light,
p.cbw-kicker--light,
header p.cbw-kicker--light,
header[role="banner"] p.cbw-kicker--light,
header.hero p.cbw-kicker--light,
.cbw-cta-band p.cbw-kicker--light { color: #fff; }
.cbw-kicker--light::before { color: var(--cbw-coral-300); }

/* Short solid sea-glass bar under section headings. Keeps the auto margins
   the templates rely on, so centred sections stay centred. */
.cbw-rule {
  width: 44px;
  height: 3px;
  border: 0;
  margin: 0 auto 28px;
  background: var(--cbw-aqua);
}

/* ---------- 4. Buttons ---------- */
/* Squared, uppercase and tracked. Nothing lifts: the colour change carries
   the hover state. */
.btn,
a.btn,
button.btn {
  font-family: var(--cbw-body);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  background: var(--cbw-coral);
  color: #fff;
  border: 1px solid var(--cbw-coral);
  border-radius: var(--cbw-radius);
  padding: 15px 30px;
  box-shadow: none;
  text-decoration: none;
  display: inline-block;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover,
.btn:focus,
a.btn:hover,
a.btn:focus {
  background: var(--cbw-deep);
  border-color: var(--cbw-deep);
  color: #fff;
  text-decoration: none;
  transform: none;
  box-shadow: none;
}

/* Outline button for CTA rows sitting on a dark photographic surface.
   Scoped: add-ons.html already ships its own light .btn-ghost on white
   cards, and a white-on-white outline there would be invisible. */
header .btn.btn-ghost,
header[role="banner"] .btn.btn-ghost,
header.hero .btn.btn-ghost,
.cbw-cta-band .btn.btn-ghost,
.cbw-band--ink .btn.btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.7);
  box-shadow: none;
}
header .btn.btn-ghost:hover,
header .btn.btn-ghost:focus,
header[role="banner"] .btn.btn-ghost:hover,
header[role="banner"] .btn.btn-ghost:focus,
header.hero .btn.btn-ghost:hover,
header.hero .btn.btn-ghost:focus,
.cbw-cta-band .btn.btn-ghost:hover,
.cbw-cta-band .btn.btn-ghost:focus {
  background: #fff;
  border-color: #fff;
  color: var(--cbw-deep);
  box-shadow: none;
}
.btn.btn-quiet {
  background: transparent;
  color: var(--cbw-coral);
  border-color: var(--cbw-coral);
  box-shadow: none;
}
.btn.btn-quiet:hover,
.btn.btn-quiet:focus { background: var(--cbw-coral); color: #fff; }

/* ---------- 5. Heroes ----------
   Only `header.hero` / the banner header. A bare `.hero` would also match
   add-ons.html, where .hero is a white card — white text on white. */
header[role="banner"],
header.hero {
  position: relative;
  color: #fff;
  overflow: hidden;
}
header[role="banner"] h1,
header.hero h1 {
  color: #fff;
  text-shadow: 0 2px 30px rgba(4,26,33,.5);
}

header[role="banner"] p,
header.hero p {
  color: rgba(255,255,255,.95);
  font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem);
  font-weight: 300;
  text-shadow: 0 1px 16px rgba(4,26,33,.5);
}

/* Teal cast over the photograph. The page templates each declare their own
   `linear-gradient(rgba(0,0,0,.45),…), url(hero.jpg)` background, so the
   tint is layered on from here rather than by rewriting 60-odd background
   declarations — this pseudo-element is the one hook site.css owns. */
header[role="banner"]::after,
header.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11,60,73,.58) 0%, rgba(11,60,73,.14) 46%, rgba(11,60,73,.8) 100%);
}
header[role="banner"] > *,
header.hero > * { position: relative; z-index: 1; }

/* Shell-white wave closing every hero. z-index 2 clears the content layer;
   nothing is laid out in the bottom 58px of a hero, so it cannot cover text. */
header[role="banner"]::before,
header.hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 58px;
  z-index: 2;
  pointer-events: none;
  background: var(--cbw-shell);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 58' preserveAspectRatio='none'%3E%3Cpath d='M0 58V22c180-26 360 14 540 14s360-40 540-14 180 36 360 22v14z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 58' preserveAspectRatio='none'%3E%3Cpath d='M0 58V22c180-26 360 14 540 14s360-40 540-14 180 36 360 22v14z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ---------- 6. Cards ----------
   `.card` gets finish only (radius/transition) — never a background or
   border colour. locations/clearwater-area.html and on-site-venues.html
   define .card as a DARK card with white text; painting it white here
   made that text invisible. */
.card {
  border-radius: var(--cbw-radius);
  box-shadow: none;
  transition: border-color .2s ease, background-color .2s ease;
}

/* These two only ever appear on the white package/beach grids, so they can
   own their surface. The sea-glass top rule is the house card signature. */
.package,
.beach-card {
  background: #fff;
  border: 1px solid var(--cbw-line);
  border-top: 3px solid var(--cbw-aqua);
  border-radius: var(--cbw-radius);
  box-shadow: none;
  transition: border-color .2s ease, background-color .2s ease;
}
.package:hover,
.package:focus-within,
.beach-card:hover,
.beach-card:focus-within {
  border-color: var(--cbw-line);
  border-top-color: var(--cbw-coral);
  background: var(--cbw-shell);
  transform: none;
  box-shadow: none;
}

.package h3 {
  color: var(--cbw-deep);
  font-family: var(--cbw-display);
  font-weight: 600;
  font-size: 1.42rem;
  letter-spacing: -.01em;
}
/* Scoped to package cards: add-ons.html uses .price for a small pill badge. */
.package .price,
.packages .price {
  font-family: var(--cbw-body);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--cbw-coral);
  letter-spacing: .07em;
}
.package img,
.beach-card img { border-radius: 0; }
.beach-card { overflow: hidden; }

.package ul { color: var(--cbw-ink-soft); }
.package summary.readmore {
  color: var(--cbw-coral);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .76rem;
}

/* ---------- 7. Shared navigation ----------
   Nav styling lives in /assets/header.html, NOT here. That file is injected
   with innerHTML at runtime, so its <style> block lands after this
   stylesheet and wins every equal-specificity contest. Only the page-local
   `nav { }` leakage is neutralised from here.
   --cbw-nav-h above must track the height of the utility strip plus the bar. */
[data-cbw="header"] > nav.cbw-nav { padding: 0; }

/* The chrome must span the full viewport whatever the page wraps it in.
   blog.html sets `body{display:grid;place-items:start center}`, which sized
   the header to 871px and the footer to 820px on a 1440px screen while every
   other page ran edge to edge. */
[data-cbw="header"],
[data-cbw="footer"] {
  display: block;
  width: 100%;
  justify-self: stretch;
  align-self: stretch;
  grid-column: 1 / -1;
}

/* ---------- 8. Floating widgets ---------- */
.floating-cta {
  font-family: var(--cbw-body);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--cbw-coral);
  border-radius: var(--cbw-radius);
  box-shadow: none;
  padding: 15px 22px;
}
.floating-cta:hover, .floating-cta:focus { background: var(--cbw-deep); }

.floating-counter {
  font-family: var(--cbw-body);
  background: var(--cbw-deep);
  border: 0;
  border-left: 3px solid var(--cbw-coral);
  border-radius: 0;
  color: #fff;
  box-shadow: none;
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* ---------- 9. Footer ---------- */
/* The footer is dark on every template, so force the text light too —
   blog.html sets `.foot{color:var(--muted)}`, which would otherwise win. */
footer {
  background: var(--cbw-deep) !important;
  color: rgba(255,255,255,.84) !important;
  font-family: var(--cbw-body);
}
footer .muted, footer small, footer span { color: rgba(255,255,255,.72); }
footer h3, footer h4 {
  font-family: var(--cbw-display);
  font-weight: 600;
  color: #fff;
  font-size: 1.1rem;
  letter-spacing: 0;
}
footer p { color: rgba(255,255,255,.8); }
footer a { color: var(--cbw-coral-300); }
footer a:hover { color: #fff; }
/* No desaturation on footer logos — award badges show in full colour.
   The look is owned by /assets/footer.html. */

/* ---------- 10. Reusable homepage/section blocks ---------- */
.cbw-band { padding: clamp(52px, 6.5vw, 96px) 20px; }
.cbw-band--sand { background: var(--cbw-shell); }
.cbw-band--ink { background: var(--cbw-deep); color: #fff; }
.cbw-band--ink h2, .cbw-band--ink h3 { color: #fff; }
.cbw-band--ink p { color: rgba(255,255,255,.82); }
.cbw-inner { max-width: 1080px; margin: 0 auto; }

/* Trust strip — hairline-separated columns, no boxes. */
.cbw-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  max-width: 1000px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--cbw-line);
  border-bottom: 1px solid var(--cbw-line);
}
.cbw-trust li {
  background: none;
  border: 0;
  border-left: 1px solid var(--cbw-line);
  border-radius: 0;
  padding: 30px 20px;
  box-shadow: none;
}
.cbw-trust li:first-child { border-left: 0; }
.cbw-trust .n {
  display: block;
  font-family: var(--cbw-display);
  font-size: 2.9rem;
  font-weight: 600;
  line-height: 1;
  color: var(--cbw-deep);
}
.cbw-trust .l {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px solid var(--cbw-aqua);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cbw-muted);
}
@media (max-width: 620px) {
  .cbw-trust li { border-left: 0; border-top: 1px solid var(--cbw-line); }
  .cbw-trust li:first-child { border-top: 0; }
}

/* Numbered steps — outline numerals on a baseline rule, no cards. */
.cbw-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}
.cbw-steps li {
  counter-increment: step;
  background: none;
  border: 0;
  border-top: 2px solid var(--cbw-aqua);
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  position: static;
}
.cbw-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: static;
  display: block;
  width: auto;
  height: auto;
  margin: 18px 0 2px;
  background: none;
  color: var(--cbw-aqua);
  font-family: var(--cbw-display);
  font-size: 2.3rem;
  font-weight: 400;
  line-height: 1;
  box-shadow: none;
}
.cbw-steps h3 { margin: 6px 0 10px; font-size: 1.16rem; color: var(--cbw-deep); }
.cbw-steps p { margin: 0; font-size: .97rem; }

/* Testimonials — coral left bar, no card. */
.cbw-quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  text-align: left;
}
.cbw-quote {
  background: none;
  border: 0;
  border-left: 3px solid var(--cbw-coral);
  border-radius: 0;
  padding: 4px 0 4px 24px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  margin: 0;
}
.cbw-quote .stars { color: var(--cbw-aqua); letter-spacing: .22em; font-size: .9rem; }
.cbw-quote blockquote {
  margin: 14px 0 18px;
  font-family: var(--cbw-body);
  font-size: 1.06rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--cbw-ink);
}
.cbw-quote cite {
  margin-top: auto;
  font-style: normal;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cbw-muted);
}

/* Closing call to action — solid teal, no photograph. */
.cbw-cta-band {
  background: var(--cbw-deep);
  color: #fff;
  text-align: center;
  padding: clamp(60px, 7.5vw, 104px) 20px;
  position: relative;
  overflow: hidden;
}
.cbw-cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='28' viewBox='0 0 120 28'%3E%3Cpath d='M0 20c15-14 30 8 45 0s30-14 45 0 30 8 30 8' fill='none' stroke='%232a9d9b' stroke-width='1.4'/%3E%3C/svg%3E");
}
.cbw-cta-band > * { position: relative; z-index: 1; }
.cbw-cta-band h2 { color: #fff; }
.cbw-cta-band p { color: rgba(255,255,255,.88); max-width: 600px; margin: 0 auto 30px; }

/* Breadcrumbs */
.cbw-crumbs {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 20px;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cbw-muted);
}
.cbw-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.cbw-crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--cbw-aqua); }
.cbw-crumbs a { color: var(--cbw-muted); text-decoration: none; }
.cbw-crumbs a:hover { color: var(--cbw-coral); text-decoration: underline; }
.cbw-crumbs [aria-current="page"] { color: var(--cbw-deep); font-weight: 600; }

/* ---------- 11. Odds and ends carried over from page-local CSS ---------- */

/* The location templates put this link on a pale pill; the shipped colour
   measured 3.04:1, so it is pinned to the darker coral here. */
.contactline a { color: var(--cbw-coral-600); }

/* add-ons.html section labels shipped at 4.48:1 — just under AA. */
.section-title { color: var(--cbw-muted); }

/* blog.html is the one template with a dark mode; keep links legible in it.
   Covers both routes into dark: the OS preference and the manual toggle,
   which sets .dark on <html> regardless of what the OS reports. */
@media (prefers-color-scheme: dark) {
  :root:not(.light) { --link: var(--cbw-coral-300); }
}
:root.dark { --link: var(--cbw-coral-300); }

/* ---------- 12. Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  /* The add-ons slideshows are pure CSS animation: collapsing their duration
     would leave every frame at opacity 0, so pin the first frame open. */
  .slideshow img { opacity: 0 !important; }
  .slideshow img:first-child { opacity: 1 !important; }
}