/* ==========================================================================
   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 {
    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(238, 117, 32, 1); /* TODO customer */
  --link-hover: rgba(241, 144, 76, 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(20 6 6 / 1);; /* TODO customer */

  /* Focus ring should remain visible on both light surfaces and brand elements */
  --focus: rgba(245, 172, 121, 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(36, 36, 36, 1); /* TODO customer (optional) */
  --surface-1: rgba(51, 51, 51, 1); /* TODO customer (optional) */
  --surface-2: rgba(66, 66, 66, 1); /* TODO customer (optional) */

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

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

  /* Element Radii */
  --radius-button: var(--radius-none);
  --radius-search: var(--radius-none);
  --radius-hero: var(--radius-none);
  --radius-card: var(--radius-none);
  --radius-badge: var(--radius-none);
  --radius-image: var(--radius-none);


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

  /* Avatar fallback (optional) */
  --avatar-fallback-bg: rgba(103, 31, 32, 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.33);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.33);
  --shadow-md: 0 3px 6px rgba(0, 0, 0, 0.33);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.33);

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

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

  /* Media lock */
  --media-lock-scrim: rgba(255, 255, 255, 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: rgb(255, 255, 255, 1);
  --hero-summary-color: rgb(255, 255, 255, 1);
  --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(20 6 6 / 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(20 6 6 / 1);

  /* Avatar theme swatches (customer overrides) */

  --theme-1: rgb(156, 103, 171); /* TODO customer */
  --theme-2: rgb(34, 187, 224); /* TODO customer */
  --theme-3: rgb(170, 200, 30); /* TODO customer */
  --theme-4: rgb(255, 159, 67); /* TODO customer */
  --theme-5: rgb(72, 201, 176); /* TODO customer */
  --theme-6: rgb(255, 102, 146); /* 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: "Europa";
  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: "Europa";
  src: url("../fonts/iet/EuropaLightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
} */

@font-face {
  font-family: "Europa";
  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: "Europa";
  src: url("../fonts/iet/EuropaRegularItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
} */

@font-face {
  font-family: "Europa";
  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: "Europa";
  src: url("../fonts/iet/EuropaBoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
} */

:root {
  --font-body:
    "Europa", var(--font-sans);

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

}

/* ==========================================================================
   2) Notes for implementers
   - Do not add component selectors here. Keep it token-only.
   - Prefer overriding: --link, --link-hover, --focus, then neutrals if needed.
   - Ensure contrast: --link against --surface-1, and --on-primary against --primary.
   ========================================================================== */