/* =========================================================================
 * Finology — Global tokens & shared utilities
 * Loaded on every page. Source of truth: elementor-templates/DESIGN-TOKENS.md
 * ========================================================================= */

:root {
  /* ---------- Color: Primary ---------- */
  --color-primary-900: #0043C8;
  --color-primary-700: #1A56DB;
  --color-primary-600: #1C64F2;
  --color-primary-cta: #0144EF;

  /* ---------- Color: Gray ---------- */
  --color-gray-900: #111928;
  --color-gray-800: #1F2A37;
  --color-gray-500: #6B7280;
  --color-gray-200: #E5E7EB;
  --color-gray-100: #F3F4F6;
  --color-gray-50:  #F9FAFB;

  /* ---------- Color: Accent ---------- */
  --color-forest-dark: #2B3E39;
  --color-white: #FFFFFF;
  --color-white-50: rgba(255, 255, 255, 0.5);
  --color-divider: #D9D9D9;

  /* ---------- Typography: families ---------- */
  --font-heading: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* ---------- Typography: sizes (heading) ---------- */
  --fs-h1-xl: 74px;
  --fs-h1: 56px;
  --fs-h2: 44px;
  --fs-h3-lg: 40px;
  --fs-h3: 28px;
  --fs-h4: 20px;

  /* ---------- Typography: sizes (body) ---------- */
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;

  /* ---------- Spacing ---------- */
  --space-page-pad: 84px;
  --space-section-y: 80px;
  --space-gap-lg: 64px;

  /* ---------- Radii / shadows (placeholders, fill from Figma) ---------- */
  --radius-card: 20px;
  --shadow-card: 0px 4px 12px rgba(13, 10, 44, 0.06);
}

/* =========================================================================
 * Header (HFE template wrapper helpers)
 * ========================================================================= */

/* Login link styling inside header text-editor widget */
.elementor-element a[href*="wp-login"],
.elementor-widget-text-editor a[href*="wp-login"] {
	color: var(--color-gray-800);
	text-decoration: none;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--fs-body-sm);
	line-height: 1.5;
}

.elementor-element a[href*="wp-login"]:hover {
	color: var(--color-primary-600);
}

/* =========================================================================
 * Footer (HFE template wrapper helpers)
 * Renders nav-link lists inside text-editor widgets as flat vertical lists.
 * ========================================================================= */

.finology-footer__nav,
.elementor-widget-text-editor ul.finology-footer__nav {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.finology-footer__nav li {
	margin: 0;
	padding: 0;
}

.finology-footer__nav a {
	color: var(--color-white);
	text-decoration: none;
	font-size: var(--fs-body);
	line-height: 1.5;
	transition: opacity 0.2s ease;
}

.finology-footer__nav a:hover {
	opacity: 0.8;
	text-decoration: underline;
}

/* =========================================================================
 * Header / mobile constraints
 * ========================================================================= */

/* Constrain header logo on mobile (Elementor image widget honours width:px on desktop only) */
@media (max-width: 767px) {
	.elementor-location-header img[src*="logo-dark"],
	header img[src*="logo-dark"],
	.hfe-header img[src*="logo-dark"] {
		max-width: 138px !important;
		height: auto !important;
	}

	/* Stack header rows vertically on mobile */
	.elementor-location-header > .e-con,
	.hfe-header > .e-con {
		flex-direction: column !important;
	}
}

/* Footer logo cap on mobile */
@media (max-width: 767px) {
	footer img[src*="logo-light"],
	.elementor-location-footer img[src*="logo-light"] {
		max-width: 200px !important;
		height: auto !important;
	}

	footer .e-con-full[class*="e-flex"]:first-of-type,
	.elementor-location-footer > .e-con > .e-con-inner > .e-con:first-child {
		flex-direction: column !important;
	}
}

/* =========================================================================
 * SVG aspect-ratio locks (defends against stale browser cache returning 300x150 placeholder)
 * ========================================================================= */
img[src*="logo-dark.svg"] { aspect-ratio: 138 / 32; height: auto !important; }
img[src*="logo-light-large.svg"] { aspect-ratio: 522 / 121; height: auto !important; }
img[src*="icon-pill.svg"] { aspect-ratio: 16 / 5; }
img[src*="icon-pill-2.svg"] { aspect-ratio: 16 / 10; }
img[src*="editorial-bg.svg"] { aspect-ratio: 410 / 600; }