/**
 * HRD Antwerp base styles.
 *
 * Colours and typography live only in Elementor Global Styles (Site Settings).
 * In widget CSS use Elementor's variables, e.g. var(--e-global-color-primary).
 * This file holds only the tokens Elementor cannot store as globals.
 */
:root {
	/* Radius */
	--hrd-radius-xs: 2px;
	--hrd-radius-sm: 4px;
	--hrd-radius-md: 6px;
	--hrd-radius-lg: 10px;
	--hrd-radius-pill: 999px;

	/* Shadows */
	--hrd-shadow-1: 0 1px 2px rgba(12, 26, 43, 0.06), 0 1px 0 rgba(12, 26, 43, 0.04);
	--hrd-shadow-2: 0 4px 14px rgba(12, 26, 43, 0.08);
	--hrd-shadow-3: 0 18px 40px rgba(12, 26, 43, 0.14);
	--hrd-shadow-blue: 0 12px 28px rgba(0, 76, 151, 0.22);

	/* Gradients */
	--hrd-gradient-blue: linear-gradient(135deg, #2f95da 0%, #0076d1 45%, #003a73 100%);
	--hrd-gradient-navy: linear-gradient(180deg, #0c1a2b 0%, #06101c 100%);
	--hrd-gradient-protection: linear-gradient(180deg, rgba(12, 26, 43, 0) 0%, rgba(12, 26, 43, 0.85) 100%);

	/* Motion */
	--hrd-ease-standard: cubic-bezier(.2, .7, .2, 1);
	--hrd-ease-emphasis: cubic-bezier(.2, .9, .1, 1);
	--hrd-dur-fast: 140ms;
	--hrd-dur-base: 220ms;
	--hrd-dur-slow: 420ms;
}

/* Sticky site header (Header Footer Elementor wraps it in #masthead and sets .ehf-header #masthead to relative). */
.ehf-header #masthead,
#masthead {
	position: sticky;
	top: 0;
	z-index: 60;
}

.admin-bar.ehf-header #masthead,
.admin-bar #masthead {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar.ehf-header #masthead,
	.admin-bar #masthead {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar.ehf-header #masthead,
	.admin-bar #masthead {
		top: 0;
	}
}

/*
 * Utility classes for Elementor's "CSS Classes" field, covering
 * properties that free Elementor has no control for.
 */
.hrd-backdrop-blur {
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

/* Eyebrow label prefix "— " (Heading widget with class hrd-eyebrow). */
.hrd-eyebrow .elementor-heading-title::before {
	content: "— ";
	margin-right: 4px;
}

/* Same prefix with a 2px gap — card eyebrows ("— Service · 01"). Use instead of hrd-eyebrow. */
.hrd-eyebrow-tight .elementor-heading-title::before {
	content: "— ";
	margin-right: 2px;
}

/* Italic accent word inside a heading: "Europe's authority on <em>diamond</em> …". */
.hrd-em-sky .elementor-heading-title em {
	font-style: italic;
	color: var(--e-global-color-hrdsky);
}

/* Sky-coloured, upright accent inside a heading: "<em>100k</em>+" in the stat strip. */
.hrd-em-sky-plain .elementor-heading-title em {
	font-style: normal;
	color: var(--e-global-color-hrdsky);
}

/* Fixed aspect ratio for media containers (Elementor free has no aspect-ratio control on containers). */
.hrd-aspect-4x5 {
	aspect-ratio: 4 / 5;
}

.hrd-aspect-16x11 {
	aspect-ratio: 16 / 11;
}

/* 3-stop blue gradient background (CTA band) — Elementor free gradients have 2 stops. */
.hrd-bg-gradient-blue {
	background-image: var(--hrd-gradient-blue);
}

@media (max-width: 767px) {
	.hrd-aspect-16x10-mobile {
		aspect-ratio: 16 / 10;
	}
}

/* Dot-grid texture behind a panel (Point of Trust map). Children stay above it. */
.hrd-dot-grid::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.5;
	background-image: radial-gradient(rgba(143, 211, 255, 0.18) 1.2px, transparent 1.2px);
	background-size: 22px 22px;
}

/* Region map (Point of Trust): clicking a .hrd-region card dims markers outside that region (region-map.js). */
.hrd-marker {
	transition: opacity 0.25s;
}

.hrd-region-map.is-filtered .hrd-marker:not(.is-active) {
	opacity: 0.45;
}

.hrd-region {
	cursor: pointer;
}

.hrd-region:focus-visible {
	outline: 2px solid var(--e-global-color-hrdsky);
	outline-offset: 2px;
}

/* Centre an absolutely positioned element on its left/top point (map markers at x%, y%). */
.hrd-center-on-point {
	transform: translate(-50%, -50%);
}

/* Hover colour for a non-link text label inside a linked card ("View product →"). */
.hrd-hover-secondary .elementor-heading-title {
	transition: color var(--hrd-dur-fast) var(--hrd-ease-standard);
}

.hrd-hover-secondary:hover .elementor-heading-title {
	color: var(--e-global-color-secondary);
}

/*
 * Home hero overlay: 3-stop navy gradient (Elementor's free gradient has only 2 stops).
 * Children sit above it; absolutely positioned widgets keep their own position.
 */
.hrd-hero-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(12, 26, 43, 0.85) 0%, rgba(12, 26, 43, 0.5) 42%, rgba(12, 26, 43, 0.1) 70%);
}

.hrd-hero-overlay > .e-con-inner > .elementor-element:not(.elementor-absolute),
.hrd-hero-overlay > .elementor-element:not(.elementor-absolute) {
	position: relative;
	z-index: 1;
}

@media (max-width: 767px) {
	.hrd-hero-overlay::before {
		background: linear-gradient(90deg, rgba(12, 26, 43, 0.9) 0%, rgba(12, 26, 43, 0.72) 60%, rgba(12, 26, 43, 0.5) 100%);
	}
}

/* Left-align a button label that wraps (Elementor hard-codes text-align:center on .elementor-button). */
.hrd-btn-text-start .elementor-button {
	text-align: left;
}

.hrd-btn-shadow-hover .elementor-button:hover,
.hrd-btn-shadow-hover .elementor-button:focus-visible {
	box-shadow: var(--hrd-shadow-blue);
}

/*
 * Header Footer Elementor navigation menu: details its controls can't set.
 * .hrd-nav-desktop / .hrd-nav-mobile are set in each widget's CSS Classes field.
 * Colours, fonts, spacing, borders and shadows stay in the widget controls.
 */

/* Desktop — thin chevron (replaces the plugin's font icon). */
.hrd-nav-desktop .hfe-nav-menu .sub-arrow {
	margin: 0 0 0 6px;
	padding: 0;
}

.hrd-nav-desktop .hfe-nav-menu .sub-arrow i {
	display: none;
}

.hrd-nav-desktop .hfe-nav-menu .sub-arrow::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	opacity: 0.5;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Desktop — hover underline: 2px, grows from the left (widget "Link Hover Effect" is None). */
.hrd-nav-desktop .hfe-nav-menu > li > .hfe-has-submenu-container > a.hfe-menu-item,
.hrd-nav-desktop .hfe-nav-menu > li > a.hfe-menu-item {
	position: relative;
}

.hrd-nav-desktop .hfe-nav-menu > li > .hfe-has-submenu-container > a.hfe-menu-item::after,
.hrd-nav-desktop .hfe-nav-menu > li > a.hfe-menu-item::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background-color: var(--e-global-color-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.18s var(--hrd-ease-standard);
}

.hrd-nav-desktop .hfe-nav-menu > li:hover > .hfe-has-submenu-container > a.hfe-menu-item::after,
.hrd-nav-desktop .hfe-nav-menu > li > a.hfe-menu-item:hover::after,
.hrd-nav-desktop .hfe-nav-menu > li > .hfe-has-submenu-container > a.hfe-menu-item:focus-visible::after,
.hrd-nav-desktop .hfe-nav-menu > li > a.hfe-menu-item:focus-visible::after {
	transform: scaleX(1);
}

/* Desktop — dropdown panel padding and the design's fade + 6px rise. */
.elementor-widget.hrd-nav-desktop .hfe-nav-menu .sub-menu {
	left: -20px;
	padding: 12px 0;
	transform: translateY(6px);
	transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}

.elementor-widget.hrd-nav-desktop .hfe-nav-menu .menu-item-has-children:hover > .sub-menu,
.elementor-widget.hrd-nav-desktop .hfe-nav-menu .menu-item-has-children:focus-within > .sub-menu {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

/* Keeps the dropdown open while the pointer crosses the gap below the item. */
.hrd-nav-desktop .hfe-nav-menu > li.menu-item-has-children::after {
	content: "";
	position: absolute;
	top: 100%;
	left: -20px;
	right: -20px;
	height: 36px;
}

/* Desktop — highlighted dropdown item (menu item CSS class "menu-cta"), e.g. "Report archive →". */
.elementor-widget.hrd-nav-desktop .hfe-nav-menu .sub-menu li.menu-cta > a.hfe-sub-menu-item {
	margin: 8px 20px 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--e-global-color-hrdgray);
	color: var(--e-global-color-accent);
	font-family: var(--e-global-typography-hrdmenucta-font-family), sans-serif;
	font-size: var(--e-global-typography-hrdmenucta-font-size);
	font-weight: var(--e-global-typography-hrdmenucta-font-weight);
	line-height: var(--e-global-typography-hrdmenucta-line-height);
	letter-spacing: var(--e-global-typography-hrdmenucta-letter-spacing);
	text-transform: var(--e-global-typography-hrdmenucta-text-transform);
}

/* Mobile — 44px burger = 20px icon + 11px padding + 1px border. */
.hrd-nav-mobile .hfe-nav-menu-icon {
	/* The plugin writes "padding: 0.35em" in the same generated rule as the border controls. */
	padding: 11px !important;
	border-style: solid;
	border-color: var(--e-global-color-hrdgray);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
}

.hrd-nav-mobile .hfe-nav-menu-icon svg {
	display: block;
}

/* Mobile — panel: out of the layout flow when closed (the plugin positions it full width on open). */
.hrd-nav-mobile .hfe-nav-menu nav.hfe-dropdown {
	position: absolute;
	top: 100%;
	border-bottom: 1px solid var(--e-global-color-hrdgray);
}

.hrd-nav-mobile .hfe-nav-menu nav.hfe-dropdown:not(.menu-is-active) {
	overflow: hidden;
	max-width: 0;
}

/* The plugin's clearfix pseudo-elements would count as flex items and add gaps. */
.hrd-nav-mobile nav.hfe-dropdown .hfe-nav-menu::before,
.hrd-nav-mobile nav.hfe-dropdown .hfe-nav-menu::after {
	display: none;
}

.elementor-widget.hrd-nav-mobile nav.hfe-dropdown .hfe-nav-menu {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 24px 28px;
}

/* Mobile — highlighted item (menu item CSS class "menu-cta"), e.g. "MyHRD Portal →". */
.elementor-widget.hrd-nav-mobile nav.hfe-dropdown .hfe-nav-menu li.menu-cta > a.hfe-menu-item {
	color: var(--e-global-color-accent);
	font-family: var(--e-global-typography-hrdmobilecta-font-family), sans-serif;
	font-size: var(--e-global-typography-hrdmobilecta-font-size);
	font-weight: var(--e-global-typography-hrdmobilecta-font-weight);
	line-height: var(--e-global-typography-hrdmobilecta-line-height);
	letter-spacing: var(--e-global-typography-hrdmobilecta-letter-spacing);
}

/*
 * Fluent Forms (free) — spacing its Elementor widget has no controls for.
 * Add class hrd-ff to the Fluent Forms widget (Advanced → CSS Classes).
 */
/* Label → input gap 8px (plugin default 5px). Plugin label wrapper and label are inline-block, so they sit
   in the body line box (24.8px) and add space above the label — make both blocks with line-height 1. */
.hrd-ff .fluentform .ff-el-input--label {
	display: block;
	margin-bottom: 8px;
	line-height: 1;
}

.hrd-ff .fluentform .ff-el-input--label label {
	display: block;
}

/* 2-column field rows: 20px between columns (plugin fixes 15px). */
.hrd-ff .frm-fluent-form .ff-t-container {
	gap: 20px;
}

/* Column rows stack on tablet too (plugin stacks only below 768px; design stacks from 900px). */
@media (max-width: 1024px) {
	.hrd-ff .frm-fluent-form .ff-t-container {
		display: block;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}