/* ============================================================
     1) DESIGN TOKENY – ZMĚŇ BARVY / FONTY JEN TADY
  ============================================================ */
  :root{
    --ivory:      #FAF6F1;  /* hlavní pozadí (fallback pod fotkou) */
    --nude:       #EFE1D5;  /* sekundární pozadí sekcí */
    --nude-dark:  #E3CFBD;  /* border / podklad pod zvýrazněným slovem */
    --charcoal:   #2E2A27;  /* hlavní text (tmavý) */
    --charcoal-60:#2E2A2799;
    --rosegold:   #B08D6E;  /* hlavní akcent */
    --rosegold-dk:#8F6F53;  /* hover stav akcentu */
    --gold-line:  #C9A66B;  /* tenká signature linka */
    --font-display: 'Fraunces', serif;
    --font-body: 'Manrope', sans-serif;
  }

  html{scroll-behavior:smooth; color-scheme:light;}
  body{
    background-color:#FAF6F1;
    background-image:url('/background.jpg');
    background-size:cover;
    background-position:top center;
    background-repeat:no-repeat;
    color:var(--charcoal);
    font-family:var(--font-body);
  }
  .font-display{font-family:var(--font-display);}

  /* Eyebrow labelky nad nadpisy */
  .eyebrow{
    font-family:var(--font-body);
    letter-spacing:.22em;
    text-transform:uppercase;
    font-size:.72rem;
    font-weight:600;
    color:var(--rosegold-dk);
  }

  /* ============================================================
     2) SIGNATURE PRVEK – kreslená linka (motiv tahu štětce/linky)
     Používá se jako oddělovač sekcí místo klasické <hr>
  ============================================================ */
  .signature-line{
    width:100%;
    height:28px;
    display:block;
  }
  .signature-line path{
    fill:none;
    stroke:var(--gold-line);
    stroke-width:1.4;
    stroke-linecap:round;
    stroke-dasharray:600;
    stroke-dashoffset:600;
    animation:draw 1.8s ease forwards;
  }
  @keyframes draw{ to{ stroke-dashoffset:0; } }
  @media (prefers-reduced-motion: reduce){
    .signature-line path{ animation:none; stroke-dashoffset:0; }
  }

  /* Jemný podtrh u zvýrazněných slov v nadpisech */
  .ink-underline{
    position:relative;
    white-space:nowrap;
  }
  .ink-underline::after{
    content:'';
    position:absolute;
    left:-2%; right:-2%; bottom:.05em;
    height:.42em;
    background:var(--nude-dark);
    z-index:-1;
    border-radius:2px;
  }

  /* Karta služby – bílá karta, proto vlastní (vždy tmavé) barvy textu
     nezávislé na tématu stránky */
  .service-card{
    background:#fff;
    color:#2E2A27;
    border:1px solid var(--nude-dark);
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  }
  .card-desc{ color:#2E2A2799; }

  /* Vstupní pole formuláře mají bílé pozadí -> vždy tmavý text */
  input, textarea{ color:#2E2A27; }
  input::placeholder, textarea::placeholder{ color:#2E2A2799; }
  .service-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px -20px rgba(46,42,39,.25);
    border-color:var(--rosegold);
  }

  /* Focus states – přístupnost */
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--rosegold-dk);
    outline-offset:3px;
    border-radius:4px;
  }

  /* Scroll reveal */
  .reveal{
    opacity:0; transform:translateY(24px);
    transition:opacity .7s ease, transform .7s ease;
  }
  .reveal.is-visible{ opacity:1; transform:translateY(0); }

  .btn-primary{
    background:var(--charcoal);
    color:var(--ivory);
    transition:background .25s ease;
  }
  .btn-primary:hover{ background:var(--rosegold-dk); }

  .btn-outline{
    border:1px solid var(--charcoal);
    color:var(--charcoal);
    transition:background .25s ease, color .25s ease;
  }
  .btn-outline:hover{ background:var(--charcoal); color:var(--ivory); }

  /* Pevné varianty pozadí/textu s průhledností – nahrazují nespolehlivé
     Tailwind zápisy typu bg-[color:var(--x)]/40 (opacity modifier na CSS
     proměnné může selhat na starším WebKitu) */
  .bg-header{ background-color:rgba(250,246,241,.9); }
  .bg-soft-nude{ background-color:rgba(239,225,213,.55); }
  .text-ivory-70{ color:rgba(250,246,241,.7); }

  /* Fotografie – jednotný vzhled rámečků napříč sekcemi */
  .photo-frame{
    overflow:hidden;
    border:1px solid var(--nude-dark);
  }
  .photo-frame img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
  }

/* ============================================================
   3) KOMPONENTY PRO DETAILNÍ PODSTRÁNKY SLUŽEB
============================================================ */

/* Číslovaný postup (Jak procedura probíhá) */
.step-list{ list-style:none; margin:0; padding:0; counter-reset:step; }
.step-list li{
  counter-increment:step;
  position:relative;
  padding-left:3.25rem;
  margin-bottom:1.25rem;
  line-height:1.6;
}
.step-list li::before{
  content:counter(step);
  position:absolute; left:0; top:-.15rem;
  width:2.25rem; height:2.25rem;
  border-radius:9999px;
  background:var(--nude);
  color:var(--rosegold-dk);
  font-family:var(--font-display);
  font-weight:600;
  display:flex; align-items:center; justify-content:center;
}

/* Odrážkový seznam v rose-gold stylu (příprava, péče po zákroku) */
.check-list{ list-style:none; margin:0; padding:0; }
.check-list li{
  position:relative;
  padding-left:1.6rem;
  margin-bottom:.65rem;
  line-height:1.6;
}
.check-list li::before{
  content:'';
  position:absolute; left:0; top:.55em;
  width:.5rem; height:.5rem;
  border-radius:9999px;
  background:var(--rosegold);
}

/* Box pro kontraindikace – zřetelně odlišený, ale v tónu palety */
.warn-strict{
  background:#F5E6DE;
  border:1px solid #D6A788;
  border-radius:1.25rem;
  padding:1.75rem 2rem;
}
.warn-soft{
  background:#FBF6EF;
  border:1px solid var(--nude-dark);
  border-radius:1.25rem;
  padding:1.75rem 2rem;
}
.warn-strict .check-list li::before{ background:#B5633A; }

/* ============================================================
   4) ADMIN EDITAČNÍ REŽIM
============================================================ */
.admin-edit-mode{ padding-bottom:4.5rem; } /* místo pro spodní panel */
.admin-editable{
  outline: 1px dashed transparent;
  border-radius: .25rem;
  transition: outline-color .2s ease, background-color .2s ease;
  cursor: text;
}
.admin-editable:hover{
  outline-color: var(--rosegold);
  background-color: rgba(176,141,110,.08);
}
.admin-editable:focus{
  outline: 2px solid var(--rosegold-dk);
  background-color: rgba(176,141,110,.12);
}