/*
 * Dossier header: one case-file strip on every page, the IT | EN stamp switch and the mobile index menu.
 * Loaded sitewide. Same d- prefix and tokens as redesign.css; nothing here depends on namo.css.
 */
:root { --d-head-h: 72px; }
@media (max-width: 700px) { :root { --d-head-h: 64px; } }
/* Anchors land below the sticky strip. */
html:has(.d-head) { scroll-padding-top: calc(var(--d-head-h) + 12px); }
html.d-menu-open { overflow: hidden; padding-right: var(--d-sbw, 0px); }
/* Template parts wrap the header in a div; the strip must stick to the page, not to that wrapper. */
.wp-block-template-part:has(> .d-head) { display: contents; }

.d-head, .d-menu {
  --night: #14123a;
  --violet-deep: #4b2fd6;
  --gold: #ffd31a;
  --lilac: #cfc8ff;
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --text: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gut: clamp(16px, 4vw, 40px);
  font: 600 .8125rem/1 var(--text);
  color: #fff;
}
.d-head, .d-head *, .d-menu, .d-menu * { box-sizing: border-box; }
.d-head :where(a, p, nav, div, ul), .d-menu :where(a, p, nav, div, ul) { margin: 0; }
.d-head a, .d-menu a { color: inherit; text-decoration: none; }
.d-head :focus-visible, .d-menu :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.d-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- the strip ---------- */
.d-head { position: sticky; top: 0; z-index: 60; height: var(--d-head-h); background: var(--night); transition: transform .45s var(--ease); }
.d-head--focus { position: relative; }
/* the strip's lower edge is a tear line, like every join in the dossier */
.d-head::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; pointer-events: none; background: radial-gradient(circle at 50% 0, var(--night) 6.5px, transparent 7px) 0 0 / 24px 12px repeat-x; }
.d-head.is-away { transform: translateY(calc(-100% - 12px)); }
.d-head:focus-within { transform: none; }
.d-head-bar { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); height: 100%; width: min(1280px, 100% - 2 * var(--gut)); margin-inline: auto; }
.d-head-logo { display: block; flex: none; width: 120px; height: 44px; border-radius: 4px; background: url(img/namo-logo-transparent.png) 0 50% / 100% auto no-repeat; }

.d-head-nav { display: flex; align-items: center; margin-left: clamp(4px, 2vw, 28px); }
.d-head-nav a, .d-head-home { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.d-head-nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; border-bottom: 2px dashed var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.d-head-nav a:hover::after { transform: scaleX(1); }
.d-head-nav a:hover, .d-head-home:hover { color: var(--gold); }
.d-head-quiz { color: var(--gold); }
.d-head-home { margin-left: 4px; padding-inline: 8px; }
.d-head-home svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.d-head-home:hover svg { transform: translateX(-4px); }
.d-head-bar > .d-lang { margin-left: auto; }

/* ---------- IT | EN: the current language is a filled stamp, the other an outlined tab ---------- */
.d-lang { display: inline-flex; align-items: center; gap: 6px; }
.d-lang-opt { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 8px; font: 800 1rem/1 var(--display); letter-spacing: .14em; text-indent: .14em; border-radius: 4px; }
a.d-lang-opt { color: var(--gold); border: 2px dashed rgba(255, 211, 26, .7); transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
a.d-lang-opt:hover { background: var(--gold); color: var(--night); border-style: solid; border-color: var(--gold); }
.d-lang-opt.is-current { background: var(--gold); color: var(--night); border: 2px solid var(--gold); outline: 2px dashed var(--night); outline-offset: -6px; cursor: default; }

.d-head-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; background: var(--gold); color: var(--night) !important; font: 900 1.125rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; border-radius: 999px; transition: background-color .3s var(--ease), transform .3s var(--ease); }
.d-head-cta:hover { background: #fff; transform: translateY(-2px); }
.d-head-cta:active { transform: translateY(1px) scale(.98); }

.d-burger { display: none; position: relative; flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--gold); cursor: pointer; transition: transform .3s var(--ease); }
.d-burger span { position: absolute; left: 13px; right: 13px; height: 2.5px; border-radius: 2px; background: var(--night); transition: transform .3s var(--ease); }
.d-burger span:first-child { top: 18px; }
.d-burger span:last-child { top: 28px; }
.d-burger:hover span:first-child { transform: translateX(2px); }
.d-burger:hover span:last-child { transform: translateX(-2px); }

/* ---------- mobile index menu ---------- */
.d-menu { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; padding: 0 var(--gut) max(28px, env(safe-area-inset-bottom)); overflow-y: auto; background: var(--night); visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .55s var(--ease), visibility 0s linear .55s; }
.d-menu.is-open { visibility: visible; clip-path: inset(0); transition: clip-path .55s var(--ease), visibility 0s; }
.d-menu-top { display: flex; align-items: center; justify-content: space-between; flex: none; min-height: var(--d-head-h); border-bottom: 2px dashed rgba(255, 211, 26, .4); }
.d-menu-close { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 2px solid var(--gold); border-radius: 50%; background: transparent; color: var(--gold); cursor: pointer; transition: background-color .25s var(--ease), color .25s var(--ease); }
.d-menu-close:hover { background: var(--gold); color: var(--night); }
.d-menu-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.d-menu-nav { display: flex; flex-direction: column; margin: 0; padding: 20px 0 24px; }
.d-menu-nav a { position: relative; display: grid; grid-template-columns: 1fr 28px; align-items: center; gap: 4px; min-height: 64px; padding: 10px 0; border-top: 2px dashed rgba(255, 211, 26, .35); font: 900 clamp(2rem, 9.5vw, 3.5rem)/1 var(--display); letter-spacing: .005em; text-transform: uppercase; transition: color .25s var(--ease), transform .35s var(--ease); }
.d-menu-nav a:last-child { border-bottom: 2px dashed rgba(255, 211, 26, .35); }
.d-menu-nav a::after { content: ""; width: 24px; height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd31a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.d-menu-nav a:hover, .d-menu-nav a:focus-visible { color: var(--gold); transform: translateX(10px); }
.d-menu-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; flex: none; margin-top: auto; padding-top: 16px; }
.d-menu-foot .d-head-cta { flex: 1 1 220px; min-height: 52px; font-size: 1.375rem; }

@media (max-width: 1080px) {
  .d-head-nav { display: none; }
  .d-burger { display: inline-block; }
}
@media (min-width: 1081px) { .d-menu { display: none; } }
@media (max-width: 700px) {
  .d-head-bar > .d-head-cta { display: none; }
  .d-head-logo { width: 104px; }
  .d-head-bar { gap: 10px; }
}
@media (max-width: 380px) {
  .d-head-logo { width: 92px; }
  .d-lang-opt { min-width: 44px; padding: 0 4px; }
  .d-lang { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .d-head, .d-menu, .d-menu.is-open, .d-menu-nav a, .d-head-nav a::after, .d-head-home svg { transition-duration: .01ms !important; transition-delay: 0s !important; }
}