/* ==========================================================================
   IPTV From Canada — components/footer.css
   Site footer (ifc-ft), rendered on every public page by sections/footer.php.

   Light warm-white surface, charcoal headings, muted links, brand red for
   accents and states. Every selector is scoped to .ifc-ft, so Elementor
   widgets and article content outside the footer are untouched.

   Loaded site-wide after general.css (handle ifc-footer, depends on
   ifc-general), which is why single-class rules here win over the shared
   element resets.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shell
   -------------------------------------------------------------------------- */

.ifc-ft {
  /* Local spacing knobs so the three bands stay in proportion at every width. */
  --ifc-ft-pad-top: 40px;
  --ifc-ft-col-gap: 24px;
  --ifc-ft-row-gap: 32px;

  position: relative;
  /* Sits directly against the preceding section: no top margin, no frame. */
  margin: 0;
  padding-block: 0;
  background-color: var(--ifc-paper);
  color: var(--ifc-ink);
  /* Keeps the decorative fold artwork inside the footer. */
  overflow: clip;
}

.ifc-ft__inner {
  position: relative;
  z-index: 1; /* Above the decorative fold layer. */
}

/*
 * Faint Maple Fold artwork along the far-left edge. The supplied light
 * artwork carries its facets on the right, so this layer is mirrored with
 * scaleX(-1); its own warm-white plate matches --ifc-paper, so it blends
 * into the surface. Opacity is applied to this decorative layer only, never
 * to the footer as a whole.
 *
 * The transform mirrors the layer's own contents too, so both the
 * background position and the mask are written for the pre-transform box:
 * "right" ends up at the footer's left edge, and the mask fades from opaque
 * there out to transparent well before the text starts.
 *
 * The horizontal mask fades the artwork away before it reaches the text.
 */
.ifc-ft__fold {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 0;
  width: min(420px, 38%);
  opacity: .5;
  pointer-events: none;
  background-image: url("../../brand/backgrounds/fold-hero-light.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center right;
  transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 85%);
          mask-image: linear-gradient(to right, transparent 0%, #000 85%);
}

/*
 * A second, vertical fade. inset-block: 0 cuts the artwork off flat at the
 * footer's top edge, and on every page whose last section is also warm white
 * (articles, the blog, the legal pages) that flat cut read as a faint line
 * across the junction, because the texture simply began there. Fading it in
 * over the first fifth of the footer removes the edge and leaves the artwork
 * unchanged further down.
 *
 * Guarded: two mask layers are combined with mask-composite, and where that
 * property is missing the layers would be ADDED instead of intersected —
 * union, not overlap — which would spill the artwork across the full width and
 * behind the footer text. Browsers without it keep the single mask above.
 */
@supports (mask-composite: intersect) or (-webkit-mask-composite: source-in) {
  .ifc-ft__fold {
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, #000 85%),
      linear-gradient(to bottom, transparent 0%, #000 22%);
            mask-image:
      linear-gradient(to right, transparent 0%, #000 85%),
      linear-gradient(to bottom, transparent 0%, #000 22%);
    -webkit-mask-composite: source-in;   /* older WebKit spelling */
            mask-composite: intersect;
  }
}

/* --------------------------------------------------------------------------
   2. Main grid — brand column + navigation columns
   -------------------------------------------------------------------------- */

.ifc-ft__main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ifc-ft-row-gap) var(--ifc-ft-col-gap);
  padding-block-start: var(--ifc-ft-pad-top);
}

/* Narrow phones: one column rather than shrinking the text. */
@media (max-width: 359.98px) {
  .ifc-ft__main { grid-template-columns: minmax(0, 1fr); }
}

/* Brand block spans the full width until the five-column row appears. */
.ifc-ft__brand {
  grid-column: 1 / -1;
}

.ifc-ft .ifc-ft__logo {
  --ifc-logo-height: 68px;
  display: inline-flex;
}

.ifc-ft .ifc-ft__logo-text {
  font-size: var(--ifc-title);
  font-weight: 700;
  color: var(--ifc-ink);
}

.ifc-ft .ifc-ft__tagline {
  max-width: 34ch;
  margin-block-start: 16px;
  font-size: var(--ifc-small);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ifc-muted);
}

/* --------------------------------------------------------------------------
   3. Navigation groups
   -------------------------------------------------------------------------- */

.ifc-ft__group {
  min-width: 0; /* Long labels wrap instead of stretching the column. */
}

.ifc-ft .ifc-ft__title {
  font-size: 1rem;
  font-weight: 700;
  line-height: var(--ifc-lh-title);
  letter-spacing: normal;
  color: var(--ifc-ink);
}

/* Short red rule under each heading. */
.ifc-ft .ifc-ft__title::after {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  margin-block-start: 8px;
  border-radius: 2px;
  background-color: var(--ifc-action);
}

.ifc-ft .ifc-ft__list {
  display: grid;
  /* 8px between the boxes + the 2px padding each link carries reads as ~12px
     of vertical space between one label and the next. */
  gap: 8px;
  margin-block-start: 16px;
  padding: 0;
  list-style: none;
}

.ifc-ft .ifc-ft__item {
  margin: 0;
}

/*
 * Links are underlined on hover/focus with no layout movement: the
 * underline exists at all times and only its colour changes.
 */
.ifc-ft .ifc-ft__link {
  display: inline-block;
  padding-block: 2px; /* Comfortable touch target without spacing the list out. */
  font-size: .90625rem; /* 14.5 px */
  font-weight: 400;
  line-height: 1.5;
  color: var(--ifc-muted);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition:
    color var(--ifc-duration) var(--ifc-ease),
    text-decoration-color var(--ifc-duration) var(--ifc-ease);
}

.ifc-ft .ifc-ft__link:visited {
  color: var(--ifc-muted);
}

.ifc-ft .ifc-ft__link:focus-visible {
  color: var(--ifc-action);
  text-decoration-color: currentColor;
}

/* The page you are on, when WordPress marks the menu item. */
.ifc-ft .ifc-ft__link[aria-current="page"] {
  color: var(--ifc-ink);
  font-weight: 600;
}

@media (hover: hover) {
  .ifc-ft .ifc-ft__link:hover {
    color: var(--ifc-action);
    text-decoration-color: currentColor;
  }
}

/* --------------------------------------------------------------------------
   4. Disclaimer
   -------------------------------------------------------------------------- */

.ifc-ft__disclaimer {
  max-width: 900px;
  margin-block-start: 40px;
  margin-inline: auto;
  padding-block: 24px;
  border-block-start: 1px solid var(--ifc-line);
  text-align: center;
}

.ifc-ft .ifc-ft__disclaimer-text {
  font-size: .8125rem; /* 13 px */
  font-weight: 400;
  line-height: 1.6;
  color: var(--ifc-muted);
}

.ifc-ft .ifc-ft__disclaimer-text + .ifc-ft__disclaimer-text {
  margin-block-start: 6px;
}

.ifc-ft .ifc-ft__disclaimer-action {
  margin-block-start: 12px;
}

.ifc-ft .ifc-ft__read {
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ifc-action);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: color var(--ifc-duration) var(--ifc-ease);
}

.ifc-ft .ifc-ft__read:visited {
  color: var(--ifc-action);
}

/* No Disclaimer page is published yet: plain muted text, never a fake link. */
.ifc-ft .ifc-ft__read--plain {
  color: var(--ifc-muted);
  text-decoration: none;
}

@media (hover: hover) {
  .ifc-ft .ifc-ft__read:hover { color: var(--ifc-action-hover); }
  .ifc-ft .ifc-ft__read--plain:hover { color: var(--ifc-muted); }
}

/* --------------------------------------------------------------------------
   5. Bottom bar
   -------------------------------------------------------------------------- */

.ifc-ft__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding-block: 20px;
  border-block-start: 1px solid var(--ifc-line);
}

.ifc-ft .ifc-ft__copy {
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ifc-muted);
}

.ifc-ft .ifc-ft__top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: 2px;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ifc-muted);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition:
    color var(--ifc-duration) var(--ifc-ease),
    text-decoration-color var(--ifc-duration) var(--ifc-ease);
}

.ifc-ft .ifc-ft__top:visited {
  color: var(--ifc-muted);
}

.ifc-ft .ifc-ft__top:focus-visible {
  color: var(--ifc-action);
  text-decoration-color: currentColor;
}

.ifc-ft .ifc-ft__top-icon {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}

@media (hover: hover) {
  .ifc-ft .ifc-ft__top:hover {
    color: var(--ifc-action);
    text-decoration-color: currentColor;
  }
}

/* --------------------------------------------------------------------------
   6. Breakpoints
   -------------------------------------------------------------------------- */

/* Tablet: brand block full width, four navigation columns in one row. */
@media (min-width: 768px) {
  .ifc-ft {
    --ifc-ft-pad-top: 48px;
    --ifc-ft-col-gap: 28px;
  }

  .ifc-ft__main { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Desktop: brand column beside the four navigation columns, tops aligned.
   The brand column is ~1.5x a navigation column. */
@media (min-width: 1100px) {
  .ifc-ft {
    --ifc-ft-pad-top: 60px;
    --ifc-ft-col-gap: 32px;
  }

  .ifc-ft__main {
    grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
    align-items: start;
  }

  .ifc-ft__brand {
    grid-column: auto;
    padding-inline-end: 16px;
  }

  .ifc-ft .ifc-ft__logo { --ifc-logo-height: 76px; }

  .ifc-ft .ifc-ft__title { font-size: 1.0625rem; } /* 17 px */

  .ifc-ft__disclaimer { margin-block-start: 44px; }

  .ifc-ft__bottom { padding-block: 22px; }
}

@media (min-width: 1360px) {
  .ifc-ft { --ifc-ft-col-gap: 40px; }
}