/**
 * IPTV From Canada - components/faq.css
 * Shared FAQ accordion (sections/faq.php).
 *
 * Used by the homepage FAQ and by the Installation Guides page FAQ, so the
 * two look and behave identically while their questions stay separate.
 * Loaded through the ifc-faq handle (see ifc_register_component_assets()).
 */

/* --------------------------------------------------------------------------
   FAQ (ifc-faq) — "IPTV Canada: Frequently Asked Questions"
   Charcoal section after coverage: centred heading + short red line, then
   numbered graphite accordion cards in two independent column wrappers
   (1–7 | 8–14) from 900 px, one column below. Columns align at the top and
   flow independently — no stretched cards, no matched column heights.
   Open state is driven by [aria-expanded] (icon) and .is-open (red top
   accent, drawn as a pseudo-element so nothing shifts).
   -------------------------------------------------------------------------- */

.ifc-faq {
  --ifc-faq-pad-y: 44px;                   /* 64 px tablet, 80 px desktop */
  --ifc-faq-heading-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);   /* 28 → 40 px */
  --ifc-faq-grid-gap-top: 32px;            /* heading line → cards; 40 px desktop */
  --ifc-faq-col-gap: 26px;
  --ifc-faq-card-gap: 12px;                /* 14 px desktop */
  --ifc-faq-radius: 10px;
  --ifc-faq-pad: 18px;                     /* question padding; 20 px desktop */
  --ifc-faq-num-col: 26px;
  --ifc-faq-col-gap-inner: 12px;           /* number → text → icon */
  --ifc-faq-q-size: 1rem;                  /* 17 px desktop */
  --ifc-faq-q-lh: 1.45;
  --ifc-faq-icon: 20px;
  --ifc-faq-folds-opacity: .2;             /* .28 tablet, .34 desktop */
  --ifc-faq-fold-w: 55vw;
  --ifc-faq-line: var(--ifc-white-a15);

  --ifc-bg: var(--ifc-ink);
  position: relative;      /* positioning + clipping boundary for the fold layers */
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding-block: var(--ifc-faq-pad-y);
  background: var(--ifc-ink);
  color: var(--ifc-paper);
}

/* Dark folds at both outer edges: the artwork's facets are on its right,
   so the start layer is mirrored and each layer is anchored to its own
   outer edge. */
.ifc-faq__folds {
  position: absolute;
  z-index: 0;
  inset-block: 0;
  width: var(--ifc-faq-fold-w);
  background-image: url("../../brand/backgrounds/fold-hero-dark.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
  opacity: var(--ifc-faq-folds-opacity);
  pointer-events: none;
}

.ifc-faq__folds--start {
  inset-inline-start: 0;
  transform: scaleX(-1);
  transform-origin: center;
}

.ifc-faq__folds--end {
  inset-inline-end: 0;
}

.ifc-faq__inner {
  position: relative;
  z-index: 1;
}

/* Heading --------------------------------------------------------------- */

.ifc-faq__intro {
  text-align: center;
}

.ifc-scope .ifc-faq__heading {
  font-size: var(--ifc-faq-heading-size);
  line-height: 1.15;
  text-wrap: balance;
  color: var(--ifc-paper);
}

.ifc-faq__rule {
  display: block;
  width: 64px;
  height: 4px;
  margin: 18px auto 0;
  border-radius: 2px;
  background: var(--ifc-maple);
}

/* Columns --------------------------------------------------------------- */

.ifc-faq__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ifc-faq-card-gap);            /* stacked: same gap between 7 and 8 */
  align-items: start;
  margin-block-start: var(--ifc-faq-grid-gap-top);
}

.ifc-faq__column {
  display: flex;
  flex-direction: column;
  gap: var(--ifc-faq-card-gap);
  min-width: 0;
}

/* Card ------------------------------------------------------------------ */

.ifc-faq__item {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ifc-faq-line);
  border-radius: var(--ifc-faq-radius);
  background: var(--ifc-graphite);
}

/* Open accent: pseudo-element over the top edge, so the card never shifts. */
.ifc-faq__item::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--ifc-maple);
  opacity: 0;
  pointer-events: none;
}

.ifc-faq__item.is-open::before {
  opacity: 1;
}

.ifc-scope .ifc-faq__question {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: normal;
}

/* Whole row is the button. Every property the parent theme sets on buttons
   is restated here (border, colours, nowrap, padding, transition…). */
.ifc-scope .ifc-faq__button {
  display: grid;
  grid-template-columns: var(--ifc-faq-num-col) minmax(0, 1fr) var(--ifc-faq-icon);
  column-gap: var(--ifc-faq-col-gap-inner);
  align-items: start;
  width: 100%;
  margin: 0;
  padding: var(--ifc-faq-pad);
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--ifc-paper);
  font: 600 var(--ifc-faq-q-size) / var(--ifc-faq-q-lh) var(--ifc-font);
  letter-spacing: normal;
  text-align: start;
  text-transform: none;
  white-space: normal;
  cursor: pointer;
  -webkit-user-select: text;
  user-select: text;
  transition: background-color var(--ifc-duration) var(--ifc-ease);
}

@media (hover: hover) {
  .ifc-scope .ifc-faq__button:hover {
    background-color: var(--ifc-white-a10);
    color: var(--ifc-paper);
  }
}

.ifc-scope .ifc-faq__button:focus {
  background-color: transparent;
  color: var(--ifc-paper);
  outline: none;
}

.ifc-scope .ifc-faq__button:focus-visible {
  outline: 3px solid var(--ifc-surface);
  outline-offset: -3px;                    /* inside the card (it clips overflow) */
  border-radius: var(--ifc-faq-radius);
}

/* Number and icon are centred on the first line of the question. */
.ifc-faq__number,
.ifc-faq__icon {
  display: flex;
  align-items: center;
  height: calc(var(--ifc-faq-q-size) * var(--ifc-faq-q-lh));
}

.ifc-faq__number {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: var(--ifc-text-dim);
}

.ifc-faq__text {
  min-width: 0;
  overflow-wrap: break-word;
}

/* Plus / minus: two bars; the vertical bar collapses when expanded. */
.ifc-faq__icon {
  position: relative;
  justify-content: center;
  width: var(--ifc-faq-icon);
  color: var(--ifc-maple);
}

.ifc-faq__icon::before,
.ifc-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

/* State changes are instant so the icon and accent can never lag behind
   aria-expanded; only the answer text fades in. */
.ifc-faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.ifc-faq__button[aria-expanded="true"] .ifc-faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
}

/* Answer: normal flow, no fixed heights. [hidden] removes it (and its links)
   entirely when collapsed. */
.ifc-faq__answer[hidden] {
  display: none;
}

.ifc-faq__answer-inner {
  margin-inline: var(--ifc-faq-pad);
  padding-block: 18px var(--ifc-faq-pad);
  padding-inline-start: calc(var(--ifc-faq-num-col) + var(--ifc-faq-col-gap-inner));
  padding-inline-end: calc(var(--ifc-faq-icon) + var(--ifc-faq-col-gap-inner));
  border-block-start: 1px solid var(--ifc-white-a10);
}

.ifc-scope .ifc-faq__answer-inner p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ifc-text-dim);
}

.ifc-scope .ifc-faq__answer-inner p + p {
  margin-block-start: 12px;
}

/* Links: warm white with a red underline (red text would be too low in
   contrast on graphite). */
.ifc-scope .ifc-faq__answer-inner a {
  color: var(--ifc-paper);
  text-decoration: underline;
  text-decoration-color: var(--ifc-maple);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  border-radius: 2px;
  transition: text-decoration-color var(--ifc-duration) var(--ifc-ease);
}

@media (hover: hover) {
  .ifc-scope .ifc-faq__answer-inner a:hover {
    text-decoration-color: var(--ifc-paper);
  }
}

.ifc-scope .ifc-faq__answer-inner a:focus-visible {
  outline: 2px solid var(--ifc-surface);
  outline-offset: 2px;
}

/* Gentle fade when an answer opens (never animates height, so nothing clips). */
.ifc-faq__answer.is-opening {
  animation: ifc-faq-reveal .22s var(--ifc-ease) both;
}

@keyframes ifc-faq-reveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ifc-faq__answer.is-opening {
    animation: none;
  }

  .ifc-scope .ifc-faq__button,
  .ifc-scope .ifc-faq__answer-inner a {
    transition: none;
  }
}

/* Light surface ---------------------------------------------------------
   [section name="faq" surface="light"] — the same accordion on warm white,
   for a page whose section order puts the FAQ on a light band (the contact
   page). Only colours change: every size, gap, state and behaviour above is
   inherited, and the section does NOT carry .ifc-surface--dark, so nothing
   in general.css flips its semantic roles.

   NOTE the compound selector .ifc-scope.ifc-faq--light with no space: both
   classes sit on the SAME <section>, so a descendant combinator between them
   would never match anything. Written compound, each rule carries one class
   more than the dark default it replaces and wins on specificity alone,
   without !important and without depending on source order.
   -------------------------------------------------------------------------- */

.ifc-faq--light {
  --ifc-faq-line: var(--ifc-line);
  --ifc-faq-folds-opacity: .14;              /* .18 tablet, .22 desktop */

  --ifc-bg: var(--ifc-paper);
  background: var(--ifc-paper);
  color: var(--ifc-ink);
}

/* Light artwork: the dark SVG would read as a smudge on warm white. */
.ifc-faq--light .ifc-faq__folds {
  background-image: url("../../brand/backgrounds/fold-hero-light.svg");
}

.ifc-scope.ifc-faq--light .ifc-faq__heading {
  color: var(--ifc-ink);
}

.ifc-faq--light .ifc-faq__item {
  background: var(--ifc-surface);
}

.ifc-scope.ifc-faq--light .ifc-faq__button {
  color: var(--ifc-ink);
}

@media (hover: hover) {
  .ifc-scope.ifc-faq--light .ifc-faq__button:hover {
    background-color: var(--ifc-blush);
    color: var(--ifc-ink);
  }
}

.ifc-scope.ifc-faq--light .ifc-faq__button:focus {
  background-color: transparent;
  color: var(--ifc-ink);
}

/* White would be invisible here, so the focus ring is the brand red. */
.ifc-scope.ifc-faq--light .ifc-faq__button:focus-visible {
  outline-color: var(--ifc-action);
}

.ifc-faq--light .ifc-faq__number {
  color: var(--ifc-muted);
}

.ifc-faq--light .ifc-faq__icon {
  color: var(--ifc-action);
}

.ifc-faq--light .ifc-faq__item::before {
  background: var(--ifc-action);
}

.ifc-faq--light .ifc-faq__answer-inner {
  border-block-start-color: var(--ifc-line);
}

.ifc-scope.ifc-faq--light .ifc-faq__answer-inner p {
  color: var(--ifc-muted);
}

/* Charcoal text with a red underline: red-on-white body links would be
   louder than the surrounding copy, and paper-on-white unreadable. */
.ifc-scope.ifc-faq--light .ifc-faq__answer-inner a {
  color: var(--ifc-ink);
  text-decoration-color: var(--ifc-action);
}

@media (hover: hover) {
  .ifc-scope.ifc-faq--light .ifc-faq__answer-inner a:hover {
    text-decoration-color: var(--ifc-ink);
  }
}

.ifc-scope.ifc-faq--light .ifc-faq__answer-inner a:focus-visible {
  outline-color: var(--ifc-action);
}

/* Responsive ------------------------------------------------------------ */

@media (min-width: 768px) {
  .ifc-faq {
    --ifc-faq-pad-y: 64px;
    --ifc-faq-fold-w: clamp(280px, 30vw, 560px);
    --ifc-faq-folds-opacity: .28;
  }

  /* Same specificity as the rule above and later in the file, so the light
     variant has to restate its own opacity at every breakpoint. */
  .ifc-faq--light {
    --ifc-faq-folds-opacity: .18;
  }
}

/* Two independent columns (each wrapper flows on its own). */
@media (min-width: 900px) {
  .ifc-faq__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--ifc-faq-col-gap);
  }
}

@media (min-width: 1024px) {
  .ifc-faq {
    --ifc-faq-pad-y: 80px;
    --ifc-faq-grid-gap-top: 40px;
    --ifc-faq-card-gap: 14px;
    --ifc-faq-pad: 20px;
    --ifc-faq-q-size: 1.0625rem;
    --ifc-faq-folds-opacity: .34;
  }

  .ifc-faq--light {
    --ifc-faq-folds-opacity: .22;
  }
}