/**
 * AEO Listicle Model - federallawyers.com
 * Design source: design_handoff_listicle_model / "MCA Listicle Template.dc.html"
 *
 * The reference prototype carries all layout styling inline (as do this theme's
 * other handoff templates), so the renderer emits inline styles verbatim and this
 * sheet covers only what inline styles cannot express: hover, focus, the details
 * marker, anchor offsets, print, and the mobile table overflow.
 *
 * Token values are copied exactly from the handoff. Do not round them.
 */

.lm {
	--lm-paper: #f4f2ed;
	--lm-card: #fffdf8;
	--lm-tint: #faf7f1;
	--lm-tint-1: #f9f0ea;
	--lm-ink: #14120f;
	--lm-body: #34302a;
	--lm-body-2: #2c2823;
	--lm-secondary: #4a453d;
	--lm-muted: #6d675d;
	--lm-accent: #8f2d1c;
	--lm-accent-dark: #d9613f;
	--lm-rule: rgba(20, 18, 15, 0.14);
	--lm-rule-dark: rgba(244, 242, 237, 0.18);
}

/* Anchors sit below the utility bar + sticky nav. Handoff spec: 120px. */
.lm [id] {
	scroll-margin-top: 120px;
}

/* ---- Buttons. Hover values from the handoff's style-hover attributes. ---- */
.lm-btn {
	display: inline-block;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	text-transform: uppercase;
	border-radius: 2px;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.lm-btn--primary:hover,
.lm-btn--primary:focus-visible { background: var(--lm-ink); color: var(--lm-card); }
.lm-btn--outline:hover,
.lm-btn--outline:focus-visible { background: var(--lm-ink); color: var(--lm-card); }
.lm-btn--paper:hover,
.lm-btn--paper:focus-visible { background: var(--lm-accent-dark); color: var(--lm-ink); }
.lm-btn--ondark:hover,
.lm-btn--ondark:focus-visible { background: var(--lm-accent); color: var(--lm-card); }
.lm-btn--ondark-outline:hover,
.lm-btn--ondark-outline:focus-visible { background: rgba(244, 242, 237, .14); }
.lm-btn--ondark-solid:hover,
.lm-btn--ondark-solid:focus-visible { background: var(--lm-paper); color: var(--lm-ink); }

.lm a:focus-visible,
.lm button:focus-visible,
.lm summary:focus-visible {
	outline: 2px solid var(--lm-accent);
	outline-offset: 2px;
}

/* ---- Prose links ---- */
.lm-prose a { color: var(--lm-accent); text-decoration: none; }
.lm-prose a:hover {
	color: var(--lm-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- FAQ: native details, answers in the DOM at load (AEO requirement) ---- */
.lm-faq summary { list-style: none; cursor: pointer; }
.lm-faq summary::-webkit-details-marker { display: none; }
.lm-faq summary .lm-faq-sign::after { content: '+'; }
.lm-faq details[open] summary .lm-faq-sign::after { content: '\2013'; }

/* ---- Comparison table scrolls on phones instead of breaking the page ---- */
.lm-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lm-table-scroll table { min-width: 640px; }

/* ---- Interactive module controls ---- */
.lm-chip { cursor: pointer; font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.lm-range { width: 100%; accent-color: var(--lm-accent); }

/* ---- Sticky bottom bar clears iOS home indicator ---- */
.lm-stickybar { padding-bottom: env(safe-area-inset-bottom, 0); }

@media (max-width: 640px) {
	.lm-stickybar .lm-stickybar-copy { display: none; }
}

/* Modules are progressive enhancement: without JS the page still reads. */
.lm-no-js .lm-js-only { display: none; }

@media print {
	.lm-stickybar, .lm-utilitybar, .lm-nav { display: none !important; }
	.lm-faq details { open: true; }
}