/* ---------------------------------------------------------------------------
   Clara Maritime - WordPress-specific extras
   Loaded after clara.css. Holds: spectrum load animation, admin-bar offset,
   and small server-rendered-nav niceties the prototype handled in React.
   --------------------------------------------------------------------------- */

/* Spectrum reveal on first hero view - bars rise into position over 600ms.
   Pure CSS: fires on load, no JS dependency, cannot get stuck collapsed.
   Base state (reduced-motion / print / no CSS-animation support) = final. */
.clara-spectrum .cs-bar,
.clara-spectrum .cs-accent {
  transform-box: fill-box;
  transform-origin: bottom;
}

@media (prefers-reduced-motion: no-preference) {
  .clara-spectrum--animate .cs-bar {
    animation: cs-rise 600ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .clara-spectrum--animate .cs-accent {
    animation: cs-fade 800ms ease 600ms both;
  }
  .clara-spectrum--animate .cs-bar:nth-of-type(1) { animation-delay: 0ms; }
  .clara-spectrum--animate .cs-bar:nth-of-type(2) { animation-delay: 60ms; }
  .clara-spectrum--animate .cs-bar:nth-of-type(3) { animation-delay: 120ms; }
  .clara-spectrum--animate .cs-bar:nth-of-type(4) { animation-delay: 180ms; }
  .clara-spectrum--animate .cs-bar:nth-of-type(5) { animation-delay: 240ms; }
  .clara-spectrum--animate .cs-bar:nth-of-type(6) { animation-delay: 300ms; }
  .clara-spectrum--animate .cs-bar:nth-of-type(7) { animation-delay: 360ms; }

  @keyframes cs-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes cs-fade { from { opacity: 0; } }

  /* Section reveal: fade + lift, staggered. Applied by JS only when it can be
     un-applied (IntersectionObserver); base state stays intact otherwise. */
  .reveal.is-armed { opacity: 0; transform: translateY(12px); }
  .reveal.is-revealed {
    opacity: 1; transform: translateY(0);
    transition: opacity 400ms ease, transform 400ms ease;
  }
}

/* Logo is now an <a>; keep it inheriting header colour cleanly. */
.header .logo { text-decoration: none; }
.header .logo .wordmark { transition: color var(--t-base) var(--ease); }

/* When the WP admin bar is present, keep the sticky header below it. */
.admin-bar .header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .header { top: 46px; }
}

/* The rights-matrix rows are keyboard-focusable buttons - visible focus ring. */
.matrix tbody tr:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.radio-pill:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* WordPress editor alignment helpers inside .article (for legal page content). */
.article img { max-width: 100%; height: auto; }
/* Buttons carry their own colour (.btn-primary is white on blue, .btn-ghost
   inherits the band). This rule outweighed them at (0,1,1) and painted every
   in-article button link blue - invisible on a blue button. */
.article a:not(.btn) { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.article h2 a, .article h3 a { text-decoration: none; }
.article ul:not(.deliverables) { padding-left: 1.2em; color: var(--ink-muted); line-height: 1.7; }
.article ol { padding-left: 1.2em; color: var(--ink-muted); line-height: 1.7; }

/* --- editable-page helper (Contact info note; added during the blocks conversion) --- */
.contact-note { margin-top:40px; padding-top:24px; border-top:1px solid var(--rule); font-size:13px; color:var(--ink-soft); line-height:1.6; }
.contact-note strong { color:var(--ink); }

/* Section header (.sec-head): the label line is a <p> in the block build (was a <div>), and its
   default paragraph margin lifted "01 - LABEL" above the H2 baseline. Zero it so both titles
   bottom-align (the grid already uses align-items:end). */
.sec-head > * { margin-block: 0; }
.sec-head .label-line { margin: 0; }
.sec-head h2 { margin: 0; }
/* Force each section-header column to bottom-align its content (the label column was stretching,
   leaving "01 - LABEL" at its top). This is what actually bottom-aligns the two titles. */
.sec-head { align-items: end; }
.sec-head > * { align-self: end; }

/* Header logo lockup: icon, hairline rule and wordmark as one balanced, vertically
   centred group. Enlarged 2026-08-20 from 29x24 / 20px rule. The 68:56 viewBox
   aspect is preserved (38/31 = 1.226 vs 1.214) so the bars don't distort.
   NB: .logo .icon-wrap is also declared in clara.css -- this file loads later and
   wins, so both must be kept in step. */
.logo .icon-wrap { width: 38px; height: 31px; }
.logo .vrule { height: 26px; }
@media (max-width: 600px) {
  .logo .icon-wrap { width: 34px; height: 28px; }
  .logo .vrule { height: 23px; }
}

/* Navy band: legible body text (plain paragraphs on navy). */
.band-navy p { color: var(--on-navy); }