/* =============================================
   LEGAL PAGES (Privacy-Policy.html, Terms-And-Conditions.html, Section-172-Statement.html, Gender-Pay-Gap-Report.html) - standalone, on-brand.
   Reuses tokens + base styles from Variables.css.
   ============================================= */

/* --- Top bar ---
   Full width (owner, 2026-10-16: "make the page full width"): the wordmark at the left edge and Back to site at the
   right edge, on the same side margin as the page below. The logo is the homepage's own wordmark - VALLANCE in Ersen,
   red, the size and weight of the homepage header (Navbar.css .logo-text) - instead of the old Assets/Brand/Logo.svg
   (owner, 2026-10-16: "use the correct vallance logo"). Ersen's @font-face is in Variables.css; each page preloads it. */
.legal-header {
  background: var(--navy);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  position: sticky;
  top: 0;
  z-index: 100;
}
.legal-bar {
  padding: 0 60px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.legal-logo {
  display: inline-flex;
  align-items: center;
  height: 100%;
  flex-shrink: 0;
  line-height: 1;
}
.legal-logo-text {
  font-family: var(--logo);
  font-size: 46px;
  font-weight: 560;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red);
  white-space: nowrap;
  position: relative;
  top: .03em;              /* centres the capitals in the bar, as on the homepage */
}
.legal-back {
  font-family: var(--heading);
  font-size: .8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: rgba(255, 255, 255, .75);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.legal-back:hover { color: var(--white); }
.legal-back svg { width: 15px; height: 15px; }

/* --- Title band --- */
.legal-hero {
  background: var(--navy);
  color: var(--white);
  padding: 56px 40px 60px;
  text-align: center;
  border-bottom: 3px solid var(--red);
}
.legal-hero .eyebrow {
  font-family: var(--heading);
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--red);
  margin-bottom: 14px;
}
.legal-hero h1 {
  font-family: var(--heading);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin-bottom: 12px;
}
.legal-hero .updated { font-size: .875rem; color: rgba(255, 255, 255, .5); }

/* --- Reading column --- */
.legal-content {
  max-width: 820px;
  margin: 0 auto;
  padding: 64px 40px 96px;
  color: var(--g800);
  overflow-wrap: break-word;   /* a long email address breaks instead of widening the page on a narrow phone (audit 2026-10-09) */
}
.legal-content .intro {
  font-size: 1.0625rem;
  color: var(--g700);
  margin-bottom: 40px;
  line-height: 1.85;
}
.legal-content h2 {
  font-family: var(--heading);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--navy);
  margin: 48px 0 16px;
  letter-spacing: -.01em;
  scroll-margin-top: 88px;
}
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content h2 .num { color: var(--red); margin-right: 12px; }
.legal-content h3 {
  font-family: var(--heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  margin: 28px 0 10px;
}
.legal-content p { margin-bottom: 16px; line-height: 1.85; color: var(--g700); }
.legal-content ul, .legal-content ol { margin: 0 0 22px 24px; }
.legal-content li { margin-bottom: 10px; line-height: 1.75; color: var(--g700); }
.legal-content a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.legal-content a:hover { color: var(--red); }
.legal-content strong { color: var(--navy); font-weight: 700; }
.legal-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .875em;
  background: var(--off-white);
  border: 1px solid var(--g100);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--navy);
}

/* --- Full-width page (the Privacy Policy; owner, 2026-10-16: "make the page full width") ---
   The other legal pages keep the 820px reading column above. This one runs the full width of the window, on the same
   side margin as the bar. Of its five short sections, "Who we are" runs across the top and the other four sit two by
   two (the two long ones, then the two short ones), so the page fills the width without any line getting too long to
   read; on a phone they stack. (Six sections, three across, until section 3 was merged into 2 the same day.) */
.legal-content.legal-wide { max-width: none; padding: 64px 60px 96px; }
.legal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 80px; }
.legal-section { min-width: 0; padding-top: 28px; border-top: 1px solid var(--g100); }
.legal-section:first-child { grid-column: 1 / -1; }
.legal-section > :last-child { margin-bottom: 0; }
@media (max-width: 768px) {
  .legal-content.legal-wide { padding: 44px 24px 72px; }
  .legal-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

/* --- Contact / highlight box --- */
.legal-callout {
  background: var(--off-white);
  border: 1px solid var(--g100);
  border-left: 3px solid var(--red);
  border-radius: 6px;
  padding: 22px 28px;
  margin: 28px 0;
}
.legal-callout p { margin-bottom: 6px; }
.legal-callout p:last-child { margin-bottom: 0; }

/* --- "Don't count my visits" (Privacy Policy, "Cookies and visit counts") ---
   A small text link since 2026-10-16. The owner wants every visit counted, and chose this over removing the opt-out,
   because UK cookie rules let a site count visits without a consent pop-up only if people get a simple way to opt out.
   It is still a <button> (it does something, it goes nowhere), drawn as an underlined link in the small grey line that
   says what is happening now (#visitCountState) - Js/Visit-Counter.js writes both. Grey, not red: at this size the brand
   red is just under the contrast small text needs. No glow (owner rule).
   It must never set display: the script hides it (the hidden attribute) when the browser already asks not to be
   tracked, and the old button's display: inline-flex beat that, so it showed - doing nothing - for those visitors. */
.legal-content .visit-count-choice { font-size: .8125rem; line-height: 1.6; color: var(--g600); }
.legal-link-btn {
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.legal-link-btn:hover { color: var(--navy); }
.legal-link-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 2px; }
.legal-link-btn[hidden] { display: none; }

/* --- Placeholder markers the owner must fill before publishing --- */
.legal-todo {
  background: rgba(237, 28, 36, .1);
  color: var(--red);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: .95em;
}

/* --- Data tables (privacy cookie table, gender pay figures) --- */
.legal-table-wrap { overflow-x: auto; margin: 6px 0 24px; }
.legal-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.legal-table th, .legal-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--g100);
  vertical-align: top;
}
.legal-table th {
  font-family: var(--heading);
  font-weight: 700;
  color: var(--navy);
  background: var(--off-white);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.legal-table td { color: var(--g700); }
/* Row headers (gender pay quartiles) read as labels, not as a second header band. */
.legal-table tbody th {
  font-weight: 600;
  color: var(--g700);
  background: none;
  text-transform: none;
  letter-spacing: normal;
  font-size: .9rem;
}

/* --- Footer --- */
.legal-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, .55);
  padding: 40px;
  text-align: center;
  font-size: .8125rem;
}
.legal-footer nav {
  margin-bottom: 14px;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.legal-footer nav a {
  color: rgba(255, 255, 255, .75);
  padding: 4px 12px;
  border-radius: 4px;
  font-family: var(--heading);
  font-weight: 500;
}
.legal-footer nav a:hover { color: var(--white); background: rgba(255, 255, 255, .06); }

@media (max-width: 768px) {
  .legal-bar { padding: 0 24px; height: 70px; }
  .legal-logo-text { font-size: 36px; }   /* the homepage's size below 768px */
}
@media (max-width: 640px) {
  .legal-hero { padding: 40px 20px 48px; }
  .legal-content { padding: 44px 22px 72px; }
  .legal-content h2 { margin-top: 40px; }
}
/* Phones: the wordmark and a 44px back arrow, as the homepage keeps only its wordmark and one 44px button. "Back to
   site" stays the link's name for screen readers. The wordmark then shrinks only as much as it must: 100vw - 2 x 24px
   margin - 12px gap - 44px arrow = 100vw - 104px, and VALLANCE in Ersen is 8.25em wide (measured, see Responsive.css). */
@media (max-width: 520px) {
  .legal-bar { gap: 12px; }
  .legal-back { flex: 0 0 44px; width: 44px; height: 44px; justify-content: center; }
  .legal-back svg { width: 20px; height: 20px; }
  .legal-back-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .legal-logo-text { font-size: min(36px, calc((100vw - 104px) / 8.25)); }
}