/*
Theme Name: Karilon Simple
Theme URI: https://karilon.example
Author: Karilon Communication
Author URI: https://karilon.example
Description: Tema Karilon Simple per Joyee Pro.
Version: 1.0.0
Text Domain: karilonsimple
*/

/* =========================
   1) Reset & Base
   ========================= */

*, *::before, *::after { box-sizing: border-box; }

:where(html){ -webkit-text-size-adjust:100%; }
:where(body){
  margin:0; min-height:100dvh;
  color: var(--wp--preset--color--dark);
  background: var(--wp--preset--color--bg);
  font-family: var(--wp--preset--font-family--system);
  font-size: var(--wp--preset--font-size--md);
  line-height:1.6; text-rendering: optimizeLegibility;
}

:where(h1,h2,h3,h4,h5,h6,p,figure){ margin:0 0 1rem; }
:where(h1,h2,h3,h4,h5,h6,[id]){ scroll-margin-top: calc(var(--header-h) + .5rem); }
:where(ul,ol){ margin:0 0 1rem 1.25rem; padding:0; }
:where(li){ margin:.25rem 0; }
:where(img,svg,video,canvas){ display:block; max-width:100%; height:auto; }

:where(a){ color: var(--wp--preset--color--primary); text-decoration:none; }
:where(a:hover){ text-decoration:underline; }

:where(table){ border-collapse:collapse; width:100%; }
:where(th,td){ padding:.5rem; text-align:left; }

:where(button,input,select,textarea){ font:inherit; color:inherit; }
:where(button){ cursor:pointer; }
:where(textarea){ resize:vertical; }

:where(:focus-visible){ outline:2px solid var(--wp--preset--color--accent); outline-offset:2px; }
.screen-reader-text{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.screen-reader-text:focus{
  position:static!important; width:auto; height:auto; margin:0; clip:auto; white-space:normal;
}

/* =========================
   2) Token & Layout base
   ========================= */

:root{
  --ks-space-xs: var(--wp--preset--spacing--xs, .5rem);
  --ks-space-sm: var(--wp--preset--spacing--sm, .75rem);
  --ks-space-md: var(--wp--preset--spacing--md, 1rem);
  --ks-space-lg: var(--wp--preset--spacing--lg, 1.5rem);
  --ks-space-xl: var(--wp--preset--spacing--xl, 2rem);

  --logo-h: 32px;     /* altezza logo desktop */
  --header-h: 64px;   /* fallback (aggiornato da JS) */
}
@media (max-width:900px){ :root{ --logo-h: 28px; } }

body{ padding-top: var(--header-h); }

body.admin-bar .site-header{ top:32px; }
@media (max-width:782px){ body.admin-bar .site-header{ top:0; } }

.container{
  width:min(1200px, 92vw);
  margin-inline:auto;
  padding-inline: clamp(.75rem, 1.5vw, 1.25rem);
}

.stack > * + *{ margin-top: var(--ks-space-md); }
.cluster{ display:flex; flex-wrap:wrap; align-items:center; gap: var(--ks-space-sm); }
.grid{ display:grid; gap: var(--ks-space-md); }
.grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:900px){ .grid--3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .grid--2, .grid--3{ grid-template-columns:1fr; } }

/* =========================
   3) Tipografia
   ========================= */
h1,h2,h3,h4,h5,h6{
  color: var(--wp--preset--color--dark);
  line-height:1.2; font-weight:700;
  font-family: var(--wp--preset--font-family--system);
  margin-top:1.25rem; margin-bottom:.75rem;
}
h1{ font-size: clamp(2rem, 2vw + 1.5rem, 3rem); }
h2{ font-size: clamp(1.6rem, 1.2vw + 1.2rem, 2.25rem); }
h3{ font-size: clamp(1.35rem, .8vw + 1rem, 1.75rem); }
h4{ font-size: clamp(1.2rem, .5vw + .95rem, 1.4rem); }
h5{ font-size:1.1rem; }
h6{ font-size:1rem; }

p.is-style-lead{
  font-size: clamp(1.125rem, .6vw + 1rem, 1.375rem);
  color: color-mix(in srgb, var(--wp--preset--color--dark) 90%, white);
}

/* =========================
   4) Punti elenco
   ========================= */
.list--check li,
.list--chevron li,
.list--arrow li,
.list--star li,
.list--dotring li {
  list-style: none;
  position: relative;
  margin: .25rem 0;
  padding-left: 1.5rem;
}
.list--check li::before,
.list--chevron li::before,
.list--arrow li::before,
.list--star li::before,
.list--dotring li::before {
  position: absolute;
  left: 0;
  top: .28rem;
  font-weight: 700;
  line-height: 1;
  font-size: 1.2rem; 
  color: currentColor; 
  content: "";
}

/* varianti */
.list--check   li::before { content: "✓"; }
.list--chevron li::before { content: "›"; }
.list--arrow   li::before { content: "→"; }
.list--star    li::before { content: "★"; }
.list--dotring li::before { content: "◦"; }


/* =========================
   4) Componenti: bottoni
   ========================= */
.btn,
.wp-element-button,
.wp-block-button__link{
  display:inline-flex; align-items:center; justify-content:center;
  padding: var(--ks-space-sm) var(--ks-space-md);
  border-radius:999px; border:0;
  text-decoration:none; font-weight:600;
}
.btn-primary,
.wp-element-button,
.wp-block-button__link{
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--bg);
}
.btn-primary:hover,
.wp-element-button:hover,
.wp-block-button__link:hover{
  filter: brightness(.95); text-decoration:none;
}
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent;
  border:2px solid currentColor;
  color: var(--wp--preset--color--primary);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{ opacity:.85; }

/* =========================
   5) Header & Navigazione
   ========================= */

.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background: var(--wp--preset--color--bg);
  border-bottom:1px solid rgba(0,0,0,.06);
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--ks-space-md); padding-block:.5rem;
}
.site-header .container > .site-nav{
  flex:1 1 auto; display:flex; justify-content:flex-end; min-width:0;
}

/* Logo */
.site-header .custom-logo,
.site-header .custom-logo-link img,
.site-header .site-logo img{ height: var(--logo-h); width:auto; display:block; }
.site-header .custom-logo-link{ display:inline-flex; align-items:center; line-height:0; }

/* Toggle hamburger */
.nav-toggle{ display:none; background:none; border:0; padding:.5rem; cursor:pointer; }
.nav-toggle__bar{ display:block; width:26px; height:2px; margin:.4rem 0; background: currentColor; }

/* Menu desktop */
.site-nav .menu,
.site-nav .menu ul{ list-style:none; margin:0; padding:0; }
.site-nav .menu{ display:flex; gap: clamp(.75rem, 2vw, 1.5rem); }
.site-nav .menu > li{ position:relative; }  /* per caret assoluta */
.site-nav a{ display:block; padding:.7rem 0; text-decoration:none; color: var(--wp--preset--color--dark); }
.site-nav a:hover,
.site-nav .current-menu-item > a{ color: var(--wp--preset--color--primary); }

/* extra spazio per caret (desktop) */
@media (min-width:901px){
  .site-nav .menu > li.menu-item-has-children > a{ padding-right: 1.25rem; }
}

/* Dropdown (desktop) */
.site-nav .sub-menu{
  display:none; position:absolute; top:100%; left:0; min-width:220px;
  background: var(--wp--preset--color--bg);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  padding:.25rem 0; z-index:50;
}
.site-nav .sub-menu li a{ padding:.55rem 1rem; white-space:nowrap; }
.site-nav .menu > li:hover > .sub-menu,
.site-nav .menu > li:focus-within > .sub-menu{ display:block; }

/* Caret (freccia) – desktop visibile, mobile cliccabile */
.site-nav .submenu-toggle{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  width:16px; height:16px; padding:0; margin:0;
  background:none; border:0; line-height:0; color: currentColor;
  pointer-events:none;                 /* desktop: non interattiva */
}
.site-nav .submenu-toggle .fa{ font-size:.8em; }

/* =========================
   6) Mobile (<=900px)
   ========================= */
@media (max-width:900px){
  .nav-toggle{ display:block; }
  .site-header .container > .site-nav{ flex:1 1 auto; display:flex; justify-content:flex-end; min-width:0; }
  .site-nav{ position:relative; width:100%; }

  /* pannello mobile a tutta larghezza sotto l'header */
  .site-nav .menu{
    display:none; position:fixed; left:0; right:0; top: var(--header-h);
    width:100vw; max-height: calc(100vh - var(--header-h)); overflow:auto;
    background: var(--wp--preset--color--bg);
    border-bottom:1px solid rgba(0,0,0,.06);
    padding:.5rem var(--ks-space-md) var(--ks-space-md);
    flex-direction:column; gap:0; z-index:1001;
  }
  .site-nav.is-open .menu{ display:block; }
  body.nav-open{ overflow:hidden; }

  /* primo livello */
  .site-nav .menu > li{ position:relative; }
  .site-nav .menu > li > a{
    position:relative; z-index:1;
    padding:.875rem 56px .875rem 0;            /* spazio a destra per la caret */
    border-top:1px solid rgba(0,0,0,.06);
  }
  .site-nav .menu > li:first-child > a{ border-top:0; }

  /* caret = bottone a tutta altezza, sopra al link */
  .site-nav .submenu-toggle{
    top:0; transform:none; width:48px; height:100%;
    pointer-events:auto; z-index:2;
  }
  .site-nav .submenu-toggle .fa{ transition: transform .2s ease; }
  .site-nav .menu li.is-open > .submenu-toggle .fa{ transform: rotate(180deg); }

  /* sottomenu chiuso + indent */
  .site-nav .sub-menu{
    display:none; position:static; border:0; box-shadow:none;
    padding:.25rem 0 .75rem 0;
  }
  .site-nav .menu li.is-open > .sub-menu{ display:block; }
  .site-nav .sub-menu > li > a{ padding:.55rem 0 .55rem 1rem; opacity:.95; }
}

/* =========================
   7) Footer
   ========================= */
.site-footer{
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--bg);
  padding: var(--ks-space-lg) 0;
}
.site-footer a{ color:inherit; opacity:.9; }
.site-footer a:hover{ opacity:1; }
.site-footer .container{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap: var(--ks-space-md);
}
.site-footer .menu,
.site-footer .menu ul{ list-style:none; margin:0; padding:0; }
.site-footer .menu{ display:flex; gap:1rem; }
/* Nascondi le caret nel footer */
.site-footer .submenu-toggle{ display:none !important; }

@media (max-width:900px){
  .site-footer .container{ flex-direction:column; text-align:center; }
  .site-footer .menu{ flex-direction:column; }
}

/* =========================
   8) Utility
   ========================= */
.hidden{ display:none!important; }
.breadcrumbs{
  font-size:.9rem;
  padding:.5rem 0 1rem;
  color: color-mix(in srgb, var(--wp--preset--color--dark) 70%, transparent);
}
.breadcrumbs a{ color: inherit; text-decoration:none; }
.breadcrumbs a:hover{ text-decoration:underline; }
.breadcrumbs .separator{ margin:0 .35rem; opacity:.5; }