/*
Theme Name: Alfio Flowers
Theme URI: https://www.alfioflowers.com/
Description: Tema su misura per Alfio Flowers, floral design per matrimoni ed eventi. Costruito sul rebranding di Studio Selvatico. Nessun page builder, nessuna dipendenza esterna.
Version: 1.2.1
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alfio-flowers
Tags: one-page, custom-colors, translation-ready
*/

/* =========================================================
   Alfio Flowers — Coming soon
   Palette e tipografia derivate dal rebranding (Studio Selvatico)
   ========================================================= */

@font-face {
  font-family: 'Open Sans';
  src: url('assets/fonts/opensans-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('assets/fonts/opensans-300.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('assets/fonts/opensans-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Questrial';
  src: url('assets/fonts/questrial-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #161311;
  --cream: #f3eee4;
  --cream-soft: rgba(243, 238, 228, 0.55);
  --cream-faint: rgba(243, 238, 228, 0.32);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: 'Open Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* La home e una composizione a schermo pieno, senza scroll.
   Le pagine interne restano a flusso normale. */
body.af-cover {
  --vh: 100svh;
  height: var(--vh);
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* La barra di amministrazione ruba spazio in altezza: la composizione
   deve tenerne conto, altrimenti sborda per chi e loggato. */
body.af-cover.admin-bar { --vh: calc(100svh - 32px); }

@media screen and (max-width: 782px) {
  body.af-cover.admin-bar { --vh: calc(100svh - 46px); }
}

a { color: inherit; text-decoration: none; }

a:focus-visible,
button:focus-visible {
  outline: 1px solid var(--cream);
  outline-offset: 4px;
}

/* ---------------------------------------------------------
   Stage: la tela 16:9 del progetto, scalata dentro la finestra
   --------------------------------------------------------- */
.stage {
  position: relative;
  width: min(100vw, calc(var(--vh, 100svh) * 16 / 9));
  height: min(var(--vh, 100svh), calc(100vw * 9 / 16));
  container-type: inline-size;
}

/* ---------------------------------------------------------
   Navigazione (solo tipografica: le pagine non esistono ancora)
   --------------------------------------------------------- */
.nav {
  position: absolute;
  top: 6.6%;
  left: 0;
  width: 100%;
  z-index: 4;
  font-size: clamp(8px, 0.687cqw, 14px);
  letter-spacing: 0.8em;
  text-transform: uppercase;
  line-height: 1;
}

.nav span,
.nav a {
  position: absolute;
  white-space: nowrap;
}

.af-cover .nav span,
.af-cover .nav a {
  opacity: 0;
  transform: translateY(-6px);
}

.nav .n-brand   { left: 6.233%; }
.nav .n-what    { left: 42.148%; }
.nav .n-about   { left: 72.296%; }
.nav .n-contact { left: 85.972%; }

/* voci non ancora attive: leggibili ma dichiaratamente inerti */
.nav span { color: var(--cream-faint); cursor: default; }
.nav .n-brand { color: var(--cream); }

.nav a {
  color: var(--cream);
  padding-bottom: 0.35em;
  background-image: linear-gradient(var(--cream), var(--cream));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.5s var(--ease);
}
.nav a:hover { background-size: calc(100% - 0.8em) 1px; }

/* ---------------------------------------------------------
   Riga di coda: dice a chi arriva cosa fa lo studio.
   Sta in fondo, nella posizione che prima occupavano i contatti.
   --------------------------------------------------------- */
.soon {
  position: absolute;
  bottom: 2.7%;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 4;
  margin: 0;
  opacity: 0;
}

.soon b {
  display: inline-block;
  font-weight: 300;
  font-size: clamp(9px, 0.94cqw, 19px);
  letter-spacing: 0.92em;
  text-indent: 0.92em;
  text-transform: uppercase;
  color: var(--cream);
}

.soon i {
  display: block;
  font-style: normal;
  font-weight: 300;
  font-size: clamp(7px, 0.6cqw, 12px);
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  color: var(--cream-faint);
}

/* ---------------------------------------------------------
   Collage: le sei cornici del layout originale.
   Le posizioni sono in % della tela 1920x1080 del file .ai
   --------------------------------------------------------- */
.collage {
  position: absolute;
  inset: 0;
  z-index: 3;
  /* Copre l'intero stage: senza questo intercetterebbe il mouse e il
     logotipo sottostante non sarebbe raggiungibile. */
  pointer-events: none;
}

.frame {
  position: absolute;
  margin: 0;
  overflow: hidden;
  will-change: transform;
}

/* Le cornici si sovrappongono: l'ordine e quello del progetto grafico. */

.frame-in {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transform: scale(0.94);
  will-change: transform, opacity;
  transition: opacity 0.7s var(--ease), transform 0.9s var(--ease);
  transition-delay: calc(var(--n, 0) * 0.055s);
}

.is-open .frame-in {
  opacity: 1;
  transform: scale(1);
}

.frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.frame img.is-on { opacity: 1; }

.f1 { left: 8.49%; top: 28.796%; width: 15.26%; height: 40.741%; z-index: 2; }
.f2 { left: 22.188%; top: 24.907%; width: 18.958%; height: 50.556%; z-index: 3; }
.f3 { left: 37.292%; top: 31.019%; width: 14.271%; height: 38.056%; z-index: 4; }
.f4 { left: 47.865%; top: 27.593%; width: 16.823%; height: 44.907%; z-index: 5; }
.f5 { left: 62.708%; top: 34.167%; width: 12.344%; height: 33.056%; z-index: 6; }
.f6 { left: 68.958%; top: 23.704%; width: 19.688%; height: 52.593%; z-index: 1; }

/* ---------------------------------------------------------
   Logotipo: tracciati vettoriali estratti dal file di Studio Selvatico,
   una lettera per gruppo cosi da poterle animare singolarmente
   --------------------------------------------------------- */
.mark {
  position: absolute;
  cursor: pointer;
  outline: none;
  left: 11.764%;
  top: 57.421%;
  width: 76.472%;
  z-index: 2;
}

.mark svg { display: block; width: 100%; height: auto; overflow: visible; }
.mark path { fill: var(--cream); }

.mark .ltr {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

/* A ingresso concluso le lettere restano nella posizione disegnata
   (transform: none) e da li rispondono all'apertura. */
.is-settled .mark .ltr {
  opacity: 1;
  transition: transform 0.85s var(--ease);
}

.is-spread .mark .ltr {
  transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--dr, 0deg));
}

/* Aprendosi il logotipo respira: si alza e rientra appena, cosi le
   lettere che si allargano non finiscono sopra i contatti. */
.is-settled .mark {
  transition: transform 0.85s var(--ease);
}

.is-open:not(.af-fisso) .mark {
  transform: translateY(-5%) scale(0.94);
}

/* Con le fotografie sempre a video e il collage ad alzarsi, e il logotipo
   passa davanti: il nome del cliente non va mai letto a meta. */
.af-fisso .collage {
  transform: translateY(-12%);
}

.af-fisso .mark {
  z-index: 4;
}

/* Allargandosi le lettere ruotano, e gli angoli scendono: un soffio in alto
   le tiene lontane dalla riga di coda. */
.af-fisso.is-spread .mark {
  transform: translateY(-3.4%);
}


/* ---------------------------------------------------------
   Sequenza di ingresso
   --------------------------------------------------------- */
.is-ready .nav span,
.is-ready .nav a {
  animation: fadeDown 0.9s var(--ease) forwards;
  animation-delay: calc(0.15s + var(--n, 0) * 0.06s);
}

.is-ready .soon {
  animation: fadeUp 1s var(--ease) 1.5s forwards;
}

@keyframes fadeDown {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------
   Verticale / mobile: la tela 16:9 non regge, si ricompone
   --------------------------------------------------------- */
@media (max-aspect-ratio: 9/10) {
  .stage {
    width: 100vw;
    height: var(--vh, 100svh);
  }

  .af-cover .nav { top: 5.5%; font-size: clamp(8px, 2.5vw, 11px); }
  .af-cover .nav .n-brand   { left: 8%; }
  .af-cover .nav .n-what,
  .af-cover .nav .n-about   { display: none; }
  .af-cover .nav .n-contact { left: auto; right: 8%; }

  /* In verticale restano tre scatti: di piu diventerebbero francobolli.
     Conservano il rapporto 2:3 degli originali. */
  .f1, .f3, .f5 { display: none; }
  .f2 { left: 7%;  top: 20%;   width: 40%; height: 31.5%; }
  .f4 { left: 40%; top: 27%;   width: 46%; height: 36%; }
  .f6 { left: 16%; top: 48.5%; width: 36%; height: 28%; }

  /* Il collage non si alza: in verticale c'e gia spazio fra scatti e nome. */
  .af-fisso .collage { transform: none; }

  .mark { left: 8%; top: auto; bottom: 14%; width: 84%; }

  .soon {
    top: auto;
    bottom: 5%;
    padding: 0 8%;
  }
  .soon b { font-size: clamp(11px, 3.4vw, 18px); }
  .soon i { font-size: clamp(8px, 2.3vw, 11px); line-height: 1.9; }
}

/* ---------------------------------------------------------
   Accessibilita: nessun movimento se l'utente non lo vuole
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .nav span, .nav a, .soon, .frame, .frame-in, .mark, .mark .ltr {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .frame img { transition: none; }
}


/* ---------------------------------------------------------
   Pagine interne
   Impianto essenziale, in attesa delle sezioni vere.
   --------------------------------------------------------- */
.doc {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(4rem, 12vw, 9rem) 1.5rem clamp(3rem, 8vw, 6rem);
}

.doc-center { text-align: center; }

.doc-title {
  margin: 0 0 1.5em;
  font-weight: 300;
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
}

.doc-body {
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(243, 238, 228, 0.82);
}

.doc-body a {
  border-bottom: 1px solid var(--cream-faint);
  transition: border-color 0.3s var(--ease);
}
.doc-body a:hover { border-color: var(--cream); }

.doc-body img { max-width: 100%; height: auto; }


/* =========================================================
   LE PAGINE INTERNE
   Stessa fascia di navigazione della home, contenuto sotto.
   ========================================================= */

.sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  background: var(--ink);
  container-type: inline-size;
}

.admin-bar .sheet { min-height: calc(100svh - 32px); }

@media screen and (max-width: 782px) {
  .admin-bar .sheet { min-height: calc(100svh - 46px); }
}

/* La fascia in cima: la navigazione vi sta dentro, centrata. */
.sheet > .nav {
  position: relative;
  top: 0;
  flex: 0 0 auto;
  height: clamp(62px, 9.4cqw, 112px);
  z-index: 6;
}

.sheet > .nav span,
.sheet > .nav a {
  top: 50%;
  transform: translateY(-50%);
}

/* La voce della pagina aperta resta sottolineata. */
.nav .is-here {
  color: var(--cream);
  background-image: linear-gradient(var(--cream), var(--cream));
  background-size: calc(100% - 0.8em) 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 0.35em;
}

.sheet .vuoto {
  margin: auto;
  padding: 2rem;
  font-weight: 300;
  font-size: clamp(11px, 1.1cqw, 15px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cream-faint);
}

/* ---------------------------------------------------------
   Weddings & Events — la texture di strisce
   --------------------------------------------------------- */
.strisce {
  flex: 1 1 auto;
  display: flex;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

.striscia {
  flex: var(--peso, 1) 1 0;
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
  opacity: 0;
  transition: flex-grow 0.65s var(--ease);
}

.strisce.is-ready .striscia {
  animation: strisciaIn 0.9s var(--ease) forwards;
  animation-delay: calc(var(--n, 0) * 0.07s);
}

@keyframes strisciaIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

.striscia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.5s var(--ease), transform 0.65s var(--ease);
}

/* Una striscia si allarga quando la si indica, le altre si stringono. */
@media (hover: hover) and (pointer: fine) {
  .strisce:hover .striscia { flex-grow: calc(var(--peso, 1) * 0.86); }
  .strisce:hover .striscia img { filter: brightness(0.62) saturate(0.85); }

  .strisce .striscia:hover { flex-grow: calc(var(--peso, 1) * 2.4); }
  .strisce .striscia:hover img { filter: none; transform: scale(1.02); }
}

.striscia:focus-visible {
  outline: 1px solid var(--cream);
  outline-offset: -3px;
}

/* ---------------------------------------------------------
   Il visore: la fotografia aperta, con le altre dell'evento
   --------------------------------------------------------- */
.visore-aperto { overflow: hidden; }

.visore {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
}

.visore[hidden] { display: none; }

.visore-fondo {
  position: absolute;
  inset: 0;
  background: rgba(10, 9, 8, 0.94);
  animation: fadeUp 0.35s var(--ease) forwards;
}

.visore-corpo {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0 clamp(52px, 8vw, 110px);
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  animation: visoreIn 0.5s var(--ease) forwards;
}

@keyframes visoreIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

.visore-corpo img {
  max-width: 100%;
  max-height: 76svh;
  object-fit: contain;
  display: block;
}

.visore-corpo figcaption {
  display: flex;
  align-items: baseline;
  gap: 1.4em;
  font-weight: 300;
  font-size: clamp(8px, 0.68cqw, 12px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cream-soft);
}

.visore-conta { color: var(--cream-faint); letter-spacing: 0.18em; }

.visore button {
  position: absolute;
  z-index: 2;
  border: 0;
  background: none;
  color: var(--cream-soft);
  cursor: pointer;
  line-height: 1;
  padding: 0.25em 0.45em;
  transition: color 0.3s var(--ease);
}

.visore button:hover { color: var(--cream); }
.visore button[hidden] { display: none; }

.visore-x {
  top: clamp(14px, 3vh, 34px);
  right: clamp(14px, 3vw, 38px);
  font-size: clamp(26px, 3vw, 38px);
}

.visore-prec,
.visore-succ {
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(34px, 4.4vw, 58px);
}

.visore-prec { left: clamp(4px, 2vw, 30px); }
.visore-succ { right: clamp(4px, 2vw, 30px); }

/* ---------------------------------------------------------
   Chi siamo
   --------------------------------------------------------- */
.about {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 0;
}

.about-foto {
  position: relative;
  min-height: 0;
  overflow: visible;
  background: #20201d;
}

.about-foto > img:first-child {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Lo scatto quadrato scavalca il bordo fra la fotografia e il testo. */
.about-quadro {
  position: absolute;
  top: 46%;
  right: -13%;
  width: 27%;
  aspect-ratio: 1;
  object-fit: cover;
  transform: translateY(-50%);
  z-index: 2;
}

.about-testo {
  display: flex;
  align-items: center;
  background: #ffffff;
  color: #161311;
  padding: clamp(2rem, 5cqw, 5rem) clamp(1.5rem, 6.2cqw, 6.2rem)
           clamp(2rem, 5cqw, 5rem) clamp(1.5rem, 12.2cqw, 12.2rem);
}

.about-corpo {
  font-weight: 400;
  font-size: clamp(14px, 1.18cqw, 18px);
  line-height: 1.62;
  text-align: justify;
  hyphens: auto;
}

.about-corpo p { margin: 0 0 1.5em; }
.about-corpo p:last-child { margin-bottom: 0; }
.about-corpo strong { font-weight: 700; }

/* ---------------------------------------------------------
   Contatti
   --------------------------------------------------------- */
.contatti {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.5rem, 5cqw, 5rem);
  padding: 0 clamp(1.5rem, 6.2cqw, 6.2rem) clamp(2.5rem, 9cqw, 7rem);
}

.contatti-col {
  margin: 0;
  font-weight: 500;
  font-size: clamp(20px, 3.1cqw, 46px);
  line-height: 1.3;
  color: var(--cream);
}

.contatti-dx { text-align: right; }

.contatti-riga { display: block; white-space: nowrap; }

.contatti-et { color: inherit; }

.contatti a {
  background-image: linear-gradient(var(--cream), var(--cream));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.45s var(--ease);
}

.contatti-dx a { background-position: 100% 100%; }
.contatti a:hover { background-size: 100% 1px; }

/* ---------------------------------------------------------
   Pagine interne su schermo stretto
   --------------------------------------------------------- */
@media (max-width: 860px) {

  .sheet > .nav {
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5em 1.6em;
    padding: 1.5rem 6% 1.2rem;
    font-size: clamp(8px, 2.4vw, 11px);
    letter-spacing: 0.42em;
    text-indent: 0.42em;
  }

  .sheet > .nav span,
  .sheet > .nav a {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
  }

  .sheet > .nav .n-brand {
    flex: 0 0 100%;
    text-align: center;
    margin-bottom: 0.2em;
  }

  /* Meno strisce, piu larghe: sotto una certa misura non si leggono. */
  .striscia:nth-child(n + 7) { display: none; }

  .strisce .striscia:hover { flex-grow: var(--peso, 1); }
  .strisce:hover .striscia img { filter: none; }

  .about {
    grid-template-columns: 1fr;
  }

  .about-foto {
    aspect-ratio: 4 / 5;
    height: auto;
  }

  /* Impilati: scatto, quadrato sovrapposto, testo. */
  .about-quadro {
    top: auto;
    bottom: -14%;
    right: auto;
    left: 8%;
    width: 42%;
    transform: none;
  }

  .about-testo {
    padding: clamp(5rem, 22vw, 8rem) 8% 4rem;
  }

  .about-corpo { font-size: clamp(14px, 3.9vw, 17px); }

  .contatti {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 1.4rem;
    padding: 0 8% 14%;
  }

  .contatti-dx { text-align: left; }
  .contatti-dx a { background-position: 0 100%; }

  .contatti-col { font-size: clamp(19px, 6vw, 32px); }

  .visore-corpo { padding: 0 clamp(40px, 12vw, 70px); }
  .visore-corpo img { max-height: 68svh; }
}

@media (prefers-reduced-motion: reduce) {
  .striscia {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .striscia img { transition: none; }
  .visore-fondo, .visore-corpo { animation: none; }
}