/**
 * #.#  Client Custom Styles — NEC SWS
 *
 * Theme-specific styles. Loads after base.css so :root variables defined
 * here take precedence over base.css defaults.
*/

/* =============================
  # Fonts — Neo Sans Std (self-hosted)
  Update file paths to match your actual font filenames.
============================= */

@font-face {
	font-family: 'Neo Sans Std';
	src: url('../../fonts/neo-sans-std/NeoSansStd-Light.woff2') format('woff2'),
	     url('../../fonts/neo-sans-std/NeoSansStd-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Neo Sans Std';
	src: url('../../fonts/neo-sans-std/NeoSansStd-Regular.woff2') format('woff2'),
	     url('../../fonts/neo-sans-std/NeoSansStd-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Neo Sans Std';
	src: url('../../fonts/neo-sans-std/NeoSansStd-Medium.woff2') format('woff2'),
	     url('../../fonts/neo-sans-std/NeoSansStd-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Neo Sans Std';
	src: url('../../fonts/neo-sans-std/NeoSansStd-Bold.woff2') format('woff2'),
	     url('../../fonts/neo-sans-std/NeoSansStd-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* =============================
  # NEC Brand Tokens
============================= */

:root {
	/* NEC brand colours */
	--nec-grey:       #384249;
	--nec-grey20: #ebeced;
	--nec-light-grey: #f5f5f6;
	--nec-white:      #ffffff;
	--nec-orange:     #EB6E00;
	--nec-blue:       #1414A0;
	--nec-alt-blue: 	#002B62;

	/* Override base.css generic tokens with NEC values */
	--black:      #384249;   /* NEC Grey — primary text */
	--white:      #ffffff;
	--orange:     #EB6E00;   /* NEC Orange */
	--main-color: #1414A0;   /* NEC Blue */
	--grey:       rgba(227, 227, 227, 1);
	--dark-grey:  rgba(142, 142, 142, 1);

	/* NEC font stack — overrides base.css Cormorant Garamond defaults */
	--nec-font: 'Neo Sans Std', sans-serif;
	--content:  'Neo Sans Std', sans-serif;
	--header:   'Neo Sans Std', sans-serif;
	--regular:  'Neo Sans Std', sans-serif;
}

/* =============================
  # Dark Mode Colours
============================= */

@media (prefers-color-scheme: dark) {
	:root {
		/* NEC brand tokens — dark mode
		--nec-grey:       #e8ecee;  
		--nec-light-grey: #1e2428;  
		--nec-white:      #121619;   
		--nec-orange:     #ff8c2a; 
		--nec-blue:       #4d4ddb; 


		--black:      #f5f5f6;
		--white:      #384249;
		--grey:       rgba(80, 80, 80, 1);
		--dark-grey:  rgba(200, 200, 200, 1);
		--main-color: #4d4ddb;
		*/
	}
}

/* =============================
  # Site Defaults
============================= */

body, html { font-family: var(--nec-font); }

/* =============================
  # Typography — Fluid type scale
  All sizes are maximums at 1440px viewport.
  Min values at 375px. Uses CSS clamp().
============================= */

h1 {
	/* Fluid between 390px (44px/48px) and 1440px (64px/68px) viewports. */
	font-size:      clamp(2.75rem, calc(2.2857rem + 1.9048vw), 4rem);
	line-height:    clamp(3rem, calc(2.5357rem + 1.9048vw), 4.25rem);
	font-weight:    400;
	letter-spacing: -0.01em;
}

h2 {
	/* Fluid between 390px (38px) and 1440px (40px) viewports. */
	font-size:      clamp(2.375rem, calc(2.3286rem + 0.1905vw), 2.5rem);
	line-height:    clamp(3rem, calc(2.7214rem + 1.1429vw), 3.75rem);
	font-weight:    400;
	letter-spacing: -0.01em;
}

h3 {
	/* Fluid between 390px (15px/22px) and 1440px (20px/28px) viewports. */
	font-size:      clamp(0.9375rem, calc(0.8214rem + 0.476vw), 1.25rem);
	line-height:    clamp(1.375rem, calc(1.2357rem + 0.571vw), 1.75rem);
	font-weight:    500;
	letter-spacing: -0.01em;
}

@media (min-width: 1440px) {
	h3 {
		padding-bottom: 15px;
	}
}

p,
li {
	/* Fluid between 390px (16px/24px) and 1440px (17px/25px) viewports. */
	font-size:      clamp(1rem, calc(0.9768rem + 0.0952vw), 1.0625rem);
	line-height:    clamp(1.5rem, calc(1.4768rem + 0.0952vw), 1.5625rem);
	font-weight:    400;
	letter-spacing: normal;
}

p {margin-bottom:40px}
.sub-header {
	font-size:      clamp(0.8125rem, calc(0.769rem + 0.188vw), 0.9375rem);
	line-height:    0.933;
	font-weight:    400;
	letter-spacing: 0.02em;
}

/* =============================
  # Content Blocks
============================= */

.content-block h1,
.content-block h2,
.content-block h3,
.content-block h4,
.content-block h5,
.content-block h6,
.content-block p,
.content-block li { color: var(--black); }

.content-block h1,
.content-block h2 {
	font-size:      clamp(2.25rem, calc(1.64rem + 2.63vw), 4rem);
	line-height:    1.0625;
	font-weight:    400;
	padding-bottom: 30px;
	letter-spacing: -0.01em;
}

.content-block h3 {
	font-size:      clamp(0.9375rem, calc(0.894rem + 0.188vw), 1.0625rem);
	line-height:    1.471;
	font-weight:    500;
	padding-bottom: 5px;
	letter-spacing: -0.01em;
}

.content-block h4    { font-size: 18px; line-height: 22px; }

.content-block p,
.content-block li {
	font-size:   clamp(0.9375rem, calc(0.894rem + 0.188vw), 1.0625rem);
	line-height: 1.471;
}

ul { list-style-position: outside; list-style-type: disc;    padding-bottom: 25px; padding-left: 0px;margin-left: 15px; }
ol { list-style-position: outside; list-style-type: decimal; padding-bottom: 25px; padding-left: 0px;margin-left: 15px; }

/* Client-editable WYSIWYG links (any ACF field rendered via wp_kses_post,
   across every module — see .content-block usage sitewide). !important
   overrides inline colour/weight the editor's rich text toolbar can paste
   into the markup. Bottom "border" is a ::after (not a real border) so it
   can animate from a 2px underline to a full-height fill on hover, sliding
   up behind the text. */
.content-block a,
.gform-field-label__text a {
	position:        relative;
	z-index:         1;
	display:         inline-block;
	color:           var(--nec-blue, #1414A0) !important;
	font-weight:     bold !important;
	text-decoration: none !important;
	transition:      color 0.3s ease;
}

.content-block a::after,
.gform-field-label__text a::after {
	content:    '';
	position:   absolute;
	z-index:    -1;
	left:       0;
	right:      0;
	bottom:     0;
	height:     2px;
	background: var(--nec-blue, #1414A0);
	transition: height 0.3s ease;
}

.content-block a:hover,
.gform-field-label__text a:hover {
	color: #ffffff !important;
}

.content-block a:hover::after,
.gform-field-label__text a:hover::after {
	height: 100%;
}


.content-module h2 {font-size: 28px; padding-bottom: 15px;}
.content-module blockquote {
	padding: 20px 0;
	margin: 0;
	border-left: 4px solid var(--nec-orange);
	padding-left: 40px;
	margin-bottom: 35px;
}

.content-module blockquote::before {
	content: '"';
	display: block;
	flex-shrink: 0;
	margin-top: -6px;
	user-select: none;
	font-family: var(--nec-font, 'Neo Sans Std', sans-serif);
	font-size: 88px;
	line-height: 68px;
	color: var(--nec-orange, #EB6E00);
	margin-bottom: -20px;
}
.content-module blockquote cite {
	display: block;
	margin-top: 10px;
	font-size: 0.875rem;
	color: var(--nec-grey);
	font-style:italic
}


/* =============================
  # Buttons
============================= */

.btn {
	--bs-btn-padding-x:       .75rem;
	--bs-btn-padding-y:       .375rem;
	--bs-btn-font-size:       1rem;
	--bs-btn-font-weight:     400;
	--bs-btn-line-height:     1.5;
	--bs-btn-color:           #212529;
	--bs-btn-bg:              transparent;
	--bs-btn-border-width:    1px;
	--bs-btn-border-color:    transparent;
	--bs-btn-border-radius:   .375rem;
	--bs-btn-hover-border-color: transparent;
	--bs-btn-disabled-opacity: .65;
	display: inline-block;
	padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
	font-size: var(--bs-btn-font-size);
	font-weight: var(--bs-btn-font-weight);
	line-height: var(--bs-btn-line-height);
	color: var(--bs-btn-color);
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	user-select: none;
	border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
	border-radius: var(--bs-btn-border-radius);
	background-color: var(--bs-btn-bg);
	transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.cta-btn {
	border-radius: var(--radius);
	font-size: 20px;
	line-height: 1;
	min-width: 120px;
	padding: 10px 25px;
	text-transform: uppercase;
	font-weight: var(--medium);
	transition: var(--transition);
}

.cta-btn:hover,
.cta-btn:focus-visible { filter: brightness(.95); }

.bronze-cta {
	color: var(--nec-white);
	background: var(--nec-orange);
}

.bronze-cta:hover,
.bronze-cta:focus-visible {
	background: var(--nec-blue);
	color: var(--nec-white);
}

.black-cta {
	color: var(--nec-white);
	background: var(--nec-blue);
}

.black-cta:hover {
	background: var(--nec-grey);
	color: var(--nec-white);
}


.text-end {text-align:right}
/* =============================
  # Media Queries
============================= */

@media (max-width: 1536px) {}

@media (max-width: 1366px) {}

@media (max-width: 1280px) {}

@media (max-width: 1080px) {}

@media (max-width: 992px) {}

@media (max-width: 768px) {}

@media (max-width: 600px) {}

/* =============================
  # Page Builder module max-width
  Applied automatically to every module except the full-bleed layouts
  listed in $rh_page_builder_no_max_width_layouts (template-parts/modules/page-builder.php).
============================= */

.nec-max-width {
	max-width:    1920px;
	margin-left:  auto;
	margin-right: auto;
}

/* =============================
  # Page Builder module anchor offset
  Every module can carry an "Anchor ID" (module_anchor_id field, injected as
  an `id` attribute by template-parts/modules/page-builder.php). The fixed
  header — and, on inner pages, the fixed breadcrumbs bar beneath it — would
  otherwise cover the top of the module when jumping straight to #anchor.
  scroll-margin-top reserves that space for both in-page anchor links and
  the browser's own scroll-to-hash on page load.
============================= */

[id] {
	scroll-margin-top: calc(var(--header-height, 70px) + 24px);
}

body.has-breadcrumbs [id] {
	scroll-margin-top: calc(var(--header-height, 70px) + var(--breadcrumbs-height, 51px) + 24px);
}

/* =============================
  # Scroll reveal (page-builder modules, see assets/js/scroll-reveal.js)
============================= */

.js-reveal {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.js-reveal.is-revealed {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.js-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}