/*
 * Cabot Medical — theme styles.
 *
 * The templates carry the design's own inline styles (site/*.dc.html), so
 * this file holds only what inline styles cannot: the font, hover states
 * (the design's style-hover attributes), the breakpoints the design handled in
 * JavaScript, motion start states, and typography for editor content
 * (articles, legal documents).
 */

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url(../fonts/manrope-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url(../fonts/manrope-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Base (the design's <style> block) ---- */
html, body { margin: 0; padding: 0; background: oklch(0.995 0.002 265); }
/* Keep keyboard focus and anchor targets clear of the sticky header and the phone bar (WCAG 2.4.11). */
html { scroll-padding-top: 110px; scroll-padding-bottom: 90px; }
body { font-family: 'Manrope', system-ui, sans-serif; color: oklch(0.22 0.04 268); }
*, *::before, *::after { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
::selection { background: oklch(0.91 0.11 98); color: oklch(0.22 0.04 268); }
input[type=range] { accent-color: oklch(0.27 0.07 268); }
[hidden] { display: none !important; }
summary::-webkit-details-marker { display: none; }
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

a:focus-visible, button:focus-visible, summary:focus-visible, input[type=range]:focus-visible {
	outline: 2px solid oklch(0.27 0.07 268);
	outline-offset: 2px;
}

.cm-skip {
	position: absolute; left: 12px; top: -60px; z-index: 100;
	padding: 12px 18px; border-radius: 999px;
	background: oklch(0.27 0.07 268); color: oklch(0.99 0.003 265);
	font: 700 14px/1 'Manrope', system-ui, sans-serif;
}
.cm-skip:focus { top: 12px; }
.cm-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---- Hover states (style-hover). Inline styles win over classes, hence !important. ---- */
.cm-hv-bg { --hv: oklch(0.955 0.006 265); }
.cm-hv-bg:hover { background: var(--hv) !important; }
.cm-lift2:hover { transform: translateY(-2px) !important; }
.cm-lift3:hover { transform: translateY(-3px) !important; }
.cm-lift5:hover { transform: translateY(-5px) !important; }
.cm-lift6:hover { transform: translateY(-6px) !important; }

/* ---- Header breakpoints (the design switched these in JS: wide ≥ 1180, button ≥ 560) ---- */
.cm-narrow { display: none !important; }
@media (max-width: 1179.98px) {
	.cm-wide { display: none !important; }
	.cm-narrow { display: inline-block !important; }
}
@media (min-width: 1180px) {
	.cm-narrow-panel { display: none !important; }
}
@media (max-width: 559.98px) {
	.cm-cta-560 { display: none !important; }
}

/* Asides stick beside long content from 900px (the design's asidePos). */
.cm-sticky900 { position: static; }
@media (min-width: 900px) {
	.cm-sticky900 { position: sticky; }
}

/* ---- Motion start states, so nothing flashes before cabot.js takes over ---- */
@media (prefers-reduced-motion: no-preference) {
	.cm-js [data-reveal="up"]:not([data-rv]) { opacity: 0; transform: translateY(36px); }
	.cm-js [data-reveal="fill"]:not([data-rv]) { transform: scaleX(0); transform-origin: left center; }
	.cm-js [data-hero]:not([data-hv]) { opacity: 0; }
	.cm-js [data-hero-line]:not([data-hv]) { transform: translateY(105%); }
	.cm-js [data-float]:not([data-hv]) { opacity: 0; }
	.cm-js [data-hero-img]:not([data-hv]) { opacity: 0; }
}

/* ---- Health Guide article body (Article.dc.html typography) ---- */
.cm-article > p { margin: 0 0 18px; }
.cm-article > p.cm-lead { font-size: 21px; line-height: 1.6; font-weight: 600; color: oklch(0.22 0.04 268); margin: 0 0 28px; }
.cm-article h2 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.15; color: oklch(0.22 0.04 268); margin: 48px 0 14px; scroll-margin-top: 110px; }
.cm-article h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; color: oklch(0.22 0.04 268); margin: 32px 0 10px; scroll-margin-top: 110px; }
.cm-article > ul, .cm-article > ol { margin: 0 0 18px; padding-left: 1.3em; }
.cm-article li { margin: 0 0 6px; }
.cm-article p a, .cm-article li a { text-decoration: underline; font-weight: 700; }
.cm-article img { max-width: 100%; height: auto; }
.cm-article figure { margin: 28px 0; }
.cm-article blockquote { margin: 28px 0; padding: 22px 26px; border-radius: 24px; background: oklch(0.955 0.006 265); font-weight: 600; }
.cm-article blockquote p { margin: 0; }

/* ---- Legal documents (Legal.dc.html blocks; see inc/legal.php) ---- */
.cm-legal-body { display: flex; flex-direction: column; gap: 12px; }
.cm-legal-body > p { margin: 0; }
.cm-legal-body > h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: oklch(0.22 0.04 268); margin: 8px 0 -4px; }
.cm-legal-body > ul, .cm-legal-body > ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.cm-legal-body > ul > li { display: flex; gap: 12px; margin: 0; }
.cm-legal-body > ul > li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: oklch(0.27 0.07 268); margin-top: 12px; flex-shrink: 0; }
.cm-legal-body > ol { counter-reset: cm-n; }
.cm-legal-body > ol > li { display: flex; gap: 14px; margin: 0; counter-increment: cm-n; }
.cm-legal-body > ol > li::before { content: counter(cm-n); flex-shrink: 0; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; background: oklch(0.955 0.006 265); color: oklch(0.22 0.04 268); font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.cm-legal-body > .cm-note { border-radius: 16px; background: oklch(0.91 0.11 98); color: oklch(0.22 0.04 268); padding: 16px 20px; font-size: 16px; font-weight: 700; line-height: 1.6; }
.cm-legal-body a { text-decoration: underline; }