/* ============================================================
   4Tex Spare Parts Shop — components.css
   Header / navigation / footer / language & theme toggle / forms
   Ported from 4tex.at so header + footer are visually identical
   to the main corporate website.
   ============================================================ */

/* ---- Header ------------------------------------------------
   White sticky bar, ~76px, fine bottom line + subtle shadow. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #FFFFFF;
  border-bottom: 1px solid #ECECEC;
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.site-header.is-scrolled {
  box-shadow: 0 6px 24px rgba(0,0,0,.08), 0 1px 0 rgba(0,0,0,.04);
  border-bottom-color: transparent;
}
/* While the nav/cart drawer's scroll-lock pins <body> to position:fixed,
   position:sticky on the header has nothing left to stick to and
   collapses to its static position — i.e. it jumps off-screen by the
   scroll offset. Pin it explicitly for the duration of the lock. */
.is-scroll-locked .site-header { position: fixed; left: 0; right: 0; }
.site-header__inner {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem);
  height: var(--header-h);
  padding-left: 0;   /* Logo sitzt bündig am Bildschirmrand — wie auf 4tex.at */
}
.brand { display: inline-flex; align-items: center; gap: .7rem; flex-shrink: 0; margin-right: auto; }
.brand__logo--mask {
  height: 170px; width: 170px;
  background: #000000;
  -webkit-mask: var(--logo-src) no-repeat left center / contain;
          mask: var(--logo-src) no-repeat left center / contain;
}
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: -.01em; color: var(--nav-blue); white-space: nowrap; }
.brand__name span { color: var(--nav-grey); font-weight: 500; }

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.25rem); }
.nav__list { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); }
.nav__link {
  display: inline-block; padding: .5rem 0;
  font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  letter-spacing: .07em; text-transform: uppercase; color: var(--nav-grey);
  position: relative; transition: color .25s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--nav-blue); border-radius: 2px;
  transform: scaleX(0); transform-origin: center; opacity: 0;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.nav__link:hover { color: var(--nav-blue); }
.nav__link:hover::after { transform: scaleX(.55); opacity: .5; }
.nav__link.is-active { color: var(--nav-blue); }
.nav__link.is-active::after { transform: scaleX(1); opacity: 1; }

.header-actions { display: flex; align-items: center; gap: clamp(.6rem, 1.5vw, 1.1rem); flex-shrink: 0;
  margin-left: clamp(.75rem, 2vw, 1.5rem); padding-left: clamp(.75rem, 2vw, 1.5rem);
  border-left: 1px solid #E2E2E2; }

.icon-btn {
  position: relative; width: 42px; height: 42px; border-radius: 100px;
  border: 1px solid #E2E2E2; display: grid; place-items: center;
  color: var(--nav-grey); background: transparent; flex-shrink: 0;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.icon-btn:hover { color: var(--nav-blue); border-color: var(--nav-blue); }
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn__badge {
  position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 4px;
  border-radius: 100px; background: var(--nav-blue); color: #fff;
  font-family: var(--font-display); font-size: .68rem; font-weight: 700;
  display: grid; place-items: center; line-height: 1; border: 2px solid #fff;
}
:root[data-theme="dark"] .icon-btn__badge { border-color: #0D1219; }

/* Search */
.header-search { position: relative; }
.header-search__form { display: flex; align-items: center; }
.header-search__input {
  width: clamp(140px, 16vw, 240px); padding: .62rem .95rem;
  border: 1px solid #E2E2E2; border-radius: 100px; font-size: .86rem;
  color: var(--ink-900); background-color: #fff;
  background-image: linear-gradient(90deg, transparent 0%, var(--search-sweep) 45%, var(--search-sweep) 55%, transparent 100%);
  background-repeat: no-repeat; background-size: 260% 100%; background-position: -160% 0;
  transition: width .25s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.header-search__input:focus {
  outline: none; width: clamp(200px, 22vw, 320px);
  border-color: var(--nav-blue); box-shadow: 0 0 0 3px rgba(0,90,156,.12);
}

/* ---- Idle "loading bar" hint ------------------------------------
   After 10s with no pointer/keyboard activity (see main.js), sweep
   a soft dark-to-light band across the search field once, left to
   right, as a calm visual cue that it's ready for input. */
:root { --search-sweep: rgba(0,90,156,.55); }
:root[data-theme="dark"] { --search-sweep: rgba(79,163,227,.55); }
.header-search__input.is-idle-hint {
  animation: search-idle-sweep 1.7s cubic-bezier(.4,0,.2,1);
}
@keyframes search-idle-sweep {
  0%   { background-position: -160% 0; }
  100% { background-position: 160% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .header-search__input.is-idle-hint { animation: none; }
}
.header-search__input::placeholder { color: var(--grey-400); }

/* ---- Hero search — large centred variant of the same search bar --------
   Reuses .header-search__form / .header-search__input / .search-results
   as-is so search.js and the idle-hint sweep in main.js pick it up
   automatically (both just do document.querySelectorAll(...)) — same
   live suggestions, same animations, just scaled up for the hero. */
/* Positioned relative to the whole .hero-bleed--full (not the padded,
   left-aligned .hero-bleed__text column) so it centres on the hero photo
   itself — e.g. on the wafer in the overview hero — independently of
   where the headline/lead text column sits. */
.hero-search {
  position: absolute; z-index: 3; top: 52%; left: 53%; transform: translate(-50%, -50%);
  width: min(544px, 88vw);
}
.hero-search .header-search__form { position: relative; display: block; }
.hero-search__icon {
  position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; color: var(--nav-blue); pointer-events: none; z-index: 1;
}
.hero-search .header-search__input {
  width: 100%; padding: 1.05rem 1.5rem 1.05rem 3.35rem;
  font-size: 1.02rem; border-radius: 100px; border: none;
  box-shadow: 0 14px 40px rgba(4,14,26,.32), inset 0 0 0 1px rgba(10,37,64,.06);
}
.hero-search .header-search__input:focus {
  width: 100%; box-shadow: 0 18px 48px rgba(4,14,26,.38), 0 0 0 4px rgba(0,90,156,.28);
}
.hero-search .search-results { left: 0; right: 0; width: 100%; }
@media (max-width: 560px) {
  .hero-search { max-width: 100%; }
}

/* CTA buttons directly under the hero search bar (overview hero only) —
   same horizontal centreline as .hero-search, positioned just below it. */
.hero-cta--under-search {
  /* Lower than .hero-search's own stacking context (z-index:3) so its
     suggestions dropdown — which pops up over this area — always wins,
     regardless of DOM order between the two siblings. */
  position: absolute; z-index: 1; top: 58%; left: 53%; transform: translateX(-50%);
  margin-top: 0; justify-content: center; width: min(544px, 88vw);
}
@media (max-width: 560px) {
  .hero-cta--under-search { width: 92vw; }
}

/* Language toggle */
.lang { display: inline-flex; border: 1px solid #E2E2E2; border-radius: 100px;
  overflow: hidden; font-family: var(--font-display); flex-shrink: 0; }
.lang__btn { padding: .32rem .68rem; font-size: .74rem; font-weight: 600; letter-spacing: .06em;
  color: var(--nav-grey); transition: color .25s var(--ease), background .25s var(--ease); }
.lang__btn.is-active { background: var(--nav-blue); color: #fff; }
.lang__btn:not(.is-active):hover { color: var(--nav-blue); }

/* Burger (mobile) */
.burger { display: none; width: 44px; height: 44px; flex-direction: column;
  justify-content: center; align-items: center; gap: 5px; border-radius: var(--radius);
  flex-shrink: 0; }
.burger span { width: 24px; height: 2px; background: var(--nav-blue); border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease); }
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- 4Tex Home — floating "back to homepage" tab -------------
   The shop's counterpart to the main site's green .shop-fab tab
   (same position, size and sparkle effect, injected the same way
   by main.js). Blue instead of green so it doesn't compete with
   the SEZ tile visually and reads as "go back", not "go to shop". */
.home-fab {
  position: fixed; top: 28%; right: 0; z-index: 95;
  transform: translateY(-50%) scale(1);
  display: inline-flex; align-items: center;
  padding: .9rem 1.15rem .9rem .95rem;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  overflow: hidden; /* keep the sparkle sweep clipped to the tab's rounded shape */
  background-color: var(--navy-700);
  background-image: linear-gradient(120deg, #1E4B78 0%, var(--navy-700) 22%, var(--navy-900) 42%, var(--navy-700) 62%, #2E6BA3 82%, var(--navy-700) 100%);
  background-size: 300% 100%;
  background-position: 0% 50%;
  color: #fff; font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid rgba(255,255,255,.25); border-right: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 8px 24px rgba(7,26,47,.28);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease);
  animation: home-fab-drift 30s ease-in-out infinite;
}
/* Slow blue gradient drift — mirrors .shop-fab's 30s there-and-back loop. */
@keyframes home-fab-drift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* Sparkle — same bright diagonal glint every 10s as the SEZ tile. */
.home-fab::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.5) 48%, rgba(255,255,255,.15) 55%, transparent 70%);
  background-size: 220% 100%;
  background-position: 160% 0;
  animation: home-fab-glint 10s ease-in-out infinite;
}
@keyframes home-fab-glint {
  0%, 42%  { background-position: 160% 0; }
  57%      { background-position: -60% 0; }
  100%     { background-position: -60% 0; }
}
.home-fab__label { position: relative; z-index: 1; }
.home-fab:hover, .home-fab:focus-visible {
  transform: translateY(-50%) scale(1.06);
  filter: brightness(1.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 12px 32px rgba(7,26,47,.36);
}
.home-fab:active { transform: translateY(-50%) scale(1.02); }
@media (prefers-reduced-motion: reduce) {
  .home-fab, .home-fab::before { animation: none; }
}
@media (max-width: 560px) {
  .home-fab { padding: .75rem .95rem .75rem .8rem; font-size: .74rem; top: 24%; }
}

/* Mobile drawer extras */
.nav__mobile-extras { display: none; }
/* top: var(--header-h) (not inset:0) so the scrim never darkens the header
   itself — it dims the page content below the drawer only. */
.nav-scrim { position: fixed; top: var(--header-h); right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,.42); opacity: 0;
  visibility: hidden; transition: opacity .3s var(--ease); z-index: 99; }
.nav-scrim.is-open { opacity: 1; visibility: visible; }

/* ---- Footer -------------------------------------------------- */
.site-footer { background: var(--navy-900); color: #93A4B8; padding-block: var(--sp-6) var(--sp-4); }
.site-footer a { color: #B9C6D6; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1.1fr; gap: var(--sp-4);
  padding-bottom: var(--sp-5); border-bottom: 1px solid rgba(255,255,255,.09); }
.footer-brand__logo { height: 32px; width: 130px; background: #fff;
  -webkit-mask: var(--logo-src) no-repeat left center / contain;
          mask: var(--logo-src) no-repeat left center / contain; margin-bottom: var(--sp-2); }
.footer-brand p { font-size: .92rem; max-width: 34ch; color: #7F91A6; }
.footer-col h4 { color: #fff; font-size: .74rem; font-family: var(--font-mono); font-weight: 900;
  letter-spacing: .07em; text-transform: uppercase; margin-bottom: var(--sp-2); }
.footer-col ul { display: flex; flex-direction: column; gap: .6rem; font-size: .92rem; }
.footer-contact { font-style: normal; font-size: .92rem; line-height: 1.9; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2);
  padding-top: var(--sp-3); font-size: .82rem; color: #6D7F94; }
.footer-bottom__links { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* ---- Forms ------------------------------------------------- */
.form-field { margin-bottom: var(--sp-3); }
.form-field label { display: block; font-family: var(--font-display); font-weight: 500;
  font-size: .9rem; color: var(--text-strong); margin-bottom: .45rem; }
.form-field .req { color: var(--navy-600); }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; padding: .8rem .95rem; border: 1px solid var(--border-strong);
  border-radius: var(--radius); font: inherit; font-size: .96rem; color: var(--ink-900);
  background: #fff; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: none; border-color: var(--navy-600); box-shadow: 0 0 0 3px rgba(30,75,120,.12); }
.form-note { font-size: .82rem; color: var(--text-muted); }

/* ---- Theme toggle (light / dark) --------------------------- */
.theme-toggle {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 100px;
  border: 1px solid #E2E2E2; display: grid; place-items: center;
  color: var(--nav-grey); background: transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.theme-toggle:hover { color: var(--nav-blue); border-color: var(--nav-blue); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
/* Mobile copy of the toggle — .header-actions is hidden on phones,
   so this keeps the dark-mode button in the header next to the burger.
   Sits right of the burger; z-index keeps it clickable over the nav. */
.theme-toggle--mobile { display: none; margin-left: .35rem; position: relative; z-index: 101; }
@media (max-width: 992px) { .theme-toggle--mobile { display: grid; } }
:root[data-theme="dark"] .theme-toggle--mobile { border-color: #2C3848; }

/* Mobile copy of the cart trigger — .header-actions (which holds the
   desktop cart button) is hidden on phones, so without this the inquiry
   list is unreachable from the header on mobile. Same pattern as
   .theme-toggle--mobile above. */
.icon-btn--mobile { display: none; margin-left: .35rem; position: relative; z-index: 101; }
@media (max-width: 992px) { .icon-btn--mobile { display: grid; } }

/* ============================================================
   DARK MODE overrides for header / footer / forms
   ============================================================ */
:root[data-theme="dark"] .site-header { background: #0D1219; border-bottom-color: #1D2734; }
:root[data-theme="dark"] .site-header.is-scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.55); border-bottom-color: transparent; }
:root[data-theme="dark"] .brand__logo--mask { background: #FFFFFF; }
:root[data-theme="dark"] .lang, :root[data-theme="dark"] .theme-toggle,
:root[data-theme="dark"] .icon-btn, :root[data-theme="dark"] .header-search__input { border-color: #2C3848; }
:root[data-theme="dark"] .header-search__input { background-color: #121A25; color: #F3F6FA; }
:root[data-theme="dark"] .nav-scrim { background: rgba(0,0,0,.62); }
:root[data-theme="dark"] .form-field input, :root[data-theme="dark"] .form-field textarea,
:root[data-theme="dark"] .form-field select { background: #121A25; color: #F3F6FA; border-color: #2C3848; }

@media (max-width: 992px) {
  :root[data-theme="dark"] .nav { background: #0D1219; border-left-color: #1D2734; }
  :root[data-theme="dark"] .nav__link { border-bottom-color: #1D2734; }
}


/* ---- Footer im Stil der 4Tex-Visitenkarte (wie www.4tex.at) ---- */
.site-footer--card{position:relative;isolation:isolate;background:linear-gradient(rgba(7,26,47,.72),rgba(7,26,47,.72)),url("../../../images/footer/4tex-footer-motif.svg") center 30%/auto 150% no-repeat,linear-gradient(180deg,#2e5679 0%,#0c2b4f 100%);}
.site-footer--card::before{content:"";position:absolute;left:50%;top:54.75%;width:400px;aspect-ratio:278.48/178.81;transform:translate(-50%,-50%);background:url("../../../images/footer/4tex-footer-logo.svg") center/contain no-repeat;opacity:1;z-index:-1;pointer-events:none;}
@media (min-width: 1400px){.site-footer--card .footer-grid{grid-template-columns:1.5fr 1.5fr 400px 1.5fr 1.5fr;}.site-footer--card .footer-grid>:nth-child(3){grid-column:4;}.site-footer--card .footer-grid>:nth-child(4){grid-column:5;}}
@media (min-width: 1201px) and (max-width: 1399px){.site-footer--card::before{display:none;}}
@media (max-width: 1200px){.site-footer--card{background-size:auto,70% auto,auto;background-position:center,123.7% 80%,center;}.site-footer--card::before{display:none;}}
@media (max-width: 820px){.site-footer--card{background-size:auto,190% auto,auto;background-position:center,center 85%,center;}.site-footer--card::before{display:none;}}