/*
 * dfdc.io shared components: typography, buttons, links, focus rings.
 * Loaded after tokens.css and applies sitewide. Existing theme classes
 * (.ms-btn, .btn-green, .msbtn-green) are aliased onto the new system
 * so legacy templates keep working without rewriting their markup.
 */

/* ---- Inter Tight self-loaded with display:swap --------------------- */
@font-face {
	font-family: "Inter Tight";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: local("Inter Tight"), local("InterTight"),
	     url("https://fonts.gstatic.com/s/intertight/v11/NGSnv5HMAFg6IuGlBNMjxJEL2VmU3NS7Z2JHd6cm.woff2") format("woff2");
}

/* ---- Sane base ------------------------------------------------------ */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	font-family: var(--dfdc-font-sans);
	font-size: var(--dfdc-text-base);
	line-height: var(--dfdc-leading-normal);
	color: var(--dfdc-text-dark);
	background: var(--dfdc-surface);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "ss01", "cv11";  /* Inter Tight stylistic alts */
}

img, video { max-width: 100%; height: auto; }

/* ---- Headings: tighter tracking + display weight -------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--dfdc-font-sans);
	font-weight: 600;
	line-height: var(--dfdc-leading-tight);
	letter-spacing: var(--dfdc-tracking-tight);
	color: inherit;
}

h1, .h1 { font-size: var(--dfdc-text-5xl); }
h2, .h2 { font-size: var(--dfdc-text-3xl); }
h3, .h3 { font-size: var(--dfdc-text-2xl); }
h4, .h4 { font-size: var(--dfdc-text-xl);  }
h5, .h5 { font-size: var(--dfdc-text-lg);  }
h6, .h6 { font-size: var(--dfdc-text-base); }

/* ---- Focus ring: visible, themed, accessible ----------------------- */
:focus-visible {
	outline: 2px solid var(--dfdc-mint);
	outline-offset: 3px;
	border-radius: var(--dfdc-radius-sm);
}

/* ---- Button system --------------------------------------------------
 * `.dfdc-btn` is for components we ship from the theme (the hero).
 * Flat, rectangular, no shadow — matches the Elementor button look the
 * team set on the rest of the site so we don't have two visual systems.
 *
 * Legacy theme classes (.ms-btn, .btn-green, .msbtn-green, ...) and
 * Elementor's own .elementor-button are deliberately NOT aliased — they
 * already have their own styling configured in Elementor / the theme,
 * and wrapping them in a pill produced the double-border halo bug.
 */
.dfdc-btn {
	--btn-bg:        var(--dfdc-mint);
	--btn-bg-hover:  var(--dfdc-mint-700);
	--btn-fg:        #0F1513;
	--btn-fg-hover:  #FFFFFF;
	--btn-border:    transparent;

	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.85em 1.4em;
	min-height: 44px;             /* tap target */
	border: 1px solid var(--btn-border);
	border-radius: var(--dfdc-radius-sm);   /* 6px — flat rectangle */
	background: var(--btn-bg);
	color: var(--btn-fg);
	font: inherit;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--dfdc-duration-fast) var(--dfdc-ease),
		color            var(--dfdc-duration-fast) var(--dfdc-ease),
		border-color     var(--dfdc-duration-fast) var(--dfdc-ease);
}

.dfdc-btn:hover {
	background: var(--btn-bg-hover);
	color: var(--btn-fg-hover);
}

.dfdc-btn:focus-visible {
	outline: 2px solid var(--dfdc-mint);
	outline-offset: 3px;
}

.dfdc-btn[disabled],
.dfdc-btn[aria-disabled="true"] {
	opacity: 0.55;
	pointer-events: none;
}

/* Variants */
.dfdc-btn--primary { /* default vars above */ }

.dfdc-btn--ghost {
	--btn-bg:        transparent;
	--btn-bg-hover:  rgba(255, 255, 255, 0.06);
	--btn-fg:        var(--dfdc-text);
	--btn-fg-hover:  var(--dfdc-mint);
	--btn-border:    var(--dfdc-line-strong);
}

.dfdc-btn--outline {
	--btn-bg:        transparent;
	--btn-bg-hover:  var(--dfdc-mint);
	--btn-fg:        var(--dfdc-mint);
	--btn-fg-hover:  #0F1513;
	--btn-border:    var(--dfdc-mint);
}

.dfdc-btn--lg {
	padding: 1em 1.8em;
	min-height: 52px;
	font-size: var(--dfdc-text-lg);
}

/* ---- Elementor headings — share our type system -------------------
 * Elementor's heading widget renders <h1>...</h1> with class
 * .elementor-heading-title. The team often uses <h1>/<p> generically
 * inside the same widget, which means visual hierarchy needs to come
 * from the widget settings. Default to our type tokens so unstyled
 * widgets still feel coherent.
 */
.elementor-widget-heading .elementor-heading-title {
	font-family: var(--dfdc-font-sans);
	letter-spacing: var(--dfdc-tracking-tight);
	line-height: var(--dfdc-leading-tight);
}

.elementor-widget-heading h1.elementor-heading-title { font-weight: 600; font-size: var(--dfdc-text-4xl); }
.elementor-widget-heading h2.elementor-heading-title { font-weight: 600; font-size: var(--dfdc-text-3xl); }
.elementor-widget-heading h3.elementor-heading-title { font-weight: 600; font-size: var(--dfdc-text-2xl); }
.elementor-widget-heading h4.elementor-heading-title { font-weight: 500; font-size: var(--dfdc-text-xl);  }
.elementor-widget-heading p.elementor-heading-title  {
	font-family: var(--dfdc-font-sans);
	font-weight: 400;
	letter-spacing: 0;
	line-height: var(--dfdc-leading-normal);
}

/* ---- Compliance page (page-id-2282) -------------------------------
 * The team built each cert as two side-by-side Elementor containers:
 * a white text column on the left and a fully mint-saturated image
 * column on the right. Dark blue ISO globes on a saturated mint clash
 * hard, the join between the two columns reads as a broken split, and
 * the dotted Elementor row outline shows through. Rework:
 *   1. dim the mint cell to a soft brand tint that doesn't fight logos
 *   2. wrap the row as a single rounded card with a subtle border
 *   3. drop the dotted row outline
 */
.page-id-2282 .elementor-element {
	border-style: none !important;
}

.page-id-2282 .e-con-full {
	background-color: transparent;
	background-image: none;
}

/* The cert row pattern: a 2-column container where one column holds an
 * image widget. Match only that exact shape so the page wrapper (which
 * also has multiple .e-con-full children) doesn't get the card style. */
.page-id-2282 .e-con-full:has(> .e-con-full:nth-child(2):last-child > .elementor-widget-image) {
	background-color: var(--dfdc-surface) !important;
	border: 1px solid rgba(15, 21, 19, 0.08) !important;
	border-radius: var(--dfdc-radius-lg) !important;
	box-shadow: var(--dfdc-shadow-sm);
	overflow: hidden;
	margin-block: var(--dfdc-space-5);
}

/* Both columns inside the unified card become transparent so the
 * parent card's white surface shows through cleanly. */
.page-id-2282 .e-con-full > .e-con-full:nth-child(1),
.page-id-2282 .e-con-full > .e-con-full:nth-child(2) {
	background-color: transparent !important;
	background-image: none !important;
}

/* Subtle mint accent strip down the LEFT edge of each cert card to
 * keep the brand cue without flooding the cell. */
.page-id-2282 .e-con-full:has(> .e-con-full:nth-child(2):last-child > .elementor-widget-image) {
	border-left: 4px solid var(--dfdc-mint) !important;
}

/* Center the cert logos in their cell. */
.page-id-2282 .e-con-full > .e-con-full:nth-child(2) .elementor-widget-image {
	display: flex;
	align-items: center;
	justify-content: center;
}

.page-id-2282 .e-con-full > .e-con-full:nth-child(2) .elementor-widget-image img {
	max-height: 220px;
	width: auto;
}

/* Title row: the file icon is decorative; tighten its scale + gap. */
.page-id-2282 .elementor-icon-list-item img,
.page-id-2282 .e-con-full .elementor-icon img {
	max-height: 28px;
	width: auto;
}

/* ---- Hide counter widgets ----------------------------------------
 * Per the team's positioning: we are a single-location boutique
 * facility — quantitative counters ("0+", "165 racks", "0.05%") work
 * against the brand. Hide them site-wide; the underlying widgets
 * stay in the page so they can be re-enabled or replaced later.
 */
.elementor-widget-counter {
	display: none !important;
}

/* When a row is composed entirely of counter widgets, also hide the
 * containing column / row so we don't leave a blank gap. */
.e-con-full:has(> .elementor-widget-counter:only-child),
.e-con-full:not(:has(> :not(.elementor-widget-counter, .e-con-full:has(> .elementor-widget-counter:only-child)))) {
	display: none !important;
}

/* ---- Section rhythm ------------------------------------------------- */
.section,
section[class*="-section"]:not(.elementor-section):not(.dfdc-hero) {
	padding-block: var(--dfdc-space-9);
}

.ms-container,
.section-container {
	width: var(--dfdc-container);
	margin-inline: auto;
}

/* ---- Inline style anti-patterns: defang the worst offenders -------- */
/* The team scattered margin-top:-125px on .inner-banner; replace at the
   class level so we can stop using inline styles in templates. */
.inner-banner { margin-top: 0; }

/* ---- A11y helpers --------------------------------------------------- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ---- Smooth Elementor / vendor link/button hover transitions ------- */
a { transition: color var(--dfdc-duration-fast) var(--dfdc-ease); }

/* ---- Site header backdrop -----------------------------------------
 * The Elementor / ElementsKit header ships transparent. With a light
 * page body that turns white-text nav invisible. Give the header its
 * own dark backdrop everywhere so the nav stays readable; on the home
 * page the hero takes over and the header sits over it transparently
 * with a thin scrim for legibility.
 *
 * ElementsKit renders the header via .ekit-template-content-header,
 * not via [data-elementor-type=header] — that's how Pro packages it.
 */
.ekit-template-content-header,
.elementor-location-header {
	background-color: var(--dfdc-bg);
	color: var(--dfdc-text);
	position: relative;
	z-index: var(--dfdc-z-header);
}

body.home .ekit-template-content-header,
body.home .elementor-location-header {
	background-color: transparent;
	background-image:
		linear-gradient(180deg, rgba(11, 19, 17, 0.72) 0%, rgba(11, 19, 17, 0.32) 60%, transparent 100%);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

/* Pull the homepage hero up flush with the page top so the header
   floats over it; off-home pages render normally with header above. */
body.home .dfdc-hero { margin-top: 0; }

/* Nav link contrast — readable text on the dark header. The active /
   hover state uses our mint accent. */
.ekit-template-content-header .ekit-menu-nav-link,
.elementor-location-header .ekit-menu-nav-link {
	color: var(--dfdc-text) !important;
}

.ekit-template-content-header .ekit-menu-nav-link:hover,
.ekit-template-content-header .ekit-menu-nav-link.active,
.elementor-location-header .ekit-menu-nav-link:hover,
.elementor-location-header .ekit-menu-nav-link.active {
	color: var(--dfdc-mint) !important;
}

/* Dropdown panel — dark elevated surface, mint hover, rounded card.
 * !important everywhere because ElementsKit ships !important defaults
 * for radius / padding / border / shadow on .elementskit-submenu-panel.
 *
 * NO `margin-top`: a margin between parent and dropdown means the
 * cursor leaves :hover when crossing the gap and the panel collapses.
 * Instead we draw the panel flush with the parent — clip-path keeps
 * the visual gap on the painted surface only. */
.ekit-template-content-header .elementskit-dropdown,
.ekit-template-content-header .elementskit-submenu-panel,
.ekit-template-content-header .elementskit-megamenu-panel {
	background-color: var(--dfdc-bg-elev-1) !important;
	border: 1px solid var(--dfdc-line) !important;
	box-shadow: var(--dfdc-shadow-lg) !important;
	border-radius: var(--dfdc-radius-md) !important;
	padding: var(--dfdc-space-2) !important;
	min-width: 240px !important;
	margin-top: 0 !important;
	top: 100% !important;
	overflow: visible !important;
}

/* Invisible hover bridge — pseudo-element above the dropdown that
 * keeps :hover continuous when moving from the parent label down. */
.ekit-template-content-header .elementskit-dropdown::before,
.ekit-template-content-header .elementskit-submenu-panel::before,
.ekit-template-content-header .elementskit-megamenu-panel::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 0;
	right: 0;
	height: 10px;
	background: transparent;
}

.ekit-template-content-header .elementskit-dropdown a,
.ekit-template-content-header .elementskit-submenu-panel a,
.ekit-template-content-header .elementskit-megamenu-panel a {
	color: var(--dfdc-text) !important;
	padding: 10px 14px !important;
	border-radius: var(--dfdc-radius-sm) !important;
	font-size: 0.95em !important;
	white-space: nowrap;
	transition:
		color var(--dfdc-duration-fast) var(--dfdc-ease),
		background-color var(--dfdc-duration-fast) var(--dfdc-ease) !important;
}

.ekit-template-content-header .elementskit-dropdown a:hover,
.ekit-template-content-header .elementskit-megamenu-panel a:hover {
	color: var(--dfdc-mint) !important;
	background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Drop-down indicator caret — sits flush after the parent label.
 * ElementsKit emits <i class="icon icon-down-arrow1 elementskit-submenu-indicator">
 * with float:right + display:block which stacks the caret on a new line
 * inside the flex parent <a>. Kill the float and force inline-flex. */
.ekit-template-content-header .elementskit-submenu-indicator,
.ekit-template-content-header .ekit-menu-dropdown-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	float: none !important;
	margin-left: 6px !important;
	margin-top: 0 !important;
	font-size: 0.65em !important;
	line-height: 1 !important;
	vertical-align: middle !important;
	position: static !important;
	top: auto !important;
	transition: transform var(--dfdc-duration-fast) var(--dfdc-ease);
	color: currentColor;
}

/* The link itself — keep label and indicator on a single inline row. */
.ekit-template-content-header .ekit-menu-nav-link {
	display: inline-flex !important;
	align-items: center !important;
	white-space: nowrap !important;
}

.ekit-template-content-header li:hover > a > .elementskit-submenu-indicator,
.ekit-template-content-header li:hover > a > .ekit-menu-dropdown-icon,
.ekit-template-content-header li.ekit-active > a > .elementskit-submenu-indicator,
.ekit-template-content-header li.ekit-active > a > .ekit-menu-dropdown-icon,
.ekit-template-content-header li.elementskit-dropdown-open > a > .elementskit-submenu-indicator,
.ekit-template-content-header li.elementskit-dropdown-open > a > .ekit-menu-dropdown-icon {
	transform: rotate(180deg);
	color: var(--dfdc-mint);
}

/* Off-canvas sidebar trigger — borderless icon, no button chrome.
   Just a centered icon with mint hover. The wrapper anchor still gets
   a 44x44 hit area for tap, but visually it's icon-only. */
.ekit-template-content-header .ekit_navSidebar-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 44px !important;
	border: none !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	color: var(--dfdc-text) !important;
	font-size: 22px !important;
	padding: 0 !important;
	line-height: 1 !important;
	transition: color var(--dfdc-duration-fast) var(--dfdc-ease);
}

.ekit-template-content-header .ekit_navSidebar-button:hover {
	background-color: transparent !important;
	color: var(--dfdc-mint) !important;
}

/* Inner icon centring — many ElementsKit/icomoon glyphs use line-height
   that drifts to the corner inside an inline-flex parent. Force it. */
.ekit-template-content-header .ekit_navSidebar-button > i,
.ekit-template-content-header .ekit_navSidebar-button > span,
.ekit-template-content-header .ekit_navSidebar-button > svg {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	line-height: 1 !important;
}

/* Site-wide sticky header behaviour — added .is-sticky class via JS in
   mu-plugins/dfdc-perf.php once the page scrolls past 80px. We stay
   transparent on top, then snap to a solid dark bar with a subtle
   bottom shadow. */
.ekit-template-content-header.is-sticky,
body.home .ekit-template-content-header.is-sticky {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	background-color: var(--dfdc-bg) !important;
	background-image: none !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30);
	transform: translateY(0);
	animation: dfdc-header-drop 320ms var(--dfdc-ease-out);
}

@keyframes dfdc-header-drop {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

/* ---- Logo swap: light wordmark on the dark header ------------------
 * The team's logo PNG ships dark navy ("DFDC") on a transparent bg —
 * unreadable on our dark header. Swap to a light-wordmark SVG variant
 * that we ship in the theme. Targets the Elementor logo widget by
 * the ID we observed in the rendered template (888745c).
 */
.ekit-template-content-header .elementor-element-888745c img,
.ekit-template-content-header.sticky .elementor-element-888745c img,
.ekit-template-content-header:hover .elementor-element-888745c img {
	content: url("../images/dfdc-logo-light.svg") !important;
}

/* ---- Kill ElementsKit's "header turns white on hover" feature ------
 * The header template ships an inline rule that overlays a white
 * ::before on hover and flips nav text to black. Our header is dark
 * by design, so neutralise both so hovering doesn't blank out the menu.
 */
.ekit-template-content-header::before,
.ekit-template-content-header:hover::before {
	content: none !important;
	display: none !important;
}

.ekit-template-content-header:hover .ekit-menu-nav-link,
.ekit-template-content-header:hover #menu-header-menu li > a,
.ekit-template-content-header:hover .ekit-offcanvas-toggle-wraper > a {
	color: var(--dfdc-text) !important;
}

.ekit-template-content-header:hover .ekit-menu-nav-link:hover,
.ekit-template-content-header:hover #menu-header-menu li > a:hover {
	color: var(--dfdc-mint) !important;
}

/* Re-assert .active state AFTER the hover-override block so the active
   link doesn't lose its mint colour when the user is hovering the header
   (which fires `:hover` on the wrapper, equal-specificity to .active). */
.ekit-template-content-header .ekit-menu-nav-link.active,
.ekit-template-content-header:hover .ekit-menu-nav-link.active,
.ekit-template-content-header #menu-header-menu li.current-menu-item > a,
.ekit-template-content-header #menu-header-menu li.current-menu-parent > a,
.ekit-template-content-header:hover #menu-header-menu li.current-menu-item > a,
.ekit-template-content-header:hover #menu-header-menu li.current-menu-parent > a {
	color: var(--dfdc-mint) !important;
}

/* Same for the sticky-on-scroll variant — keep dark, kill the swap. */
.ekit-template-content-header.sticky {
	background-color: var(--dfdc-bg) !important;
	background-image: none !important;
}

.sticky.ekit-template-content-header #menu-header-menu li > a,
.sticky.ekit-template-content-header .ekit_navSidebar-button {
	color: var(--dfdc-text) !important;
}

.sticky.ekit-template-content-header #menu-header-menu li > a:hover {
	color: var(--dfdc-mint) !important;
}