/*
Theme Name:   iCruiseApp Theme
Theme URI:    https://blog.icruiseapp.com/
Description:  A bespoke theme for the iCruiseApp Travel & Tours blog. Carries the brand system from www.icruiseapp.com — the real header and footer lockups, Inter, and the #10559a action blue — into an editorial reading experience built around nautical chart language. Registers sidebar-1 and the primary menu location so existing widgets and menus carry over from Astra untouched.
Author:       iCruiseApp Travel & Tours
Author URI:   https://www.icruiseapp.com/
Version:      1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  icruiseapp
Tags:         blog, travel, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, translation-ready, block-styles, wide-blocks
*/

/* ============================================================================
   THE CHART ROOM — design direction for blog.icruiseapp.com
   ----------------------------------------------------------------------------
   Concept: a cruise blog should not look like a stock-photo travel site. The
   real material world of this subject is NAVIGATION — bathymetric charts,
   ship's logs, soundings, bearings, the horizon. Every article is a position
   that was logged. Structure carries that: coordinates are real, depth marks
   index reading time, the ambient art is an actual contour field.

   Palette, type and layout below. Brand tokens (#10559a, Inter) are inherited
   from www.icruiseapp.com and are not negotiable; everything else is built to
   sit around them.
   ========================================================================== */

/* ---------- LIGHT: "Day Chart" — the complete palette lives here ---------- */
:root {
  --ground:        #E8EEF2;   /* cool chart paper, deliberately not warm cream */
  --ground-deep:   #DCE5EB;
  --plate:         #F7FAFB;   /* the chart plate a card is printed on */
  --plate-raised:  #FFFFFF;
  --rule:          #C3D2DC;   /* hairline, the weight of a printed chart line */
  --rule-strong:   #9DB2C0;

  --ink:           #0A1A2B;   /* headline ink */
  --ink-body:      #33485C;
  --ink-muted:     #6B8093;
  --ink-faint:     #93A6B5;

  --brand:         #10559a;   /* iCruiseApp action blue — inherited */
  --brand-deep:    #0D4680;
  --brand-bright:  #2A85FF;

  --signal:        #0E7C8A;   /* the one bold note: phosphor teal */
  --signal-soft:   rgba(14,124,138,0.14);

  --contour-a:     #10559a;   /* contour field, shallow */
  --contour-b:     #0E7C8A;   /* contour field, deep */
  --contour-alpha: 0.30;
  /* The hero is dark in BOTH modes, and that is a fidelity decision, not a
     stylistic one. www.icruiseapp.com's header is `header-transparent` with
     white text permanently — it never goes solid. That only reads because a
     dark hero photograph sits behind it. Put a light hero under a white
     header and the header disappears, which is exactly what happened here.
     So: dark masthead, light page below. Same structure as the main site. */
  --hero-wash:     linear-gradient(180deg,#050B14 0%,#071627 52%,#04101D 100%);
  --hero-ink:      #F2F8FC;
  --hero-ink-soft: #A9BFD0;
  --hero-plate:    rgba(10,24,40,0.44);
  --hero-rule:     rgba(255,255,255,0.22);
  --hero-contour-a:     #2E6FA8;
  --hero-contour-b:     #4FD1E8;
  --hero-contour-alpha: 0.42;
  --header-fill:   rgba(247,250,251,0.88);
  --shadow-plate:  0 1px 2px rgba(10,26,43,0.05), 0 12px 28px -18px rgba(10,26,43,0.28);
  --shadow-lift:   0 2px 6px rgba(10,26,43,0.07), 0 26px 50px -24px rgba(10,26,43,0.34);

  /* Measured off www.icruiseapp.com: the footer there is WHITE with #6b7280
     text, not the dark slab I first built. Matched. */
  --footer-fill:   #FFFFFF;
  --footer-ink:    #6B7280;
  --footer-head:   #111827;
  --footer-rule:   #E5E7EB;

  --font-display: 'Iowan Old Style','Palatino Linotype',Palatino,'Hoefler Text',Georgia,ui-serif,serif;
  --font-ui: 'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;

  --measure: 68ch;
  --shell: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- DARK: "Night Passage" — only tokens are redefined ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:        #050B14;
    --ground-deep:   #020609;
    --plate:         #0B1725;
    --plate-raised:  #102132;
    --rule:          #1E3346;
    --rule-strong:   #33506B;

    --ink:           #EAF3F8;
    --ink-body:      #A9BFD0;
    --ink-muted:     #74909F;
    --ink-faint:     #4E6A80;

    --brand:         #3D8FD8;
    --brand-deep:    #2A85FF;
    --brand-bright:  #6FB6F0;

    --signal:        #4FD1E8;
    --signal-soft:   rgba(79,209,232,0.13);

    --contour-a:     #2E6FA8;
    --contour-b:     #4FD1E8;
    --contour-alpha: 0.42;
    --hero-wash:     linear-gradient(180deg,#050B14 0%,#071627 52%,#04101D 100%);
    --hero-ink:      #F2F8FC;
    --hero-ink-soft: #A9BFD0;
    --header-fill:   rgba(8,18,30,0.80);
    --shadow-plate:  0 1px 2px rgba(0,0,0,0.5), 0 16px 34px -20px rgba(0,0,0,0.9);
    --shadow-lift:   0 2px 8px rgba(0,0,0,0.55), 0 30px 60px -26px rgba(0,0,0,0.95);

    --footer-fill:   #020609;
    --footer-ink:    #7994A8;
    --footer-head:   #EAF3F8;
    --footer-rule:   rgba(255,255,255,0.09);
  }
}

:root[data-theme="dark"] {
  --ground:        #050B14;
  --ground-deep:   #020609;
  --plate:         #0B1725;
  --plate-raised:  #102132;
  --rule:          #1E3346;
  --rule-strong:   #33506B;

  --ink:           #EAF3F8;
  --ink-body:      #A9BFD0;
  --ink-muted:     #74909F;
  --ink-faint:     #4E6A80;

  --brand:         #3D8FD8;
  --brand-deep:    #2A85FF;
  --brand-bright:  #6FB6F0;

  --signal:        #4FD1E8;
  --signal-soft:   rgba(79,209,232,0.13);

  --contour-a:     #2E6FA8;
  --contour-b:     #4FD1E8;
  --contour-alpha: 0.42;
  --hero-wash:     linear-gradient(180deg,#050B14 0%,#071627 52%,#04101D 100%);
  --hero-ink:      #F2F8FC;
  --hero-ink-soft: #A9BFD0;
  --header-fill:   rgba(8,18,30,0.80);
  --shadow-plate:  0 1px 2px rgba(0,0,0,0.5), 0 16px 34px -20px rgba(0,0,0,0.9);
  --shadow-lift:   0 2px 8px rgba(0,0,0,0.55), 0 30px 60px -26px rgba(0,0,0,0.95);

  --footer-fill:   #020609;
  --footer-ink:    #7994A8;
  --footer-head:   #EAF3F8;
  --footer-rule:   rgba(255,255,255,0.09);
}

/* ---------------------------------- base --------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink-body);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 1px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 24px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--brand); color: #fff;
  padding: 10px 16px; z-index: 200; font-weight: 600;
}
.skip:focus { left: 12px; top: 12px; }

/* Visually hidden but available to screen readers — for labels that the
   visible design carries via placeholder or heading. */
.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* Chart label — the utility voice of the whole page. Real charts letterspace
   their annotations; this is that, not decoration. */
.label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.coord {
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

/* ------------------------------ depth gauge ------------------------------ */
.gauge {
  position: fixed; inset: 0 auto auto 0;
  height: 2px; width: 100%;
  background: transparent; z-index: 120;
  pointer-events: none;
}
.gauge span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--brand), var(--signal));
  transition: width .1s linear;
}

/* -------------------------------- header --------------------------------- */
/* Faithful rebuild of the www.icruiseapp.com header: 64px, fixed,
   transparent over the hero, solid once you leave it. */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 110;
  height: 64px;
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: background-color .35s var(--ease), border-color .35s var(--ease),
              backdrop-filter .35s var(--ease);
}
.hdr.solid {
  background: var(--header-fill);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--rule);
}
.hdr .shell { display: flex; align-items: center; gap: 28px; }

/* The real lockup, both official variants, embedded as data URIs.
   logo-dark-full.png  (800×139)  — the navy wordmark, for light grounds
   logo-light-full.png (2004×347) — the reversed wordmark, for dark grounds
   Two <img> swapped by CSS rather than one src swapped by JS, so there is
   never a frame where the wrong version is showing. */
.brand-mark {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; flex-shrink: 0; min-width: 0;
}
.logo-swap { display: block; line-height: 0; flex: none; }
.logo-swap img {
  display: block; height: 30px; width: auto;
  max-width: 190px; object-fit: contain;
}
/* NAMING TRAP, documented so nobody repeats it: the source files are named
   for the BACKGROUND they sit on, not the colour of their ink.
     logo-light-full.png (2004x347) = NAVY artwork    -> light backgrounds
     logo-dark-full.png  (800x139)  = REVERSED artwork -> dark backgrounds
   Verified by counting ink luminance in the actual pixels, not by the name.
   The classes below describe the ARTWORK, so the rules read plainly. */

/* Default ground is light — the white footer, the scrolled header. */
.logo-swap .logo-navy     { display: block; }
.logo-swap .logo-reversed { display: none; }

/* Over the dark hero, reversed. */
.hdr-over .logo-swap .logo-navy     { display: none; }
.hdr-over .logo-swap .logo-reversed { display: block; }

/* Night passage: every surface is dark, so reversed wins everywhere. */
:root[data-theme="dark"] .logo-swap .logo-navy     { display: none; }
:root[data-theme="dark"] .logo-swap .logo-reversed { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-swap .logo-navy     { display: none; }
  :root:not([data-theme="light"]) .logo-swap .logo-reversed { display: block; }
}

/* "Blog" reads as a property of the master brand, not a second logo —
   a hairline and a chart label, which is how a sub-brand should sit. */
.blog-tag {
  font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; white-space: nowrap;
  padding-left: 12px; border-left: 1px solid currentColor;
  opacity: .68;
}
@media (max-width: 560px) { .blog-tag { display: none; } }

/* Nav items, measured off the live main site rather than approximated:
   14px / weight 600 / padding 8px 16px / radius 8px, white over the hero.
   The current page is marked by a 20% white fill, not a colour change. */
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav a {
  font-size: 14px; font-weight: 600; letter-spacing: normal;
  text-decoration: none; padding: 8px 16px; border-radius: 8px;
  white-space: nowrap; color: #fff;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.nav a:hover { background: rgba(255,255,255,0.12); }
.nav a[aria-current="page"] { background: rgba(255,255,255,0.2); }

/* Sign In: white pill, #111827 text, weight 700, radius 12px, padding 8px 12px. */
.nav .cta {
  background: #fff; color: #111827; font-weight: 700;
  padding: 8px 12px; border-radius: 12px; margin-left: 10px;
}
.nav .cta:hover { background: #E5E7EB; color: #111827; }

.hdr-over { color: #F2F8FC; }

/* The main site's header stays transparent forever, which works there because
   its hero fills the viewport. A blog scrolls through thousands of words of
   light page, so white-on-white would be unreadable. This solid state is a
   deliberate addition — the one place the rebuild improves on the original
   rather than copying it. */
.hdr.solid { color: var(--ink); }
.hdr.solid .nav a { color: var(--ink-body); }
.hdr.solid .nav a:hover { background: var(--signal-soft); color: var(--ink); }
.hdr.solid .nav a[aria-current="page"] { background: var(--signal-soft); color: var(--brand); }
.hdr.solid .nav .cta { background: var(--brand); color: #fff; }
.hdr.solid .nav .cta:hover { background: var(--brand-deep); }

.menu-btn {
  display: none; margin-left: auto;
  background: none; border: 1px solid currentColor; color: inherit;
  border-radius: 3px; padding: 6px 12px;
  font: 600 12px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
}

/* --------------------------------- hero ---------------------------------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex; align-items: flex-end;
  padding: 120px 0 56px;
  background: var(--hero-wash);
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}
#field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Horizon: the single line every one of these images is really about. */
.horizon {
  position: absolute; left: 0; right: 0; top: 46%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--signal), transparent);
  opacity: .5;
}
.hero .shell { position: relative; z-index: 2; }

.hero-eyebrow {
  display: flex; align-items: center; gap: 14px;
  color: var(--hero-ink-soft); margin-bottom: 26px;
}
.hero-eyebrow .tick { flex: 1; height: 1px; background: currentColor; opacity: .35; max-width: 90px; }

/* Hero headline ONLY.
   This was previously a bare `h1` selector, which meant every post and page
   title inherited hero styling — including color: var(--hero-ink), which is
   near-white in BOTH themes because the hero is always dark. The result was
   invisible white titles on every light page, at 6rem, clamped to 15ch. */
.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.9rem, 1.4rem + 5.6vw, 6rem);
  line-height: 0.96;
  letter-spacing: -0.032em;
  color: var(--hero-ink);
  margin: 0 0 26px;
  max-width: 15ch;
  text-wrap: balance;
}

/* Default headline, everywhere that is not the hero. */
h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin: 0 0 22px;
  text-wrap: balance;
}
h1 .lume {
  font-style: italic;
  color: var(--signal);
}

.hero-sub {
  font-size: clamp(1rem, .93rem + .35vw, 1.2rem);
  color: var(--hero-ink-soft);
  max-width: 46ch;
  margin: 0 0 40px;
}

.readout {
  display: flex; flex-wrap: wrap; gap: 0;
  border: 1px solid var(--hero-rule);
  border-radius: 2px;
  background: var(--hero-plate);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  max-width: 640px;
}
.readout div {
  padding: 13px 20px;
  border-right: 1px solid var(--hero-rule);
  flex: 1 1 auto; min-width: 132px;
}
.readout div:last-child { border-right: 0; }
.readout dt { margin: 0 0 4px; }
.readout dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px; letter-spacing: -0.01em;
  color: var(--hero-ink);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------- shared -------------------------------- */
section { padding: clamp(64px, 8vw, 116px) 0; }

.sec-head {
  display: flex; align-items: baseline; gap: 20px;
  padding-bottom: 18px; margin-bottom: 40px;
  border-bottom: 1px solid var(--rule);
}
.sec-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 1.3rem + 1.9vw, 2.9rem);
  line-height: 1.06; letter-spacing: -0.028em;
  color: var(--ink); margin: 0;
}
.sec-head .count { margin-left: auto; white-space: nowrap; }

/* ------------------------------- the plates ------------------------------ */
/* Cards are chart plates: squared, hairline-ruled, printed — not glass boxes
   with 12px corners. The radius is 2px on purpose. */
.plate {
  background: var(--plate);
  border: 1px solid var(--rule);
  border-radius: 2px;
  box-shadow: var(--shadow-plate);
  overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none;
  position: relative;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease),
              border-color .4s var(--ease);
}
.plate:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: var(--rule-strong);
}
.plate canvas { display: block; width: 100%; height: 100%; }

.plate-art {
  position: relative;
  /* 1200x630 — the standardised featured-image ratio. Cards match the social
     card exactly, so one export serves both and nothing ever crops. */
  aspect-ratio: 1200 / 630;
  background: var(--ground-deep);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.plate-art .sheet {
  position: absolute; left: 12px; bottom: 10px; z-index: 2;
  color: var(--ink-faint); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
/* Over a photograph the label needs its own ground, or it disappears into
   whatever happens to be in the bottom-left of the picture. */
.plate-art.photo .sheet { color: rgba(255,255,255,.92); }
.plate-art.photo::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(180deg, transparent, rgba(4,14,24,.55));
  pointer-events: none; z-index: 1;
}
/* In the theme this slot is a real <img>; these are the rules that keep it
   from shifting layout or distorting. */
.plate-art img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.plate-art.fallback { background: var(--ground-deep); }
.plate-art.fallback .sheet { color: var(--ink-faint); }

.plate-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.plate-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plate-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-faint); }
.plate h3 {
  font-family: var(--font-display);
  font-weight: 400; font-size: 1.45rem; line-height: 1.18;
  letter-spacing: -0.02em; color: var(--ink); margin: 0;
  text-wrap: balance;
  transition: color .25s var(--ease);
}
.plate:hover h3 { color: var(--brand); }
.plate p { margin: 0; font-size: 15px; color: var(--ink-muted); line-height: 1.62; }
.plate-foot {
  margin-top: auto; padding-top: 16px;
  border-top: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.sounding {
  font-variant-numeric: tabular-nums;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--signal); font-weight: 600;
}

/* Featured plate spans the grid and turns horizontal on wide screens. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 26px;
}
.plate.feature { grid-column: 1 / -1; }
@media (min-width: 1160px) {
  .plate.feature { flex-direction: row; }
  .plate.feature .plate-art { aspect-ratio: auto; flex: 1 1 54%; border-bottom: 0; border-right: 1px solid var(--rule); min-height: 380px; }
  .plate.feature .plate-body { flex: 1 1 46%; justify-content: center; padding: 44px 44px 46px; gap: 16px; }
  .plate.feature h3 { font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem); line-height: 1.08; }
  .plate.feature p { font-size: 16.5px; }
}
.flag {
  position: absolute; top: 0; left: 0; z-index: 3;
  background: var(--signal); color: var(--ground-deep);
  font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  padding: 6px 14px;
}
:root[data-theme="dark"] .flag { color: #041019; }

/* --------------------------------- sidebar --------------------------------
   Matches the current information architecture exactly: sidebar on the home
   and archive views, none on single posts. That is how the site behaves now
   (`ast-right-sidebar` on archives, `ast-no-sidebar` on posts), and changing
   it would move things readers already know how to find.
   -------------------------------------------------------------------------- */
.with-sidebar { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1000px) {
  .with-sidebar { grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; }
}

.widget {
  background: var(--plate);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 22px;
  box-shadow: var(--shadow-plate);
}
.widget + .widget { margin-top: 22px; }

.widget-title {
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.widget p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-muted); }
.widget a { color: var(--brand); text-decoration: none; font-weight: 500; }
.widget a:hover { text-decoration: underline; text-underline-offset: .16em; }

.widget ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.widget li { font-size: 14.5px; line-height: 1.45; }
.widget li + li { border-top: 1px solid var(--rule); margin-top: 11px; padding-top: 11px; }
.widget li a { color: var(--ink-body); font-weight: 400; display: block; }
.widget li a:hover { color: var(--brand); text-decoration: none; }
.widget li .when { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-faint);
  font-variant-numeric: tabular-nums; }

.widget input[type="search"],
.widget input[type="email"],
.widget select {
  width: 100%; background: var(--ground); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: 2px;
  padding: 10px 12px; font: 400 14.5px/1.3 var(--font-ui);
}
.widget input::placeholder { color: var(--ink-faint); }
.widget input:focus, .widget select:focus {
  outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft);
}
.widget-search { display: flex; gap: 8px; }
.widget-search button {
  flex: none; background: var(--brand); color: #fff; border: 0;
  border-radius: 2px; padding: 0 15px; cursor: pointer;
  font: 600 12px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
}
.widget-search button:hover { background: var(--brand-deep); }
.widget-form { display: flex; flex-direction: column; gap: 10px; }
.widget-form button {
  background: var(--brand); color: #fff; border: 0; border-radius: 2px;
  padding: 11px 16px; cursor: pointer;
  font: 600 12px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
}
.widget-form button:hover { background: var(--brand-deep); }

/* --------------------------------- filters -------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.filters button {
  font: 600 12px/1 var(--font-ui);
  letter-spacing: .1em; text-transform: uppercase;
  padding: 9px 15px; border-radius: 2px; cursor: pointer;
  background: transparent; color: var(--ink-muted);
  border: 1px solid var(--rule);
  transition: all .2s var(--ease);
}
.filters button:hover { border-color: var(--signal); color: var(--ink); }
.filters button[aria-pressed="true"] {
  background: var(--brand); border-color: var(--brand); color: #fff;
}

/* ------------------------------- reading view ----------------------------- */
.log { background: var(--plate); border-block: 1px solid var(--rule); }
.log-inner { max-width: 780px; margin-inline: auto; }
.log .kicker { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; }
/* Matches both h1.title (posts, pages) and h2.title. The old selector was
   h2-only, so the h1 the templates actually emit never picked it up. */
.log .title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem);
  line-height: 1.04; letter-spacing: -0.03em;
  color: var(--ink); margin: 0 0 22px; text-wrap: balance;
}
.byline {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding-bottom: 26px; margin-bottom: 34px;
  border-bottom: 1px solid var(--rule);
}
.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.4em; color: var(--ink-body); }
.prose .lede { font-size: 1.2rem; line-height: 1.66; color: var(--ink); }
.prose h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.7rem; line-height: 1.2; letter-spacing: -0.02em;
  color: var(--ink); margin: 2.2em 0 .7em;
}
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: .18em;
  text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.prose a:hover { text-decoration-color: currentColor; }

/* A pull-quote set as a sounding note in the margin of a chart. */
.sounding-note {
  border-left: 2px solid var(--signal);
  padding: 4px 0 4px 22px;
  margin: 2.4em 0;
  font-family: var(--font-display);
  font-size: 1.4rem; line-height: 1.34; letter-spacing: -0.015em;
  color: var(--ink); font-style: italic;
}

/* -------------------------------- newsletter ------------------------------ */
.signal-band {
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  background: var(--plate-raised);
  padding: clamp(30px, 4vw, 52px);
  display: grid; gap: 28px;
  align-items: center;
}
@media (min-width: 800px) { .signal-band { grid-template-columns: 1.1fr .9fr; gap: 48px; } }
.signal-band h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem);
  line-height: 1.08; letter-spacing: -0.026em; color: var(--ink); margin: 0 0 12px;
}
.signal-band p { margin: 0; color: var(--ink-muted); font-size: 15.5px; }
.subscribe { display: flex; gap: 10px; flex-wrap: wrap; }
.subscribe input {
  flex: 1 1 220px; min-width: 0;
  background: var(--ground); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: 2px;
  padding: 13px 15px; font: 400 15px/1.2 var(--font-ui);
}
.subscribe input::placeholder { color: var(--ink-faint); }
.subscribe input:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); }
.subscribe button {
  background: var(--brand); color: #fff; border: 1px solid var(--brand);
  border-radius: 2px; padding: 13px 26px; cursor: pointer;
  font: 600 13px/1.2 var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
  transition: background-color .2s var(--ease);
}
.subscribe button:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.subscribe .note { flex-basis: 100%; margin: 2px 0 0; font-size: 12px; color: var(--ink-faint); }

/* --------------------------------- footer --------------------------------- */
/* Rebuilt from the live www.icruiseapp.com footer: four columns, newsletter,
   social row, single copyright line. */
.ftr { background: var(--footer-fill); color: var(--footer-ink); padding: 72px 0 0; border-top: 1px solid var(--footer-rule); }
.ftr-cols {
  display: grid; gap: 40px 32px;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  padding-bottom: 48px;
}
.ftr h4 {
  font: 600 11px/1 var(--font-ui); letter-spacing: .17em; text-transform: uppercase;
  color: var(--footer-head); margin: 0 0 18px;
}
.ftr ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.ftr a { text-decoration: none; font-size: 14.5px; transition: color .18s var(--ease); }
.ftr a:hover { color: var(--footer-head); }
.ftr-base {
  border-top: 1px solid var(--footer-rule);
  padding: 26px 0 34px;
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
}
.ftr-base p { margin: 0; font-size: 13.5px; }
.ftr-logo { margin-right: auto; }
.ftr-logo .logo-swap img { height: 26px; }
.social { display: flex; gap: 8px; }
.social a {
  width: 34px; height: 34px; border-radius: 2px;
  border: 1px solid var(--footer-rule);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  transition: border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.social a:hover { border-color: var(--signal); color: var(--signal); transform: translateY(-2px); }

/* ------------------------------- theme toggle ----------------------------- */
.helm {
  position: fixed; right: 20px; bottom: 20px; z-index: 130;
  display: flex; align-items: center; gap: 2px;
  background: var(--plate); border: 1px solid var(--rule-strong);
  border-radius: 2px; padding: 3px; box-shadow: var(--shadow-lift);
}
.helm button {
  background: none; border: 0; cursor: pointer;
  color: var(--ink-muted);
  font: 600 10.5px/1 var(--font-ui); letter-spacing: .13em; text-transform: uppercase;
  padding: 9px 13px; border-radius: 1px;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.helm button[aria-pressed="true"] { background: var(--brand); color: #fff; }
.helm button:hover:not([aria-pressed="true"]) { color: var(--ink); }

/* -------------------------------- reveal ---------------------------------- */
.rise { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rise.in { opacity: 1; transform: none; }

@media (max-width: 880px) {
  .nav { display: none; }
  .menu-btn { display: block; }
  .hero { min-height: 84vh; }
  .readout div { min-width: 50%; flex: 1 1 50%; }
  .readout div:nth-child(2) { border-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .rise { opacity: 1; transform: none; }
  .plate:hover { transform: none; }
}
/* ==========================================================================
   WORDPRESS LAYER
   --------------------------------------------------------------------------
   Everything above is the approved design, ported verbatim. This section adds
   what WordPress itself emits and the design preview never had to handle:
   core alignment classes, captions, galleries, comments, block styles and
   the admin bar.
   ========================================================================== */

/* ------------------------- required by WordPress -------------------------- */
/* Both selectors must exist for theme review even when unstyled. */
.sticky {}
.bypostauthor {}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.screen-reader-text:focus {
  position: fixed !important;
  top: 12px; left: 12px;
  width: auto; height: auto;
  clip-path: none;
  background: var(--brand); color: #fff;
  padding: 12px 20px; border-radius: 2px;
  font-weight: 600; z-index: 400;
}

/* The admin bar pushes everything down 32px (46px on small screens). The
   fixed header has to move with it or it sits underneath. */
body.admin-bar .hdr { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .hdr { top: 46px; }
}

/* ------------------------------- alignments ------------------------------- */
.alignleft {
  float: left;
  margin: 0.4em 1.8em 1.2em 0;
  max-width: 50%;
}
.alignright {
  float: right;
  margin: 0.4em 0 1.2em 1.8em;
  max-width: 50%;
}
.aligncenter {
  display: block;
  margin-inline: auto;
  margin-block: 1.6em;
}
@media (max-width: 620px) {
  .alignleft, .alignright { float: none; margin-inline: 0; max-width: 100%; }
}

/* Wide and full break out of the reading measure. The article column is
   750px inside a 1200px shell, so wide gets the extra room and full goes
   edge to edge. */
.prose .alignwide {
  width: min(1040px, calc(100vw - 48px));
  margin-inline: calc(50% - min(520px, calc(50vw - 24px)));
  max-width: none;
}
.prose .alignfull {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  max-width: none;
}
.prose .alignfull img { border-radius: 0; }

/* -------------------------- captions and galleries ------------------------ */
.wp-caption { max-width: 100%; margin-bottom: 1.6em; }
.wp-caption img { display: block; }
.wp-caption-text,
.wp-element-caption,
figcaption {
  color: var(--ink-muted);
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: center;
  margin-top: 0.7em;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin: 2em 0;
}
.gallery-columns-1 { grid-template-columns: 1fr; }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-item { margin: 0; }
.gallery-item img { border-radius: 2px; width: 100%; height: auto; }

/* ------------------------------ block styles ------------------------------ */
.prose blockquote,
.wp-block-quote {
  border-left: 2px solid var(--signal);
  padding: 4px 0 4px 22px;
  margin: 2.4em 0;
  font-family: var(--font-display);
  font-size: 1.4rem; line-height: 1.34; letter-spacing: -0.015em;
  color: var(--ink); font-style: italic;
}
.prose blockquote p:last-child,
.wp-block-quote p:last-child { margin-bottom: 0; }
.wp-block-quote cite,
.prose blockquote cite {
  display: block; margin-top: 0.8em;
  font-family: var(--font-ui); font-style: normal;
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted);
}

.wp-block-pullquote {
  border-block: 1px solid var(--rule);
  padding: 2em 0; margin: 2.6em 0; text-align: center;
}

.wp-block-code,
.prose pre {
  background: var(--surface-code, var(--ground-deep));
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 18px 20px;
  overflow-x: auto;
  font-size: 0.875rem; line-height: 1.6;
  tab-size: 2;
}

.wp-block-embed { margin: 2.2em 0; }
.wp-block-embed__wrapper { position: relative; }
.wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper { aspect-ratio: 16 / 9; }
.wp-block-embed.wp-has-aspect-ratio iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

.wp-block-separator { border: 0; border-top: 1px solid var(--rule); margin: 2.6em auto; }
.wp-block-separator.is-style-wide { width: 100%; }

.wp-block-table { overflow-x: auto; }
.wp-block-table table { width: 100%; border-collapse: separate; border-spacing: 0; }
.prose table {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 2px;
  border-collapse: separate; border-spacing: 0;
  overflow: hidden;
}
.prose th {
  background: var(--ground-deep); color: var(--ink);
  font-weight: 600; text-align: left;
}
.prose th, .prose td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
}
.prose tr:last-child td { border-bottom: 0; }

.wp-block-button__link {
  background: var(--brand); color: #fff;
  border-radius: 2px; padding: 12px 26px;
  font-weight: 600; text-decoration: none;
  display: inline-block;
}
.wp-block-button__link:hover { background: var(--brand-deep); }
.is-style-outline .wp-block-button__link {
  background: transparent; color: var(--brand);
  border: 1.5px solid var(--brand);
}

.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.4em; }
.prose li { margin-bottom: 0.5em; }
.prose li::marker { color: var(--ink-faint); }

/* ------------------------------- pagination ------------------------------- */
.nav-links {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
  margin-top: 48px;
}
.nav-links .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  background: var(--plate);
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink-body);
  font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.nav-links .page-numbers:hover { border-color: var(--signal); color: var(--ink); }
.nav-links .page-numbers.current {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.nav-links .dots { border-color: transparent; background: transparent; }

/* Previous / next on single posts */
.post-nav {
  display: grid; gap: 16px;
  margin-top: 56px; padding-top: 32px;
  border-top: 1px solid var(--rule);
}
@media (min-width: 700px) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav a {
  display: block; padding: 20px;
  background: var(--plate);
  border: 1px solid var(--rule);
  border-radius: 2px;
  text-decoration: none;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.post-nav a:hover { border-color: var(--signal); transform: translateY(-2px); }
.post-nav .dir {
  display: block; margin-bottom: 7px;
  font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-muted);
}
.post-nav .ttl {
  font-family: var(--font-display); font-size: 1.05rem;
  line-height: 1.3; color: var(--ink);
}
.post-nav .next { text-align: right; }

/* -------------------------------- comments -------------------------------- */
.comments-area {
  margin-top: 64px; padding-top: 40px;
  border-top: 1px solid var(--rule);
}
.comments-title,
.comment-reply-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.6rem; letter-spacing: -0.02em;
  color: var(--ink); margin: 0 0 28px;
}
.comment-list { list-style: none; margin: 0 0 40px; padding: 0; }
.comment-list ol.children { list-style: none; margin: 20px 0 0 24px; padding: 0; }
.comment-body {
  background: var(--plate);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 20px; margin-bottom: 18px;
}
.comment-meta { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.comment-author img { border-radius: 50%; }
.comment-author .fn { font-style: normal; font-weight: 600; color: var(--ink); font-size: 0.9375rem; }
.comment-metadata { font-size: 0.75rem; color: var(--ink-faint); }
.comment-metadata a { color: inherit; text-decoration: none; }
.comment-content p { font-size: 0.9375rem; margin-bottom: 0.9em; }
.comment-content p:last-child { margin-bottom: 0; }
.reply { margin-top: 10px; }
.comment-reply-link {
  font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand); text-decoration: none;
}
.comment-reply-link:hover { text-decoration: underline; }

.comment-form { display: grid; gap: 14px; }
.comment-form label {
  display: block; margin-bottom: 6px;
  font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-muted);
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.post-password-form input[type="password"] {
  width: 100%;
  background: var(--ground); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: 2px;
  padding: 11px 13px;
  font: 400 15px/1.5 var(--font-ui);
}
.comment-form textarea { min-height: 150px; resize: vertical; }
.comment-form input:focus, .comment-form textarea:focus {
  outline: none; border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-soft);
}
.comment-form .submit,
.post-password-form input[type="submit"] {
  justify-self: start;
  background: var(--brand); color: #fff; border: 0;
  border-radius: 2px; padding: 13px 28px; cursor: pointer;
  font: 600 12px/1 var(--font-ui);
  letter-spacing: .1em; text-transform: uppercase;
}
.comment-form .submit:hover { background: var(--brand-deep); }
.comment-notes, .comment-form-cookies-consent label {
  font-size: 0.8125rem; color: var(--ink-muted);
  letter-spacing: normal; text-transform: none; font-weight: 400;
}
.comment-form-cookies-consent { display: flex; align-items: center; gap: 9px; }
.comment-form-cookies-consent input { width: auto; }
.no-comments { color: var(--ink-muted); font-size: 0.9375rem; }

/* ------------------------------ archive header ---------------------------- */
.archive-head { padding-top: 116px; }
.archive-head .archive-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.2rem);
  line-height: 1.06; letter-spacing: -0.03em;
  color: var(--ink); margin: 0 0 12px;
}
.archive-head .archive-desc {
  color: var(--ink-muted); max-width: 60ch; margin: 0;
}

/* Pages that have no hero need the fixed header's height reserved, or the
   first heading slides underneath it. */
.no-hero { padding-top: 64px; }

/* --------------------------------- search --------------------------------- */
.search-empty {
  background: var(--plate); border: 1px solid var(--rule);
  border-radius: 2px; padding: 40px; text-align: center;
}
.search-empty p { color: var(--ink-muted); margin: 0 0 20px; }
.search-empty form { max-width: 380px; margin-inline: auto; }

/* ---------------------------------- 404 ----------------------------------- */
.err-404 { text-align: center; padding-block: clamp(60px, 10vw, 120px); }
.err-404 .code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 2rem + 9vw, 8rem);
  line-height: 1; color: var(--signal); margin: 0 0 8px;
  font-variant-numeric: tabular-nums;
}
.err-404 h1 {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  color: var(--ink); max-width: 20ch; margin-inline: auto;
}
.err-404 p { color: var(--ink-muted); max-width: 46ch; margin: 0 auto 28px; }

/* ------------------------------- woocommerce ------------------------------ */
/* The blog runs WooCommerce. These keep its pages from looking unstyled
   without pretending to be a full shop design. */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: var(--brand); color: #fff;
  border: 0; border-radius: 2px;
  padding: 12px 24px; font-weight: 600;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover { background: var(--brand-deep); color: #fff; }
.woocommerce ul.products li.product,
.woocommerce div.product {
  background: var(--plate);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 16px;
}
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
  border-top-color: var(--brand);
  background: var(--plate); color: var(--ink-body);
}

/* --------------------------------- print ---------------------------------- */
@media print {
  .hdr, .ftr, .sidebar, .helm, .gauge, .filters, .post-nav, .comments-area { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .prose { max-width: none; }
  .prose a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ==========================================================================
   TEMPLATE ADDITIONS
   --------------------------------------------------------------------------
   Markup the live templates emit that the static preview never had: an
   openable mobile nav, the single-post hero figure, tag pills, and the
   WooCommerce column.
   ========================================================================== */

/* ------------------------------- mobile nav ------------------------------- */
/* The preview simply hid the nav below 880px. A real site needs it to open. */
@media (max-width: 880px) {
  .nav {
    display: none;
    position: fixed;
    inset: 64px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px;
    background: var(--plate);
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow-lift);
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }
  .nav.open { display: flex; }

  /* Inside the panel the items sit on a light surface regardless of whether
     the header is currently transparent, so they need page-ink colours. */
  .nav a,
  .hdr-over .nav a {
    color: var(--ink-body);
    padding: 13px 14px;
    border-radius: 2px;
    font-size: 15px;
  }
  .nav a:hover,
  .hdr-over .nav a:hover { background: var(--signal-soft); color: var(--ink); }
  .nav a[aria-current="page"],
  .hdr-over .nav a[aria-current="page"] { background: var(--signal-soft); color: var(--brand); }
  .nav .cta,
  .hdr-over .nav .cta {
    background: var(--brand); color: #fff;
    margin: 8px 0 0; text-align: center; border-radius: 2px;
  }

  body.admin-bar .nav { top: 110px; }
}

.menu-btn { cursor: pointer; }
.menu-btn[aria-expanded="true"] { background: rgba(255,255,255,.16); }
.hdr.solid .menu-btn[aria-expanded="true"] { background: var(--signal-soft); }

/* ---------------------------- single post hero ---------------------------- */
.post-hero {
  margin: 0 0 36px;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--ground-deep);
}
.post-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}
.post-hero figcaption {
  padding: 11px 16px;
  margin: 0;
  background: var(--plate);
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
}

/* -------------------------------- tag pills ------------------------------- */
.tags-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tags-links a {
  display: inline-block;
  background: var(--ground-deep);
  color: var(--ink-body);
  font-size: 0.8125rem; font-weight: 500;
  padding: 5px 13px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  text-decoration: none;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.tags-links a:hover {
  background: var(--brand); border-color: var(--brand); color: #fff;
}

/* --------------------------------- pages ---------------------------------- */
.page-links {
  display: flex; gap: 8px; align-items: center;
  margin-top: 32px; font-size: 0.8125rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-muted);
}
.page-links a {
  display: inline-grid; place-items: center;
  min-width: 32px; height: 32px;
  border: 1px solid var(--rule); border-radius: 2px;
  color: var(--ink-body); text-decoration: none;
}
.page-links a:hover { border-color: var(--signal); }

/* ------------------------------ woocommerce ------------------------------- */
.woocommerce-wrap { min-width: 0; }
.woocommerce-wrap h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem);
  line-height: 1.08; letter-spacing: -0.028em;
  color: var(--ink); margin: 0 0 24px;
}

/* --------------------------- widget block fallback ------------------------ */
/* Widgets added through the block editor render bare blocks rather than the
   classic .widget wrapper. This keeps them looking like the rest. */
.sidebar .wp-block-group,
.sidebar .wp-block-search,
.sidebar .wp-block-categories,
.sidebar .wp-block-latest-posts {
  background: var(--plate);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 22px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-plate);
}
.sidebar .wp-block-search__label,
.sidebar .wp-block-heading {
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--rule);
}
.sidebar .wp-block-search__input {
  background: var(--ground); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: 2px;
  padding: 10px 12px; font: 400 14.5px/1.3 var(--font-ui);
}
.sidebar .wp-block-search__button {
  background: var(--brand); color: #fff; border: 0;
  border-radius: 2px; padding: 0 15px;
  font: 600 12px/1 var(--font-ui);
  letter-spacing: .08em; text-transform: uppercase;
}

/* ---------------------- wp_nav_menu list structure ------------------------ */
/* wp_nav_menu emits <ul><li><a>. The design's .nav rules target descendants,
   so only the list containers need neutralising. */
.nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-list li { margin: 0; }

/* WordPress marks the active item with a class rather than aria-current, so
   both need to produce the 20% white fill. */
.nav .current-menu-item > a,
.nav .current-menu-ancestor > a,
.nav .current_page_item > a { background: rgba(255,255,255,0.2); }

.hdr.solid .nav .current-menu-item > a,
.hdr.solid .nav .current-menu-ancestor > a,
.hdr.solid .nav .current_page_item > a { background: var(--signal-soft); color: var(--brand); }

@media (max-width: 880px) {
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav-list li { width: 100%; }
  .nav-list a { display: block; }
  .nav .current-menu-item > a,
  .nav .current_page_item > a { background: var(--signal-soft); color: var(--brand); }
}

/* ==========================================================================
   CONTACT & NEWSLETTER FORMS
   --------------------------------------------------------------------------
   Rendered by the theme, forwarded server-side to the main site's API. Styled
   as a chart plate so the contact page belongs to the blog rather than
   looking like an embedded third-party widget.
   ========================================================================== */

.icf { margin: 0 0 8px; }

.icf-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem);
  line-height: 1.1; letter-spacing: -0.024em;
  color: var(--ink); margin: 0 0 10px;
}
.icf-intro { color: var(--ink-muted); margin: 0 0 26px; max-width: 56ch; }

.icf-form {
  display: flex; flex-direction: column; gap: 18px;
  background: var(--plate);
  border: 1px solid var(--rule);
  border-radius: 2px;
  box-shadow: var(--shadow-plate);
  padding: clamp(20px, 3vw, 32px);
}

.icf-row { display: grid; gap: 18px; }
@media (min-width: 640px) { .icf-row { grid-template-columns: 1fr 1fr; } }

.icf-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.icf-field label {
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-muted);
}
.icf-field label span { color: var(--signal); }

.icf-field input,
.icf-field select,
.icf-field textarea {
  width: 100%;
  background: var(--ground); color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 12px 14px;
  font: 400 15.5px/1.5 var(--font-ui);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.icf-field textarea { resize: vertical; min-height: 150px; }
.icf-field input::placeholder,
.icf-field textarea::placeholder { color: var(--ink-faint); }
.icf-field input:focus,
.icf-field select:focus,
.icf-field textarea:focus {
  outline: none;
  border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-soft);
}
/* :invalid alone would flag empty required fields before anyone has typed,
   which reads as scolding. :user-invalid only fires after interaction. */
.icf-field input:user-invalid,
.icf-field textarea:user-invalid { border-color: var(--error, #dc2626); }

.icf-submit {
  align-self: flex-start;
  background: var(--brand); color: #fff;
  border: 0; border-radius: 2px;
  padding: 14px 34px; cursor: pointer;
  font: 600 12.5px/1 var(--font-ui);
  letter-spacing: .1em; text-transform: uppercase;
  transition: background-color .18s var(--ease), transform .18s var(--ease);
}
.icf-submit:hover { background: var(--brand-deep); transform: translateY(-1px); }
.icf-submit:active { transform: none; }

.icf-fine { margin: 0; font-size: 12.5px; color: var(--ink-faint); }

/* The honeypot must be unreachable by sight, keyboard and screen reader —
   display:none is fine here precisely because no human should ever find it. */
.icf-hp { display: none !important; }

.icf-note {
  border-radius: 2px;
  padding: 14px 18px;
  margin: 0 0 22px;
  font-size: 14.5px; line-height: 1.55;
  border-left: 3px solid;
}
.icf-note strong { display: block; margin-bottom: 3px; color: var(--ink); }
.icf-ok  { background: var(--signal-soft); border-left-color: var(--signal); color: var(--ink-body); }
.icf-bad { background: rgba(220,38,38,.09); border-left-color: #dc2626; color: var(--ink-body); }

/* Newsletter — reuses the sidebar widget form styling, adds only the notes. */
.icf-nl p { margin: 0 0 12px; }
.icf-nl .icf-note { margin-bottom: 14px; padding: 11px 14px; font-size: 13px; }

/* ==========================================================================
   FULL-WIDTH PAGES
   --------------------------------------------------------------------------
   The static front page and any page using the Full Width template are built
   with Spectra / Smart Slider blocks. Those need the whole container, not the
   750px article measure — forcing a page-builder layout through a reading
   column breaks it immediately.
   ========================================================================== */

.page-content { max-width: none; }
.page-content > * { max-width: none; }

/* Blocks keep their own widths; only the wrapper opens up. */
.page-content .wp-block-group,
.page-content .wp-block-columns,
.page-content .wp-block-cover,
.page-content .uagb-container,
.page-content [class*="uagb-"] { max-width: none; }

/* alignfull inside a full-width page should reach the viewport edge, ignoring
   the shell's 24px gutter. */
.page-wide .alignfull {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  max-width: none;
}
.page-wide .alignwide {
  width: min(1400px, calc(100vw - 48px));
  margin-inline: calc(50% - min(700px, calc(50vw - 24px)));
  max-width: none;
}

/* Smart Slider and Spectra set their own type; only supply what they inherit
   so the page picks up Inter and the brand ink without being overridden. */
.page-content { color: var(--ink-body); }
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4 { color: var(--ink); }
.page-content a:not(.wp-block-button__link):not(.uagb-button__link) { color: var(--brand); }

/* ==========================================================================
   HOMEPAGE  (front-page.php)
   --------------------------------------------------------------------------
   Same materials as the blog — chart plates, hairlines, contour art — doing a
   different job. The blog hero sells the writing; this one sells the tools, so
   the five products lead and the articles follow.
   ========================================================================== */
/* ==========================================================================
   HOMEPAGE
   --------------------------------------------------------------------------
   Same materials as the blog — chart plates, hairlines, contour art — but a
   different job. The blog hero sells the writing; this one sells the tools,
   so the five products lead and the articles follow.
   ========================================================================== */


/* Home hero sits a little shorter — the tools below are the real payload. */
.hero-home { min-height: 76vh; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

.btn-primary {
  display: inline-block; background: var(--brand); color: #fff;
  border: 1px solid var(--brand); border-radius: 2px;
  padding: 14px 30px; text-decoration: none;
  font: 600 12.5px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
  transition: background-color .18s var(--ease), transform .18s var(--ease);
}
.btn-primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); transform: translateY(-1px); }

.btn-ghost {
  display: inline-block; background: transparent; color: var(--hero-ink);
  border: 1px solid var(--hero-rule); border-radius: 2px;
  padding: 14px 30px; text-decoration: none;
  font: 600 12.5px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.btn-ghost:hover { border-color: var(--signal); background: rgba(255,255,255,.06); }

/* --------------------------------- tools ---------------------------------- */
.tools {
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.tool {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--plate);
  border: 1px solid var(--rule);
  border-radius: 2px;
  box-shadow: var(--shadow-plate);
  overflow: hidden; text-decoration: none;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.tool:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--rule-strong); }
.tool-art {
  position: relative; aspect-ratio: 16 / 7;
  background: var(--ground-deep);
  border-bottom: 1px solid var(--rule);
}
.tool-art canvas { display: block; width: 100%; height: 100%; }
.tool-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tool-body h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.018em;
  color: var(--ink); margin: 0; text-wrap: balance;
  transition: color .25s var(--ease);
}
.tool:hover h3 { color: var(--brand); }
.tool-body p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-muted); }
.tool-go {
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand);
}
.tool:hover .tool-go { color: var(--brand-deep); }

/* CruisVisor is the differentiated product, so it gets the wide plate. */
.tool-wide { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .tool-wide { flex-direction: row; }
  .tool-wide .tool-art { aspect-ratio: auto; flex: 1 1 46%; border-bottom: 0; border-right: 1px solid var(--rule); min-height: 300px; }
  .tool-wide .tool-body { flex: 1 1 54%; justify-content: center; padding: 40px; gap: 14px; }
  .tool-wide .tool-body h3 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); line-height: 1.1; }
  .tool-wide .tool-body p { font-size: 16px; }
}

/* -------------------------------- regions --------------------------------- */
.band { background: var(--plate); border-block: 1px solid var(--rule); }
.regions {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.region {
  position: relative; display: block;
  border: 1px solid var(--rule); border-radius: 2px;
  overflow: hidden; text-decoration: none;
  aspect-ratio: 4 / 3; background: var(--ground-deep);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.region:hover { border-color: var(--signal); transform: translateY(-3px); }
.region canvas { display: block; width: 100%; height: 100%; }
.region-name {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 10px 12px;
  background: linear-gradient(180deg, transparent, rgba(4,14,24,.82));
  color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .02em;
}

.seelink { text-decoration: none; color: var(--brand); }
.seelink:hover { color: var(--brand-deep); text-decoration: underline; }

/* ------------------------------- agent CTA -------------------------------- */
.agent-cta { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.agent-note { margin: 0; font-size: 13px; color: var(--ink-muted); }
.agent-note strong { color: var(--ink); font-variant-numeric: tabular-nums; }



/* ==========================================================================
   SECTION INDEX
   --------------------------------------------------------------------------
   Shown on pages that have no content of their own, listing whatever sits
   beneath them. A landing page should be navigation, not a blank container.
   ========================================================================== */

.subgrid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.subcard {
  position: relative;
  display: flex; flex-direction: column; gap: 9px;
  padding: 24px 26px 22px;
  background: var(--plate);
  border: 1px solid var(--rule);
  border-radius: 2px;
  box-shadow: var(--shadow-plate);
  text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.subcard:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: var(--rule-strong);
}

.subcard h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.28rem; line-height: 1.2; letter-spacing: -0.018em;
  color: var(--ink); margin: 0; padding-right: 26px;
  text-wrap: balance;
  transition: color .25s var(--ease);
}
.subcard:hover h2 { color: var(--brand); }

.subcard p {
  margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-muted);
}

.subcard-go {
  position: absolute; top: 22px; right: 22px;
  color: var(--ink-faint); font-size: 17px; line-height: 1;
  transition: transform .25s var(--ease), color .25s var(--ease);
}
.subcard:hover .subcard-go { color: var(--brand); transform: translateX(3px); }