/* ════════════════════════════════════════════════════════════
   AKVA Italia — Base stylesheet
   Load order: 1 of 2  (akva-base.css → akva-components.css)

   Covers: tokens · resets · full-bleed fix · nav · footer ·
           utilities · buttons · animations · interior-page hero
           pattern · keyframes · responsive base

   Asset Injector: set to "All pages", weight 0
   DO NOT put page-specific styles here.
   ════════════════════════════════════════════════════════════ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Jost:wght@300;400;500&display=swap');

/* ══════════════════════════════════════════
   1. DESIGN TOKENS
   Single source of truth for the whole site.
   ══════════════════════════════════════════ */
:root {
  /* Colour */
  --akva-ink:        #1a1a18;
  --akva-ink-soft:   #3d3d39;
  --akva-stone:      #57564e;
  --akva-mist:       #e8e6e0;
  --akva-cream:      #f5f3ee;
  --akva-white:      #fdfcfa;
  --akva-water:      #3a6b8a;
  --akva-water-md:   #6899b2;
  --akva-water-pale: #d4e4ef;
  --akva-gold:       #b89a5e;
  --akva-gold-lt:    #d4bc89;
  --akva-whatsapp:   #25D366;

  /* Typography */
  --akva-serif:      'Cormorant Garamond', Georgia, serif;
  --akva-sans:       'Jost', system-ui, sans-serif;

  /* Motion */
  --akva-transition: 0.3s ease;
  --akva-t:          0.3s ease;
}

/* ══════════════════════════════════════════
   2. RESETS & BASE
   ══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--akva-sans);
  font-weight: 300;
  color: var(--akva-ink);
  background: var(--akva-white);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { transition: color var(--akva-transition); }

/* ══════════════════════════════════════════
   3. DRUPAL / BOOTSTRAP BARRIO LAYOUT FIXES
   Removes gutters so sections can be full-bleed.
   ══════════════════════════════════════════ */
div#main.container-fluid,
div#main.container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
div#main > .row.row-offcanvas {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
main.main-content.col#content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.node__content > .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.layout-builder__layout.row {
  --bs-gutter-x: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.layout-builder__layout > [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Re-contain sections that should NOT be edge-to-edge */
.layout-builder__layout .block-content-basic .content > .section {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 48px;
  padding-right: 48px;
}
.highlighted aside { padding: 0; }
.node__content { margin-top: 0 !important; }

/* ══════════════════════════════════════════
   4. NAVIGATION
   #navbar-main = the <nav> element Barrio renders.
   JS strips .scrolled / .akva-nav--scrolled on load,
   then re-adds .scrolled on scroll > 55px.
   ══════════════════════════════════════════ */

/* Default: always transparent, no shadow */
#navbar-main {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1050;
  height: 70px;
  display: flex;
  align-items: center;
  padding: 0 5vw;
  background: transparent !important;
  box-shadow: none !important;
  transition: background 0.4s, box-shadow 0.4s;
}

/* Kill any background Barrio injects on child wrappers */
#navbar-main .navbar-collapse,
#navbar-main .container,
#navbar-main .container-fluid {
  background: transparent !important;
}

/* Scrolled state — JS adds .scrolled on scroll > 55px */
#navbar-main.scrolled {
  background: rgba(253,252,250,0.96) !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(26,26,24,0.09) !important;
}

/* Brand / logo */
.akva-nav-brand {
  display: flex;
  align-items: center;
  height: 70px;
}
.akva-nav-brand img {
  max-height: 36px;
  width: auto;
  height: auto;
  transition: filter 0.3s ease;
}
#navbar-main.scrolled .akva-nav-brand img {
  filter: invert(1) brightness(0.25);
}

/* Nav logo text (fallback if no image) */
.akva-nav-logo {
  font-family: var(--akva-serif);
  font-size: 22px; font-weight: 400;
  letter-spacing: 0.14em;
  color: #fff; text-decoration: none; flex-shrink: 0;
}
#navbar-main.scrolled .akva-nav-logo { color: var(--akva-ink); }

/* Desktop link list */
.akva-nav-links {
  display: flex; gap: 2rem;
  list-style: none; margin: 0 auto; padding: 0;
}
.akva-nav-links a {
  font-size: 11.5px; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.8); text-decoration: none;
}
#navbar-main.scrolled .akva-nav-links a { color: var(--akva-ink-soft); }
.akva-nav-links a:hover,
#navbar-main.scrolled .akva-nav-links a:hover { color: var(--akva-gold) !important; }

/* CTA button */
.akva-nav-cta {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: #fff; border: 1px solid rgba(255,255,255,0.45);
  padding: 8px 20px; text-decoration: none; white-space: nowrap;
  transition: all var(--akva-transition);
}
#navbar-main.scrolled .akva-nav-cta { color: var(--akva-ink); border-color: var(--akva-ink); }
.akva-nav-cta:hover {
  background: var(--akva-gold) !important;
  border-color: var(--akva-gold) !important;
  color: #fff !important;
}

/* Hamburger toggler */
.akva-nav-toggler { color: #fff; border-color: rgba(255,255,255,0.3); }
#navbar-main.scrolled .akva-nav-toggler { color: var(--akva-ink); border-color: rgba(26,26,24,0.3); }

/* Layout helpers */
.akva-menu-wrapper { display: flex !important; align-items: center; justify-content: center; flex: 1; }
.akva-nav-center   { margin: 0 auto; }
.akva-nav-right    { margin-left: auto; }

/* ── Mobile / Tablet Nav ≤ 991px ── */
@media (max-width: 991.98px) {
  #navbar-main {
    height: auto !important;
    max-height: 100dvh;
    overflow-y: auto;
    align-items: flex-start !important;
    flex-wrap: wrap;
  }

  /* Target every possible selector Bootstrap might use */
  #CollapsingNavbar,
  #navbar-main .navbar-collapse,
  #navbar-main .collapse,
  div#CollapsingNavbar.collapse,
  div#CollapsingNavbar.navbar-collapse {
    width: 100% !important;
    background: #1a1a18 !important; /* hardcoded, not var() — rules out token resolution failure */
    padding: 4px 0 16px !important;
    margin-top: 0 !important;
  }

  #navbar-main .nav-item { width: 100%; }

  #CollapsingNavbar .nav-item a {
    color: rgba(253,252,250,0.85) !important;
    display: block !important;
    padding: 10px 20px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    font-size: 13px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    background: transparent !important;
  }

  #CollapsingNavbar .nav-item:last-child a { border-bottom: none !important; }

  #CollapsingNavbar .nav-item a:hover {
    color: var(--akva-gold) !important;
    background: rgba(255,255,255,0.03) !important;
  }

  #block-akvaitalia-ctafornav {
    width: 100%;
    padding: 10px 20px 6px;
    order: 99;
  }

  .akva-nav-cta {
    display: inline-block !important;
    margin-left: 0 !important;
    margin-top: 4px;
    font-size: 11px;
    padding: 8px 18px;
  }
}

/* ══════════════════════════════════════════
   5. INTERIOR-PAGE HERO  (shared pattern)
   ══════════════════════════════════════════ */
.akva-page-hero,
.akva-contact-hero,
.akva-faq-hero,
.akva-pdp-hero,
.akva-privacy-hero,
.akva-benefits-hero {
  background: var(--akva-ink);
  padding: 70px 0 0;
  position: relative;
  overflow: hidden;
}

.akva-page-hero::before,
.akva-contact-hero::before,
.akva-faq-hero::before,
.akva-pdp-hero::before,
.akva-privacy-hero::before,
.akva-benefits-hero::before {
  position: absolute;
  font-family: var(--akva-serif);
  font-size: clamp(100px, 18vw, 220px);
  font-weight: 300;
  color: rgba(255,255,255,0.025);
  bottom: -20px; right: -20px;
  white-space: nowrap; pointer-events: none;
  letter-spacing: 0.2em; line-height: 1;
}

.akva-faq-hero::before     { content: 'F A Q'; }
.akva-contact-hero::before { content: 'CONTATTI'; }
.akva-pdp-hero::before     { content: 'PROVA'; font-size: clamp(120px,20vw,240px); bottom: -10px; right: -10px; }
.akva-privacy-hero::before { content: 'PRIVACY'; font-size: clamp(120px,20vw,240px); bottom: -10px; right: -10px; }
.akva-benefits-hero::before{ content: 'BENEFICI'; }

.akva-page-hero-inner,
.akva-contact-hero-inner,
.akva-faq-hero-inner,
.akva-pdp-hero-inner {
  padding: 64px 0 72px;
  position: relative; z-index: 1;
}
.akva-pdp-hero-inner { padding: 56px 0 0; }

.akva-page-hero-eyebrow,
.akva-contact-hero-eyebrow,
.akva-hero-eyebrow,
.akva-pdp-hero-eyebrow {
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--akva-gold-lt); display: block;
  margin-bottom: 22px;
  animation: akvaFadeUp 0.9s 0.2s both;
}
.akva-pdp-hero-eyebrow { margin-bottom: 18px; }

.akva-page-hero-title,
.akva-contact-hero-title,
.akva-hero-title {
  font-family: var(--akva-serif); font-weight: 300;
  font-size: clamp(40px, 5.5vw, 76px); line-height: 1.07;
  color: #fff; margin-bottom: 22px;
  animation: akvaFadeUp 0.9s 0.4s both;
}
.akva-page-hero-title em,
.akva-contact-hero-title em,
.akva-hero-title em { font-style: italic; color: var(--akva-water-md); }

.akva-page-hero-sub,
.akva-contact-hero-sub,
.akva-hero-sub,
.akva-pdp-hero-sub {
  font-size: 16px; font-weight: 300;
  color: rgba(253,252,250,0.65); line-height: 1.8;
  max-width: 480px;
  animation: akvaFadeUp 0.9s 0.6s both;
}
.akva-pdp-hero-sub { font-size: 15px; max-width: 500px; margin-top: 18px; margin-bottom: 36px; }

/* ══════════════════════════════════════════
   6. UTILITY CLASSES
   ══════════════════════════════════════════ */
.akva-eyebrow {
  font-family: var(--akva-sans);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--akva-gold); display: block; margin-bottom: 14px;
}
.akva-h1 {
  font-family: var(--akva-serif); font-weight: 300;
  font-size: clamp(48px, 7vw, 88px); line-height: 1.06; color: #fff;
}
.akva-h1 em { font-style: italic; color: var(--akva-water-md); }
.akva-h2 {
  font-family: var(--akva-serif); font-weight: 300;
  font-size: clamp(32px, 4.5vw, 58px); line-height: 1.1; color: var(--akva-ink);
}
.akva-h2-light { color: #fff; }
.akva-h2 em, .akva-h2-light em { font-style: italic; color: var(--akva-water-md); }
.akva-lead { font-size: 17px; font-weight: 300; color: var(--akva-stone); line-height: 1.8; }
.akva-lead-light { color: rgba(253,252,250,0.65); }

/* ── Buttons ── */
.btn-akva-primary {
  font-family: var(--akva-sans); font-size: 11px; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase;
  background: var(--akva-gold); color: #fff !important;
  border: 1px solid var(--akva-gold); padding: 14px 38px;
  text-decoration: none; border-radius: 0;
  display: inline-block; transition: all var(--akva-transition);
}
.btn-akva-primary:hover { background: var(--akva-gold-lt); border-color: var(--akva-gold-lt); }

.btn-akva-ghost {
  font-family: var(--akva-sans); font-size: 11px; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase;
  background: transparent; color: #fff !important;
  border: 1px solid rgba(253,252,250,0.45); padding: 14px 38px;
  text-decoration: none; border-radius: 0;
  display: inline-block; transition: all var(--akva-transition);
}
.btn-akva-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

.btn-akva-outline {
  font-family: var(--akva-sans); font-size: 11px; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase;
  background: transparent; color: var(--akva-ink) !important;
  border: 1px solid var(--akva-ink); padding: 12px 32px;
  text-decoration: none; border-radius: 0;
  display: inline-block; transition: all var(--akva-transition);
}
.btn-akva-outline:hover { background: var(--akva-ink); color: #fff !important; }

/* ── Scroll reveal (Intersection Observer) ── */
.akva-reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.akva-reveal.is-visible { opacity: 1; transform: none; }

/* ══════════════════════════════════════════
   7. FOOTER
   ══════════════════════════════════════════ */
.akva-footer {
  background: var(--akva-ink);
  padding: 50px 0 32px;
}
.akva-footer-brand {
  font-family: var(--akva-serif); font-size: 26px; font-weight: 300;
  color: rgba(253,252,250,0.35); letter-spacing: 0.15em; height: 50px;
}
.akva-footer-tagline {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(253,252,250,0.4); margin-top: 5px;
}
.akva-footer-divider {
  border-top: 1px solid rgba(255,255,255,0.06);
  margin: 32px 0 24px;
}
.akva-footer-col-title {
  font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase;
  color: rgba(253,252,250,0.5); display: block; margin-bottom: 14px;
}
.akva-footer-links { list-style: none; padding: 0; margin: 0; }
.akva-footer-links li { margin-bottom: 9px; }
.akva-footer-links a {
  font-size: 13px; font-weight: 300;
  color: rgba(253,252,250,0.5); text-decoration: none;
}
.akva-footer-links a:hover { color: var(--akva-gold); }
.akva-footer-copy { font-size: 11px; color: rgba(253,252,250,0.5); }
.akva-footer-cert { font-size: 11px; color: rgba(253,252,250,0.5); text-align: right; }
.akva-footer-cert a { font-size: 11px; color: rgba(253,252,250,0.5); text-decoration: none; }
.akva-footer-cert a:hover { color: var(--akva-gold); }
.site-footer__bottom {
  letter-spacing: 0.5px !important;
  margin-top: 0 !important;
  border-top: 0 !important;
}

/* ══════════════════════════════════════════
   8. KEYFRAMES
   ══════════════════════════════════════════ */
@keyframes akvaFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes akvaFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes akvaScrollDrop {
  0%   { top: -100%; }
  100% { top: 200%; }
}

/* ══════════════════════════════════════════
   9. RESPONSIVE BASE
   ══════════════════════════════════════════ */
@media (max-width: 767.98px) {
  .akva-footer-cert { text-align: left; margin-top: 8px; }
  .akva-craft-visual { min-height: 360px; padding: 50px 30px; }
  .akva-craft-text   { min-height: auto;  padding: 50px 30px; }
}