/* ===============================
   SpiritDesign Site Tweaks (global)
   - Bez child theme: stačí upravovat tento soubor.
   - Paleta, typografie a rotátor textu.
   =============================== */

/* --- PALETA (můžeš libovolně měnit) --- */
:root{
  --sd-bg: #F9F7F3;     /* slonová kost */
  --sd-base: #E8E1D4;   /* jemná písková */
  --sd-brown: #7A6C5D;  /* teplá šedohnědá */
  --sd-teal: #7FCAC3;   /* světle tyrkysová */
  --sd-text: #2C2C2C;   /* tmavě šedá */
}

/* --- ZÁKLAD (volitelné) --- */
body{
  color: var(--sd-text);
  background-color: var(--sd-bg);
}

/* Odkazy a CTA (jemné) */
a { color: var(--sd-teal); }
a:hover { opacity:.85; }

/* Tlačítka v základu (Kadence může přepsat) */
button, .button, .wp-block-button__link{
  border: 1px solid var(--sd-brown);
  color: var(--sd-text);
  background: transparent;
}
button:hover, .button:hover, .wp-block-button__link:hover{
  background: var(--sd-teal);
  color: #fff;
}

/* --- TYPOGRAFIE (uprav dle potřeby) --- */
h1,h2,h3,h4,h5,h6{ font-family: 'Montserrat', system-ui, sans-serif; letter-spacing:.02em; }
body, p { font-family: 'Lora', Georgia, serif; }

/* ===============================
   TEXTOVÝ ROTÁTOR (CSS + optional JS)
   Použití v editoru: HTML blok s .sd-rotator a <span> pro každou větu:
   <div class="sd-rotator">
     <span>Tvorba s duší.</span>
     <span>Spojení technologie, estetiky a klidu.</span>
     <span>Grafika & Duchovno.</span>
   </div>
   =============================== */

.sd-rotator{
  position:relative;
  display:block;
  text-align:center;
  font-family:'Lora', serif;
  font-style:italic;
  font-size:clamp(20px,2.5vw,40px);
  line-height:1.3;
  color:var(--sd-text);
  min-height:1.3em;
}

.sd-rotator > span{
  position:absolute;
  left:0; right:0;
  opacity:0;
  animation: sdFade 9s infinite;
  transition: opacity 1.2s ease;
}

.sd-rotator > span:nth-child(1){ animation-delay:0s; }
.sd-rotator > span:nth-child(2){ animation-delay:3s; }
.sd-rotator > span:nth-child(3){ animation-delay:6s; }

@keyframes sdFade{
  0%{opacity:0}
  5%{opacity:1}
  30%{opacity:1}
  35%{opacity:0}
  100%{opacity:0}
}

/* Zarovnání varianty */
.sd-rotator.left   { text-align:left; }
.sd-rotator.center { text-align:center; }
.sd-rotator.right  { text-align:right; }