/* ═══════════════════════════════════════════════════════════════════════
   LETLOU ENERGY — LEGAL STYLES
   Rev 03 · 10 June 2026
   Sections:
     1.  Floating Legal Button  (navigates to Legal Hub)
     2.  Footer Legal Links
     3.  Legal Hub Page         (hub-card grid, stat strip, etc.)
     4.  Standalone Legal Pages (hero, body, back-link, sections, tables)
     5.  Responsive
   ═══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   1.  FLOATING LEGAL BUTTON
       · Fixed to right edge, sits flush below the header
       · On legal pages it links back to legal-hub.html
       · On main site pages it links to legal/index.html (the hub)
       · Links to legal-hub.html; active class applied on the hub itself
   ══════════════════════════════════════════════════════════════════════ */

/* Legal hub floating button — retired in favour of the Legal nav dropdown.
   Hidden on all screen sizes. CSS kept for reference; remove entirely on
   next major refactor. */
.legal-hub-btn {
  display: none !important;
}

.legal-hub-btn i {
  color: var(--color-amber);
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: color 0.22s ease;
}

.legal-hub-btn:hover {
  background: var(--color-amber);
  color: var(--color-navy);
  padding-right: 22px;                    /* slides out slightly on hover */
  border-color: var(--color-amber);
}

.legal-hub-btn:hover i { color: var(--color-navy); }

/* Focus ring for keyboard users */
.legal-hub-btn:focus-visible {
  outline: 3px solid var(--color-amber);
  outline-offset: 3px;
}

/* Active state (page is the Legal Hub itself — highlight the button) */
.legal-hub-btn.active {
  background: var(--color-amber);
  color: var(--color-navy);
  border-color: var(--color-amber);
}

.legal-hub-btn.active i { color: var(--color-navy); }

/* ══════════════════════════════════════════════════════════════════════
   2.  FOOTER LEGAL LINKS
   ══════════════════════════════════════════════════════════════════════ */

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  row-gap: 0.4rem;
}

.legal-link {
  color: color-mix(in srgb, white 50%, transparent);
  font-size: 0.75rem;
  text-decoration: none;
  transition: color 0.2s ease;
  cursor: pointer;
}

.legal-link:hover { color: var(--color-amber); }

.footer-legal-sep {
  color: var(--color-amber);
  font-size: 0.7rem;
  opacity: 0.4;
  margin: 0 2px;
}


/* ══════════════════════════════════════════════════════════════════════
   4.  LEGAL HUB PAGE  (legal-hub.html)
   ══════════════════════════════════════════════════════════════════════ */

/* Card grid */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}

/* Individual card */
.hub-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* Amber left-edge accent */
.hub-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: var(--color-amber);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.hub-card:hover {
  border-color: var(--color-amber);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--color-navy) 10%, transparent);
  transform: translateY(-2px);
}

.hub-card:hover::before { opacity: 1; }

/* Card icon */
.hub-card-icon {
  width: 42px;
  height: 42px;
  background: color-mix(in srgb, var(--color-amber) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-amber) 25%, transparent);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--color-amber);
  margin-bottom: 1rem;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.hub-card:hover .hub-card-icon {
  background: var(--color-amber);
  border-color: var(--color-amber);
  color: var(--color-navy);
}

/* Card text */
.hub-card-docnum {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-hint);
  margin-bottom: 0.35rem;
}

.hub-card-title {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.hub-card-desc {
  font-size: 0.83rem;
  color: var(--color-text-mid);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 1rem;
}

/* Card footer row */
.hub-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border-soft);
}

/* Category tags */
.hub-card-tag {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
}

.hub-tag-legal      { background: color-mix(in srgb, var(--color-navy) 8%, transparent);  color: var(--color-navy); }
.hub-tag-governance { background: color-mix(in srgb, var(--color-amber) 15%, transparent); color: var(--color-amber-dark); }
.hub-tag-statutory  { background: rgba(34,120,80,0.1);  color: var(--color-tag-statutory); }
.hub-tag-technical  { background: rgba(80,80,80,0.08);  color: var(--color-text-muted); }

/* Card arrow */
.hub-card-arrow {
  font-size: 0.75rem;
  color: var(--color-text-hint);
  transition: color 0.2s, transform 0.2s;
}

.hub-card:hover .hub-card-arrow {
  color: var(--color-amber);
  transform: translateX(3px);
}

/* Category section labels */
.hub-category-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-amber);
  margin: 2.5rem 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hub-category-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border-soft);
}

/* Stats strip */
.hub-stats {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding: 1.5rem 2rem;
  background: var(--color-navy);
  border-radius: var(--radius-lg);
  background-image: repeating-linear-gradient(
    -55deg, transparent, transparent 40px,
    color-mix(in srgb, var(--color-amber) 3%, transparent) 40px,
    color-mix(in srgb, var(--color-amber) 3%, transparent) 41px
  );
}

.hub-stat { display: flex; flex-direction: column; gap: 0.2rem; }

.hub-stat-num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-amber);
  line-height: 1;
}

.hub-stat-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, white 50%, transparent);
}

/* Contact strip */
.hub-contact-strip {
  margin-top: 3rem;
  padding: 1.75rem 2rem;
  background: color-mix(in srgb, var(--color-amber) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-amber) 20%, transparent);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.hub-contact-strip p {
  font-size: 0.88rem;
  color: var(--color-text-mid);
  margin: 0;
  line-height: 1.6;
}

.hub-contact-strip strong { color: var(--color-navy); }

.hub-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-navy);
  color: var(--color-white);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.65rem 1.25rem;
  border-radius: var(--radius-sm);
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.hub-contact-btn:hover { background: var(--color-amber); color: var(--color-navy); }


/* ══════════════════════════════════════════════════════════════════════
   9.  STANDALONE LEGAL PAGES (hero, body, sections, shared components)
   ══════════════════════════════════════════════════════════════════════ */

/* ── Hero Banner ── */
.legal-hero {
  background: var(--color-navy);
  background-image: repeating-linear-gradient(
    -55deg, transparent, transparent 40px,
    color-mix(in srgb, var(--color-amber) 3%, transparent) 40px,
    color-mix(in srgb, var(--color-amber) 3%, transparent) 41px
  );
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 6vw, 5rem);
  border-bottom: 4px solid var(--color-amber);
}

.legal-hero-inner {
  max-width: 850px;
  margin: 0 auto;
}

/* .legal-eyebrow — use the shared .eyebrow class from LetlouComponents.css.
   This rule keeps backward-compatibility for any existing HTML that still
   uses the old class name, while forwarding all appearance to the component. */
.legal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-amber);
  margin-bottom: 0.75rem;
}

.legal-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.legal-hero p {
  font-size: 0.95rem;
  color: color-mix(in srgb, white 65%, transparent);
  line-height: 1.65;
  max-width: 600px;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   CSS COUNTER NUMBERING — TWO-LEVEL DECIMAL SCHEME
   ──────────────────────────────────────────────────────────────────────
   Level 1 (h2):  1.   2.   3.   4.   …
   Level 2 (h3):  1  1.2  4.1  4.2  …

   HOW IT WORKS
   · legal-body resets the top-level counter (legal-section) to 0.
   · Each .legal-section increments legal-section AND resets the
     sub-level counter (legal-subsection) back to 0, so subsection
     numbering always restarts at 1 within each parent section.
   · Each h3 inside a .legal-section increments legal-subsection.
   · h2::before renders  counter(legal-section) + ". "
   · h3::before renders  counter(legal-section) + "." +
                         counter(legal-subsection) + "  "

   IMPORTANT FOR HTML AUTHORS
   · Do NOT write section numbers in heading text.
     Write:   <h2>What are cookies?</h2>
     Not:     <h2>1. What are cookies?</h2>
   · The same applies to h3:  <h3>Google Analytics 4</h3>  (no "4.1")
   ══════════════════════════════════════════════════════════════════════ */

.legal-body {
  max-width: 850px;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 4vw, 2.5rem);
  counter-reset: legal-section;
}

/* ── Legal Section ── */
.legal-section {
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--color-border-soft);
  counter-increment: legal-section;
  /* Each section resets the subsection counter so h3s restart at .1 */
  counter-reset: legal-subsection;
}

.legal-section:last-of-type { border-bottom: none; }

/* h2 — "1. " prefix in amber */
.legal-section h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--color-amber);
  display: inline-block;
}

.legal-section h2::before {
  content: counter(legal-section) ". ";
  color: var(--color-navy);
  font-weight: 800;
}

/* h3 — "1.1  " decimal-dot prefix, slightly muted */
.legal-section h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-navy);
  margin: 1.25rem 0 0.5rem;
  counter-increment: legal-subsection;
}

.legal-section h3::before {
  content: counter(legal-section) counter(legal-subsection, lower-alpha) ".  ";
  color: var(--color-navy);
  font-weight: 700;
  font-size: 0.88rem;
  /* Slight letter-spacing separates the number from the heading text */
  letter-spacing: 0.01em;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-navy);
  text-decoration: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 2rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  background: var(--color-bg-secondary);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.back-link:hover {
  background: var(--color-amber);
  border-color: var(--color-amber);
  color: var(--color-navy);
}

.legal-section p {
  font-size: 0.92rem;
  color: var(--color-text-mid);
  line-height: 1.8;
  margin-bottom: 0.85rem;
}

.legal-section ul,
.legal-section ol {
  padding-left: 1.4rem;
  margin-bottom: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.legal-section li {
  font-size: 0.92rem;
  color: var(--color-text-mid);
  line-height: 1.7;
}

.legal-section a { color: var(--color-navy); font-weight: 600; transition: color 0.2s; }
.legal-section a:hover { color: var(--color-amber); }

/* ── Shared Components ── */

.legal-highlight {
  background: color-mix(in srgb, var(--color-amber) 8%, transparent);
  border-left: 3px solid var(--color-amber);
  padding: 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  border-radius: 0 8px 8px 0;
  color: var(--color-text-mid);
  line-height: 1.75;
}

.legal-highlight strong { color: var(--color-navy); }

.legal-toc {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--color-border-soft);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}

.legal-toc p {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-text-hint);
  margin-bottom: 0.75rem;
  letter-spacing: 0.1em;
}

/* TOC list — indented, numbered, readable */
.legal-toc ol {
  padding-left: 1.5rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  list-style: decimal;
}

.legal-toc ol li {
  padding-left: 0.35rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-mid);
}

.legal-toc a {
  font-size: 0.85rem;
  color: var(--color-navy);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.legal-toc a:hover { color: var(--color-amber); }

.legal-toc a:focus-visible {
  outline: 2px solid var(--color-amber);
  outline-offset: 2px;
  border-radius: 2px;
}

.firewall-box {
  background: color-mix(in srgb, var(--color-amber) 6%, transparent);
  border-left: 4px solid var(--color-amber);
  padding: 1.1rem 1.25rem;
  margin-top: 1rem;
  border-radius: 0 8px 8px 0;
  color: var(--color-text-mid);
  font-size: 0.9rem;
  line-height: 1.75;
}

.firewall-box strong { color: var(--color-navy); }

.legal-contact-box {
  background: var(--color-amber);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  color: var(--color-navy);
  margin-top: 2rem;
  font-size: 0.9rem;
}

.legal-contact-box a     { color: var(--color-navy); font-weight: 700; text-decoration: underline; }
.legal-contact-box strong { color: var(--color-navy); }

/* ── Attribution disclosure box ── */
.attribution-disclosure {
  background: color-mix(in srgb, var(--color-amber) 6%, transparent);
  border-left: 4px solid var(--color-amber);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 12px 12px 0;
}

.attribution-disclosure h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.attribution-disclosure h3 i { color: var(--color-amber); }

.attribution-disclosure p {
  font-size: 0.9rem;
  color: var(--color-text-mid);
  line-height: 1.75;
  margin: 0 0 0.75rem;
}

.attribution-disclosure p:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════════════
   ISO DOCUMENT CONTROL — META-STRIP + ACCORDION
   ──────────────────────────────────────────────────────────────────────
   Layout:
     .iso-doc-section          wrapper, margin only
     .iso-doc-section-heading  amber eyebrow label (shared across legal)
     .doc-meta-strip           compact key/value grid — always visible
     .doc-meta-item            individual field
     .doc-meta-label           muted field name
     .doc-meta-value           field value
     .doc-meta-badge           "Public" classification badge
     .doc-meta-code            monospace document reference
     .doc-history-accordion    details/summary accordion for revision history
     .doc-history-table        the revision history table inside the accordion
   ══════════════════════════════════════════════════════════════════════ */

.iso-doc-section { margin-bottom: 2rem; }

.iso-doc-section-heading {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-amber);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.iso-doc-section-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-amber-border);
}

/* ── Document Control meta-strip ── */
.doc-meta-strip {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 0.65rem 1.25rem;
  margin-bottom: 1rem;
}

.doc-meta-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.doc-meta-item--wide {
  grid-column: 1 / -1;
}

.doc-meta-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-hint);
}

.doc-meta-value {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.4;
}

.doc-meta-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--color-teal) 10%, transparent);
  color: var(--teal-600);
  border: 1px solid color-mix(in srgb, var(--color-teal) 20%, transparent);
  border-radius: 99px;
  padding: 2px 9px;
}

.doc-meta-code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.78rem;
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  color: var(--color-navy);
}

/* ── Revision History accordion ── */
.doc-history-accordion {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.doc-history-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1.1rem;
  background: var(--color-bg-secondary);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background var(--transition-fast);
}

/* Remove default marker in all browsers */
.doc-history-summary::-webkit-details-marker { display: none; }
.doc-history-summary::marker { display: none; }

.doc-history-summary:hover {
  background: var(--color-off-white);
}

.doc-history-summary-left {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-navy);
}

.doc-history-summary-left i {
  color: var(--color-amber);
  font-size: 0.82rem;
}

.doc-history-chevron {
  font-size: 0.78rem;
  color: var(--color-text-hint);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

details.doc-history-accordion[open] .doc-history-chevron {
  transform: rotate(180deg);
}

.doc-history-body {
  border-top: 1px solid var(--color-border-soft);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Revision history table ── */
.doc-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  min-width: 420px;
}

.doc-history-table thead th {
  background: var(--color-amber);
  color: var(--color-navy);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.55rem 0.85rem;
  text-align: left;
  white-space: nowrap;
}

.doc-history-table tbody td {
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--color-border-soft);
  color: var(--color-text-mid);
  vertical-align: top;
  line-height: 1.5;
}

.doc-history-table tbody tr:last-child td {
  border-bottom: none;
}

.doc-history-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--color-amber) 3%, transparent);
}

.doc-rev-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  background: var(--color-amber-tint);
  color: var(--color-navy);
  border: 1px solid var(--color-amber-border);
  border-radius: 99px;
  padding: 1px 7px;
  white-space: nowrap;
}

/* ── Legacy .iso-control-table — kept for any other tables in legal pages
   (cookie inventory table in cookie-policy.html, etc.) ── */
.table-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.iso-control-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0;
  font-size: 0.85rem;
  border: 1px solid var(--color-amber-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.iso-control-table td,
.iso-control-table th {
  border: 1px solid var(--color-amber-border);
  padding: 10px 15px;
  text-align: left;
  vertical-align: middle;
}

.iso-control-table th {
  background: var(--color-amber);
  color: var(--color-navy);
  font-weight: 700;
  width: 30%;
}

.iso-control-table td {
  background: color-mix(in srgb, var(--color-amber) 4%, transparent);
  color: var(--color-text-mid);
}

.iso-history thead tr th {
  background: var(--color-amber);
  color: var(--color-navy);
  width: auto;
}

.iso-history tbody td {
  background: color-mix(in srgb, var(--color-amber) 4%, transparent);
}


/* ══════════════════════════════════════════════════════════════════════
   11.  LICENCE PILLS  (used in acknowledgements.html legend + cards)
   ══════════════════════════════════════════════════════════════════════ */

.licence-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 4px;
  white-space: nowrap;
}

.pill-unsplash    { background: color-mix(in srgb, var(--color-navy) 8%, transparent);   color: var(--color-navy);  border: 1px solid color-mix(in srgb, var(--color-navy) 15%, transparent);  }
.pill-pexels      { background: rgba(5,133,68,0.09);   color: #0a5c30;            border: 1px solid rgba(5,133,68,0.2);   }
.pill-pixabay     { background: rgba(0,100,200,0.09);  color: #004080;            border: 1px solid rgba(0,100,200,0.18); }
.pill-proprietary { background: var(--color-navy);     color: var(--color-white); border: 1px solid transparent;          }
.pill-adapted     { background: rgba(130,0,170,0.08);  color: #5c0080;            border: 1px solid rgba(130,0,170,0.18); }

/* ── Licence Legend (Section 1) ── */
.licence-legend {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.25rem 0;
  padding: 1.25rem;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-soft);
}

.legend-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  font-size: 0.85rem;
  color: var(--color-text-mid);
}

/* ══════════════════════════════════════════════════════════════════════
   12.  CREDIT CARDS  (acknowledgements photography register)
   ══════════════════════════════════════════════════════════════════════ */

.credit-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-top: 1rem;
}

.credit-card {
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.credit-card:hover {
  border-color: color-mix(in srgb, var(--color-amber) 40%, transparent);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-navy) 10%, transparent);
}

.credit-card-file {
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-soft);
  padding: 0.4rem 0.75rem;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.73rem;
  color: var(--color-navy);
  word-break: break-all;
  line-height: 1.5;
}

.credit-card-body {
  padding: 0.55rem 0.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.credit-card-usage {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-amber-dark);
}

.credit-card-credit {
  font-size: 0.86rem;
  color: var(--color-text-mid);
  line-height: 1.6;
  margin: 0;
}

.credit-card-credit a {
  color: var(--color-navy);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}

.credit-card-credit a:hover { color: var(--color-amber); }

.credit-orig-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  color: var(--color-text-hint) !important;
  margin-left: 0.35rem;
}

.credit-orig-link i { font-size: 0.62rem; }
.credit-orig-link:hover { color: var(--color-amber) !important; }

.credit-card-footer {
  padding: 0.4rem 0.75rem;
  border-top: 1px solid var(--color-border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.credit-platform-link {
  font-size: 0.72rem;
  color: var(--color-text-hint);
  text-decoration: none;
  transition: color 0.2s;
}

.credit-platform-link:hover { color: var(--color-amber); }

/* ── Proprietary Cards (Section 3) ── */
.proprietary-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.proprietary-card {
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-left: 3px solid var(--color-navy);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  box-shadow: var(--shadow-sm);
}

.proprietary-card-file {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.74rem;
  color: var(--color-navy);
  font-weight: 600;
  word-break: break-all;
  line-height: 1.5;
}

.proprietary-card-desc {
  font-size: 0.84rem;
  color: var(--color-text-mid);
  line-height: 1.55;
  margin: 0;
}

/* ── Diagram / Interface Cards (Sections 4–5) ── */
.diagram-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

.diagram-card {
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
}

.diagram-card-asset {
  padding: 1rem;
  border-right: 1px solid var(--color-border-soft);
  background: var(--color-bg-secondary);
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.75rem;
  color: var(--color-navy);
  word-break: break-all;
  min-width: 180px;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.diagram-card-asset strong {
  font-family: var(--font-body);
  font-size: 0.88rem;
}

.diagram-card-credit {
  padding: 1rem;
  font-size: 0.86rem;
  color: var(--color-text-mid);
  line-height: 1.65;
}

.diagram-card-credit a {
  color: var(--color-navy);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}

.diagram-card-credit a:hover { color: var(--color-amber); }

.diagram-card-licence {
  padding: 1rem;
  border-left: 1px solid var(--color-border-soft);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
  min-width: 140px;
}

.diagram-card-licence small {
  font-size: 0.75rem;
  color: var(--color-text-hint);
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════════
   13.  COOKIE POLICY — CATEGORY BOXES  (cookie-policy.html §2)
       Three distinct left-border colours using existing brand tokens so
       each category is immediately scannable while keeping the formal
       legal tone intact.
   ══════════════════════════════════════════════════════════════════════ */

/* Base override — removes the inline styles from the HTML */
.firewall-box--necessary {
  border-left-color: var(--color-navy);
  background: color-mix(in srgb, var(--color-navy) 4%, transparent);
}

.firewall-box--analytics {
  border-left-color: var(--purple-600);
  background: color-mix(in srgb, var(--color-purple) 4%, transparent);
}

.firewall-box--functional {
  border-left-color: var(--copper-500);
  background: rgba(192, 122, 62, 0.04);
}

/* Category label pill — sits inline with the h3 counter prefix */
.cookie-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 99px;
  vertical-align: middle;
  margin-left: 0.5rem;
  position: relative;
  top: -1px;
}

.cookie-category-badge--always {
  background: color-mix(in srgb, var(--color-navy) 8%, transparent);
  color: var(--color-navy);
  border: 1px solid color-mix(in srgb, var(--color-navy) 18%, transparent);
}

.cookie-category-badge--opt-in {
  background: var(--color-amber-tint);
  color: var(--amber-600);
  border: 1px solid var(--color-amber-border);
}


/* ══════════════════════════════════════════════════════════════════════
   14.  COOKIE POLICY — INVENTORY CARDS  (cookie-policy.html §3)
       Replaces the wide 5-column table with stacking cards that are
       fully readable at any viewport width.
   ══════════════════════════════════════════════════════════════════════ */

.cookie-card-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 1.25rem 0 1.75rem;
}

/* Group label — mirrors .iso-doc-section-heading style */
.cookie-card-group__label {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-amber);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.1rem;
}

.cookie-card-group__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-amber-border);
}

/* Consent-required sub-label */
.cookie-card-group__meta {
  font-size: 0.72rem;
  color: var(--color-text-hint);
  font-style: italic;
  margin-bottom: 0.5rem;
}

/* Individual cookie card */
.cookie-card {
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 0.75rem;
  row-gap: 0.2rem;
  align-items: start;
  box-shadow: var(--shadow-sm);
}

/* Cookie name — monospace pill */
.cookie-card__name {
  grid-column: 1;
  grid-row: 1;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--color-navy);
  background: var(--color-off-white);
  border: 1px solid var(--color-border-soft);
  padding: 0.15rem 0.55rem;
  border-radius: 3px;
  white-space: nowrap;
  align-self: center;
}

/* Purpose text */
.cookie-card__purpose {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 0.82rem;
  color: var(--color-text-mid);
  line-height: 1.55;
  align-self: center;
}

/* Expiry badge */
.cookie-card__expiry {
  grid-column: 3;
  grid-row: 1;
  font-size: 0.68rem;
  color: var(--color-text-hint);
  background: var(--color-off-white);
  border: 1px solid var(--color-border-soft);
  padding: 0.15rem 0.55rem;
  border-radius: 3px;
  white-space: nowrap;
  text-align: right;
  align-self: center;
}

/* Provider indicator — small coloured dot + name */
.cookie-card__provider {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  color: var(--color-text-hint);
  align-self: start;
  padding-top: 0.15rem;
}

.cookie-card__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cookie-card__dot--letlou     { background: var(--color-amber); }
.cookie-card__dot--google     { background: #4285F4; }
.cookie-card__dot--microsoft  { background: #00A4EF; }
.cookie-card__dot--cloudflare { background: #F38020; }
.cookie-card__dot--none       { background: var(--color-border); }
.cookie-card__dot--linkedin   { background: #0A66C2; }

/* "None" / N/A cards — no cookies set */
.cookie-card--none {
  background: var(--color-bg-secondary);
  border-style: dashed;
}

.cookie-card--none .cookie-card__name {
  font-style: italic;
  color: var(--color-text-muted);
}


/* ══════════════════════════════════════════════════════════════════════
   15.  COOKIE POLICY — CONSENT STATUS ROW  (cookie-policy.html §5 / §6)
       Inline live-status strip with functional toggles wired to the
       same cookies managed by LetlouGlobal.js / the consent banner.
   ══════════════════════════════════════════════════════════════════════ */

.consent-status-panel {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 1.25rem 0 1.5rem;
  box-shadow: var(--shadow-sm);
}

.consent-status-panel__heading {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-hint);
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--color-border-soft);
  background: var(--color-white);
}

.consent-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border-soft);
  flex-wrap: wrap;
}

.consent-status-row:last-child {
  border-bottom: none;
}

/* Left: label + description */
.consent-status-row__info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1;
  min-width: 0;
}

.consent-status-row__name {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--color-navy);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.consent-status-row__name i {
  font-size: 0.72rem;
  color: var(--color-text-hint);
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

.consent-status-row__desc {
  font-size: 0.76rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Right: status indicator + toggle */
.consent-status-row__control {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

/* Live status text */
.consent-live-status {
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 52px;
  text-align: right;
}

.consent-live-status--on     { color: var(--teal-600); }
.consent-live-status--off    { color: var(--coral-600); }
.consent-live-status--always { color: var(--color-amber); }

/* Toggle — light-background variant (reuses banner toggle logic but
   styled for a white card rather than the dark navy banner) */
.consent-toggle {
  position: relative;
  flex-shrink: 0;
}

.consent-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.consent-toggle__track {
  display: block;
  width: 38px;
  height: 22px;
  background: var(--color-border);
  border-radius: 99px;
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: background var(--transition-normal), border-color var(--transition-normal);
  position: relative;
}

.consent-toggle__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: var(--color-white);
  border-radius: 50%;
  box-shadow: 0 1px 3px color-mix(in srgb, black 18%, transparent);
  transition: transform var(--transition-normal);
}

.consent-toggle input:checked + .consent-toggle__track {
  background: var(--color-amber);
  border-color: var(--color-amber);
}

.consent-toggle input:checked + .consent-toggle__track::after {
  transform: translateX(16px);
}

.consent-toggle input:disabled + .consent-toggle__track {
  background: var(--color-navy);
  border-color: var(--color-navy);
  opacity: 0.55;
  cursor: not-allowed;
}

.consent-toggle input:disabled + .consent-toggle__track::after {
  transform: translateX(16px);
  background: var(--color-amber);
}

.consent-toggle input:focus-visible + .consent-toggle__track {
  outline: 2px solid var(--color-amber);
  outline-offset: 2px;
}


/* ══════════════════════════════════════════════════════════════════════
   10.  RESPONSIVE
   ──────────────────────────────────────────────────────────────────────
   Most layout adapts intrinsically (auto-fit grids, clamp(), flex-wrap).
   Only genuinely qualitative threshold changes live here.
   ══════════════════════════════════════════════════════════════════════ */

/* Tablet — stats strip spacing tightens; purely cosmetic, keeps
   numbers readable at 768px where the strip wraps to two rows */
@media (max-width: 768px) {
  .hub-stats { gap: 1.5rem; padding: 1.25rem; }
  .hub-stat-num { font-size: 1.3rem; }
}

/* Mobile — qualitative changes only:
   · legal-hub-btn collapses to icon-only circle (shape change, not size)
   · hub-stats spacing tightens further
   · hub-contact-strip stacks (flex-direction is a qualitative change)
   · ISO stacked-table layout (display:block — qualitative, not size-based)
   · Consent row wrapping (flex-basis:100% — qualitative reflow)
   · Cookie card grid reordering (qualitative grid-area change)
   All grid column counts (hub-grid, credit-card-grid, etc.) are handled
   intrinsically via auto-fill/auto-fit above — no overrides needed here. */
@media (max-width: 640px) {
  .legal-hub-btn {
    top: auto;
    bottom: 20px;
    right: 20px;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    padding: 0;
    justify-content: center;
    border: 1.5px solid var(--color-amber);
  }

  .legal-hub-btn .btn-label { display: none; }
  .legal-hub-btn i          { font-size: 1rem; margin: 0; }
  .legal-hub-btn:hover      { padding: 0; border-radius: 50%; }

  .show-cookie-banner .legal-hub-btn { display: none; }

  .hub-stats         { gap: 1.5rem; padding: 1.25rem; }
  .hub-stat-num      { font-size: 1.3rem; }
  .hub-contact-strip { flex-direction: column; align-items: flex-start; }

  .iso-control-table th,
  .iso-control-table td {
    padding: 0.6rem 0.75rem;
    font-size: 0.8rem;
  }

  /* iso-stacked rules removed — document control and revision history
     now use .doc-meta-strip and .doc-history-accordion which are
     intrinsically responsive without media queries. */

  /* Diagram cards stack vertically on mobile */
  .diagram-card { grid-template-columns: 1fr; }

  .diagram-card-asset {
    max-width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--color-border-soft);
  }

  .diagram-card-licence {
    border-left: none;
    border-top: 1px solid var(--color-border-soft);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  /* Cookie cards — stack name/expiry above purpose on narrow screens */
  .cookie-card {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
  }

  .cookie-card__name    { grid-column: 1; grid-row: 1; }
  .cookie-card__expiry  { grid-column: 2; grid-row: 1; }
  .cookie-card__purpose { grid-column: 1 / span 2; grid-row: 2; padding-top: 0.35rem; }
  .cookie-card__provider{ grid-column: 1 / span 2; grid-row: 3; padding-top: 0.15rem; }

  /* Consent status rows — qualitative reflow */
  .consent-status-row__info    { flex-basis: 100%; }
  .consent-status-row__control { justify-content: flex-end; width: 100%; }
}


/* ══════════════════════════════════════════════════════════════════════
   16.  ACKNOWLEDGEMENTS — LICENCE LEGEND  (acknowledgements.html §1)
       Replaces the plain list with a 2-column visual key grid where
       each entry carries a left-border colour matching its pill.
   ══════════════════════════════════════════════════════════════════════ */

.licence-legend {
  display: grid;
  /* auto-fit: 2 columns when space allows (≥280px each), 1 column on narrow screens */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 0.6rem;
  margin: 1.25rem 0;
  padding: 0;
  background: none;
  border: none;
}

.legend-item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  box-shadow: var(--shadow-sm);
  font-size: 0.82rem;
  color: var(--color-text-mid);
  line-height: 1.5;
}

/* Left-border accent colour per platform — mirrors pill colours */
.legend-item:has(.pill-unsplash)    { border-left: 3px solid var(--color-navy); }
.legend-item:has(.pill-pexels)      { border-left: 3px solid var(--teal-600); }
.legend-item:has(.pill-pixabay)     { border-left: 3px solid #004080; }
.legend-item:has(.pill-proprietary) { border-left: 3px solid var(--color-amber); }
.legend-item:has(.pill-adapted)     { border-left: 3px solid var(--purple-600); }




/* ══════════════════════════════════════════════════════════════════════
   17.  ACKNOWLEDGEMENTS — CREDIT CARDS  (acknowledgements.html §2–5)
       Platform-coloured left border on each card so source is scannable
       before reading the pill. Override only the border-left; the rest
       of the credit-card styles remain unchanged.
   ══════════════════════════════════════════════════════════════════════ */

/* Photography — platform accent borders */
.credit-card--unsplash    { border-left: 3px solid var(--color-navy); }
.credit-card--pexels      { border-left: 3px solid var(--teal-600); }
.credit-card--pixabay     { border-left: 3px solid #004080; }
.credit-card--proprietary { border-left: 3px solid var(--color-amber); }
.credit-card--adapted     { border-left: 3px solid var(--purple-600); }

/* File path label — de-emphasise the monospace filename on proprietary
   cards where the path is less meaningful to a reader */
.credit-card--proprietary .credit-card-file {
  color: var(--color-text-muted);
  font-size: 0.68rem;
}

/* Section grouping label — sits above a cluster of cards sharing the
   same licence type within a grid, styled like iso-doc-section-heading */
.credit-section-label {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-amber);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.5rem 0 0.5rem;
  grid-column: 1 / -1;    /* spans full width inside the card grid */
}

.credit-section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-amber-border);
}

.credit-section-label:first-child { margin-top: 0; }

/* Interface / diagram cards — clean two-column layout,
   no monospace filename header needed */
.credit-card--interface {
  border-left: 3px solid var(--color-navy);
}

.credit-card--interface .credit-card-file {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--color-navy);
  background: var(--color-amber-tint);
  border-bottom-color: var(--color-amber-border);
}

/* ══════════════════════════════════════════════════════════════════════
   18.  ACKNOWLEDGEMENTS — CONTACT BOX FIX  (acknowledgements.html §8)
   ══════════════════════════════════════════════════════════════════════ */

.legal-contact-box--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem;
  font-size: 0.92rem;
}

.legal-contact-box--inline a {
  font-weight: 700;
  text-decoration: underline;
}