/* NO NAME — wine list navigation (see wine-nav.js).
   Without JavaScript none of this kicks in and the whole list shows, grouped by country. */

/* country headings inside each colour, with the regions below them */
.country-title {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: 12px; letter-spacing: 0.42em; text-transform: uppercase;
  color: #ff3814;
  text-shadow: 0 0 16px rgba(255,56,20,0.35);
  margin: 46px 0 0;
}
.country-title::after {
  content: ''; flex: 1 1 auto; height: 1px;
  background: linear-gradient(to right, rgba(255,56,20,0.5), transparent);
}
.country-group:first-of-type .country-title { margin-top: 30px; }

/* ── views ── */
.wn-hub, .wn-crumbs, .mf-bar { display: none; }
.wine-js .menu-section { display: none; margin-top: 0; }
.wine-js .menu-section.is-active { display: block; }
.wine-js .country-group { display: none; }
.wine-js .country-group.is-active { display: block; }
.wine-js .country-group.is-active ~ .country-group.is-active .country-title { margin-top: 46px; }
.wine-js .country-group.is-active .country-title { margin-top: 30px; }

.wine-js[data-wine-view="hub"] .wn-hub { display: block; }
.wine-js[data-wine-view="list"] .wn-crumbs { display: flex; }
.wine-js[data-wine-view="list"] .mf-bar { display: block; }
.mf-row[hidden] { display: none; }

/* ── the big rows, one per colour ── */
.wn-hub { margin: 0; border-top: 1px solid #1e1c18; }
.wn-row {
  position: relative;
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 14px;
  padding: 24px 4px 24px 0;
  border-bottom: 1px solid #1e1c18;
  color: inherit; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.wn-row::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(to right, #ff3814, rgba(255,56,20,0.3), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform 0.45s ease;
}
.wn-row .mf-cross {
  align-self: start; margin-top: 11px;
  width: 6px; height: 6px;
  transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1);
}
.wn-body { min-width: 0; }
.wn-name {
  display: block;
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: clamp(19px, 5.6vw, 27px); line-height: 1.2;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: #f4f0ea;
  transition: color 0.3s ease, letter-spacing 0.4s ease;
}
.wn-meta {
  display: block; margin-top: 9px;
  font-family: 'Space Mono', monospace; font-size: 9.5px; line-height: 1.8;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #787068;
}
.wn-dot { color: rgba(255,56,20,0.55); }
.wn-arrow {
  font-family: 'Space Mono', monospace; font-size: 16px; color: #ff3814;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}

.wn-row:focus-visible { outline: 1px solid #ff3814; outline-offset: 4px; }
.wn-row:active .wn-arrow { transform: translateX(6px); }
@media (hover: hover) {
  .wn-row:hover::after { transform: scaleX(1); }
  .wn-row:hover .wn-name { color: #ff3814; letter-spacing: 0.29em; }
  .wn-row:hover .wn-arrow { transform: translateX(6px); }
  .wn-row:hover .mf-cross { transform: rotate(90deg); }
}

/* ── the way back ── */
.wn-crumbs { margin: 0 0 14px; }
.wn-back {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  font-family: 'Space Mono', monospace; font-size: 10px;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: #a39a90; text-decoration: none;
  border: 1px solid rgba(212,46,12,0.3); border-radius: 999px;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.wn-back-arrow { color: #ff3814; letter-spacing: 0; }
.wn-back:hover, .wn-back:focus-visible { color: #f4f0ea; border-color: #ff3814; background: rgba(212,46,12,0.12); }

/* each step slides in */
.wn-enter { animation: wn-in 0.45s ease both; }
@keyframes wn-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 480px) {
  .wn-row { grid-template-columns: 20px 1fr auto; gap: 10px; padding: 20px 0; }
  .wn-name { letter-spacing: 0.2em; }
}
@media (prefers-reduced-motion: reduce) {
  .wn-enter { animation: none; }
  .wn-row::after, .wn-name, .wn-arrow, .wn-row .mf-cross { transition: none; }
}