/* =================================================================
   LH Streaming Theme – complementary styles
   Lives next to style.css. style.css holds the basics (resets, vars,
   buttons). This file holds the "fancy" bits: hero, fallback cards,
   posts grid, 404, theme-only header/footer for the plugin-missing
   case.
================================================================= */

/* ---------- Skip link (always present, off-canvas until focused) --- */
.lh-skip-link {
	background: var(--lh-primary);
	color: #fff !important;
	padding: 10px 18px;
	border-radius: 0 0 6px 0;
	font-weight: 600;
	z-index: 100000;
}
.lh-skip-link:focus,
.lh-skip-link:focus-visible {
	position: fixed;
	top: 0;
	left: 0;
	clip: auto;
	height: auto;
	width: auto;
	overflow: visible;
	white-space: normal;
}

/* ---------- Theme-side fallback header (only when plugin missing) -- */
.lh-theme-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	height: 70px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.55));
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	transition: background 0.25s ease;
}

.lh-theme-header.scrolled {
	background: rgba(0, 0, 0, 0.95);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.lh-theme-header__inner {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 4vw;
	display: flex;
	align-items: center;
	gap: 32px;
}

.lh-theme-header__brand {
	color: var(--lh-primary);
	font-weight: 800;
	font-size: 1.25rem;
	letter-spacing: 0.02em;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.lh-theme-header__logo {
	max-height: 40px;
	width: auto;
}

.lh-theme-header__nav {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 20px;
}

.lh-theme-header__menu,
.lh-theme-header__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 20px;
}

.lh-theme-header__menu a,
.lh-theme-header__nav a {
	color: var(--lh-text);
	font-size: 0.95rem;
	font-weight: 500;
}

.lh-theme-header__menu a:hover,
.lh-theme-header__nav a:hover {
	color: var(--lh-text-muted);
}

.lh-theme-header__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* ---------- Hamburger toggle (hidden ≥768px) ----------------------- */
.lh-theme-header__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 38px;
	height: 38px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	border-radius: 6px;
	transition: background 0.15s ease;
}
.lh-theme-header__toggle:hover,
.lh-theme-header__toggle:focus-visible {
	background: rgba(255, 255, 255, 0.08);
}
.lh-theme-header__toggle-bar {
	display: block;
	width: 22px;
	height: 2px;
	margin: 0 auto;
	background: var(--lh-text);
	transition: transform 0.2s ease, opacity 0.2s ease;
	border-radius: 1px;
}
.lh-theme-header__toggle[aria-expanded="true"] .lh-theme-header__toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.lh-theme-header__toggle[aria-expanded="true"] .lh-theme-header__toggle-bar:nth-child(2) {
	opacity: 0;
}
.lh-theme-header__toggle[aria-expanded="true"] .lh-theme-header__toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Header search (uses native <details>) ------------------ */
.lh-theme-header__search { position: relative; }
.lh-theme-header__search summary {
	list-style: none;
	cursor: pointer;
	width: 38px; height: 38px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 6px;
	color: var(--lh-text);
	transition: background 0.15s ease;
}
.lh-theme-header__search summary::-webkit-details-marker { display: none; }
.lh-theme-header__search summary:hover,
.lh-theme-header__search summary:focus-visible {
	background: rgba(255, 255, 255, 0.08);
}
.lh-theme-header__search[open] > summary {
	background: rgba(255, 255, 255, 0.12);
}
.lh-theme-header__search-form {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 280px;
	background: rgba(0, 0, 0, 0.95);
	border: 1px solid var(--lh-border);
	border-radius: 6px;
	padding: 10px;
	box-shadow: var(--lh-shadow-lg);
}
.lh-theme-header__search-form input[type="search"] {
	width: 100%;
	padding: 10px 12px;
	border-radius: 4px;
	border: 1px solid var(--lh-border);
	background: var(--lh-bg-card);
	color: var(--lh-text);
	font: inherit;
}
/* Live-search dropdown ------------------------------------------------- */
.lh-theme-header__suggest {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: min(440px, 92vw);
	max-height: 70vh;
	overflow-y: auto;
	background: var(--lh-bg-card, #141414);
	border: 1px solid var(--lh-border, rgba(255,255,255,.08));
	border-radius: var(--lh-radius, 6px);
	box-shadow: var(--lh-shadow-lg, 0 10px 30px rgba(0,0,0,.6));
	z-index: 999;
	padding: 6px;
}

.lh-theme-header__suggest .lh-suggest__status {
	padding: 14px 12px;
	color: var(--lh-text-muted, #b3b3b3);
	font-size: 13px;
	text-align: center;
}

.lh-theme-header__suggest .lh-suggest__item {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 10px;
	align-items: center;
	padding: 8px;
	border-radius: 4px;
	text-decoration: none;
	color: var(--lh-text, #fff);
}

.lh-theme-header__suggest .lh-suggest__item:hover,
.lh-theme-header__suggest .lh-suggest__item.is-active,
.lh-theme-header__suggest .lh-suggest__all.is-active {
	background: rgba(255, 255, 255, .08);
	color: var(--lh-text, #fff);
}

.lh-theme-header__suggest .lh-suggest__thumb {
	width: 56px;
	height: 56px;
	background: #000;
	border-radius: 4px;
	overflow: hidden;
	flex-shrink: 0;
}
.lh-theme-header__suggest .lh-suggest__thumb img {
	width: 100%; height: 100%; object-fit: cover;
}

.lh-theme-header__suggest .lh-suggest__body strong {
	display: block;
	font-size: 14px;
	line-height: 1.25;
	margin-bottom: 4px;
}
.lh-theme-header__suggest .lh-suggest__body small {
	font-size: 11px;
	color: var(--lh-text-muted, #b3b3b3);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.lh-theme-header__suggest .lh-suggest__all {
	display: block;
	padding: 10px 12px;
	margin-top: 4px;
	border-top: 1px solid var(--lh-border, rgba(255,255,255,.08));
	color: var(--lh-primary, #e50914);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	border-radius: 4px;
}

.lh-theme-header__search-form input[type="search"]:focus {
	outline: 2px solid var(--lh-primary);
	outline-offset: 2px;
}

/* Facet pills sitting between the search input and the suggestion list. */
.lh-theme-header__facets {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 8px 4px 0;
	margin: 6px 0 0;
}
.lh-theme-header__facets .lh-facet {
	appearance: none;
	-webkit-appearance: none;
	padding: 5px 28px 5px 10px;
	border: 1px solid var(--lh-border, rgba(255,255,255,.16));
	border-radius: 999px;
	background: rgba(255,255,255,.04) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><polyline points='0,0 5,5 10,0' stroke='white' stroke-width='1.5' fill='none' /></svg>") no-repeat right 10px center;
	color: var(--lh-text, #fff);
	font-size: 12px;
	line-height: 1.1;
	cursor: pointer;
	transition: border-color .15s, background-color .15s;
}
.lh-theme-header__facets .lh-facet:hover { border-color: rgba(255,255,255,.4); }
.lh-theme-header__facets .lh-facet:focus  { outline: 2px solid var(--lh-primary); outline-offset: 1px; }
.lh-theme-header__facets .lh-facet[data-active="1"] {
	background-color: rgba(229, 9, 20, .15);
	border-color: var(--lh-primary, #e50914);
}

@media (max-width: 900px) {
	.lh-theme-header__toggle { display: inline-flex; order: 2; }
	.lh-theme-header__inner { gap: 16px; }
	.lh-theme-header__brand { flex: 1; }
	.lh-theme-header__actions { order: 1; }
	.lh-theme-header__nav {
		order: 4;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.96);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		padding: 16px 4vw 20px;
		flex-direction: column;
		gap: 8px;
		border-bottom: 1px solid var(--lh-border);
		transform: translateY(-8px);
		opacity: 0;
		pointer-events: none;
		transition: transform 0.18s ease, opacity 0.18s ease;
	}
	.lh-theme-header__nav.is-open,
	.lh-theme-header[data-nav-open="true"] .lh-theme-header__nav {
		transform: translateY(0);
		opacity: 1;
		pointer-events: auto;
	}
	.lh-theme-header__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		width: 100%;
	}
	.lh-theme-header__menu a {
		display: block;
		padding: 10px 12px;
		border-radius: 4px;
	}
	.lh-theme-header__menu a:hover,
	.lh-theme-header__menu a:focus-visible {
		background: rgba(255, 255, 255, 0.06);
		color: var(--lh-text);
	}
}

/* Push content below the fallback header. The plugin's own header
   already does this via its own CSS, so we only push when the plugin
   is missing. */
body.lh-plugin-missing .lh-site-main { padding-top: 70px; }

/* `tabindex="-1"` makes #lh-site-main programmatically focusable so the
   skip link can shift focus into the main region without leaving an
   artificial outline once it scrolls there. */
main[tabindex="-1"] { outline: none; }

/* ---------- Theme-side fallback footer ----------------------------- */
.lh-theme-footer {
	background: #0a0a0a;
	color: var(--lh-text-muted);
	padding: 48px 0 24px;
	margin-top: 80px;
	border-top: 1px solid var(--lh-border);
}

.lh-theme-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--lh-border);
	margin-bottom: 24px;
}

@media (min-width: 768px) {
	.lh-theme-footer__grid { grid-template-columns: 1fr 2fr; }
}

.lh-theme-footer__company { margin-top: 4px; }
.lh-theme-footer__company-name {
	color: var(--lh-text);
	display: block;
	margin-bottom: 8px;
	font-size: 1.1rem;
}
.lh-theme-footer__company-line { margin: 0 0 6px; font-size: 0.9rem; color: var(--lh-text-muted); }
.lh-theme-footer__company-line:last-child { margin-bottom: 0; }
.lh-theme-footer__company-line a { color: var(--lh-link); }
.lh-theme-footer__company-line a:hover { color: var(--lh-link-hover); }

/* Footer widget grid — rendered above the brand/menu row when the site
   owner populated any of the 4 footer sidebars in Appearance → Widgets. */
.lh-theme-footer__widgets {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	padding-bottom: 32px;
	margin-bottom: 32px;
	border-bottom: 1px solid var(--lh-border);
}
@media (min-width: 640px) {
	.lh-theme-footer__widgets { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
	.lh-theme-footer__widgets { grid-template-columns: repeat(4, 1fr); }
}
.lh-theme-footer__widget-col .widget { margin-bottom: 16px; }
.lh-theme-footer__widget-col .widget:last-child { margin-bottom: 0; }
.lh-theme-footer__widget-title {
	color: var(--lh-text);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 10px;
}
.lh-theme-footer__widget-col ul { list-style: none; padding: 0; margin: 0; }
.lh-theme-footer__widget-col li { margin-bottom: 6px; }
.lh-theme-footer__widget-col a { color: var(--lh-text-muted); font-size: 0.9rem; }
.lh-theme-footer__widget-col a:hover { color: var(--lh-text); }
.lh-theme-footer__widget-col .search-form input[type="search"] {
	width: 100%;
	padding: 8px 12px;
	border-radius: 4px;
	border: 1px solid var(--lh-border);
	background: var(--lh-bg-card);
	color: var(--lh-text);
	font: inherit;
}

.lh-theme-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
}

.lh-theme-footer__menu a { color: var(--lh-text-muted); font-size: 0.9rem; }
.lh-theme-footer__menu a:hover { color: var(--lh-text); }
.lh-theme-footer__bottom { text-align: center; font-size: 0.85rem; }

/* ---------- Hero billboard -----------------------------------------
 * Uses `min-height` (not `height`) so the hero grows when the
 * description is long instead of pushing the content up under the
 * (transparent) header. The padding-top reserves space for the fixed
 * header *plus* a small breathing gap so the "Featured" eyebrow never
 * touches the menu, even when the title wraps to two lines. */
.lh-hero {
	position: relative;
	min-height: clamp(420px, 80vh, 720px);
	margin-top: calc(-1 * var(--lh-header-height));
	padding-top: calc(var(--lh-header-height) + 24px);
	overflow: hidden;
	color: var(--lh-text);
	display: flex;
	align-items: flex-end;
	isolation: isolate;
}

.lh-hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: -2;
}

/* When we have a featured image we render a real <img fetchpriority="high">
   inside .lh-hero__media. CSS background-image used to be the LCP candidate
   here, but Chrome explicitly demotes background images for LCP scoring —
   a real <img> with `fetchpriority="high"` lands the LCP much sooner. */
.lh-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	transform: scale(1.02);
	display: block;
}

.lh-hero--gradient .lh-hero__media {
	background: radial-gradient(80% 60% at 30% 30%, rgba(229, 9, 20, 0.4) 0%, rgba(0, 0, 0, 1) 70%),
		linear-gradient(135deg, #1a0a0a 0%, #000 60%);
}

.lh-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.15) 35%, rgba(0, 0, 0, 0.85) 75%, #000 100%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 35%, rgba(0, 0, 0, 0) 75%);
	z-index: -1;
}

.lh-hero__content {
	position: relative;
	max-width: 640px;
	padding: 0 4vw 80px;
}

.lh-hero__eyebrow {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lh-primary);
	margin-bottom: 12px;
}

.lh-hero__title {
	font-size: clamp(2rem, 5.5vw, 4rem);
	line-height: 1.05;
	margin: 0 0 16px;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.lh-hero__description {
	font-size: clamp(1rem, 1.5vw, 1.2rem);
	color: rgba(255, 255, 255, 0.85);
	max-width: 540px;
	margin: 0 0 24px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	/* Cap to 4 lines on desktop / 3 lines on small phones so the hero
	   stays cinematic even when TMDB returns a long synopsis. */
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lh-hero__buttons {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

@media (max-width: 600px) {
	.lh-hero { min-height: 70vh; }
	.lh-hero__content { padding-bottom: 60px; }
	.lh-hero__description { -webkit-line-clamp: 3; line-clamp: 3; }
}

/* ---------- Section heading --------------------------------------- */
.lh-section { padding: 32px 0 56px; }

.lh-section__heading {
	font-size: 1.5rem;
	margin: 0 0 16px;
	padding: 0 4vw;
}

@media (min-width: 1024px) {
	.lh-section__heading { padding: 0 4vw; }
}

/* ---------- Posts grid (used by index/archive/search fallback) ---- */
.lh-posts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
}

.lh-post-card {
	background: var(--lh-bg-card);
	border-radius: var(--lh-radius);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	display: flex;
	flex-direction: column;
}

.lh-post-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--lh-shadow-lg);
}

.lh-post-card__thumb {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #000;
}

.lh-post-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.25s ease;
}

.lh-post-card:hover .lh-post-card__thumb img { transform: scale(1.04); }

.lh-post-card__body { padding: 14px 16px 18px; flex: 1; display: flex; flex-direction: column; gap: 8px; }

.lh-post-card__title { font-size: 1.05rem; margin: 0; }
.lh-post-card__title a { color: var(--lh-text); }
.lh-post-card__title a:hover { color: var(--lh-text-muted); }

.lh-post-card__meta { font-size: 0.85rem; color: var(--lh-text-muted); }

.lh-post-card__excerpt {
	color: #c4c4c4;
	font-size: 0.92rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------- Pages (legal pages etc.) ------------------------------ */
.lh-page { padding: 32px 0 64px; }
.lh-page__header { padding-top: 24px; padding-bottom: 16px; }
.lh-page__content { max-width: 820px; margin: 0 auto; }
.lh-page--legal .lh-page__content {
	background: var(--lh-bg-card);
	padding: 32px;
	border-radius: var(--lh-radius);
	margin-top: 24px;
}

/* ---------- Archive header ---------------------------------------- */
.lh-archive-header { margin-bottom: 24px; }
.lh-archive-header h1 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.lh-archive-header p { color: var(--lh-text-muted); }

/* ---------- Empty / plugin-missing card --------------------------- */
.lh-empty-card {
	max-width: 560px;
	margin: 32px auto;
	padding: 40px 32px;
	background: var(--lh-bg-card);
	border: 1px solid var(--lh-border);
	border-radius: 12px;
	text-align: center;
	box-shadow: var(--lh-shadow-lg);
}

.lh-empty-card__icon {
	color: var(--lh-primary);
	margin-bottom: 12px;
	display: flex;
	justify-content: center;
}

.lh-empty-card h2 {
	font-size: 1.4rem;
	margin: 0 0 8px;
}

.lh-empty-card p {
	color: var(--lh-text-muted);
	margin: 0 0 20px;
}

/* ---------- Marketing CTA ----------------------------------------- */
.lh-cta {
	background: linear-gradient(180deg, #000 0%, #0a0a0a 50%, #000 100%);
	border-top: 8px solid #222;
	border-bottom: 8px solid #222;
	padding: 64px 0;
}

.lh-cta__inner {
	text-align: center;
}

.lh-cta h2 {
	font-size: clamp(1.5rem, 3vw, 2.5rem);
	margin: 0 0 16px;
}

.lh-cta p {
	color: var(--lh-text-muted);
	font-size: 1.1rem;
	max-width: 600px;
	margin: 0 auto 24px;
}

/* ---------- Search form -------------------------------------------- */
.lh-searchform {
	display: inline-flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 8px;
	width: 100%;
	max-width: 480px;
}

.lh-searchform input[type="search"] {
	flex: 1;
	min-width: 200px;
	padding: 12px 16px;
	border-radius: var(--lh-radius);
	border: 1px solid var(--lh-border);
	background: var(--lh-bg-card);
	color: var(--lh-text);
	font-size: 1rem;
	font-family: inherit;
}

.lh-searchform input[type="search"]:focus {
	outline: none;
	border-color: var(--lh-primary);
}

/* ---------- Pagination -------------------------------------------- */
.lh-pagination,
.nav-links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 40px 0 0;
}

.lh-pagination a,
.lh-pagination span,
.nav-links a,
.nav-links span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border-radius: var(--lh-radius);
	background: var(--lh-bg-card);
	color: var(--lh-text);
	font-weight: 500;
	font-size: 0.95rem;
}

.lh-pagination a:hover,
.nav-links a:hover {
	background: var(--lh-bg-hover);
}

.lh-pagination .current,
.nav-links .current {
	background: var(--lh-primary);
	color: #fff;
}

/* ---------- 404 ---------------------------------------------------- */
.lh-404 {
	position: relative;
	min-height: calc(100vh - var(--lh-header-height) - 100px);
	display: flex;
	align-items: center;
	overflow: hidden;
}

.lh-404__inner {
	position: relative;
	z-index: 2;
	max-width: 600px;
	padding: 64px 4vw;
}

.lh-404__code {
	display: inline-block;
	font-size: clamp(4rem, 12vw, 9rem);
	font-weight: 900;
	line-height: 1;
	background: linear-gradient(135deg, var(--lh-primary), #ff6b6b);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.lh-404__title { font-size: clamp(1.5rem, 3vw, 2.5rem); margin: 12px 0; }
.lh-404__text { color: var(--lh-text-muted); margin-bottom: 24px; }

.lh-404__art {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 50%;
	opacity: 0.5;
	z-index: 1;
	pointer-events: none;
}

.lh-404__art svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 900px) {
	.lh-404__art { display: none; }
}

/* ---------- Comments fallback ------------------------------------- */
.lh-comments h2,
.lh-comments__title,
.lh-comments__reply-title { font-size: 1.25rem; margin-bottom: 16px; color: var(--lh-text); }
.lh-comments__title span { color: var(--lh-primary); }
.lh-comments__closed { color: var(--lh-text-muted); font-style: italic; margin: 12px 0 24px; }
.lh-comments .comment-list { list-style: none; padding: 0; }
.lh-comments .comment {
	background: var(--lh-bg-card);
	padding: 16px;
	border-radius: var(--lh-radius);
	margin-bottom: 12px;
}
.lh-comments .comment-author { font-weight: 600; }
.lh-comments .comment-meta { font-size: 0.85rem; color: var(--lh-text-muted); margin-bottom: 8px; }
.lh-comments .comment-form input[type="text"],
.lh-comments .comment-form input[type="email"],
.lh-comments .comment-form input[type="url"],
.lh-comments .comment-form textarea {
	width: 100%;
	padding: 10px 14px;
	border-radius: var(--lh-radius);
	border: 1px solid var(--lh-border);
	background: var(--lh-bg-card);
	color: var(--lh-text);
	margin-top: 6px;
	font-family: inherit;
}

.lh-comments .form-submit input,
.lh-comments .submit { /* legacy markup */
	background: var(--lh-primary);
	color: #fff;
	border: 0;
	padding: 12px 24px;
	border-radius: var(--lh-radius);
	cursor: pointer;
	font-weight: 600;
}

/* ---------- Screen-reader only ------------------------------------ */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px; width: 1px;
	overflow: hidden;
	position: absolute !important;
	white-space: nowrap;
}