/* ============================================================
   LAYOUT — container, antet, sectiuni, subsol
   ============================================================ */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- ANTET ----------
   Lipirea sta pe <header>, nu pe bara interioara. `position: sticky` tine doar
   cat timp blocul care il contine e in cadru; pe un element interior scurt,
   bara s-ar dezlipi imediat ce derulezi peste el.
   `top` negativ cat bara subtire: aceea se retrage la derulare si ramane lipita
   doar bara principala. */
.site-header {
  position: sticky;
  top: calc(-1 * var(--topbar-h));
  z-index: 100;
  background: var(--c-bar);
  color: var(--c-white);
}

.topbar {
  height: var(--topbar-h);
  background: rgb(0 0 0 / 25%);
  font-size: var(--wp--preset--font-size--sm, 0.8125rem);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  height: 100%;
}

.topbar__item {
  margin: 0;
  color: rgb(255 255 255 / 78%);
}

.headbar__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-5);
  padding-block: var(--s-4);
}

.brand__name {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-white);
}

.brand__name:hover {
  color: var(--c-white);
}

.headbar__actions {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.action {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--c-white);
  font-size: var(--wp--preset--font-size--sm, 0.8125rem);
  font-weight: 500;
}

.action:hover {
  color: var(--c-white);
  opacity: 0.8;
}

.action__badge {
  position: absolute;
  top: -6px;
  left: 12px;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  border-radius: 999px;
  background: var(--c-action);
  color: var(--c-white);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.navbar {
  background: rgb(255 255 255 / 8%);
}

.navbar__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.navbar__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border: 0;
  background: var(--c-action);
  color: var(--c-white);
  font-size: var(--wp--preset--font-size--sm, 0.8125rem);
  font-weight: 600;
}

.navbar__menu {
  display: flex;
  gap: var(--s-5);
}

.navbar__menu a {
  display: inline-block;
  padding-block: var(--s-3);
  color: rgb(255 255 255 / 88%);
  font-size: var(--wp--preset--font-size--sm, 0.8125rem);
}

.navbar__menu a:hover {
  color: var(--c-white);
}

/* Pagina curenta marcata cu subliniere, nu doar cu culoare: WCAG 1.4.1 cere sa
   nu lasi culoarea singura sa transmita o stare. */
.navbar__menu .current-menu-item > a {
  color: var(--c-white);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

/* ---------- SECTIUNI ---------- */

.site-main {
  padding-bottom: var(--s-8);
}

.section {
  margin-top: var(--s-7);
}

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

.section__title {
  font-size: var(--wp--preset--font-size--xl, 1.5rem);
  font-weight: 500;
}

.section__more {
  color: var(--c-action);
  font-size: var(--wp--preset--font-size--sm, 0.8125rem);
  font-weight: 600;
}

.page-title {
  margin-block: var(--s-6) var(--s-4);
  font-size: var(--wp--preset--font-size--xxl, 1.875rem);
  font-weight: 600;
}

/* ---------- SUBSOL ---------- */

.site-footer {
  margin-top: var(--s-8);
  background: var(--c-bar);
  color: rgb(255 255 255 / 78%);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  padding-block: var(--s-6);
}

.site-footer__brand {
  margin: 0 0 var(--s-2);
  color: var(--c-white);
  font-size: 1.125rem;
  font-weight: 700;
}

.site-footer__menu a {
  display: block;
  padding-block: var(--s-1);
  color: inherit;
}

.site-footer__menu a:hover {
  color: var(--c-white);
}

.site-footer__bottom {
  border-top: 1px solid rgb(255 255 255 / 12%);
  font-size: var(--wp--preset--font-size--sm, 0.8125rem);
}

.site-footer__bottom p {
  margin: 0;
  padding-block: var(--s-4);
}

/* ---------- MOBIL ---------- */

@media (max-width: 860px) {
  /* Bara subtire dispare: 34px din putinul spatiu vertical nu merita, iar bara
     principala se lipeste atunci direct la 0. */
  .topbar {
    display: none;
  }

  .site-header {
    top: 0;
  }

  .headbar__inner {
    grid-template-columns: auto auto;
    grid-template-areas:
      "brand actions"
      "search search";
    gap: var(--s-3);
  }

  .brand {
    grid-area: brand;
  }

  .headbar__actions {
    grid-area: actions;
  }

  .site-search {
    grid-area: search;
  }

  .action__label {
    display: none;
  }

  .navbar__menu {
    display: none;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
  }
}

/* Paginile simple: continutul respira, iar blocurile native de cos si checkout
   primesc acelasi fundal de card ca restul componentelor.

   `site-page`, nu `page`: WordPress pune clasa `page` pe <body> la orice pagina
   statica, deci `.page { padding-block: ... }` se aplica si pe body — padding
   dublu pe cos, checkout si toate paginile. E a doua oara cand un nume generic
   se ciocneste cu o clasa de body (prima a fost `.search`, vezi lectia 4).
   Garda 6 din tests/test-theme.sh il prinde acum. */
.site-page {
  padding-block: var(--s-6) var(--s-8);
}

.site-page__content > .wp-block-woocommerce-cart,
.site-page__content > .wp-block-woocommerce-checkout {
  margin-top: var(--s-5);
}

/* ---------- PANOUL DE CATEGORII ----------
   Butonul din bara deschide panoul; meniul de langa el duce la altceva.
   Inainte butonul statea langa aceleasi categorii insirate pe orizontala si
   n-avea ce sa deschida — de acolo venea senzatia ca „nu are sens". */

.navbar__inner {
  position: relative;
}

.navbar__toggle[aria-expanded="true"] {
  background: var(--c-action-dark);
}

.cat-panel {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 90;
  border-top: 1px solid rgb(255 255 255 / 10%);
  background: var(--c-surface);
  box-shadow: var(--shadow-md);
}

.cat-panel__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
  padding-block: var(--s-5);
}

.cat-panel__parent {
  /* Numarul sta lipit de nume, nu impins in marginea coloanei: pe o coloana
     lata parea o cifra ratacita, fara legatura cu categoria. */
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
  color: var(--c-ink);
  font-weight: 600;
}

.cat-panel__count {
  color: var(--c-muted);
  font-size: var(--wp--preset--font-size--sm, 0.8125rem);
  font-weight: 400;
}

.cat-panel__kids {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.cat-panel__kids a {
  color: var(--c-muted);
  font-size: var(--wp--preset--font-size--sm, 0.8125rem);
}

.cat-panel__kids a:hover {
  color: var(--c-action);
}

/* Butonul cu trei puncte apare doar pe ecrane mici, unde meniul nu incape. */
.navbar__more {
  display: none;
  padding: var(--s-3);
  border: 0;
  background: transparent;
  color: var(--c-white);
}

@media (max-width: 860px) {
  .navbar__more {
    display: inline-flex;
    margin-left: auto;
  }

  .navbar__toggle {
    flex: 1;
    justify-content: center;
  }

  .cat-panel__inner {
    grid-template-columns: 1fr;
    gap: var(--s-4);
    max-height: 70vh;
    overflow-y: auto;
  }

  /* Pe telefon panoul arata doar categoriile principale: lista completa ar fi
     prea lunga si ar ascunde tot ce urmeaza. */
  .cat-panel__kids {
    display: none;
  }

  /* Meniul secundar devine lista verticala sub bara. */
  .navbar__menu.is-open {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: var(--s-2) var(--gutter);
    background: var(--c-bar);
    box-shadow: var(--shadow-md);
  }
}