/**
 * @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);
  --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: 72px;
  /* --- Motion --- */
  --dur-1: 0.2s;
  --dur-2: 0.35s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
/* =========================================================================
   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
   ========================================================================= */
html:has(.node--type-blog),
html:has(.node--type-solution),
html:has(.node--type-home-page) {
  overflow-x: clip;
}
.container {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 28px;
}
/* =========================================================================
   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);
  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 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;
}