/* Opt-in palette: the existing home and other templates keep their styling. */
body.tmh-content.site-themed.tmh-calm {
    --tmh-calm-surface: var(--bs-body-bg);
    --tmh-calm-tint: var(--bs-tertiary-bg);
    --tmh-calm-border: var(--bs-border-color);
    --tmh-page-art: none;
    background: var(--tmh-calm-tint);
}

html[data-site-theme="tmh"][data-bs-theme="light"] body.tmh-calm {
    --tmh-calm-tint: #eef2f7;
    --tmh-calm-surface-rgb: 252, 253, 255;
    --tmh-calm-surface: rgb(var(--tmh-calm-surface-rgb));
    --tmh-calm-border: #d2dce8;
    --tmh-ink: #29364a;
    color: var(--tmh-ink);
}

html[data-site-theme="tmh"][data-bs-theme="dark"] body.tmh-calm {
    --tmh-calm-tint: #202938;
    --tmh-calm-surface-rgb: 42, 53, 71;
    --tmh-calm-surface: rgb(var(--tmh-calm-surface-rgb));
    --tmh-calm-border: #46566e;
}

/* Scope Bootstrap's menu surfaces to these pages, including bg-body's RGB
   utility, recursive submenus, and the appearance dropdown. */
html[data-site-theme="tmh"] .tmh-calm .tmh-site-header {
    --bs-body-bg: var(--tmh-calm-surface);
    --bs-body-bg-rgb: var(--tmh-calm-surface-rgb);
    --bs-secondary-bg: var(--tmh-calm-tint);
    --bs-tertiary-bg: var(--tmh-calm-tint);
    --bs-border-color: var(--tmh-calm-border);
    --tmh-gold: var(--tmh-calm-border);
}

.tmh-calm .tmh-calm-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border: 1px solid var(--tmh-calm-border);
    border-radius: 1.25rem;
    background: var(--tmh-calm-surface);
    color: var(--bs-emphasis-color);
    font-size: 1.6rem;
}

.tmh-calm .tmh-hero { padding-block: clamp(2rem, 5vw, 4rem) 2rem; }
.tmh-calm .tmh-hero > .container,
.tmh-calm .tmh-page > main { max-width: 1080px; }

.tmh-calm .tmh-page > main > section {
    padding: clamp(1.25rem, 4vw, 3rem);
    background: var(--tmh-calm-surface);
    border: 1px solid var(--tmh-calm-border);
    border-radius: 1.5rem;
    box-shadow: 0 .5rem 2rem rgb(24 36 56 / 4%);
    overflow-wrap: anywhere;
}

.tmh-calm .tmh-page > main .tmh-legacy > .container { padding-inline: 0; }
.tmh-calm .tmh-page .tmh-legacy :is(h2, h3) { line-height: 1.25; }
.tmh-calm .tmh-page .tmh-legacy :is(h2, h3):is(.text-danger, .text-hightlight-color) { color: var(--bs-emphasis-color) !important; }
.tmh-calm .tmh-page .tmh-legacy [style*="color"] { color: inherit !important; }
.tmh-calm .tmh-page .tmh-legacy a:not(.btn) { color: var(--bs-link-color) !important; }
.tmh-calm .tmh-page .tmh-legacy a:not(.btn):hover { color: var(--bs-link-hover-color) !important; }
.tmh-calm .tmh-page .tmh-legacy p { max-width: 75ch; }
.tmh-calm .tmh-page .tmh-legacy img { height: auto; max-width: 100%; }
.tmh-calm .tmh-page .tmh-legacy iframe { max-width: 100%; }
.tmh-calm .tmh-page nav[aria-label="Related pages"] .card {
    border-color: var(--tmh-calm-border);
    background: var(--tmh-calm-surface);
    padding: 1.5rem;
}
.tmh-calm .tmh-page nav[aria-label="Related pages"] a:hover { border-color: var(--bs-primary); }
.tmh-calm-crisis .tmh-page > main > section:first-child { border-top: .3rem solid var(--bs-primary); }

.tmh-calm-about .tmh-about-story > .lead,
.tmh-cookie-policy .tmh-policy-summary { max-width: 68ch; font-size: 1.15rem; }
.tmh-about-panel,
.tmh-policy-card {
    height: 100%;
    padding: 1.25rem;
    border: 1px solid var(--tmh-calm-border);
    border-radius: 1rem;
    background: var(--tmh-calm-tint);
}
.tmh-about-panel .bi,
.tmh-policy-card .bi { color: var(--bs-primary); }
.tmh-about-hours,
.tmh-policy-choice {
    padding: 1.25rem;
    border-left: .3rem solid var(--bs-primary);
    border-radius: .75rem;
    background: var(--tmh-calm-tint);
}
.tmh-about-hours > :last-child,
.tmh-policy-choice > :last-child,
.tmh-policy-card > :last-child { margin-bottom: 0; }
.tmh-cookie-policy .tmh-policy-section + .tmh-policy-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--tmh-calm-border);
}
.tmh-cookie-policy .tmh-policy-table th { white-space: nowrap; }
.tmh-cookie-policy .tmh-policy-table td { min-width: 12rem; }

.tmh-home-welcome { padding-block: clamp(2rem, 5vw, 4.5rem); }
.tmh-peaceful-home #home-heading { font-size: clamp(2.4rem, 4.5vw, 4.1rem); line-height: 1.1; max-width: 15ch; text-wrap: balance; }
.tmh-home-eyebrow { font-size: .8rem; letter-spacing: .12em; font-weight: 700; }
.tmh-home-copy { overflow-wrap: anywhere; }
.tmh-home-copy > :last-child { margin-bottom: 0; }
.tmh-home-copy img { max-width: 100%; height: auto; }
.tmh-home-note, .tmh-home-carousel, .tmh-home-card {
    background: var(--tmh-calm-surface);
    border: 1px solid var(--tmh-calm-border);
    border-radius: 1.5rem;
}
.tmh-home-carousel { overflow: hidden; box-shadow: 0 1rem 3rem rgb(24 36 56 / 6%); }
.tmh-home-slide-image { display: block; width: 100%; height: clamp(20rem, 36vw, 29rem); object-fit: contain; background: var(--tmh-calm-surface); }
.tmh-home-carousel-controls:not([hidden]) { display: flex; }
.tmh-home-dot { width: 2rem; height: 2rem; padding: .55rem; border: 0; background: transparent; border-radius: 50%; }
.tmh-home-dot::after { content: ""; display: block; width: 100%; height: 100%; background: var(--bs-secondary-color); border-radius: 50%; opacity: .4; }
.tmh-home-dot[aria-current="true"]::after { background: var(--bs-emphasis-color); opacity: 1; }
.tmh-home-dot:focus-visible { outline: 3px solid var(--bs-primary); outline-offset: 2px; }
/* Progressive enhancement: all stories remain readable if JavaScript fails. */
.tmh-home-carousel:not(.is-enhanced) .carousel-item { display: block; float: none; margin-right: 0; }
.tmh-home-carousel:not(.is-enhanced) .carousel-item + .carousel-item { border-top: 1px solid var(--tmh-calm-border); }

@media (prefers-reduced-motion: reduce) {
    .tmh-home-carousel .carousel-item { transition: none; }
}

@media print {
    .tmh-home-carousel .carousel-item { display: block !important; float: none; transform: none !important; margin-right: 0; }
    .tmh-home-carousel-controls { display: none !important; }
    .tmh-home-carousel { overflow: visible; }
    .tmh-calm main { color: #000; background: #fff; }
}