/* layout.css - каркас Winhero FR: токены, шрифты, шапка, меню, крошки, CTA, футер.
   Цвета сняты с живого CSS winhero.com/fr. Концепт: "quête du héros" - рубленые углы, соты, золото. */

@font-face{ font-family:"Russo One"; src:url("fonts/russo-one-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Chakra Petch"; src:url("fonts/chakra-petch-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Chakra Petch"; src:url("fonts/chakra-petch-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Chakra Petch"; src:url("fonts/chakra-petch-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

/* ===================== Design tokens ===================== */
:root{
  --whr-bg:#0f1013;
  --whr-bg-alt:#13151e;
  --whr-surface:#1c1c24;
  --whr-surface-2:#23232f;
  --whr-surface-3:#2e2f3c;
  --whr-line:#484a54;
  --whr-text:#ffffff;
  --whr-text-soft:#e1e1eb;
  --whr-muted:#979798;
  --whr-gold:#ffd000;
  --whr-amber:#feb510;
  --whr-orange:#ff9500;
  --whr-lemon:#feed2d;
  --whr-red:#ff3246;
  --whr-light:#e1e1eb;
  --whr-ink:#0f1013;
  --whr-grad:linear-gradient(0deg,#ff9500,#feed2d 121.55%);
  --whr-grad-h:linear-gradient(77deg,#ffd000 -39.5%,#ff9500 51.54%);

  --whr-font-display:"Russo One", "Arial Black", system-ui, sans-serif;
  --whr-font-body:"Chakra Petch", "Segoe UI", system-ui, sans-serif;

  --whr-cut:14px;                 /* рубленый угол карточек */
  --whr-cut-sm:8px;
  --whr-radius:6px;
  --whr-header-h:64px;
  --whr-wrap:1200px;
  --whr-gutter:16px;
  --whr-ease:cubic-bezier(.16,1,.3,1);

  /* соты: фирменный мотив (такие же у окна входа на референсе) */
  --whr-hex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 1 55 16.5v31L28 63 1 47.5v-31z M28 63v34' fill='none' stroke='%23feb510' stroke-opacity='.13' stroke-width='1'/%3E%3C/svg%3E");
}

/* ===================== Reset ===================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--whr-header-h) + 16px); }
html, body{ margin:0; padding:0; }
body{
  background:var(--whr-bg); color:var(--whr-text-soft);
  font-family:var(--whr-font-body); font-size:17px; line-height:1.6;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
ul, ol{ margin:0; padding:0; }
a{ color:inherit; }
button{ font:inherit; }
:focus-visible{ outline:2px solid var(--whr-gold); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ transition:none !important; animation:none !important; }
}

.whr-skip{ position:absolute; left:-999px; top:8px; z-index:200; background:var(--whr-gold); color:var(--whr-ink); padding:10px 16px; font-weight:700; }
.whr-skip:focus{ left:16px; }
.whr-wrap{ width:100%; max-width:var(--whr-wrap); margin:0 auto; padding:0 var(--whr-gutter); }

/* ===================== CTA ===================== */
.whr-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:10px 22px;
  font-family:var(--whr-font-body); font-weight:700; font-size:16px; letter-spacing:.02em;
  text-decoration:none; text-align:center; line-height:1.15; cursor:pointer;
  clip-path:polygon(var(--whr-cut-sm) 0,100% 0,100% calc(100% - var(--whr-cut-sm)),calc(100% - var(--whr-cut-sm)) 100%,0 100%,0 var(--whr-cut-sm));
  transition:filter .2s var(--whr-ease), transform .2s var(--whr-ease);
  touch-action:manipulation;
}
.whr-cta:hover{ filter:brightness(1.08); }
.whr-cta:active{ transform:scale(.97); }
.whr-cta--primary{ background:var(--whr-grad); color:var(--whr-ink); }
.whr-cta--ghost{ position:relative; isolation:isolate; background:var(--whr-gold); color:var(--whr-gold); }
.whr-cta--ghost::before{ content:""; position:absolute; inset:2px; z-index:-1; background:var(--whr-ghost-bg, var(--whr-bg));
  clip-path:polygon(calc(var(--whr-cut-sm) - 1px) 0,100% 0,100% calc(100% - var(--whr-cut-sm) + 1px),calc(100% - var(--whr-cut-sm) + 1px) 100%,0 100%,0 calc(var(--whr-cut-sm) - 1px)); }
.whr-cta--ghost:hover{ color:var(--whr-lemon); }
.whr-cta--dark{ background:var(--whr-surface-3); color:var(--whr-text); }
.whr-cta--lg{ min-height:54px; padding:14px 30px; font-size:18px; }
.whr-cta__sub{ display:block; font-weight:600; font-size:13px; opacity:.8; }
.whr-cta--stack{ flex-direction:column; gap:2px; }

/* ===================== Header ===================== */
.whr-site-header{
  --whr-ghost-bg:#0f1013;
  position:sticky; top:0; z-index:50;
  background:rgba(15,16,19,.94);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(254,181,16,.55),transparent) 1;
}
.whr-header-inner{ display:flex; align-items:center; gap:12px; min-height:var(--whr-header-h); }
.whr-logo{ display:inline-flex; flex-shrink:0; padding:6px 0; }
.whr-logo__img{ width:98px; height:40px; }
.whr-header-actions{ order:1; margin-left:auto; display:flex; align-items:center; gap:8px; }
.whr-nav{ order:2; }
.whr-header-actions .whr-cta{ min-height:40px; padding:8px 14px; font-size:15px; }
.whr-header-actions .whr-cta--ghost{ display:none; }

/* ===================== Nav + бургер (CSS-only) ===================== */
.whr-nav__checkbox{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.whr-nav__toggle{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 11px; cursor:pointer;
  background:var(--whr-surface-2); border-radius:var(--whr-radius);
}
.whr-nav__toggle-bar{ display:block; height:2px; background:var(--whr-text); transition:transform .2s var(--whr-ease), opacity .2s; }
.whr-nav__checkbox:focus-visible + .whr-nav__toggle{ outline:2px solid var(--whr-gold); outline-offset:3px; }
.whr-nav__checkbox:checked + .whr-nav__toggle .whr-nav__toggle-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.whr-nav__checkbox:checked + .whr-nav__toggle .whr-nav__toggle-bar:nth-child(2){ opacity:0; }
.whr-nav__checkbox:checked + .whr-nav__toggle .whr-nav__toggle-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.whr-nav__list{
  display:none; list-style:none;
  position:absolute; left:0; right:0; top:100%;
  background:var(--whr-bg-alt); border-bottom:1px solid var(--whr-line);
  padding:8px var(--whr-gutter) 16px;
  max-height:calc(100dvh - var(--whr-header-h)); overflow-y:auto;
}
.whr-nav__checkbox:checked ~ .whr-nav__list{ display:block; }
.whr-nav__link{
  display:flex; align-items:center; min-height:48px; padding:0 4px;
  font-weight:600; text-decoration:none; color:var(--whr-text);
  border-bottom:1px solid var(--whr-surface-3);
}
.whr-nav__link:hover{ color:var(--whr-gold); }
.whr-nav__link--active{ color:var(--whr-gold); }
.whr-nav__item--login{ margin-top:12px; }
.whr-nav__item--login .whr-cta{ width:100%; }

@media (min-width:600px){
  .whr-header-actions .whr-cta--ghost{ display:inline-flex; }
  .whr-nav__item--login{ display:none; }
}
@media (min-width:1080px){
  .whr-header-inner{ gap:28px; }
  .whr-nav{ order:1; }
  .whr-header-actions{ order:2; }
  .whr-nav__toggle{ display:none; }
  .whr-nav__list{ display:flex; position:static; padding:0; background:none; border:0; gap:4px; max-height:none; overflow:visible; }
  .whr-nav__link{ min-height:44px; padding:0 12px; border:0; position:relative; font-size:15px; }
  .whr-nav__link--active::after{ content:""; position:absolute; left:12px; right:12px; bottom:4px; height:2px; background:var(--whr-grad-h); }
}

/* ===================== Breadcrumbs ===================== */
.whr-breadcrumbs{ padding:14px 0 0; font-size:14px; color:var(--whr-muted); }
.whr-breadcrumbs__list{ list-style:none; display:flex; flex-wrap:wrap; gap:4px 8px; }
.whr-breadcrumbs__item{ display:inline-flex; align-items:center; gap:8px; }
.whr-breadcrumbs__item + .whr-breadcrumbs__item::before{ content:""; width:6px; height:6px; border-right:2px solid var(--whr-amber); border-top:2px solid var(--whr-amber); transform:rotate(45deg); }
.whr-breadcrumbs a{ color:var(--whr-text-soft); text-decoration:underline; text-decoration-color:var(--whr-line); text-underline-offset:3px; }
.whr-breadcrumbs a:hover{ color:var(--whr-gold); }
.whr-breadcrumbs [aria-current="page"]{ color:var(--whr-muted); }

/* ===================== Footer ===================== */
.whr-site-footer{
  --whr-ghost-bg:var(--whr-bg-alt); background:var(--whr-bg-alt) var(--whr-hex); border-top:1px solid var(--whr-surface-3);
  font-size:15px; color:var(--whr-text-soft);
}
.whr-footer-inner{ display:grid; gap:32px; padding:48px var(--whr-gutter) 24px; max-width:var(--whr-wrap); margin:0 auto; }
.whr-footer-brand p{ margin:14px 0 18px; color:var(--whr-muted); max-width:36ch; }
.whr-footer-ctas{ display:flex; flex-wrap:wrap; gap:10px; }
.whr-footer-nav{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.whr-footer-nav__title{ margin:0 0 10px; font-family:var(--whr-font-display); font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:var(--whr-gold); }
.whr-footer-nav__list{ list-style:none; display:grid; gap:2px; }
.whr-footer-nav__link{ display:inline-flex; align-items:center; min-height:36px; text-decoration:none; }
.whr-footer-nav__link:hover{ color:var(--whr-gold); text-decoration:underline; }
.whr-footer-bottom{ grid-column:1/-1; display:grid; gap:12px; padding-top:20px; border-top:1px solid var(--whr-surface-3); color:var(--whr-muted); font-size:14px; }
.whr-footer-bottom p{ margin:0; }
.whr-footer-bottom address{ font-style:normal; }
.whr-age{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:2px solid var(--whr-red); border-radius:50%; color:var(--whr-text); font-weight:700; font-size:14px; flex-shrink:0; }
.whr-footer-warn{ display:flex; gap:12px; align-items:center; }
@media (min-width:860px){
  .whr-footer-inner{ grid-template-columns:1.2fr 1fr; padding-top:56px; }
}