/* ==========================================================================
   IPTV From Canada — general.css
   Maple Fold identity. Shared design tokens, self-hosted Inter, shared
   typography/layout utilities and reusable components.

   Rules
   - Tokens live here only (no tokens.css). Keep the --ifc-* naming.
   - Page-specific styles live in assets/css/pages/{page}.css.
   - Scope everything to .ifc-scope / .ifc-section so Elementor and plugins
     are untouched. Elementor kit rules target tags at (0,1,1), so anything
     styling headings, links, paragraphs or controls uses a two-class
     selector (0,2,0) or stronger.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Local font: Inter variable (assets/fonts/, OFL.txt alongside)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable.woff") format("woff-variations"),
       url("../fonts/InterVariable.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand colours (approved) */
  --ifc-maple: #E3293D;         /* logo accent, large marks, eyebrows on light */
  --ifc-action: #CE2035;        /* buttons, text links */
  --ifc-action-hover: #AF192C;  /* button / link hover */
  --ifc-action-active: #991527; /* button pressed */
  --ifc-blush-active: #F6D4D8;  /* secondary button pressed */
  --ifc-ink: #15181D;           /* charcoal: primary text, dark surfaces */
  --ifc-ink-rgb: 21, 24, 29;    /* same colour for rgba() overlays */
  --ifc-paper: #F7F5F2;         /* warm white: page background */
  --ifc-paper-soft: #F1F2F4;    /* body copy on charcoal surfaces */
  --ifc-white-a15: rgba(255, 255, 255, .15);  /* dividers on charcoal */
  --ifc-white-a35: rgba(255, 255, 255, .35);  /* outline borders on charcoal */
  --ifc-white-a10: rgba(255, 255, 255, .10);  /* dark-surface secondary hover */
  --ifc-white-a18: rgba(255, 255, 255, .18);  /* dark-surface secondary pressed */
  --ifc-graphite: #20242B;      /* cards on charcoal sections */
  --ifc-text-dim: #C4C8CE;      /* secondary text on charcoal */
  --ifc-gold: #C6A45C;          /* Premium plan accent only */
  --ifc-gold-hover: #D6B773;
  --ifc-gold-active: #B49350;
  --ifc-gold-a35: rgba(198, 164, 92, .35);
  --ifc-surface: #FFFFFF;       /* white: cards */
  --ifc-blush: #FBE7E8;         /* supporting surface, secondary hover */
  --ifc-muted: #666B73;         /* secondary text, input borders */
  --ifc-ink-soft: #454A52;      /* large body copy that reads lighter than charcoal (9.5:1 on paper) */
  --ifc-line: #DDDAD5;          /* decorative borders / dividers */
  --ifc-line-strong: #C9C4BD;   /* hovered tile borders on warm white */

  /* Fold facet tints (from the supplied background artwork) */
  --ifc-ink-2: #252930;
  --ifc-ink-3: #343941;
  --ifc-paper-2: #EAE6E1;
  --ifc-paper-3: #DDD8D1;

  /* Semantic roles (light context defaults; dark surfaces override) */
  --ifc-fg: var(--ifc-ink);
  --ifc-fg-muted: var(--ifc-muted);
  --ifc-bg: var(--ifc-paper);
  --ifc-border: var(--ifc-line);
  --ifc-focus: var(--ifc-action);
  --ifc-focus-halo: var(--ifc-paper);

  /* Typography */
  --ifc-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ifc-display: clamp(2.75rem, 6vw, 5rem);        /* 44–80 px / 700 / 1.02 */
  --ifc-heading: clamp(2rem, 4vw, 3.5rem);         /* 32–56 px / 700 / 1.10 */
  --ifc-title: clamp(1.375rem, 2.2vw, 1.75rem);    /* 22–28 px / 700 / 1.20 */
  --ifc-lead: clamp(1.0625rem, 1.4vw, 1.25rem);    /* 17–20 px / 400 / 1.50 */
  --ifc-body: 1rem;                                /* 16 px / 400 / 1.60 */
  --ifc-small: .875rem;                            /* 14 px / 500 / 1.40 */
  --ifc-lh-display: 1.02;
  --ifc-lh-heading: 1.1;
  --ifc-lh-title: 1.2;
  --ifc-lh-body: 1.6;
  --ifc-lh-ui: 1.4;
  --ifc-tracking-tight: -0.02em;
  --ifc-tracking-eyebrow: .08em;

  /* Spacing scale (px) */
  --ifc-space-1: 4px;
  --ifc-space-2: 8px;
  --ifc-space-3: 12px;
  --ifc-space-4: 16px;
  --ifc-space-6: 24px;
  --ifc-space-8: 32px;
  --ifc-space-12: 48px;
  --ifc-space-16: 64px;
  --ifc-space-24: 96px;
  --ifc-section-y: clamp(var(--ifc-space-12), 8vw, var(--ifc-space-24));
  --ifc-gutter: var(--ifc-space-4);

  /* Layout widths */
  --ifc-container-max: 1440px;  /* border-box: includes the side gutters */
  /* Space occupied above the page content. CSS defaults here; general.js
     overwrites them on <body> from the rendered header / admin bar. */
  --ifc-header-h: 76px;
  --ifc-adminbar-h: 0px;      /* space the admin bar takes at load (hero height) */
  --ifc-header-top: 0px;      /* sticky offset: only a FIXED admin bar counts */

  /* Radii */
  --ifc-radius-sm: 6px;
  --ifc-radius-control: 10px;
  --ifc-radius-card: 20px;
  --ifc-radius-large: 28px;
  --ifc-radius-pill: 999px;

  /* Controls */
  --ifc-control-height: 48px;

  /* Elevation */
  --ifc-shadow-card: 0 1px 2px rgba(21, 24, 29, .04), 0 10px 30px rgba(21, 24, 29, .06);
  --ifc-shadow-raised: 0 12px 40px rgba(21, 24, 29, .12);

  /* Motion */
  --ifc-duration: .16s;
  --ifc-duration-slow: .3s;
  --ifc-ease: ease;
}

/* Shared gutters: 16 → 20 → 24 → 40 px. */
@media (min-width: 480px) {
  :root { --ifc-gutter: 20px; }
}

@media (min-width: 768px) {
  :root { --ifc-gutter: var(--ifc-space-6); }
}

@media (min-width: 1024px) {
  :root {
    --ifc-gutter: 40px;
    --ifc-header-h: 88px;
  }
}

/* WordPress admin bar defaults: fixed 32 px ≥ 783 px, 46 px below; at
   ≤ 600 px it is absolutely positioned and scrolls away, so it still
   reserves load-time height but no sticky offset. general.js refines both
   values from the rendered bar. */
.admin-bar {
  --ifc-adminbar-h: 32px;
  --ifc-header-top: 32px;
}

@media (max-width: 782px) {
  .admin-bar {
    --ifc-adminbar-h: 46px;
    --ifc-header-top: 46px;
  }
}

@media (max-width: 600px) {
  .admin-bar { --ifc-header-top: 0px; }
}

/* --------------------------------------------------------------------------
   3. Scope and section shell
   -------------------------------------------------------------------------- */

.ifc-scope {
  font-family: var(--ifc-font);
  font-size: var(--ifc-body);
  line-height: var(--ifc-lh-body);
  color: var(--ifc-fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.ifc-scope *,
.ifc-scope *::before,
.ifc-scope *::after {
  box-sizing: border-box;
}

/* Section root: full width inside a zero-padding Elementor container. */
.ifc-section {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding-block: var(--ifc-section-y);
  background: var(--ifc-bg);
  overflow-x: clip;
}

.ifc-section--flush {
  padding-block: 0;
}

/*
 * Element resets inside our sections. :where() keeps them at (0,2,0): high
 * enough to beat Elementor kit tag rules (0,1,1), low enough that any
 * two-class section rule loaded later (pages/*.css) overrides them.
 */
.ifc-section.ifc-scope :where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-family: inherit;
  font-weight: 700;
  line-height: var(--ifc-lh-heading);
  letter-spacing: var(--ifc-tracking-tight);
  color: inherit;
}

/*
 * Block margins are zeroed at element specificity (0,0,1): still ahead of the
 * parent theme's p { margin-block-end: .9rem } and ul/ol reset (same (0,0,1),
 * and general.css loads after them), but low enough that a section rule with a
 * single class (.ifc-xx__grid { margin-block-start: 28px }) simply works.
 * Before this, such a rule lost silently and the list sat flush against the
 * text above it.
 */
:where(.ifc-section.ifc-scope) :is(p, ul, ol, figure) {
  margin: 0;
}

/* Font inheritance stays at (0,2,0) so no third-party class rule can undo it. */
.ifc-section.ifc-scope :where(p, ul, ol, figure) {
  font-family: inherit;
}

.ifc-section.ifc-scope :is(ul, ol).ifc-list-reset {
  padding: 0;
  list-style: none;
}

.ifc-section.ifc-scope :where(img, svg, video) {
  display: block;
  max-width: 100%;
  height: auto;
}

.ifc-section.ifc-scope :where(button, input, select, textarea) {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* :where() keeps this at (0,2,0) so component rules such as .ifc-button win. */
.ifc-section.ifc-scope :where(a, a:visited) {
  color: inherit;
  text-decoration: none;
}

/* Dark surface: flips semantic roles for anything inside. */
.ifc-surface--dark {
  --ifc-fg: var(--ifc-surface);
  --ifc-fg-muted: rgba(255, 255, 255, .72);
  --ifc-bg: var(--ifc-ink);
  --ifc-border: rgba(255, 255, 255, .16);
  --ifc-focus: var(--ifc-surface);
  --ifc-focus-halo: var(--ifc-ink);
  color: var(--ifc-fg);
  background-color: var(--ifc-bg);
}

/* --------------------------------------------------------------------------
   4. Layout utilities
   -------------------------------------------------------------------------- */

.ifc-container {
  width: 100%;
  max-width: var(--ifc-container-max);
  margin-inline: auto;
  padding-inline: var(--ifc-gutter);
}

.ifc-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   5. Typography utilities
   -------------------------------------------------------------------------- */

.ifc-scope .ifc-display {
  font-size: var(--ifc-display);
  font-weight: 700;
  line-height: var(--ifc-lh-display);
  letter-spacing: var(--ifc-tracking-tight);
}

.ifc-scope .ifc-heading {
  font-size: var(--ifc-heading);
  font-weight: 700;
  line-height: var(--ifc-lh-heading);
  letter-spacing: var(--ifc-tracking-tight);
}

.ifc-scope .ifc-lead {
  font-size: var(--ifc-lead);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ifc-fg-muted);
}

/*
 * No overline utility lives here: decorative labels above headings were
 * removed site-wide, and a heading now leads its section. The
 * --ifc-tracking-eyebrow letter-spacing token above survives because real
 * labels still use the small-caps treatment — plan feature headings, the blog
 * card's category filter, order metadata and the included-channels badge.
 */

.ifc-scope .ifc-prose > * + * {
  margin-block-start: var(--ifc-space-4);
}

/* Inline text link */
.ifc-scope .ifc-link {
  color: var(--ifc-action);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color var(--ifc-duration) var(--ifc-ease);
}

.ifc-scope .ifc-link:hover {
  color: var(--ifc-action-hover);
}

.ifc-surface--dark .ifc-link {
  color: var(--ifc-surface);
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

/*
 * Shared button system. Applies to <a>, <button> and <input type=submit>
 * carrying .ifc-button inside any section. Elementor's own widgets
 * (.elementor-button) and WordPress block buttons are deliberately NOT
 * mapped: every visible control on this site is section markup.
 *
 * Sizing is exposed through custom properties so a page stylesheet can tune
 * an instance without redefining the component:
 *   .ifc-hr__cta { --ifc-button-height: 52px; --ifc-button-radius: var(--ifc-radius-sm); }
 *
 * State colours are driven by four custom properties per variant so the
 * label, nested spans and icons always follow the button colour.
 */
.ifc-scope .ifc-button {
  --ifc-btn-bg: var(--ifc-action);
  --ifc-btn-border: var(--ifc-action);
  --ifc-btn-fg: var(--ifc-surface);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--ifc-button-height, var(--ifc-control-height));
  padding: var(--ifc-button-padding, 12px 24px);
  border: var(--ifc-button-border, 1px) solid var(--ifc-btn-border);
  border-radius: var(--ifc-button-radius, var(--ifc-radius-control));
  font: 600 var(--ifc-button-size, 1rem) / var(--ifc-lh-ui) var(--ifc-font);
  color: var(--ifc-btn-fg);
  background: var(--ifc-btn-bg);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    background-color var(--ifc-duration) var(--ifc-ease),
    border-color var(--ifc-duration) var(--ifc-ease),
    color var(--ifc-duration) var(--ifc-ease);
}

/* Links keep the button colour when visited; nested content inherits it. */
.ifc-scope .ifc-button:visited,
.ifc-scope .ifc-button :where(span, svg, small, strong) {
  color: var(--ifc-btn-fg);
}

.ifc-scope .ifc-button:active {
  --ifc-btn-bg: var(--ifc-action-active);
  --ifc-btn-border: var(--ifc-action-active);
}

@media (hover: hover) {
  .ifc-scope .ifc-button:hover {
    --ifc-btn-bg: var(--ifc-action-hover);
    --ifc-btn-border: var(--ifc-action-hover);
  }

  .ifc-scope .ifc-button:hover:active {
    --ifc-btn-bg: var(--ifc-action-active);
    --ifc-btn-border: var(--ifc-action-active);
  }
}

/* Keyboard focus: ring separated from the button by a 3px gap of surface. */
.ifc-scope .ifc-button:focus-visible {
  outline: 3px solid var(--ifc-action);
  outline-offset: 3px;
  box-shadow: none;
  color: var(--ifc-btn-fg);
}

/* Secondary: charcoal outline on the warm-white surface. */
.ifc-scope .ifc-button--secondary {
  --ifc-btn-bg: transparent;
  --ifc-btn-border: var(--ifc-ink);
  --ifc-btn-fg: var(--ifc-ink);
}

.ifc-scope .ifc-button--secondary:active {
  --ifc-btn-bg: var(--ifc-blush-active);
  --ifc-btn-border: var(--ifc-action);
}

@media (hover: hover) {
  .ifc-scope .ifc-button--secondary:hover {
    --ifc-btn-bg: var(--ifc-blush);
    --ifc-btn-border: var(--ifc-action);
    --ifc-btn-fg: var(--ifc-ink);
  }

  .ifc-scope .ifc-button--secondary:hover:active {
    --ifc-btn-bg: var(--ifc-blush-active);
  }
}

/* Dark-surface secondary: transparent, white text, subtle white border;
   hover/pressed use translucent white so the text stays white. Scoped to
   .ifc-surface--dark, so light-surface secondaries are unchanged. */
.ifc-surface--dark .ifc-button--secondary {
  --ifc-btn-bg: transparent;
  --ifc-btn-border: var(--ifc-white-a35);
  --ifc-btn-fg: var(--ifc-surface);
}

.ifc-surface--dark .ifc-button--secondary:visited {
  color: var(--ifc-surface);
}

.ifc-surface--dark .ifc-button--secondary:active {
  --ifc-btn-bg: var(--ifc-white-a18);
  --ifc-btn-border: var(--ifc-surface);
  --ifc-btn-fg: var(--ifc-surface);
}

@media (hover: hover) {
  .ifc-surface--dark .ifc-button--secondary:hover {
    --ifc-btn-bg: var(--ifc-white-a10);
    --ifc-btn-border: var(--ifc-surface);
    --ifc-btn-fg: var(--ifc-surface);
  }

  .ifc-surface--dark .ifc-button--secondary:hover:active {
    --ifc-btn-bg: var(--ifc-white-a18);
  }
}

/* On charcoal the ring is white so it reads against the surface; the
   primary button keeps a 3px gap of charcoal between itself and the ring. */
.ifc-surface--dark .ifc-button:focus-visible {
  outline-color: var(--ifc-surface);
}

.ifc-scope .ifc-button:disabled,
.ifc-scope .ifc-button[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

.ifc-scope .ifc-button .ifc-icon {
  width: 20px;
  height: 20px;
}

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */

.ifc-scope .ifc-card {
  background: var(--ifc-surface);
  border: 1px solid var(--ifc-line);
  border-radius: var(--ifc-radius-card);
  padding: var(--ifc-space-6);
}

/* --------------------------------------------------------------------------
   8. Forms (the public forms themselves use components/forms.css)
   -------------------------------------------------------------------------- */

.ifc-scope .ifc-field {
  display: flex;
  flex-direction: column;
  gap: var(--ifc-space-2);
}

.ifc-scope .ifc-input {
  width: 100%;
  min-height: var(--ifc-control-height);
  padding: 12px 14px;
  border: 1px solid var(--ifc-muted);
  border-radius: var(--ifc-radius-control);
  font: 400 1rem / 1.5 var(--ifc-font);
  color: var(--ifc-ink);
  background: var(--ifc-surface);
  transition: border-color var(--ifc-duration) var(--ifc-ease);
}

.ifc-scope .ifc-input::placeholder {
  color: var(--ifc-muted);
  opacity: 1;
}

.ifc-scope .ifc-input:hover {
  border-color: var(--ifc-ink);
}

.ifc-scope .ifc-input[aria-invalid="true"] {
  border-color: var(--ifc-action);
}

.ifc-scope .ifc-help {
  font-size: var(--ifc-small);
  color: var(--ifc-fg-muted);
}

/* --------------------------------------------------------------------------
   9. Icons and logos
   -------------------------------------------------------------------------- */

.ifc-scope .ifc-icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
}

.ifc-scope .ifc-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.ifc-scope .ifc-logo img {
  width: auto;
  height: var(--ifc-logo-height, 64px);
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   10. Fold backgrounds (supplied artwork; keep text in the quiet left area)
   -------------------------------------------------------------------------- */

.ifc-fold-bg {
  background-color: var(--ifc-paper);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center right;
}

.ifc-fold-bg--light {
  background-color: var(--ifc-paper);
  background-image: url("../brand/backgrounds/fold-hero-light.svg");
}

.ifc-fold-bg--dark {
  background-color: var(--ifc-ink);
  background-image: url("../brand/backgrounds/fold-hero-dark.svg");
}

.ifc-fold-bg--red {
  background-color: var(--ifc-maple);
  background-image: url("../brand/backgrounds/fold-hero-red.svg");
}

.ifc-pattern-bg {
  background-color: var(--ifc-paper);
  background-image: url("../brand/backgrounds/maple-pattern.svg");
  background-repeat: repeat;
  background-size: 600px auto;
}

/*
 * Fade for the edge-anchored fold layers.
 *
 * Those layers draw the artwork with `background-size: auto 100%` and
 * `background-position: right center`, which scales the 1920x1080 SVG to the
 * section's height and anchors it to the outer edge. The layer is far
 * narrower than the scaled artwork — between 11% and 29% of it — so its inner
 * edge cuts the image mid-facet, and the artwork has real tone there (a
 * 19-36/255 range against the flat section colour). That produced a hard
 * vertical seam running the full height of the section.
 *
 * One gradient serves every layer. The right-anchored ones are drawn as-is,
 * so `to right` fades in from the content side outwards. The left-anchored
 * ones all carry transform: scaleX(-1), and a mask is applied in the element's
 * own pre-transform box, so the identical declaration mirrors with them and
 * still fades towards the content. The outer ~35% keeps full strength, so the
 * facets at the section edge are unchanged.
 *
 * Not listed here: .ifc-inc__folds (full-bleed `cover`, so its left edge is
 * the SVG's own flat margin), plus .ifc-ft__fold and .ifc-sc__folds, which
 * carry their own masks for a different reason.
 */
.ifc-article-hero__folds,
.ifc-faq__folds,
.ifc-trial__folds,
.ifc-bl-hero__folds,
.ifc-how__folds,
.ifc-cp__folds,
.ifc-why__folds,
.ifc-reviews__folds,
.ifc-coverage__folds,
.ifc-hrs__folds,
.ifc-hlp__folds,
.ifc-ig-picker__folds,
.ifc-dv__folds,
.ifc-gh__folds,
.ifc-tr__folds,
.ifc-ti__folds,
.ifc-tt__folds,
.ifc-ts__folds,
.ifc-tc__folds,
.ifc-sg__folds,
.ifc-sh__folds,
.ifc-ss__folds,
.ifc-ra__folds,
.ifc-rs__folds,
.ifc-rp__folds,
.ifc-rc__folds,
.ifc-rau__folds,
.ifc-rx__folds,
.ifc-cm__folds,
.ifc-cpr__folds,
.ifc-cr__folds,
.ifc-cfu__folds,
.ifc-chi__folds,
.ifc-chv__folds,
.ifc-chl__folds,
.ifc-chc__folds,
.ifc-che__folds,
.ifc-cht__folds,
.ifc-shop-hero__folds {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 65%);
          mask-image: linear-gradient(to right, transparent 0%, #000 65%);
}

/* --------------------------------------------------------------------------
   11. Site header (ifc-hd) — rendered on every public page
   Desktop (≥1024): logo | centred nav | primary CTA, one row.
   Mobile: logo + "Menu" disclosure button; the nav panel opens in normal
   flow beneath the bar. All nav rules are scoped to .ifc-hd__link so the
   CTA (shared .ifc-button) is never restyled by them.
   -------------------------------------------------------------------------- */

.ifc-hd {
  --ifc-hd-max: var(--ifc-container-max);  /* same width/gutters as the page */
  --ifc-hd-pad-x: var(--ifc-gutter);
  --ifc-hd-pad-y: 6px;
  --ifc-hd-min-height: 72px;               /* 84 px on desktop */
  --ifc-hd-logo-w: 160px;                  /* 190 px on desktop */
  --ifc-hd-link-size: 0.9375rem;           /* 15 px */
  --ifc-hd-link-gap: 26px;
  --ifc-hd-cta-height: 46px;
  --ifc-hd-cta-padding: 0 22px;
  --ifc-hd-nav-gap: var(--ifc-space-8);    /* nav ↔ CTA on desktop */

  --ifc-bg: var(--ifc-paper);
  /* Sticky in normal flow (no cloned/fixed header, no layout jump): the
     header keeps its space, sticks below a fixed admin bar, and sits above
     page content but under the admin bar (z-index 99999). */
  position: sticky;
  top: var(--ifc-header-top);
  z-index: 900;
  background: var(--ifc-paper);
  border-block-end: 1px solid var(--ifc-line);
  box-shadow: 0 1px 0 rgba(21, 24, 29, .04);
}

/* Anchored sections/headings scroll into view below the sticky header. */
.ifc-section,
.ifc-section [id] {
  scroll-margin-block-start: calc(var(--ifc-header-h) + var(--ifc-header-top) + var(--ifc-space-3));
}

.ifc-hd__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ifc-space-3);
  max-width: var(--ifc-hd-max);
  min-height: var(--ifc-hd-min-height);
  padding-block: var(--ifc-hd-pad-y);
  padding-inline: var(--ifc-hd-pad-x);
}

.ifc-scope .ifc-hd__logo {
  flex: none;
  width: var(--ifc-hd-logo-w);
  border-radius: var(--ifc-radius-sm);
}

.ifc-scope .ifc-hd__logo img {
  width: 100%;
  height: auto;   /* keeps the SVG's 408×160 proportions */
}

/* Menu toggle (revealed by general.js; hidden attribute in markup = no-JS) */
.ifc-scope .ifc-hd__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: var(--ifc-radius-sm);
  font: 600 var(--ifc-hd-link-size) / 1 var(--ifc-font);
  color: var(--ifc-ink);
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color var(--ifc-duration) var(--ifc-ease), border-color var(--ifc-duration) var(--ifc-ease);
}

.ifc-scope .ifc-hd__toggle[hidden] {
  display: none;
}

.ifc-hd__toggle-icon {
  position: relative;
  display: block;
  width: 22px;
  height: 16px;
}

.ifc-hd__toggle-icon span,
.ifc-hd__toggle-icon::before,
.ifc-hd__toggle-icon::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--ifc-duration) var(--ifc-ease), opacity var(--ifc-duration) var(--ifc-ease);
}

.ifc-hd__toggle-icon::before { top: 0; }
.ifc-hd__toggle-icon span    { top: 7px; }
.ifc-hd__toggle-icon::after  { bottom: 0; }

.ifc-hd__toggle[aria-expanded="true"] .ifc-hd__toggle-icon::before { transform: translateY(7px) rotate(45deg); }
.ifc-hd__toggle[aria-expanded="true"] .ifc-hd__toggle-icon span    { opacity: 0; }
.ifc-hd__toggle[aria-expanded="true"] .ifc-hd__toggle-icon::after  { transform: translateY(-7px) rotate(-45deg); }

@media (hover: hover) {
  .ifc-scope .ifc-hd__toggle:hover {
    color: var(--ifc-action);
    border-color: var(--ifc-line);
  }
}

/* Navigation panel (mobile: full-width block under the bar) */
.ifc-hd__nav {
  flex: 1 1 100%;
  /* An open panel on a short screen scrolls inside the sticky header. */
  max-height: calc(100vh - var(--ifc-hd-min-height) - var(--ifc-header-top));
  max-height: calc(100svh - var(--ifc-hd-min-height) - var(--ifc-header-top));
  overflow-y: auto;
  padding-block: var(--ifc-space-2) var(--ifc-space-4);
  border-block-start: 1px solid var(--ifc-line);
}

.ifc-hd__nav[hidden] {
  display: none;
}

.ifc-scope .ifc-hd__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ifc-hd__item {
  margin: 0;
}

.ifc-hd__item--cta {
  margin-block-start: var(--ifc-space-3);
}

.ifc-scope .ifc-hd__link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 4px;
  border-radius: var(--ifc-radius-sm);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: var(--ifc-lh-ui);
  color: var(--ifc-ink);
  text-decoration: none;
  transition: color var(--ifc-duration) var(--ifc-ease);
}

.ifc-scope .ifc-hd__link:visited {
  color: var(--ifc-ink);
}

@media (hover: hover) {
  .ifc-scope .ifc-hd__link:hover {
    color: var(--ifc-action);
  }
}

/* Current page: colour plus an underline (non-colour indicator). */
.ifc-scope .ifc-hd__link[aria-current="page"],
.ifc-scope .current-menu-item > .ifc-hd__link {
  color: var(--ifc-action);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-decoration-color: var(--ifc-action);
}

.ifc-scope .ifc-hd__link:focus-visible {
  outline: 3px solid var(--ifc-action);
  outline-offset: 2px;
  box-shadow: none;
}

/* CTA: the shared primary button, sized for the header. */
.ifc-scope .ifc-hd__cta {
  --ifc-button-height: var(--ifc-hd-cta-height);
  --ifc-button-padding: var(--ifc-hd-cta-padding);
  --ifc-button-radius: var(--ifc-radius-sm);
  --ifc-button-size: var(--ifc-hd-link-size);
  display: flex;
  width: 100%;
}

/* Desktop row */
@media (min-width: 1024px) {
  .ifc-hd {
    --ifc-hd-min-height: 84px;
    --ifc-hd-logo-w: 190px;
  }

  .ifc-hd__inner {
    flex-wrap: nowrap;
    gap: var(--ifc-hd-nav-gap);
  }

  .ifc-scope .ifc-hd__toggle,
  .ifc-scope .ifc-hd__toggle:not([hidden]) {
    display: none;
  }

  .ifc-hd__nav,
  .ifc-hd__nav[hidden] {
    display: block;
    flex: 1 1 auto;
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 0;
  }

  .ifc-scope .ifc-hd__list {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--ifc-hd-link-gap);
  }

  /* Paired auto margins centre the links between the logo and the CTA;
     the CTA keeps at least --ifc-hd-nav-gap of separation. */
  .ifc-hd__item:first-child {
    margin-inline-start: auto;
  }

  .ifc-hd__item--cta {
    margin-block-start: 0;
    margin-inline-start: auto;
    padding-inline-start: calc(var(--ifc-hd-nav-gap) - var(--ifc-hd-link-gap));
  }

  .ifc-scope .ifc-hd__link {
    min-height: 44px;
    padding: 8px 2px;
    font-size: var(--ifc-hd-link-size);
  }

  .ifc-scope .ifc-hd__cta {
    display: inline-flex;
    width: auto;
  }
}

/* --------------------------------------------------------------------------
   12. Focus, accessibility helpers, reduced motion
   -------------------------------------------------------------------------- */

.ifc-scope :focus {
  outline: none;
}

.ifc-scope :focus-visible {
  outline: 3px solid var(--ifc-focus);
  outline-offset: 4px;
  box-shadow: 0 0 0 3px var(--ifc-focus-halo);
}

@media (prefers-reduced-motion: reduce) {
  .ifc-scope *,
  .ifc-scope *::before,
  .ifc-scope *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}