/* Site additions on top of the base stylesheet. Loaded after it in _Layout.
   Page-specific styles live in their own files (css/nordia.css, css/nordia-liqueurs.css). */

/* ── Scroll reveal (driven by js/motion.js; content stays visible without JS) ── */
.motion-ready [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0);
  transition: opacity 1s cubic-bezier(.2,.7,.2,1) var(--d, 0s), transform 1.1s cubic-bezier(.2,.7,.2,1) var(--d, 0s); }
.motion-ready [data-reveal="left"]  { transform: translate3d(-40px, 0, 0); }
.motion-ready [data-reveal="right"] { transform: translate3d(40px, 0, 0); }
.motion-ready [data-reveal="zoom"]  { transform: scale(.94); }
.motion-ready [data-reveal].is-in { opacity: 1; transform: none; }
.motion-reduced [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ── Homepage: NORDIA Craft Liqueurs (Salmari + Terva) ── */
.lq-home { position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: #07060a; color: #fff; isolation: isolate; }
.lq-home__bg { position: absolute; inset: -10% 0; z-index: -1;
  background:
    radial-gradient(ellipse 38% 55% at 30% 62%, rgba(110, 72, 160, .55), transparent 70%),
    radial-gradient(ellipse 38% 55% at 70% 62%, rgba(176, 102, 44, .55), transparent 70%),
    linear-gradient(180deg, rgba(7,6,10,.55) 0%, rgba(7,6,10,.2) 40%, rgba(7,6,10,.92) 100%),
    url("/assets/images/aurora-borealis-69dc6a.webp") center 30% / cover no-repeat; }
.lq-home__bg::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 120%, rgba(0,0,0,.9), transparent 60%); }
.lq-eyebrow { letter-spacing: .38em; text-transform: uppercase; font-size: .78rem; color: #cfc6b8; margin: 0 0 1rem; }
.lq-title { font-family: "Libre Bodoni", Georgia, serif; font-weight: 400; color: #fff; margin: 0;
  font-size: clamp(2.4rem, 6vw, 5.4rem); line-height: 1.02; letter-spacing: .01em; }
.lq-sub { color: #d8d2c8; max-width: 46ch; margin: 1.1rem auto 0; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6; }
.lq-bottle { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #fff; }
.lq-bottle__img { position: relative; height: clamp(320px, 52vh, 560px); aspect-ratio: 500 / 1409; }
.lq-bottle__img::before { content: ""; position: absolute; inset: 8% -60% 0; z-index: -1; filter: blur(30px); opacity: .9;
  background: radial-gradient(ellipse at 50% 55%, var(--glow), transparent 65%); transition: opacity .6s; }
.lq-bottle__img img { width: 100%; height: 100%; object-fit: contain; display: block;
  -webkit-mask-image: radial-gradient(ellipse 46% 52% at 50% 50%, #000 62%, transparent 100%);
          mask-image: radial-gradient(ellipse 46% 52% at 50% 50%, #000 62%, transparent 100%);
  transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.lq-bottle:hover .lq-bottle__img img { transform: translateY(-10px) scale(1.03); }
.lq-bottle--salmari { --glow: rgba(150, 110, 220, .55); }
.lq-bottle--terva   { --glow: rgba(214, 134, 62, .55); }
.lq-bottle__name { font-family: "Libre Bodoni", Georgia, serif; font-weight: 700; letter-spacing: .28em; font-size: clamp(1.1rem, 1.8vw, 1.6rem); margin-top: 1.2rem; }
.lq-bottle__note { color: #bfb7aa; font-size: .9rem; letter-spacing: .06em; margin-top: .35rem; }
.lq-btn { display: inline-block; border: 1px solid rgba(255,255,255,.7); color: #fff; text-decoration: none; letter-spacing: .22em;
  text-transform: uppercase; font-size: .78rem; padding: 15px 34px; transition: background .3s, color .3s; }
.lq-btn:hover { background: #fff; color: #111; }
@media (max-width: 767px) {
  .lq-bottle__img { height: min(380px, 85vw); }
  .lq-bottle__note { font-size: .78rem; }
}

/* ── Shared nav: on small laptops/landscape tablets (992–1199px) the left menu ran into the centred
      logo (40px gaps). Tighten it until there's room again. ── */
@media (min-width: 992px) and (max-width: 1199px) {
  .nav-menu-block { grid-column-gap: 18px; }
  .nav-dropdown-toggle { padding-right: 24px; }
  .nav-menu-block .white-text { font-size: 14px; }
}

/* ── Age gate (Pages/Shared/_AgeGate.cshtml + js/age-gate.js) ── */
html.ag-locked, html:has(#age-gate) { overflow: hidden; }
.ag-gate { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 20px; overflow-y: auto;
  background: #05060a; color: #e9ecf2; font-family: Epilogue, Arial, sans-serif; transition: opacity .8s ease, visibility .8s; }
.ag-gate.is-leaving { opacity: 0; visibility: hidden; }
.ag-gate__bg { position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(34, 54, 201, .28), transparent 70%),
              radial-gradient(ellipse 70% 60% at 50% 110%, rgba(20, 30, 90, .55), transparent 70%),
              url("/assets/images/aurora-borealis-69dc6a.webp") center 20% / cover; opacity: .55;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.4) 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.4) 60%, transparent 100%); }
.ag-card { position: relative; width: min(100%, 520px); text-align: center; padding: clamp(2.6rem, 6vw, 3.6rem) clamp(1.4rem, 5vw, 3.2rem) 2rem;
  background: linear-gradient(180deg, rgba(14, 18, 36, .82), rgba(7, 9, 18, .92)); border: 1px solid rgba(216, 181, 106, .28);
  box-shadow: 0 40px 120px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.04); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: ag-in 1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes ag-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.ag-logo { display: block; width: 150px; height: auto; margin: 0 auto; }
.ag-rule { display: block; width: 64px; height: 3px; margin: 1.6rem auto 1.8rem; border-top: 1px solid #d8b56a; border-bottom: 1px solid #d8b56a; opacity: .8; }
.ag-title { font-family: "Libre Bodoni", Georgia, serif; font-weight: 400; color: #fff; font-size: clamp(2.2rem, 6vw, 2.9rem); line-height: 1.05; margin: 0 0 .9rem; letter-spacing: .01em; }
.ag-desc { color: #b9c0ce; font-size: 1rem; line-height: 1.65; margin: 0 auto 2rem; max-width: 34ch; }
.ag-fields { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 12px; }
.ag-field { display: flex; flex-direction: column; gap: .5rem; text-align: left; margin: 0; }
.ag-field span { font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: #8d95a8; padding-left: 2px; }
.ag-field input { width: 100%; box-sizing: border-box; height: 62px; padding: 0 12px; text-align: center; border-radius: 0;
  background: rgba(255,255,255,.04); border: 1px solid rgba(230,233,239,.22); color: #fff; outline: none;
  font-family: "Libre Bodoni", Georgia, serif; font-size: 1.6rem; letter-spacing: .12em; transition: border-color .3s, background .3s, box-shadow .3s; }
.ag-field input::placeholder { color: rgba(230,233,239,.25); letter-spacing: .12em; }
.ag-field input:focus { border-color: #d8b56a; background: rgba(216,181,106,.06); box-shadow: 0 0 0 3px rgba(216,181,106,.12); }
.ag-error { min-height: 1.4em; margin: .9rem 0 0; color: #f0a5a5; font-size: .88rem; }
.ag-gate.has-error .ag-fields { animation: ag-shake .45s; }
@keyframes ag-shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.ag-btn { width: 100%; min-height: 58px; margin-top: .8rem; border: 1px solid #e9ecf2; background: #e9ecf2; color: #05060a; cursor: pointer;
  font-family: Epilogue, Arial, sans-serif; font-size: .78rem; letter-spacing: .32em; text-transform: uppercase; transition: background .35s, color .35s; }
.ag-btn:hover, .ag-btn:focus-visible { background: transparent; color: #e9ecf2; outline: none; }
.ag-btn:disabled { opacity: .6; cursor: default; }
.ag-fine { margin: 1.6rem auto 0; max-width: 40ch; font-size: .76rem; line-height: 1.6; color: #7d8598; }
.ag-fine a { color: #b9c0ce; }
.ag-resp { margin: 2rem 0 0; padding-top: 1.3rem; border-top: 1px solid rgba(230,233,239,.1); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: #6c7488; }
.ag-step--denied { display: none; }
.ag-gate.is-denied .ag-step--ask { display: none; }
.ag-gate.is-denied .ag-step--denied { display: block; animation: ag-in .8s cubic-bezier(.2,.7,.2,1) both; }
@media (max-width: 420px) { .ag-fields { gap: 8px; } .ag-field input { height: 56px; font-size: 1.3rem; padding: 0 6px; } .ag-field span { letter-spacing: .18em; } }
@media (prefers-reduced-motion: reduce) { .ag-card, .ag-gate.has-error .ag-fields { animation: none; } }

/* ── Homepage liqueurs: large bottles either side, copy in the middle ── */
.lq-home__grid { display: grid; grid-template-columns: 1fr minmax(0, 1.1fr) 1fr; align-items: end; gap: clamp(1rem, 4vw, 4rem);
  width: 100%; max-width: 1400px; padding: 7rem clamp(20px, 4vw, 48px) 5rem; }
.lq-home__copy { text-align: center; align-self: center; }
.lq-home__copy .lq-title em { font-style: italic; color: #e7c98d; }
.lq-home .lq-bottle__img { height: clamp(420px, 78vh, 780px); }
.lq-home .lq-bottle__img::before { inset: 4% -45% 0; filter: blur(46px); opacity: 1; }
.lq-home .lq-bottle--salmari { justify-self: end; }
.lq-home .lq-bottle--terva { justify-self: start; }
.lq-home .lq-btn { margin-top: 2.2rem; }
@media (max-width: 991px) {
  .lq-home__grid { grid-template-columns: 1fr 1fr; grid-template-areas: "copy copy" "s t"; padding-top: 6.5rem; }
  .lq-home__copy { grid-area: copy; margin-bottom: 1.4rem; }
  .lq-home .lq-bottle--salmari { grid-area: s; justify-self: center; }
  .lq-home .lq-bottle--terva { grid-area: t; justify-self: center; }
  .lq-home .lq-bottle__img { height: min(56vh, 460px); }
}
@media (max-width: 480px) { .lq-home .lq-bottle__img { height: min(48vh, 360px); } }

/* ── Brands dropdown: compact, left-aligned panel (replaces the full-screen overlay) ── */
.nav-dropdown-list.pe-brands.w--open { position: absolute; top: calc(100% + 14px); left: 0; right: auto; height: auto; min-width: 290px;
  padding: 1.1rem 0 .8rem; gap: 0; display: flex; flex-direction: column; align-items: stretch;
  background: rgba(8, 10, 20, .94); background-image: none; border: 1px solid rgba(216, 181, 106, .28); border-top: 2px solid #d8b56a;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.pe-brands__label { padding: 0 1.4rem .6rem; letter-spacing: .34em; text-transform: uppercase; font-size: .62rem; color: #d8b56a; }
.nav-dropdown-list .pe-brands__item { display: flex; flex-direction: column; gap: .2rem; padding: .7rem 1.4rem; font-size: 1rem; line-height: 1.25;
  border-left: 2px solid transparent; transition: background .3s, border-color .3s; }
.nav-dropdown-list .pe-brands__item:hover, .nav-dropdown-list .pe-brands__item:focus-visible { background: rgba(255,255,255,.04); border-left-color: #d8b56a; }
.nav-dropdown-list .pe-brands__item.w--current { border-left-color: #a9c4ff; }
.pe-brands__name { font-family: "Libre Bodoni", Georgia, serif; font-size: 1.02rem; color: #fff; letter-spacing: .01em; }
.pe-brands__note { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #8d95a8; }
@media screen and (max-width: 991px) {
  .nav-dropdown-list.pe-brands.w--open { position: static; min-width: 0; padding: .3rem 0 .4rem; background: transparent; border: 0; border-left: 1px solid rgba(216,181,106,.4);
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; margin: .2rem 0 .4rem; }
  .pe-brands__label { display: none; }
  .nav-dropdown-list .pe-brands__item { padding: .55rem 1rem; }
  .pe-brands__name { font-size: .98rem; }
  .pe-brands__note { font-size: .62rem; }
}
@media screen and (max-width: 767px) { .nav-dropdown { align-items: flex-start; } }
.nav-dropdown-list.pe-brands.w--open { background: #080a14; }
@media screen and (max-width: 991px) { .nav-menu-three { background-color: rgba(8, 10, 20, .985); } }