/* ==========================================================================
   IPTV From Canada — article.css
   Shared by blog Posts and Guides (template-parts/content-article.php) and by
   the Installation Guides viewer. Loaded after general.css and core block
   styles.

   1. .ifc-prose — article CONTENT rules (also used inside the guide viewer).
      Low specificity (one class) so block classes, preset colours/sizes and
      inline block styles keep working.
   2. .ifc-article-* — standalone article PAGE layout (banner, breadcrumbs,
      two-column reading area, contents, help panel, end navigation). These
      selectors never appear in the viewer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Content: .ifc-prose
   -------------------------------------------------------------------------- */

.ifc-prose {
  --ifc-prose-size: 1.0625rem;           /* 17 px; 18 px from 1024 px */
  --ifc-prose-gap: 1.2em;                /* between ordinary blocks */
  --ifc-prose-radius: 8px;
  --ifc-prose-anchor-offset: calc(var(--ifc-header-h, 0px) + var(--ifc-header-top, 0px) + 20px);

  font-family: var(--ifc-font);
  font-size: var(--ifc-prose-size);
  line-height: 1.7;
  color: var(--ifc-ink-soft);
  overflow-wrap: break-word;
}

@media (min-width: 1024px) {
  .ifc-prose {
    --ifc-prose-size: 1.125rem;
  }
}

/* Vertical rhythm between top-level blocks. */
.ifc-prose > * {
  margin-block: 0;
}

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

/* Headings: larger gap before a new section than between paragraphs. */
.ifc-prose :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--ifc-font);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ifc-ink);
  scroll-margin-block-start: var(--ifc-prose-anchor-offset);
}

.ifc-prose :where(h1) { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); }
.ifc-prose :where(h2) { font-size: clamp(1.5rem, 1.25rem + .9vw, 1.875rem); }   /* 24 → 30 px */
.ifc-prose :where(h3) { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.4375rem); }  /* 20 → 23 px */
.ifc-prose :where(h4) { font-size: 1.125rem; }
.ifc-prose :where(h5, h6) { font-size: 1rem; }

.ifc-prose > :where(h2):not(:first-child) {
  margin-block-start: 2.1em;
}

.ifc-prose > :where(h3, h4, h5, h6):not(:first-child) {
  margin-block-start: 1.7em;
}

.ifc-prose > :where(h2, h3, h4, h5, h6) + * {
  margin-block-start: .6em;
}

.ifc-prose :where(strong, b) {
  font-weight: 700;
  color: var(--ifc-ink);
}

/* Plain text links (buttons and styled links keep their own classes). */
.ifc-prose :where(a:not([class])),
.ifc-prose :where(a:not([class])):visited {
  color: var(--ifc-action);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

@media (hover: hover) {
  .ifc-prose :where(a:not([class])):hover {
    color: var(--ifc-action-hover);
    text-decoration-thickness: 2px;
  }
}

.ifc-prose :where(a):focus-visible {
  outline: 2px solid var(--ifc-action);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Lists, including nesting. */
.ifc-prose :where(ul, ol) {
  padding-inline-start: 1.4em;
}

.ifc-prose :where(li) + :where(li) {
  margin-block-start: .45em;
}

.ifc-prose :where(li) > :where(ul, ol) {
  margin-block-start: .45em;
}

.ifc-prose :where(ul ul) {
  list-style-type: circle;
}

.ifc-prose :where(li)::marker {
  color: var(--ifc-muted);
}

/* Images keep their intrinsic proportions; never cropped to a fixed height. */
.ifc-prose :where(img, video) {
  max-width: 100%;
  height: auto;
}

.ifc-prose :where(img) {
  border-radius: var(--ifc-prose-radius);
}

.ifc-prose :where(figure) {
  margin-inline: 0;
}

.ifc-prose :where(figcaption, .wp-element-caption, .wp-caption-text) {
  margin-block: .6em 0;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--ifc-muted);
}

:where(.ifc-prose) :where(figcaption, .wp-element-caption, .wp-caption-text) {
  text-align: start;                     /* zero specificity: alignment classes win */
}

.ifc-prose :where(.wp-caption) {
  max-width: 100%;
}

/* Quotes: subtle tint + red left border (works for notes too). */
.ifc-prose :where(blockquote, .wp-block-quote) {
  margin-inline: 0;
  padding: 16px 20px;
  border-inline-start: 3px solid var(--ifc-action);
  border-radius: 0 var(--ifc-prose-radius) var(--ifc-prose-radius) 0;
  background: var(--ifc-paper-soft);
  font-style: normal;
  color: var(--ifc-ink-soft);
}

.ifc-prose :where(blockquote) > :where(*) + :where(*) {
  margin-block-start: .6em;
}

.ifc-prose :where(blockquote) :where(p) {
  margin-block: 0;
}

.ifc-prose :where(blockquote cite, .wp-block-quote cite) {
  display: block;
  margin-block-start: .6em;
  font-size: .875rem;
  font-style: normal;
  color: var(--ifc-muted);
}

/* Tables scroll inside their own container on narrow screens. */
.ifc-prose :where(.wp-block-table) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ifc-prose :where(table) {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  line-height: 1.5;
}

.ifc-prose :where(th, td) {
  padding: 10px 12px;
  border: 1px solid var(--ifc-line);
  text-align: start;
  vertical-align: top;
}

.ifc-prose :where(thead th, th) {
  background: var(--ifc-paper-soft);
  font-weight: 600;
  color: var(--ifc-ink);
}

.ifc-prose :where(tbody tr:nth-child(even) td) {
  background: rgba(var(--ifc-ink-rgb), .02);
}

/* Code. */
.ifc-prose :where(code, kbd, samp) {
  padding: .1em .35em;
  border-radius: 4px;
  background: var(--ifc-paper-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .88em;
  color: var(--ifc-ink);
}

.ifc-prose :where(pre, .wp-block-code, .wp-block-preformatted) {
  overflow-x: auto;
  padding: 16px 18px;
  border-radius: var(--ifc-prose-radius);
  background: var(--ifc-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--ifc-paper-soft);
  white-space: pre;
}

.ifc-prose :where(pre) :where(code) {
  padding: 0;
  background: none;
  font-size: inherit;
  color: inherit;
}

/* Core sets `white-space: break-spaces` on `.wp-block-code code`, which wraps
   long lines and defeats the container's own horizontal scroll. Two element
   selectors beat that one, so the <pre> stays the single source of truth. */
.ifc-prose pre code {
  white-space: inherit;
}

/* Separators. */
.ifc-prose :where(hr, .wp-block-separator) {
  border: 0;
  border-block-start: 1px solid var(--ifc-line);
}

.ifc-prose > :where(hr, .wp-block-separator) {
  margin-block: 2.2em;
}

/* Embeds and video stay responsive (core adds the aspect ratio wrapper). */
.ifc-prose :where(iframe, embed, object) {
  max-width: 100%;
}

.ifc-prose :where(.wp-block-embed, .wp-block-video) {
  margin-inline: 0;
}

/* Wide / full blocks stay inside the reading column. */
.ifc-prose > :where(.alignwide, .alignfull) {
  max-width: 100%;
  margin-inline: 0;
}

/* Buttons: brand red with white text unless the author chose colours. */
.ifc-prose .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background),
.ifc-prose .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background):visited {
  background-color: var(--ifc-action);
}

.ifc-prose .wp-block-button__link:not(.has-text-color),
.ifc-prose .wp-block-button__link:not(.has-text-color):visited {
  color: var(--ifc-surface);
}

.ifc-prose .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color),
.ifc-prose .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):visited {
  color: var(--ifc-action);
}

/* Outline style: transparent with a red outline (global button styles
   would otherwise paint it grey). */
.ifc-prose .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
  border: 2px solid currentColor;
  background-color: transparent;
}

.ifc-prose .wp-block-button__link {
  border-radius: var(--ifc-radius-control);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--ifc-duration) var(--ifc-ease);
}

@media (hover: hover) {
  .ifc-prose .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background):hover {
    background-color: var(--ifc-action-hover);
    color: var(--ifc-surface);
  }
}

.ifc-prose .wp-block-button__link:focus-visible {
  outline: 3px solid var(--ifc-ink);
  outline-offset: 3px;
}

/* Galleries: core supplies the grid, so only the frame is set here. */
.ifc-prose :where(.wp-block-gallery) {
  margin-inline: 0;
}

.ifc-prose :where(.wp-block-gallery) :where(img) {
  border-radius: var(--ifc-prose-radius);
}

.ifc-prose :where(.wp-block-gallery) :where(figcaption) {
  margin-block-start: 6px;
}

/* The gallery's own caption sits under the whole grid. */
.ifc-prose :where(.wp-block-gallery) > :where(figcaption) {
  margin-block-start: 10px;
  text-align: center;
}

/* Pull quotes: the statement version of a blockquote — red rules above and
   below rather than the quote block's left border. */
.ifc-prose :where(.wp-block-pullquote) {
  padding: 24px 0;
  border-block: 3px solid var(--ifc-action);
  background: none;
  text-align: center;
}

.ifc-prose :where(.wp-block-pullquote) :where(p) {
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ifc-ink);
}

.ifc-prose :where(.wp-block-pullquote) :where(cite) {
  display: block;
  margin-block-start: 10px;
  font-size: .875rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ifc-muted);
}

/* File block: a bordered row with the brand download button. */
.ifc-prose :where(.wp-block-file) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 14px 16px;
  border: 1px solid var(--ifc-line);
  border-radius: var(--ifc-prose-radius);
  background: var(--ifc-surface);
  font-size: .9375rem;
}

.ifc-prose :where(.wp-block-file) > :where(a:not(.wp-block-file__button)) {
  font-weight: 600;
  color: var(--ifc-ink);
}

.ifc-prose .wp-block-file__button,
.ifc-prose .wp-block-file__button:visited {
  margin-inline-start: auto;
  padding: 8px 16px;
  border-radius: var(--ifc-radius-control);
  background: var(--ifc-action);
  font-size: .875rem;
  font-weight: 600;
  color: var(--ifc-surface);
  text-decoration: none;
  opacity: 1;
}

@media (hover: hover) {
  .ifc-prose .wp-block-file__button:hover {
    background: var(--ifc-action-hover);
    color: var(--ifc-surface);
  }
}

.ifc-prose .wp-block-file__button:focus-visible {
  outline: 3px solid var(--ifc-ink);
  outline-offset: 3px;
}

/* Columns stack on phones; core's own flex layout handles wider screens. */
.ifc-prose :where(.wp-block-columns) {
  gap: 24px;
}

@media (max-width: 599.98px) {
  .ifc-prose :where(.wp-block-columns:not(.is-not-stacked-on-mobile)) {
    display: flex;
    flex-direction: column;
  }

  .ifc-prose :where(.wp-block-columns:not(.is-not-stacked-on-mobile)) > :where(.wp-block-column) {
    flex-basis: auto !important;   /* core sets an inline width per column */
  }
}

.ifc-prose :where(.wp-block-column) > * + * {
  margin-block-start: var(--ifc-prose-gap);
}

/* Group blocks: spacing only, unless the author gave one a background, in
   which case it gets padding and a radius so it reads as a panel. */
.ifc-prose :where(.wp-block-group) > * + * {
  margin-block-start: var(--ifc-prose-gap);
}

.ifc-prose :where(.wp-block-group.has-background) {
  padding: 20px;
  border-radius: var(--ifc-prose-radius);
}

/* Media & text: stacks below 600 px through core's own class. */
.ifc-prose :where(.wp-block-media-text) :where(img) {
  border-radius: var(--ifc-prose-radius);
}

/* Details: a bordered disclosure with a rotating chevron. */
.ifc-prose :where(.wp-block-details, details) {
  padding: 4px 18px;
  border: 1px solid var(--ifc-line);
  border-radius: var(--ifc-prose-radius);
  background: var(--ifc-surface);
}

.ifc-prose :where(.wp-block-details, details) > :where(summary) {
  position: relative;
  padding: 14px 32px 14px 0;
  font-weight: 600;
  color: var(--ifc-ink);
  cursor: pointer;
  list-style: none;
}

.ifc-prose :where(.wp-block-details, details) > :where(summary)::-webkit-details-marker {
  display: none;
}

.ifc-prose :where(.wp-block-details, details) > :where(summary)::after {
  content: "";
  position: absolute;
  inset-inline-end: 4px;
  inset-block-start: 50%;
  width: 9px;
  height: 9px;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--ifc-duration) var(--ifc-ease);
}

.ifc-prose :where(.wp-block-details[open], details[open]) > :where(summary)::after {
  transform: translateY(-30%) rotate(-135deg);
}

.ifc-prose :where(.wp-block-details, details) > :where(summary):focus-visible {
  outline: 2px solid var(--ifc-action);
  outline-offset: 2px;
  border-radius: 4px;
}

.ifc-prose :where(.wp-block-details, details) > :where(:not(summary)) {
  margin-block-end: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .ifc-prose :where(.wp-block-details, details) > :where(summary)::after {
    transition: none;
  }
}

/* Footnotes. */
.ifc-prose :where(.wp-block-footnotes) {
  font-size: .9375rem;
  color: var(--ifc-muted);
}

/* --------------------------------------------------------------------------
   2. Article page layout: .ifc-article-*
   -------------------------------------------------------------------------- */

/* Anchor offset for the sticky header comes from scroll-margin on the
   headings (.ifc-prose); adding scroll-padding here would double it. */
@media (prefers-reduced-motion: no-preference) {
  html:has(.ifc-article-main) {
    scroll-behavior: smooth;
  }
}

.ifc-article-main {
  display: block;
  background: var(--ifc-paper);
  color: var(--ifc-ink);
}

.ifc-article-container {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(1240px + 2 * var(--ifc-gutter));
  margin-inline: auto;
  padding-inline: var(--ifc-gutter);
}

/* A. Title banner ----------------------------------------------------------- */

.ifc-article-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding-block: 36px 34px;
  background: var(--ifc-ink);
  color: var(--ifc-paper);
}

/* Existing dark Maple Fold artwork on a right-edge layer, behind the text. */
.ifc-article-hero__folds {
  position: absolute;
  z-index: 0;
  inset-block: 0;
  inset-inline-end: 0;
  width: clamp(220px, 45vw, 680px);
  background-image: url("../brand/backgrounds/fold-hero-dark.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
  opacity: .35;
  pointer-events: none;
}

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

/* The title is the first thing in the banner — no overline above it. */
.ifc-scope .ifc-article-hero__title {
  max-width: 940px;
  margin: 0;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);   /* 28 → 48 px */
  line-height: 1.12;
  letter-spacing: -.02em;
  text-wrap: balance;
  overflow-wrap: break-word;
  color: var(--ifc-surface);
}

.ifc-scope .ifc-article-hero__lead {
  max-width: 680px;
  margin: 14px 0 0;
  font-size: clamp(1rem, .95rem + .35vw, 1.1875rem);
  line-height: 1.6;
  color: var(--ifc-text-dim);
}

.ifc-scope .ifc-article-hero__meta {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0;
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--ifc-paper-soft);
}

.ifc-article-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-inline-end: 16px;
  margin-inline-end: 16px;
  border-inline-end: 1px solid var(--ifc-white-a35);
}

.ifc-article-hero__meta-item:last-child {
  padding-inline-end: 0;
  margin-inline-end: 0;
  border-inline-end: 0;
}

.ifc-scope .ifc-article-hero__meta-icon {
  width: 20px;
  height: 20px;
  color: var(--ifc-paper-soft);
}

.ifc-scope .ifc-article-hero__meta a {
  color: var(--ifc-surface);
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

/* B. Breadcrumbs -------------------------------------------------------------- */

.ifc-article-breadcrumbs {
  padding-block: 16px 4px;
  background: var(--ifc-paper);
}

.ifc-scope .ifc-article-breadcrumbs__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--ifc-muted);
}

.ifc-article-breadcrumbs__item + .ifc-article-breadcrumbs__item::before {
  content: "/";
  content: "/" / "";
  margin-inline: 8px;
  color: var(--ifc-line-strong);
}

.ifc-scope .ifc-article-breadcrumbs__item a {
  color: var(--ifc-ink-soft);
  text-decoration: none;
}

@media (hover: hover) {
  .ifc-scope .ifc-article-breadcrumbs__item a:hover {
    color: var(--ifc-action);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

.ifc-scope .ifc-article-breadcrumbs__item a:focus-visible {
  outline: 2px solid var(--ifc-action);
  outline-offset: 2px;
  border-radius: 2px;
}

.ifc-article-breadcrumbs__item [aria-current="page"] {
  color: var(--ifc-muted);
}

/* B2. Featured image (blog Posts) --------------------------------------------
   Printed once between the breadcrumbs and the article, in the same reading
   measure as the body copy. WordPress supplies srcset/sizes and the intrinsic
   width/height, so the aspect ratio holds and nothing shifts as it loads. */

/* Featured image: a figure inside the reading column, placed after the
   overview text (inc/article.php ifc_article_insert_featured_image()). It
   takes the prose rhythm from .ifc-prose > * + * and the column's width. */
.ifc-prose .ifc-article-featured {
  width: 100%;
  margin-inline: 0;
}

.ifc-prose .ifc-article-featured :where(img) {
  display: block;
  width: 100%;
  height: auto;                        /* never crops, never distorts */
  border-radius: var(--ifc-radius-sm, 8px);
}

.ifc-prose .ifc-article-featured__caption {
  margin-block-start: 10px;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--ifc-muted);
}

/* C. Reading area ---------------------------------------------------------- */

.ifc-article-body {
  padding-block: 20px 56px;
}

.ifc-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.ifc-article {
  width: 100%;
  max-width: 780px;
  min-width: 0;
  margin-inline: auto;
}

.ifc-article__pages {
  margin-block-start: 32px;
  font-weight: 600;
}

/* Panels (contents, help). */
.ifc-article-panel {
  padding: 20px;
  border: 1px solid var(--ifc-line);
  border-radius: 10px;
  background: var(--ifc-surface);
}

.ifc-scope .ifc-article-panel__title {
  margin: 0;
  font-weight: 600;
  font-size: 1.0625rem;              /* 17 px */
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--ifc-ink);
}

/* Contents list: one structure for the sidebar, the drawer and the
   no-JavaScript fallback. Sizes are tuned per context further below. */
.ifc-scope .ifc-toc__list,
.ifc-scope .ifc-toc__sublist {
  margin: 0;
  padding: 0;
  list-style: none;                    /* headings carry their own numbers */
}

.ifc-toc__row {
  display: flex;
  align-items: stretch;
}

.ifc-scope .ifc-toc__link {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px 8px 13px;
  border-inline-start: 3px solid transparent;
  font-family: var(--ifc-font);
  font-size: .875rem;                  /* 14 px */
  line-height: 1.5;
  color: var(--ifc-ink-soft);
  text-decoration: none;
  overflow-wrap: break-word;           /* long headings wrap, never truncate */
}

@media (hover: hover) {
  .ifc-scope .ifc-toc__link:hover {
    color: var(--ifc-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

.ifc-scope .ifc-toc__link[aria-current="location"] {
  border-inline-start-color: var(--ifc-action);
  background: var(--ifc-blush);
  border-start-end-radius: 6px;
  border-end-end-radius: 6px;
  font-weight: 600;
  color: var(--ifc-action);
}

.ifc-scope .ifc-toc__link:focus-visible {
  outline: 2px solid var(--ifc-action);
  outline-offset: -2px;
  border-radius: 4px;
}

/* Subsections: indented under their parent with a restrained guide line.
   Scoped like the list reset above so the indent is not reset away. */
.ifc-scope .ifc-toc__sublist {
  margin-inline-start: 16px;
  border-inline-start: 1px solid var(--ifc-line);
}

.ifc-scope .ifc-toc__link--sub {
  padding-block: 7px;
  font-size: .8125rem;
  color: var(--ifc-muted);
}

.ifc-toc__item[data-open="false"] > .ifc-toc__sublist {
  display: none;
}

.ifc-toc__toggle {
  flex: none;
  width: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ifc-muted);
  cursor: pointer;
}

.ifc-toc__toggle-icon {
  width: 16px;
  height: 16px;
  transform: rotate(90deg);
  transition: transform 180ms ease;
}

.ifc-toc__toggle[aria-expanded="true"] .ifc-toc__toggle-icon {
  transform: rotate(-90deg);
}

.ifc-toc__toggle:focus-visible {
  outline: 2px solid var(--ifc-action);
  outline-offset: -2px;
  border-radius: 4px;
}

/* Help panel. */
.ifc-scope .ifc-article-help__text {
  margin: 8px 0 0;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--ifc-muted);
}

.ifc-scope .ifc-article-help__button {
  --ifc-button-height: 46px;
  --ifc-button-size: .9375rem;
  display: flex;
  width: 100%;
  margin-block-start: 16px;
}

/* Mobile contents, no-JavaScript fallback: native disclosure above the
   article. article.js adds .ifc-toc-enhanced to <body>, which swaps this for
   the slide-out drawer, so only one copy is ever reachable. */
.ifc-toc-enhanced .ifc-article-toc-mobile {
  display: none;
}

.ifc-article-toc-mobile {
  border: 1px solid var(--ifc-line);
  border-radius: 10px;
  background: var(--ifc-surface);
}

.ifc-article-toc-mobile__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 12px 16px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ifc-ink);
  cursor: pointer;
  list-style: none;
}

.ifc-article-toc-mobile__summary::-webkit-details-marker {
  display: none;
}

.ifc-article-toc-mobile__summary::after {
  content: "";
  width: 9px;
  height: 9px;
  border-inline-end: 2px solid var(--ifc-ink-soft);
  border-block-end: 2px solid var(--ifc-ink-soft);
  transform: rotate(45deg) translate(-2px, -2px);
}

.ifc-article-toc-mobile[open] .ifc-article-toc-mobile__summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.ifc-article-toc-mobile__summary:focus-visible {
  outline: 3px solid var(--ifc-action);
  outline-offset: 2px;
  border-radius: 10px;
}

.ifc-article-toc--mobile {
  padding: 0 16px 14px;
}

.ifc-article-toc--desktop {
  display: none;
}

/* Mobile contents drawer (enhanced): arrow tab at the right edge, white
   drawer sliding in beneath the header. Desktop keeps the sticky sidebar and
   hides all of this; the Installation Guides viewer never renders it. */
.ifc-toc-drawer {
  --ifc-toc-drawer-w: min(340px, calc(100vw - 56px));
  --ifc-toc-tab-h: 48px;
  --ifc-toc-top: calc(var(--ifc-header-h, 0px) + var(--ifc-header-top, 0px));
  --ifc-toc-tab-top: calc(var(--ifc-toc-top) + (100vh - var(--ifc-toc-top)) * .28);

  display: none;
}

@supports (height: 100svh) {
  .ifc-toc-drawer {
    --ifc-toc-tab-top: calc(var(--ifc-toc-top) + (100svh - var(--ifc-toc-top)) * .28);
  }
}

/* The script sets data-narrow, so each place that uses the drawer picks its
   own breakpoint (articles below 1200 px, the guide viewer below 1280 px). */
.ifc-toc-enhanced .ifc-toc-drawer[data-narrow="true"] {
  display: block;
}

/* The closed tab sits over the gutter; the article keeps clear of it. */
.ifc-toc-enhanced .ifc-article {
  padding-inline-end: 32px;
}

/* Lock the background without moving it (scroll position is untouched). */
.ifc-toc-lock,
.ifc-toc-lock body {
  overflow: hidden;
}

.ifc-toc-drawer__overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(var(--ifc-ink-rgb), .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}

.ifc-toc-drawer[data-open="true"] .ifc-toc-drawer__overlay {
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms ease, visibility 0s;
}

.ifc-toc-drawer__panel {
  position: fixed;
  inset-block: var(--ifc-toc-top) 0;
  inset-inline-end: 0;
  z-index: 1105;
  display: flex;
  flex-direction: column;
  width: var(--ifc-toc-drawer-w);
  background: var(--ifc-surface);
  box-shadow: var(--ifc-shadow-raised);
  transform: translateX(100%);
  visibility: hidden;                 /* keeps the links out of tab order */
  /* Visible at once when opening (focus lands immediately), hidden only once
     the panel has slid away. */
  transition: transform 200ms ease, visibility 0s linear 200ms;
}

.ifc-toc-drawer[data-open="true"] .ifc-toc-drawer__panel {
  transform: translateX(0);
  visibility: visible;
  transition: transform 200ms ease, visibility 0s;
}

.ifc-toc-drawer__panel:focus-visible {
  outline: 3px solid var(--ifc-action);
  outline-offset: -3px;
}

/* Header stays put; the list below it scrolls on its own. */
.ifc-toc-drawer__head {
  flex: none;
  padding: 18px 20px 14px;
  border-block-end: 1px solid var(--ifc-line);
}

.ifc-scope .ifc-toc-drawer__title {
  margin: 0;
  font-family: var(--ifc-font);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--ifc-ink);
}

.ifc-toc-drawer__hint {
  margin: 4px 0 0;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--ifc-muted);
}

.ifc-toc-drawer__nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-block-end: calc(28px + env(safe-area-inset-bottom, 0px));
}

/* Drawer sizing: bigger type and touch targets than the sidebar. */
.ifc-toc-drawer__nav .ifc-toc__list > .ifc-toc__item + .ifc-toc__item {
  border-block-start: 1px solid var(--ifc-line);
}

.ifc-scope .ifc-toc-drawer__nav .ifc-toc__link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 11px 10px 11px 17px;
  font-size: .9375rem;                /* 15 px */
  line-height: 1.45;
  color: var(--ifc-ink);
}

.ifc-scope .ifc-toc-drawer__nav .ifc-toc__link--sub {
  min-height: 44px;
  padding-block: 9px;
  padding-inline-start: 14px;
  font-size: .875rem;
  color: var(--ifc-ink-soft);
}

.ifc-scope .ifc-toc-drawer__nav .ifc-toc__link[aria-current="location"] {
  border-radius: 0;
  color: var(--ifc-action);          /* the colour rules above set the base */
}

.ifc-scope .ifc-toc-drawer__nav .ifc-toc__link:focus-visible {
  outline: 3px solid var(--ifc-action);
  outline-offset: -3px;
  border-radius: 0;
}

.ifc-scope .ifc-toc-drawer__nav .ifc-toc__sublist {
  margin-inline-start: 30px;
}

.ifc-toc-drawer__nav .ifc-toc__toggle {
  width: 48px;
  min-height: 48px;
}

.ifc-toc-drawer__nav .ifc-toc__toggle-icon {
  width: 18px;
  height: 18px;
}

.ifc-toc-drawer__nav .ifc-toc__toggle:focus-visible {
  outline: 3px solid var(--ifc-action);
  outline-offset: -3px;
}

/* Arrow tab: charcoal, rounded on the left, chevron only. */
.ifc-toc-drawer__tab {
  position: fixed;
  inset-inline-end: 0;
  inset-block-start: var(--ifc-toc-tab-top);
  z-index: 1110;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: var(--ifc-toc-tab-h);
  padding: 0;
  border: 0;
  border-radius: 12px 0 0 12px;        /* rounded on the left only */
  background: var(--ifc-ink);
  color: #fff;
  cursor: pointer;
  transition: transform 200ms ease;
}

/* Only while the article body is on screen. */
.ifc-toc-drawer[data-visible="true"] .ifc-toc-drawer__tab,
.ifc-toc-drawer[data-open="true"] .ifc-toc-drawer__tab {
  display: flex;
}

.ifc-toc-drawer[data-open="true"] .ifc-toc-drawer__tab {
  transform: translateX(calc(-1 * var(--ifc-toc-drawer-w)));
}

.ifc-toc-drawer__tab:focus-visible {
  outline: 3px solid var(--ifc-action);
  outline-offset: 2px;
}

.ifc-toc-drawer__tab-icon {
  width: 20px;
  height: 20px;
}

.ifc-toc-drawer__tab[aria-expanded="false"] .ifc-toc-drawer__tab-icon--close,
.ifc-toc-drawer__tab[aria-expanded="true"] .ifc-toc-drawer__tab-icon--open {
  display: none;
}

.ifc-article-sidebar {
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
}

.ifc-article-sidebar__sticky {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Desktop: article + sidebar. Below this width there is no room for a
   740 px+ reading column next to a 320 px panel, so the mobile drawer takes
   over (article.js uses the same breakpoint). */
@media (min-width: 1200px) {
  .ifc-article-hero {
    padding-block: 52px 48px;
  }

  .ifc-article-body {
    padding-block: 28px 80px;
  }

  .ifc-article-layout--sidebar {
    grid-template-columns: minmax(0, 780px) 320px;
    justify-content: center;
    align-items: start;
    column-gap: 48px;
  }

  .ifc-article-layout--sidebar .ifc-article {
    margin-inline: 0;
  }

  .ifc-article-toc-mobile {
    display: none;
  }

  .ifc-toc-enhanced .ifc-article {
    padding-inline-end: 0;
  }

  .ifc-article-toc--desktop {
    display: block;
  }

  .ifc-article-sidebar {
    align-self: stretch;                 /* full article height: sticky range */
    max-width: none;
    margin-inline: 0;
  }

  /* Sits below the sticky header (and admin bar) with 20 px clearance top
     and bottom. The column itself never scrolls: only the contents list
     inside the panel does, so the scrollbar stays within the white panel and
     there is no nested scroll container. */
  .ifc-article-sidebar__sticky {
    position: sticky;
    top: calc(var(--ifc-header-h, 0px) + var(--ifc-header-top, 0px) + 20px);
    max-height: calc(100vh - var(--ifc-header-h, 0px) - var(--ifc-header-top, 0px) - 40px);
    overflow: visible;
  }

  /* Contents panel: white card that grows with its content and stops at the
     height available on screen. A slim red rule across the top ties it to the
     brand without a shadow or a heavier frame. */
  .ifc-article-toc--desktop {
    position: relative;
    display: flex;
    flex: 0 1 auto;                    /* natural height, capped by the column */
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    padding: 20px;
    border-radius: 12px;
    box-shadow: none;
    overflow: hidden;                  /* keeps the accent inside the radius */
  }

  .ifc-article-toc--desktop::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background: var(--ifc-action);
  }

  .ifc-article-toc__head {
    flex: none;
    padding-block-end: 12px;
    border-block-end: 1px solid var(--ifc-line);
  }

  .ifc-article-toc__hint {
    margin: 3px 0 0;
    font-size: .8125rem;               /* 13 px */
    line-height: 1.4;
    color: var(--ifc-muted);
  }

  .ifc-article-toc__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-block-start: 10px;
    margin-inline-end: -8px;           /* scrollbar sits inside the padding */
    padding-inline-end: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--ifc-line-strong) transparent;
  }

  .ifc-article-toc__scroll::-webkit-scrollbar {
    width: 8px;
  }

  .ifc-article-toc__scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--ifc-line-strong);
  }

  .ifc-article-toc__scroll::-webkit-scrollbar-track {
    background: transparent;
  }
}

/* D. Sidebar help card icon --------------------------------------------------- */

.ifc-scope .ifc-article-help__icon {
  width: 20px;
  height: 20px;
}