/**
 * @file
 * Abroadlink global design tokens and base utilities.
 *
 * Loaded once by global-styling library on every page.
 * Defines all CSS custom properties and shared base styles.
 */
/* =========================================================================
   Responsive breakpoints (LESS variables for media queries)
   ========================================================================= */
/**
 * @file
 * Shared LESS variables — imported by general.less and component files.
 *
 * Breakpoint variables used in @media queries across the theme.
 */
/* =========================================================================
   Design tokens — single source of truth (:root cascade)
   ========================================================================= */
/**
 * @file
 * Design tokens — single source of truth (:root cascade).
 *
 * Imported by general.less (loaded once on every page via global-styling).
 * Component partials and section files consume these via var(--token).
 */
:root {
  /* --- Palette --- */
  --al-navy: #003050;
  --al-navy-dark: #013753;
  --al-navy-900: #001f36;
  --al-navy-800: #002942;
  --al-navy-700: #003a60;
  --al-navy-500: #4a6b87;
  --al-navy-600: #1e4a6e;
  --al-navy-400: #6e8da6;
  --al-navy-300: #98add3;
  --al-navy-100: #e4ecf3;
  --al-navy-50: #f3f6fa;
  --al-orange: #e09030;
  --al-orange-700: #b9701a;
  --al-orange-300: #f3c483;
  --al-orange-100: #f5ddb8;
  --al-orange-50: #fff7eb;
  --al-white: #ffffff;
  --al-paper: #fbfcfd;
  --al-gray-50: #f6f7f8;
  --al-gray-100: #ebeef2;
  --al-gray-200: #d9dee4;
  --al-gray-300: #b8c0ca;
  --al-gray-400: #8b94a1;
  --al-gray-500: #5e6776;
  /* Light text used on navy heroes / dark bands (standfirst, body) */
  --al-hero-text: #cfe0ec;
  /* --- Semantic --- */
  --fg-1: var(--al-navy);
  --fg-2: var(--al-navy-600);
  --fg-3: var(--al-gray-500);
  --fg-accent: var(--al-orange);
  --fg-inverse: var(--al-white);
  --fg-muted: var(--al-gray-400);
  --bg-page: #ffffff;
  --bg-alt: var(--al-navy-50);
  --bg-surface: var(--al-white);
  --border-1: var(--al-gray-200);
  /* Cards */
  --card-bg: var(--al-white);
  --card-border: var(--al-gray-200);
  --card-border-subtle: var(--al-gray-200);
  --card-hover-border: var(--al-gray-300);
  --card-shadow: var(--shadow-sm);
  /* TOC (table of contents) — used by legal/policy pages */
  --toc-bg: var(--al-gray-50);
  --toc-header-color: var(--fg-3);
  --toc-header-border: var(--al-gray-200);
  --toc-link-color: var(--fg-2);
  --toc-link-hover-bg: var(--al-gray-100);
  --toc-link-active-color: var(--al-orange);
  --toc-link-active-bg: var(--al-orange-50);
  --toc-link-active-border: var(--al-orange);
  --toc-scrollbar: var(--al-gray-300);
  /* Article content (used by .al-body / .al-article) */
  --article-text: var(--fg-2);
  --article-heading: var(--fg-1);
  --article-strong: var(--fg-1);
  --article-link: var(--al-orange);
  --article-link-hover: var(--al-orange-700);
  /* CTA cards & shared card variants */
  --cta-card-bg: var(--al-white);
  --cta-card-border: var(--al-gray-200);
  /* Form inputs */
  --input-bg: var(--al-white);
  --input-border: var(--al-gray-200);
  --input-text: var(--fg-1);
  --input-placeholder: var(--fg-3);
  --input-focus-border: var(--al-orange);
  /* Tables */
  --table-header-bg: var(--al-gray-100);
  --table-row-alt: var(--al-gray-50);
  --table-border: var(--al-gray-200);
  /* Notes / callouts */
  --note-bg: var(--al-gray-50);
  --note-border: var(--al-gray-200);
  --note-accent-border: var(--al-orange);
  /* Inline code */
  --code-bg: var(--al-gray-100);
  --status-error: #b53127;
  /* ISO certification chip colors */
  --iso-9001: #2a6f8a;
  --iso-13485: #2e8056;
  --iso-17100: #5b3a8c;
  /* --- Typography --- */
  --font-sans: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Montserrat', 'Open Sans', system-ui, sans-serif;
  --tracking-tight: -0.01em;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.08em;
  /* --- Spacing scale --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  /* --- Font-size scale --- */
  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;
  --fs-4xl: 42px;
  --fs-5xl: 48px;
  --fs-6xl: 60px;
  /* --- Line-height scale --- */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.55;
  --lh-loose: 1.75;
  /* --- Radius --- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 20px;
  --radius-pill: 999px;
  /* --- Shadows --- */
  --shadow-xs: 0 1px 2px rgba(0, 48, 80, 0.06);
  --shadow-sm: 0 2px 6px rgba(0, 48, 80, 0.06), 0 1px 2px rgba(0, 48, 80, 0.04);
  --shadow-md: 0 6px 16px rgba(0, 48, 80, 0.08), 0 2px 4px rgba(0, 48, 80, 0.05);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
  --shadow-focus: 0 0 0 3px rgba(224, 144, 48, 0.35);
  /* --- Layout --- */
  --container-xl: 1280px;
  --header-h: 150px;
  /* --- Motion --- */
  --dur-1: 0.2s;
  --dur-2: 0.35s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
/* Responsive header height — matches real sticky header at each breakpoint */
@media (max-width: 860px) {
  :root {
    --header-h: 96px;
  }
}
@media (max-width: 640px) {
  :root {
    --header-h: 76px;
  }
}
/* =========================================================================
   Body typography — override Bootstrap reboot defaults
   ========================================================================= */
body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-2);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  color: var(--fg-1);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: balance;
}
h1 {
  font-size: 48px;
  font-weight: 800;
}
h2 {
  font-size: 38px;
}
h3 {
  font-size: 24px;
}
h4 {
  font-size: 20px;
  font-weight: 600;
}
h5 {
  font-size: 17px;
  font-weight: 600;
}
h6 {
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-3);
}
p {
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}
a {
  color: var(--fg-accent);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out);
}
a:hover {
  color: var(--al-orange-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* =========================================================================
   Base utilities
   ========================================================================= */
/* Universal: prevent horizontal scrollbar from full-bleed sections.
   Applied to <html> as the ultimate clipping boundary for every page.
   clip (not hidden) preserves position:sticky behaviour. */
html {
  overflow-x: clip;
  scroll-padding-top: var(--header-h);
}
.container {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 20px;
}
/* =========================================================================
   Global button system — .al-btn
   ========================================================================= */
.al-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-decoration: none;
  white-space: nowrap;
}
.al-btn:active {
  transform: translateY(1px);
}
.al-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.al-btn--primary {
  background: var(--al-orange);
  color: #fff;
}
.al-btn--primary:hover {
  background: var(--al-orange-700);
  color: #fff;
  text-decoration: none;
}
.al-btn--ghost {
  background: transparent;
  color: var(--al-navy);
  border-color: var(--al-navy);
}
.al-btn--ghost:hover {
  background: var(--al-navy);
  color: #fff;
  text-decoration: none;
}
.al-btn--secondary {
  background: transparent;
  color: var(--al-orange);
  border-color: var(--al-orange);
}
.al-btn--secondary:hover {
  background: var(--al-orange);
  color: #fff;
  text-decoration: none;
}
.al-btn--lg {
  padding: 16px 28px;
  font-size: 17px;
}
.al-btn--navy {
  background: var(--al-navy);
  color: var(--al-white);
}
.al-btn--navy:hover {
  background: var(--al-navy-700);
  color: var(--al-white);
  text-decoration: none;
}
.al-btn svg {
  flex-shrink: 0;
}
/* =========================================================================
   Inline links (orange) used in lede paragraphs throughout the site
   ========================================================================= */
a.inline-link,
.lede a.inline-link,
.lede a[href] {
  color: var(--al-orange);
  text-decoration: none;
  border-bottom: 1px solid rgba(224, 144, 48, 0.35);
  transition: color 0.12s ease-out, border-color 0.12s ease-out;
}
a.inline-link:hover,
.lede a.inline-link:hover,
.lede a[href]:hover {
  color: var(--al-orange-700);
  border-bottom-color: var(--al-orange-700);
}
.lede p {
  margin: 0;
}
/* =========================================================================
   Dark theme — foundation layer
   ---------------------------------------------------------------------------
   Activated by `body.dark` (toggled by js/theme-toggle.js; applied pre-paint
   by the inline script in html.html.twig). Loaded on every page via
   general.css (global-styling), so this is the baseline every page inherits.

   Strategy: flip the semantic tokens so any component consuming them adapts
   automatically, then set the base elements + the global button/link system
   that hardcode navy (and would otherwise be invisible on a navy surface).
   Per-page component deltas live in each section's own .less (body.dark ...).
   ========================================================================= */
body.dark {
  /* Semantic token flips — surfaces darken, foreground lightens. */
  --bg-page: var(--al-navy);
  --bg-alt: var(--al-navy-900);
  --bg-surface: var(--al-navy-800);
  --al-paper: var(--al-navy-900);
  --fg-1: #ffffff;
  --fg-2: rgba(255, 255, 255, 0.82);
  --fg-3: rgba(255, 255, 255, 0.62);
  --fg-muted: rgba(255, 255, 255, 0.55);
  --border-1: rgba(255, 255, 255, 0.12);
  /* Cards */
  --card-bg: var(--al-navy-800);
  --card-border: rgba(255, 255, 255, 0.1);
  --card-border-subtle: rgba(255, 255, 255, 0.08);
  --card-hover-border: rgba(255, 255, 255, 0.2);
  --card-shadow: none;
  /* TOC */
  --toc-bg: var(--al-navy-800);
  --toc-header-color: rgba(255, 255, 255, 0.55);
  --toc-header-border: rgba(255, 255, 255, 0.12);
  --toc-link-color: rgba(255, 255, 255, 0.72);
  --toc-link-hover-bg: var(--al-navy-700);
  --toc-link-active-color: var(--al-orange-300);
  --toc-link-active-bg: rgba(224, 144, 48, 0.14);
  --toc-link-active-border: var(--al-orange);
  --toc-scrollbar: rgba(255, 255, 255, 0.15);
  /* Article content */
  --article-text: rgba(255, 255, 255, 0.78);
  --article-heading: #fff;
  --article-strong: #fff;
  --article-link: var(--al-orange-300);
  --article-link-hover: var(--al-orange);
  /* CTA cards */
  --cta-card-bg: var(--al-navy-800);
  --cta-card-border: rgba(255, 255, 255, 0.1);
  /* Form inputs */
  --input-bg: var(--al-navy-800);
  --input-border: rgba(255, 255, 255, 0.16);
  --input-text: #fff;
  --input-placeholder: rgba(255, 255, 255, 0.4);
  --input-focus-border: var(--al-orange);
  /* Tables */
  --table-header-bg: var(--al-navy-700);
  --table-row-alt: var(--al-navy-900);
  --table-border: rgba(255, 255, 255, 0.06);
  /* Notes / callouts */
  --note-bg: var(--al-navy-800);
  --note-border: rgba(255, 255, 255, 0.12);
  --note-accent-border: var(--al-orange);
  /* Inline code */
  --code-bg: rgba(224, 144, 48, 0.12);
  background: var(--al-navy);
  color: rgba(255, 255, 255, 0.82);
}
body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5 {
  color: #fff;
}
body.dark h6 {
  color: rgba(255, 255, 255, 0.62);
}
/* Base links lighten so they read on navy. */
body.dark a {
  color: var(--al-orange-300);
}
body.dark a:hover {
  color: #fff;
}
/* Primary (solid orange) — keep text white, prevent body.dark a override. */
body.dark .al-btn--primary {
  color: #fff;
}
body.dark .al-btn--primary:hover {
  color: #fff;
}
/* Ghost button (navy text/border) would vanish on a dark surface. */
body.dark .al-btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
body.dark .al-btn--ghost:hover {
  background: #fff;
  color: var(--al-navy);
  border-color: #fff;
}
/* Secondary (orange outline) — brighten the outline for contrast. */
body.dark .al-btn--secondary {
  color: var(--al-orange-300);
  border-color: var(--al-orange-300);
}
body.dark .al-btn--secondary:hover {
  background: var(--al-orange);
  border-color: var(--al-orange);
  color: #fff;
}
/* Navy (solid navy) would vanish on a dark navy surface — give it a light border. */
body.dark .al-btn--navy {
  border-color: rgba(255, 255, 255, 0.22);
}
body.dark .al-btn--navy:hover {
  background: var(--al-navy-600);
  border-color: rgba(255, 255, 255, 0.35);
}
/* Inline links (orange underline) — used in ledes site-wide. */
body.dark a.inline-link,
body.dark .lede a.inline-link,
body.dark .lede a[href] {
  color: var(--al-orange-300);
  border-bottom-color: rgba(243, 196, 131, 0.45);
}
body.dark a.inline-link:hover,
body.dark .lede a.inline-link:hover,
body.dark .lede a[href]:hover {
  color: #fff;
  border-bottom-color: #fff;
}
/* =========================================================================
   Theme transition — smooth light ↔ dark switch.
   GPU-friendly properties only; skip for reduced-motion users.
   ========================================================================= */
body {
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }
}
.floating-cta {
  position: fixed;
  bottom: 70px;
  right: 10px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--al-orange);
  color: #fff !important;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.floating-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.floating-cta:hover {
  background: var(--al-orange-700);
}
.floating-cta:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
#klaro,
.cookie-modal,
.cookie-modal-notice,
.cookie-notice:not(.cookie-modal-notice) {
  z-index: 2147483647 !important;
}