/* ==========================================================================
   assets/css/main.css
   Component & layout styles. Every color/spacing/type value here pulls
   from the --clf-* custom properties defined in style.css — no hard-coded
   hex codes or magic-number pixel values should be introduced here.
   ========================================================================== */

/* ---- Layout primitives ---- */

.container {
	width: 100%;
	max-width: var(--clf-container);
	margin-inline: auto;
	padding-inline: var(--clf-space-3);
}

.container-narrow,
.container .container-narrow {
	max-width: var(--clf-container-narrow);
}

section {
	padding-block: var(--clf-space-6);
}

.eyebrow {
	display: inline-block;
	font-family: var(--clf-font-body);
	font-weight: 700;
	font-size: var(--clf-fs-100);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--clf-gold-dark);
	margin-bottom: var(--clf-space-2);
}
.eyebrow--on-dark { color: var(--clf-gold); }

/* ---- Buttons ---- */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--clf-space-1);
	font-family: var(--clf-font-body);
	font-weight: 700;
	font-size: var(--clf-fs-200);
	text-decoration: none;
	border-radius: var(--clf-radius-sm);
	border: 2px solid transparent;
	padding: 0.85em 1.6em;
	cursor: pointer;
	transition: transform var(--clf-duration-fast) var(--clf-ease),
		box-shadow var(--clf-duration-fast) var(--clf-ease),
		background-color var(--clf-duration-fast) var(--clf-ease);
}
.button--lg { font-size: var(--clf-fs-300); padding: 1em 2em; }
.button--block { width: 100%; }

.button--gold {
	background: var(--clf-gold);
	color: var(--clf-ink);
}
.button--gold:hover { background: var(--clf-gold-dark); transform: translateY(-2px); box-shadow: var(--clf-shadow-md); }

.button--outline {
	background: transparent;
	border-color: currentColor;
	color: var(--clf-ink);
}
.button--outline:hover { background: var(--clf-ink); color: var(--clf-white); }

.button--outline-light {
	background: transparent;
	border-color: rgba(255,255,255,0.5);
	color: var(--clf-white);
}
.button--outline-light:hover { background: rgba(255,255,255,0.12); border-color: var(--clf-white); }

.phone-link {
	text-decoration: none;
	font-weight: 700;
	white-space: nowrap;
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: 700;
	text-decoration: none;
	color: var(--clf-ink);
	margin-top: var(--clf-space-4);
}
.link-arrow:hover { color: var(--clf-gold-dark); }

/* ---- Top contact bar ---- */

.topbar {
	background: var(--clf-charcoal);
	color: var(--clf-white);
	font-size: var(--clf-fs-100);
}
.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: var(--clf-space-1);
}
.topbar__contact { display: flex; align-items: center; gap: var(--clf-space-2); }
.topbar__phone { color: var(--clf-gold); }
.topbar__divider { opacity: 0.4; }
.topbar__social a { color: var(--clf-white); display: inline-flex; }
.icon-facebook::before { content: "f"; font-weight: 700; }

/* ---- Header ---- */

.site-header {
	background: var(--clf-paper);
	border-bottom: 1px solid var(--clf-line);
	position: sticky;
	top: 0;
	z-index: 500;
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: var(--clf-space-2);
	gap: var(--clf-space-3);
}
.site-header__brand img { max-height: 64px; width: auto; }
.site-header__text-logo {
	font-family: var(--clf-font-display);
	font-size: var(--clf-fs-400);
	font-weight: 700;
	text-decoration: none;
}

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	background: transparent;
	border: none;
	cursor: pointer;
}
.nav-toggle__bar {
	display: block;
	width: 26px;
	height: 2px;
	background: var(--clf-ink);
	transition: transform var(--clf-duration-fast) var(--clf-ease), opacity var(--clf-duration-fast) var(--clf-ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(4) { transform: translateY(-7px) rotate(-45deg); }

.primary-nav {
	display: flex;
	align-items: center;
	gap: var(--clf-space-4);
}
.primary-nav__list {
	display: flex;
	align-items: center;
	gap: var(--clf-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}
.primary-nav__list .menu-link {
	text-decoration: none;
	font-weight: 600;
	color: var(--clf-ink-soft);
	padding: var(--clf-space-1) 0;
	border-bottom: 2px solid transparent;
}
.primary-nav__list .menu-link:hover,
.primary-nav__list .menu-link[aria-current="page"] {
	color: var(--clf-ink);
	border-bottom-color: var(--clf-gold);
}
.primary-nav__cta { margin-left: var(--clf-space-2); }
.primary-nav__lang { margin-left: var(--clf-space-2); display: flex; align-items: center; }

@media (max-width: 900px) {
	.nav-toggle { display: flex; }
	.primary-nav {
		position: fixed;
		inset: 0 0 0 30%;
		flex-direction: column;
		align-items: flex-start;
		background: var(--clf-charcoal);
		color: var(--clf-white);
		padding: var(--clf-space-6) var(--clf-space-4);
		transform: translateX(100%);
		transition: transform var(--clf-duration-base) var(--clf-ease);
		z-index: 600;
		overflow-y: auto;
	}
	.primary-nav.is-open { transform: translateX(0); }
	.primary-nav__list { flex-direction: column; align-items: flex-start; gap: var(--clf-space-3); }
	.primary-nav__list .menu-link { color: var(--clf-white); }
	.primary-nav__cta { margin-left: 0; margin-top: var(--clf-space-3); }
}

/* ---- Hero ---- */

.hero {
	position: relative;
	color: var(--clf-white);
	min-height: 78vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__image { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20,24,31,0.35) 0%, rgba(20,24,31,0.55) 55%, rgba(20,24,31,0.92) 100%);
}
.hero__content {
	position: relative;
	z-index: 1;
	padding-block: var(--clf-space-6);
	max-width: 780px;
}
.hero__headline {
	font-size: var(--clf-fs-700);
	margin-bottom: var(--clf-space-3);
}
.hero__subhead {
	font-size: var(--clf-fs-400);
	max-width: 620px;
	margin-bottom: var(--clf-space-4);
	color: rgba(255,255,255,0.9);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--clf-space-2); margin-bottom: var(--clf-space-3); }
.hero__proof { display: flex; align-items: center; gap: var(--clf-space-1); font-size: var(--clf-fs-200); }
.hero__proof .stars { color: var(--clf-gold); letter-spacing: 2px; }

/* ---- Trust bar ---- */

.trust-bar { background: var(--clf-charcoal-2); color: var(--clf-white); padding-block: var(--clf-space-5); }
.trust-bar__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--clf-space-4);
	text-align: center;
}
.trust-bar__item { display: flex; flex-direction: column; gap: 0.3em; }
.trust-bar__stat { font-family: var(--clf-font-display); font-size: var(--clf-fs-500); color: var(--clf-gold); }
.trust-bar__label { font-size: var(--clf-fs-100); color: rgba(255,255,255,0.8); }

@media (max-width: 760px) {
	.trust-bar__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Empathy / column divider signature ---- */

.column-divider {
	width: 3px;
	height: 64px;
	margin: 0 auto var(--clf-space-4);
	background: linear-gradient(180deg, var(--clf-gold) 0%, var(--clf-gold-dark) 100%);
}

.empathy { text-align: center; }
.empathy h2 { font-size: var(--clf-fs-600); }
.empathy p { font-size: var(--clf-fs-300); color: var(--clf-ink-soft); }

/* ---- Billboard showcase ---- */

.billboard-showcase {
	background: var(--clf-ink);
	color: var(--clf-white);
	padding-block: var(--clf-space-7);
}
.billboard-showcase__heading {
	font-size: var(--clf-fs-600);
	max-width: 720px;
	margin-bottom: var(--clf-space-5);
}
.billboard-showcase__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
	justify-content: center;
	gap: var(--clf-space-3);
}
.billboard-showcase__item {
	border-radius: var(--clf-radius-md);
	overflow: hidden;
	border: 1px solid rgba(255,255,255,0.12);
}
.billboard-showcase__image { width: 100%; height: 100%; object-fit: cover; transition: transform var(--clf-duration-base) var(--clf-ease); }
.billboard-showcase__item:hover .billboard-showcase__image { transform: scale(1.04); }
.billboard-showcase__caption { margin-top: var(--clf-space-3); color: rgba(255,255,255,0.7); font-size: var(--clf-fs-200); }

@media (max-width: 760px) {
	.billboard-showcase__grid { grid-template-columns: 1fr; }
}

/* ---- Practice areas ---- */

.practice-areas__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--clf-space-3);
	margin-block: var(--clf-space-4);
}
.practice-card {
	background: var(--clf-white);
	border: 1px solid var(--clf-line);
	border-radius: var(--clf-radius-md);
	padding: var(--clf-space-4);
	box-shadow: var(--clf-shadow-sm);
	transition: box-shadow var(--clf-duration-base) var(--clf-ease), transform var(--clf-duration-base) var(--clf-ease);
}
.practice-card:hover { box-shadow: var(--clf-shadow-md); transform: translateY(-4px); }
.practice-card__title a { text-decoration: none; color: var(--clf-ink); }
.practice-card__list { list-style: none; margin: var(--clf-space-2) 0; padding: 0; color: var(--clf-ink-soft); font-size: var(--clf-fs-200); }
.practice-card__list li { padding-block: 0.2em; border-bottom: 1px dashed var(--clf-line); }
.practice-card__list li:last-child { border-bottom: none; }
.practice-card__link { font-weight: 700; text-decoration: none; color: var(--clf-gold-dark); }

.practice-areas__closing { text-align: center; font-size: var(--clf-fs-300); font-weight: 600; }

@media (max-width: 900px) {
	.practice-areas__grid { grid-template-columns: 1fr; }
}

/* ---- Intake form ---- */

.intake-form-section { background: var(--clf-paper-alt); }
.intake-form-card {
	background: var(--clf-white);
	border-radius: var(--clf-radius-lg);
	padding: var(--clf-space-5);
	box-shadow: var(--clf-shadow-lg);
}
.form-notice {
	padding: var(--clf-space-2) var(--clf-space-3);
	border-radius: var(--clf-radius-sm);
	margin-block: var(--clf-space-3);
	font-weight: 600;
}
.form-notice--success { background: #e5f0e7; color: var(--clf-success); }
.form-notice--error { background: #f6e4e4; color: var(--clf-red-dark); }

.form-field { margin-bottom: var(--clf-space-3); display: flex; flex-direction: column; gap: 0.4em; }
.form-field label { font-weight: 700; font-size: var(--clf-fs-200); }
.form-field input,
.form-field textarea {
	font-family: var(--clf-font-body);
	font-size: var(--clf-fs-300);
	padding: 0.75em 1em;
	border: 1px solid var(--clf-line);
	border-radius: var(--clf-radius-sm);
	background: var(--clf-paper);
}
.form-field input:focus,
.form-field textarea:focus {
	border-color: var(--clf-gold);
	outline: none;
	box-shadow: 0 0 0 3px var(--clf-gold-tint);
}
.intake-form__privacy { font-size: var(--clf-fs-100); color: var(--clf-ink-soft); margin-block: var(--clf-space-2) var(--clf-space-3); }

/* Honeypot: visually hidden, never seen by a sighted user, and removed
 * from the tab order via tabindex="-1" in the markup. Not display:none —
 * some unsophisticated bots skip fields hidden that way, so this uses
 * the same off-screen-clip technique as .screen-reader-text but is also
 * aria-hidden so screen reader users never encounter it either. */
.intake-form__honeypot {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---- Proof / results / testimonials ---- */

.proof__results {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--clf-space-3);
	margin-block: var(--clf-space-4);
	text-align: center;
}
.result-card {
	background: var(--clf-charcoal);
	color: var(--clf-white);
	border-radius: var(--clf-radius-md);
	padding: var(--clf-space-4) var(--clf-space-2);
}
.result-card__amount { display: block; font-family: var(--clf-font-display); font-size: var(--clf-fs-500); color: var(--clf-gold); }
.result-card__type { display: block; font-size: var(--clf-fs-100); color: rgba(255,255,255,0.75); margin-top: 0.4em; }
.proof__disclaimer { font-size: var(--clf-fs-100); color: var(--clf-ink-soft); text-align: center; }

.proof__testimonials {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--clf-space-3);
	margin-top: var(--clf-space-5);
}
.testimonial-card {
	background: var(--clf-white);
	border-left: 4px solid var(--clf-gold);
	padding: var(--clf-space-3);
	border-radius: var(--clf-radius-sm);
	box-shadow: var(--clf-shadow-sm);
	margin: 0;
}
.testimonial-card cite { display: block; margin-top: var(--clf-space-2); font-weight: 700; font-style: normal; color: var(--clf-ink-soft); }

@media (max-width: 900px) {
	.proof__results { grid-template-columns: repeat(2, 1fr); }
	.proof__testimonials { grid-template-columns: 1fr; }
}

/* ---- Team ---- */

.team-preview__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--clf-space-3);
	margin-block: var(--clf-space-4);
}
.attorney-card { text-align: center; }
.attorney-card__photo { border-radius: var(--clf-radius-md); margin-bottom: var(--clf-space-2); }
.attorney-card__years { color: var(--clf-ink-soft); font-size: var(--clf-fs-200); }

.team-full { display: flex; flex-direction: column; gap: var(--clf-space-6); }
.attorney-profile { display: grid; grid-template-columns: 260px 1fr; gap: var(--clf-space-4); align-items: start; }
.attorney-profile__photo { border-radius: var(--clf-radius-md); }
.attorney-profile__years { font-weight: 700; color: var(--clf-gold-dark); }
.attorney-profile__bar { font-size: var(--clf-fs-200); color: var(--clf-ink-soft); }

@media (max-width: 760px) {
	.team-preview__grid { grid-template-columns: repeat(2, 1fr); }
	.attorney-profile { grid-template-columns: 1fr; }
}

/* ---- FAQ (native details/summary — zero-JS accessible accordion) ---- */

.faq__list { display: flex; flex-direction: column; gap: var(--clf-space-2); margin-top: var(--clf-space-4); }
.faq__item {
	border: 1px solid var(--clf-line);
	border-radius: var(--clf-radius-md);
	padding: var(--clf-space-2) var(--clf-space-3);
	background: var(--clf-white);
}
.faq__question {
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
	content: "+";
	font-size: 1.4em;
	color: var(--clf-gold-dark);
	transition: transform var(--clf-duration-fast) var(--clf-ease);
}
.faq__item[open] .faq__question::after { transform: rotate(45deg); }
.faq__answer { margin-top: var(--clf-space-2); color: var(--clf-ink-soft); }

/* ---- Closing CTA ---- */

.cta-closing { background: var(--clf-charcoal); color: var(--clf-white); text-align: center; }
.cta-closing__inner { max-width: 720px; margin-inline: auto; }
.cta-closing h2 { font-size: var(--clf-fs-600); }
.cta-closing__actions { display: flex; justify-content: center; gap: var(--clf-space-2); flex-wrap: wrap; margin-top: var(--clf-space-4); }

/* ---- Footer ---- */

.site-footer { background: var(--clf-ink); color: rgba(255,255,255,0.85); padding-block: var(--clf-space-6) var(--clf-space-3); }
.site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--clf-space-4); margin-bottom: var(--clf-space-5); }
.site-footer__logo-text { color: var(--clf-white); font-size: var(--clf-fs-400); }
.footer-nav { display: flex; flex-direction: column; gap: 0.5em; list-style: none; margin: 0; padding: 0; }
.footer-nav a, .footer-nav__link { color: rgba(255,255,255,0.75); text-decoration: none; }
.footer-nav a:hover, .footer-nav__link:hover { color: var(--clf-gold); }
.site-footer__legal { border-top: 1px solid rgba(255,255,255,0.12); padding-top: var(--clf-space-3); font-size: var(--clf-fs-100); color: rgba(255,255,255,0.55); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--clf-space-2); }
.site-footer__legal a { color: rgba(255,255,255,0.7); }

@media (max-width: 760px) {
	.site-footer__grid { grid-template-columns: 1fr; }
}

/* ---- Secondary-page header banner ---- */

.page-header {
	position: relative;
	color: var(--clf-white);
	overflow: hidden;
}
.page-header--image {
	min-height: 42vh;
	display: flex;
	align-items: flex-end;
}
.page-header--plain {
	background: linear-gradient(135deg, var(--clf-charcoal) 0%, var(--clf-ink) 100%);
	padding-block: var(--clf-space-6);
}
.page-header__media { position: absolute; inset: 0; z-index: 0; }
.page-header__image { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.page-header__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20,24,31,0.35) 0%, rgba(20,24,31,0.6) 55%, rgba(20,24,31,0.92) 100%);
}
.page-header__content {
	position: relative;
	z-index: 1;
	padding-block: var(--clf-space-5);
}
.page-header__title { font-size: var(--clf-fs-600); margin: 0; }

/* ---- Anchored intro text (used on pages that would otherwise open
   directly into a plain paragraph — the left gold rule gives a narrow
   centered text column intentional visual weight instead of reading as
   an accident of leftover whitespace) ---- */

.entry-content--anchored {
	border-left: 3px solid var(--clf-gold);
	padding-left: var(--clf-space-4);
}
@media (max-width: 640px) {
	.entry-content--anchored { padding-left: var(--clf-space-2); }
}

/* ---- Misc content pages ---- */

.page-block { padding-block: var(--clf-space-6); }
.page-block__title { font-size: var(--clf-fs-600); }
.entry-content { font-size: var(--clf-fs-300); color: var(--clf-ink-soft); }
.entry-content h2 { color: var(--clf-ink); margin-top: var(--clf-space-4); }

/* ---- TV Commercials ---- */

.commercials__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--clf-space-5); }
.commercials__column h2 { border-bottom: 2px solid var(--clf-gold); padding-bottom: var(--clf-space-1); }
.commercial-card { margin-bottom: var(--clf-space-3); }
.commercial-card video { width: 100%; border-radius: var(--clf-radius-md); background: var(--clf-ink); }
.commercial-card figcaption { font-size: var(--clf-fs-100); color: var(--clf-ink-soft); margin-top: 0.4em; }
.commercials__empty { color: var(--clf-ink-soft); font-style: italic; }

@media (max-width: 760px) {
	.commercials__grid { grid-template-columns: 1fr; }
}