/* ==========================================================================
   Hero Section — karmatistore.com
   Enfold Child Theme
   ========================================================================== */

:root {
  --hero-purple:      #7b2c2d;
  --hero-gold:        #C9A84C;
  --hero-white:       #FFFFFF;
  --hero-overlay:     rgba(0, 0, 0, 0.30);

  /* Punto focale dell'immagine hero: regola questi due valori per centrare
     il soggetto senza tagliarlo. Sintassi: "X% Y%" oppure keyword come
     "top center", "50% 20%", "left top", ecc.
     Esempi comuni:
       center center  → centro (default)
       center top     → soggetto in alto
       center 20%     → soggetto a 20% dall'alto
       70% center     → soggetto leggermente a destra
  */
  --hero-bg-position: center 40%;

  /* Zoom dell'immagine hero — REGOLA QUESTO VALORE per trovare il punto giusto.
     Valori di riferimento:
       auto 60%   → piccola, si vede tutta la t-shirt con spazio intorno
       auto 75%   → media, t-shirt occupa la maggior parte dell'altezza  ← punto di partenza
       auto 90%   → grande, qualche crop ai lati
       cover      → riempie tutto (nessun spazio vuoto, crop variabile)
     Sintassi "auto X%" → scala sull'altezza mantenendo le proporzioni.
  */
  --hero-bg-size: auto 325%;
}

/* --------------------------------------------------------------------------
   Wrapper
   Breakout technique: rompe il container Enfold (max-width: 1010px)
   che avvolge i Code Block anche in layout stretched.
   L'overflow-x: hidden su #main previene lo scrollbar orizzontale.
   -------------------------------------------------------------------------- */
.karmati-hero {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: inherit;
  /* Colore marmo che riempie lo spazio ai lati dell'immagine portrait */
  background-color: #d9c8b0;
}

/* Previene scrollbar orizzontale causata dal breakout */
#main {
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Background image
   -------------------------------------------------------------------------- */
.karmati-hero__bg {
  position: absolute;
  inset: 0;
  background-size: var(--hero-bg-size, auto 75%);
  background-position: var(--hero-bg-position, center center);
  background-repeat: no-repeat;
  z-index: 0;
}

.karmati-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
}

/* --------------------------------------------------------------------------
   Content area (fills space above the banner)
   -------------------------------------------------------------------------- */
.karmati-hero__content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 80px 60px 40px;
  gap: 40px;
}

/* --------------------------------------------------------------------------
   Left: title + subtitle
   -------------------------------------------------------------------------- */
.karmati-hero__text {
  max-width: 520px;
}

/* Regola base */
.karmati-hero__title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--hero-white) !important;
  letter-spacing: 0.02em;
  margin: 0 0 24px;
}

/* Regola ad alta specificità: include #top (ID di Enfold) per superare
   la catena "#top .main_color h1" generata dal dynamic-css di Enfold.
   Specificità: (1, 1, 1) — uguale a Enfold ma posizionata dopo nel sorgente. */
#top .karmati-hero__title {
  color: var(--hero-white) !important;
}

.karmati-hero__subtitle {
  font-size: clamp(0.875rem, 1.4vw, 1rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--hero-white) !important; /* Enfold sovrascrive il colore dei p */
  margin: 0;
}

/* --------------------------------------------------------------------------
   Right: CTA buttons
   -------------------------------------------------------------------------- */
.karmati-hero__cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  min-width: 220px;
  max-width: 260px;
}

.karmati-hero__btn {
  display: inline-block;
  padding: 18px 28px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.karmati-hero__btn:hover {
  opacity: 0.85;
  text-decoration: none;
}

/* Primary button — solid purple, gold text */
.karmati-hero__btn--primary {
  background-color: var(--hero-white);
  color: var(--hero-gold) !important; /* Enfold sovrascrive il colore dei link <a> */
  border: 2px solid var(--hero-purple);
}

/* Secondary button — outline white */
.karmati-hero__btn--secondary {
  background-color: transparent;
  color: var(--hero-white) !important; /* Enfold sovrascrive il colore dei link <a> */
  border: 2px solid var(--hero-white);
}

.karmati-hero__btn--secondary:hover {
  background-color: rgba(255, 255, 255, 0.08);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Bottom banner
   -------------------------------------------------------------------------- */
.karmati-hero__banner {
  position: relative;
  z-index: 1;
  background-color: var(--hero-gold);
  padding: 18px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  overflow: hidden;
}

.karmati-hero__banner-track {
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
}

.karmati-hero__banner-item {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hero-purple);
}

.karmati-hero__banner-sep {
  color: var(--hero-purple);
  margin: 0 20px;
  font-size: 0.78rem;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Responsive — tablet (≤ 900px)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .karmati-hero__content {
    flex-direction: column;
    align-items: flex-start;
    padding: 60px 40px 40px;
    gap: 32px;
  }

  .karmati-hero__cta {
    flex-direction: row;
    max-width: 100%;
    min-width: unset;
    width: 100%;
  }

  .karmati-hero__btn {
    flex: 1;
  }
}

/* --------------------------------------------------------------------------
   Responsive — mobile (≤ 600px)
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .karmati-hero__content {
    padding: 48px 24px 32px;
    gap: 28px;
  }

  .karmati-hero__title {
    font-size: clamp(2rem, 9vw, 2.8rem);
  }

  .karmati-hero__cta {
    flex-direction: column;
  }

  .karmati-hero__btn {
    width: 100%;
    padding: 16px 20px;
  }

  .karmati-hero__banner {
    padding: 14px 20px;
  }

  .karmati-hero__banner-sep {
    margin: 0 12px;
  }

  .karmati-hero__banner-item,
  .karmati-hero__banner-sep {
    font-size: 0.68rem;
  }
}