/* ==========================================================================
   TIOO marketing — header, mega menus, phone menu, language picker (v3:
   the bar spans the wide container, the menus open at its left edge).
   Markup: public_site/mkt/_header.html. Script: static/js/mkt/site.js.
   Hairline under the bar once scrolled, square-ish buttons, menus open with
   a fade + 4px slide (no bounce).
   ========================================================================== */

.mkt-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2), background var(--dur-2);
}
.mkt-header.is-scrolled { border-bottom-color: var(--line); background: rgba(255,255,255,.94); }
.mkt-header .mkt-container { position: relative; height: 100%; display: flex; align-items: center; gap: 12px; }
.logo { display: inline-flex; align-items: center; height: 32px; flex: none; }
.logo img { height: 24px; width: auto; }

/* basket link: bag + count, shown only when the basket holds something
   (.is-empty hides it; shop.js flips the class after an add). 44px on
   phones (next to the menu button), 40px with a mouse. */
.header-cart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius); border: 1px solid var(--line-2); background: #fff; color: var(--ink); flex: none; }
.header-cart svg { width: 20px; height: 20px; }
.header-cart__n { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.header-cart.is-empty { display: none; }
.header-cart:hover { border-color: var(--ink); }
@media (min-width: 1100px) { .header-cart { width: 40px; height: 40px; } }

/* desktop nav */
.nav { display: none; }
.header-cta { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.header-cta .btn { --h: 40px; font-size: 14.5px; padding: 0 14px; }
.header-cta .only-desktop { display: none; }
.header-cta .only-mobile { display: inline-flex; }
/* menu button: two lines (the lower one shorter) that turn into an X */
.menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius); border: 1px solid var(--line-2); background: #fff; flex: none; cursor: pointer; }
/* Menu button: three lines, the middle one shorter (reads as "menu").
   Open = an X; pressing it stretches the middle line. */
.burger { position: relative; width: 18px; height: 14px; display: block; }
.burger i { position: absolute; right: 0; width: 18px; height: 2px; border-radius: 1px; background: var(--ink); transition: transform var(--dur-1) var(--ease), width var(--dur-1) var(--ease), top var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease); }
.burger i:nth-child(1) { top: 0; }
.burger i:nth-child(2) { top: 6px; width: 11px; }
.burger i:nth-child(3) { top: 12px; }
.menu-toggle:hover .burger i:nth-child(2), .menu-toggle:active .burger i:nth-child(2) { width: 18px; }
.menu-toggle[aria-expanded="true"] .burger i { animation: none; }
.menu-toggle[aria-expanded="true"] .burger i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .burger i:nth-child(2) { width: 0; opacity: 0; transform: translateX(-6px); }
.menu-toggle[aria-expanded="true"] .burger i:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* First visit on a phone (once per visit, set in mkt/base.html, never with
   reduced motion): two lines draw in from the right, a third grows out of
   the middle, then it settles shorter with one small overshoot. ~1.15s. */
.burger-intro .burger i { animation-duration: .7s; animation-delay: .45s; animation-fill-mode: both; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
.burger-intro .burger i:nth-child(1) { animation-name: burger-top; }
.burger-intro .burger i:nth-child(2) { animation-name: burger-mid; }
.burger-intro .burger i:nth-child(3) { animation-name: burger-bot; }
@keyframes burger-top { 0% { width: 0; top: 3px; } 36% { width: 18px; top: 3px; } 64%, 100% { width: 18px; top: 0; } }
@keyframes burger-bot { 0%, 6% { width: 0; top: 9px; } 40% { width: 18px; top: 9px; } 64%, 100% { width: 18px; top: 12px; } }
@keyframes burger-mid { 0%, 36% { width: 0; right: 9px; opacity: 0; } 64% { width: 18px; right: 0; opacity: 1; } 84% { width: 9px; right: 0; } 100% { width: 11px; right: 0; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .burger i { transition: none; animation: none !important; } }

@media (min-width: 1100px) {
  .nav { display: flex; align-items: center; gap: 2px; margin-left: 20px; }
  .nav-item { position: relative; }
  .nav-item--wide { position: static; }
  .nav-link { display: inline-flex; align-items: center; gap: 5px; padding: 8px 11px; border-radius: var(--radius); font-size: 15px; font-weight: 500; color: var(--ink-2); background: none; border: 0; cursor: pointer; letter-spacing: -0.005em; }
  .nav-link:hover, .nav-item.is-open > .nav-link { color: var(--ink); background: var(--bg-2); }
  .nav-link svg { width: 11px; height: 11px; opacity: .55; transition: transform var(--dur-1); }
  .nav-item.is-open > .nav-link svg { transform: rotate(180deg); }
  .header-cta .only-desktop { display: inline-flex; }
  .header-cta .only-mobile { display: none; }
  .menu-toggle { display: none; }
}

/* ---- mega menu panels --------------------------------------------- */
.mega {
  display: none; position: absolute; left: 0; top: calc(100% + 8px); z-index: 60;
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-l);
  box-shadow: 0 16px 40px -20px rgba(10,11,15,.28);
}
/* Invisible bridge over the gap between the menu word and the panel, so the
   pointer can travel down without leaving the menu. The panel must NOT clip
   its overflow, or this bridge is cut off and the menu closes on the way
   down (2026-10-09 bug). */
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-item.is-open > .mega { display: grid; animation: mega-in var(--dur-2) var(--ease-out); }
@media (hover: hover) and (min-width: 1100px) {
  .nav-item:hover > .mega { display: grid; animation: mega-in var(--dur-2) var(--ease-out); }
}
@keyframes mega-in { from { opacity: 0; transform: translateY(-4px); } }
.mega--features, .mega--who { left: var(--gutter); top: calc(var(--header-h) - 6px); max-width: calc(100% - 2 * var(--gutter)); }
.mega--features { width: 1100px; grid-template-columns: 1fr 272px; }
.mega--who { width: 820px; grid-template-columns: 1fr 272px; }
.mega--resources { width: 320px; }
.mega-main { padding: 20px 22px 18px; min-width: 0; }
.mega-cols { display: grid; gap: 20px; grid-auto-flow: column; grid-auto-columns: 1fr; }
.mega .mega-h { font-family: var(--font-text); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin: 0 0 8px 8px; }
.mega ul { display: grid; gap: 1px; }
.mega-item { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; padding: 8px; border-radius: var(--radius); color: var(--ink); line-height: 1.3; transition: background var(--dur-1); }
.mega-item:hover { background: var(--bg-2); }
.mega-ic { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: var(--radius); display: grid; place-items: center; color: var(--ink-2); background: #fff; }
.mega-ic svg { width: 15px; height: 15px; }
.mega-item:hover .mega-ic { border-color: var(--ink); color: var(--ink); }
.mega-txt b { display: block; font-size: 14px; font-weight: 500; letter-spacing: -0.005em; }
.mega-txt small { display: block; font-size: 12.5px; color: var(--ink-4); margin-top: 2px; }
.mega--who .mega-item { align-items: center; }
.mega-foot { display: flex; gap: 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; }
.mega-foot a { color: var(--ink); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: var(--radius); }
.mega-foot a svg { width: 13px; height: 13px; transition: transform var(--dur-1); }
.mega-foot a:hover svg { transform: translateX(3px); }
.mega-foot a:hover { background: var(--bg-2); }

/* featured side panel */
.mega-side { background: var(--bg-2); border-left: 1px solid var(--line); border-radius: 0 var(--radius-l) var(--radius-l) 0; padding: 14px; display: grid; align-content: start; }
.mega-feat {
  display: flex; flex-direction: column; gap: 6px; padding: 18px;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink);
  transition: border-color var(--dur-1);
}
.mega-feat:hover { border-color: var(--ink); }
.mega-feat__k { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.mega-feat b { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin-top: 4px; }
.mega-feat small { font-size: 13px; color: var(--ink-3); line-height: 1.45; }
.mega-feat__cta { margin-top: auto; padding-top: 14px; font-size: 13.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.mega-feat__cta svg { width: 13px; height: 13px; transition: transform var(--dur-1); }
.mega-feat:hover .mega-feat__cta svg { transform: translateX(3px); }
.mega--who .mega-side { align-content: stretch; }
.mega-feat--photo { position: relative; padding: 0; overflow: hidden; background: var(--dark); min-height: 300px; justify-content: flex-end; }
.mega-feat--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .6s var(--ease); }
.mega-feat--photo:hover img { transform: scale(1.03); }
.mega-feat--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,9,12,.95) 0%, rgba(8,9,12,.6) 55%, rgba(8,9,12,.1) 100%); }
.mega-feat__body { position: relative; z-index: 1; padding: 16px; color: #fff; display: grid; gap: 4px; }
.mega-feat__body b { font-size: 17px; margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.mega-feat__body b svg { width: 14px; height: 14px; }
.mega-feat__body small { color: rgba(255,255,255,.76); }

/* ---- phone menu: full-screen panel --------------------------------- */
.mobile-nav { display: none; position: fixed; inset: var(--header-h) 0 0 0; z-index: 49; background: #fff; overflow: auto; overscroll-behavior: contain; }
.mobile-nav.is-open { display: block; animation: mega-in var(--dur-2) var(--ease-out); }
.mobile-nav__inner { padding: 4px var(--gutter) 40px; max-width: 640px; margin: 0 auto; }
.mobile-nav details { border-bottom: 1px solid var(--line); }
.mobile-nav summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 16px 2px; font-size: 22px; font-weight: 600; font-family: var(--font-display); letter-spacing: -0.02em; }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav summary svg { width: 16px; height: 16px; opacity: .5; transition: transform var(--dur-1); }
.mobile-nav details[open] summary svg { transform: rotate(180deg); }
/* inside an opened group: the same icon + label (+ description) rows as the
   desktop mega menus (.mega-item), 48px+ tall to tap */
.mobile-group { padding: 0 0 16px; }
.mobile-nav details ul { display: grid; gap: 2px; }
.mobile-nav details .mega-h { font-family: var(--font-text); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin: 12px 0 6px; }
.mobile-nav .mega-item { grid-template-columns: 34px 1fr; gap: 12px; padding: 8px 6px; margin: 0 -6px; min-height: 48px; align-items: center; }
.mobile-nav .mega-ic { width: 34px; height: 34px; }
.mobile-nav .mega-ic svg { width: 17px; height: 17px; }
.mobile-nav .mega-txt b { font-size: 16px; }
.mobile-nav .mega-txt small { font-size: 13px; }
.mobile-nav .mobile-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 10px 2px; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.mobile-nav .mobile-more svg { width: 13px; height: 13px; }
.mobile-nav .mobile-feat { margin-top: 14px; min-height: 180px; border-radius: var(--radius-l); }
.mobile-nav .mobile-feat .mega-feat__body b { font-size: 17px; }
.mobile-nav > .mobile-nav__inner > a.item { display: block; padding: 16px 2px; border-bottom: 1px solid var(--line); font-size: 22px; font-weight: 600; font-family: var(--font-display); letter-spacing: -0.02em; }
.mobile-nav .mobile-cta { display: grid; gap: 10px; margin-top: 24px; }
.mobile-nav .mobile-lang { margin-top: 24px; display: flex; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.mobile-nav .mobile-lang a, .mobile-nav .mobile-lang strong { padding: 6px 10px; border: 1px solid var(--line-2); border-radius: var(--radius); }
.mobile-nav .mobile-lang strong { background: var(--ink); color: #fff; border-color: var(--ink); }
body.menu-open { overflow: hidden; }

/* language picker (public_site/_lang_menu.html) in this header */
.mkt-header .site-lang__btn { color: var(--ink-2); border-color: var(--line-2); background: #fff; height: 36px; border-radius: var(--radius); }
.mkt-header .site-lang__btn:focus-visible { outline-color: var(--accent-ink); }
.mkt-header .site-lang__item { color: var(--ink) !important; }
.mkt-header .site-lang__item:hover { background: var(--bg-2); }
.mkt-header .site-lang__item--current { color: var(--accent-ink) !important; }
@media (max-width: 420px) { .mkt-header .site-lang { display: none; } }