/* Reiki del Cuore themed starter — lavanda & salvia */
/* Reset */
*,*::before,*::after{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:where(h1,h2,h3){line-height:1.15}

/* Palette */
:root{
  --bg: #fbfbfc;
  --fg: #0f172a;
  --muted: #6b7280;
  --card: #ffffff;
  --border: #e6e9ef;
  --lavender: #9fa8f0;
  --sage: #98c1a8;
  --accent: #8b5cf6; /* soft lavender */
  --accent-2: #6ee7b7; /* mint */
  --radius: 14px;
  --shadow: 0 12px 30px rgba(16,24,40,0.06);
  --container: 1100px;
  --gap: clamp(1rem,2vw,1.8rem);
  --steps-0: clamp(1rem, .95rem + .3vw, 1.125rem);
  --steps-1: clamp(1.25rem, 1.1rem + .8vw, 1.5rem);
  --steps-2: clamp(1.8rem, 1.5rem + 1.2vw, 2.4rem);
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  :root{
    --bg: #071224;
    --fg: #e6eef6;
    --muted: #98a3b3;
    --card: #071827;
    --border: #123241;
    --shadow: 0 12px 30px rgba(0,0,0,0.6);
  }
}

/* Layout */
body{background:linear-gradient(180deg,#fbfbfc 0%, #f7fafc 100%);color:var(--fg);font-size:var(--steps-0)}
.container{width:min(100% - 2rem, var(--container));margin-inline:auto;padding-inline:1rem}
.stack{display:grid;gap:var(--gap)}
.row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}

/* Header */
.site-header{position:sticky;top:0;z-index:40;background:color-mix(in oklab,var(--bg) 88%, transparent);backdrop-filter:saturate(130%) blur(6px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700}
.brand__text{font-size:1rem}
.nav-toggle{display:none;border:1px solid var(--border);background:transparent;padding:.5rem;border-radius:10px;width:44px;height:44px;position:relative}
.nav-toggle span{position:absolute;left:10px;right:10px;height:2px;background:var(--fg);border-radius:2px;transition:transform .2s,opacity .2s}
.nav-toggle span:nth-child(1){top:14px}
.nav-toggle span:nth-child(2){top:21px}
.nav-toggle span:nth-child(3){top:28px}

.menu{display:flex;gap:1rem;align-items:center}
.menu__link{padding:.45rem .75rem;border-radius:999px}
.menu__link:hover{background:color-mix(in oklab,var(--fg) 7%, transparent)}

/* Hero */
.hero{padding:clamp(2rem,6vw,5rem) 0}
.hero__inner{display:grid;grid-template-columns:1fr 420px;gap:2.2rem;align-items:center}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:700;font-size:.85rem}
h1{font-size:var(--steps-2);margin:.2rem 0}
.highlight{background:linear-gradient(90deg,var(--lavender),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__media{border-radius:18px;min-height:260px;background:linear-gradient(135deg,var(--lavender) 0%, rgba(139,92,246,0.12) 40%, rgba(110,231,183,0.06) 100%);box-shadow:var(--shadow)}

/* Sections */
.section{padding:var(--gap) 0}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(1rem,2vw,1.6rem);box-shadow:var(--shadow)}

/* About */
.about-grid{display:grid;grid-template-columns:220px 1fr;gap:1.2rem;align-items:center}
.about-photo{width:220px;height:220px;border-radius:16px;background:linear-gradient(180deg,var(--accent) 0%, var(--accent-2) 100%);box-shadow:var(--shadow)}

/* Services */
.section-title{font-size:1.15rem;margin-bottom:.25rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.price{font-weight:800;margin-top:.6rem}

/* Testimonials */
.testimonials{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.quote{font-style:italic;}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 320px;gap:1rem}
.contact-form label{display:block;margin-bottom:.6rem;font-weight:600}
.contact-form input, .contact-form textarea{width:100%;padding:.6rem;border-radius:8px;border:1px solid var(--border);margin-top:.25rem;background:transparent;color:inherit}

/* CTA */
.cta{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem}

/* Footer */
.site-footer{padding:2rem 0;border-top:1px solid var(--border)}
.footer-grid{display:grid;grid-template-columns:1fr auto;align-items:center}

/* Buttons & utilities */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.6rem 1rem;border-radius:999px;border:1px solid var(--border);font-weight:700;background:transparent}
.btn--accent{background:var(--accent);color:white;border-color:transparent;box-shadow:0 6px 20px rgba(139,92,246,0.18)}
.btn--ghost{background:transparent;border-color:transparent}

/* Responsive */
@media (max-width:900px){
  .hero__inner{grid-template-columns:1fr;grid-auto-rows:auto}
  .about-grid{grid-template-columns:1fr;grid-auto-rows:auto}
  .grid-3{grid-template-columns:1fr}
  .testimonials{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .menu{position:fixed;inset:68px 1rem auto 1rem;flex-direction:column;align-items:stretch;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1rem;box-shadow:var(--shadow);transform:translateY(-10px);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
  .menu[aria-expanded="true"]{opacity:1;transform:translateY(0);pointer-events:auto}
  .nav-toggle{display:inline-flex}
}

/* Accessibility */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:var(--accent);color:white;padding:.5rem .8rem;border-radius:.35rem}
:focus-visible{outline:3px solid color-mix(in oklab,var(--accent) 60%, white 0%);outline-offset:3px}

/* === Filmati (video grid) === */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
  align-items: start;
}
.video-item {
  background: var(--card, #fff);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  padding: .75rem .75rem 1rem;
}
.video-item .video-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  overflow: hidden;
  border-radius: 12px;
}
.video-item iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-caption {
  margin-top: .65rem;
  font-size: .95rem;
  line-height: 1.35;
  color: var(--muted, #555);
  text-align: center;
}
@media (min-width: 1200px) {
  .video-grid { gap: 1.25rem; }
}


/* Hover effect for Filmati button */
a.menu__link.btn.btn--accent:hover {
  background-color: #8B0000; /* DarkRed */
  border-color: #8B0000;
}


/* === Calendario Eventi (responsive iframe) === */
.calendar-embed iframe{
  width: 100% !important;
  height: 70vh !important;
  min-height: 540px;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
@media (max-width: 700px){
  .calendar-embed iframe{
    height: 75vh !important;
    min-height: 520px;
  }
}


/* === Image grid for Origini del Reiki === */
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  justify-items: center;
  margin: 1.5rem 0;
}
.image-grid img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}


/* === Image grid for specific images in Origini del Reiki === */
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  justify-items: center;
  margin: 1.5rem 0;
}
.image-grid img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}


/* === Pair images smaller and side-by-side on desktop === */
.image-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  align-items: start;
  justify-items: center;
  margin: 1.25rem 0;
}
.image-row img {
  width: auto;
  max-width: 280px !important;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

@media (max-width: 640px){
  .image-row img {
  width: auto;
  max-width: 280px !important;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

}


/* === Force image-row images to one-third width on desktop === */
.image-row {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.image-row img {
  flex: 0 0 33%;
  max-width: 33% !important;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
@media (max-width: 700px){
  .image-row img {
    flex: 0 0 100%;
    max-width: 100% !important;
  }
}


/* === Contact CTA in hero === */
.contact-cta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.25rem;
}
.contact-cta__email{
  font-weight:600;
  text-decoration:none;
  padding:.6rem 1rem;
  border-radius:999px;
  border:1px solid var(--accent, #9c2d2d);
  color:var(--accent, #9c2d2d);
  background:transparent;
}
.contact-cta__email:hover{
  background:var(--accent, #9c2d2d);
  color:#fff;
}
.contact-cta__phone{
  font-size:1rem;
  color:var(--muted, #555);
  margin-left:.25rem;
}
@media (max-width:700px){
  .contact-cta{ align-items:stretch; }
  .contact-cta__phone{ text-align:left; }
}


/* Style phone number in contact block */
.contact-cta__phone strong {
  color: #c00;
  font-weight: 700;
}


/* --- Social icons in menu (added) --- */
.menu__spacer{flex:1}
.menu .menu__icon{display:inline-flex;align-items:center;justify-content:flex-start;border:1px solid var(--border);border-radius:999px;padding:6px 10px;gap:.4rem;white-space:nowrap;width:auto;}
.menu .menu__icon:hover{background:color-mix(in oklab,var(--fg) 7%, transparent)}
.menu .menu__icon svg{width:18px;height:18px;display:blockmargin-right:.35rem;}