/*!
 * BullBridge News — info & policy pages kit
 * about · contact · privacy · cookies · terms · disclaimer · editorial-policy · sitemap · 404
 * Link after style.css and pages/lesson.css (404.html links it with a root-relative /assets/… path).
 * Accent: the brand's signal blue (--brand-2 / --link / --info-soft) — never a market hue, never the academy violet.
 * Docs: docs/DESIGN.md (page shell, tokens, prose, callouts, tables).
 */

/* ---------- accent scope ---------- */
.page-hero--info,
.info-page { --accent: var(--brand-2); --accent-ink: var(--link); --accent-soft: var(--info-soft); }

.info-body { padding-top: var(--sp-10); padding-bottom: var(--sp-4); }
.page-hero__lead b { color: var(--text); font-weight: 600; }

/* long English link text (Google's page titles) may wrap; short terms keep lesson.css's nowrap */
.prose a[lang="en"] { white-space: normal; }

/* «باختصار»: the key points of a policy, right under the hero */
.info-summary ul { margin: 0; }
.info-summary li + li { margin-top: .35em; }

/* small data tables inside prose (storage keys, services, sources) */
.prose .table-wrap { margin: 1.4em 0; }
.info-table { font-size: 14.5px; }
.info-table th[scope="row"] { font-weight: 700; color: var(--text); min-width: 9em; line-height: 1.6; }
.info-table td { color: var(--text-2); line-height: 1.75; }
.info-table td b { color: var(--text); font-weight: 600; }
.info-table code { white-space: nowrap; }
.info-table a { color: var(--link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); }
.info-table a:hover { text-decoration-color: currentColor; }
.info-table .is-muted { color: var(--text-3); }
.info-table th .is-muted { font-size: 13px; font-weight: 500; }
/* header-cell widths for short columns (desktop/tablet; the phone layout stacks every cell) */
.info-table thead .w-sm { width: 10.5em; }
.info-table thead .w-md { width: 12em; }
/* a table with many short columns may use the whole main column (lesson.css makes it a size container) */
@media (min-width: 1024px) {
  .prose > .table-wrap--wide { width: 100cqw; max-width: none; }
}
@media (max-width: 899px) {
  .table-wrap > .table.info-table { min-width: 0; }
}
/* phones: every row becomes a small card; each cell is introduced by its column name (data-label) */
@media (max-width: 699px) {
  .table-wrap:has(> .info-table) { overflow: visible; background: var(--surface); }
  .info-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  .info-table, .info-table tbody, .info-table tr, .info-table th, .info-table td { display: block; width: 100%; }
  .info-table tr { padding: 12px 14px; border-bottom: 1px solid var(--border); }
  .info-table tbody tr:last-child { border-bottom: 0; }
  .info-table tbody tr:hover { background: transparent; }
  .info-table th, .info-table td { padding: 3px 0; border: 0; }
  .info-table th[scope="row"] { white-space: normal; font-size: 15.5px; padding-bottom: 6px; }
  .info-table td[data-label]::before { content: attr(data-label); display: block; font-size: 12.5px; font-weight: 700; color: var(--text-3); line-height: 1.6; }
}

/* cards inside an info article (what we offer, how to reach us) */
.info-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 1.4em 0; padding: 0; list-style: none; }
.prose .info-cards > li + li { margin-top: 0; }
.info-card { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 16px 18px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); color: inherit; text-decoration: none; }
a.info-card { transition: transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
a.info-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.info-card__top { display: flex; align-items: center; gap: 10px; }
.info-card__icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--accent-soft, var(--surface-3)); color: var(--accent-ink, var(--text)); }
.info-card__icon .icon { width: 19px; height: 19px; }
.info-card__title { font-family: var(--font-head); font-size: 16.5px; font-weight: 700; line-height: 1.5; color: var(--text); }
.info-card__text { font-size: 14.5px; line-height: 1.75; color: var(--text-2); }
.info-card__go { margin-top: auto; padding-top: 4px; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--accent-ink, var(--text)); }
.info-card__go .icon { width: 16px; height: 16px; transition: transform var(--t-med) var(--ease-spring); }
a.info-card:hover .info-card__go .icon { transform: translateX(-4px); }
@media (max-width: 559px) { .info-cards { grid-template-columns: minmax(0, 1fr); } }

/* about: key figures in the hero */
.about-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.about-facts .stat { display: flex; flex-direction: column; gap: 2px; background: var(--surface); padding: 16px 18px; }
/* the figure leads visually (so the four line up across a row); the label stays first for screen readers */
.about-facts .stat__value { order: -1; margin-top: 0; font-size: 30px; line-height: 1.2; }
.about-facts .stat__label { margin-top: 4px; font-size: 13px; color: var(--text-2); }
.about-facts .stat__sub { font-size: 12.5px; }

/* the e-mail address, in prose and in cards (LTR, never broken mid-word on wide screens) */
.mail-link { direction: ltr; unicode-bidi: isolate; font-family: var(--font-num); font-weight: 600; white-space: nowrap; }
.prose .mail-link { color: var(--link); }

/* ---------- end-of-page: links between the info pages ---------- */
.info-links { margin-top: var(--sp-12); padding: 20px 22px 22px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); max-width: var(--measure); }
.info-links__title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-family: var(--font-head); font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--text); }
.info-links__title .icon { color: var(--accent-ink, var(--text-3)); }
.info-links__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.info-links__list a {
  display: inline-flex; align-items: center; min-height: 38px; padding: 6px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
  font-size: 14px; font-weight: 600; line-height: 1.45; text-decoration: none;
  transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
}
.info-links__list a:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-3); }
.info-links__list a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
@media (max-width: 699px), (pointer: coarse) { .info-links__list a { min-height: 44px; } }

/* links inside text blocks that live outside .prose */
.info-page :is(.callout__body, .topic__text, .contact-promise, .contact-card__note, .smap-note, .nf-more) a:not([class]) {
  color: var(--link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
}
.info-page :is(.callout__body, .topic__text, .contact-promise, .contact-card__note, .smap-note, .nf-more) a:not([class]):hover { text-decoration-color: currentColor; }

/* ======================================================================
   CONTACT
   ====================================================================== */
.contact-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--gap); align-items: stretch; }
.contact-card {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 10px;
  padding: clamp(22px, 3vw, 34px); border-radius: var(--radius-xl); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow);
}
.contact-card::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%);
}
.contact-card__icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); }
.contact-card__icon .icon { width: 26px; height: 26px; }
.contact-card__label { margin-top: 6px; font-size: var(--fs-sm); font-weight: 700; color: var(--text-3); line-height: 1.5; }
.contact-card__email {
  align-self: flex-start; max-width: 100%; direction: ltr; unicode-bidi: isolate;
  font-family: var(--font-num); font-size: clamp(20px, 1.6vw + 12px, 32px); font-weight: 700; line-height: 1.35;
  color: var(--text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); overflow-wrap: anywhere;
}
.contact-card__email:hover { text-decoration-color: var(--accent); }
.contact-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.contact-card__note { margin-top: 4px; font-size: 14.5px; line-height: 1.8; color: var(--text-2); max-width: 52ch; }
.contact-promise { display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 2.4vw, 28px); border-radius: var(--radius-xl); border: 1px solid var(--border); background: var(--surface-2); }
.contact-promise__title { font-family: var(--font-head); font-size: 18px; font-weight: 700; line-height: 1.5; }
.contact-promise .checklist li { color: var(--text-2); }
.contact-promise .checklist b { color: var(--text); }

.contact-section { margin-top: var(--sp-16); }
.contact-section > h2 { font-family: var(--font-serif); font-size: clamp(26px, 1vw + 20px, 34px); font-weight: 700; line-height: 1.4; }
.contact-section > .contact-section__lead { margin-top: 8px; font-size: var(--fs-md); line-height: 1.85; color: var(--text-2); max-width: 64ch; }

.topic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--sp-6); }
@media (max-width: 1099px) { .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .topic-grid { grid-template-columns: minmax(0, 1fr); } }
.topic { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); }
.topic__head { display: flex; align-items: center; gap: 12px; }
.topic__icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent-ink); }
.topic__title { font-family: var(--font-head); font-size: 17px; font-weight: 700; line-height: 1.5; }
.topic__text { font-size: 14.5px; line-height: 1.8; color: var(--text-2); }
.topic__include { margin: 2px 0 0; padding-inline-start: 1.2em; font-size: 14px; line-height: 1.75; color: var(--text-2); }
.topic__include li::marker { color: var(--accent); }
.topic__include li + li { margin-top: 2px; }
.topic__subject { font-size: 13px; color: var(--text-3); line-height: 1.6; }
.topic__subject b { color: var(--text-2); font-weight: 600; }
.topic__go { margin-top: auto; padding-top: 6px; }

.contact-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--sp-6); align-items: start; }
.contact-notes .callout { margin: 0; }
@media (max-width: 1023px) {
  .contact-top { grid-template-columns: minmax(0, 1fr); }
  .contact-notes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) {
  .contact-card { border-radius: var(--radius-lg); }
  .contact-card__actions .btn { flex: 1 1 auto; }
  .contact-section { margin-top: var(--sp-12); }
}

/* ======================================================================
   COOKIES: what this browser holds right now (+ clear button)
   ====================================================================== */
.storage-panel { margin: 1.4em 0; padding: 16px 18px; border-radius: var(--radius-lg); border: 1px dashed var(--border-strong); background: var(--surface-2); font-size: 15px; line-height: 1.8; }
.storage-panel__title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); }
.storage-panel__title .icon { color: var(--accent-ink); }
.storage-panel__status { margin-top: 4px; color: var(--text-2); }
.storage-panel__keys { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.prose .storage-panel__keys > li + li { margin-top: 0; }
.storage-panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; }
.storage-panel__hint { font-size: 13px; color: var(--text-3); line-height: 1.6; }

/* ======================================================================
   SITEMAP
   ====================================================================== */
.smap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; gap: var(--gap); align-items: start; }
.smap__group { padding: 20px 20px 16px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); min-width: 0; }
.smap__group--wide { grid-column: span 2; }
.smap__group--full { grid-column: 1 / -1; }
/* long lists flow down the columns (1–7 in the first, 8–13 in the next), so the numbering reads naturally */
.smap__group--wide .smap__list, .smap__group--full .smap__list { display: block; columns: 2; column-gap: 24px; }
.smap__group--full .smap__list { columns: 3; }
.smap__group--wide .smap__list > li, .smap__group--full .smap__list > li { break-inside: avoid; }
.smap__head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.smap__icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--accent-soft, var(--surface-3)); color: var(--accent-ink, var(--text)); }
.smap__title { font-family: var(--font-head); font-size: 18px; font-weight: 700; line-height: 1.5; }
.smap__title a { color: inherit; text-decoration: none; }
.smap__title a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.smap__count { margin-inline-start: auto; font-size: 12.5px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.smap__list { margin: 0; padding: 0; list-style: none; display: grid; }
/* a block link (not flex: a Latin run such as «LEAPS» inside the text must stay in the sentence) with an absolute marker */
.smap__list a {
  position: relative; display: block; min-height: 40px; padding: 8px 6px; padding-inline-start: 22px; border-radius: 10px;
  color: var(--text-2); text-decoration: none; font-size: 15px; line-height: 1.55;
}
.smap__list a:hover { color: var(--text); background: var(--surface-2); }
.smap__list a::before {
  content: ""; position: absolute; inset-inline-start: 7px; top: calc(8px + .775em - 3px);
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent, var(--text-3)); opacity: .7;
}
.smap__list a[aria-current="page"] { color: var(--text); font-weight: 700; }
.smap__list--num { counter-reset: smap; }
.smap__list--num a { padding-inline-start: 42px; }
.smap__list--num a::before {
  counter-increment: smap; content: counter(smap); top: 8px; inset-inline-start: 6px; width: auto; min-width: 26px; height: auto;
  border-radius: 8px; padding: 1px 0; background: var(--accent-soft); color: var(--accent-ink); opacity: 1;
  font-family: var(--font-head); font-size: 12.5px; font-weight: 700; text-align: center; line-height: 1.6;
}
.smap__sub { margin: 10px 0 2px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 12.5px; font-weight: 700; color: var(--text-3); line-height: 1.5; }
.smap-note { margin-top: var(--sp-8); font-size: 14.5px; line-height: 1.8; color: var(--text-3); max-width: 70ch; }
.smap-note a { color: var(--link); }
@media (max-width: 1099px) {
  .smap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .smap__group--wide { grid-column: 1 / -1; }
  .smap__group--full .smap__list { columns: 2; }
}
@media (max-width: 699px) {
  .smap { grid-template-columns: minmax(0, 1fr); }
  .smap__group--wide .smap__list, .smap__group--full .smap__list { columns: 1; }
  .smap__group { padding: 16px 16px 12px; }
  .smap__list a { min-height: 44px; }
}

/* ======================================================================
   404
   ====================================================================== */
.nf { position: relative; isolation: isolate; overflow: hidden; padding: clamp(28px, 5vw, 72px) 0 clamp(40px, 5vw, 72px); border-bottom: 1px solid var(--border);
  background:
    radial-gradient(55% 90% at 85% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%),
    radial-gradient(45% 80% at 8% 10%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%),
    linear-gradient(to bottom, color-mix(in srgb, var(--accent) 4%, var(--bg)), var(--bg));
}
.nf::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1.4px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 100% at 80% 0%, #000, transparent 70%); mask-image: radial-gradient(70% 100% at 80% 0%, #000, transparent 70%);
}
.nf__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-10) var(--sp-12); align-items: center; }
.nf__code { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-sm); font-weight: 700; color: var(--accent-ink); }
.nf__title { margin-top: var(--sp-3); font-family: var(--font-serif); font-size: clamp(34px, 2vw + 22px, 56px); font-weight: 700; line-height: 1.35; }
.nf__lead { margin-top: var(--sp-3); font-size: var(--fs-md); line-height: 1.85; color: var(--text-2); max-width: 54ch; }
.nf__path { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; color: var(--text-3); line-height: 1.6; }
.nf__path code { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.nf__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--sp-6); }
.nf__art { position: relative; min-width: 0; color: var(--text-3); }
.nf__art svg { display: block; width: 100%; max-width: 520px; height: auto; margin-inline: auto; }
.nf-art__num { font-family: var(--font-head); font-weight: 800; fill: var(--text); }
.nf-art__deck { stroke: var(--text-2); stroke-width: 6; stroke-linecap: round; fill: none; }
.nf-art__arch { stroke: var(--accent); stroke-width: 4; fill: none; stroke-linecap: round; }
.nf-art__cable { stroke: var(--border-strong); stroke-width: 2; }
.nf-art__pier { fill: var(--surface-3); stroke: var(--border-strong); stroke-width: 1.5; }
.nf-art__water { stroke: var(--accent); stroke-width: 2; fill: none; opacity: .35; stroke-linecap: round; }
.nf-art__water--2 { opacity: .18; }
.nf-art__gap { stroke: var(--text-3); stroke-width: 2; stroke-dasharray: 4 7; fill: none; stroke-linecap: round; }
.nf-art__spark { stroke: var(--accent-ink); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.nf-art__dot { fill: var(--accent-ink); stroke: var(--bg); stroke-width: 3; }

.nf-body { padding-top: var(--sp-12); }
.nf-body__title { font-family: var(--font-head); font-size: var(--fs-xl); font-weight: 700; line-height: 1.45; }
.nf-body__lead { margin-top: 6px; color: var(--text-2); font-size: 15.5px; line-height: 1.8; }
.nf-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--sp-6); }
.nf-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--border); font-size: 14.5px; color: var(--text-3); line-height: 1.7; }
.nf-more a { color: var(--link); }
@media (max-width: 1099px) { .nf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .nf__grid { grid-template-columns: minmax(0, 1fr); }
  .nf__art { order: -1; }
  .nf__art svg { max-width: 420px; }
}
@media (max-width: 699px) {
  .nf__actions .btn { flex: 1 1 auto; }
  .nf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .nf-tiles .ttile { padding: 14px 12px; gap: 8px; }
  .nf-tiles .ttile__icon { width: 40px; height: 40px; border-radius: 12px; }
  .nf-tiles .ttile__title { font-size: 15px; line-height: 1.5; }
}

@media print {
  .info-links, .storage-panel__actions, .contact-card__actions, .nf__actions { display: none; }
}