:root {
    --anthracite: #2f3437;
}

body {
    font-family: system-ui, sans-serif;
    margin: 0;
    color: #1a1a1a;
    line-height: 1.5;
}

/* Resets the footer (and everything inside it) back to browser defaults
   before any of our own footer rules apply below. Without this, malformed
   HTML earlier on the page (e.g. an unclosed tag in a pasted content
   block) can leave the browser treating the footer as nested inside that
   broken element, "inheriting" whatever font/color/spacing it set —
   this makes the footer immune to that regardless of what came before it. */
.site-footer,
.site-footer * {
    all: revert;
}

.site-footer {
    padding: 1rem 1.5rem;
}

.site-main {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

/* --- Site header --------------------------------------------------------- */
/* This styles whatever markup you put in the header block (Custom HTML) —
   see the <header> region in app/themes/default/layout.php. Change
   --anthracite above to retune the color everywhere at once. */

.site-header {
    background: var(--anthracite);
    padding: 0;
}

.site-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.5rem;
    gap: 1.5rem;
}

.site-logo {
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem;
    text-decoration: none;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.site-logo img {
    display: block;
    height: 64px;
}

.footer-logo img,
img.footer-logo {
    display: block;
    height: 48px;
    width: auto;
}

/* --- Site footer --------------------------------------------------------- */
/* This styles whatever markup you put in the footer block (Custom HTML) —
   see the <footer> region in app/themes/default/layout.php. Reuses the same
   --anthracite variable as the header for a consistent look. */

.site-footer {
    background: var(--anthracite);
    padding: 0;
}

.site-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
    color: #d8dde0;
}

.site-footer-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer-logo {
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
}

.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.site-footer-links a {
    color: #d8dde0;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
}

.site-footer-links a:hover {
    color: #fff;
}

.site-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: 1.5rem;
}

.site-footer-copyright {
    font-size: 0.85rem;
    color: #9aa2a7;
}

.site-footer-social {
    display: flex;
    gap: 1rem;
}

.site-footer-social a {
    color: #d8dde0;
    display: inline-flex;
}

.site-footer-social a:hover {
    color: #fff;
}

@media (max-width: 640px) {
    .site-footer-top,
    .site-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --- Click-to-play video thumbnail ----------------------------------------- */
/* See the "video" component in app/core/components.php — shown instead of
   the embed when a thumbnail is picked (Media -> Videos, or a video
   block's "thumbnail_media_id" config), until clicked. */

.video-placeholder {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    cursor: pointer;
}

.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border-radius: 50%;
    font-size: 1.5rem;
    padding-left: 4px;
    transition: background 0.15s ease, transform 0.15s ease;
}

.video-placeholder:hover .video-play-btn {
    background: var(--anthracite);
    transform: translate(-50%, -50%) scale(1.08);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    flex-wrap: wrap;
}

.site-nav a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
}

.site-nav a:hover {
    opacity: 0.75;
}

.site-nav-cta {
    background: #fff;
    color: var(--anthracite);
    padding: 0.5rem 1.25rem;
    border-radius: 999px;
}

.site-nav-cta:hover {
    opacity: 1;
    background: #f0f0f0;
}

@media (max-width: 640px) {
    .site-header-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.85rem;
    }
    .site-nav {
        gap: 1rem;
    }
}

/* --- Custom site menus (see /admin/site-menus) ----------------------------- */
/* The "site-menu" component / {{menu:<id>}} placeholder both render a plain
   <ul class="site-menu"><li><a>...</a></li></ul> tree (see
   render_site_menu_items() in app/core/helpers.php) — this is what turns
   that into a horizontal top-level bar with a vertical dropdown for any
   item that has subitems. .site-nav a/a:hover above already colors the
   links themselves; this just handles layout. */

.site-menu {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-menu li {
    position: relative;
}

.site-menu li.has-children > a::after,
.site-menu li.has-children > span::after {
    content: "\25BE"; /* ▾ */
    display: inline-block;
    margin-left: 0.35em;
    font-size: 0.7em;
    vertical-align: middle;
}

.site-menu span {
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: default;
}

/* Subitems: hidden vertical dropdown under their parent, shown on hover. */
.site-menu ul {
    display: none;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background: var(--anthracite);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    z-index: 50;
}

.site-menu li:hover > ul {
    display: flex;
}

.site-menu ul li {
    padding: 0;
}

.site-menu ul a,
.site-menu ul span {
    display: block;
    padding: 0.6rem 1.1rem;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .site-menu {
        gap: 1rem;
        flex-wrap: wrap;
    }
}

/* --- Contact blocks -------------------------------------------------------- */

.contact-info {
    display: grid;
    gap: 1.75rem;
    padding: 2rem;
    background: var(--anthracite);
    color: #d8dde0;
    border-radius: 12px;
}

.contact-info h2 {
    color: #fff;
    margin: 0 0 0.25rem;
}

.contact-info-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.contact-info-row .ico {
    flex-shrink: 0;
    font-size: 1.2rem;
}

.contact-info-row a {
    color: #fff;
    text-decoration: none;
}

.contact-info-row a:hover {
    text-decoration: underline;
}

.contact-info-row p {
    margin: 0;
}

.contact-social {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.contact-social a {
    color: #d8dde0;
    display: inline-flex;
}

.contact-social a:hover {
    color: #fff;
}

.contact-form {
    display: grid;
    gap: 1rem;
    max-width: 480px;
}

.contact-form label {
    display: grid;
    gap: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.contact-form input,
.contact-form textarea {
    padding: 0.65rem 0.8rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-form button {
    justify-self: start;
    background: var(--anthracite);
    color: #fff;
    border: none;
    padding: 0.75rem 1.75rem;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
}

.contact-form button:hover {
    opacity: 0.9;
}

.contact-form-notice {
    background: #eaf6ec;
    color: #1e4620;
    padding: 0.75rem 1rem;
    border-radius: 8px;
}

.contact-form-error {
    background: #fdecea;
    color: #611a15;
    padding: 0.75rem 1rem;
    border-radius: 8px;
}

/* --- Explain / navigation blocks ------------------------------------------ */

.explain-block {
    text-align: center;
    padding: 1.5rem 1rem;
}

.explain-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.explain-block h4 {
    margin: 0 0 0.5rem;
}

.explain-block p {
    margin: 0;
    color: #555;
}

.nav-block {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 0.75rem 0;
}

.nav-block a {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

.nav-block a:hover {
    text-decoration: underline;
}

.checkout-cta-btn {
    display: inline-block;
    background: var(--anthracite);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    padding: 0.75rem 1.75rem;
    border-radius: 999px;
}

.checkout-cta-btn:hover {
    opacity: 0.9;
}

/* --- Content layouts ------------------------------------------------------ */
/* Picked per-page via "Content layout" in the page editor (Admin ->
   Webpages -> a page -> edit). Only affects .main-block wrappers (see
   render_region() in app/core/helpers.php) — one per block placed in the
   page's main content, in the order set in the editor. Both layouts below
   treat blocks in consecutive pairs (1st+2nd, 3rd+4th, ...) as one row. */

.site-main.main-layout-two-column,
.site-main.main-layout-alternating {
    max-width: 1000px;
}

.main-layout-two-column,
.main-layout-alternating {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 3rem;
    align-items: center;
}

/* Zigzag: every 2nd row swaps which column its two blocks land in, by
   reordering the row's first block to come after its second block. */
.main-layout-alternating .main-block:nth-child(4n+3) {
    order: 2;
}
.main-layout-alternating .main-block:nth-child(4n) {
    order: 1;
}

@media (max-width: 640px) {
    .main-layout-two-column,
    .main-layout-alternating {
        display: block;
    }
    .main-layout-alternating .main-block:nth-child(4n+3),
    .main-layout-alternating .main-block:nth-child(4n) {
        order: initial;
    }
}

/* A grid/grid-block component already lays its own cards out responsively
   (see .grid-items-wrap below) — it should never get squeezed into one
   half of a two-column/alternating page layout, which would otherwise
   halve its available width and let far fewer cards fit per row. */
.main-layout-two-column .main-block:has(.grid-items-wrap),
.main-layout-alternating .main-block:has(.grid-items-wrap),
.main-layout-two-column .main-block:has(.qa-card-grid),
.main-layout-alternating .main-block:has(.qa-card-grid) {
    grid-column: 1 / -1;
}

/* .site-main's default 800px cap only ever leaves room for 2 explainer
   cards side by side (each is 300-450px) — widen it on pages that actually
   have a card grid on them so a 3rd can appear when the screen is wide
   enough. Other pages keep the normal, narrower reading width. */
.site-main:has(.qa-card-grid) {
    max-width: 1100px;
}

/* --- Legal pages (Terms, Privacy, Medical Disclaimer, ...) ---------------- */

.legal-page {
    max-width: 720px;
}

.legal-page h1 {
    margin-bottom: 0.25rem;
}

.legal-subtitle {
    font-weight: 600;
    margin: 0 0 0.25rem;
}

.legal-date {
    color: #777;
    font-size: 0.9rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

/* --- Feature split (text + photo, two columns) ----------------------------- */

.feature-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.feature-split-eyebrow {
    color: #8a8a8f;
    font-size: 0.9rem;
    margin: 0 0 0.5rem;
}

.feature-split-text h2 {
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 1rem;
}

.feature-split-text > p {
    color: #444;
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

.feature-split-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    display: grid;
    gap: 0.9rem;
}

.feature-split-list li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.feature-split-list .ico {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--anthracite);
}

.feature-split-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn-pill {
    display: inline-block;
    padding: 0.75rem 1.75rem;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
}

.btn-pill-solid {
    background: #45dae7;
    color: #12171e;
}

.btn-pill-solid:hover {
    opacity: 0.9;
}

.btn-pill-outline {
    background: #fff;
    color: var(--anthracite);
    border: 1px solid #ccc;
}

.btn-pill-outline:hover {
    border-color: var(--anthracite);
}

.feature-split-media {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.feature-split-media img {
    display: block;
    width: 100%;
    height: auto;
}

.feature-split-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: #eaf8ff;
    font-weight: 700;
}

.feature-split-caption .badge-pill {
    background: var(--anthracite);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
}

@media (max-width: 800px) {
    .feature-split {
        grid-template-columns: 1fr;
    }
}

.legal-page h2 {
    margin-top: 2rem;
    font-size: 1.15rem;
}

.legal-page h3 {
    margin-top: 1.25rem;
    font-size: 1rem;
}

.legal-page ul {
    padding-left: 1.25rem;
}

.legal-page li {
    margin-bottom: 0.5rem;
}

.legal-notice {
    background: #f7f7f8;
    border-left: 3px solid var(--anthracite);
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
    font-size: 0.9rem;
}

.legal-notice p {
    margin: 0 0 0.75rem;
}

.legal-notice p:last-child {
    margin-bottom: 0;
}

.legal-toc {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    font-size: 0.9rem;
}

.legal-toc ol {
    columns: 2;
    padding-left: 1.25rem;
    margin: 0.5rem 0 0;
}

.legal-toc a {
    color: inherit;
}

.legal-callout {
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
}

.legal-callout h2 {
    margin-top: 0;
}

.legal-definitions dt {
    font-weight: 700;
    margin-top: 1rem;
}

.legal-definitions dd {
    margin: 0.25rem 0 0;
}

@media (max-width: 640px) {
    .legal-toc ol {
        columns: 1;
    }
}

/* --- Grid items (Admin -> Grid Items) -------------------------------------- */
/* Rendered by the "grid" component in app/core/components.php. Cards are
   capped at 300px and auto-fill the row, so this naturally becomes 2-3
   columns (and therefore 2-3 rows for ~5 items) depending on screen width
   — no separate mobile/tablet/desktop breakpoints needed. */

.grid-items-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 300px));
    gap: 1.5rem;
    justify-content: center;
}

.grid-item-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.grid-item-card img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    display: block;
}

.grid-item-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.grid-item-body h3 {
    margin: 0;
    font-size: 1.1rem;
}

.grid-item-price {
    color: var(--anthracite);
    font-weight: 700;
    font-size: 0.95rem;
}

.grid-item-content {
    max-height: 170px;
    overflow: hidden;
    position: relative;
    color: #444;
    font-size: 0.92rem;
    line-height: 1.55;
    transition: max-height 0.25s ease;
}

.grid-item-content:not(.expanded):not(.no-clip)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2.25rem;
    background: linear-gradient(transparent, #fff);
}

.grid-item-content.expanded {
    max-height: 3000px;
}

.grid-item-toggle {
    background: none;
    border: none;
    padding: 0;
    color: var(--anthracite);
    font-weight: 700;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}

.grid-item-toggle:hover {
    text-decoration: underline;
}

.grid-item-cta {
    margin-top: auto;
    align-self: flex-end;
}

/* --- Language switcher ----------------------------------------------------- */
/* Rendered by the "language-switcher" component: one link per language that
   actually has this page (pages are authored per language, never translated). */
.language-switcher {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.language-switcher a {
    color: #2f3437;
    text-decoration: none;
    opacity: 0.7;
}

.language-switcher a:hover,
.language-switcher a:focus {
    opacity: 1;
    color: #0091ad;
    text-decoration: underline;
}

.language-switcher-current {
    color: #0091ad;
    font-weight: 600;
}