/* HSP brand typography overrides — loaded after styles.css */

:root {
    --bs-body-font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;

    /* Black tone palette — a neutral grayscale ramp (tones of black, i.e. black
       progressively mixed with white). Use these instead of ad-hoc hex so every
       dark/grey across the brand stays in one consistent palette. */
    --hsp-black:    #121212; /* deepest brand black */
    --hsp-gray-900: #212529; /* dark panels / strongest text (Bootstrap-aligned) */
    --hsp-gray-700: #3f444a;
    --hsp-gray-600: #595f66;
    --hsp-gray-500: #767c83; /* muted body text */
    --hsp-gray-400: #969ba1; /* secondary text / the "DISTRIBUTOR OF" line */
    --hsp-gray-300: #b3b3b3; /* lightest grey (legacy faint label) */

    /* Brand accent blue — matches the B2B portal (hsp-b2b-us2) login button
       (root.css --primary / --primary-hover) so CTAs feel consistent across sites. */
    --hsp-blue:       #2563eb;
    --hsp-blue-hover: #1d4ed8;
}

/* The full-bleed Content 2 Columns band uses calc(50% - 50vw); 100vw includes the
   vertical scrollbar width, making the band ~scrollbar-width too wide and producing a
   slight horizontal scrollbar. No sticky elements exist (#mainNav is absolute/fixed),
   so clipping the x-overflow is safe. */
html,
body {
    overflow-x: hidden;
}

body {
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: azo-sans-web, "Helvetica Neue", Arial, sans-serif;
}

/* Navigation */
#mainNav,
#mainNav .navbar-brand,
#mainNav .navbar-nav .nav-link {
    font-family: azo-sans-web, "Helvetica Neue", Arial, sans-serif;
}

/* Page / site header */
header.masthead .site-heading h1,
header.masthead .post-heading h1,
header.masthead .page-heading h1 {
    font-family: azo-sans-web, "Helvetica Neue", Arial, sans-serif;
}

/* Trim Clean's oversized hero h1 (was 3rem / 5rem at lg) so the site name keeps
   to one line longer; paired with the wider hero text column in pageHeader.cshtml. */
header.masthead .site-heading h1,
header.masthead .page-heading h1 {
    font-size: 2.4rem;
}

@media (min-width: 992px) {
    header.masthead .site-heading h1,
    header.masthead .page-heading h1 {
        font-size: 3.6rem;
    }
}

/* Hero subheading — optional line between the H1 and the CTA row (subheading property). */
.hero-subheading {
    margin: 0.85rem 0 0;
    font-family: azo-sans-web, "Helvetica Neue", Arial, sans-serif;
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 1.4;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

@media (min-width: 992px) {
    .hero-subheading {
        font-size: 1.5rem;
    }
}

/* Hero CTA buttons (heroCtaButtons Multi URL Picker, rendered in pageHeader.cshtml).
   First link = --primary, rest = --secondary; both currently styled identically (B2B blue). */
.hero-cta {
    margin-top: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    row-gap: 1rem;        /* vertical gap when buttons wrap on small screens */
    column-gap: 2.75rem;  /* horizontal space between buttons */
    justify-content: center;
}

.hero-cta__btn {
    display: inline-block;
    padding: 0.7rem 1.6rem;
    font-family: azo-sans-web, "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.02em;
    line-height: 1.2;
    border: 2px solid transparent;
    border-radius: 0.3rem;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.hero-cta__btn--primary {
    background-color: var(--hsp-blue); /* matches B2B portal login button */
    border-color: var(--hsp-blue);
    color: #fff;
}
.hero-cta__btn--primary:hover,
.hero-cta__btn--primary:focus {
    background-color: var(--hsp-blue-hover);
    border-color: var(--hsp-blue-hover);
    color: #fff;
}

.hero-cta__btn--secondary {
    background-color: var(--hsp-blue);
    border-color: var(--hsp-blue);
    color: #fff;
}
.hero-cta__btn--secondary:hover,
.hero-cta__btn--secondary:focus {
    background-color: var(--hsp-blue-hover);
    border-color: var(--hsp-blue-hover);
    color: #fff;
}

header.masthead .subheading,
header.masthead .post-heading .subheading,
header.masthead .post-heading .meta {
    font-family: azo-sans-web, "Helvetica Neue", Arial, sans-serif;
}

/* Buttons */
.btn {
    font-family: azo-sans-web, "Helvetica Neue", Arial, sans-serif;
}

/* Hero banner — height tracks 3:2 image ratio (66.67vw), capped by vh to keep
   the hero from dominating the page. Caps reduced to shrink the hero while
   background-size:cover preserves image proportions and full coverage. */
header.masthead {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: min(66.67vw, 50vh);
    padding-top: 0;
    padding-bottom: 0;
    /* Remove Clean's 3rem gap so content bands sit flush against the hero */
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    background-size: cover;
    background-position: center center;
}

@media (min-width: 640px) {
    header.masthead {
        height: min(66.67vw, 62vh);
    }
}

@media (min-width: 992px) {
    header.masthead {
        height: min(66.67vw, 70vh);
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* Hero banner — HOME hero overlay.
   Scoped to the HOME hero only; shorter page heroes get no shading. */

/* ---------------------------------------------------------------------------
   SAVED VARIANT A — angled overlay panels (ported from HSP20).
   Two skewed semi-transparent black panels (0.3 + 0.2) overlapping in the
   centre → combined darkness of ~0.44 in the overlap region.
   Kept here (commented) so it can be restored if we prefer the angled look.

header.masthead--home::before,
header.masthead--home::after {
    content: "";
    position: absolute;
    width: 75%;
    height: 100%;
    top: 0;
    left: 10%;
}

header.masthead--home::before {
    right: auto;
    bottom: auto;
    opacity: 1;
    transform: skew(25deg) translateX(-54%);
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

header.masthead--home::after {
    transform: skew(25deg) translateX(-50%);
    background: rgba(0, 0, 0, 0.2);
    z-index: 2;
}
--------------------------------------------------------------------------- */

/* VARIANT B (active) — single flat tone covering the whole home hero.
   Starting darkness = the combined darkness of the two angled panels above
   (1 − (1−0.3)(1−0.2) = 0.44). Adjust the alpha to taste. */
header.masthead--home::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1;
}

/* Shorter hero for all non-home pages — full width, fallback image still applies,
   no angular shading. Title legibility via text-shadow instead of a dark overlay. */
header.masthead--page {
    height: min(66.67vw, 32vh);
}

@media (min-width: 640px) {
    header.masthead--page {
        height: min(66.67vw, 36vh);
    }
}

@media (min-width: 992px) {
    header.masthead--page {
        height: min(66.67vw, 40vh);
    }
}

/* No dark overlay on page heroes (only the home hero is shaded) */
header.masthead--page::before {
    display: none;
}

header.masthead--page .site-heading h1,
header.masthead--page .page-heading h1,
header.masthead--page .post-heading h1 {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

/* Ensure masthead content sits above the overlays */
header.masthead .container {
    position: relative;
    z-index: 10;
}

/* Content 2 Columns Row block (text + logo) — ported from legacy HSP20 intro */
.content-2-columns {
    /* No vertical margin — the colour band sits flush against the row above/below. */
    margin-top: 0;
    margin-bottom: 0;
    /* Break out of the theme's centred content column so the colour panels
       span the full viewport width, edge to edge. The block list sits inside
       a centred .col, so half-parent / half-viewport offsets reach the edges. */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.content-2-columns__text,
.content-2-columns__media {
    padding: 2.5rem 2rem;
    /* Fill the full (equal) column height and centre content vertically,
       so each column's background colour fills its half of the row. */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content-2-columns__media {
    text-align: center;
    align-items: center; /* centre the logo horizontally within the flex column */
}

.content-2-columns__image {
    max-width: 320px;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

/* On stacked (mobile) layout, keep both columns equally padded */
@media (max-width: 767.98px) {
    .content-2-columns__text,
    .content-2-columns__media {
        padding: 2rem 1.5rem;
    }
}

/* --- Legacy "DISTRIBUTOR OF SwissStop" intro styling (ported from HSP20) --- */

/* Character styling for the freetext block (classes come through the RTE) */
.content-2-columns__text .thinner-text {
    font-weight: 300;
}

/* First line "DISTRIBUTOR OF" — legacy <small> inside a heading: 80% scale + grey.
   RTE strips <small>, so target the first .thinner-text in the heading instead. */
.content-2-columns__text h2 .thinner-text:first-child {
    font-size: 80%;
    color: var(--hsp-gray-400); /* a step darker than the old faint #b3b3b3 */
    line-height: 1;
}

.content-2-columns__text .bigger-text {
    font-size: 2.4rem;
    line-height: 1.1;
    display: inline-block;     /* span is inline; needed for vertical padding to take effect */
    padding: 0.75rem 0;        /* breathing room above/below the big line */
}

.content-2-columns__text h2 {
    /* Visual size matches the old h4; the <h2> is for SEO/heading hierarchy.
       thinner-text lines inherit this base, so this controls their size. */
    font-size: 1.2rem;
    line-height: 1.5;
    margin-bottom: 0;
}

.content-2-columns__text p {
    margin: 0.6rem 0 0; /* tighten the gap above the tagline (was ~2rem) */
    font-size: 80%; /* legacy bottom line was <small> (80%); RTE strips <small>, so apply here */
}

/* Off-white text panel — default background (overridden by Column A Background colour picker if set) */
.content-2-columns__text {
    background-color: #fafafa;
    text-align: center;
}

/* Right-aligned alongside the logo on desktop, matching the legacy intro */
@media (min-width: 768px) {
    .content-2-columns__text {
        text-align: right;
        padding: 4rem 4rem; /* vertical bumped 4x (was 1rem) for more breathing room above/below */
    }
}

/* Yellow logo panel — default background (overridden by Column B Background colour picker if set) */
.content-2-columns__media {
    background-color: #ffe600;
}