/* ================================================
   EU Wildlife Trade Reference Guide
   EC-branded stylesheet (Europa Component Library tokens)
   ================================================ */

/* Inter @font-face is NOT re-declared here -- ecl-ec.css already declares it
   (normal + italic, weight 100-900), with a local fallback at ../fonts/
   pointing at the same physical files we vendor. A second, duplicate
   declaration here created two independent FontFace objects for the exact
   same family/weight/style; as each resolved at a slightly different time,
   the browser would repaint using whichever one currently "won" the match,
   producing a visible flash between the two on every page load. */

:root {
  --green:        #0046ff;   /* EC primary-600 */
  --dark-green:   #0035bf;   /* EC primary-700, hover state */
  --black:        #00002e;   /* EC brand navy (grey-950) */
  --text:         #00002e;
  --secondary:    #696984;   /* EC grey-600 */
  --border:       #d4d4dc;   /* EC grey-200 */
  --light-grey:   #f6f6f8;   /* EC grey-50 */
  --mid-grey:     #ededf0;   /* EC grey-75 */
  --white:        #ffffff;
  --focus:        #ffce00;   /* EC yellow-gold-500 */
  --visited:      #66439a;   /* EC purple-700 */
  --radius:       4px;       /* EC border-radius 's' */
  --shadow-1:     0 0 0.5px 0.5px rgba(24,39,75,.08), 0 6px 12px 0 rgba(24,39,75,.08);
  --shadow-2:     0 0 0.5px 0.5px rgba(24,39,75,.08), 0 10px 22px 0 rgba(24,39,75,.1);
  --icon-bg:      #d9e3ff;   /* EC primary-200, teardrop icon badge background */
  --max-width:    1368px;   /* measured from food.ec.europa.eu .ecl-container */
  --gutter:       32px;     /* measured container side padding */
  --font:         "Inter", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; overflow-x: clip; }

body {
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.5556;
  color: var(--text);
  background: var(--white);
  margin: 0;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* -- Skip link ---------------------------------------- */
.skip-link {
  position: absolute; left: -999em; top: 0; z-index: 9999;
  padding: 8px 14px; background: var(--focus); color: var(--black);
  font-weight: 700; text-decoration: none;
}
.skip-link:focus-visible { left: 0; }

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

/* -- Container ---------------------------------------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
/* A .container nested inside another .container shouldn't double the width cap/padding. */
.container .container { max-width: none; padding: 0; }

/* -- Links -------------------------------------------- */
a                { color: var(--green); }
a:hover          { color: var(--dark-green); }
a:visited        { color: var(--visited); }
a:visited:hover  { color: var(--dark-green); }
a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 1px;
}

/* -- Page header (ECL page-header component) ---------- */
.page-header { background: var(--white); }
.page-header + .main-content { padding-top: 28px; }
.page-header__meta {
  list-style: none; margin: 8px 0 0; padding: 0;
}
.ecl-page-header__title { padding-top: 20px; margin: 0; }
.page-header__meta-item {
  display: inline;
  font-size: .8125rem; color: var(--secondary);
}
.page-header__meta-item:first-child {
  display: block; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--secondary); margin-bottom: 2px;
}

/* -- Main wrapper ------------------------------------- */
/* overflow-wrap: long unbroken URLs in the text (Annex XII's references, the
   About page's footnotes) otherwise run past the right edge on phones, where
   html/body's overflow-x: clip silently cuts them off. */
.main-content { padding: 30px 0 70px; overflow-wrap: break-word; }

/* -- Article area ------------------------------------- */
.article { flex: 1 1 auto; min-width: 0; }

/* -- Small list (Table 12 footnotes) ------------------ */
.small-list, .small-list li { font-size: 0.8rem; }

/* -- Typography --------------------------------------- */
h1 { font-size: 4rem;     font-weight: 600; line-height: 1;    margin: 0; }
h2 {
  font-size: 2.75rem;  font-weight: 600; line-height: 1.09;
  margin: 40px 0 16px; padding-top: 12px; border-top: 1px solid var(--border);
}
.article-body > h2:first-child, .article-body > h3:first-child {
  padding-top: 0; border-top: none;
}
h3 { font-size: 1.75rem;  font-weight: 600; line-height: 1.14; margin: 32px 0 16px; }
h4 { font-size: 1.375rem; font-weight: 600; line-height: 1.3;  margin: 26px 0 14px; }
p  { margin: 0 0 18px; }

ul, ol { margin: 0 0 18px 1.5em; }
li { margin-bottom: 5px; }
li > ul, li > ol { margin-top: 5px; margin-bottom: 5px; }

blockquote {
  margin: 20px 0; padding: 12px 20px;
  border-left: 5px solid var(--border); color: var(--secondary);
}
code {
  font-family: "Courier New", Courier, monospace;
  font-size: .875em; background: var(--light-grey); padding: 2px 5px;
}
pre {
  background: var(--light-grey); padding: 16px; overflow-x: auto;
  margin: 0 0 20px; font-size: .875rem;
}
pre code { background: none; padding: 0; }

/* -- Tables ------------------------------------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 20px 0 30px; }
.table-label {
  font-weight: bold; font-style: normal; font-size: 0.9rem; margin-bottom: 0.25rem;
}
.article table, .article-body table {
  border-collapse: collapse; width: 100%;
  table-layout: fixed; font-size: 0.85rem;
}
.article table th, .article-body table th {
  background: var(--black); color: var(--white); padding: 10px 14px;
  text-align: left; font-weight: normal; font-style: normal; border: 1px solid #333;
  overflow-wrap: break-word; word-wrap: break-word;
}
.article table td, .article-body table td {
  padding: 9px 14px; border: 1px solid var(--border); vertical-align: top;
  overflow-wrap: break-word; word-wrap: break-word;
}
.article table tr:nth-child(even) td, .article-body table tr:nth-child(even) td { background: var(--light-grey); }
.article table tr:hover td, .article-body table tr:hover td { background: var(--mid-grey); }
.table-subheader {
  background: #f3f2f1; font-weight: 700; text-align: left; padding: 6px 8px;
}
/* .table-subheader also lands on <th> in a couple of hand-authored tables
   (a second "column label" header row under a spanning title row) -- needs
   its own selector since .article table th's black background otherwise
   outranks the plain .table-subheader rule above on specificity. */
.article table th.table-subheader, .article-body table th.table-subheader {
  background: #f3f2f1; color: var(--black); font-weight: 700;
}
table caption {
  caption-side: bottom; font-size: 0.8rem; color: #505a5f;
  text-align: left; padding-top: 0.4rem; font-style: normal;
}
/* Second-level numbered items are (i), (ii), ... in the source (Annex XII). */
.article ol ol, .article-body ol ol { list-style-type: lower-roman; }
/* Annex tables rebuilt from the Word source (fix_annex_tables.py) keep a
   cell's separate paragraphs and in-cell bullet lists. */
.article table td p, .article-body table td p { margin: 0 0 0.5em; }
.article table td ul, .article-body table td ul { margin: 0 0 0.5em; padding-left: 1.2em; }
.article table td li, .article-body table td li { margin-bottom: 0.25em; }
.article table td > :last-child, .article-body table td > :last-child { margin-bottom: 0; }
.article table td.cell-center, .article-body table td.cell-center { text-align: center; }
/* Footnote markers in header cells: the default link blue is unreadable on
   the dark header background. */
.article table th a, .article-body table th a { color: inherit; }
/* Many-column/long-reference tables: scroll inside .table-wrap on narrow
   screens rather than crushing columns until words break mid-word. */
.article table.table--wide, .article-body table.table--wide { min-width: 720px; }
/* Annex VII: its Order column must fit "ARHYNCHOBDELLIDA" on one line. */
.article table.table--xwide, .article-body table.table--xwide { min-width: 920px; }

/* -- Section meta line -------------------------------- */
.chapter-meta {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  font-size: .875rem; color: var(--secondary); margin-bottom: 24px;
}
.badge {
  display: inline-block; padding: 2px 8px; background: var(--green);
  color: var(--white); font-size: .75rem; font-weight: 700; border-radius: var(--radius);
}

/* -- Prev / Next nav ---------------------------------- */
.chapter-nav {
  display: flex; justify-content: space-between; gap: 20px;
  margin: 50px 0 20px; padding-top: 20px; border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.chapter-nav a {
  display: flex; flex-direction: column; max-width: 46%;
  color: var(--green); text-decoration: none;
}
.chapter-nav a:hover .chapter-nav__title { text-decoration: underline; }
.chapter-nav__label { font-size: .8125rem; color: var(--secondary); margin-bottom: 2px; }
.chapter-nav__title { font-weight: 700; font-size: .9375rem; line-height: 1.3; }
.chapter-nav__next  { text-align: right; margin-left: auto; }

/* -- Back to top -------------------------------------- */
.back-to-top {
  display: block; text-align: right; font-size: .875rem;
  margin-top: 10px; color: var(--green);
}

/* -- Homepage hero ------------------------------------ */
/* The hero is rendered outside the width-capped .container (base_html's
   hero_html) so it can span the page. It used to bleed out of the container
   with width: 100vw, but 100vw includes the vertical scrollbar on Windows,
   which shifted the hero text half a scrollbar left of the header, the
   section headings and the footer. */
.main-content:has(.hero) { padding-top: 0; }
.hero {
  background-color: var(--black);
  background-image: url("images/hero-elephants-line.jpg");
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--border);
  padding: 72px 0;
  color: var(--white);
}
.hero .container {
  text-align: left; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter);
}
.hero h1 { margin-bottom: 12px; font-size: 3.25rem; max-width: 820px; color: var(--white); }
.hero__lead {
  font-size: 1.25rem; max-width: 600px; line-height: 1.6; margin-bottom: 24px;
  color: var(--white);
}

/* -- Homepage search (EC Component Library search-form pattern) ---- */
.search-form {
  display: flex; align-items: stretch; max-width: 580px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--white); overflow: hidden;
}
.search-form input[type="search"] {
  flex: 1; padding: 12px 16px; font: inherit; font-size: 1rem;
  border: none; color: var(--black); background: transparent;
}
.search-form input[type="search"]:focus { outline: 3px solid var(--focus); outline-offset: -3px; }
.search-form button {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 0 16px; background: transparent; color: var(--black);
  border: none; cursor: pointer;
}
.search-form button::before {
  content: ""; position: absolute; left: 0; top: 25%; bottom: 25%; width: 1px;
  background: var(--border);
}
.search-form button svg { width: 18px; height: 18px; flex-shrink: 0; }
.search-form button:hover { color: var(--green); }
.search-form button:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }

/* -- Hero search: amber CTA button variant ------------ */
.hero .search-form { border: none; background: none; gap: 8px; }
.hero .search-form input[type="search"] {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--white);
}
.hero .search-form button {
  border-radius: var(--radius); background: #fea439; color: var(--black);
}
.hero .search-form button::before { display: none; }
.hero .search-form button:hover { background: #fc8713; color: var(--black); }
.hero__download { margin: 16px 0 0; font-size: 1rem; color: var(--white); }
.hero__download a { color: var(--white); text-decoration: underline; }
.hero__download a:hover { color: #fea439; }
.hero__download a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* -- Whole-guide PDF links ----------------------------- */
.home-download { margin-top: 1rem; }
.home-download__icon { width: 2.5rem; height: 2.5rem; }
.mega-menu-pdf-link { margin-top: var(--s-m); }

/* Legacy card design -- the active design (ECL_CARDS=False, reverted per user
   feedback: the ECL card's fonts/sizing/spacing didn't work as well as this
   design). Kept switchable via ECL_CARDS. The border-bottom below is the one detail kept from the
   ECL card design at the user's request. Do not delete this block even if
   ECL_CARDS is flipped back to True later. */
/* -- Section card grid -------------------------------- */
.chapter-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; margin-top: 30px;
}
.chapter-card {
  display: flex; flex-direction: column;
  position: relative;
  background: var(--white); border: none; border-bottom: 4px solid #5987ff; /* ECL primary-500, kept from the ECL card design */
  border-radius: var(--radius); padding: 20px;
  box-shadow: var(--shadow-1);
  text-decoration: none; color: inherit;
  transition: box-shadow .15s;
}
.chapter-card:hover {
  box-shadow: var(--shadow-2);
  text-decoration: none;
}
.chapter-card:visited { color: inherit; }

/* Teardrop icon badge (EC "navigation list -- illustration" pattern) */
.chapter-card__head { display: flow-root; }
.chapter-card__icon {
  float: right;
  margin: -12px -12px 8px 12px;
  width: 64px; height: 64px;
  border-radius: 100px 0 100px 100px;
  background: var(--icon-bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--green);
  shape-outside: margin-box;
}
.chapter-card__icon svg { width: 32px; height: 32px; }

.chapter-card__num {
  font-size: .75rem; color: var(--secondary);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px;
}
.chapter-card__title {
  font-size: 22px; font-weight: 400; color: var(--green);
  margin-bottom: 8px; line-height: 1.3;
}
.chapter-card:hover .chapter-card__title { color: var(--dark-green); text-decoration: underline; }
.chapter-card__summary {
  font-size: 18px; color: #00002E; flex-grow: 1;
  margin-bottom: 12px; line-height: 1.45;
}
.chapter-card__foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: .8125rem; color: var(--secondary);
  padding-top: 10px; border-top: 1px solid var(--light-grey); margin-top: auto;
}

/* -- Sub-page card grid (parent landing pages) -------- */
.subpage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; margin-top: 24px;
}
.subpage-card {
  display: flex; flex-direction: column;
  background: var(--white); border: none; border-bottom: 4px solid #5987ff; /* ECL primary-500, kept from the ECL card design */
  border-radius: var(--radius); padding: 20px;
  box-shadow: var(--shadow-1);
  text-decoration: none; color: inherit;
  transition: box-shadow .15s;
}
.subpage-card:hover {
  box-shadow: var(--shadow-2);
}
.subpage-card:visited { color: inherit; }
.subpage-card__title {
  font-size: 22px; font-weight: 400; color: var(--green);
  margin-bottom: 8px; line-height: 1.3;
}
.subpage-card:hover .subpage-card__title { color: var(--dark-green); text-decoration: underline; }
.subpage-card__num {
  font-size: .75rem; color: var(--secondary);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px;
}
.subpage-card__excerpt {
  font-size: 18px; color: #00002E; line-height: 1.45;
}

/* -- Search results ----------------------------------- */
.search-header { margin-bottom: 24px; }
.search-header h1 { margin-bottom: 6px; }
.search-tips { font-size: .875rem; color: var(--secondary); margin: 0 0 8px; }
.search-count { font-size: .9375rem; color: var(--secondary); }
.search-results-list { list-style: none; margin: 0; padding: 0; }
.search-result { border-bottom: 1px solid var(--border); padding: 20px 0; margin: 0; }
.search-result:first-child { border-top: 1px solid var(--border); }
.search-result__title {
  font-size: 1.1875rem; line-height: 1.4; font-weight: 700;
  margin: 0 0 4px; padding-top: 0; border-top: none;   /* override the global h2 rule */
}
.search-result__title a { color: var(--green); }
.search-result__meta { font-size: .875rem; color: var(--secondary); margin-bottom: 4px; }
.search-result__snippet { font-size: .9375rem; margin: 4px 0 0; }
#search-results mark { background: var(--focus); color: var(--black); padding: 0 2px; }
.search-result__sections {
  list-style: none; margin: 12px 0 0; padding: 0 0 0 16px;
  border-left: 3px solid var(--border);
}
.search-result__section { margin: 0 0 12px; }
.search-result__section:last-child { margin-bottom: 0; }
.search-result__section > a { font-size: 1rem; font-weight: 600; color: var(--green); }
.search-result__context { font-size: .875rem; color: var(--secondary); }
.search-notice {
  background: var(--light-grey); border-left: 4px solid var(--focus);
  padding: 12px 16px; margin-bottom: 16px; font-size: .9375rem;
}
.search-notice p { margin: 0; }
.search-notice p + p { margin-top: 4px; }
.search-examples { margin-top: 8px; }
.search-examples p { font-size: .9375rem; color: var(--secondary); margin: 0 0 8px; }
.search-examples ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.search-examples a {
  display: inline-block; padding: 4px 14px; font-size: .9375rem;
  border: 1px solid var(--border); border-radius: 16px; color: var(--green); text-decoration: none;
}
.search-examples a:hover { border-color: var(--green); text-decoration: underline; }
.no-results { padding: 40px 0; text-align: center; color: var(--secondary); }

/* -- Search suggestions under the header / homepage boxes (search.js initSuggest) -- */
/* The ECL header form is already positioned (relative on desktop, absolute in
   its mobile pop-up) -- overriding that breaks the pop-up. */
.has-search-suggest:not(.ecl-search-form) { position: relative; }
/* .search-form clips its children to its rounded border; the list must escape it. */
.search-form.has-search-suggest { overflow: visible; }
.search-suggest {
  position: absolute; top: 100%; right: 0; z-index: 1000;
  width: max(100%, 400px); max-width: calc(100vw - 32px); max-height: 70vh; overflow-y: auto;
  margin: 4px 0 0; padding: 4px 0; list-style: none; text-align: left;
  background: var(--white); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}
.search-suggest[hidden] { display: none; }
.hero .search-suggest { left: 0; right: auto; width: 100%; }
.search-suggest__option { margin: 0; padding: 8px 16px; cursor: pointer; font-size: .9375rem; line-height: 1.4; }
.search-suggest__option[aria-selected="true"], .search-suggest__option:hover { background: var(--mid-grey); }
.search-suggest__title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-weight: 600; color: var(--green);
}
.search-suggest__context {
  display: block; font-size: .8125rem; color: var(--secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-suggest mark { background: none; color: inherit; font-weight: 800; padding: 0; }
.search-suggest__all { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 10px; color: var(--green); }

/* -- Search-term highlights on chapter pages (main.js initSearchHighlight) -- */
mark.search-hl { background: #fff0a8; color: inherit; padding: 0 1px; border-radius: 2px; }
mark.search-hl--current { background: var(--focus); outline: 2px solid var(--black); outline-offset: 1px; }
.search-hl-bar {
  position: fixed; left: 24px; bottom: 24px; z-index: 9990;
  display: flex; align-items: center; gap: 4px;
  padding: 6px 6px 6px 16px; border-radius: 24px;
  background: var(--black); color: var(--white);
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
  font-size: .875rem;
}
.search-hl-bar__count { margin-right: 6px; white-space: nowrap; }
.search-hl-bar button {
  font: inherit; color: var(--white); background: transparent; cursor: pointer;
  border: 1px solid rgba(255,255,255,.4); border-radius: 18px;
  min-width: 36px; height: 36px; padding: 0 12px; white-space: nowrap;
}
.search-hl-bar__step { font-size: 1.25rem; line-height: 1; padding: 0 !important; }
.search-hl-bar button:hover { background: rgba(255,255,255,.12); }
.search-hl-bar button:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
@media (max-width: 600px) {
  .search-hl-bar { left: 16px; right: 16px; justify-content: flex-end; }
  .search-hl-bar__count { margin-right: auto; }
}
@media print { .search-hl-bar { display: none; } mark.search-hl { background: none; } }

/* -- Footnotes ---------------------------------------- */
sup.footnote-ref {
  font-size: 0.65rem; vertical-align: super; line-height: 0;
}
sup.footnote-ref a { color: var(--green); text-decoration: none; }
sup.footnote-ref a:hover { text-decoration: underline; }
.footnotes {
  border-top: 1px solid var(--border);
  margin-top: 40px; padding-top: 16px;
  font-size: 0.8rem; color: var(--secondary);
}
.footnotes hr { display: none; }
.footnotes ol { margin-left: 1.25em; }
.footnotes li { margin-bottom: 4px; line-height: 1.5; }
.footnotes a { color: var(--secondary); }

/* -- Figures ------------------------------------------ */
.figure-block {
  margin: 14px auto 18px;
  text-align: center;
}
.figure-block img {
  max-width: 100%; height: auto;
  display: block; margin: 0 auto;
  border: none;
}
.figure-block figcaption {
  margin-top: 10px;
  font-size: 0.875rem; font-style: italic;
  color: var(--secondary); text-align: center;
}

/* -- Summary of key instructions (small print) -------- */
.summary-smallprint { font-size: 0.8rem; color: #505a5f; }
.summary-smallprint p { margin-top: 6px; }
.summary-smallprint strong { color: #505a5f; font-weight: 600; }
.summary-smallprint ol { margin-top: 6px; }
.summary-smallprint li { margin-bottom: 2px; }

/* -- Context box (Annex XII "CONTEXT" call-outs) ------- */
.context-box {
  margin: 20px 0; padding: 16px 20px;
  background: var(--light-grey); border: 1px solid var(--border); border-radius: var(--radius);
}
.context-box__label {
  font-weight: 700; text-transform: uppercase; font-size: .75rem;
  letter-spacing: .05em; color: var(--secondary); margin-bottom: 8px;
}
.context-box p:last-child { margin-bottom: 0; }

/* -- Footnote expand button --------------------------- */
.footnotes-overflow { list-style: decimal; }
.footnotes-show-more {
  display: inline-block; margin-top: 6px;
  background: none; border: none; padding: 0;
  color: var(--green); font-size: 0.8rem; cursor: pointer;
  text-decoration: underline; font-family: var(--font);
}
.footnotes-show-more:hover { color: var(--dark-green); }

/* -- Lettered lists ----------------------------------- */
ol.lettered-list {
  list-style-type: lower-alpha;
  margin: 0 0 18px 1.5em;
}
ol.lettered-list li { margin-bottom: 6px; }

/* -- Footer ------------------------------------------- */
.footer-smallprint {
  font-size: 0.875rem; color: #9eaee1;
  margin: 16px 0 0; line-height: 1.5;
}

/* -- Homepage section dividers ------------------------ */
.home-sections > hr { margin: 2rem 0; border: none; border-top: 1px solid var(--border); }

/* -- ECL overrides -------------------------------------
   Targeted fixes for gaps in vendored ECL v5.1.0 (spec section 5:
   "add targeted overrides in a small ecl-overrides block only where
   something demonstrably breaks").

   Vendored ECL v5.1.0's own stylesheet sets .ecl-inpage-navigation to
   display: none by default below 996px, only switching it to
   display: block once ECL's own IntersectionObserver adds an
   --visible class as the reader scrolls -- and that class never gets
   a chance to fire from a cold load, so in practice the nav (and its
   __trigger button inside it, which needs the same --visible class
   plus display:flex to appear) is unreachable below 996px: not before
   scrolling, not after, not ever. Confirmed directly against
   docs/assets/ecl/styles/ecl-ec.css: .ecl-inpage-navigation{display:
   none} with @media(min-width:996px){display:block}, and
   .ecl-inpage-navigation__trigger{display:none} with only
   .ecl-inpage-navigation--visible .ecl-inpage-navigation__trigger
   {display:flex} turning it on (itself forced back to display:none at
   min-width:996px, so the trigger is mobile/tablet-only even when
   --visible does apply). There is no other mobile trigger, so without
   this override there is no way to see a page's table of contents at
   any viewport below 996px, on any content page, at any scroll
   position -- a real functional regression on a long-form reference
   guide. Re-show the nav and its trigger unconditionally below the
   same 996px breakpoint ECL itself uses; this must not touch anything
   at 996px and up, where the existing sticky scroll-spy behaviour
   (verified in Task 8) must keep working unchanged. */
@media screen and (max-width: 995px) {
  .ecl-inpage-navigation { display: block; }
  .ecl-inpage-navigation__trigger { display: flex; }
}

/* This site's own global "ul, ol { margin: 0 0 18px 1.5em; }" rule (for
   article-body bullet lists) has no article-scope selector, and with
   ecl-reset.css deliberately not loaded (spec section 5) that 1.5em
   left margin leaks into every ECL chrome list too, including the
   footer's legal-navigation row -- confirmed live via the CSSOM
   (ul.ecl-site-footer__list--inline matched "ul, ol" with no other
   rule resetting margin-left, putting it 24px right of the footer's
   true left margin, out of line with the logo/description/smallprint
   above and below it). Reset it back to ECL's own zero margin here
   rather than re-scoping the original site-wide rule, which content
   pages already render correctly against.
   Only margin-left and the global li margin-bottom are reset: an earlier
   blanket "margin: 0" here also wiped ECL's own margin-block-start on
   .ecl-site-footer__list (16px), jamming every link list up against its
   "Contact us"/"About us"/"Related links" heading. */
.ecl-site-footer ul, .ecl-site-footer ol { margin-left: 0; }
.ecl-site-footer li { margin-bottom: 0; }

/* Inline social icons (see _NETWORK_ICONS): white on the footer's brand
   background, with the knocked-out glyph filled to match that background,
   as the live DG ENV footer renders them. */
.ecl-site-footer .ecl-social-media-follow__icon { color: var(--cm-on-surface-inverted); }
.ecl-site-footer .ecl-social-media-follow__icon .cutout { fill: var(--cm-surface-brand); }

/* ECL's mega-menu panel lays its "info" (heading+summary) and "mega" (link
   list) panes out with position: absolute, sized and placed independently
   of one another -- built for a hover-card effect where the two can be
   different heights and visually float apart, not for a single attached
   two-column panel. On our Reference Guide item this rendered as two
   disconnected floating boxes instead of one panel. ECL also force-splits
   a flat one-level link list into 3 CSS columns once it has an info pane
   (.ecl-mega-menu__item--one-level-only ... .ecl-mega-menu__sublist,
   column-count: 3, display: block) -- the legacy .top-nav__dropdown design
   this replaced always used a single column. Both are overridden here,
   scoped to this specific menu item only: switch the two panes to a
   static flexbox row (ECL's own JS then measures and syncs their heights
   to match, and the legacy border-right visually attaches them), and put
   the list back into a single flex column -- setting column-count alone
   is not enough to undo ECL's rule, since it also switches the list to
   display: block, and under display: block a column-count of 1 still
   rendered as multiple columns live (confirmed via getBoundingClientRect:
   items landed in 3 groups ~1044px apart, off the edge of the panel);
   forcing display back to flex bypasses the column layout entirely
   instead of fighting it. Scoped to ECL's own min-width: 1140px
   breakpoint -- below that, ECL drops the side-by-side info/mega layout
   entirely for a full-width single-panel accordion (with its own "Back"
   button), and this override applied there too, forcing a side-by-side
   row onto a layout meant to stack, breaking the mobile/tablet menu. */
@media (min-width: 1140px) {
  #ecl-mega-menu-item-main-2 > .ecl-mega-menu__wrapper > .ecl-container {
    display: flex;
    align-items: stretch;
    gap: var(--s-2xl);
    /* Below ~1440px ECL narrows this to 24px and pulls the info pane out by
       -24px, leaving the panel heading 8px left of the logo and menu labels. */
    padding-inline: 2rem;
  }
  #ecl-mega-menu-item-main-2 .ecl-mega-menu__info {
    position: static;
    flex: 0 0 260px;
    width: 260px;
    margin-inline: 0;
    padding-inline-start: 0;
    box-shadow: none; /* ECL's below-1440px card shadow outlined this pane */
    border-right: 1px solid var(--cm-border-low, #d4d4dc);
  }
  /* ECL's MegaMenu script writes inline heights on the wrapper and both
     panes, measured for its own absolute layout -- one row short for our
     single-column list. Sizing them all to content instead lets the flex
     row match the two panes' heights, and keeps the wrapper tall enough
     that ECL's 1px divider (.ecl-mega-menu__wrapper::before, pinned 16px
     above the wrapper's bottom edge) sits in the bottom padding below the
     list. With the panes overflowing a fixed-height wrapper, their white
     backgrounds covered the middle of that divider, leaving two stray
     line stubs at either side of the panel. */
  #ecl-mega-menu-item-main-2 > .ecl-mega-menu__wrapper,
  #ecl-mega-menu-item-main-2 .ecl-mega-menu__mega,
  #ecl-mega-menu-item-main-2 .ecl-mega-menu__info,
  #ecl-mega-menu-item-main-2 .ecl-mega-menu__sublist {
    height: auto !important;
  }
  #ecl-mega-menu-item-main-2 .ecl-mega-menu__info {
    overflow: visible;
    padding-bottom: 0;
    margin-bottom: 0; /* ECL adds 16px below ~1440px, cutting the border-right short of the list */
  }
  /* ECL draws a shadow strip on the info pane's right edge, positioned for
     its absolute layout; with the pane static it landed as a stray vertical
     bar at the far right of the container. The border-right above replaces it. */
  #ecl-mega-menu-item-main-2 .ecl-mega-menu__info::after { content: none; }
  #ecl-mega-menu-item-main-2 .ecl-mega-menu__mega {
    position: static;
    flex: 1 1 auto;
    width: auto;
  }
  #ecl-mega-menu-item-main-2 .ecl-mega-menu__sublist {
    display: flex;
    flex-direction: column;
    column-count: 1;
  }
  /* ECL sizes the desktop dropdown chevron at 10px, which read as
     near-invisible against the dark menu bar. */
  #ecl-mega-menu-item-main-2-link .ecl-icon--corner-arrow {
    width: 16px;
    height: 16px;
  }
}

/* -- Responsive --------------------------------------- */
/* Match .ecl-container's side padding at each breakpoint (16px / 24px / 32px
   at <768 / 768-1139 / 1140+) so page content lines up with the ECL header,
   breadcrumb and footer instead of sitting 4-8px to their right. */
@media screen and (max-width: 1139px) { :root { --gutter: 24px; } }
@media screen and (max-width: 767px)  { :root { --gutter: 16px; } }

@media screen and (max-width: 768px) {
  h1 { font-size: 3.25rem; }
  h2 { font-size: 2.375rem; }
  h3 { font-size: 1.5rem; }
  h4 { font-size: 1.25rem; }
  .hero h1 { font-size: 1.5rem; }

  .chapter-grid { grid-template-columns: 1fr; }
  .subpage-grid { grid-template-columns: 1fr; }
  .chapter-nav a { max-width: 100%; }
  .search-form { flex-wrap: wrap; }
  .search-form input[type="search"] { width: 100%; }
  .search-form button { width: 100%; border-top: 1px solid var(--border); }
  .search-form button::before { display: none; }
  .hero .search-form { flex-wrap: nowrap; }
  .hero .search-form input[type="search"] { width: auto; }
  .hero .search-form button { width: auto; border-top: none; }
  .hero { background-image: none; }
}

/* -- Print -------------------------------------------- */
@media print {
  .chapter-nav, .back-to-top,
  .hero .search-form { display: none !important; }
  /* Task 11: pre-migration this list hid .official-strip, .site-header,
     .top-nav, .breadcrumbs, .sidebar, .mobile-contents and .site-footer by
     their bespoke class names. The ECL migration (Tasks 1-9) renamed those
     elements to ecl-* classes without updating this list, so browser print
     (Ctrl-P) silently regressed to printing the full site chrome on every
     page. Restore parity by hiding the ECL equivalents. The webtools-
     injected globan/cookie-consent banner (formerly .official-strip) is
     out of scope -- see spec section 8.1, it is not part of this build's
     static markup. */
  .ecl-site-header, .ecl-mega-menu, .ecl-breadcrumb,
  .ecl-inpage-navigation, .ecl-site-footer { display: none !important; }
  .article { width: 100%; }
  body { font-size: 11pt; line-height: 1.45; color: #000; }
  h1 { font-size: 18pt; } h2 { font-size: 14pt; } h3 { font-size: 12pt; }
  h2, h3 { page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
  a { color: inherit; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
  table { page-break-inside: avoid; }
  thead { display: table-header-group; }
  .table-wrap { overflow-x: visible; }
  .article table th, .article-body table th {
    background: #222 !important; color: #fff !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .article table tr:nth-child(even) td, .article-body table tr:nth-child(even) td {
    background: #f5f5f5 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}