/*!
 * cc-menu.css — bara principala si panourile de tara.
 *
 * Strat pus peste assets/route-du-vin.css, care ramane nemodificat. Tot ce e aici
 * foloseste tokenii machetei (--bordeaux, --champagne, --ivory, --border, --serif,
 * --sans, --mono, --ease, --maxw, --header-h), nu valori scrise de mana.
 *
 * Marcajul e cel din template-parts/header/mega-menu.php: clase cu prefix `cc-`
 * si atribute `data-cc-*`. Vechile clase `.nav-item` / `.mega`, pe care le conduce
 * assets/cd-mega.js, nu mai sunt emise de antet — de aceea nu se atinge niciuna
 * dintre regulile lor.
 *
 * CUPRINS
 *   01 · Bara orizontala
 *   02 · Panoul de tara
 *   03 · Cramele
 *   04 · Coloana „toate vinurile din …"
 *   05 · Acordeonul din meniul mobil
 *   06 · Miscare redusa
 *   07 · Pragul dintre bara mare si meniul mobil
 */


/* ==========================================================================
   01 · BARA ORIZONTALA
   Uppercase cu spatiere generoasa, ca in barele caselor de vin: literele poarta
   ritmul, nu chenarele.
   ========================================================================== */

.cc-nav {
  display: flex;
  align-items: center;
  height: 100%;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
}

.cc-nav__list {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cc-nav__item {
  display: flex;
  align-items: stretch;
  position: relative;
}

/* Panoul se intinde cat antetul, deci se raporteaza la `.header`, nu la element. */
.cc-nav__item--panou { position: static; }

.cc-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 100%;
  padding: 0 clamp(9px, 1.05vw, 17px);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--black);
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .3s var(--ease);
}

/* Linia subtire de sub eticheta, ca la restul temei. */
.cc-nav__link::after {
  content: "";
  position: absolute;
  left: clamp(9px, 1.05vw, 17px);
  right: clamp(9px, 1.05vw, 17px);
  bottom: 20px;
  height: 1px;
  background: var(--bordeaux);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}

.cc-nav__link:hover,
.cc-nav__item.is-open > .cc-nav__link,
.cc-nav__item.is-current > .cc-nav__link { color: var(--bordeaux); }

.cc-nav__link:hover::after,
.cc-nav__item.is-open > .cc-nav__link::after,
.cc-nav__item.is-current > .cc-nav__link::after { transform: scaleX(1); }

.cc-nav__link:focus-visible {
  outline: 2px solid var(--bordeaux);
  outline-offset: -6px;
  border-radius: 2px;
}

.cc-nav__caret {
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg);
  opacity: .55;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}

.cc-nav__item.is-open > .cc-nav__link .cc-nav__caret {
  transform: rotate(225deg);
  margin-top: 2px;
  opacity: 1;
}


/* ==========================================================================
   02 · PANOUL DE TARA
   Un singur nivel: la deschidere se vede tot. Ramane in DOM si se ascunde cu
   `visibility`, ca sa se poata anima si ca sa iasa din ordinea de tabulare cand
   e inchis — fara `hidden`, care ar taia tranzitia.
   ========================================================================== */

.cc-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 60;
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-mega);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cc-nav__item.is-open > .cc-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.cc-panel__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(30px, 3.2vw, 50px) clamp(16px, 4vw, 30px) clamp(34px, 3.6vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(232px, 284px);
  gap: clamp(28px, 3.4vw, 58px);
  align-items: start;
}

.cc-panel__main { min-width: 0; }

.cc-panel__label {
  margin: 0 0 clamp(16px, 1.6vw, 24px);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--champagne);
}


/* ==========================================================================
   03 · CRAMELE
   Coloane de text, nu grila: numarul vine din PHP in `--cc-cols` (3 pana la opt
   crame, 4 peste), iar `column-width` il coboara singur cand panoul e ingust.
   ========================================================================== */

.cc-panel__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  column-count: var(--cc-cols, 3);
  column-width: 170px;
  column-gap: clamp(24px, 2.6vw, 46px);
}

.cc-crama {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 clamp(15px, 1.5vw, 22px);
}

.cc-crama__nume {
  display: block;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.28;
  color: var(--black);
  transition: color .25s var(--ease);
}

.cc-crama__nume:hover,
.cc-crama__nume:focus-visible { color: var(--bordeaux); }

.cc-crama__tipuri {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  margin-top: 4px;
}

.cc-crama__tip {
  position: relative;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grey);
  transition: color .25s var(--ease);
}

.cc-crama__tip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: var(--champagne);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}

.cc-crama__tip:hover,
.cc-crama__tip:focus-visible { color: var(--bordeaux); }

.cc-crama__tip:hover::after,
.cc-crama__tip:focus-visible::after { transform: scaleX(1); }

.cc-crama__sep {
  color: var(--champagne);
  font-size: 11px;
  line-height: 1;
}

.cc-crama__nume:focus-visible,
.cc-crama__tip:focus-visible,
.cc-panel__all:focus-visible {
  outline: 2px solid var(--bordeaux);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ==========================================================================
   04 · COLOANA „TOATE VINURILE DIN …"
   ========================================================================== */

.cc-panel__aside { min-width: 0; }

.cc-panel__all {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: clamp(22px, 2vw, 30px);
  background: var(--ivory);
  border: 1px solid var(--border);
  border-radius: 2px;
  transition: background .35s var(--ease), border-color .35s var(--ease);
}

.cc-panel__all:hover {
  background: var(--white);
  border-color: var(--champagne);
}

.cc-panel__all-eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--champagne);
}

.cc-panel__all-title {
  font-family: var(--serif);
  font-size: clamp(19px, 1.5vw, 23px);
  line-height: 1.24;
  color: var(--black);
}

.cc-panel__all-count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--grey);
}

.cc-panel__all-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bordeaux);
}

.cc-panel__arw { transition: transform .35s var(--ease); }
.cc-panel__all:hover .cc-panel__arw { transform: translateX(5px); }

/* Sub 1200px coloana din dreapta se aseaza sub crame, ca sa nu strivim numele. */
@media (max-width: 1200px) {
  .cc-panel__inner { grid-template-columns: minmax(0, 1fr); }
  .cc-panel__all { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; }
  .cc-panel__all-line { margin-top: 0; margin-left: auto; }
}

/* Scrimul machetei, comandat de clasa noastra pe <body>. */
body.cc-menu-open .menu-scrim { opacity: 1; }


/* ==========================================================================
   05 · ACORDEONUL DIN MENIUL MOBIL
   Structura `.mm-item` / `.mm-link` / `.mm-sub` e cea a machetei; aici se adauga
   doar linkul „toate vinurile din …", care trece peste ambele coloane.
   ========================================================================== */

.mm-sub .cc-mm-all {
  column-span: all;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bordeaux);
  padding: 4px 0 12px;
}

.mm-sub .cc-mm-all:hover { color: var(--bordeaux-d); }

.cc-mm-item .mm-link:focus-visible,
.mm-sub a:focus-visible {
  outline: 2px solid var(--bordeaux);
  outline-offset: 2px;
  border-radius: 2px;
}


/* ==========================================================================
   06 · MISCARE REDUSA
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .cc-panel,
  .cc-nav__link,
  .cc-nav__link::after,
  .cc-nav__caret,
  .cc-crama__nume,
  .cc-crama__tip,
  .cc-crama__tip::after,
  .cc-panel__all,
  .cc-panel__arw {
    transition: none;
  }

  .cc-panel { transform: none; }
}


/* ==========================================================================
   07 · PRAGUL DINTRE BARA MARE SI MENIUL MOBIL
   Macheta trecea pe meniu mobil sub 1366px. Bara noua e mai compacta si intra
   confortabil de la 1000px, deci pragul coboara. Regulile rescriu exact perechea
   din route-du-vin.css (`@media(max-width:1365px)` pentru burger,
   `@media(min-width:1366px)` pentru meniul mobil): aceeasi specificitate, dar mai
   tarziu in cascada. Blocul sta la sfarsit ca sa treaca si peste `display:flex`-ul
   barei, declarat mai sus in acest fisier.
   ========================================================================== */

@media (min-width: 1000px) {
  .burger { display: none; }
  .mobile-menu { display: none; }

  /* Bara de jos e o unealta de mobil; cu meniul mare pe ecran nu mai are rost. */
  .bottom-nav { display: none; }
  body.cd--has-bottomnav { padding-bottom: 0; }
}

@media (max-width: 999.98px) {
  .cc-nav { display: none; }
  .burger { display: flex; }
}