/*
Theme Name: Rai — landing
Theme URI: https://completez.ro
Author: NARBOWEB
Description: Pagina de prezentare a cabinetului Dr. Andrei Rai, identică cu varianta Next.js. Pachetele vin din WooCommerce, prin pluginul Abonamente RAI.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: rai-tema
*/

/*
 * Stilurile sunt cele din varianta Next.js, copiate ca atare.
 *
 * Nu au fost rescrise pentru WordPress intenționat: dacă macheta se schimbă
 * într-o variantă, aceeași schimbare trebuie să meargă și în cealaltă, iar un
 * fișier identic face diferența vizibilă dintr-o privire.
 */
/* Stilurile landing page-ului, preluate integral din macheta agenției.
   Modificări față de original: token --bronze-text pentru contrast AA pe text mic,
   plus clasele adăugate pentru pachetul recomandat, prețul pe lună, pașii și FAQ.
   Nu rescrieți acest fișier de la zero — este munca lor de design. */
:root{
  --paper:#E5DBC9;
  --paper-deep:#DACEB8;
  --panel:#EFE8DA;
  --ink:#2A2118;
  --ink-soft:#5C4F3F;
  --bronze:#8A6440;
  /* variantă închisă a bronzului, pentru text mic: 4,8:1 pe hârtie (AA) */
  --bronze-text:#7A5533;
  --gold:#A87742;
  --line:rgba(138,100,64,.26);

  --display:var(--font-display),"Jost",system-ui,sans-serif;
  --body:var(--font-body),"Newsreader",Georgia,serif;
  --util:var(--font-util),"Barlow Condensed",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
/* textura: grăunte de hârtie + fibre fine */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.16;mix-blend-mode:multiply;
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(96deg,rgba(138,100,64,.05) 0 1px,transparent 1px 4px);
  opacity:.5;
}
a{color:inherit}
.wrap{width:min(1120px,92vw);margin-inline:auto;position:relative;z-index:1}

/* ---------- header ---------- */
.top{
  position:sticky;top:0;z-index:20;
  backdrop-filter:blur(10px);
  background:rgba(229,219,201,.86);
  border-bottom:1px solid var(--line);
}
.top .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.mark{width:30px;height:30px;flex:none}
.brand b{
  font-family:var(--display);font-weight:400;font-size:15px;
  letter-spacing:.16em;text-transform:uppercase;display:block;line-height:1.1
}
.brand span span{
  font-family:var(--util);font-weight:300;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft)
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--display);font-size:14px;font-weight:400;
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
  padding:13px 26px;border-radius:2px;transition:.25s ease;cursor:pointer;border:1px solid transparent
}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:var(--bronze)}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--bronze);background:rgba(138,100,64,.08)}
.btn-sm{padding:9px 18px;font-size:12.5px}
a:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(70px,11vw,130px) 0 clamp(60px,8vw,100px)}
.veins{position:absolute;inset:-10% -5%;width:110%;height:120%;opacity:.5;pointer-events:none;z-index:0}
.veins path{fill:none;stroke:var(--bronze);stroke-width:1}
.glowfield{
  position:absolute;top:-35%;left:50%;transform:translateX(-50%);
  width:min(1000px,130vw);aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(239,232,218,.85),rgba(239,232,218,0) 62%);
  animation:breathe 14s ease-in-out infinite
}
@keyframes breathe{0%,100%{opacity:.7;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.07)}}
.hero .wrap{max-width:820px}
.eyebrow{
  font-family:var(--util);font-weight:500;font-size:13px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--bronze-text);margin:0 0 22px
}
h1{
  font-family:var(--display);font-weight:200;
  font-size:clamp(33px,5.4vw,62px);line-height:1.13;letter-spacing:-.01em;margin:0 0 24px
}
h1 em{font-family:var(--body);font-style:italic;font-weight:300;color:var(--bronze)}
.lede{font-size:clamp(17px,2vw,20px);color:var(--ink-soft);max-width:56ch;margin:0 0 34px;font-weight:300}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- section frame ---------- */
section{padding:clamp(58px,7vw,96px) 0;position:relative}
.sec-head{margin-bottom:clamp(34px,4vw,52px);max-width:60ch}
.sec-label{
  font-family:var(--util);font-weight:500;font-size:12.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--bronze-text);margin:0 0 14px;
  display:flex;align-items:center;gap:14px
}
.sec-label::after{content:"";flex:1;height:1px;background:var(--line);max-width:180px}
h2{font-family:var(--display);font-weight:200;font-size:clamp(27px,3.6vw,42px);line-height:1.2;margin:0 0 12px}
.sec-head p{color:var(--ink-soft);margin:0;font-weight:300}

/* ---------- single consultation ---------- */
.single{
  display:flex;flex-wrap:wrap;align-items:center;gap:26px;justify-content:space-between;
  border:1px solid var(--line);border-radius:3px;padding:clamp(24px,3.4vw,38px);
  background:linear-gradient(120deg,rgba(239,232,218,.9),rgba(239,232,218,.45))
}
.single h3{font-family:var(--display);font-weight:300;font-size:25px;margin:0 0 8px}
.single p{margin:0;color:var(--ink-soft);max-width:46ch;font-weight:300}
.single-right{display:flex;align-items:center;gap:24px;flex-wrap:wrap}

/* ---------- packages ---------- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.pack{
  display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:3px;
  padding:clamp(24px,2.8vw,34px);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset;
  transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease
}
.pack:hover{border-color:var(--bronze);transform:translateY(-3px);box-shadow:0 12px 30px -18px rgba(42,33,24,.5)}
.pack-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.dur{font-family:var(--util);font-weight:500;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 6px}
.pname{font-family:var(--display);font-weight:300;font-size:clamp(23px,2.6vw,29px);margin:0;line-height:1.15}
.price{font-family:var(--util);font-weight:600;font-size:clamp(40px,5vw,54px);line-height:.85;color:var(--bronze);white-space:nowrap}
.price small{font-family:var(--util);font-weight:300;font-size:15px;letter-spacing:.16em;text-transform:uppercase;display:block;text-align:right;color:var(--ink-soft);margin-top:7px}
.ideal{color:var(--ink-soft);font-weight:300;margin:16px 0 0;font-size:16.5px}

/* signature: linia consultațiilor, în granule */
.track{margin:26px 0 22px}
.rail{position:relative;height:11px;display:flex;align-items:center}
.rail::before{content:"";position:absolute;left:0;right:0;height:1px;background:rgba(138,100,64,.3)}
.rail::after{
  content:"";position:absolute;left:0;height:1px;background:var(--bronze);
  width:var(--span,100%);transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s cubic-bezier(.4,0,.2,1)
}
.pack.on .rail::after{transform:scaleX(1)}
.granule{
  position:absolute;width:11px;height:11px;border-radius:50%;
  background:var(--bronze);transform:translateX(-50%) scale(0);
  box-shadow:0 0 0 3px rgba(138,100,64,.14);
  transition:transform .45s cubic-bezier(.34,1.4,.64,1)
}
.pack.on .granule{transform:translateX(-50%) scale(1)}
.granule.hollow{background:var(--panel);border:1px solid rgba(138,100,64,.5);box-shadow:none}
.ticks{display:flex;justify-content:space-between;margin-top:9px;font-family:var(--util);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.track-note{font-family:var(--util);font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--bronze-text);margin-top:12px}

.pack ul{list-style:none;padding:0;margin:0 0 22px;font-size:16.5px;font-weight:300}
.pack li{position:relative;padding-left:20px;margin-bottom:7px;color:var(--ink-soft)}
.pack li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--bronze);opacity:.6}
.scop{
  border-top:1px solid var(--line);padding-top:16px;margin:auto 0 20px;
  font-style:italic;font-weight:300;color:var(--ink-soft);font-size:16px
}
.pack .btn{align-self:flex-start}

/* ---------- monitoring ---------- */
.mon{background:var(--paper-deep);border-block:1px solid var(--line)}
.mon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.mon-item{background:var(--panel);padding:clamp(22px,2.6vw,30px)}
.mon-item h4{font-family:var(--display);font-weight:400;font-size:19px;margin:0 0 8px}
.mon-item p{margin:0;color:var(--ink-soft);font-size:16px;font-weight:300}
.mon-num{font-family:var(--util);font-size:13px;letter-spacing:.2em;color:var(--bronze-text);display:block;margin-bottom:12px}

/* ---------- closing ---------- */
.close{text-align:center}
.close .wrap{max-width:660px}
.close .sec-label{justify-content:center}
.close .sec-label::after{display:none}
.close h2{margin-bottom:18px}
.close > .wrap > p{color:var(--ink-soft);font-weight:300;margin:0 0 30px}
.motto{
  font-family:var(--body);font-style:italic;font-weight:300;
  font-size:clamp(20px,2.6vw,27px);color:var(--bronze);margin:52px 0 0
}
.sig{font-family:var(--util);font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);margin-top:10px}

footer{border-top:1px solid var(--line);padding:32px 0 46px;font-size:15px;color:var(--ink-soft);font-weight:300}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
footer a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
footer a:hover{border-color:var(--bronze)}
.disclaimer{max-width:52ch;font-size:14px;line-height:1.55}

/* ---------- adăugat: accesibilitate ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:50;
  background:var(--ink);color:var(--paper);padding:12px 20px;
  font-family:var(--display);font-size:14px;letter-spacing:.09em;text-transform:uppercase;text-decoration:none
}
.skip:focus{left:12px;top:12px}

/* ---------- adăugat: pachet recomandat ---------- */
.pack{position:relative}
.pack--rec{border-color:var(--bronze);box-shadow:0 0 0 1px var(--bronze) inset,0 10px 28px -20px rgba(42,33,24,.55)}
.rec-tag{
  position:absolute;top:0;right:clamp(24px,2.8vw,34px);transform:translateY(-50%);
  background:var(--ink);color:var(--paper);
  font-family:var(--util);font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  padding:5px 13px;border-radius:2px
}

/* ---------- adăugat: preț pe lună ---------- */
.permo{
  font-family:var(--util);font-weight:300;font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);display:block;text-align:right;margin-top:4px
}

/* ---------- adăugat: pașii de după alegere ---------- */
.flow{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin-top:clamp(34px,4vw,46px);padding-top:clamp(30px,3.4vw,40px);border-top:1px solid var(--line)
}
.flow-step{display:flex;flex-direction:column;gap:6px}
.flow-step b{
  font-family:var(--util);font-weight:500;font-size:12.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bronze-text)
}
.flow-step h4{font-family:var(--display);font-weight:400;font-size:18px;margin:0}
.flow-step p{margin:0;color:var(--ink-soft);font-size:16px;font-weight:300}

/* ---------- adăugat: întrebări frecvente ---------- */
.faq{max-width:74ch}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:19px 40px 19px 0;position:relative;
  font-family:var(--display);font-weight:400;font-size:19px;line-height:1.35
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--bronze);border-bottom:1.5px solid var(--bronze);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s ease
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq summary:hover{color:var(--bronze-text)}
.faq summary:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}
.faq .answer{padding:0 40px 22px 0;color:var(--ink-soft);font-weight:300;margin:0}
.faq .answer + .answer{padding-top:0;margin-top:-10px}

/* ---------- responsive ---------- */
@media(max-width:760px){
  .flow{grid-template-columns:1fr;gap:24px}
}
@media(max-width:900px){
  .grid{grid-template-columns:1fr}
  .mon-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  body{font-size:16px}
  .brand span span{display:none}
  .mon-grid{grid-template-columns:1fr}
  .single-right{width:100%;justify-content:space-between}
  .top .btn{padding:8px 14px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .pack .granule{transform:translateX(-50%) scale(1)}
  .rail::after{transform:scaleX(1)}
  html{scroll-behavior:auto}
}

/* ---------- adăugat: fereastra de alegere a pachetului ---------- */
.pd{
  border:none;padding:0;background:transparent;
  max-width:min(34rem,92vw);width:100%;
  color:var(--ink);
}
.pd::backdrop{background:rgba(42,33,24,.55);backdrop-filter:blur(3px)}
.pd-in{
  background:var(--panel);border:1px solid var(--line);border-radius:4px;
  padding:clamp(1.5rem,4vw,2.25rem);position:relative;
  box-shadow:0 24px 60px -24px rgba(42,33,24,.5);
}
.pd-x{
  position:absolute;top:.75rem;right:.9rem;
  background:none;border:none;font-size:1.6rem;line-height:1;
  color:var(--ink-soft);cursor:pointer;padding:.2rem .4rem;border-radius:3px;
}
.pd-x:hover{color:var(--ink);background:rgba(138,100,64,.08)}
.pd-eyebrow{
  font-family:var(--util);font-weight:500;font-size:12.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bronze-text);margin:0 0 .9rem;
}
.pd h2{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.4rem,3.4vw,1.9rem);line-height:1.2;margin:0 0 .6rem;
}
.pd-lede{margin:0 0 1.4rem;color:var(--ink-soft);font-weight:300;font-size:16px}

.pd-choices{display:flex;flex-direction:column;gap:.7rem}
.pd-choice{
  display:flex;flex-direction:column;gap:.3rem;text-align:left;
  border:1px solid var(--line);border-radius:3px;
  padding:1rem 1.1rem;background:var(--paper);
  text-decoration:none;color:inherit;cursor:pointer;
  font-family:inherit;font-size:inherit;
  transition:border-color .2s ease,background .2s ease;
}
.pd-choice:hover{border-color:var(--bronze);background:rgba(138,100,64,.05)}
.pd-choice b{font-family:var(--display);font-weight:400;font-size:17px}
.pd-choice span{color:var(--ink-soft);font-size:15px;font-weight:300;line-height:1.5}
.pd-choice--go{border-color:var(--bronze)}
.pd-choice--go b{color:var(--bronze-text)}

.pd-form{display:flex;flex-direction:column;gap:.8rem}
.pd-form label{
  display:flex;flex-direction:column;gap:.3rem;
  font-family:var(--util);font-weight:500;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
}
.pd-form input,.pd-form select{
  font-family:var(--body);font-size:16px;font-weight:300;
  padding:.6rem .7rem;border:1px solid var(--line-strong,rgba(138,100,64,.4));
  border-radius:3px;background:var(--paper);color:var(--ink);
  text-transform:none;letter-spacing:normal;
}
.pd-form input:focus,.pd-form select:focus{outline:2px solid var(--bronze);outline-offset:1px;border-color:var(--bronze)}
.pd-form select{appearance:none;cursor:pointer;padding-right:2rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.pd-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.pd-actions{display:flex;gap:.6rem;justify-content:flex-end;margin-top:.4rem;flex-wrap:wrap}
.pd-error{
  margin:0;padding:.6rem .8rem;border-radius:3px;
  background:#F7E6E2;color:#7C2E23;font-size:14.5px;border:1px solid #E3C2BB;
}
.pd-fine{margin:.2rem 0 0;font-size:13px;color:var(--ink-soft);font-weight:300;line-height:1.45}

@media(max-width:520px){
  .pd-row{grid-template-columns:1fr}
  .pd-actions .btn{flex:1;text-align:center}
}

.pd-optional{
  font-weight:300;letter-spacing:.1em;color:var(--ink-soft);opacity:.75;
  margin-left:.4rem;
}
.pd-form textarea{
  font-family:var(--body);font-size:16px;font-weight:300;line-height:1.5;
  padding:.6rem .7rem;border:1px solid rgba(138,100,64,.4);
  border-radius:3px;background:var(--paper);color:var(--ink);
  text-transform:none;letter-spacing:normal;resize:vertical;min-height:4.5rem;
}
.pd-form textarea:focus{outline:2px solid var(--bronze);outline-offset:1px;border-color:var(--bronze)}
.pd-form textarea::placeholder{color:var(--ink-soft);opacity:.6}

/* ---------- adăugat: pagina de reactivare ---------- */
.react-grid{
  display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
}
.react-card{
  display:flex;flex-direction:column;gap:.25rem;text-align:left;
  border:1px solid var(--line);border-radius:3px;background:var(--panel);
  padding:1rem 1.1rem;cursor:pointer;font-family:inherit;position:relative;
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.react-card:hover{border-color:var(--bronze);transform:translateY(-2px)}
.react-card.is-selected{
  border-color:var(--bronze);background:rgba(138,100,64,.07);
  box-shadow:0 0 0 1px var(--bronze) inset;
}
.react-card:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}
.react-prev{
  position:absolute;top:0;right:.9rem;transform:translateY(-50%);
  background:var(--ink);color:var(--paper);
  font-family:var(--util);font-weight:500;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;padding:.2rem .5rem;border-radius:2px;
}
.react-dur{
  font-family:var(--util);font-weight:500;font-size:12.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft);
}
.react-name{font-family:var(--display);font-weight:400;font-size:19px;color:var(--ink)}
.react-price{
  font-family:var(--util);font-weight:600;font-size:28px;line-height:1.1;
  color:var(--bronze);margin-top:.2rem;
}
.react-tag{color:var(--ink-soft);font-size:14.5px;font-weight:300;line-height:1.45;margin-top:.2rem}

/* ---------- mobil: pagina publică ---------- */
@media(max-width:640px){
  .hero{padding:clamp(48px,10vw,70px) 0 clamp(40px,8vw,60px)}
  h1{font-size:clamp(29px,7.5vw,40px);line-height:1.16}
  .lede{font-size:16.5px}

  /* Butoanele mari devin lățime completă: pe telefon se apasă cu degetul,
     iar o țintă lată e mai ușor de nimerit decât una elegantă. */
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{text-align:center;padding:15px 20px}

  .single{flex-direction:column;align-items:flex-start;gap:18px}
  .single-right{width:100%;justify-content:space-between;align-items:flex-end}
  .single .price{font-size:38px}

  .pack{padding:20px 18px}
  .pack-top{gap:12px}
  .price{font-size:40px}
  .pack .btn{align-self:stretch;text-align:center;padding:14px 20px}

  .sec-label::after{display:none}
  .track{margin:22px 0 18px}
  .faq summary{font-size:17px;padding-right:34px}

  /* Fereastra de alegere: pe telefon urcă de jos și ocupă lățimea ecranului. */
  .pd{
    max-width:100%;width:100%;margin:0;
    position:fixed;bottom:0;left:0;right:0;top:auto;
    max-height:92vh;
  }
  .pd-in{
    border-radius:12px 12px 0 0;border-bottom:none;
    padding:1.5rem 1.15rem calc(1.15rem + env(safe-area-inset-bottom));
    max-height:92vh;overflow-y:auto;
  }
  .pd h2{font-size:1.35rem}
  .pd-lede{font-size:15px;margin-bottom:1.1rem}
  .pd-choice{padding:.9rem 1rem}
  .pd-actions{flex-direction:column-reverse}
  .pd-actions .btn{width:100%;text-align:center;padding:14px 20px}
  /* Câmpurile la 16px, altfel Safari pe iPhone face zoom automat la focus. */
  .pd-form input,.pd-form select,.pd-form textarea{font-size:16px}

  .react-grid{grid-template-columns:1fr}
  .react-card{padding:.9rem 1rem}
}

/* ────────────────────────────────────────────────────────────
   Puntea către blocurile WordPress

   Landing-ul se editează acum din editor, iar textele vin din blocuri
   obișnuite — titluri, paragrafe, butoane. Regulile de mai jos le fac să
   arate ca elementele machetei, în loc să rescrie macheta pe clasele
   WordPress. Așa, fișierul de mai sus rămâne identic cu cel din varianta
   Next.js, iar diferența dintre cele două se vede în continuare dintr-o
   privire.
   ──────────────────────────────────────────────────────────── */

/* Butoanele core preiau înfățișarea butoanelor noastre. */
.wp-block-button__link{
  display:inline-block;font-family:var(--display);font-size:14px;font-weight:400;
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
  padding:13px 26px;border-radius:2px;transition:.25s ease;cursor:pointer;
  border:1px solid transparent;background:var(--ink);color:var(--paper)
}
.wp-block-button__link:hover{background:var(--bronze);color:var(--paper)}

.wp-block-button.btn-ghost .wp-block-button__link{
  background:transparent;border-color:var(--line);color:var(--ink)
}
.wp-block-button.btn-ghost .wp-block-button__link:hover{
  border-color:var(--bronze);background:rgba(138,100,64,.08);color:var(--ink)
}

/* Grupurile nu trebuie să adauge spațiere peste cea a machetei. */
.wp-block-group{margin-block-start:0;margin-block-end:0}
.hero.wp-block-group > .wrap{position:relative;z-index:1}

/* Paragraful care ține prețul: fără marginile implicite de paragraf. */
p.price{margin:0}

/* Numărul secțiunii de monitorizare vine acum ca paragraf, nu ca span. */
p.mon-num{margin-top:0}

/* Pasul din flux: eticheta e într-un paragraf, nu direct în container. */
.flow-step p:has(> b:only-child){margin:0}

/* Blocul de întrebări: `core/details` adaugă o clasă proprie. */
.faq .wp-block-details{border-bottom:1px solid var(--line)}
.faq .wp-block-details:first-of-type{border-top:1px solid var(--line)}

/* În editor, secțiunile trebuie să arate ca pe site. */
.editor-styles-wrapper .hero{padding-top:60px}

/* Blocul de butoane nu trebuie să rupă rândul acolo unde macheta punea un
   singur buton lângă preț. `wp-block-buttons` ia implicit toată lățimea. */
.single-right .wp-block-buttons{flex:0 0 auto;width:auto;margin:0}
.single-right p.price{flex:0 0 auto}

/*
 * Containerul intermediar al grupurilor nu are voie să rupă grilele.
 *
 * WordPress împachetează copiii unui grup într-un `<div
 * class="wp-block-group__inner-container">`. Pentru majoritatea secțiunilor
 * nu contează, dar acolo unde macheta pune `display:grid` — monitorizarea,
 * pașii, consultația unică — grila ajunge să aibă un singur copil: chiar
 * containerul. Rezultatul: patru carduri unul sub altul, pe o coloană
 * îngustă, cu jumătate de ecran gol lângă ele.
 *
 * `display:contents` scoate cutia din așezare și lasă copiii să participe
 * direct la grila părintelui. O singură regulă repară toate secțiunile, în
 * loc de o excepție pentru fiecare.
 */
.wp-block-group__inner-container{display:contents}