/* ============================================================
   SURUBURI-HOLSURUBURI.RO — STRATUL WORDPRESS

   `styles.css` este copia neatinsă a machetei și acoperă tot ce
   ține de design. Aici stau DOAR regulile impuse de markup-ul pe
   care WordPress/WooCommerce îl generează și pe care nu îl putem
   rescrie dintr-un template: tipografia conținutului din editor
   (`.entry-content`) și clasele de bază ale platformei
   (alinieri, legende, `.screen-reader-text`, bara de administrare).

   Totul este exprimat în variabilele existente din `:root`. Dacă
   ai nevoie de o culoare sau de un radius nou, e semn că regula nu
   își are locul aici.
   ============================================================ */

/* ============================================================
   1. .entry-content — conținut din editorul de blocuri
   Reia scara tipografică a machetei: corpul din `.story`,
   titlurile din `.info-card` / `.pd-block`, tabelele din
   `.spec-table`.
   ============================================================ */
.entry-content {
  color: var(--body);
  font-size: 1.05rem;
  line-height: 1.85;
}
.entry-content > :first-child { margin-top: 0; }
.entry-content > :last-child { margin-bottom: 0; }

/* Alinierile flotante trebuie închise, altfel ies din secțiune. */
.entry-content::after { content: ""; display: block; clear: both; }

.entry-content p { margin-bottom: 1.4rem; }
.entry-content strong, .entry-content b { color: var(--ink); font-weight: 700; }
.entry-content a { text-decoration: underline; }

.entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
  margin: 2.4rem 0 0.9rem;
}
.entry-content h2 { font-size: 1.5rem; }
.entry-content h3 { font-size: 1.2rem; }
.entry-content h4, .entry-content h5, .entry-content h6 { font-size: 1rem; }

/* Reset-ul machetei scoate bulinele de pe toate listele; conținutul
   redactat de client are nevoie de ele înapoi. */
.entry-content ul, .entry-content ol { margin: 0 0 1.4rem 1.4rem; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin-bottom: 0.5rem; }
.entry-content li::marker { color: var(--accent); }
.entry-content li > ul, .entry-content li > ol { margin: 0.5rem 0 0 1.2rem; }

.entry-content blockquote {
  margin: 0 0 1.4rem;
  padding: 0.2rem 0 0.2rem 1.2rem;
  border-left: 3px solid var(--accent);
  color: var(--muted);
}
.entry-content blockquote cite {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.8rem;
  font-style: normal;
  color: var(--muted);
}

.entry-content code, .entry-content kbd {
  background: var(--panel-2);
  border-radius: var(--r-sm);
  padding: 0.1em 0.4em;
  font-size: 0.9em;
}
.entry-content pre {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.4rem;
  overflow-x: auto;
  font-size: 0.88rem;
  line-height: 1.6;
}
.entry-content pre code { background: none; padding: 0; }

/* Tabele — aceeași înfățișare ca fișa tehnică a produsului. */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  font-size: 0.9rem;
}
.entry-content th, .entry-content td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--line);
}
.entry-content thead th {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.entry-content td { color: var(--ink); font-feature-settings: "tnum" 1; }
.entry-content tbody tr:nth-child(even) th,
.entry-content tbody tr:nth-child(even) td { background: var(--panel); }
.entry-content tr:last-child th,
.entry-content tr:last-child td { border-bottom: none; }
/* Un tabel lat scrollează în interiorul figurii, nu împinge pagina. */
.entry-content .wp-block-table { overflow-x: auto; }

.entry-content img { border-radius: var(--r); }
.entry-content figure { margin-bottom: 1.6rem; }
.entry-content figcaption {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}

.entry-content hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.4rem 0;
}

/* ============================================================
   2. Clasele de bază WordPress
   ============================================================ */
.alignleft { float: left; margin: 0.3rem 1.6rem 1.2rem 0; }
.alignright { float: right; margin: 0.3rem 0 1.2rem 1.6rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

.wp-caption { max-width: 100%; margin-bottom: 1.6rem; }
.wp-caption img { border-radius: var(--r); }
.wp-caption-text {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}

/* Echivalentul `.sr-only` al machetei, sub numele cerut de WordPress. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: fixed !important;
  top: 0.5rem; left: 0.5rem;
  z-index: 4000;
  width: auto; height: auto;
  clip: auto;
  margin: 0;
  padding: 0.6rem 1rem;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  border-radius: var(--r);
}

/* Bara de administrare stă fixă peste antetul `position: sticky`,
   peste sertar și peste link-ul de salt. Sub 600px WordPress o face
   `absolute`, deci offset-ul dispare. */
.admin-bar .topbar,
.admin-bar .drawer { top: 32px; }
.admin-bar .skip-link { top: 2.5rem; }

@media screen and (max-width: 782px) {
  .admin-bar .topbar,
  .admin-bar .drawer { top: 46px; }
  .admin-bar .skip-link { top: 3.4rem; }
}

@media screen and (max-width: 600px) {
  .admin-bar .topbar,
  .admin-bar .drawer { top: 0; }
  .admin-bar .skip-link { top: 0.5rem; }
}

/* ============================================================
   3. AJUSTĂRI PE ZONE
   Reguli impuse de markup-ul WooCommerce în zone anume.
   ============================================================ */

/* ============================================================
   CATALOG — singurele reguli impuse de WordPress/WooCommerce.
   ============================================================ */

/* Cipurile de categorie și cele de paginare sunt linkuri reale, ca filtrarea
   să funcționeze și fără JS. Macheta folosea <button>, deci `.chip` nu
   anula sublinierea pe care regula globală `a:hover` o pune pe orice link. */
.chip:hover { text-decoration: none; }

/* wc-add-to-cart.js adaugă după buton un link „Vezi coșul" pe care nu-l putem
   dezactiva din PHP; adăugarea e deja anunțată de coșul din antet. */
.product-card .added_to_cart { display: none; }

/* ============================================================
   CHECKOUT — ajustări impuse de WooCommerce
   Doar pentru markup pe care nu îl putem suprascrie din template.
   ============================================================ */

/* checkout.js rescrie eticheta butonului cu jQuery .text() de fiecare dată
   când se schimbă metoda de plată, ștergând orice <i> din interior. Iconița
   de lacăt din machetă vine deci din CSS. */
#place_order::before {
  content: "\f023";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.9em;
  line-height: 1;
}

/* Cuponul are formular propriu (HTML nu permite formulare imbricate în cel al
   comenzii), deci stă deasupra layoutului, nu în cardul de sumar: îl ținem
   la lățimea câmpului din sumarul coșului. */
.checkout_coupon.coupon-row { max-width: 420px; }

/* Textul de confidențialitate pe care WooCommerce îl injectează lângă acordul
   cu termenii — aceeași scară tipografică cu restul casetelor bifabile. */
.woocommerce-privacy-policy-text p {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 0.8rem;
}

/* Notificările WooCommerce (erori de validare, cupon aplicat, coș gol) nu au
   corespondent în macheta statică, dar apar pe coș, checkout și cont. */
.woocommerce-NoticeGroup { margin-bottom: 1.6rem; }
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line-2);
  border-left-width: 3px;
  border-radius: var(--r);
  background: var(--panel-2);
  color: var(--body);
  font-size: 0.86rem;
  line-height: 1.6;
}
.woocommerce-error { border-left-color: var(--alert); }
.woocommerce-info { border-left-color: var(--accent); }
.woocommerce-message { border-left-color: var(--success); }
.woocommerce-error li + li,
.woocommerce-info li + li,
.woocommerce-message li + li { margin-top: 0.4rem; }

/* ------------------------------------------------------------
   Zona de cont (my account)
   ------------------------------------------------------------ */

/* WooCommerce își plutește contul pe două coloane (30% / 68%). Noi punem
   meniul ca bandă de chip-uri deasupra conținutului, deci anulăm plutirea;
   nu se poate scoate din template, vine din CSS-ul plugin-ului. */
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content { float: none; width: auto; }

/* Banda de chip-uri stă direct în container, nu în bara de filtre, deci
   își aduce singură spațiul până la conținut. */
.woocommerce-MyAccount-navigation { margin-bottom: 2rem; }

/* Elementele meniului sunt link-uri, iar `aria-pressed` e valid doar pe
   butoane — aceleași valori ca `.chip[aria-pressed="true"]`. */
.chip[aria-current="page"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.chip[aria-current="page"]:hover { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.chip[aria-current="page"] .chip-count { opacity: 1; color: rgba(255, 255, 255, 0.92); }

/* Miniaturile din cardul de comandă: istoricul demo nu avea imagini, comenzile
   reale au. Doar așezarea — chenarul și dimensiunea vin din `.qo-thumb`. */
.order-thumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.order-thumbs .order-more { align-self: center; font-size: 0.78rem; font-weight: 700; color: var(--muted); }

/* ------------------------------------------------------------
   baza — template-urile generice (page, single, archive, search,
   404, searchform, comments).
   ------------------------------------------------------------ */

/* `searchform.php` refolosește caseta `.nav-search` din antet. În antet
   este ascunsă sub 1140px pentru că îi ia locul sertarul mobil; într-o
   pagină (404, căutare fără rezultate) nu există sertar, deci trebuie să
   rămână vizibilă. O ținem la lățimea casetei din antet, centrată, ca
   lista de sugestii (`.search-suggest`, ancorată la dreapta formularului)
   să cadă tot sub ea. */
#main .nav-search {
  display: flex;
  width: min(100%, 340px);
  margin: 1.4rem auto 0;
}
#main .nav-search-input { width: 100%; }

/* Lupa formularului și iconița mare a stării goale sunt amândouă `<i>`, deci
   `.empty-state i` (declarat mai jos în styles.css) o umflă la 2,4rem când
   punem căutarea în starea goală. O readucem la mărimea din antet. */
#main .empty-state .nav-search i { font-size: 0.8rem; }

/* ------------------------------------------------------------
   Galeria de produs
   Macheta avea o singură fotografie pe produs; catalogul real are
   în medie cinci. Banda de miniaturi stă sub imaginea mare, în
   coloana ei, și folosește aceiași tokeni ca restul cardurilor.
   ------------------------------------------------------------ */
.pd-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.75rem;
}
.pd-thumb {
  width: 68px;
  height: 68px;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: border-color var(--t-ui), box-shadow var(--t-ui);
}
.pd-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pd-thumb:hover { border-color: var(--line-2); }
.pd-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pd-thumb.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}