
/* =========================================================
   Comox Bay Art — Tiny Coastal Override (A/B friendly)
   v2: resilient to page-level <style> blocks
   HOW TO USE:
   1) Keep this file AFTER theme-lite.css.
   2) Toggle with <body class="theme-coastal">.
   3) If a page has strong inline rules, these scoped !important
      fallbacks ensure the coastal look still applies.
   ========================================================= */

/* -------- Variable remap (modern) --------
   Use :has() to set variables at :root when body has class.
   Most modern Chromium/WebKit support this now. */
:root:has(body.theme-coastal) {
  --tide-900: #23485e;
  --tide-800: #2c5870;
  --tide-700: #356889; /* Tide Pool Blue */
  --tide-600: #457a96;
  --tide-500: #50849c; /* Alt Tide Pool */
  --tide-200: #a8c1cd;

  --seaweed-600: #2f4b40;
  --seaweed-500: #38584b; /* Saltmarsh Green */
  --seaweed-300: #5f8776;
  --seaweed-200: #6f9982; /* Seaweed Green */

  --sandy-500: #a1ac9f; /* Sandy Shore */
  --sandy-300: #c7cfc7;
  --sandy-200: #e0e5df;

  --ink-900: var(--tide-900);
  --ink-700: var(--tide-700);
  --ink-500: var(--tide-500);

  --chip: rgba(168, 193, 205, .25);
  --header-glass: rgba(56, 88, 75, .08);
  --page-gradient: linear-gradient(to bottom, var(--tide-700) 0%, var(--tide-500) 48%, var(--sandy-200) 100%);
  --card-border: rgba(35, 72, 94, .14);
  --card-border-hover: rgba(35, 72, 94, .22);

  --cta-700: var(--tide-700);
  --cta-600: var(--tide-600);
  --cta-500: var(--tide-500);
}

/* West Coast sky with a soft band of warmth at the horizon */
:root {
  --page-gradient:
    radial-gradient(120% 160% at 15% -20%, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #356889 0%, #50849c 45%, #8bc6d6 80%, #e6efe9 100%);
}

/* -------- Variable remap (fallback) --------
   For older engines without :has(), place vars on body. */
body.theme-coastal {
  --tide-900: #23485e;
  --tide-800: #2c5870;
  --tide-700: #356889;
  --tide-600: #457a96;
  --tide-500: #50849c;
  --tide-200: #a8c1cd;
  --seaweed-600: #2f4b40;
  --seaweed-500: #38584b;
  --seaweed-300: #5f8776;
  --seaweed-200: #6f9982;
  --sandy-500: #a1ac9f;
  --sandy-300: #c7cfc7;
  --sandy-200: #e0e5df;
  --ink-900: var(--tide-900);
  --ink-700: var(--tide-700);
  --ink-500: var(--tide-500);
  --chip: rgba(168, 193, 205, .25);
  --header-glass: rgba(56, 88, 75, .08);
  --page-gradient: linear-gradient(to bottom, var(--tide-700) 0%, var(--tide-500) 48%, var(--sandy-200) 100%);
  --card-border: rgba(35, 72, 94, .14);
  --card-border-hover: rgba(35, 72, 94, .22);
  --cta-700: var(--tide-700);
  --cta-600: var(--tide-600);
  --cta-500: var(--tide-500);
}

/* Ensure the viewport background actually updates even if html held it */
html:has(body.theme-coastal),
body.theme-coastal {
  background: var(--page-gradient) !important;
  background-image: var(--page-gradient) !important;
}

/* ------ Minimal UI tints (scoped) ------ */
body.theme-coastal .hero-nav,
body.theme-coastal .sticky-nav {
  background: rgba(241, 244, 242, .65) !important;
}
body.theme-coastal .hero-link,
body.theme-coastal .sticky-link {
  color: var(--seaweed-500) !important;
}
body.theme-coastal .hero-link:hover,
body.theme-coastal .sticky-link:hover {
  background: rgba(161, 172, 159, .35) !important;
}
body.theme-coastal .hr-soft {
  background: linear-gradient(90deg, transparent, rgba(35,72,94,.28), transparent) !important;
}

/* ------ Page-specific hardening: about.php ------ */
/* The about hero uses a hard-coded light-blue gradient; recolor it. */
body.theme-coastal .about-hero {
  background: linear-gradient(135deg, var(--tide-200), var(--sandy-200)) !important;
  color: var(--ink-900);
}
/* Headings and copy tint */
body.theme-coastal .about-hero h1 { color: var(--ink-900) !important; }
body.theme-coastal .about-hero p  { color: #3f5e6f !important; }

/* CTA buttons in about.php are defined in the page <style>. Override them. */
body.theme-coastal .btn-primary {
  background: linear-gradient(135deg, var(--cta-600), var(--cta-500)) !important;
  color: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
}
body.theme-coastal .btn-outline {
  border: 1.5px solid var(--cta-600) !important;
  color: var(--cta-600) !important;
  background: #fff !important;
}
body.theme-coastal .btn-outline:hover {
  background: rgba(80,132,156,.10) !important; /* faint tide */
  border-color: var(--cta-700) !important;
}

/* Cards & hr inside about */
body.theme-coastal .card, 
body.theme-coastal .quote, 
body.theme-coastal .value {
  border-color: var(--card-border) !important;
  box-shadow: 0 1px 2px rgba(16, 42, 67, .04), 0 8px 24px rgba(16, 42, 67, .08) !important;
}
body.theme-coastal .hr-soft { border: 0 !important; }

/* ------ Optional wave recolor helpers ------ */
.coastal-waves .wave--front { fill: var(--tide-700) !important; }
.coastal-waves .wave--mid   { fill: var(--seaweed-300) !important; }
.coastal-waves .wave--back  { fill: var(--tide-500) !important; }

/* ------ Utilities for other inline-heavy pages ------ */
.coastal-force-bg {
  background: var(--page-gradient) !important;
  background-image: var(--page-gradient) !important;
}
.coastal-glass {
  background: rgba(241, 244, 242, .65) !important;
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  backdrop-filter: saturate(160%) blur(8px);
  border: 1px solid rgba(35,72,94,.12) !important;
}
.coastal-hr { 
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(35,72,94,.28), transparent) !important;
  border: 0 !important;
}


/* ===== Dark sticky header readability (coastal) ===== */
body.theme-coastal .header-sticky {
  /* deepen/tidy the bar so text pops */
  background: linear-gradient(to bottom, rgba(35,72,94,.94), rgba(35,72,94,.90)) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

/* brand text beside the logo */
body.theme-coastal .header-sticky .brand-name {
  color: #ffffff !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}

/* logo ring to separate from dark bar */
/*body.theme-coastal .header-sticky .brand-logo {
  box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 2px 10px rgba(0,0,0,.25) !important;
}*/

/* nav chip becomes subtle glass on dark */
body.theme-coastal .header-sticky .sticky-nav {
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.18) !important;
}

/* links readable against dark */
body.theme-coastal .header-sticky .sticky-link {
  color: #f3f8fa !important;
  font-weight: 600;
}
body.theme-coastal .header-sticky .sticky-link:hover {
  background: rgba(255,255,255,.16) !important;
}
body.theme-coastal .header-sticky .sticky-link:focus-visible {
  outline: 2px solid rgba(255,255,255,.55) !important;
  outline-offset: 2px;
  border-radius: 8px;
}

/* if there are buttons inside the header, harmonize */
body.theme-coastal .header-sticky .btn,
body.theme-coastal .header-sticky .btn-outline {
  border-color: rgba(255,255,255,.28) !important;
  color: #ffffff !important;
  background: transparent !important;
}
body.theme-coastal .header-sticky .btn:hover,
body.theme-coastal .header-sticky .btn-outline:hover {
  background: rgba(255,255,255,.14) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.22) !important;
}

/* mobile: keep spacing airy so it doesn't feel cramped on dark */
@media (max-width: 768px){
  body.theme-coastal .header-sticky .sticky-link { padding: 3px 12px !important; }
}


/* =========================================================
   Coastal About Hero — deep, layered, legible
   Applies when <body class="theme-coastal"> is present.
   Structure expects .about-hero.coastal variant (see HTML snippet).
   ========================================================= */

body.theme-coastal .about-hero.coastal {
  position: relative;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: clamp(14px, 2.4vw, 22px);
  align-items: center;
  padding: clamp(16px, 3.4vw, 26px);
  border-radius: 14px;
  overflow: hidden;
  /* horizon → sea → shore */
  background: linear-gradient(
    165deg,
    var(--tide-700) 0%,
    var(--tide-600) 36%,
    var(--tide-500) 66%,
    var(--sandy-200) 100%
  );
  box-shadow: var(--shadow-md);
  isolation: isolate; /* ensure overlays mix correctly */
}

/* soft vignette and sheen */
body.theme-coastal .about-hero.coastal::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 140% at 80% -10%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,0) 28%, rgba(0,0,0,0) 72%, rgba(0,0,0,.08));
  mix-blend-mode: screen;
  z-index: 0;
}

/* subtle wave edge at the bottom */
body.theme-coastal .about-hero.coastal::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 32px;
  background:
    radial-gradient(60% 100% at 20% 0%, rgba(255,255,255,.22), rgba(255,255,255,0) 70%),
    radial-gradient(50% 100% at 70% 0%, rgba(255,255,255,.16), rgba(255,255,255,0) 70%);
  pointer-events: none;
  z-index: 0;
  opacity: .85;
}

/* portrait / logo puck */
body.theme-coastal .about-hero.coastal .hero-media {
  position: relative; z-index: 1;
  width: 140px; height: 140px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow:
    0 0 0 2px rgba(255,255,255,.18),
    0 10px 26px rgba(0,0,0,.26);
}
body.theme-coastal .about-hero.coastal .hero-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* copy */
body.theme-coastal .about-hero.coastal h1 {
  margin: 0;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1.15;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
body.theme-coastal .about-hero.coastal p {
  margin: .4rem 0 0;
  color: rgba(255,255,255,.92);
  max-width: 62ch;
  text-shadow: 0 1px 3px rgba(0,0,0,.25);
}

/* responsive: stack on small screens */
@media (max-width: 560px) {
  body.theme-coastal .about-hero.coastal {
    grid-template-columns: 1fr;
    text-align: center;
    padding: clamp(16px, 4.2vw, 24px);
  }
  body.theme-coastal .about-hero.coastal .hero-media {
    margin: 0 auto;
    width: 120px; height: 120px; border-radius: 16px;
  }
}

/* respect reduced motion: disable glints */
@media (prefers-reduced-motion: reduce) {
  body.theme-coastal .about-hero.coastal::before,
  body.theme-coastal .about-hero.coastal::after {
    animation: none;
  }
}


/* =========================================================
   About Hero — neutral, card-friendly (coastal A/B)
   Keeps your original HTML; just removes the busy styling.
   ========================================================= */
body.theme-coastal .post-shell .about-hero {
  background: #ffffff !important;        /* or 'transparent' if you prefer */
  border: 1px solid var(--card-border) !important;
  box-shadow: 0 1px 2px rgba(16,42,67,.04), 0 8px 24px rgba(16,42,67,.06) !important;
  padding: clamp(16px, 2.2vw, 22px) !important;
  border-radius: 12px !important;
  grid-template-columns: 120px 1fr !important; /* keep your layout */
  gap: 16px !important;
}

body.theme-coastal .post-shell .about-hero img {
  border-radius: 12px !important;
  box-shadow: none !important;
}

body.theme-coastal .post-shell .about-hero h1,
body.theme-coastal .post-shell .about-hero p {
  text-shadow: none !important;  /* remove text glow */
}

body.theme-coastal .post-shell .about-hero h1 {
  color: var(--ink-900) !important;
}

body.theme-coastal .post-shell .about-hero p {
  color: #476173 !important;     /* keeps your original muted copy tone */
  max-width: 65ch !important;
}

/* Compact variant: add .about-hero--compact if you want a tighter look */
body.theme-coastal .post-shell .about-hero.about-hero--compact {
  grid-template-columns: 96px 1fr !important;
  padding: clamp(12px, 2vw, 18px) !important;
  gap: 14px !important;
}

/* Edge-to-edge variant: remove border/shadow if the card already provides it */
body.theme-coastal .post-shell .about-hero.about-hero--flat {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Strip the old styling */
.about-hero {
  background: transparent;
  padding: 0;           /* the tile provides its own padding */
  border: 0;
}

/* The padded white tile behind the logo */
.logo-wrap {
  display: inline-block;
  background: #fff;         /* make this transparent if your card is already white */
  padding: 20px 24px;       /* increase/decrease as you like */
  border: 1px solid #e6e9ea;
  border-radius: 12px;
}

/* Keep the logo comfortably inside the tile */
.hero-media img {
  display: block;
  max-width: 200px;         /* tweak to taste */
  height: auto;
}

/* Add clear space between logo column and text column */
.about-hero .hero-copy {
  padding-left: 1.35rem;    /* extra separation from the logo on large screens */
}

/* Kill any odd text shadows from previous styles */
.about-hero h1, .about-hero p {
  text-shadow: none !important;
}

/* Responsive: stack and center the logo tile on small screens */
@media screen and (max-width: 63.9375em) { /* Foundation large breakpoint */
  .about-hero .hero-copy { padding-left: 0; }
  .hero-media { text-align: center; margin-bottom: .75rem; }
  .logo-wrap { margin: 0 auto; }
}



/* ===== About hero — nicer title wrap + breathing room under logo ===== */

/* Improve wrapping so last line isn't a lonely word or two */
body.theme-coastal #about-hero .hero-copy h1 {
  inline-size: clamp(20ch, 42vw, 28ch) !important; /* force a comfortable line length */
  max-width: none !important;
  text-wrap: balance;                 /* modern widow control */
  white-space: normal !important;
  overflow-wrap: normal !important;
}

/* Fallback if balance isn't supported */
@supports not (text-wrap: balance) {
  body.theme-coastal #about-hero .hero-copy h1 {
    inline-size: 28ch !important;
  }
}

/* Add a bit of space between the logo and the bottom border line */
body.theme-coastal #about-hero .about-logo {
  margin: 0 0 8px 0 !important;       /* tiny bottom gap so logo doesn't sit on the line */
}

@media (min-width: 64em) {
  body.theme-coastal #about-hero .about-logo {
    margin-bottom: 10px !important;   /* a hair more on large screens */
  }
}
/* ================================================
   INDEX hero tweaks (pre-sticky) — coastal theme
   - Light text on dark/gradient hero
   - Coastal "glass" buttons for hero links
   - Pagination centering under cards
   ================================================ */

/* 1) Hero title + lead copy (only inside the hero wrapper on index) */
body.theme-coastal .page_background_graphic .hero-title {
  color: #f6fbff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.22);
}
body.theme-coastal .page_background_graphic .lead {
  color: rgba(255,255,255,.92) !important;
}

/* 2) Pre-sticky hero links (override old dark-on-light rules) */
body.theme-coastal .page_background_graphic .hero-link {
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
body.theme-coastal .page_background_graphic .hero-link:hover {
  background: rgba(255,255,255,.18);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
body.theme-coastal .page_background_graphic .hero-link:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
body.theme-coastal .page_background_graphic .hero-link:focus-visible {
  outline: 2px solid rgba(255,255,255,.7);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(0,0,0,.35);
  border-radius: 10px;
}

/* Keep sticky header links as-is (already hardened earlier) */
body.theme-coastal .header-sticky .sticky-link { /* no change */ }

/* 3) Shared weight stays consistent */
.btn, .hero-link, .sticky-link, .chip { font-weight: 500; }

/* 4) Pagination centering under cards (your styles looked good—just center) */
.cb-pager { justify-content: center; }

/* 5) (Optional) Slightly balance very long hero titles for nicer wrapping */
@supports (text-wrap: balance) {
  body.theme-coastal .page_background_graphic .hero-title { text-wrap: balance; }
}
/* =========================================================
   Index hero title + filter chips (coastal)
   ========================================================= */

/* 1) Index hero title and lead (inside the index hero wrapper) */
body.theme-coastal .page_background_graphic .hero-title {
  color: #f6fbff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.22);
  /* nicer wrapping (prevents "Company" as a lonely line) */
  inline-size: clamp(22ch, 48vw, 32ch);
  letter-spacing: .2px;
}
@supports (text-wrap: balance) {
  body.theme-coastal .page_background_graphic .hero-title { text-wrap: balance; }
}
body.theme-coastal .page_background_graphic .lead {
  color: rgba(255,255,255,.92) !important;
}

/* 2) Filter row (tag chips) — sits on light content area */
body.theme-coastal .tagbar {
  display: flex; flex-wrap: wrap;
  gap: .5rem .6rem;
  margin: 1rem 0 1.25rem;
  justify-content: center; /* centers the row under the hero/cards */
}

/* Base chip (hollow) */
body.theme-coastal .tagbar a.button {
  --chip-ring: var(--card-border, rgba(35,72,94,.14));
  --chip-fg:   var(--tide-700, #356889);
  background: #fff !important;
  color: var(--chip-fg) !important;
  border: 1.25px solid var(--chip-ring) !important;
  border-radius: 9999px !important;
  padding: .55rem .85rem !important;
  font-size: .95rem !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(16,42,67,.05);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

/* Hover/active for hollow */
body.theme-coastal .tagbar a.button:hover {
  background: rgba(80,132,156,.08) !important; /* faint tide */
  border-color: rgba(35,72,94,.22) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(16,42,67,.10);
}

/* Active chip (filled) — either .primary or aria-current=page */
body.theme-coastal .tagbar a.button.primary,
body.theme-coastal .tagbar a[aria-current="page"] {
  background: linear-gradient(135deg, var(--tide-700), var(--tide-600)) !important;
  color: #fff !important;
  border-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 10px 22px rgba(16,42,67,.18);
  font-weight: 600 !important;
}
body.theme-coastal .tagbar a.button.primary:hover,
body.theme-coastal .tagbar a[aria-current="page"]:hover {
  filter: brightness(1.03);
}

/* Keyboard focus */
body.theme-coastal .tagbar a.button:focus-visible {
  outline: 2px solid rgba(53,104,137,.55) !important; /* tide-700 */
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(16,42,67,.14);
  border-radius: 9999px;
}

/* Keep your desired weight across interactive elements */
.btn, .hero-link, .sticky-link, .chip { font-weight: 500; }

/* 3) Pagination centered (under cards) — you said styles look good; just center */
.cb-pager { justify-content: center; }

/* =========================================================
   Index hero + tagbar (coastal refinements)
   ========================================================= */

/* 1) Hero title (force light on the blue hero) */
body.theme-coastal .page_background_graphic .hero-title,
body.theme-coastal .hero .hero-title,
body.theme-coastal .hero-title {
  color: #f6fbff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.22);
}
@supports (text-wrap: balance) {
  body.theme-coastal .page_background_graphic .hero-title { text-wrap: balance; }
}
/* Optional: hero lead copy also light */
body.theme-coastal .page_background_graphic .lead { color: rgba(255,255,255,.92) !important; }

/* 2) Tagbar chips — light coastal tint (not white) + light hover */
body.theme-coastal .tagbar {
  justify-content: center; /* centered under hero/cards */
  gap: .5rem .6rem;
}

/* Base (hollow with tinted background) */
body.theme-coastal .tagbar a.button {
  --chip-fg:   var(--tide-700, #356889);
  --chip-bg:   #ecf4f6;                 /* pale coastal blue (not white) */
  --chip-bg-h: #f4fafb;                 /* lighter on hover */
  --chip-ring: rgba(35,72,94,.18);      /* subtle coastal ring */
  background: var(--chip-bg) !important;
  color: var(--chip-fg) !important;
  border: 1.25px solid var(--chip-ring) !important;
  border-radius: 9999px !important;
  padding: .55rem .85rem !important;
  font-size: .95rem !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(16,42,67,.05);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

/* Light hover (no darkening) */
body.theme-coastal .tagbar a.button:hover {
  background: var(--chip-bg-h) !important;        /* lighter, not darker */
  border-color: rgba(35,72,94,.24) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(16,42,67,.10);
}

/* Active chip (filled) — keep strong selection but hover stays light */
body.theme-coastal .tagbar a.button.primary,
body.theme-coastal .tagbar a[aria-current="page"] {
  background: linear-gradient(135deg, var(--tide-700), var(--tide-600)) !important;
  color: #ffffff !important;
  border-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 10px 22px rgba(16,42,67,.18);
  font-weight: 600 !important;
}
body.theme-coastal .tagbar a.button.primary:hover,
body.theme-coastal .tagbar a[aria-current="page"]:hover {
  /* nudge brighter rather than darker */
  filter: brightness(1.06);
}

/* Accessible focus */
body.theme-coastal .tagbar a.button:focus-visible {
  outline: 2px solid rgba(53,104,137,.55) !important; /* tide-700 */
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(16,42,67,.14);
  border-radius: 9999px;
}

/* Keep your desired weights consistent */
.btn, .hero-link, .sticky-link, .chip { font-weight: 500; }

/* =========================================================
   Main nav (pre-sticky) — blend into hero background
   ========================================================= */

/* The lightweight bar that holds Home / About / Contact inside the hero */
body.theme-coastal .page_background_graphic .hero-nav {
  background: rgba(255,255,255,.03) !important;         /* nearly invisible */
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  backdrop-filter: blur(6px) saturate(140%);
  border: 1px solid rgba(35,72,94,.10) !important;      /* whisper of a ring */
  box-shadow: none !important;
  padding: 6px 8px;                                     /* slimmer = less visual weight */
  border-radius: 12px;
  margin-bottom: .5rem;                                 /* give filters some air */
}

/* Links inside the hero nav: calm by default, light hover */
body.theme-coastal .page_background_graphic .hero-nav .hero-link {
  color: rgba(255,255,255,.50) !important;
  background: transparent !important;
  text-decoration: none;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
body.theme-coastal .page_background_graphic .hero-nav .hero-link:hover {
  background: rgba(255,255,255,.10) !important;         /* lighter, not darker */
  transform: translateY(-1px);
}
body.theme-coastal .page_background_graphic .hero-nav .hero-link:active {
  transform: translateY(0);
}

/* Active/current page: still subtle, not a big pill */
body.theme-coastal .page_background_graphic .hero-nav .hero-link[aria-current="page"],
body.theme-coastal .page_background_graphic .hero-nav .hero-link.is-active {
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,.35);     /* a gentle underline cue */
}

/* Keyboard focus (visible on glass) */
body.theme-coastal .page_background_graphic .hero-nav .hero-link:focus-visible {
  outline: 2px solid rgba(255,255,255,.70);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Keep sticky header treatment as-is (no changes here) */
/* body.theme-coastal .header-sticky .sticky-nav { … } */

/* Ensure the hero title is light over the blue hero */
body.theme-coastal .page_background_graphic .hero-title {
  color: #f6fbff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.22);
}

/* ================================================
   HERO (pre-sticky) — header-hero scope
   ================================================ */

/* Title: force light over the blue hero */
body.theme-coastal .header-hero .hero-title {
  color: #f6fbff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.22);
  /* nicer wrapping */
  inline-size: clamp(22ch, 48vw, 32ch);
}
@supports (text-wrap: balance) {
  body.theme-coastal .header-hero .hero-title { text-wrap: balance; }
}

/* Nav container: subtle glass so it blends with background */
body.theme-coastal .header-hero .hero-nav {
  background: rgba(255,255,255,.06) !important;
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  backdrop-filter: blur(6px) saturate(140%);
  border: 1px solid rgba(35,72,94,.10) !important;
  border-radius: 12px;
  padding: 6px 8px;
  margin-bottom: .5rem;
  box-shadow: none !important;
}

/* Links: calm by default, DARKEN on hover (per your request) */
body.theme-coastal .header-hero .hero-nav .hero-link {
  color: rgba(255,255,255,.92) !important;
  background: transparent !important;
  text-decoration: none;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
body.theme-coastal .header-hero .hero-nav .hero-link:hover {
  background: rgba(0,0,0,.18) !important;        /* darker hover */
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
body.theme-coastal .header-hero .hero-nav .hero-link:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(0,0,0,.20);
}
body.theme-coastal .header-hero .hero-nav .hero-link[aria-current="page"],
body.theme-coastal .header-hero .hero-nav .hero-link.is-active {
  background: rgba(0,0,0,.24) !important;        /* subtle, not a big pill */
  color: #fff !important;
}

/* Keyboard focus visible on glass */
body.theme-coastal .header-hero .hero-nav .hero-link:focus-visible {
  outline: 2px solid rgba(255,255,255,.70);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Leave sticky header styles AS-IS */

/* ===== HERO centering (header-hero) ===== */
body.theme-coastal .header-hero .hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;          /* center logo, title, nav */
  text-align: center;           /* fallback if children inherit left-align */
}

body.theme-coastal .header-hero .hero-logo {
  display: inline-block;
  margin: 0 auto .5rem;         /* center the logo block */
}

body.theme-coastal .header-hero .hero-title {
  display: block;
  margin: 14px auto 10px;       /* center + nice vertical rhythm */
  text-align: center;
  inline-size: clamp(22ch, 48vw, 32ch); /* keep good line length */
  color: #f6fbff !important;    /* ensure light on blue */
  text-shadow: 0 2px 8px rgba(0,0,0,.22);
}
@supports (text-wrap: balance) {
  body.theme-coastal .header-hero .hero-title { text-wrap: balance; }
}

body.theme-coastal .header-hero .hero-nav {
  margin-left: auto;
  margin-right: auto;           /* nav pill sits centered under title */
}

/* ===== Coastal Footer ===== */
body.theme-coastal .coastal-footer{
  position: relative;
  color: #f3f8fa;
  /*background: linear-gradient(180deg, rgba(35,72,94,.0) 0%, rgba(35,72,94,.35) 40%, rgba(35,72,94,.55) 100%);*/
  /*-webkit-backdrop-filter: saturate(140%) blur(6px);*/
  /*backdrop-filter: saturate(140%) blur(6px);*/
  /*border-top: 1px solid rgba(255,255,255,.12);*/
  padding-top: 14px;
 /* padding-bottom: 14px;*/
}

/* Kelp divider */
body.theme-coastal .coastal-footer .kelp-divider{
  position: absolute; top: -20px; left: 0; right: 0; height: 28px; pointer-events: none;
}
body.theme-coastal .coastal-footer .kelp-divider svg{ width: 100%; height: 100%; display: block; }
body.theme-coastal .coastal-footer .kelp-divider path{ fill: rgba(255,255,255,.10); }

/* Columns */
body.theme-coastal .coastal-footer .footer-brand{ margin-bottom: 1rem; }
body.theme-coastal .coastal-footer .footer-logo img{
  display:block; width:auto; height:auto; max-width:120px;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.22));
}
body.theme-coastal .coastal-footer .footer-tagline{ margin:.5rem 0 0; color: rgba(255,255,255,.92); }
body.theme-coastal .coastal-footer .footer-ack{ margin:.35rem 0 0; color: rgba(255,255,255,.75); font-size: .95rem; }

body.theme-coastal .coastal-footer .footer-head{
  margin: 0 0 .5rem; font-size: 1rem; font-weight: 600; letter-spacing:.3px;
  color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,.25);
}
body.theme-coastal .coastal-footer .footer-list{ list-style:none; margin:0; padding:0; }
body.theme-coastal .coastal-footer .footer-list li{ margin:.35rem 0; }
body.theme-coastal .coastal-footer .footer-list a{
  color: rgba(255,255,255,.88); text-decoration:none; border-radius: 8px; padding:2px 4px;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
body.theme-coastal .coastal-footer .footer-list a:hover{
  background: rgba(255,255,255,.14);
  transform: translateY(-1px);
}

/* Social inline SVGs inherit text color */
body.theme-coastal .coastal-footer .footer-social svg{
  width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; fill: currentColor;
}

/* Newsletter */
body.theme-coastal .coastal-footer .newsletter-form{ display:flex; gap:.5rem; margin:.35rem 0 .25rem; }
body.theme-coastal .coastal-footer .newsletter-form input[type="email"]{
  flex:1 1 auto; min-width: 180px;
  background: rgba(255,255,255,.10); color:#fff;
  border:1px solid rgba(255,255,255,.24); border-radius:10px; padding:.6rem .75rem;
}
body.theme-coastal .coastal-footer .newsletter-form input::placeholder{ color: rgba(255,255,255,.75); }
body.theme-coastal .coastal-footer .newsletter-form .btn--nl{
  background: linear-gradient(135deg, var(--tide-700), var(--tide-600));
  border: 1px solid rgba(0,0,0,.08);
  color: #fff; border-radius:10px; padding:.6rem .85rem; font-weight:600;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
body.theme-coastal .coastal-footer .newsletter-form .btn--nl:hover{ filter:brightness(1.06); }
body.theme-coastal .coastal-footer .newsletter-form .hp{ position:absolute; left:-9999px; }

/* Bottom bar */
body.theme-coastal .coastal-footer .footer-bottom{
  /*border-top: 1px solid rgba(255,255,255,.10);*/
  margin-top: 1.25rem; padding: 1.85rem .75rem .35rem;
  color: #5b6a7a;
}
body.theme-coastal .coastal-footer .footer-bottom a{
  color:#5b6a7a;
}
body.theme-coastal .coastal-footer .footer-bottom small{
  color:#5b6a7a;
}
body.theme-coastal .coastal-footer .back-to-top{
  color:#1d4d7a; text-decoration:none; padding:.35rem .5rem; border-radius:8px;
}
body.theme-coastal .coastal-footer .back-to-top:hover{ background: rgba(29,77,122,.12); }

/* Responsive stack */
@media (max-width: 640px){
  body.theme-coastal .coastal-footer .newsletter-form{ flex-direction: column; }
}
/* Footer should sit well above the fixed ocean layers */
body.theme-coastal .coastal-footer {
  position: relative;
  z-index: 8;                 /* ensure footer stays above front wave, just in case */
}

/* More breathing room before the animation begins */
body.theme-coastal .ocean-clear {
  /* ocean height + how high mountains rise + extra padding */
  padding-bottom: calc(var(--ocean-height) + var(--mountain-rise) + 140px);
}
@media (max-width: 600px){
  body.theme-coastal .ocean-clear {
    padding-bottom: calc(var(--ocean-height) + var(--mountain-rise) + 180px);
  }
}

/* === Sticky scope/fallback ====================================== */
/* Never make the entire header sticky */
.site-header { position: static !important; }

/* Bar basics */
.header-sticky { z-index: 1200; transition: transform .18s ease; will-change: transform; }

/* HOME ONLY (has #hero): slide up/into view */
#hero ~ [data-sticky-container] .header-sticky.is-stuck { transform: translateY(-110%); }
#hero ~ [data-sticky-container] .header-sticky.is-stuck.is-reveal { transform: translateY(0); }

/* Inside pages (no #hero): no slide needed; visible when stuck (nothing to add) */

/* When fallback uses fixed mode, avoid content jump */
html.header-stuck main { padding-top: var(--header-h, 80px); }


/* === Sticky scope / reveal-on-scroll (home) ===================== */
/* Never let the entire header stick */
.site-header { position: static !important; }

/* Bar basics */
.header-sticky { z-index: 1200; transition: transform .18s ease; will-change: transform; }

/* Home only (has #hero): hidden while stuck until JS adds .is-reveal */
#hero ~ [data-sticky-container] .header-sticky.is-stuck { transform: translateY(-110%); }
#hero ~ [data-sticky-container] .header-sticky.is-stuck.is-reveal { transform: translateY(0); }

/* Fallback spacing when we run fixed-mode */
html.header-stuck main { padding-top: var(--header-h, 80px); }

/* Always-visible fixed header (no Foundation Sticky) */
.site-header { position: static !important; }

.header-sticky.always-fixed {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1200; /* ocean CSS bumps to 9999 !important anyway */
  transform: none !important;
  /* Optional: respect iOS notch */
  padding-top: env(safe-area-inset-top);
}

/* Kill any leftover transform-based states from old scripts */
.header-sticky.always-fixed.is-stuck,
.header-sticky.always-fixed.is-reveal { transform: none !important; }

/* Give the page room under the fixed bar */
body.has-fixed-header main { padding-top: var(--header-h, 80px); }

/* === Fixed header: simple + reliable (no Foundation needed) === */
:root { --header-h: 72px; }          /* default until JS measures */
html { scroll-padding-top: var(--header-h); }
main { padding-top: var(--header-h); }

.site-header { position: relative; z-index: 9999; }

/* The bar itself */
.header-sticky {
  position: fixed; top: 0; left: 0; right: 0;
  background: linear-gradient(to bottom, rgba(35,72,94,.94), rgba(35,72,94,.90));
  border-bottom: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  backdrop-filter: saturate(160%) blur(8px);
}

/* Inner layout */
.sticky-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
}

/* Branding */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }

.brand-name { color: #fff; font-weight: 600; }

/* Nav chip */
.sticky-nav {
  margin-left: auto; display: flex; gap: 8px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px; padding: 6px 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.sticky-link {
  color: #f3f8fa; text-decoration: none;
  padding: 6px 10px; border-radius: 8px; font-weight: 600;
}
.sticky-link:hover { background: rgba(255,255,255,.16); }

/* Make sure ocean graphics never cover the header */
.header-sticky, .title-bar, .top-bar { z-index: 9999 !important; }

/* Tagbar: left on small, centered on medium/large+ */
body.theme-coastal .tagbar {
  justify-content: flex-start !important; /* default: small */
  gap: .5rem .6rem; /* keep your gap */
}

@media screen and (min-width: 40em) { /* Foundation medium */
  body.theme-coastal .tagbar {
    justify-content: center !important;   /* large, xlarge, xxlarge */
  }
}

/* === Gloria overrides (only when body has .theme-coastal--gloria) === */
.theme-coastal.theme-coastal--gloria,
.theme-coastal.theme-coastal--gloria .page_background,
.theme-coastal.theme-coastal--gloria .page_background_light{
  background:#fff !important;
  color:#0b2a45 !important; /* darker coastal blue for text */
}

/* Links */
.theme-coastal.theme-coastal--gloria a{ color:#1d4d7a !important; }

/* Hide per-post tag lists (keep the top tag-chip nav) */
.theme-coastal.theme-coastal--gloria .post-tags{ display:none !important; }

/* Cards: remove rounding */
.theme-coastal.theme-coastal--gloria #post-grid .card,
.theme-coastal.theme-coastal--gloria #post-grid .post-card,
.theme-coastal.theme-coastal--gloria .home-post-grid .post-card{
  border-radius:0 !important;
}

/* Listing images: force square-ish cover + no rounding */
.theme-coastal.theme-coastal--gloria #post-grid .card img,
.theme-coastal.theme-coastal--gloria #post-grid .post-card img,
.theme-coastal.theme-coastal--gloria #post-grid .grid .card img,
.theme-coastal.theme-coastal--gloria .home-post-grid img{
  width:100% !important;
  height:auto !important;
  object-fit:cover !important;
  object-position:center !important;
  border-radius:0 !important;
}

/* Optional helper for “padding-top:100%” square boxes if you use them */
.theme-coastal.theme-coastal--gloria .square-box{
  position:relative; width:100%; padding-top:100%; overflow:hidden; background:#f7f9fb;
}
.theme-coastal.theme-coastal--gloria .square-box > img{
  position:absolute; top:0; left:0; width:100%; height:100%;
  object-fit:cover; object-position:center; border-radius:0 !important;
}

/* Home section headers + spacer (for the two 3-up rows) */
.theme-coastal.theme-coastal--gloria .section-header{ margin:1.5rem 0 1rem; }
.theme-coastal.theme-coastal--gloria .section-header h2{ margin:0; font-weight:700; }
.theme-coastal.theme-coastal--gloria .home-section-spacer{
  height:1.25rem; border-top:0; border-bottom:0;
  margin:1.25rem 0 1.75rem;
}

/* Listing meta */
.theme-coastal.theme-coastal--gloria .cba-post-date{ font-size:.85rem; color:#556276; margin:.4rem 0 .35rem; }
.theme-coastal.theme-coastal--gloria .cba-post-title{ margin:0 0 .5rem; line-height:1.2; }
.theme-coastal.theme-coastal--gloria .cba-post-excerpt{ margin:0 0 .5rem; }
.theme-coastal.theme-coastal--gloria .cba-read-more a{ font-weight:600; }

/* (Optional) Slightly bluer sailboat on Home only */
.theme-coastal.theme-coastal--gloria .sailboat--home img,
.theme-coastal.theme-coastal--gloria .sailboat--home .sailboat-gif{
  filter:hue-rotate(12deg) saturate(1.1);
}

/* ========= Gloria hero (bulletproof, scoped) ========= */
.theme-coastal.theme-coastal--gloria #hero.header-hero,
.theme-coastal.theme-coastal--gloria .page_background_graphic #hero.header-hero{
  background:#fff !important;
  background-image:none !important; /* kill gradients */
  border-bottom:0 !important;
  box-shadow:none !important;
  position:relative !important;
}

/* Nuke theme overlays */
.theme-coastal.theme-coastal--gloria #hero.header-hero::before,
.theme-coastal.theme-coastal--gloria #hero.header-hero::after{
  content:none !important;
  display:none !important;
}

/* Layout + container */
.theme-coastal.theme-coastal--gloria #hero .hero-inner{
  max-width:1100px !important;
  margin:0 auto !important;
  padding:24px 16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:24px !important;
  flex-wrap:wrap !important;
  text-align:left !important;
}

/* Logo: square, no float/shadow */
.theme-coastal.theme-coastal--gloria #hero .hero-logo--float{
  width:200px !important;
  height:200px !important;
  max-width:200px !important;
  max-height:200px !important;
  object-fit:contain !important;
  float:none !important;
  display:block !important;
  box-shadow:none !important;
  border-radius:0 !important;
  filter:none !important;
}

/* Title */
.theme-coastal.theme-coastal--gloria #hero .hero-title{
  margin:0 !important;
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
  font-weight:700 !important;
  line-height:1.1 !important;
  color:#0b2a45 !important;
  font-size:28px !important;
	text-shadow: none;
}
@media (min-width:768px){
  .theme-coastal.theme-coastal--gloria #hero .hero-title{ font-size:36px !important; }
}

/* Nav: simple text links */
.theme-coastal.theme-coastal--gloria #hero .hero-nav{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:14px !important;
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
}
.theme-coastal.theme-coastal--gloria #hero .hero-link{
  padding:6px 2px !important;
  color:#1d4d7a !important;
  text-decoration:none !important;
  font-weight:600 !important;
  border-radius:6px !important;
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
}
.theme-coastal.theme-coastal--gloria #hero .hero-link:hover,
.theme-coastal.theme-coastal--gloria #hero .hero-link:focus{
  text-decoration:underline !important;
  outline:none !important;
}

/* Active page state (optional; add .is-active via PHP) */
.theme-coastal.theme-coastal--gloria #hero .hero-link.is-active{
  color:#0b2a45 !important;
  border-bottom:2px solid #0b2a45 !important;
}

/* Mobile stack */
@media (max-width:640px){
  .theme-coastal.theme-coastal--gloria #hero .hero-inner{
    justify-content:center !important;
    text-align:center !important;
  }
  .theme-coastal.theme-coastal--gloria #hero .hero-title{
    width:100% !important;
    order:3 !important; /* logo, nav, then title */
  }
  .theme-coastal.theme-coastal--gloria #hero .hero-nav{
    justify-content:center !important;
    order:2 !important;
  }
}

/* ==== Compact space below hero (Gloria) ==== */
/* Trim any bottom gap the theme adds to the hero wrapper */
.theme-coastal.theme-coastal--gloria .page_background_graphic{
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}

/* Make the hero itself sit tight above main */
.theme-coastal.theme-coastal--gloria #hero.header-hero{
  margin-bottom:8px !important;   /* was larger in theme */
  padding-bottom:16px !important;  /* gentle breathing room */
}

/* Ensure main starts right away (some themes add top padding/margin) */
.theme-coastal.theme-coastal--gloria main.ocean-clear{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* Foundation containers sometimes add top spacing—zero it out here */
.theme-coastal.theme-coastal--gloria main.ocean-clear > .grid-container{
  padding-top:0 !important;
  margin-top:0 !important;
}

/* And the first grid row after hero shouldn’t push down */
.theme-coastal.theme-coastal--gloria main.ocean-clear > .grid-container > .grid-x:first-child{
  margin-top:0 !important;
}

/* If the first visible element is a section header, keep it tight */
.theme-coastal.theme-coastal--gloria .section-header:first-child{
  margin-top:.5rem !important;
}
/* ===== Tighten space under the hero (Gloria pages only) ===== */
.theme-coastal.theme-coastal--gloria{
  /* Kill the theme’s header offset that pushes <main> down */
  --header-h: 0px !important;
}

/* Remove the top padding and forced tall min-height on <main> */
.theme-coastal.theme-coastal--gloria main[role="main"]{
  padding-top: 0 !important;
  margin-top: 0 !important;
  min-height: 0 !important;
}

/* The hero wrapper itself shouldn’t add extra gap */
.theme-coastal.theme-coastal--gloria .page_background_graphic{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Keep just a tiny breath between hero and content */
.theme-coastal.theme-coastal--gloria #hero.header-hero{
  margin-bottom: 8px !important; /* reduce if you want it tighter */
}

/* Some site-specific helpers that can add space; flatten them */
.theme-coastal.theme-coastal--gloria main.ocean-clear{ padding-top: 0 !important; }
.theme-coastal.theme-coastal--gloria .grid-container.wider-row{ padding-top: 0 !important; margin-top: 0 !important; }
.theme-coastal.theme-coastal--gloria .above-ocean{ margin-top: 0 !important; }

/* ======================
   Gloria cards: equal height + polish
   ====================== */

/* Make the rows stretch cells to the tallest card */
.theme-coastal.theme-coastal--gloria .home-post-grid{
  align-items: stretch; /* grid-x is flex; this equalizes cell heights per row */
  margin-bottom: 2rem;  /* extra room before the tag row below */
}

/* Each column becomes a flex container so the card can fill its height */
.theme-coastal.theme-coastal--gloria .home-post-grid .cell{
  display: flex;
}

/* The card fills the column and stacks its inner content */
.theme-coastal.theme-coastal--gloria .home-post-grid .post-card{
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 1.25rem;                 /* more padding */
  background: #fff;
  border: 1px solid #e9eef3;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(11,42,69,.06);
  transition: box-shadow .2s ease, transform .2s ease;
}

/* Image spacing */
.theme-coastal.theme-coastal--gloria .home-post-grid .post-card .thumb{
  margin-bottom: .75rem;
}

/* Keep meta tidy */
.theme-coastal.theme-coastal--gloria .home-post-grid .post-card .cba-post-date{ margin-top: .25rem; }
.theme-coastal.theme-coastal--gloria .home-post-grid .post-card .cba-post-excerpt{ margin-bottom: .5rem; }

/* Pin the CTA to the bottom so all cards align their buttons */
.theme-coastal.theme-coastal--gloria .home-post-grid .post-card .cba-read-more{
  margin-top: auto;
}

/* Gentle hover lift */
.theme-coastal.theme-coastal--gloria .home-post-grid .post-card:hover{
  box-shadow: 0 6px 16px rgba(11,42,69,.12);
  transform: translateY(-2px);
}

/* Extra breathing room above the bottom tag row */
.theme-coastal.theme-coastal--gloria .tagbar{
  margin-top: 2rem !important; /* was ~1rem; give more space from cards */
}

/* Also apply equal-height treatment to archive/grid fallback (templates/post_card.php) */
.theme-coastal.theme-coastal--gloria #post-grid{
  align-items: stretch;
}
.theme-coastal.theme-coastal--gloria #post-grid .grid > .cell,
.theme-coastal.theme-coastal--gloria #post-grid .cell{
  display: flex;
}
.theme-coastal.theme-coastal--gloria #post-grid .card,
.theme-coastal.theme-coastal--gloria #post-grid .post-card{
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid #e9eef3;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(11,42,69,.06);
  transition: box-shadow .2s ease, transform .2s ease;
}
.theme-coastal.theme-coastal--gloria #post-grid .card:hover,
.theme-coastal.theme-coastal--gloria #post-grid .post-card:hover{
  box-shadow: 0 6px 16px rgba(11,42,69,.12);
  transform: translateY(-2px);
}

/* If the archive card uses a .read-more element, pin it too */
.theme-coastal.theme-coastal--gloria #post-grid .card .read-more,
.theme-coastal.theme-coastal--gloria #post-grid .post-card .read-more{
  margin-top: auto;
}

/* =========================
   Uniform card image heights
   ========================= */

/* HOME rows (your Gloria layout): make the link .thumb a square ratio-box */
.theme-coastal.theme-coastal--gloria .home-post-grid .post-card .thumb{
  position:relative; display:block; padding-top:100%; /* 1:1 square */
  overflow:hidden; background:#f7f9fb;
}
.theme-coastal.theme-coastal--gloria .home-post-grid .post-card .thumb img{
  position:absolute; top:0; left:0; right:0; bottom:0;
  width:100% !important; height:100% !important;
  object-fit:cover !important; object-position:center !important;
  border-radius:0 !important; aspect-ratio:auto !important; /* neutralize earlier rule */
}

/* ARCHIVE grid (#post-grid): fixed, responsive heights for images */
.theme-coastal.theme-coastal--gloria{
  --card-img-h-s: 220px;  /* phones */
  --card-img-h-m: 240px;  /* tablets */
  --card-img-h-l: 280px;  /* desktops */
}
@media (min-width:640px){
  .theme-coastal.theme-coastal--gloria{ --card-img-h-s: var(--card-img-h-m); }
}
@media (min-width:1024px){
  .theme-coastal.theme-coastal--gloria{ --card-img-h-s: var(--card-img-h-l); }
}
.theme-coastal.theme-coastal--gloria #post-grid .card img,
.theme-coastal.theme-coastal--gloria #post-grid .post-card img{
  width:100% !important;
  height:var(--card-img-h-s) !important;
  object-fit:cover !important; object-position:center !important;
  border-radius:0 !important; aspect-ratio:auto !important;
}

/* If your archive template also wraps the image in <a class="thumb">,
   prefer the same square ratio-box there too (this wins if present). */
.theme-coastal.theme-coastal--gloria #post-grid .post-card .thumb{
  position:relative; display:block; padding-top:100%; overflow:hidden;
}
.theme-coastal.theme-coastal--gloria #post-grid .post-card .thumb img{
  position:absolute; inset:0;
  width:100% !important; height:100% !important;
  object-fit:cover !important; object-position:center !important;
  aspect-ratio:auto !important;
}
/* ================================
   Card images: narrow rectangle (16:9)
   ================================ */

/* 1) Set a single ratio var so you can tweak later (e.g., 62.5% = 16:10, 66.66% = 3:2, 56.25% = 16:9) */
.theme-coastal.theme-coastal--gloria{
  --card-ratio: 66.66%; /* 16:9 */
}

/* 2) HOME rows (Gloria layout) — use a ratio box on the .thumb wrapper */
.theme-coastal.theme-coastal--gloria .home-post-grid .post-card .thumb{
  position: relative;
  display: block;
  padding-top: var(--card-ratio) !important; /* was 100% (square) */
  overflow: hidden;
  background: #f7f9fb;
  margin-bottom: .75rem; /* keep existing spacing */
}
.theme-coastal.theme-coastal--gloria .home-post-grid .post-card .thumb img{
  position: absolute; top:0; left:0; width:100% !important; height:100% !important;
  object-fit: cover !important; object-position: center !important;
  border-radius: 0 !important; aspect-ratio: auto !important; /* neutralize earlier aspect-ratio */
}

/* 3) ARCHIVE grid (#post-grid)
      A) If the template has a .thumb wrapper, apply the same ratio box */
.theme-coastal.theme-coastal--gloria #post-grid .card .thumb,
.theme-coastal.theme-coastal--gloria #post-grid .post-card .thumb{
  position: relative;
  display: block;
  padding-top: var(--card-ratio) !important;
  overflow: hidden;
  background: #f7f9fb;
}
.theme-coastal.theme-coastal--gloria #post-grid .card .thumb img,
.theme-coastal.theme-coastal--gloria #post-grid .post-card .thumb img{
  position: absolute; top:0; left:0; width:100% !important; height:100% !important;
  object-fit: cover !important; object-position: center !important;
  border-radius: 0 !important; aspect-ratio: auto !important;
}

/*      B) Fallback if there is NO .thumb wrapper in archive cards:
         use a smaller fixed height so it stays a shallow rectangle */
.theme-coastal.theme-coastal--gloria #post-grid .card img,
.theme-coastal.theme-coastal--gloria #post-grid .post-card > img{
  width:100% !important;
  height:160px !important;       /* phones */
  object-fit:cover !important; object-position:center !important;
  border-radius:0 !important; aspect-ratio:auto !important;
}
@media (min-width:640px){
  .theme-coastal.theme-coastal--gloria #post-grid .card img,
  .theme-coastal.theme-coastal--gloria #post-grid .post-card > img{
    height:180px !important;     /* tablets */
  }
}
@media (min-width:1024px){
  .theme-coastal.theme-coastal--gloria #post-grid .card img,
  .theme-coastal.theme-coastal--gloria #post-grid .post-card > img{
    height:200px !important;     /* desktops */
  }
}

/* ============================
   Gloria card typography polish
   ============================ */

/* Date (before title) — subtle, tightened, letter-spaced */
.theme-coastal.theme-coastal--gloria .cba-post-date{
  margin:.15rem 0 .35rem !important;
  font-size:.82rem !important;
  line-height:1.2 !important;
  color:#556276 !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
  font-weight:600 !important;
}

/* Title — bold, compact leading, clamp to 2 lines */
.theme-coastal.theme-coastal--gloria .cba-post-title{
  margin:0 0 .45rem !important;
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
  font-weight:700 !important;
  line-height:1.18 !important;
  letter-spacing:.01em !important;
  /* responsive size: ~17px → ~22px */
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.375rem) !important;

  /* keep titles tidy across cards */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.theme-coastal.theme-coastal--gloria .cba-post-title a{
  color:#0b2a45 !important;
  text-decoration:none !important;
}
.theme-coastal.theme-coastal--gloria .post-card:hover .cba-post-title a{
  text-decoration:underline !important;
  text-underline-offset:3px !important;
}

/* Excerpt — softer colour, comfortable reading, clamp to 3 lines */
.theme-coastal.theme-coastal--gloria .cba-post-excerpt{
  margin:0 0 .5rem !important;
  color:#344157 !important;
  line-height:1.55 !important;
  /* responsive size: ~15.5px → ~16.5px */
  font-size: clamp(.96875rem, .94rem + .15vw, 1.03125rem) !important;

  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* Read More — confident link treatment */
.theme-coastal.theme-coastal--gloria .cba-read-more a{
  font-weight:500 !important;
  color:#6b7a8b !important;
  text-decoration:none !important;
}
.theme-coastal.theme-coastal--gloria .cba-read-more a:hover{
  text-decoration:underline !important;
  text-underline-offset:3px !important;
  color:#3b4a5b !important;
}

/* Archive grid fallback (if templates/post_card.php uses plain h3/paragraphs) */
.theme-coastal.theme-coastal--gloria #post-grid .card h3,
.theme-coastal.theme-coastal--gloria #post-grid .post-card h3{
  margin:0 0 .45rem !important;
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
  font-weight:700 !important;
  line-height:1.18 !important;
  letter-spacing:.01em !important;
  font-size: clamp(1.03rem, 0.95rem + 0.35vw, 1.3rem) !important;

  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.theme-coastal.theme-coastal--gloria #post-grid .card h3 a,
.theme-coastal.theme-coastal--gloria #post-grid .post-card h3 a{
  color:#0b2a45 !important;
  text-decoration:none !important;
}
.theme-coastal.theme-coastal--gloria #post-grid .card p,
.theme-coastal.theme-coastal--gloria #post-grid .post-card p{
  color:#344157 !important;
  line-height:1.55 !important;
  font-size: clamp(.95rem, .92rem + .12vw, 1.02rem) !important;
}

.theme-coastal.theme-coastal--gloria .section-header h3
 {
    margin: 0;
    font-weight: 700;
}

/* Back-to-top link: use coastal blues on light footer */
.theme-coastal.theme-coastal--gloria a.back-to-top,
.theme-coastal.theme-coastal--gloria .back-to-top a,
.theme-coastal.theme-coastal--gloria #back-to-top,
.theme-coastal.theme-coastal--gloria #backToTop,
.theme-coastal.theme-coastal--gloria .to-top,
.theme-coastal.theme-coastal--gloria .scroll-top {
  color: #1d4d7a !important;
  text-decoration: none;
  text-shadow: none;
}
/* Post-page tags: show at bottom, low-key, no rounded pills */
.theme-coastal.theme-coastal--gloria .post-tags{
  display:flex !important;        /* override any global hide */
  flex-wrap:wrap;
  gap:8px;
  margin:1rem 0 0;
  align-items:center;
}
.theme-coastal.theme-coastal--gloria .post-tags .tags-label{
  margin-right:.5rem;
  font-weight:600;
  font-size:.85rem;
  color:#5b6a7a;
  opacity:.8;
}
.theme-coastal.theme-coastal--gloria .post-tags .chip{
  display:inline-block;
  padding:4px 8px;
  font-size:.85rem;
  text-decoration:none;
  color:#1d4d7a;
  background:#f4f7fa;
  border:1px solid #e2e8f0;
  border-radius:0;                /* not rounded */
}
.theme-coastal.theme-coastal--gloria .post-tags .chip:hover{
  background:#eef3f7;
  text-decoration:underline;
}
.theme-coastal.theme-coastal--gloria .post-tags.tagbar{
  display:flex !important;
  flex-wrap:wrap;
  gap:.4rem .6rem;
  margin:1.25rem 0 0;
  align-items:center;
  justify-content:flex-start !important;
}
.theme-coastal.theme-coastal--gloria .post-tags.tagbar a.button{
  letter-spacing:.01em;
  background: transparent !important;
  color:#1d4d7a !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  font-size:.95rem !important;
  line-height:1.2 !important;
  box-shadow:none !important;
  text-decoration:none !important;
  transform:none !important;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.theme-coastal.theme-coastal--gloria .post-tags.tagbar a.button:hover,
.theme-coastal.theme-coastal--gloria .post-tags.tagbar a.button:focus{
  color:#0f2a3a !important;
  text-decoration:underline !important;
}
.theme-coastal.theme-coastal--gloria .post-tags.tagbar a.button:focus-visible{
  outline: none;
  text-decoration:underline !important;
}
/* Space below the hero image so the date isn't jammed up against it */
.theme-coastal.theme-coastal--gloria .post-hero {
  display:block;
  margin-bottom:.75rem;   /* ~12px */
}

/* Date (before title) — subtle, with more top space */
.theme-coastal.theme-coastal--gloria .cba-post-date{
  margin:.6rem 0 .35rem !important;  /* ↑ increased top margin */
  font-size:.82rem !important;
  line-height:1.2 !important;
  color:#556276 !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
  font-weight:600 !important;
}

/* (Optional) belt-and-suspenders: when date comes right after the hero link */
.theme-coastal.theme-coastal--gloria .post-hero-wrap + .cba-post-date{
  margin-top:.75rem !important;
}
.post-hero {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 675;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
}

/* Light-blue sticky bar (client request) */
body.theme-coastal .header-sticky {
  background: rgba(96,195,224,.86) !important;
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  backdrop-filter: saturate(160%) blur(8px);
}

/* Make the “chip” and links suit a light bar */
body.theme-coastal .header-sticky .sticky-nav {
  background: rgba(255,255,255,.65) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.10) !important;
}

body.theme-coastal .header-sticky .sticky-link {
  color: #0b2a45 !important;              /* dark coastal text on light blue */
}
body.theme-coastal .header-sticky .sticky-link:hover {
  background: rgba(0,0,0,.06) !important; /* a touch darker on hover */
}
body.theme-coastal .header-sticky .brand-name {
  color: #0b2a45 !important;
  text-shadow: none !important;
}

/* If there are header buttons, keep them visible on the lighter bar */
body.theme-coastal .header-sticky .btn,
body.theme-coastal .header-sticky .btn-outline {
  color: #0b2a45 !important;
  border-color: rgba(0,0,0,.12) !important;
  background: transparent !important;
}
body.theme-coastal .header-sticky .btn:hover,
body.theme-coastal .header-sticky .btn-outline:hover {
  background: rgba(0,0,0,.06) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.08) !important;
}

/* === Whisper-quiet tag chips (override) ============================ */
/* 1) Unhide, center, and keep the row airy */
body.theme-coastal .tagbar{
  display: flex !important;          /* beats any earlier display:none */
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem .5rem;
  margin: 1.25rem 0 1.75rem;
}

/* 2) Neutralize Foundation .button look → plain text links */
body.theme-coastal .tagbar a.button{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 2px 2px !important;
  border-radius: 0 !important;

  font-size: .95rem !important;
  line-height: 1.2 !important;
  color: #5b6a7a !important;         /* soft slate */
  text-decoration: none !important;
  opacity: .82;                       /* whisper */
  transition: opacity .15s ease, text-decoration-color .15s ease;
}

/* 3) Separator dot between items (super subtle) */
body.theme-coastal .tagbar a.button:not(:first-child)::before{
  content: "·";
  margin: 0 .35rem 0 .15rem;
  color: #9fb0bb;
  opacity: .6;
}

/* 4) Hover/active states: minimal ink */
body.theme-coastal .tagbar a.button:hover{
  opacity: 1;
  text-decoration: none !important;
  text-underline-offset: 3px;
  text-decoration-color: rgba(27, 56, 80, .35); /* faint underline */
}

/* Current tag cue: tiny weight + slightly darker, no pill */
body.theme-coastal .tagbar a.button[aria-current="page"]{
  color: #0b2a45 !important;
  opacity: .95;
  font-weight: 600 !important;
  text-decoration: none !important;
  background: transparent !important;	
}

/* 5) Keyboard focus: visible but quiet */
body.theme-coastal .tagbar a.button:focus-visible{
  outline: 2px solid rgba(41,75,100,.35);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 6) If your tag label includes counts like "Art (3)", soften the "(3)" portion */
body.theme-coastal .tagbar a.button{
  letter-spacing: .01em;
}

/* Make that one subhead lighter so it doesn’t fight the main title */
.theme-coastal.theme-coastal--gloria .section-header h3.subtle{
  color:#6b7a8b !important;
  font-weight:600 !important;
  letter-spacing:.2px !important;
}

.share-bar .btn {
padding: 8px 12px;
color: #1d4d7a;	
}

/* Ensure hero stacks: logo -> title -> nav (mobile too) */
.header-hero .hero-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.4rem;
}
.hero-logo{ order:1; }
.hero-title{ order:2; }
.hero-nav{ order:3; }

/* === Mobile hero order fix: logo → title → nav ==================== */
/* Win over theme-coastal-override's small-screen order */
@media (max-width: 640px){
  /* ensure stack, center, and correct order */
  .theme-coastal.theme-coastal--gloria #hero .hero-inner{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: .4rem !important;
  }
  .theme-coastal.theme-coastal--gloria #hero .hero-logo{  order: 1 !important; }
  .theme-coastal.theme-coastal--gloria #hero .hero-title{ order: 2 !important; }
  .theme-coastal.theme-coastal--gloria #hero .hero-nav{   order: 3 !important; }

  /* small spacing tweaks so it feels balanced */
  .theme-coastal.theme-coastal--gloria #hero .hero-title{
    margin: 12px 0 6px !important;
  }
  .theme-coastal.theme-coastal--gloria #hero .hero-nav{
    margin: 0 0 6px 0 !important;
  }
}

.post-page {
    position: relative;
    z-index: 5;
    /* padding-bottom: 160px; */
}

#post-grid {
    padding-bottom: 0;
}