/*
Theme Name: Y-81
Theme URI: https://y-81.com
Author: Y-81
Description: Tema ufficiale Y-81 SS26 — Born in '81. Made for now.
Version: 1.2.0
License: GNU General Public License v2 or later
Text Domain: y81
*/

/* ─── RESET ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: hidden; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; }

/* ─── TOKENS ──────────────────────────────────────── */
:root {
  --cream:  #F2EFE8;
  --black:  #0D0D0D;
  --red:    #E8000A;
  --orange: #C85A2A;
  --grey:   #8B9299;
  --navy:   #1C2535;
  --beige:  #D4C8B0;
  --blue:   #A8C4D8;
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --border:      1px solid #111;
  --border-dark: 1px solid #222;
  --text-xs:   0.75rem;
  --text-sm:   0.9375rem;
  --text-base: 1rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2.5rem;
  --text-3xl:  3.5rem;
  --text-4xl:  4.5rem;
}

/* ─── BASE ────────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--black);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* L'hero va sotto la nav flottante — nessun padding-top,
   la nav è trasparente quindi si sovrappone naturalmente */
.hero { margin-top: 0; }

/* Le altre pagine hanno bisogno di spazio per la nav */
body:not(.home) > .site-nav + * { padding-top: 0; }
.lookbook-page,
.about-page,
.contact-page { padding-top: 64px; }

/* ─── NAV ─────────────────────────────────────────── */
.site-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  background: rgba(242,239,232,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  flex-shrink: 0;
}
.site-nav__left {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.site-nav__home {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--black);
  line-height: 1;
  transition: color 0.2s;
}
.site-nav__home:hover { color: var(--red); }
.site-nav__logo {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--red);
  letter-spacing: 0.04em;
}

/* icona matita WordPress — nascosta ovunque */
.site-nav img,
.site-nav svg,
.site-nav .ab-icon,
.site-nav .dashicons,
.site-nav .wp-menu-image,
.site-nav .menu-item-has-children > a > img,
#wpadminbar { display: none !important; }

.site-nav__hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
}
.site-nav__hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--black);
}
.site-nav__links { display: none; list-style: none; }
.site-nav__links.is-open {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  background: var(--black);
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  z-index: 200;
}
.site-nav__links.is-open a {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream);
}
.site-nav__links.is-open a:hover { color: var(--red); }

@media (min-width: 768px) {
  .site-nav { padding: 1.25rem 2rem; }
  .site-nav__hamburger { display: none; }
  .site-nav__links { display: flex; gap: 2rem; }
  .site-nav__links a {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--black);
    transition: color 0.2s;
  }
  .site-nav__links a:hover { color: var(--red); }
  /* nasconde qualsiasi elemento non-testo nei link nav (icona matita) */
  .site-nav__links a > *:not(span):not(br) { display: none !important; }
  .site-nav__links .menu-item a { display: inline-flex; align-items: center; gap: 0; }
}

/* ─── HERO ────────────────────────────────────────── */
.hero {
  background: var(--black);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  flex-shrink: 0;
  width: 100%;
  margin: 0;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(13,13,13,0.8) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}
.hero__wordmark {
  display: block;
  position: relative;
  z-index: 2;
  font-family: var(--font-sans);
  font-size: clamp(5rem, 22vw, 14rem);
  font-weight: 300;
  color: var(--cream);
  letter-spacing: -0.06em;
  line-height: 0.85;
  padding: 1.5rem 1.25rem 0;
}
.hero__bottom {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem 1.25rem;
}
.hero__tagline {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--cream);
  font-style: italic;
  letter-spacing: 0.02em;
}
.hero__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242,239,232,0.55);
  line-height: 2;
}
@media (min-width: 768px) {
  .hero__wordmark { padding: 2rem 2rem 0; }
  .hero__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    padding: 2rem;
  }
  .hero__meta { text-align: right; }
}

/* ─── LOOKS ───────────────────────────────────────── */
.looks-section {
  background: var(--cream);
  border-top: var(--border);
  flex-shrink: 0;
}
.looks-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: var(--border);
  background: var(--cream);
}
.looks-header__label {
  font-family: var(--font-mono);
  font-size: var(--text-base); /* era text-xs — ora leggibile */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #666;
  font-weight: 400;
}
.looks-header__nav { display: flex; }
.looks-btn {
  padding: 0.6rem 1.25rem;
  border-left: var(--border);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  color: var(--black);
  transition: background 0.15s, color 0.15s;
  line-height: 1;
}
.looks-btn:first-child { border-left: none; }
.looks-btn:hover { background: var(--black); color: var(--cream); }
.looks-btn:disabled { opacity: 0.2; pointer-events: none; }

.looks-track-wrap { overflow: hidden; }
.looks-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform;
}

/* ─── LOOK SLIDE — mobile ─────────────────────────── */
.look-slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1fr;
}
.look-slide__photo {
  overflow: hidden;
  position: relative;
  aspect-ratio: 4 / 5;
}
.look-slide__photo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.look-slide__spacer { display: none; }

/* ─── LOOK SLIDE — desktop ────────────────────────── */
@media (min-width: 768px) {
  .look-slide {
    grid-template-columns: 58fr 42fr;
    height: 90vh; /* altezza fissa, no min-height che causa overflow */
  }
  .look-slide--rev { grid-template-columns: 42fr 58fr; }

  .look-slide__photo {
    aspect-ratio: auto;
    height: 90vh;
    border-right: var(--border);
    overflow: hidden;
  }
  .look-slide--rev .look-slide__photo {
    order: 2;
    border-right: none;
    border-left: var(--border);
  }

  /* spacer: numero centrato come watermark */
  .look-slide__spacer {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: var(--cream);
    height: 90vh;
    overflow: hidden;
  }
  .look-slide--rev .look-slide__spacer { order: 1; }

  .look-slide__num {
    font-family: var(--font-sans);
    font-size: clamp(10rem, 20vw, 20rem);
    font-weight: 300;
    color: #e9e7e1;
    letter-spacing: -0.06em;
    line-height: 1;
    user-select: none;
  }
}

/* ─── MANIFESTO ───────────────────────────────────── */
.manifesto {
  background: var(--orange);
  padding: 3rem 1.25rem;
  flex-shrink: 0;
}
.manifesto__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #e8917a;
  margin-bottom: 1.75rem;
}
.manifesto__text {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.85;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cream);
  max-width: 600px;
}
@media (min-width: 768px) {
  .manifesto { padding: 5rem 2rem; }
  .manifesto__text { font-size: var(--text-base); }
}

/* ─── ABOUT (homepage) ────────────────────────────── */
.about {
  background: var(--black);
  display: grid;
  grid-template-columns: 1fr;
  flex-shrink: 0;
}
.about__left {
  padding: 2.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  border-bottom: var(--border-dark);
}
.about__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #444;
}
.about__quote {
  font-size: var(--text-xl);
  font-weight: 300;
  color: var(--cream);
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.about__body {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.9;
  color: #555;
}
.about__right {
  padding: 2.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.about__principle { border-top: var(--border-dark); padding-top: 1rem; }
.about__principle-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.35rem;
}
.about__principle-title {
  font-size: var(--text-lg);
  font-weight: 300;
  color: var(--cream);
}
@media (min-width: 768px) {
  .about { grid-template-columns: 1fr 1fr; }
  .about__left {
    border-bottom: none;
    border-right: var(--border-dark);
    padding: 3rem 2rem;
    justify-content: space-between;
  }
  .about__right { padding: 3rem 2rem; justify-content: flex-end; }
  .about__quote { font-size: clamp(var(--text-xl), 2.5vw, 1.5rem); }
}

/* ─── FOOTER ──────────────────────────────────────── */
.site-footer {
  margin-top: auto;
  border-top: var(--border-dark);
  padding: 1rem 1.25rem;
  text-align: right;
  flex-shrink: 0;
  background: var(--black);
}
.site-footer__copy {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: rgba(242,239,232,0.4);
}
/* pagine con footer chiaro */
.site-footer--light {
  background: var(--cream);
  border-top: var(--border);
}
.site-footer--light .site-footer__copy { color: #bbb; }
@media (min-width: 768px) { .site-footer { padding: 1rem 2rem; } }