/**
 * Layout fixes kept separate from style.css (which is maintained as one file
 * outside this repo and copied in whole).
 *
 * Problem: on phones several pages were 12–13px wider than the screen. iOS
 * Safari ignores `body { overflow-x: hidden }`, so the page could be panned
 * sideways and every full-width block background ended short of the right
 * edge — the "different background colours on mobile" effect.
 */

/* 1. Bootstrap .g-5 rows use a 3rem gutter (-24px margins each side), but
 *    containers only pad 12px. Below 576px the container is the full screen
 *    width, so the row sticks out 12px. Cap the horizontal gutter there. */
@media (max-width: 575.98px) {
  .row.g-5,
  .row.gx-5 {
    --bs-gutter-x: 1.5rem;
  }
}

/* 2. Views inside Layout Builder columns: the columns have no padding, so the
 *    view's .row (-12px margins) hangs off the page edges (Punti di prova —
 *    on desktop too). */
.layout-builder__layout > [class*="col-"] > .views-element-container .view > .view-content.row {
  margin-left: 0;
  margin-right: 0;
}

/* 3. Blog grid: Views Bootstrap nests a second .row inside .view-content.row.
 *    As a flex child it gets the column padding (.row > *) *and* its own
 *    negative margin, but width:100% stops it growing — so the cards were
 *    shifted 12px left (flush with the screen on phones, 36px gap on the
 *    right). Neutralise both so the cards line up with the featured post. */
.view-content.row > .views-view-grid.row {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* 4. Tables: Bootstrap Barrio's generic table.css (dark grey <th>, grey rows,
 *    white cell borders) is switched off in akvaitalia.info.yml because it
 *    fought every table design on the site. Per-table styles follow.
 *
 *    Benefici comparison table (#confronto): its inline styles leave the
 *    first/last columns without side padding — add it. */
#confronto table tr th,
#confronto table tr td {
  padding-left: 16px !important;  /* beats the inline padding */
  padding-right: 16px !important;
}

/* 5. Same table on phones: at 580px min-width it scrolled inside a ~350px box,
 *    hiding the AKVA column off-screen. Below 768px (where 580px no longer
 *    fits the container) each row becomes a card:
 *    feature name as the title, then the two options with labels. The labels
 *    repeat the (visually hidden) header texts — keep them in sync if the
 *    block's column headings change. */
@media (max-width: 767.98px) {
  #confronto table {
    display: flex;
    flex-direction: column;
    min-width: 0 !important;  /* inline min-width: 580px */
  }
  #confronto table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  #confronto table tbody {
    display: block;
  }
  #confronto table caption {
    display: block;
    order: 2;  /* footnote after the cards, as on desktop */
  }
  #confronto table tbody tr {
    display: block;
    padding: 0;  /* Barrio's table.css pads rows */
    margin-bottom: 12px;
    border: 1px solid var(--akva-mist) !important;  /* inline: bottom only */
    background: #fff !important;  /* inline: cream on alternate rows */
  }
  #confronto table tbody td {
    display: block;
    width: auto !important;
    padding: 10px 16px !important;
    text-align: left !important;
  }
  /* Feature name = card title. */
  #confronto table tbody td:first-child {
    padding-top: 14px !important;
    padding-bottom: 6px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
  }
  #confronto table tbody td:nth-child(2)::before,
  #confronto table tbody td:nth-child(3)::before {
    display: block;
    margin-bottom: 4px;
    font-family: var(--akva-sans);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  #confronto table tbody td:nth-child(2)::before {
    content: "Materasso tradizionale";
    color: var(--akva-stone);
  }
  #confronto table tbody td:nth-child(3) {
    padding-bottom: 14px !important;
    border-left: 2px solid var(--akva-water);
  }
  #confronto table tbody td:nth-child(3)::before {
    content: "Letto ad acqua AKVA";
    color: var(--akva-water);
  }
}

/* 6. Product technical specs (block 94, embedded on every "letto" page):
 *    label/value rows inside the accordion. Had no design of its own. */
.akva-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--akva-sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
}
.akva-spec-table tr {
  border-bottom: 1px solid var(--akva-mist);
}
.akva-spec-table tr:last-child {
  border-bottom: 0;
}
.akva-spec-table td {
  padding: 12px 16px 12px 0;
  vertical-align: top;
  color: var(--akva-ink);
}
.akva-spec-table td:first-child {
  width: 38%;
  color: var(--akva-stone);
}
.akva-spec-table td:last-child {
  padding-right: 0;
}

/* 7. Cookie policy tables (.akva-cookie-table, 4 columns): on phones the
 *    "Finalità" column was squeezed to one word per line and the tables
 *    overflowed the page. Below 576px each cookie becomes a card; labels
 *    repeat the header texts (Nome / Dominio / Durata / Finalità). */
@media (max-width: 575.98px) {
  .akva-cookie-table,
  .akva-cookie-table tbody,
  .akva-cookie-table tr,
  .akva-cookie-table td {
    display: block;
    width: 100%;
  }
  .akva-cookie-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .akva-cookie-table tbody tr {
    padding: 12px 0;
  }
  .akva-cookie-table td,
  .akva-cookie-table td:first-child {
    padding: 3px 0;
  }
  .akva-cookie-table td:first-child {
    padding-bottom: 6px;
  }
  .akva-cookie-table td:not(:first-child)::before {
    display: inline-block;
    min-width: 74px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--akva-stone);
  }
  .akva-cookie-table td:nth-child(2)::before { content: "Dominio"; }
  .akva-cookie-table td:nth-child(3)::before { content: "Durata"; }
  .akva-cookie-table td:nth-child(4)::before {
    content: "Finalità";
    display: block;
    margin-bottom: 2px;
  }
}

/* 8. Text pages using .akva-content-wrap (Cookie policy): the wrapper's
 *    60px side padding stays on phones and stacks with the container's
 *    12px, leaving a 231px text column on a 375px screen. Below 768px let
 *    the container alone set the side margin, like the rest of the site. */
@media (max-width: 767.98px) {
  .akva-content-wrap {
    padding: 40px 0 64px;
  }
}

/* 9. Cookie policy hero (block 80, only user of these classes).
 *    style.css renamed .akva-feature-item -> .akva-cookie-feature-item (the
 *    AKVA Sound page uses .akva-feature-item for a different layout) but the
 *    hero markup was never updated, so its items picked up the Sound styles.
 *    Scope the intended styles by parent instead of editing the block. */
.akva-feature-bar > .akva-feature-item {
  padding: 20px 28px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 14px;
}
.akva-feature-bar > .akva-feature-item:last-child {
  border-right: 0;
}
/* 4 across only fits on desktop: 2x2 on tablets, a list on phones. */
@media (max-width: 991.98px) {
  .akva-feature-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .akva-feature-bar > .akva-feature-item:nth-child(2n) {
    border-right: 0;
  }
  .akva-feature-bar > .akva-feature-item:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
}
@media (max-width: 575.98px) {
  .akva-feature-bar {
    grid-template-columns: 1fr;
  }
  .akva-feature-bar > .akva-feature-item {
    padding: 16px 12px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .akva-feature-bar > .akva-feature-item:last-child {
    border-bottom: 0;
  }
}
/* Hero text: 60px side padding at every width; match the 12px the rest of
 * the site uses on phones (and the page body, see 8). */
@media (max-width: 767.98px) {
  .akva-policy-hero .akva-hero-inner {
    padding: 0 12px 40px;
  }
}
/* The hero asks for "bi-eu", which doesn't exist in Bootstrap Icons (empty
 * circle next to "Conforme al GDPR"). Draw the patch-check badge instead. */
.akva-feature-icon .bi-eu::before {
  content: "\f4b6";
}

/* 10. Text contrast (WCAG AA: 4.5:1 normal text, 3:1 large). Measured on the
 *     live site; ratios before -> after in brackets. All widths. */

/* Gold text on light backgrounds [2.4-2.6 -> 4.6-5.0]: same hue, darker.
 * Gold stays as-is where it sits on dark sections (it passes there). */
:root { --akva-gold-text: #816c42; }
.akva-eyebrow,
.akva-blog-featured-eyebrow,
.akva-feature-num,
.benefit-num {
  color: var(--akva-gold-text);
}
.akva-cta-bar .akva-eyebrow,
.akva-b2b-section .akva-eyebrow {
  color: var(--akva-gold);
}

/* Gold primary buttons: white text [2.68] -> ink text [6.49]. */
.btn-akva-primary,
a.btn-akva-primary {
  color: var(--akva-ink) !important;
}
/* WhatsApp green buttons: white text [1.98] -> ink text [8.79]. */
.btn-akva-wa-solid,
a.btn-akva-wa-solid {
  color: var(--akva-ink) !important;
}

/* Grey (stone) labels on dark heroes [2.36 -> 6.82]: breadcrumbs (inline
 * styles in the hero blocks), product "Tutti i modelli", contact labels. */
.akva-faq-hero [style*="--akva-stone"],
.akva-pdp-hero [style*="--akva-stone"],
.akva-privacy-hero [style*="--akva-stone"],
.akva-product-category,
.akva-product-category a,
.akva-channel-label {
  color: rgba(253, 252, 250, 0.6) !important;
}

/* Product spec pills on blue: 50% white [2.69] -> 85% [4.68]. */
.akva-spec-label {
  color: rgba(255, 255, 255, 0.85);
}

/* Benefici disclaimer (inline style, 25% white on ink) [2.24 -> 6.82]. */
p[style*="rgba(253,252,250,0.25)"] {
  color: rgba(253, 252, 250, 0.6) !important;
}

/* Benefici hero: the SEO <h1> label has its text directly in the h1, not
 * in the <span> the design styles, so it inherited ink on the ink hero —
 * invisible [1.0]. Give the bare h1 the label style. */
h1.akva-hero-seo-label {
  font-family: var(--akva-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(253, 252, 250, 0.6);
}

/* 11. Mobile type sizes. Running text under 15px and labels/buttons at
 *     9.5-11px were hard to read on phones. Desktop unchanged. */
@media (max-width: 767.98px) {
  /* Running text -> 15px */
  .benefit-desc,
  .akva-blog-card-summary,
  .akva-channel-desc,
  .akva-science-note p,
  .akva-form-subtitle,
  .akva-aside-promises-list span,
  .akva-aside-promise-text,
  .akva-cert-what,
  .akva-cert-benefit,
  main p[style*="font-size:13px"],
  main p[style*="font-size:14px"],
  main p[style*="font-size: 13px"],
  main p[style*="font-size: 14px"] {
    font-size: 15px !important;
    line-height: 1.6;
  }
  /* Short items and tables -> 14px */
  .akva-b2b-trust-item,
  .akva-pdp-promise-text,
  .akva-cookie-table td {
    font-size: 14px !important;
  }
  /* Small print -> 13px */
  .akva-cert-issuer,
  p[style*="rgba(253,252,250,0.25)"] {
    font-size: 13px !important;
  }
  /* Uppercase labels, eyebrows, breadcrumbs, buttons: 9.5-11px -> 12px */
  .akva-eyebrow,
  .akva-blog-featured-eyebrow,
  .akva-feature-text small,
  .akva-faq-hero-inner > div:first-child,
  .akva-pdp-hero-inner > div:first-child,
  .akva-privacy-hero-inner > div:first-child,
  .akva-breadcrumb,
  h1.akva-hero-seo-label,
  .btn-akva-primary,
  .btn-akva-ghost,
  .btn-akva-outline,
  .btn-akva-outline-dark,
  .btn-akva-light-bg,
  .btn-akva-wa-solid {
    font-size: 12px !important;
  }
  .akva-product-category,
  .akva-channel-label,
  .akva-spec-label {
    font-size: 11px !important;
  }
}

/* 12. More contrast fixes — secondary text drawn as low-alpha white.
 *     Minimum 60% on ink (#1a1a18, >= 6.8:1), 85-90% on water blue. */
[style*="rgba(253,252,250,0.35)"],
[style*="rgba(253,252,250,0.45)"],
[style*="rgba(255,255,255,0.35)"],
.akva-breadcrumb,
.akva-breadcrumb a,
.akva-breadcrumb li,
.akva-feature-text small,
.akva-footer-tagline,
.akva-phone-hours {
  color: rgba(253, 252, 250, 0.6) !important;
}
.akva-faq-hero-inner [style*="--akva-stone"] {
  color: rgba(253, 252, 250, 0.6) !important;
}
.akva-cta-eyebrow,
.akva-cta-section .akva-cta-sub,
.akva-aside-promise-text,
.akva-aside-promises-list span,
.akva-sustain-badge .small {
  color: rgba(255, 255, 255, 0.9) !important;
}
.akva-sound-label {
  color: rgba(180, 210, 230, 0.85) !important;
}
/* Italic accent blue in headings: a touch deeper so large headings pass
 * 3:1 on cream [2.79 -> 3.24]; on dark heroes it was also drawn at 75%
 * alpha [3.74] -> solid [4.85]. */
:root { --akva-water-md: #608da4; }
.akva-h1 em,
.akva-hero-title em,
h1.akva-hero-title em {
  color: var(--akva-water-md) !important;
}
/* Water-blue bold text inside light-blue note boxes [4.42] -> darker blue. */
.akva-science-note strong,
.akva-reveal strong[style*="--akva-water"] {
  color: #2f5872 !important;
}
/* Legal page subheadings: #888 on paper [3.46] -> stone [7.2]. */
.akva-content-inner h3,
h3.hero-title,
main p[style*="#888"] {
  color: var(--akva-stone) !important;
}
/* AKVA Sound hero: .wa-button has no styles, so the link inherited ink on
 * the ink hero — invisible [1.0]. */
.akva-hero-ctas .wa-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(253, 252, 250, 0.85);
  font-size: 13px;
  text-decoration: none;
}

/* 13. Small uppercase labels, badges, meta and form labels on phones
 *     (9-11px -> 12px; tight badges -> 11px; form labels -> 13px). */
@media (max-width: 767.98px) {
  main [style*="font-size:9px"],
  main [style*="font-size:10px"],
  main [style*="font-size:11px"],
  .akva-contact-label,
  .akva-cookie-table th,
  .akva-blog-card-meta span,
  .akva-blog-featured-meta time,
  .akva-blog-card-category,
  .akva-blog-card-readmore,
  .akva-article-hero-category,
  .akva-content-inner h3,
  h3.hero-title,
  .akva-trust-item span,
  .akva-channel-action,
  .akva-response-badge,
  .akva-mini-author,
  .akva-aside-proof-title,
  .akva-proof-locations-sub,
  .akva-hero-eyebrow,
  .akva-hero-seo-label span,
  .akva-cat-hero-eyebrow,
  .akva-pdp-hero-eyebrow,
  .akva-contact-hero-eyebrow,
  .akva-cta-eyebrow,
  .akva-product-super,
  .pp-price-eyebrow,
  .akva-pressure-label,
  .akva-hero-img-label,
  .akva-breadcrumb-part,
  .akva-breadcrumb-part a,
  .akva-primary-cat-content a,
  .akva-map-sidebar-title,
  .akva-phone-label,
  .akva-cookie-pref-link,
  .akva-cert-tag {
    font-size: 12px !important;
  }
  .akva-sidebar-type-badge,
  .akva-model-thumb-mini span,
  .akva-primary-badge,
  .akva-sound-label,
  .akva-sustain-badge .small,
  .akva-scroll-cue span {
    font-size: 11px !important;
  }
  .webform-submission-form label,
  .akva-contact-body label {
    font-size: 13px !important;
  }
}

/* 14. Leftovers from the contrast audit. */
/* Privacy policy: date line and h3 subheadings #888 [3.46] -> stone [7.2]. */
.path-privacy-policy p:first-of-type,
.path-privacy-policy h3 {
  color: var(--akva-stone);
}
/* Contact page "Risposta entro 24h" badge on its dark card: the deeper
 * accent blue (see 12) is too dark there [4.27] -> lighter tint [6.6]. */
.akva-response-badge.async {
  color: #8fbcd2 !important;
}

/* 15. Punti di prova hero: water-surface photo behind the dark hero.
 *     Scoped to this block (.akva-pdp-hero is shared with Privacy policy).
 *     An ink overlay keeps the white text readable over the bright ripples
 *     on the left; it lightens to the right so the water shows. The image
 *     lives in public files (uploaded 2026-06). */
#block-akvaitalia-puntidiprovahero .akva-pdp-hero {
  background-color: var(--akva-ink);
  background-image:
    linear-gradient(90deg, rgba(26, 26, 24, 0.88) 0%, rgba(26, 26, 24, 0.72) 50%, rgba(26, 26, 24, 0.45) 100%),
    url("/sites/default/files/2026-06/water-surface.webp");
  background-size: cover;
  background-position: center;
}
@media (max-width: 991.98px) {
  /* Text spans the full width on tablets/phones: even overlay. */
  #block-akvaitalia-puntidiprovahero .akva-pdp-hero {
    background-image:
      linear-gradient(rgba(26, 26, 24, 0.8), rgba(26, 26, 24, 0.8)),
      url("/sites/default/files/2026-06/water-surface.webp");
  }
}

/* 16. Same water-surface hero on Benefici, Blog, FAQ (dark heroes) and
 *     Hotel & SPA. Selectors are per-block so shared hero classes (e.g. the
 *     Grazie page) are untouched. Overlay as in 15. */
.akva-benefits-hero,
#block-akvaitalia-heroblog .akva-blog-hero,
#block-akvaitalia-herofaq .akva-faq-hero,
#block-akvaitalia-herohotelspa .akva-landing-hero {
  background-color: var(--akva-ink);
  background-image:
    linear-gradient(90deg, rgba(26, 26, 24, 0.88) 0%, rgba(26, 26, 24, 0.72) 50%, rgba(26, 26, 24, 0.45) 100%),
    url("/sites/default/files/2026-06/water-surface.webp");
  background-size: cover;
  background-position: center;
}
@media (max-width: 991.98px) {
  .akva-benefits-hero,
  #block-akvaitalia-heroblog .akva-blog-hero,
  #block-akvaitalia-herofaq .akva-faq-hero,
  #block-akvaitalia-herohotelspa .akva-landing-hero {
    background-image:
      linear-gradient(rgba(26, 26, 24, 0.8), rgba(26, 26, 24, 0.8)),
      url("/sites/default/files/2026-06/water-surface.webp");
  }
}

/* Hotel & SPA: the hero's left half was cream with dark text, and the
 * transparent site header (white menu) sat over cream/white — most of the
 * menu was invisible on desktop. Now the whole hero is water + ink, so the
 * left panel goes transparent and its text switches to light colours. */
#block-akvaitalia-herohotelspa .akva-landing-hero-left {
  background: transparent;
}
#block-akvaitalia-herohotelspa .akva-landing-hero-right {
  background: transparent;
}
#block-akvaitalia-herohotelspa .akva-landing-hero-left .akva-h2 {
  color: #fff;
}
#block-akvaitalia-herohotelspa .akva-landing-hero-left .akva-eyebrow {
  color: var(--akva-gold);  /* passes on ink; darker text-gold is for light bg */
}
#block-akvaitalia-herohotelspa .akva-landing-hero-left .akva-lead {
  color: rgba(253, 252, 250, 0.75);
}
#block-akvaitalia-herohotelspa .akva-landing-stats {
  border-top-color: rgba(253, 252, 250, 0.15);
}
#block-akvaitalia-herohotelspa .akva-landing-stat-num {
  color: #fff;
}
#block-akvaitalia-herohotelspa .akva-landing-stat-label {
  color: rgba(253, 252, 250, 0.65);
}
/* Text tints over the water photo (measured against its brightest pixels):
 * lighter accent blue for italic headings, lighter gold for eyebrows, and
 * the Benefici heat-map caption (sits where the overlay is lightest). */
.akva-benefits-hero em,
#block-akvaitalia-heroblog .akva-blog-hero em,
#block-akvaitalia-herofaq .akva-faq-hero em,
#block-akvaitalia-puntidiprovahero .akva-pdp-hero em,
#block-akvaitalia-herohotelspa .akva-landing-hero-left em {
  color: #8fbcd2 !important;
}
#block-akvaitalia-herohotelspa .akva-landing-hero-left .akva-eyebrow {
  color: #d6bd88;
}
.akva-benefits-hero p[style*="rgba(255,255,255,0.3)"],
.akva-benefits-hero figcaption {
  color: rgba(253, 252, 250, 0.7) !important;
}
.akva-benefits-hero span[style*="color:var(--akva-gold)"] {
  color: #d6bd88 !important;  /* stat units ("acari", "anni") over water */
}
/* Benefici hero: an inner wrapper paints its own flat ink (inline style)
 * over the section — let the water show through it. */
.akva-benefits-hero > div[style*="background:var(--akva-ink)"] {
  background: transparent !important;
}
/* Hotel & SPA: the hero's ::before darkened only the top-left half (so the
 * white menu showed over the old cream panel). Over the full-width water it
 * left a hard shadow edge before "Hotel & SPA" in the menu — not needed. */
#block-akvaitalia-herohotelspa .akva-landing-hero::before {
  content: none;
}