/*
Theme Name: NEMRA Lighting
Theme URI: https://nemralighting.org
Description: Hello Elementor child theme for the NEMRA Lighting Division microsite.
Author: Triptych
Author URI: https://triptych.co
Template: hello-elementor
Version: 1.0.3
Requires at least: 6.0
Tested up to: 6.9.1
Requires PHP: 8.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nemra-lighting
*/

/* ==========================================================================
   Brand tokens — single source of truth.
   Elementor templates reference these via var(--nemra-*) in inline CSS,
   and Site Settings → Colors should mirror these values so the picker shows them.
   Update here first; flush Elementor CSS after.
   ========================================================================== */

:root {
	/* Approved brand colors */
	--nemra-blue: #2173B3;
	/* #4c7f39 not #51863D: white body text on the green card measured 4.35:1,
	   under the 4.5 AA floor. This value is what 56 CSS fallbacks across the
	   widgets already assume, so the token was the outlier rather than the
	   fallbacks. Measures 4.77:1. */
	--nemra-green: #4c7f39;
	--nemra-dark: #17171A;          /* V2 Neutral/Dark 100% (was #1B1B1B) */
	--nemra-surface: #F4F5F7;
	--nemra-blue-tint: #EAF1F7;
	--nemra-green-tint: #EEF6EA;
	--nemra-white: #ffffff;

	/* Figma V2 additions — see docs/figma-v2/STYLE-TOKENS.md */
	--nemra-blue-dark: #042A48;     /* deep navy: hero/community/CTA backgrounds */
	/* Every button — any resting colour — hovers to this one neutral-dark
	 * fill sitewide (designer direction, 2026-08-04), superseding the
	 * per-colour darken/navy-hover rules this project used earlier the same
	 * day. --nemra-dark at 88% opacity. */
	--neutral-dark-88: rgba(23, 23, 26, 0.88);
	--nemra-blue-vibrant: #0074CF;
	--nemra-blue-light: #D1E8FA;
	--nemra-green-vibrant: #53C02A;
	--nemra-green-light: #DEF5D6;
	--nemra-eversand: #E6E8DD;      /* warm off-white section background */
	--nemra-light: #FCFDFD;         /* V2 Neutral/Light 100% */

	/* Semantic aliases */
	--nemra-primary: var(--nemra-blue);
	--nemra-accent: var(--nemra-green);
	--nemra-text: var(--nemra-dark);
	--nemra-muted: #6b6b6b;

	/* Typography.
	 *
	 * The two stacks the site can draw on. Nothing should name a family
	 * directly — every widget reads --nemra-font-body or
	 * --nemra-font-heading, so these two lines are the only place a
	 * typeface is spelled out.
	 *
	 * WHICH stack headings use is decided by ONE constant,
	 * NEMRA_HEADING_FONT in functions.php. It emits an override for
	 * --nemra-font-heading and picks which families get downloaded, so the
	 * unused one is not fetched. The value set here is the same default and
	 * only matters if that override is ever stripped. */
	--nemra-font-sans: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--nemra-font-serif: 'Libre Baskerville', Georgia, 'Times New Roman', serif;

	--nemra-font-body: var(--nemra-font-sans);
	--nemra-font-heading: var(--nemra-font-sans);
}

/* ==========================================================================
   Brand utility classes — drop into Elementor HTML widgets or anywhere
   raw markup is authored. Variables remain the preferred mechanism for
   templated styles.
   ========================================================================== */

.nemra-font-body { font-family: var(--nemra-font-body); }
.nemra-font-heading { font-family: var(--nemra-font-heading); }

.nemra-text-blue { color: var(--nemra-blue); }
.nemra-text-green { color: var(--nemra-green); }
.nemra-text-dark { color: var(--nemra-dark); }
.nemra-text-muted { color: var(--nemra-muted); }
.nemra-text-white { color: var(--nemra-white); }

.nemra-bg-blue { background-color: var(--nemra-blue); }
.nemra-bg-green { background-color: var(--nemra-green); }
.nemra-bg-dark { background-color: var(--nemra-dark); }
.nemra-bg-surface { background-color: var(--nemra-surface); }
.nemra-bg-blue-tint { background-color: var(--nemra-blue-tint); }
.nemra-bg-green-tint { background-color: var(--nemra-green-tint); }
.nemra-bg-white { background-color: var(--nemra-white); }

/* Base typography. Elementor overrides per-widget; this is the fallback for
   non-Elementor content (admin previews, RSS, login screen, etc.). */
body {
	font-family: var(--nemra-font-body);
	color: var(--nemra-text);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--nemra-font-heading);
}

/* ==========================================================================
   Header overrides — Elementor's container CSS generator drops a few
   flex group-control properties when widgets are nested under inner
   containers. Targeted overrides keep the visual contract aligned with
   Figma without fighting the framework.
   ========================================================================== */

/* Bottom nav row — element id hd02ut07. Elementor's container CSS generator
   drops --justify-content / --gap from group controls in this context, so
   force them here. Tied to the stable element id in scripts/elementor/sections/header.json. */
.elementor-element.elementor-element-hd02ut07 {
	--justify-content: center;
	--align-items: center;
	--gap: 50px;
	justify-content: center;
	align-items: center;
	gap: 50px;
}

/* All header text widgets — nowrap so they don't wrap mid-label. */
.elementor-location-header .elementor-widget-heading .elementor-heading-title {
	white-space: nowrap;
}

/* ==========================================================================
   Footer overrides — element ids match scripts/elementor/sections/footer.json.
   Same Elementor flex group-control CSS-gen quirk as the header: force the
   layout properties from here.
   ========================================================================== */

/* Outer container — keep its flex-column settings even if the var is dropped. */
.elementor-element.elementor-element-ft01wr00 {
	--display: flex;
	--flex-direction: column;
	--gap: 22px;
	gap: 22px;
}

/* Divider widget has default Elementor padding on .elementor-divider that
 * reserves ~30px of vertical space around the 1px line. Collapse it so the
 * divider is just the line itself, not a chunky band. */
.elementor-element.elementor-element-ft02di01 .elementor-divider {
	padding: 0 !important;
}

/* Each row inside the outer container — force flex / spacing if needed. */
.elementor-element.elementor-element-ft02nw01,
.elementor-element.elementor-element-ft02sp01,
.elementor-element.elementor-element-ft02mn01 {
	--justify-content: space-between;
	--align-items: center;
	justify-content: space-between;
}

.elementor-element.elementor-element-ft02mn01 {
	--align-items: flex-start;
	align-items: flex-start;
}

/* Main row sub-cluster (3 link columns) — keep them as a row with gap 25. */
.elementor-element.elementor-element-ft03mn05 {
	--display: flex;
	--flex-direction: row;
	--gap: 25px;
	display: flex;
	gap: 25px;
}

/* Newsletter form (HTML widget) */
.nemra-newsletter-form {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%;
}

.nemra-newsletter-fields {
	display: flex;
	gap: 15px;
}

.nemra-newsletter-form input[type="text"],
.nemra-newsletter-form input[type="email"] {
	flex: 1 1 0;
	min-width: 0;
	background: #ffffff;
	border: none;
	border-radius: 5px;
	padding: 15px 25px;
	font-family: var(--nemra-font-body);
	font-size: 18px;
	color: var(--nemra-text);
}

.nemra-newsletter-form input::placeholder {
	color: #969696;
}

.nemra-newsletter-submit {
	align-self: flex-start;
	background: #ffffff;
	border: none;
	border-radius: 5px;
	padding: 20px 50px;
	font-family: var(--nemra-font-body);
	font-size: 16px;
	color: #000000;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 15px;
}

.nemra-newsletter-submit:hover {
	background: #f3f3f3;
}

/* Sponsor row placeholders — 7 circles */
.nemra-sponsor-row {
	display: flex;
	gap: 15px;
}

.nemra-sponsor-row > span {
	display: inline-block;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #dcdcdc;
}

/* Legal row */
.nemra-footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
	font-family: var(--nemra-font-body);
	font-size: 10.24px;
	color: #343434;
}

.nemra-footer-legal a {
	color: inherit;
	text-decoration: none;
}

.nemra-footer-legal a:hover {
	text-decoration: underline;
}

.nemra-footer-legal__copyright {
	margin-left: auto;
}

/* Force monochrome social icons in the footer — Elementor's social-icons
   widget defaults to the official brand colors which clash with the muted
   footer palette. */
.elementor-location-footer .elementor-social-icon {
	background-color: transparent !important;
	color: var(--nemra-muted, #6b6b6b) !important;
}

.elementor-location-footer .elementor-social-icon svg {
	fill: currentColor;
}

.elementor-location-footer .elementor-social-icon:hover {
	color: var(--nemra-text, #3f3f3f) !important;
}

/* Connect column phone/social block — tighten the vertical gap. */
.elementor-element.elementor-element-ft05cn04 .elementor-social-icons-wrapper {
	gap: 10px;
}

/* Connect column phone heading — keep on one line.
   The heading widget defaults shrink to fit content and would wrap mid-number;
   force nowrap so the full +1 (317) 975-1999 renders as a single line. */
.elementor-element.elementor-element-ft05cn03 .elementor-heading-title {
	white-space: nowrap;
}

/* Footer heading widgets — nowrap so column titles ("Connect", "Company")
   and the phone link don't wrap inside their narrow columns. */
.elementor-location-footer .nemra-footer-main .elementor-widget-heading .elementor-heading-title {
	white-space: nowrap;
}

/* Tighten the gap between Connect/heading and phone/socials block.
   Figma shows ~25px between "Connect" label and phone, then 10px to socials.
   The container's flex_gap is 25px which Elementor may drop — force it. */
.elementor-element.elementor-element-ft04cn01 {
	--gap: 25px;
	gap: 25px;
}

/* Stats divider — ensure first stat keeps left padding (no divider line). */
.nemra-stat:first-child::before {
	display: none;
}

/* ==========================================================================
   CTA Saved Sections — element ids match scripts/elementor/sections/cta-*.json
   ========================================================================== */

/* CTA "Ready to Stay Connected" — decorative circles scattered around the centered card.
   Force min-height; the JSON setting is dropped by Elementor's group-control CSS gen. */
.elementor-element.elementor-element-cs01wr00 {
	position: relative !important;
	overflow: hidden !important;
	min-height: 609px !important;
	--min-height: 609px;
}

.nemra-cta-stay-connected__decor {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 609px;
	pointer-events: none;
	z-index: 0;
}

/* The HTML widget hosting the circles is in flex flow — collapse its in-flow
   size so it doesn't push the layout. */
.elementor-element.elementor-element-cs02dc01 {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 0 !important;
	pointer-events: none;
	z-index: 0;
}

.elementor-element.elementor-element-cs02dc01 .elementor-widget-container {
	position: relative;
}

.nemra-cta-stay-connected__decor > span {
	position: absolute;
	background: #ebebeb;
	border-radius: 50%;
}

.elementor-element.elementor-element-cs02ct01 {
	position: relative;
	z-index: 1;
}

/* CTA "Start Stage 1 today" — left content + right image placeholder.
   Target both class + element id so the relative/overflow rules apply even
   if `_css_classes` is stripped. */
.nemra-cta-start-stage-1,
.elementor-element.elementor-element-ss02cd01 {
	position: relative !important;
	overflow: hidden !important;
	min-height: 547px !important;
	--min-height: 547px;
}

/* The HTML widget hosting the image placeholder is a flex child of the card
   row, so position it absolutely against the card and let the inner __media
   div span the full widget. */
.elementor-element.elementor-element-ss03rt01 {
	position: absolute !important;
	top: 48px !important;
	right: -64px !important;
	width: 717px !important;
	height: 547px !important;
	pointer-events: none;
}

.elementor-element.elementor-element-ss03rt01 .elementor-widget-container,
.elementor-element.elementor-element-ss03rt01 .nemra-cta-start-stage-1__media {
	position: relative;
	width: 100%;
	height: 100%;
}

.nemra-cta-start-stage-1__actions {
	display: flex;
	align-items: center;
	gap: 30px;
}

.nemra-cta-start-stage-1__join-link {
	font-family: var(--nemra-font-body);
	font-weight: 500;
	font-size: 14px;
	color: var(--nemra-muted, #6b6b6b);
	text-decoration: none;
	white-space: nowrap;
}

.nemra-cta-start-stage-1__join-link span {
	margin-left: 4px;
}

.nemra-cta-start-stage-1__join-link:hover {
	color: var(--nemra-text, #3f3f3f);
}

/* Image placeholder sits absolutely positioned on the right of the card and
   overflows the right edge (matches Figma's overflow:clip effect). */
.nemra-cta-start-stage-1__media {
	position: absolute;
	right: -64px;
	top: 48px;
	width: 717px;
	height: 547px;
	pointer-events: none;
}

.nemra-cta-start-stage-1__media-back,
.nemra-cta-start-stage-1__media-front {
	position: absolute;
	border-radius: 5px;
}

.nemra-cta-start-stage-1__media-back {
	top: 0;
	left: 36px;
	width: 650px;
	height: 547px;
	background: #acacac;
}

.nemra-cta-start-stage-1__media-front {
	top: 18px;
	left: 0;
	width: 717px;
	height: 547px;
	background: #d9d9d9;
}

/* ============================================================
 * Header — overrides for Elementor CSS-gen quirks on nested
 * containers. Elementor 4.0.4 silently drops `justify_content`
 * and `flex_gap` settings on inner containers, so we set them
 * here. Targets the saved-section IDs from the header.json.
 * ============================================================ */

/* Top row: 3 sub-columns spread edge-to-edge (logo | center pair | login). */
.elementor-element-hd02ut01 {
	justify-content: space-between !important;
}

/* Left column: logo left-aligned. */
.elementor-element-hd02ut01l {
	justify-content: flex-start !important;
}

/* Center column: pair of links centered horizontally. */
.elementor-element-hd02ut01c {
	justify-content: center !important;
	gap: 30px !important;
}

/* Right column: Member Login right-aligned. */
.elementor-element-hd02ut01r {
	justify-content: flex-end !important;
}

/* Bottom nav row: items centered with consistent gap. */
.elementor-element-hd02ut07 {
	justify-content: center !important;
	gap: 50px !important;
}

/* The element-width="initial" class on heading widgets keeps them
 * content-width; this prevents the heading wrapper from stretching
 * across the flex container and pushing items off-center. */
.elementor-location-header .elementor-widget__width-initial {
	width: auto !important;
	max-width: max-content;
}

/* ============================================================
 * Sticky site header — applied to the outermost <header> that
 * Elementor renders. We use `header.elementor-location-header`
 * because position:sticky needs the element to stick *within*
 * its parent; an inner div whose parent matches its own height
 * has no scroll room and the sticky never engages.
 * ============================================================ */
header.elementor-location-header {
	position: sticky !important;
	top: 0 !important;
	z-index: 100 !important;
	background-color: #ffffff;
}

/* Force the bottom nav row to transparent — the JSON sets the
 * classic background to none, but Elementor still emits the
 * background helper CSS for the container, so override explicitly. */
.elementor-element.elementor-element-hd02ut07 {
	background-color: transparent !important;
	background-image: none !important;
}

/* Outer header container — Elementor's flex gap default of 20px shows up
 * between the two header rows; the JSON sets gap:0 but it's dropped by the
 * CSS generator on flex-column containers. Force gap:0 so the rows sit flush. */
.elementor-element.elementor-element-hd01ut00 {
	--gap: 0px;
	gap: 0px;
}

/* ==========================================================================
   Page-section pattern — full-bleed background, content constrained to
   1440px and horizontally centered.

   Usage:
   - Top-level Elementor container sets a full-width background and the
     vertical padding (e.g. 80px top / bottom).
   - The single widget inside should set its own internal max-width:1440px
     via its widget template, OR the section overrides below force it via
     the element id.

   For the homepage sections (hpsec01..hpsec10), each contains exactly one
   widget child. We constrain that child to 1440px max-width and center it
   so the section background stays full-bleed while the content stays in
   the design grid.
   ========================================================================== */

.nemra-page-section {
	padding: 80px 50px;
}

.nemra-page-section__inner {
	max-width: 1440px;
	margin: 0 auto;
}

/* Constrain each homepage section's single inner widget to 1440px and
 * center it. This keeps the section bg full-bleed but the content in-grid.
 * Targets the widget child by element id (the only direct child of each
 * hpsec0X container in scripts/elementor/homepage.json). */
.elementor-element.elementor-element-hphero1,
.elementor-element.elementor-element-hpspb01,
.elementor-element.elementor-element-hpstats1,
.elementor-element.elementor-element-hpev01,
.elementor-element.elementor-element-hpwhy01,
.elementor-element.elementor-element-hpedu01,
.elementor-element.elementor-element-hpcm01,
.elementor-element.elementor-element-hpsp01,
.elementor-element.elementor-element-hprg01,
.elementor-element.elementor-element-hpcta01 {
	max-width: 1440px;
	margin-left: auto !important;
	margin-right: auto !important;
	width: 100%;
}

/* ==========================================================================
   Reps page FAQ accordion overrides.
   The Elementor accordion ships with a 1px border around each item which
   stacks into a visible boxed look. The Figma calls for a minimal divider
   line between items (no outer box). Target the FAQ widget's stable id
   so other accordions on the site keep their default chrome.
   ========================================================================== */

.elementor-element-rpfaqaccord .elementor-accordion-item,
.elementor-element-mffaqaccord .elementor-accordion-item {
	border: 0 !important;
	border-bottom: 1px solid #e2e2e2 !important;
}

.elementor-element-rpfaqaccord .elementor-accordion-item:last-child,
.elementor-element-mffaqaccord .elementor-accordion-item:last-child {
	border-bottom: 0 !important;
}

.elementor-element-rpfaqaccord .elementor-tab-title,
.elementor-element-rpfaqaccord .elementor-tab-content,
.elementor-element-mffaqaccord .elementor-tab-title,
.elementor-element-mffaqaccord .elementor-tab-content {
	background-color: transparent !important;
	padding-left: 0;
	padding-right: 0;
}

.elementor-element-rpfaqaccord .elementor-tab-title,
.elementor-element-mffaqaccord .elementor-tab-title {
	padding-top: 20px;
	padding-bottom: 20px;
}

/* Kill stray horizontal page scroll. Full-bleed treatments measure with
 * 100vw, which includes the scrollbar on browsers with classic scrollbars
 * (Windows, macOS "always show") and overshoots the viewport by ~15px.
 * clip (unlike hidden) doesn't create a scroll container, so position:
 * sticky keeps working. */
html {
	overflow-x: clip;
}

/* ==========================================================================
   404 template (404.php)
   ========================================================================== */

.nemra-404 {
	background: var(--nemra-blue-dark);
	color: var(--nemra-white);
	/* Clear the fixed/transparent header and keep the footer off-screen-ish */
	padding: clamp(160px, 22vh, 240px) 24px clamp(96px, 14vh, 160px);
	text-align: center;
}

.nemra-404__inner {
	max-width: 720px;
	margin: 0 auto;
}

.nemra-404__code {
	font-family: var(--nemra-font-heading);
	font-size: clamp(72px, 12vw, 128px);
	line-height: 1;
	color: var(--nemra-blue-light);
	opacity: 0.35;
	margin: 0 0 8px;
}

.nemra-404__title {
	font-family: var(--nemra-font-heading);
	font-weight: 400;
	font-size: clamp(28px, 4.5vw, 44px);
	line-height: 1.25;
	margin: 0 0 16px;
}

.nemra-404__body {
	font-family: var(--nemra-font-body);
	font-size: 17px;
	line-height: 1.6;
	color: var(--nemra-blue-light);
	margin: 0 auto 32px;
	max-width: 480px;
}

.nemra-404__cta {
	display: inline-block;
	font-family: var(--nemra-font-body);
	font-weight: 600;
	font-size: 15px;
	color: var(--nemra-blue-dark);
	background: var(--nemra-white);
	border-radius: 999px;
	padding: 14px 34px;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

/* All buttons hover to the same neutral-dark-88 fill sitewide (designer direction). */
.nemra-404__cta:hover {
	background: var(--neutral-dark-88, rgba(23, 23, 26, 0.88));
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.nemra-404__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 26px;
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.nemra-404__links a {
	font-family: var(--nemra-font-body);
	font-size: 14px;
	color: var(--nemra-blue-light);
	text-decoration: none;
}

.nemra-404__links a:hover {
	color: var(--nemra-white);
	text-decoration: underline;
}

/* ==========================================================================
   Members-only gate (members-only.php)
   Same navy ground and rhythm as the 404 — it is the same kind of moment,
   a page that isn't going to load, so it should not feel like a new design.
   ========================================================================== */

.nemra-gate {
	background: var(--nemra-blue-dark);
	color: var(--nemra-white);
	padding: clamp(160px, 22vh, 240px) 24px clamp(96px, 14vh, 160px);
	text-align: center;
}

.nemra-gate__inner {
	max-width: 720px;
	margin: 0 auto;
}

.nemra-gate__badge {
	display: block;
	line-height: 0;
	margin: 0 0 22px;
	color: var(--nemra-blue-light);
	opacity: 0.75;
}

.nemra-gate__title {
	font-family: var(--nemra-font-heading);
	font-weight: 400;
	font-size: clamp(28px, 4.5vw, 44px);
	line-height: 1.25;
	margin: 0 0 16px;
}

.nemra-gate__body {
	font-family: var(--nemra-font-body);
	font-size: 17px;
	line-height: 1.6;
	color: var(--nemra-blue-light);
	margin: 0 auto 32px;
	max-width: 520px;
}

.nemra-gate__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 14px 24px;
}

.nemra-gate__cta {
	display: inline-block;
	font-family: var(--nemra-font-body);
	font-weight: 600;
	font-size: 15px;
	color: var(--nemra-blue-dark);
	background: var(--nemra-white);
	border-radius: 999px;
	padding: 14px 34px;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.nemra-gate__cta:hover {
	background: var(--neutral-dark-88, rgba(23, 23, 26, 0.88));
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.nemra-gate__link {
	font-family: var(--nemra-font-body);
	font-size: 14px;
	color: var(--nemra-blue-light);
	text-decoration: none;
}

.nemra-gate__link:hover {
	color: var(--nemra-white);
	text-decoration: underline;
}

/* ==========================================================================
   Visually-hidden utility
   Neither Hello Elementor nor our own CSS shipped one, so links that needed
   extra context for screen readers had nowhere to put it. Standard WP
   .screen-reader-text, plus a focusable variant for skip links.
   ========================================================================== */

.nemra-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}