/*
 * Accessible UI primitives for the PHP-rendered ITKMV site.
 * The interaction model is inspired by Bits UI (headless, semantic, accessible),
 * but this file is a framework-free adapter, not the official Svelte package.
 */
:root {
  --ui-ease-out: cubic-bezier(.16, 1, .3, 1);
  --ui-spring: cubic-bezier(.2, .85, .25, 1.18);
  --ui-focus: rgba(255, 122, 26, .62);
  --ui-line: rgba(19, 45, 79, .12);
  --ui-surface: rgba(255, 255, 255, .84);
  --ui-shadow: 0 14px 44px rgba(7, 21, 42, .10);
}
.dark {
  --ui-line: rgba(255, 255, 255, .12);
  --ui-surface: rgba(10, 26, 48, .88);
  --ui-shadow: 0 18px 52px rgba(0, 0, 0, .28);
}

/* A single keyboard-visible focus style across the public UI. */
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
  outline: 3px solid var(--ui-focus) !important;
  outline-offset: 3px;
}
:where(button, input, select, textarea):disabled,
:where(button, input, select, textarea)[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .58;
}
:where(input, select, textarea)[aria-invalid="true"] {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .10);
}
::selection { background: rgba(255, 122, 26, .22); }

/* Desktop navigation matching the original site's simple horizontal menu.
   No enclosing pill/slider: each link animates its underline independently. */
@media (min-width: 1024px) {
  #desktop-nav {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(.35rem, .85vw, .9rem);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  #desktop-nav .nav-indicator { display: none !important; }
  #desktop-nav .nav-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: .65rem clamp(.4rem, .65vw, .7rem);
    border-radius: .45rem;
    background: transparent !important;
    white-space: nowrap;
    transition: color .22s ease, transform .28s var(--ui-ease-out), opacity .28s ease;
  }
  #desktop-nav .nav-link::after {
    content: "";
    display: block !important;
    position: absolute;
    left: .65rem;
    right: .65rem;
    bottom: .28rem;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    opacity: .95;
    transition: transform .34s var(--ui-spring);
  }
  #desktop-nav .nav-link:hover,
  #desktop-nav .nav-link:focus-visible { transform: translateY(-1px); }
  #desktop-nav .nav-link:hover::after,
  #desktop-nav .nav-link:focus-visible::after,
  #desktop-nav .nav-link[aria-current="location"]::after { transform: scaleX(1); }
  #desktop-nav .nav-link[aria-current="location"] { color: #c75a0b; }
  .dark #desktop-nav .nav-link[aria-current="location"] { color: #ffb27c; }
  #desktop-nav .nav-link:active { transform: translateY(0) scale(.98); }
  #desktop-nav .nav-link:focus-visible { outline-offset: 2px !important; }

  /* Original-style staggered entrance, only enabled once JS confirms readiness. */
  #site-header.header-ready #desktop-nav .nav-link,
  #site-header.header-ready .header-entrance {
    animation: itkmv-nav-enter .58s var(--ui-ease-out) both;
  }
  #site-header.header-ready #desktop-nav .nav-link:nth-child(1) { animation-delay: .04s; }
  #site-header.header-ready #desktop-nav .nav-link:nth-child(2) { animation-delay: .09s; }
  #site-header.header-ready #desktop-nav .nav-link:nth-child(3) { animation-delay: .14s; }
  #site-header.header-ready #desktop-nav .nav-link:nth-child(4) { animation-delay: .19s; }
  #site-header.header-ready .header-entrance { animation-delay: .02s; }
}

@keyframes itkmv-nav-enter {
  from { opacity: 0; transform: translate3d(0,-7px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}

/* The bar is full-height at the top and becomes compact/frosted after scrolling. */
#site-header {
  background: rgba(255,255,255,.98);
  border-bottom: 1px solid rgba(15,35,60,.075);
  box-shadow: none;
  transition: background-color .32s var(--ui-ease-out), border-color .32s ease,
              box-shadow .32s ease, backdrop-filter .32s ease;
}
.dark #site-header {
  background: rgba(6,17,31,.98);
  border-bottom-color: rgba(255,255,255,.08);
}
#site-header[data-scrolled="1"] {
  background: rgba(255,255,255,.9) !important;
  border-bottom-color: rgba(15,35,60,.1) !important;
  box-shadow: 0 9px 28px rgba(8,20,39,.075) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}
.dark #site-header[data-scrolled="1"] {
  background: rgba(6,17,31,.88) !important;
  border-bottom-color: rgba(255,255,255,.1) !important;
  box-shadow: 0 10px 34px rgba(0,0,0,.23) !important;
}
/* Compact-header rules for the mobile/tablet sticky bar. Desktop geometry is
   owned by header-scroll-animation.js and must not snap via font-size. */
@media (max-width: 1023px) {
  #site-header > div { transition: height .38s var(--ui-ease-out); }
  #site-header.header-compact > div { height: 4rem; }
  #site-header .group > span:nth-child(2) > span:first-child { transition: font-size .32s var(--ui-ease-out); }
  #site-header.header-compact .group > span:first-child { transform: scale(.94); }
  #site-header.header-compact .group > span:nth-child(2) > span:first-child { font-size: 1.55rem; }
}
#site-header a:focus-visible, #site-header button:focus-visible { outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  #site-header.header-ready #desktop-nav .nav-link,
  #site-header.header-ready .header-entrance { animation: none !important; }
}

/* Common, state-driven patterns for dialogs, popovers, tabs and disclosures. */
[data-ui-surface] {
  border: 1px solid var(--ui-line);
  border-radius: 1.25rem;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
}
[data-ui-state="open"] { visibility: visible; opacity: 1; }
[data-ui-state="closed"] { visibility: hidden; opacity: 0; pointer-events: none; }
[data-ui-tablist] { display: flex; flex-wrap: wrap; gap: .375rem; }
[data-ui-tab] {
  position: relative;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .25s var(--ui-ease-out);
}
[data-ui-tab][aria-selected="true"] {
  color: #c75a0b;
  border-color: rgba(255,122,26,.2);
  background: rgba(255,122,26,.09);
}
.dark [data-ui-tab][aria-selected="true"] { color: #ffb27c; background: rgba(255,122,26,.12); }
[data-ui-tab]:active { transform: scale(.98); }
[data-ui-accordion-trigger] { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; }
[data-ui-accordion-trigger] [data-ui-chevron] { transition: transform .28s var(--ui-ease-out); }
[data-ui-accordion-trigger][aria-expanded="true"] [data-ui-chevron] { transform: rotate(180deg); }
[data-ui-dialog-backdrop] {
  position: fixed; inset: 0; z-index: 9998; background: rgba(4, 12, 25, .56);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  opacity: 0; transition: opacity .24s ease;
}
[data-ui-dialog-backdrop][data-ui-state="open"] { opacity: 1; }
dialog[data-ui-dialog] {
  max-width: min(94vw, 42rem); max-height: min(88dvh, 56rem); overflow: auto;
  margin: auto; border: 1px solid var(--ui-line); border-radius: 1.5rem;
  color: inherit; background: var(--ui-surface); box-shadow: 0 32px 100px rgba(0,0,0,.3);
  opacity: 0; transform: translateY(12px) scale(.985);
  transition: opacity .26s var(--ui-ease-out), transform .36s var(--ui-spring);
}
dialog[data-ui-dialog][open] { opacity: 1; transform: translateY(0) scale(1); }
dialog[data-ui-dialog]::backdrop { background: rgba(4, 12, 25, .56); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }

@media (hover: hover) and (pointer: fine) {
  :where(button, a, [role="button"]) { -webkit-tap-highlight-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
}
@media (forced-colors: active) {
  :where(a, button, input, select, textarea):focus-visible { outline: 2px solid Highlight !important; }
}

/* Desktop header: transparent over the hero at page start, then a floating
   frosted capsule on scroll (matching the provided reference screenshot). */
@media (min-width: 1024px) {
  #site-header {
    position: fixed !important;
    inset: 0 0 auto 0;
    z-index: 1000 !important;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    pointer-events: none;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition: padding .42s var(--ui-ease-out), background-color .42s ease;
  }

  #site-header > div {
    pointer-events: auto;
    width: min(100%, 1280px);
    max-width: 1280px;
    height: 80px !important;
    margin: 0 auto;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 24px;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: blur(0) saturate(1);
    backdrop-filter: blur(0) saturate(1);
    will-change: width, height, border-radius, background-color, border-color, box-shadow;
    transition:
      width .52s var(--ui-ease-out),
      max-width .52s var(--ui-ease-out),
      height .52s var(--ui-ease-out),
      margin .52s var(--ui-ease-out),
      padding .52s var(--ui-ease-out),
      border-radius .52s var(--ui-ease-out),
      border-color .48s ease,
      background-color .48s ease,
      box-shadow .48s ease,
      -webkit-backdrop-filter .48s ease,
      backdrop-filter .48s ease;
  }

  /* Intermediate compact size. The scrolled glass state below deliberately
     settles at 64px; both properties remain animated in either direction. */
  #site-header.header-compact > div { height: 70px !important; }

  /* At the top, the navigation sits directly over the hero without a bar. */
  #site-header[data-scrolled="0"] > div,
  #site-header:not([data-scrolled="1"]) > div {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }
  #site-header[data-scrolled="0"] #desktop-nav .nav-link,
  #site-header:not([data-scrolled="1"]) #desktop-nav .nav-link {
    color: rgba(255,255,255,.92) !important;
  }
  #site-header[data-scrolled="0"] .group > span:nth-child(2) > span:first-child,
  #site-header:not([data-scrolled="1"]) .group > span:nth-child(2) > span:first-child {
    color: #fff !important;
  }
  #site-header[data-scrolled="0"] .group > span:nth-child(2) > span:nth-child(2),
  #site-header:not([data-scrolled="1"]) .group > span:nth-child(2) > span:nth-child(2),
  #site-header[data-scrolled="0"] a[href^="tel:"],
  #site-header:not([data-scrolled="1"]) a[href^="tel:"] {
    color: rgba(255,255,255,.76) !important;
  }
  #site-header[data-scrolled="0"] #theme-toggle,
  #site-header:not([data-scrolled="1"]) #theme-toggle {
    color: #fff !important;
    border-color: rgba(255,255,255,.28) !important;
    background: rgba(255,255,255,.08) !important;
    box-shadow: none !important;
  }
  #site-header[data-scrolled="0"] #theme-toggle:hover,
  #site-header:not([data-scrolled="1"]) #theme-toggle:hover {
    background: rgba(255,255,255,.16) !important;
  }

  /* After scrolling, the outer header stays transparent; only the inner row
     becomes the rounded glass surface and contracts slightly. */
  #site-header[data-scrolled="1"] {
    padding: 12px 16px 4px;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  #site-header[data-scrolled="1"] > div {
    width: min(100%, 1060px);
    max-width: 1248px;
    height: 64px !important;
    padding-left: clamp(16px, 2vw, 30px);
    padding-right: clamp(16px, 2vw, 30px);
    border-color: rgba(255,255,255,.58);
    border-radius: 22px;
    background: rgba(255,255,255,.84);
    box-shadow: 0 12px 36px rgba(12,27,48,.12), inset 0 1px 0 rgba(255,255,255,.7);
    -webkit-backdrop-filter: blur(20px) saturate(1.25);
    backdrop-filter: blur(20px) saturate(1.25);
  }
  .dark #site-header[data-scrolled="1"] > div {
    border-color: rgba(255,255,255,.13);
    background: rgba(8,22,40,.82);
    box-shadow: 0 14px 42px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.045);
  }
  #site-header.header-compact .group > span:first-child { transform: scale(.92); }
  /* The title scales continuously with the capsule via --header-progress
     (written by header-scroll-animation.js). Transform-only: no font-size
     reflow mid-scroll, no binary snap, perfectly synced with the spring. */
  #site-header .group > span:nth-child(2) > span:first-child {
    transform-origin: left center;
    transform: scale(calc(1 - 0.24 * var(--header-progress, 0)));
  }
  #site-header.header-compact #desktop-nav .nav-link { min-height: 36px; }
}

@media (min-width: 1024px) {
  /* Give the hero more breathing room below the transparent desktop header. */
  .lg\:pt-20 { padding-top: 7rem; }
}

@media (max-width: 1023px) {
  /* Mobile/tablet keeps the existing full-width sticky header and menu. */
  #site-header { pointer-events: auto; }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  #site-header, #site-header > div { transition: none !important; }
}

@media (min-width: 1024px) {
  /* Keep the full-width shell invisible in dark mode too; the glass surface
     belongs only to the centered inner row. */
  .dark #site-header[data-scrolled="1"] {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* JS-driven desktop header animation: CSS transitions must not compete with
   requestAnimationFrame interpolation. The JS controls each dimension/color. */
@media (min-width: 1024px) {
  #site-header,
  #site-header > div {
    transition: none !important;
  }
  #site-header > div {
    box-sizing: border-box;
    /* Layout properties (width/height/padding) are animated every frame by
       JS and cannot be composited — listing them in will-change only wastes
       memory. Paint-heavy effects benefit from layer promotion. */
    will-change: backdrop-filter, box-shadow;
  }
}