/* ==========================================================================
   100-whitelabel.css
   Media Site Gen 2: Customer branding overrides
   Purpose:
   - Override design tokens from 00-core.css for customer-specific branding
   - Keep changes limited to variables so the platform remains upgradeable
   Loading:
   - Load AFTER 00-core.css and before component CSS where possible
   - Or load last if you want it to win over everything
   ========================================================================== */

/* ==========================================================================
   1) Global brand overrides (default customer theme)
   Notes:
   - Prefer overriding the smallest set of tokens needed:
     primary/link, focus, surfaces, text, border, semantic colours (optional)
   ========================================================================== */

.card__img,
.card__image {
  object-fit: cover;
}

@media (min-width: 48rem) {
  .site-header__logo {
    max-width: 320px;
  }

  .site-header__logo img {
    max-width: 320px;
  }
}

@media (min-width: 64rem) {
  .site-header__logo {
    max-width: 352px;
  }
  .site-header__logo img {
    max-width: 352px;
  }
}

@media (min-width: 80rem) {
  .site-header__logo {
    max-width: 384px;
  }

  .site-header__logo img {
    max-width: 384px;
  }
}

:root {
  /* ------------------------------------------------------------------------
     Brand identity
     ------------------------------------------------------------------------ */

  /* Primary brand colour */
  --link: rgba(92, 79, 160, 1); /* TODO customer */
  --link-hover: rgba(73, 63,128, 1); /* TODO customer */

  /* Primary aliases */
  --primary: var(--link);
  --primary-hover: var(--link-hover);

  /* Text on primary (usually white for strong brand colours) */
  --on-primary: rgb(255, 255, 255, 1);; /* TODO customer */

  /* Focus ring should remain visible on both light surfaces and brand elements */
  --focus: rgba(92, 79, 160, 0.66); /* TODO customer */

  /* Optional: if the customer has a branded info colour that differs from link */
  /* --info: #0a66c2; */ /* TODO customer */

  /* ------------------------------------------------------------------------
     Surfaces and content colours
     Use these if the customer needs a different neutral palette.
     If not, leave the platform defaults.
     ------------------------------------------------------------------------ */

  /* Base surfaces */
  --surface: rgba(255, 255, 255, 1); /* TODO customer (optional) */
  --surface-1: rgba(247, 249, 249, 1); /* TODO customer (optional) */
  --surface-2: rgba(239, 244, 244, 1); /* TODO customer (optional) */

  /* Tinted surfaces (selection and chips) */
  --surface-tint: rgba(239, 244, 244, .5); /* TODO customer (optional) */
  --surface-tint-hover: rgba(239, 244, 244, .25); /* TODO customer (optional) */
  --surface-tint-strong: rgba(239, 244, 244, 1); /* TODO customer (optional) */

  /* Text */
  --text: rgba(68, 68, 68, 1); /* TODO customer (optional) */
  --text-muted: rgba(102, 102, 102, 1); /* TODO customer (optional) */
  --text-strong: rgba(68, 68, 68, 1);

  /* Element Radii */
  --radius-button: var(--radius-md);
  --radius-search: var(--radius-pill);
  --radius-hero: var(--radius-lg);
  --radius-card: var(--radius-md);
  --radius-badge: var(--radius-sm);
  --radius-image: var(--radius-md);


  /* Borders */
  --border: rgb(215, 219,224, 1); /* TODO customer (optional) */
  --border-strong: color-mix(in srgb, var(--text) 25%, var(--border));

  /* Avatar fallback (optional) */
  --avatar-fallback-bg: rgba(92, 79, 160, 1); /* TODO customer (optional) */

  /* ------------------------------------------------------------------------
     Semantic colours (optional)
     If a customer has strict semantics, override these too.
     ------------------------------------------------------------------------ */

  --info: #0a66c2; /* TODO customer (optional) */
  --danger: #c93636; /* TODO customer (optional) */
  --warning: #b25b00; /* TODO customer (optional) */
  --success: #1b7f3a; /* TODO customer (optional) */

  /* ------------------------------------------------------------------------
     Overlays and scrims
     Usually you will not change these per customer, but you can.
     ------------------------------------------------------------------------ */

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 3px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12);

  --overlay-backdrop: rgba(0, 0, 0, 0.45);

  --scrim-0: rgba(0, 0, 0, 0);
  --scrim-10: rgba(0, 0, 0, 0.1);
  --scrim-20: rgba(0, 0, 0, 0.2);
  --scrim-35: rgba(0, 0, 0, 0.35);
  --scrim-40: rgba(0, 0, 0, 0.4);
  --scrim-55: rgba(0, 0, 0, 0.55);
  --scrim-60: rgba(0, 0, 0, 0.6);
  --scrim-65: rgba(0, 0, 0, 0.65);

  /* Media lock */
  --media-lock-scrim: rgba(0, 0, 0, 0.3);

  /* ------------------------------------------------------------------------
     Track colours (optional)
     Only override if tracks are customer-branded.
     ------------------------------------------------------------------------ */

  --track-professional-development: #7b3fa1; /* TODO customer (optional) */
  --track-research: #1b6fdc; /* TODO customer (optional) */
  --track-education: #1f9d55; /* TODO customer (optional) */

  /* Hero (customer overrides) */
  --hero-ink: rgba(20, 6, 6, 1); /* TODO customer */
  --hero-ink-soft: rgba(20, 6, 6, 0.5); /* TODO customer */

  /* Hero text colour*/
  --hero-title-color: var(--text);
  --hero-summary-color: var(--primary);
  --hero-accent: var(--primary); /* TODO customer */

  /* Hero button colours */
  --hero-link-primary-bg: var(--primary);
  --hero-link-primary-color: var(--on-primary);
  --hero-link-primary-hover-bg: var(--primary-hover);
  --hero-link-primary-hover-color: rgb(10 3 3 / 1);

  /* Optional: if their hero needs different contrast/shadows */
  --hero-title-shadow: 0 4px 24px var(--hero-ink);
  --hero-text-shadow: 0 2px 8px var(--hero-ink);

  --hero-slide-bg: var(--hero-ink);

  --hero-overlay-bottom-from: rgb(20 6 6 / 0);
  --hero-overlay-bottom-to: rgb(255, 255, 255, 1);

  --hero-overlay-side-from: rgb(20 6 6 / 0);
  --hero-overlay-side-mid: rgb(20 6 6 / 0.5);
  --hero-overlay-side-to: rgb(255, 255, 255, 1);

  /* Avatar theme swatches (customer overrides) */

  --theme-1: rgb(92, 79, 160, 1); /* TODO customer */
  --theme-2: rgb(0, 102, 153); /* TODO customer */
  --theme-3: rgb(0, 121, 107); /* TODO customer */
  --theme-4: rgb(46, 125, 50); /* TODO customer */
  --theme-5: rgb(136, 38, 56); /* TODO customer */
  --theme-6: rgb(44, 62, 80); /* TODO customer */
  --theme-color: var(--surface);
}

/* ==========================================================================
   Customer typography (self-hosted static files)
   Replace font-family name and file paths per customer.
   Only include weights you actually use.
   ========================================================================== */

/* @font-face {
  font-family: "Source Sans 3";
  src: url('/Content?applicationId=ee1bc0d2-e7a8-4cca-bc76-aa93fee47da7&fileName=font-body-light.woff2') format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
} */

/* @font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/iet/Source Sans 3LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
} */

@font-face {
  font-family: "Source Sans 3";
  src: url('/Content?applicationId=ee1bc0d2-e7a8-4cca-bc76-aa93fee47da7&fileName=font-body-regular.woff2') format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url('/Content?applicationId=ee1bc0d2-e7a8-4cca-bc76-aa93fee47da7&fileName=font-body-it.woff2') format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url('/Content?applicationId=ee1bc0d2-e7a8-4cca-bc76-aa93fee47da7&fileName=font-body-medium.woff2') format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url('/Content?applicationId=ee1bc0d2-e7a8-4cca-bc76-aa93fee47da7&fileName=font-body-medium-it.woff2') format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url('/Content?applicationId=ee1bc0d2-e7a8-4cca-bc76-aa93fee47da7&fileName=font-body-semibold.woff2') format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url('/Content?applicationId=ee1bc0d2-e7a8-4cca-bc76-aa93fee47da7&fileName=font-body-semibold-it.woff2') format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url('/Content?applicationId=ee1bc0d2-e7a8-4cca-bc76-aa93fee47da7&fileName=font-body-bold.woff2') format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
    src: url('/Content?applicationId=ee1bc0d2-e7a8-4cca-bc76-aa93fee47da7&fileName=font-body-bold-it.woff2') format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url('/Content?applicationId=ee1bc0d2-e7a8-4cca-bc76-aa93fee47da7&fileName=font-body-black.woff2') format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url('/Content?applicationId=ee1bc0d2-e7a8-4cca-bc76-aa93fee47da7&fileName=font-body-black-it.woff2') format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --font-body:
    "Source Sans 3", var(--font-sans);

  --font-heading: var(--font-body);

}


.form-group--search button, .account-drawer__trigger {
   border-radius: var(--radius-pill);
}