/* Blog max width and font sizes and margins are different from the rest of the website */

.pageBody {
    margin: 6rem auto 4.6rem;
    max-width: 800px;
}

@media screen and (max-width: 920px) {
    .pageBody {
        padding-left: 6%;
        padding-right: 6%;
    }
}

/* ---- <main> compatibility ----
   Blog articles are now wrapped in <main class="blog-main"> so the WhatsApp
   CTA can use the site's real .btn-primary button (all.css scopes button
   colors to `main`). But all.css also scopes base nav-offset padding,
   96px section padding, and h1/h2/h3/p typography to `main`, sized for
   full marketing sections — far too large/generic for in-article prose.
   These rules neutralise that bleed-through. Each selector is qualified with
   "main.blog-main" (not just ".pageBody") so it beats the plain "main …"
   rules in all.css purely on specificity, not link order. */
main.blog-main {
    padding-top: 0;
}

/* Only top/bottom — a "padding: 0" shorthand here would outrank and zero out
   .pageBody's own mobile padding-left/right: 6% rule above (higher specificity),
   causing article text to run edge-to-edge on screens <=920px. */
main.blog-main > section {
    padding-top: 0;
    padding-bottom: 0;
}

main.blog-main h1.blog-banner-title {
    font-weight: 600;
}

main.blog-main .pageBody h2 {
    font-size: 1.65rem;
    font-weight: 600;
    margin: 1.9rem 0 0.75rem;
}

main.blog-main .pageBody h3 {
    font-size: 1.2rem;
    margin: 1.6rem 0 0.5rem;
}

main.blog-main .pageBody p {
    margin: 0 0 0.6rem;
    color: var(--ink);
}

hr {
    /* margin-top: 3rem;
    width: 30%;
    border-style: dotted none none;
    border-color: rgb(166, 220, 239, 0.8); */
    border-color: #869fc2;
}

h1 {
    margin-top: 1.3rem;
    text-align: center;
    font-size: 1.7rem;
}

h2 {
    margin-top: 1.9rem;
    font-size: 1.4rem;
}

/* Water-type and Three Properties color coding — same tokens and same
   convention as the product pages (see products.css / docs/components.md),
   so a reader sees the same color for "Beauty Water" or "Alkalinity" in an
   article as on the product page. Water types each keep their own distinct
   color; the three properties intentionally share one shared accent. Applied
   directly to article <h2> headings that name a specific water type or
   property. Selector includes "main.blog-main .pageBody h2" explicitly (not
   just the class) so specificity beats "main h2" in all.css, which sets its
   own color: var(--navy-ink) — see products.css's identical note on
   ".water-type" for the same bug caught there first. */
main.blog-main .pageBody h2.water-type--strong-kangen {
    color: var(--water-strong-kangen);
}

main.blog-main .pageBody h2.water-type--kangen {
    color: var(--water-kangen);
}

main.blog-main .pageBody h2.water-type--clean {
    color: var(--water-clean);
}

main.blog-main .pageBody h2.water-type--beauty {
    color: var(--water-beauty);
}

main.blog-main .pageBody h2.water-type--acidic {
    color: var(--water-acidic);
}

main.blog-main .pageBody h2.pd-property {
    color: var(--property-accent);
}

h3 {
    margin-top: 1.6rem;
    font-size: 1.2rem;
}

p,
li {
    padding: 0.4rem 0;
}

.img-adjust {
    display: block;
    width: 100%;
    max-width: 34rem;
    height: auto;
    margin: 1.8rem auto;
    border-radius: 15px;
}

.big-img {
    max-width: 28rem;
}

.blog-people {
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width: 518px) {
    .blog-people {
        flex-direction: column;
    }
}

.custom-textbox {
    border-radius: 15px;
    padding: 1.4rem 1.5rem 1.5rem;
}

.custom-textbox ul,
ol,
p {
    margin: 0.5rem auto;
}

.custom-textbox li {
    margin: 0.8rem auto;
}

/* .kwg-textbox {
  background-color: #DAE5F5;
}

.biz-textbox {
  background-color: #869FC2;
  color: black;
}

.pd-textbox {
  background-color: #46648F;
  color: rgb(247, 246, 246);
} */

.bottom-cta-buttons {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    width: 30%;
    display: inline-block;
}

@media screen and (max-width: 784px) {
    .bottom-cta-buttons {
        width: 45%;
        display: inline-block;
    }
}

@media screen and (max-width: 411px) {
    .bottom-cta-buttons {
        width: 60%;
        margin-top: 0.5rem;
    }
}

.footer-text {
    text-align: center;
    font-size: 0.76rem;
    margin-top: 3rem;
    margin-bottom: 0.8rem;
    color: black;
}

/* Add the table lines */
table,
th,
td {
    border: solid 0.8px black;
    width: 100%;
}

/* Widen the space between each point to the first faq */
table {
    margin-top: 25px;
    border-collapse: collapse;
    border-radius: 0.2rem;
}

/* Ensure that each column in the table of the first faq is of the same width */
th,
td {
    width: 50%;
    text-align: center;
    padding: 0.5rem 1rem;
}

/* ---- Article banner (v2 pattern — #blog-article-header outside .pageBody) ---- */
.blog-article-banner {
    background: var(--navy);
    padding: calc(68px + 40px) 0 40px;
    text-align: center;
}

.blog-banner-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 32px;
}

.blog-banner-back {
    display: inline-block;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    margin-bottom: 20px;
    letter-spacing: 0.04em;
}

.blog-banner-back:link {
    color: rgba(255, 255, 255, 0.55);
}
.blog-banner-back:hover {
    color: #fff;
    text-decoration: none;
}
.blog-banner-back:visited {
    color: rgba(255, 255, 255, 0.55);
}

.blog-banner-badges {
    margin-bottom: 10px;
}

.blog-banner-title {
    font-family: var(--serif);
    font-size: clamp(1.65rem, 3.5vw, 2.4rem);
    font-weight: 600;
    color: #fff;
    line-height: 1.25;
    margin: 0 0 20px;
}

.blog-banner-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
}

.blog-banner-sep {
    opacity: 0.4;
}

.blog-banner-share {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.blog-banner-share:link {
    color: rgba(255, 255, 255, 0.55);
}
.blog-banner-share:hover {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
}
.blog-banner-share:visited {
    color: rgba(255, 255, 255, 0.55);
}

.blog-banner-cover {
    margin-top: 1.6rem;
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .blog-article-banner {
        padding: calc(68px + 20px) 0 28px;
    }
    .blog-banner-sep {
        display: none;
    }
    .blog-banner-meta {
        flex-direction: column;
        gap: 4px;
    }
}

/* Blog article text must be immediately readable — skip scroll reveal */
html.js .pageBody .reveal,
html.js .pageBody .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* When banner is outside .pageBody, remove its top margin */
.pageBody.has-banner {
    margin-top: 0;
    padding-top: 2rem;
}

/* ---- Article footer navigation ---- */
.blog-article-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 20px 0;
    border-top: 1px solid #d1dce8;
    border-bottom: 1px solid #d1dce8;
    margin-top: 3rem;
}

.blog-nav-back,
.blog-nav-next {
    font-size: 0.88rem;
    color: #2c3b94;
    text-decoration: none;
    font-weight: 500;
}

.blog-nav-back:hover,
.blog-nav-next:hover {
    text-decoration: underline;
    color: #2c3b94;
}
.blog-nav-back:visited,
.blog-nav-next:visited {
    color: #2c3b94;
}

/* ---- Newsletter section ---- */
.blog-newsletter {
    background: var(--navy-ink);
    border-radius: var(--r);
    padding: 40px 36px;
    text-align: center;
    max-width: 28rem;
    margin: 2.5rem auto 1rem;
}

.blog-newsletter-eyebrow {
    display: block;
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}

.blog-newsletter-title {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 8px;
    color: #fff;
}

.blog-newsletter-sub {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.62);
    margin-bottom: 24px;
}

/* Both paragraphs above sit inside <main> and would otherwise inherit
   font-size/color/margin from "main p" in all.css, which outranks the plain
   classes above on specificity. Restated here with the element type included
   so specificity beats both "main p" and the ".pageBody p" rule above. */
main.blog-main p.blog-newsletter-title {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0 0 8px;
    color: #fff;
}

main.blog-main p.blog-newsletter-sub {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.62);
    margin: 0 0 24px;
}

.blog-newsletter-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.blog-newsletter-fields input {
    font-family: var(--sans);
    /* 16px minimum — iOS Safari auto-zooms on focus for any input font-size below this */
    font-size: 1rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--r);
    padding: 12px 16px;
    width: 100%;
    outline: none;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

.blog-newsletter-fields input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.blog-newsletter-fields input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201, 168, 107, 0.18);
}

.blog-newsletter-submit {
    width: 100%;
}