/* site-header — utility bar + branding/nav/search
   Ported verbatim from css/components.css in the static handoff. */
.jcao-utility { background: var(--navy); color: #fff; }
.jcao-utility__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding-block: 8px; font-size: 12.5px; }
.jcao-utility__note { color: rgba(255,255,255,.66); }
/* Two blocks are placed in the header_top region (Utility Bar, then core's
   Language switcher) rather than one combined block, so the "push right,
   lay out inline" treatment the static handoff gave a single
   .jcao-utility__tools wrapper is applied to whichever block comes after
   the first one instead of to a fixed class. */
.jcao-utility__inner > .block + .block { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.jcao-utility a { color: #fff; text-decoration: none; display: flex; align-items: center; gap: 7px; }
.jcao-utility a:hover { color: var(--sand-light); }
.jcao-utility select { font-family: var(--font-body); font-size: 12.5px; padding: 3px 8px; border-radius: 4px; background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.28); }
.jcao-utility select option { color: var(--ink); }
.jcao-lang { display: flex; align-items: center; gap: 8px; }
/* Core's language switcher block renders a <ul> of links by default,
   not the static mockup's <select> dropdown — restyled here as an
   inline list rather than rebuilt as a custom <select> block plugin.
   See the installation guide's "Assumptions" section. */
.jcao-utility .language-switcher-locale-url,
.jcao-utility .language-switcher-locale-session { list-style: none; display: flex; gap: 14px; margin: 0; padding: 0; }

.jcao-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.88); backdrop-filter: blur(12px); box-shadow: 0 1px 3px rgba(28,35,51,.07); }
.jcao-header__inner { display: flex; align-items: center; gap: clamp(14px, 2.6vw, 36px); padding-block: 14px; }
.jcao-brand { display: flex; flex: none; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); margin-right: auto; }
.jcao-brand img { width: 48px; height: 48px; object-fit: contain; mix-blend-mode: multiply; }
.jcao-brand__name { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 21px; line-height: 1.05; white-space: nowrap; }
.jcao-brand__sub { display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-5); margin-top: 3px; white-space: nowrap; }

.jcao-nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: clamp(2px, .7vw, 10px); min-width: 0; }
.jcao-nav__link { font-size: 14.5px; font-weight: 500; text-decoration: none; color: var(--ink-2); padding: 10px clamp(6px, .9vw, 12px); border-radius: var(--r-sm); white-space: nowrap; }
.jcao-nav__link:hover { background: var(--steel-tint); color: var(--navy); }
.jcao-nav__link[aria-current="page"] { background: var(--steel-tint); color: var(--navy); }
.jcao-nav__item--active-trail { background: var(--steel-tint); color: var(--navy); }


/* search — header variant */
.jcao-search { display: flex; align-items: center; gap: 7px; flex: 0 1 auto; min-width: 0; margin-left: clamp(6px, 1vw, 14px); min-height: var(--tap); padding: 0 5px 0 12px; border-radius: var(--r-md); background: var(--surface-sunk); border: 1px solid var(--rule-strong); transition: border-color .18s ease, box-shadow .18s ease; }
.jcao-search:focus-within { border-color: var(--steel); box-shadow: 0 0 0 3px rgba(74,123,167,.18); }
.jcao-search input { width: 100%; min-width: 70px; max-width: 150px; min-height: 42px; border: 0; background: transparent; font-family: var(--font-body); font-size: 14.5px; color: var(--navy); outline: none; }
.jcao-search button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 4px; background: var(--steel); color: #fff; font-family: var(--font-heading); font-weight: 600; font-size: 14px; cursor: pointer; transition: background .18s ease; }
.jcao-search button:hover { background: var(--steel-dark); }
li.jcao-nav__link a { text-decoration: none; }