/*
Theme Name:   Astra Child - Auvok
Theme URI:    https://auvok.com
Description:  Child theme di Astra per Auvok — guida allo shopping online. Identità visiva a blocchi di colore ispirata alla grafica curatoriale dei musei di design.
Author:       Auvok
Template:     astra
Version:      1.0.0
Text Domain:  auvok
*/

/* ==========================================================================
   0. DESIGN TOKENS
   Palette: nero industriale, blu Klein, giallo senape, carta.
   Display: Archivo (nero/900) — Utility/etichette: Space Mono.
   ========================================================================== */
:root{
  --auvok-ink:      #111111;
  --auvok-klein:    #0032a0;
  --auvok-mustard:  #e7b92b;
  --auvok-paper:    #f3efe4;
  --auvok-white:    #ffffff;
  --auvok-line:     rgba(17,17,17,0.14);

  --auvok-font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --auvok-font-body:    'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --auvok-font-mono:    'Space Mono', 'Courier New', monospace;

  --auvok-max: 1240px;
  --auvok-gutter: clamp(20px, 4vw, 56px);
}

/* ==========================================================================
   1. RESET / BASE
   ========================================================================== */
.auvok-page, .auvok-page *{ box-sizing:border-box; }
.auvok-page{
  font-family: var(--auvok-font-body);
  color: var(--auvok-ink);
  background: var(--auvok-white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
.auvok-page img{ max-width:100%; display:block; }
.auvok-page a{ color:inherit; text-decoration:none; }
.auvok-page ul{ margin:0; padding:0; list-style:none; }
.auvok-wrap{
  max-width: var(--auvok-max);
  margin: 0 auto;
  padding-left: var(--auvok-gutter);
  padding-right: var(--auvok-gutter);
}
.auvok-eyebrow{
  font-family: var(--auvok-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 700;
}
.auvok-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--auvok-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
  font-weight: 700;
  padding: 16px 26px;
  border: 2px solid var(--auvok-ink);
  background: var(--auvok-ink);
  color: var(--auvok-white);
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.auvok-btn:hover{ transform: translate(-3px,-3px); box-shadow: 5px 5px 0 var(--auvok-ink); }
.auvok-btn--mustard{ background: var(--auvok-mustard); border-color: var(--auvok-ink); color: var(--auvok-ink); }
.auvok-btn--mustard:hover{ box-shadow: 5px 5px 0 var(--auvok-ink); }
.auvok-btn--outline{ background: transparent; color: var(--auvok-white); border-color: var(--auvok-white); }
.auvok-btn--outline:hover{ box-shadow: 5px 5px 0 var(--auvok-white); }

/* ==========================================================================
   2. HEADER
   ========================================================================== */
.auvok-header{
  background: var(--auvok-ink);
  color: var(--auvok-white);
  position: sticky;
  top: 0;
  z-index: 999;
  border-bottom: 3px solid var(--auvok-mustard);
}
.auvok-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
  padding-top: 18px;
  padding-bottom: 18px;
}
.auvok-logo{
  font-family: var(--auvok-font-display);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.auvok-logo span{ color: var(--auvok-mustard); }
.auvok-nav ul{ display:flex; gap: 30px; }
.auvok-nav a{
  font-family: var(--auvok-font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.auvok-nav a:hover{ border-color: var(--auvok-mustard); color: var(--auvok-mustard); }
.auvok-header__cta{ flex-shrink:0; }
.auvok-burger{ display:none; background:none; border:2px solid var(--auvok-white); color:var(--auvok-white); font-family:var(--auvok-font-mono); font-size:12px; text-transform:uppercase; padding:10px 14px; }

/* ==========================================================================
   3. HERO
   ========================================================================== */
.auvok-hero{
  background: var(--auvok-klein);
  color: var(--auvok-white);
  padding: clamp(56px, 9vw, 120px) 0 clamp(48px, 7vw, 96px);
  overflow: hidden;
}
.auvok-hero__eyebrow{ color: var(--auvok-mustard); margin-bottom: 22px; }
.auvok-hero__title{
  font-family: var(--auvok-font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(42px, 8.4vw, 108px);
  line-height: 0.94;
  letter-spacing: -0.015em;
  margin: 0 0 28px;
}
.auvok-hero__title em{
  font-style: normal;
  background: var(--auvok-mustard);
  color: var(--auvok-ink);
  padding: 0 12px;
  display: inline-block;
}
.auvok-hero__row{
  display:flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
}
.auvok-hero__lead{
  max-width: 460px;
  font-size: 18px;
  color: rgba(255,255,255,0.88);
}
.auvok-hero__actions{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.auvok-hero__count{ font-family: var(--auvok-font-mono); font-size: 13px; color: var(--auvok-mustard); }

/* ==========================================================================
   4. MARQUEE STRIP
   ========================================================================== */
.auvok-marquee{
  background: var(--auvok-ink);
  color: var(--auvok-mustard);
  border-top: 3px solid var(--auvok-mustard);
  border-bottom: 3px solid var(--auvok-mustard);
  overflow: hidden;
  white-space: nowrap;
}
.auvok-marquee__track{
  display:inline-flex;
  animation: auvok-scroll 26s linear infinite;
  will-change: transform;
}
.auvok-marquee__track span{
  font-family: var(--auvok-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 14px;
  font-weight: 700;
  padding: 14px 28px;
}
@keyframes auvok-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .auvok-marquee__track{ animation: none; }
}

/* ==========================================================================
   5. SECTION HEADINGS (shared)
   ========================================================================== */
.auvok-section{ padding: clamp(56px, 8vw, 104px) 0; }
.auvok-section--paper{ background: var(--auvok-paper); }
.auvok-section--ink{ background: var(--auvok-ink); color: var(--auvok-white); }
.auvok-section__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 48px;
  border-bottom: 3px solid var(--auvok-ink);
  padding-bottom: 22px;
}
.auvok-section--ink .auvok-section__head{ border-color: var(--auvok-white); }
.auvok-section__title{
  font-family: var(--auvok-font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 8px 0 0;
}

/* ==========================================================================
   6. CATEGORIES — museum catalogue labels
   ========================================================================== */
.auvok-cat-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--auvok-ink);
  border: 2px solid var(--auvok-ink);
}
.auvok-cat{
  background: var(--auvok-white);
  padding: 34px 28px 30px;
  min-height: 240px;
  display:flex;
  flex-direction:column;
  justify-content: space-between;
  transition: background .18s ease, color .18s ease;
}
.auvok-cat:hover{ background: var(--auvok-ink); color: var(--auvok-white); }
.auvok-cat:hover .auvok-cat__num{ color: var(--auvok-mustard); }
.auvok-cat__num{
  font-family: var(--auvok-font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
}
.auvok-cat__name{
  font-family: var(--auvok-font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 26px;
  line-height: 1.05;
  margin: 26px 0 8px;
}
.auvok-cat__desc{ font-size: 14px; opacity: 0.75; }
.auvok-cat__arrow{ margin-top:18px; font-family: var(--auvok-font-mono); font-size: 13px; }

/* ==========================================================================
   7. PRODUCTS — catalogue cards with placeholder swatch
   ========================================================================== */
.auvok-prod-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.auvok-prod{
  border: 2px solid var(--auvok-ink);
  background: var(--auvok-white);
  display:flex;
  flex-direction:column;
}
.auvok-prod__media{
  aspect-ratio: 4/5;
  position: relative;
  border-bottom: 2px solid var(--auvok-ink);
  background-image: repeating-linear-gradient(135deg, rgba(17,17,17,0.06) 0 2px, transparent 2px 14px);
  overflow:hidden;
}
.auvok-prod__media img{ width:100%; height:100%; object-fit:cover; }
.auvok-prod__tag{
  position:absolute; top:10px; left:10px;
  background: var(--auvok-mustard);
  color: var(--auvok-ink);
  font-family: var(--auvok-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 9px;
  border: 1px solid var(--auvok-ink);
}
.auvok-prod__body{ padding: 18px 18px 20px; flex:1; display:flex; flex-direction:column; }
.auvok-prod__cat{ font-family: var(--auvok-font-mono); font-size: 11px; text-transform:uppercase; letter-spacing:0.06em; opacity:0.6; }
.auvok-prod__name{ font-family: var(--auvok-font-display); font-weight: 800; font-size: 17px; text-transform:uppercase; line-height:1.15; margin: 8px 0 14px; }
.auvok-prod__row{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; }
.auvok-prod__price{ font-family: var(--auvok-font-mono); font-weight:700; font-size: 15px; }
.auvok-prod__price del{ opacity:0.4; font-weight:400; margin-right:6px; }
.auvok-prod__link{ font-family: var(--auvok-font-mono); font-size: 12px; text-transform:uppercase; border-bottom: 2px solid var(--auvok-ink); }
.auvok-prod-grid + .auvok-center{ margin-top: 44px; }
.auvok-center{ text-align:center; }

/* ==========================================================================
   8. EDITORIAL BANNER
   ========================================================================== */
.auvok-banner{
  background: var(--auvok-mustard);
  color: var(--auvok-ink);
  padding: clamp(60px, 9vw, 120px) 0;
}
.auvok-banner__inner{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.auvok-banner__title{
  font-family: var(--auvok-font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(34px, 6.4vw, 78px);
  line-height: 0.98;
  max-width: 760px;
  margin:0;
}
.auvok-banner__title span{ -webkit-text-stroke: 2px var(--auvok-ink); color: var(--auvok-mustard); }

/* ==========================================================================
   9. WHY AUVOK — 3 columns on ink
   ========================================================================== */
.auvok-why-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(255,255,255,0.18);
  border-top: 2px solid rgba(255,255,255,0.18);
}
.auvok-why{ background: var(--auvok-ink); padding: 36px 30px; }
.auvok-why__num{ font-family: var(--auvok-font-mono); color: var(--auvok-mustard); font-size: 13px; }
.auvok-why__title{ font-family: var(--auvok-font-display); font-weight:900; text-transform:uppercase; font-size:22px; margin: 18px 0 12px; }
.auvok-why__text{ font-size: 14.5px; opacity: 0.78; max-width: 320px; }

/* ==========================================================================
   10. NEWSLETTER
   ========================================================================== */
.auvok-news{ background: var(--auvok-paper); }
.auvok-news__box{
  border: 3px solid var(--auvok-ink);
  padding: clamp(36px, 6vw, 64px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 40px;
  flex-wrap: wrap;
  background: var(--auvok-white);
}
.auvok-news__title{ font-family: var(--auvok-font-display); font-weight:900; text-transform:uppercase; font-size: clamp(24px,3.4vw,36px); max-width:420px; line-height:1.05; }
.auvok-news__text{ font-size:14px; opacity:0.7; margin-top:10px; max-width:420px; }
.auvok-news form{ display:flex; gap:0; flex: 1 1 360px; max-width: 420px; }
.auvok-news input[type="email"]{
  flex:1;
  border: 2px solid var(--auvok-ink);
  border-right:none;
  padding: 15px 16px;
  font-family: var(--auvok-font-body);
  font-size: 14px;
  background: var(--auvok-white);
}
.auvok-news input[type="email"]:focus{ outline: 3px solid var(--auvok-klein); outline-offset: -3px; }
.auvok-news button{ border-left:none; }

/* ==========================================================================
   11. FOOTER
   ========================================================================== */
.auvok-footer{ background: var(--auvok-ink); color: var(--auvok-white); padding: 64px 0 26px; }
.auvok-footer__top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,0.18); }
.auvok-footer__brand{ font-family: var(--auvok-font-display); font-weight:900; text-transform:uppercase; font-size:24px; }
.auvok-footer__brand span{ color: var(--auvok-mustard); }
.auvok-footer__tag{ font-size:13.5px; opacity:0.65; margin-top:14px; max-width:260px; }
.auvok-footer__label{ font-family: var(--auvok-font-mono); text-transform:uppercase; font-size:12px; letter-spacing:0.08em; color: var(--auvok-mustard); margin-bottom:16px; }
.auvok-footer__col li{ margin-bottom: 10px; font-size: 14px; opacity: 0.85; }
.auvok-footer__col a:hover{ color: var(--auvok-mustard); }
.auvok-footer__bottom{ display:flex; justify-content:space-between; align-items:center; padding-top: 22px; flex-wrap:wrap; gap:12px; }
.auvok-footer__bottom, .auvok-footer__bottom a{ font-family: var(--auvok-font-mono); font-size: 11.5px; opacity:0.6; text-transform:uppercase; letter-spacing:0.04em; }

/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */
@media (max-width: 980px){
  .auvok-cat-grid{ grid-template-columns: repeat(2,1fr); }
  .auvok-prod-grid{ grid-template-columns: repeat(2,1fr); }
  .auvok-why-grid{ grid-template-columns: 1fr; }
  .auvok-footer__top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px){
  .auvok-nav{ display:none; }
  .auvok-burger{ display:inline-block; }
  .auvok-header__cta{ display:none; }
  .auvok-cat-grid{ grid-template-columns: 1fr; }
  .auvok-prod-grid{ grid-template-columns: 1fr 1fr; gap: 14px; }
  .auvok-footer__top{ grid-template-columns: 1fr; }
  .auvok-news form{ max-width:100%; }
}