/* =========================================================================
   REFORMER CLUB — LAYOUT (header, menu, page-title, footer)
   Legge sempre dai design token definiti in style.css — nessun valore
   hardcoded qui che non sia già una variabile --rc-*.
   ========================================================================= */

/* -------------------------------------------------------------------------
   HEADER
   ------------------------------------------------------------------------- */
.rc-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--rc-white);
  border-bottom: var(--rc-border-w) solid var(--rc-neutro-light);
  height: var(--rc-header-h);
  display: flex;
  align-items: center;
  transition: box-shadow .2s ease;
}
.rc-header.is-scrolled{
  box-shadow: var(--rc-shadow-md);
}
.rc-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rc-space-4);
}
.rc-header__logo{ display: flex; align-items: center; }
.rc-header__logo img{ max-height: 44px; width: auto; }
.rc-header__logo-img{ max-height: 44px; width: auto; }

/* Wordmark testuale — logo di default se non caricato un'immagine da Personalizza */
.rc-wordmark{ display: flex; flex-direction: column; line-height: 1; }
.rc-wordmark__main{
  font-family: var(--rc-font);
  font-weight: var(--rc-weight-bold);
  font-size: 1.45rem;
  letter-spacing: 0.01em;
  color: var(--rc-navy);
}
.rc-wordmark__accent{ color: var(--rc-rosa); }
.rc-wordmark__sub{
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--rc-neutro);
  margin-top: 4px;
  font-weight: var(--rc-weight-medium);
}
.rc-wordmark--footer .rc-wordmark__main{ font-size: 1.4rem; }

/* Nav + auth */
.rc-nav{ display: flex; align-items: center; gap: var(--rc-space-7); }
.rc-nav__list{
  display: flex;
  align-items: center;
  gap: var(--rc-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.rc-nav__list a{
  color: var(--rc-navy);
  font-size: var(--rc-text-sm);
  letter-spacing: 0.01em;
  font-weight: var(--rc-weight-medium);
  padding: var(--rc-space-2) 0;
  display: inline-block;
}

/* Voce di primo livello: sottolineatura rosa che scorre in hover; la
   stessa sottolineatura resta "aperta" in modo fisso sulla voce attiva
   (classe assegnata automaticamente da WordPress alla pagina corrente). */
.rc-nav__list > li > a{
  position: relative;
}
.rc-nav__list > li > a::before{
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--rc-rosa);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.rc-nav__list > li > a:hover::before{
  transform: scaleX(1);
}
.rc-nav__list > li.current-menu-item > a,
.rc-nav__list > li.current_page_item > a,
.rc-nav__list > li.current-menu-ancestor > a,
.rc-nav__list > li.current_page_ancestor > a{
  color: var(--rc-rosa-deep);
}
.rc-nav__list > li.current-menu-item > a::before,
.rc-nav__list > li.current_page_item > a::before,
.rc-nav__list > li.current-menu-ancestor > a::before,
.rc-nav__list > li.current_page_ancestor > a::before{
  transform: scaleX(1);
  background: var(--rc-rosa-deep);
}

/* Sottomenu (dropdown) — livello 2 */
.rc-nav__list li{ position: relative; }

/* Freccia di espansione sulle voci con sottomenu (aggiunta da WordPress
   con la classe .menu-item-has-children; :has() come rete di sicurezza
   per il menu di fallback statico). */
.rc-nav__list li.menu-item-has-children > a::after,
.rc-nav__list li:has( > ul ) > a::after{
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 7px;
  margin-bottom: 1px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s ease;
  opacity: 0.7;
}
.rc-nav__list li.menu-item-has-children:hover > a::after,
.rc-nav__list li:has( > ul ):hover > a::after{
  transform: rotate(225deg);
  margin-bottom: -3px;
}

.rc-nav__list ul{
  list-style: none;
  margin: 0;
  padding: var(--rc-space-2) 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  background: var(--rc-white);
  border: var(--rc-border-w) solid var(--rc-neutro-light);
  box-shadow: var(--rc-shadow-sm);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.rc-nav__list li:hover > ul,
.rc-nav__list li:focus-within > ul{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.rc-nav__list ul a{
  color: var(--rc-ink);
  font-size: var(--rc-text-sm);
  padding: var(--rc-space-2) var(--rc-space-4);
  width: 100%;
}
.rc-nav__list ul a::after{ display: none; } /* niente freccia sulle voci di 2° livello */
.rc-nav__list ul a:hover{ color: var(--rc-navy); background: var(--rc-crema); }

.rc-nav__auth{ display: flex; align-items: center; gap: var(--rc-space-3); }

/* Pulsante "Prenota la prova gratuita" + icona area riservata */
.rc-nav__list a,
.rc-wordmark__main{ white-space: nowrap; }
.rc-header__logo{ flex-shrink: 0; }
.rc-nav{ gap: var(--rc-space-6); }
.rc-nav__list{ gap: 22px; }
.rc-nav__auth .rc-cta{
  white-space: nowrap;
  padding: 12px 16px;
  font-size: 0.75rem;
}
.rc-user{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rc-space-2);
  width: 44px;
  height: 44px;
  border: var(--rc-border-w) solid var(--rc-neutro-light);
  color: var(--rc-navy);
  transition: border-color .2s ease;
}
.rc-user:hover{ border-color: var(--rc-navy); color: var(--rc-navy); }
.rc-user__label{ display: none; }

/* Tra 901 e 1100px il menu occupa tutto lo spazio: il pulsante prova
   resta visibile in Hero e nelle sezioni, qui si nasconde solo in testata. */
@media (min-width: 901px) and (max-width: 1100px){
  .rc-nav__auth .rc-cta{ display: none; }
}

/* Hamburger toggle (mobile) */
.rc-header__toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.rc-header__toggle-bar{
  height: 2px;
  width: 100%;
  background: var(--rc-navy);
  transition: transform .2s ease, opacity .2s ease;
}
.rc-header__toggle.is-open .rc-header__toggle-bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.rc-header__toggle.is-open .rc-header__toggle-bar:nth-child(2){ opacity: 0; }
.rc-header__toggle.is-open .rc-header__toggle-bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* -------------------------------------------------------------------------
   RESPONSIVE — menu a tendina su mobile
   ------------------------------------------------------------------------- */
@media (max-width: 900px){
  .rc-header__toggle{ display: flex; }

  .rc-nav{
    position: fixed;
    top: var(--rc-header-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--rc-navy);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--rc-space-5) var(--rc-container-pad);
    gap: var(--rc-space-5);
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform .25s ease, opacity .25s ease, visibility .25s ease;
    overflow-y: auto;
  }
  .rc-nav.is-open{
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }
  .rc-nav__list{
    flex-direction: column;
    align-items: flex-start;
    gap: var(--rc-space-3);
    width: 100%;
  }
  .rc-nav__list a{ font-size: var(--rc-text-base); color: var(--rc-white); }
  .rc-nav__list a:hover{ color: var(--rc-rosa-light); }
  .rc-nav__list ul{
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
    padding-left: var(--rc-space-3);
  }
  .rc-nav__list ul a{ color: var(--rc-neutro-light); padding-block: var(--rc-space-1); }
  .rc-nav__list ul a:hover{ color: var(--rc-rosa-light); }
  .rc-nav__auth{
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: var(--rc-space-2);
    padding-top: var(--rc-space-4);
    border-top: 1px solid rgba(255,255,255,.15);
  }
  .rc-nav__auth .rc-cta{ width: 100%; padding: 14px 20px; }
  .rc-nav__auth .rc-user{
    width: 100%;
    height: auto;
    padding: 13px 20px;
    color: var(--rc-white);
    border-color: rgba(255,255,255,.35);
  }
  .rc-nav__auth .rc-user:hover{ border-color: rgba(255,255,255,.7); color: var(--rc-white); }
  .rc-nav__auth .rc-user__label{
    display: inline;
    font-size: var(--rc-text-xs);
    font-weight: var(--rc-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  body.rc-menu-open{ overflow: hidden; }
}

/* -------------------------------------------------------------------------
   PAGE TITLE — banner per pagine interne (non in Home)
   ------------------------------------------------------------------------- */
.rc-page-title{
  background: var(--rc-navy);
  padding: var(--rc-space-6) 0 var(--rc-space-5);
  /* Sempre a piena larghezza (bordo a bordo), indipendentemente
     dall'impostazione "Container" che GeneratePress permette di
     scegliere per singola pagina — coerenza garantita ovunque. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.rc-page-title .rc-eyebrow{ margin-bottom: var(--rc-space-2); font-size: var(--rc-text-base); }
.rc-breadcrumb a{ color: var(--rc-rosa); }
.rc-breadcrumb a:hover{ color: var(--rc-rosa-light); }
.rc-breadcrumb__sep{ color: var(--rc-neutro-light); margin: 0 2px; }
.rc-breadcrumb [aria-current="page"]{ color: var(--rc-rosa); }
.rc-page-title__heading{
  color: var(--rc-white);
  margin: 0;
  font-size: clamp(1.85rem, 3vw, 2.5rem);
}

@media (max-width: 600px){
  .rc-page-title{ padding: var(--rc-space-6) 0 var(--rc-space-5); }
}

/* -------------------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------------------- */
.rc-footer{
  background: var(--rc-neutro-light);
  padding-top: var(--rc-space-8);
}
.rc-footer__grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--rc-space-6);
  padding-bottom: var(--rc-space-7);
}
.rc-footer__brand{ max-width: 320px; }
.rc-footer__tagline{
  color: var(--rc-neutro);
  font-size: var(--rc-text-sm);
  margin-top: var(--rc-space-3);
}
.rc-footer__social-list{ display: flex; align-items: center; gap: var(--rc-space-3); margin-top: var(--rc-space-4); }
.rc-footer__social{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rc-neutro);
  transition: color .2s ease;
}
.rc-footer__social:hover{ color: var(--rc-navy); }
.rc-footer__social-icon{ display: inline-flex; width: 24px; height: 24px; }
.rc-footer__social-icon svg{ width: 100%; height: 100%; }
.rc-footer .rc-footer__col-title{
  color: var(--rc-navy);
  font-weight: var(--rc-weight-bold);
  font-size: var(--rc-text-sm);
  letter-spacing: 0.04em;
  margin-bottom: var(--rc-space-3);
}
.rc-footer .rc-footer__list a{ color: var(--rc-navy); }
.rc-footer__list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rc-space-2); }
.rc-footer__list a{
  color: var(--rc-navy);
  font-size: var(--rc-text-sm);
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}
.rc-footer__list a::before{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: var(--rc-rosa-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.rc-footer__list a:hover::before{ transform: scaleX(1); }
.rc-footer__list li.current-menu-item > a,
.rc-footer__list li.current_page_item > a{
  color: var(--rc-rosa-deep);
}
.rc-footer__list li.current-menu-item > a::before,
.rc-footer__list li.current_page_item > a::before{
  transform: scaleX(1);
}

.rc-footer__bottom{
  border-top: var(--rc-border-w) solid var(--rc-neutro);
  padding: var(--rc-space-4) 0;
}
.rc-footer__bottom-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--rc-space-2);
  font-size: var(--rc-text-xs);
  color: var(--rc-neutro);
}
.rc-footer__bottom-links{ display: flex; align-items: center; gap: var(--rc-space-2); }
.rc-footer__bottom-links a{ color: var(--rc-neutro); }
.rc-footer__bottom-links a:hover{ color: var(--rc-navy); }

@media (max-width: 900px){
  .rc-footer__grid{ grid-template-columns: 1fr 1fr; }
  .rc-footer__brand{ grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 560px){
  .rc-footer__grid{ grid-template-columns: 1fr; }
  .rc-footer__bottom-inner{ flex-direction: column; align-items: flex-start; }
}

/* -------------------------------------------------------------------------
   AREA CONTENUTO PAGINA — sistema contenitore / piena larghezza
   Ogni blocco dentro il contenuto è "contenuto" (1180px) per default.
   Impostando l'allineamento nativo di WordPress su un blocco (Larga o
   Piena larghezza, dal pannello laterale dell'editor) quel singolo
   blocco esce dal contenitore — utile per immagini, sfondi colorati,
   sezioni a piena larghezza tra contenuto normale.
   ------------------------------------------------------------------------- */
.entry-content{
  padding: var(--rc-space-7) 0;
  display: flow-root; /* evita che i margini dei blocchi "collassino" fuori */
}
/* Home e pagine che iniziano con una sezione a piena larghezza (es. Hero):
   nessuno spazio tra header e prima sezione, né dopo l'ultima. */
.home .entry-content,
.entry-content:has( > .alignfull:first-child ){
  padding-top: 0;
}
.home .entry-content{
  padding-bottom: 0;
}

.entry-content > *{
  max-width: var(--rc-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--rc-container-pad);
  padding-right: var(--rc-container-pad);
}
.entry-content > * + *{
  margin-top: var(--rc-space-6);
}
.entry-content > .alignwide{
  max-width: calc(var(--rc-container) + 160px);
}
.entry-content > .alignfull{
  max-width: 100vw;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 0;
  padding-right: 0;
}
/* Un blocco a piena larghezza spesso vuole comunque un contenuto interno
   leggibile (es. testo su un banner colorato): i figli diretti di un
   .alignfull tornano "contenuti" di default, salvo dire diversamente. */
/* Esclusi i blocchi Reformer Club (wp-block-rc-*): gestiscono da soli
   la propria struttura interna (sfondi, immagini, overlay). */
.alignfull:not([class*="wp-block-rc-"]) > .rc-container,
.alignfull:not([class*="wp-block-rc-"]) > *:not(.alignfull):not(.alignwide){
  max-width: var(--rc-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--rc-container-pad);
  padding-right: var(--rc-container-pad);
}

@media (max-width: 600px){
  .entry-content{ padding: var(--rc-space-6) 0; }
  .entry-content > * + *{ margin-top: var(--rc-space-5); }
}

@media (max-width: 600px){
  :root{ --rc-header-h: 72px; }
  .rc-wordmark__main{ font-size: 1.25rem; }
}