/*
Theme Name: Lionsgate
Theme URI: https://lionsgate.network
Author: Lionsgate Intelligence Network
Description: Hand-coded theme for Lionsgate Intelligence Network — crypto recovery intelligence and blockchain investigations. Ported from the TanStack Start SPA with the design reproduced exactly.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: Proprietary
Text Domain: lionsgate
*/

/*
 * Intentionally minimal.
 *
 * The design system lives in assets/css/site.css, extracted verbatim from the
 * SPA source (src/lib/site-chrome.tsx SITE_CSS, plus the per-component STYLE
 * blocks it depends on).
 *
 * WordPress only requires this file to exist and carry the header above; it is
 * enqueued after site.css so anything added here wins. Keep it that way — do
 * not duplicate tokens or selectors from site.css in this file. Only
 * WordPress-specific corrections belong here.
 */

/*
 * Restore the design's square crop on attachment images.
 *
 * site.css sizes these with `aspect-ratio: 1/1` and no explicit height, which
 * worked in the SPA because its <img> tags carried no dimension attributes.
 * wp_get_attachment_image() adds width="" and height="", and HTML maps those to
 * CSS width/height *presentational hints* — an explicit height beats the
 * author's aspect-ratio, so the images rendered at full portrait height.
 *
 * Setting height back to auto lets aspect-ratio compute the height again. This
 * restores the original design rather than altering it.
 */
.team-photo,
.teamq-card img {
	height: auto;
}

/* ============================================================
 * Contact Form 7 — wear the design.
 *
 * CF7 emits its own wrappers:
 *   .wpcf7-radio > .wpcf7-list-item > label > input + .wpcf7-list-item-label
 * where the design has a single <label class="af-opt">. Rather than fight it,
 * the wrappers are made transparent and the label is given .af-opt's styling.
 * ========================================================== */

/* Let the individual options become grid children of .af-opts, instead of the
   single .wpcf7-radio span being the only child. */
.af-opts > p,
.af-opts .wpcf7-form-control-wrap,
.af-opts .wpcf7-form-control.wpcf7-radio {
	display: contents;
}

.af-opts .wpcf7-list-item {
	margin: 0;
}

/* Mirrors .af-opt in site.css. */
.af-opts .wpcf7-list-item > label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	cursor: pointer;
	color: var(--bone-dim);
	font-size: .86rem;
	transition: all .18s;
	background: #fff;
	height: 100%;
}

.af-opts .wpcf7-list-item > label:hover {
	border-color: var(--brass);
	color: var(--bone);
}

/* .af-opt.on — the SPA toggled this class in React; :has() gets it for free. */
.af-opts .wpcf7-list-item > label:has(input:checked) {
	border-color: var(--brass);
	background: rgba(29, 78, 216, .08);
	color: var(--brass);
}

.af-opts .wpcf7-list-item input {
	accent-color: var(--brass);
	flex: 0 0 auto;
}

.af-opts .wpcf7-list-item-label {
	line-height: 1.35;
}

/* Inputs inside the assessment card. */
.af .wpcf7-form-control:not(.wpcf7-radio):not(.wpcf7-submit) {
	background: #fff;
	border: 1px solid var(--line);
	color: var(--bone);
	padding: 14px 16px;
	border-radius: var(--radius);
	font-family: inherit;
	font-size: .95rem;
	outline: none;
	width: 100%;
}

.af .wpcf7-form-control:not(.wpcf7-radio):not(.wpcf7-submit):focus {
	border-color: var(--brass);
}

/* Validation messages — matches .af-err. */
.wpcf7-not-valid-tip {
	color: #dc2626;
	font-size: .78rem;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	margin-top: 6px;
}

.wpcf7-response-output {
	margin: 22px 0 0;
	padding: 14px 18px;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	font-size: .88rem;
	color: var(--bone-dim);
}

.wpcf7-form.invalid .wpcf7-response-output {
	border-color: #dc2626;
	color: #dc2626;
}

.wpcf7-form.sent .wpcf7-response-output {
	border-color: var(--green);
	color: var(--green);
}

/*
 * CF7 appends a spinner span after the submit button. Both form containers in
 * this design are flex columns (.af and .ffield), so the spinner becomes a flex
 * item and adds its own height plus a gap — it was making the footer form 23px
 * taller than the design. Take it out of flow instead of hiding it, so the
 * submitting state is still visible.
 */
.af,
footer.site .ffield-cf7 {
	position: relative;
}

.wpcf7-spinner {
	position: absolute;
	right: 12px;
	bottom: 12px;
	margin: 0;
}

/* Footer contact form — matches .ffield in site.css. */
footer.site .ffield-cf7 {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

footer.site .wpcf7-form-control:not(.wpcf7-submit) {
	background: #fff;
	border: 1px solid var(--line);
	color: var(--bone);
	padding: 10px 12px;
	border-radius: var(--radius);
	font-family: inherit;
	font-size: .85rem;
	outline: none;
	width: 100%;
}

footer.site .wpcf7-form-control:not(.wpcf7-submit):focus {
	border-color: var(--brass);
}

footer.site textarea.wpcf7-form-control {
	resize: vertical;
	/* CF7 emits rows="10"; the design's textarea sits at 70px and grows on drag. */
	height: 70px;
	min-height: 70px;
}

footer.site .wpcf7-response-output {
	font-size: .78rem;
	padding: 10px 12px;
}

/*
 * Column counts that the design set inline.
 *
 * site.css collapses .grid3 to one column below 820px, but an inline
 * `grid-template-columns` beats a stylesheet rule, so the homepage stats stayed
 * four-across at every width and pushed the document to 776px on a 390px screen
 * — a horizontally scrolling homepage on mobile. This is a defect in the SPA
 * itself (index.tsx:137), not something the port introduced.
 *
 * The counts now live here as classes so the media query can win. Two steps
 * rather than one: four across is unreadable on a tablet long before 820px.
 */
.grid3-4 { grid-template-columns: repeat(4, 1fr); }
.grid3-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 1040px) {
	.grid3-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
	.grid3-4,
	.grid3-2 { grid-template-columns: 1fr; }
}

/*
 * CF7 renders the submit as <input type="submit">, whose value cannot wrap —
 * unlike the design's <button>, whose text can. On a 390px screen its intrinsic
 * width (344px) exceeded the card's 278px column and scrolled the page
 * sideways. Full width below the tablet breakpoint both fixes the overflow and
 * is the conventional mobile treatment for a primary CTA.
 */
@media (max-width: 820px) {
	.af .wpcf7-submit,
	footer.site .wpcf7-submit {
		width: 100%;
		max-width: 100%;
		justify-content: center;
		text-align: center;
	}
}

/*
 * .screen-reader-text — WordPress core emits this class from
 * the_posts_pagination(), comment forms and search forms, and the theme uses it
 * on the 404 search label. site.css never defined it (the SPA had no such
 * markup), so every one of those labels rendered as visible text. This is the
 * canonical WordPress implementation: removed from view, still read aloud, and
 * revealed on keyboard focus.
 */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #fff;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
	clip-path: none;
	color: var(--brass);
	display: block;
	font-size: .875rem;
	font-weight: 600;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* ------------------------------------------------------------------ *
 * Elementor's global kit must not repaint the theme
 *
 * Where Elementor is still installed — the hybrid — its global kit stylesheet
 * is enqueued after the theme's and carries:
 *
 *     .elementor-kit-7 a { color:#4C72F1; font-weight:bold }
 *
 * That is scoped to <body>, not to Elementor's own containers, so it repaints
 * every link on the page. Three consequences, all measured rather than assumed:
 *
 *   - the header CTA rendered #4C72F1 on the brass ground — blue on blue, the
 *     same defect class as the `.entry a.btn` regression
 *   - `.entry a` is (0,1,1), tying the kit rule, so the kit won on source order
 *     and body copy in migrated articles lost --brass
 *   - nothing in the chrome sets font-weight, so every chrome link went bold
 *
 * The kit loads last, so order cannot win this. These restore the theme's own
 * intent at a specificity the kit's single class cannot reach, and restate no
 * value the design system already owns: `inherit` is precisely what
 * `a{color:inherit}` in site.css means. `div.entry` and `header.site` are one
 * class plus two elements, which outranks the kit's one class plus one element
 * while still losing to the theme's own two-class rules — so
 * `footer.site .fcol a` and `.entry .entry-feature a` keep winning, exactly as
 * they did before Elementor was in the picture.
 *
 * One caveat worth stating plainly: page.php wraps Elementor's output in
 * `.entry` too, so `div.entry a` does reach Elementor's own links. That is
 * deliberate here rather than incidental — an Elementor link with no rule of
 * its own picks up --brass instead of #4C72F1, which is the palette the two
 * halves of the site are being brought onto, and #4C72F1 fails AA at 4.21:1.
 * Any link Elementor styles explicitly is a two-class rule and still wins.
 * ------------------------------------------------------------------ */

header.site a,
footer.site a,
div.entry a {
	font-weight: inherit;
}

header.site a,
footer.site a {
	color: inherit;
}

div.entry a {
	color: var(--brass);
}

/* A button brings its own ground, so it keeps its own type. */
header.site a.btn,
header.site a.btn span,
footer.site a.btn {
	color: #FFFFFF;
}

/* The one theme rule the guard above would otherwise outrank. */
.entry .entry-process-link a {
	color: var(--brass);
	font-weight: 600;
}

/*
 * Two more theme components the kit reaches, both of which sit outside the
 * chrome and so were missed by the rules above.
 *
 *   a.call-now     the floating call button. Its own rule is (0,1,0), so the
 *                  kit simply outranks it: the label and the phone icon both
 *                  rendered in the link colour on the red ground. The icon
 *                  follows the text because `.call-now svg` is fill:currentColor.
 *   .crumbs-row a  (0,1,1) — one class, one element. That *ties* the kit rule
 *                  rather than beating it, so load order decides and the kit
 *                  wins. Easy to misread as two classes because the element
 *                  carries `class="wrap crumbs-row"`; the selector has one.
 */

body a.call-now {
	color: #FFFFFF;
	font-weight: 700;
}

nav.crumbs .crumbs-row a {
	color: var(--bone-dim);
}

/*
 * The related-pages strip sits in <section class="entry-related">, outside
 * `.entry`, so `div.entry a` above does not reach it and `.entry-children a`
 * in entry.css is (0,1,1) — another tie the kit wins on order.
 *
 * This one currently *looks* right, because the kit's link colour is now
 * --brass as well. That is a coincidence, not a fix: change the kit colour and
 * 27 links on /cryptocurrency-scams/ move with it. Stating the theme's intent
 * so the coincidence is not load-bearing.
 */
nav.entry-children a {
	color: var(--brass);
}

/*
 * The container a builder-owned page gets instead of `.wrap`.
 *
 * Not `.wrap { max-width: none }` — the theme's own pages still need the
 * measure, and this has to apply to exactly the pages whose body Elementor
 * renders. See the note in page.php.
 */
.entry-section > .wrap-bleed {
	max-width: none;
	margin: 0;
	padding: 0;
}

/*
 * The design system's page rhythm must not apply to Elementor's sections.
 *
 * site.css sets `section { padding: 96px 0 }` — correct for the theme's own
 * page sections, and a bare element selector, so it reaches every <section> on
 * the document. Elementor's markup is built from <section class="elementor-
 * section">, so on all 111 builder pages every one of them gained 192px of
 * vertical padding.
 *
 * The visible cost was worst where sections nest: each testimonial card embeds
 * a slide template, so the card carried the padding twice over. Cards measured
 * 409px on the live site and 802-998px here, and the carousel grew from 826px
 * to 1219px — the empty band above the reviews.
 *
 * `:where()` contributes no specificity, so this lands at (0,0,1): the same
 * weight as the rule it undoes, winning only because style.css loads after
 * site.css, and losing to every Elementor per-element rule (0,1,0) that sets
 * real padding. Elementor's own default is zero, so zero is the right neutral —
 * this removes the theme's contribution rather than imposing a new one.
 *
 * It lives here because assets/css/site.css is generated from the SPA source
 * and must not be hand-edited.
 */
section:where(.elementor-section, .elementor-element, .elementor-top-section, .elementor-inner-section, .e-con) {
	padding: 0;
}

/*
 * Elementor's content needs the browser's own box defaults back.
 *
 * site.css opens with `* { margin: 0; padding: 0; box-sizing: border-box }`,
 * which is the right foundation for the hand-built pages and wrong for
 * Elementor markup: a text widget's paragraphs, lists and headings are written
 * against the user-agent stylesheet, so the reset flattens their spacing and
 * removes list bullets entirely.
 *
 * `revert` hands exactly those properties back. Note what is NOT reverted:
 * `color` and `text-decoration`. An earlier version of this reset included
 * them, and `text-decoration: revert` gave every Elementor link the user-agent
 * underline — including the buttons, which rendered "TRY WIZARD" underlined
 * inside its pill. Link colour is settled at the kit instead
 * (tools/hybrid-align-kit.php) and Elementor's own `.elementor a` rule already
 * states `text-decoration: none`.
 */
.elementor :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li, blockquote, figure, table) {
	margin: revert;
	padding: revert;
}

.elementor :where(ul, ol) {
	list-style: revert;
}

/*
 * Elementor's sections paint their own grounds and expect white behind them.
 * Scoped to builder pages so the theme's own --midnight (#F6F8FC) survives on
 * the nine pages the design renders.
 */
body.lg-builder-page {
	background: #FFFFFF;
}