/**
 * @file
 * Global Design Tokens, Scrollbars & Base Resets
 * SMIP EC Knowledge Hub module.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* ==========================================================================
   Global Design Tokens & CSS Variables
   Registered from Module Design Specification
   ========================================================================== */
:root {
  /* ------------------------------------------------------------------------
     Global Design System Palette (from Color System)
     ------------------------------------------------------------------------ */
  --ec-color-text: #00002E;              /* Text color / Border color 2 */
  --ec-color-border-2: #00002E;          /* Border color 2 */
  --ec-color-primary: #004494;           /* Primary Color (links, titles, Read more) */
  --ec-color-filter-active: #8C4C12;     /* Active filter label text + plus (left panel) */
  --ec-color-disable-text: #696984;      /* Disable Text / Input Border */
  --ec-color-border: #84849B;            /* Border color */
  --ec-color-suggested-border: #7C92D6;  /* Suggested button border */
  --ec-color-divider: #D1D9F1;           /* Divider Color */
  --ec-color-scrollbar-bg: #D1D9F1;      /* Dropdown Scrollbar Track Background */
  --ec-color-scrollbar-thumb: #8B8B8B;   /* Shared scrollbar thumb */
  --ec-color-suggested-bg: #D9E3FF;      /* Suggested button bg */
  --ec-color-white: #FFFFFF;             /* Search text field / White text */
  --ec-color-tab-bottom-border: #FF8A20; /* Tab Bottom Border / Accent line */
  --ec-color-search-button: #FFBE5C;     /* Search button color / Accent bar */
  --ec-color-tab: #FFDBBA;               /* Tab Color (Active role tab) */
  --ec-color-filter-border: #EDEDF0;     /* Filter Border Color / Filter header bg */
  --ec-color-filter-header-bg: #EDEDF0;  /* Filter by header background */
  --ec-color-reset: #E21C20;             /* Reset all / destructive text action */
  --ec-color-drawer-border: #E2E8F0;     /* Drawer header/footer border */
  --ec-color-hero-bg: #8C4C12;           /* Hero Search Section Background */
  --ec-color-ai-overview-title: #471B00; /* AI Overview heading + icon */
  --ec-color-neutral-dark: #424242;      /* Type badge background / neutral dark */

  /* Match-level result card tokens (criteria: 90–100 / 75–89 / <75) */
  --ec-color-match-top-bg: #F1FFEB;
  --ec-color-match-top-border: #9FDB86;
  --ec-color-match-top-text: #153309;
  --ec-color-match-top-accent: #9FDB86;
  --ec-color-match-relevant-bg: #FFFCEB;
  --ec-color-match-relevant-border: #DBCD86;
  --ec-color-match-relevant-text: #3D3510;
  --ec-color-match-relevant-accent: #004494;
  --ec-color-match-broad-bg: #FFFFFF;
  --ec-color-match-broad-border: #DBDBDB;
  --ec-color-match-broad-text: #424242;
  --ec-color-match-broad-accent: #DBDBDB;

  --ECEffectElevation01: rgba(0, 0, 46, 0.12);
  --ECEffectElevation03: rgba(0, 0, 46, 0.16);
  --ECEffectElevation05: rgba(0, 0, 46, 0.18);

  /* ------------------------------------------------------------------------
     Mapped Semantic Tokens (For backward compatibility across components)
     ------------------------------------------------------------------------ */
  --Surface-surface-color-mode-high: var(--ec-color-hero-bg, #8C4C12);
  --Surface-surface-secondary: var(--ec-color-search-button, #FFBE5C);
  --Surface-surface-primary-low-1: var(--ec-color-suggested-bg, #D9E3FF);
  --Surface-surface-low-1: var(--ec-color-tab, #FFDBBA);
  --Surface-surface-white: var(--ec-color-white, #FFFFFF);
  --Surface-surface-lowest: #FFF3E980;
  --Surface-surface-grey-low-1-value-75: var(--ec-color-filter-border, #EDEDF0);
  --Surface-surface-filter-header: var(--ec-color-filter-header-bg, #EDEDF0);
  --Border-border: #FF8A20;
  --Border-border-low: var(--ec-color-tab, #FFDBBA);
  --On-surface-on-surface-reset: var(--ec-color-reset, #E21C20);

  /* Text & On-Surface Colors */
  --On-surface-on-surface: var(--ec-color-hero-bg, #8C4C12);
  --On-surface-on-surface-inverted: var(--ec-color-white, #FFFFFF);
  --On-surface-on-surface-brand: var(--ec-color-text, #00002E);
  --On-surface-on-surface-brown: #2E1906;
  --On-surface-on-surface-ai-overview: var(--ec-color-ai-overview-title, #471B00);
  --On-surface-on-surface-muted: var(--ec-color-white, #FFFFFF);
  --On-surface-on-surface-grey-600: var(--ec-color-disable-text, #696984);
  --On-surface-on-surface-primary: var(--ec-color-primary, #004494);
  --On-surface-on-surface-filter-active: var(--ec-color-filter-active, #C56A18);

  /* Surface & Border Design Tokens */
  --Surface-surface-inverted: var(--ec-color-white, #FFFFFF);
  --Surface-surface-primary: var(--ec-color-primary, #004494);
  --Border-border-brand: var(--ec-color-text, #00002E);
  --Border-border-grey: var(--ec-color-disable-text, #696984);
  --Border-border-grey-medium: var(--ec-color-border, #84849B);
  --Border-border-focus: var(--ec-color-primary, #004494);

  /* Modal & State Tokens */
  --ec-color-button-disabled: #FFF5E5;
  --ec-color-button-disabled-text: var(--ec-color-border, #84849B);
  --ec-color-modal-backdrop: rgba(0, 0, 46, 0.65);

  /* Spacing Tokens */
  --Spacing-2xs: 4px;
  --Spacing-xs: 8px;
  --Spacing-s: 10px;
  --Spacing-m: 12px;
  --Spacing-l: 24px;
  --Spacing-xl: 32px;
  --Spacing-2xl: 72px;

  /* Border Radii */
  --Radius-xs: 2px;
  --Radius-s: 4px;
  --Radius-pill: 12px;

  /* Typography */
  --Font-family-inter: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --Font-family-ecl: var(--Font-family-inter);
  --Font-size-h2: 2rem;           /* 32px */
  --Line-height-h2: 3rem;         /* 48px */
  --Font-size-xl: 1.125rem;       /* 18px */
  --Line-height-xl: 1.625rem;     /* 26px */
  --Font-size-s: 0.875rem;        /* 14px */
  --Line-height-s: 1.25rem;       /* 20px */
  --Font-size-xs: 0.75rem;        /* 12px */
  --Line-height-xs: 1rem;         /* 16px */
}

/* ==========================================================================
   Custom Thin Scrollbars with Project Colors (No default scrollbars)
   ========================================================================== */
html,
body,
.ecl-side-drawer__content,
* {
  scrollbar-width: thin;
  scrollbar-color: var(--ec-color-scrollbar-thumb) var(--ec-color-scrollbar-bg);
}

::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

::-webkit-scrollbar-track {
  background: var(--Surface-surface-grey-low-1-value-75, #EDEDF0) !important;
  border-radius: 6px !important;
}

::-webkit-scrollbar-thumb {
  background: var(--ec-color-scrollbar-thumb) !important;
  border-radius: 6px !important;
  transition: background-color 0.2s ease !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ec-color-scrollbar-thumb) !important;
}

::-webkit-scrollbar-thumb:active {
  background: var(--ec-color-scrollbar-thumb) !important;
}

/* Lock background scrolling when role-gate modal or drawers are open */
html.ecl-no-scroll,
body.ecl-no-scroll,
html.ecl-role-gate-open,
body.ecl-role-gate-open {
  overflow: hidden !important;
  height: 100% !important;
  overscroll-behavior: none !important;
}

/* ==========================================================================
   Full Bleed Layout Reset for Knowledge Hub Route
   ========================================================================== */
.path-ec-knowledge-hub .ecl-page-header-harmonised {
  display: none !important;
}

.path-ec-knowledge-hub .ecl-social-media-follow {
  display: none !important;
}

.path-ec-knowledge-hub #block-smip-page-title,
.path-ec-knowledge-hub .page-title {
  display: none !important;
}

.path-ec-knowledge-hub,
.path-ec-knowledge-hub body,
.path-ec-knowledge-hub main[role="main"],
.path-ec-knowledge-hub .layout-content,
.path-ec-knowledge-hub .ecl-ec-knowledge-hub-landing,
.path-ec-knowledge-hub .ecl-results-page,
.path-ec-knowledge-hub .ecl-results-page-layout {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
}

.path-ec-knowledge-hub main[role="main"],
.path-ec-knowledge-hub .layout-content {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  width: 100% !important;
}

.ecl-ec-knowledge-hub-landing {
  width: 100%;
  font-family: var(--Font-family-ecl);
  display: flex;
  flex-direction: column;
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
}