/*
=============================================================
  DURHAM COUNTY GOLF UNION — style.css  SHARED STYLESHEET
=============================================================
  v1.0 — 08 Apr 2026 — Derived from Wearside Golf Club stylesheet
                        Recoloured for DCGU maroon/gold brand
=============================================================
*/

/* ── RESET & ROOT ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:       #0f1f2e;
  --navy2:      #0a1520;
  --maroon:     #7a1a1a;
  --maroon2:    #5a1010;
  --gold:       #c9a84c;
  --gold-lt:    #d4b86a;
  --white:      #ffffff;
  --off-white:  #faf8f5;
  --light-grey: #f0ede8;
  --text:       #1e1a16;
  --text-muted: #6b5e52;
  --border:     #e2ddd6;
  --radius:     12px;
  --shadow:     0 20px 40px rgba(0,0,0,0.12);
}

html, body {
  margin: 0; padding: 0; width: 100%;
  overflow-x: hidden;
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  line-height: 1.6;
  background: var(--off-white);
}

/* ── LOGO ── */
.site-logo {
  position: fixed;
  top: 0; left: 2rem;
  z-index: 1001;
  height: 88px;
  display: flex;
  align-items: center;
  text-decoration: none;
}
.site-logo img { height: 70px; width: auto; display: block; }

/* ── NAVBAR ── */
/* No solid bar ever — just a soft dark-to-transparent gradient at the top
   so the white nav links stay readable over the hero. */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: transparent;
  z-index: 1000;
  padding: 0;
}
.nav-container {
  width: 100%; padding: 0 2rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2rem;
  height: 88px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
}
/* Site logo fades as hero scrolls out of view */
.site-logo { transition: opacity 0.4s ease, visibility 0.4s ease; }
body.scrolled .site-logo { opacity: 0; visibility: hidden; pointer-events: none; }
.nav-top-link {
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: color 0.2s ease;
  background: none; border: none;
  cursor: pointer; font-family: 'Futura PT', 'DM Sans', sans-serif;
}
.nav-top-link:hover { color: var(--gold); }
/* ── FUTURA PT ── */
@font-face {
  font-family: 'Futura PT';
  src: url('fonts/FuturaCyrillicLight.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Futura PT';
  src: url('fonts/FuturaCyrillicBook.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Futura PT';
  src: url('fonts/FuturaCyrillicMedium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Futura PT';
  src: url('fonts/FuturaCyrillicDemi.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Futura PT';
  src: url('fonts/FuturaCyrillicBold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

.menu-toggle {
  display: flex; align-items: center; gap: 0.6rem;
  background: none; border: none;
  color: rgba(255,255,255,0.9);
  font-family: 'Futura PT', 'DM Sans', sans-serif;
  font-size: 1.1rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; padding: 0;
  transition: color 0.2s ease;
}
.menu-toggle:hover { color: var(--gold); }
.hamburger { display: flex; flex-direction: column; gap: 5px; width: 28px; }
.hamburger span {
  display: block; height: 2px;
  background: rgba(255,255,255,0.9);
  border-radius: 2px;
  width: 100%;
  transition: width 0.25s ease;
}
.menu-toggle:hover .hamburger span:first-child { width: 50%; }
.menu-toggle:hover .hamburger span:nth-child(2)  { width: 100%; }
.menu-toggle:hover .hamburger span:last-child  { width: 66%; }

/* ── OVERLAY MENU ── */
.menu-overlay {
  position: fixed; inset: 0;
  z-index: 2000;
  display: flex;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 0.5s;
}
.menu-overlay.open {
  pointer-events: all;
  visibility: visible;
  transition: visibility 0s linear 0s;
}
.menu-panel {
  width: 520px; flex-shrink: 0;
  background: #1a1a1a;
  display: flex; flex-direction: column;
  justify-content: flex-start;
  padding: 5rem 3.5rem 3rem;
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.77,0,0.175,1);
  overflow-y: auto; position: relative;
  margin-left: auto;
}
.menu-overlay.open .menu-panel { transform: translateX(0); }
.menu-close {
  position: absolute; top: 2rem; right: 2rem;
  background: none; border: none; color: white;
  font-family: 'Futura PT', sans-serif;
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  cursor: pointer;
  display: flex; align-items: center; gap: 0.5rem;
  opacity: 0.6; transition: opacity 0.2s;
}
.menu-close:hover { opacity: 1; }
.menu-close-x { font-size: 1.3rem; line-height: 1; font-weight: 300; }

/* Accordion */
.overlay-accordion { display: flex; flex-direction: column; margin-bottom: 2.5rem; }
.acc-item { border-bottom: 1px solid rgba(255,255,255,0.08); }
.acc-heading {
  width: 100%; background: none; border: none;
  display: flex; align-items: center; justify-content: space-between;
  color: white; text-decoration: none;
  font-family: 'Futura PT', sans-serif;
  font-size: 1.6rem; font-weight: 400;
  letter-spacing: 0.01em;
  padding: 1rem 0;
  cursor: pointer; text-align: left;
  transition: color 0.2s;
}
.acc-heading--link { display: block; text-decoration: none; }
.acc-heading:hover { color: var(--gold); }
.acc-arrow {
  font-family: 'Futura PT', sans-serif;
  font-size: 1.4rem; font-weight: 300;
  color: var(--gold); line-height: 1; flex-shrink: 0;
}
.acc-body {
  display: flex; flex-direction: column;
  max-height: 0; overflow: hidden;
  transition: max-height 0.35s ease;
}
.overlay-sub-link {
  color: rgba(255,255,255,0.65); text-decoration: none;
  font-family: 'Futura PT', sans-serif;
  font-size: 1rem; font-weight: 400;
  padding: 0.45rem 0;
  transition: color 0.2s ease; display: block;
}
.overlay-sub-link:last-child { padding-bottom: 1rem; }
.overlay-sub-link:hover { color: white; }

/* Utility links — Futura PT */
.overlay-utility-links {
  display: flex; flex-direction: column; gap: 0.6rem;
  margin-bottom: 2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 1.5rem;
}
.overlay-utility-link {
  color: var(--gold); text-decoration: none;
  font-family: 'Futura PT', 'DM Sans', sans-serif;
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  transition: opacity 0.2s;
  background: none; border: none; cursor: pointer;
  text-align: left; padding: 0;
}
.overlay-utility-link:hover { opacity: 0.65; }
.overlay-divider { border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 1.5rem 0; }
.overlay-footer { padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.08); }
.overlay-logo { height: 60px; width: auto; margin-bottom: 1.25rem; opacity: 0.9; }
.overlay-phone { font-family: 'Futura PT', sans-serif; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.65); margin-bottom: 0.2rem; }
.overlay-credit { font-size: 0.75rem; color: var(--gold); letter-spacing: 0.08em; text-transform: uppercase; }

/* ── PAGE HERO (inner pages) ── */
.page-hero {
  position: relative;
  background-color: #1a0a0a;
  background-image: var(--hero-img, none);
  background-size: cover;
  background-position: center;
  min-height: 42vh;
  min-height: 42svh;
  min-height: 42dvh;
  padding: 9rem 2rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  /* Stronger darkening behind centred title: radial vignette + bottom gradient */
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.45) 100%);
  z-index: -1;
  pointer-events: none;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero-eyebrow {
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.85), 0 0 16px rgba(0,0,0,0.6);
}
.page-hero-title {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 400; color: white; line-height: 1.1;
  text-shadow: 0 2px 12px rgba(0,0,0,0.9), 0 0 30px rgba(0,0,0,0.7);
}
.page-hero-title em { font-style: italic; color: var(--gold); }

/* ── ANCHOR NAV ── */
.anchor-nav {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 110px; z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  /* Right-edge fade hints scrollable content on narrow screens */
  -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(to right, black 0, black calc(100% - 24px), transparent 100%);
}
.anchor-nav-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; justify-content: center;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none; /* Firefox */
}
.anchor-nav-inner::-webkit-scrollbar { display: none; } /* WebKit */
.anchor-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 1.25rem 2rem;
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
  scroll-snap-align: start;
}
.anchor-link:hover { color: var(--maroon); border-bottom-color: var(--gold); }

@media (max-width: 700px) {
  .anchor-nav { -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 32px), transparent 100%);
                        mask-image: linear-gradient(to right, black 0, black calc(100% - 32px), transparent 100%); }
  .anchor-nav-inner { justify-content: flex-start; padding: 0 0.5rem; }
  .anchor-link { padding: 1rem 1.1rem; font-size: 0.78rem; letter-spacing: 0.04em; }
}

/* ── SECTION BASE ── */
.section-inner { max-width: 1100px; margin: 0 auto; }
.section-eyebrow {
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1rem;
}
.section-heading {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400; line-height: 1.15;
  margin-bottom: 1.5rem; color: var(--maroon);
}
.section-heading em { font-style: italic; color: var(--gold); }
.section-body { font-size: 1.1rem; line-height: 1.85; color: var(--text-muted); }
.section-body.light { color: rgba(255,255,255,0.85); }

/* ── BUTTONS ── */
.btn-cta {
  background: var(--maroon); color: white;
  padding: 0.85rem 2rem; border-radius: 9999px;
  font-family: 'Futura PT', 'DM Sans', sans-serif;
  font-weight: 500; font-size: 0.95rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; transition: all 0.2s ease;
  white-space: nowrap; border: none; cursor: pointer;
  display: inline-block;
}
.btn-cta:hover { background: var(--maroon2); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(122,26,26,0.35); }
.btn-cta-gold {
  background: var(--gold); color: var(--maroon);
  padding: 0.85rem 2rem; border-radius: 9999px;
  font-family: 'Futura PT', 'DM Sans', sans-serif;
  font-weight: 500; font-size: 0.95rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; transition: all 0.2s ease;
  white-space: nowrap; display: inline-block;
}
.btn-cta-gold:hover { background: #b8932e; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(201,168,76,0.4); }
.btn-outline {
  background: transparent; color: white;
  padding: 0.85rem 2rem; border-radius: 9999px;
  font-family: 'Futura PT', 'DM Sans', sans-serif;
  font-weight: 500; font-size: 0.95rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; transition: all 0.2s ease;
  white-space: nowrap; border: 2px solid rgba(255,255,255,0.6);
  display: inline-block;
}
.btn-outline:hover { border-color: white; background: rgba(255,255,255,0.1); }

/* ── NAV LINK STYLING (over transparent hero) ── */
.nav-top-link,
.menu-toggle {
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  color: white;
}
body.scrolled .nav-top-link,
body.scrolled .menu-toggle { text-shadow: none; }
body.homepage .menu-toggle .hamburger span {
  background: white;
}

/* ── 3PX GOLD TRANSITION BAR (below hero) ── */
.gold-bar { height: 3px; background: var(--gold); position: relative; z-index: 2; }

/* ── FOOTER ── */
/* ── SITE FOOTER (Brampton style) ── */
.site-footer { position: relative; overflow: hidden; }
.footer-bg { position: absolute; inset: 0; z-index: 0; }
.footer-bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; }
.footer-overlay { position: absolute; inset: 0; background: rgba(8,16,26,0.78); }
.footer-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: 5rem 2rem 4.5rem; text-align: center;
}
.footer-logo {
  height: 120px; width: auto;
  margin-bottom: 2rem;
}
.footer-address {
  font-family: 'Futura PT', 'DM Sans', sans-serif;
  font-size: 0.95rem; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: white;
  margin-bottom: 1rem;
}
.footer-contact {
  font-family: 'Futura PT', 'DM Sans', sans-serif;
  font-size: 0.95rem; font-weight: 400;
  letter-spacing: 0.1em;
  color: white;
  margin-bottom: 2.25rem;
  display: flex; align-items: center; gap: 0; flex-wrap: wrap; justify-content: center;
}
.footer-contact a { color: white; text-decoration: none; transition: color 0.2s; }
.footer-contact a:hover { color: var(--gold); }
.footer-sep { margin: 0 1rem; color: var(--gold); font-size: 0.5rem; }
.footer-socials { display: flex; gap: 1.75rem; align-items: center; }
.footer-social-link {
  color: white; transition: color 0.2s;
  display: flex; align-items: center;
}
.footer-social-link:hover { color: var(--gold); }
.footer-bar {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding: 1.25rem 3rem;
  font-family: 'Futura PT', 'DM Sans', sans-serif;
  font-size: 0.78rem; font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.footer-bar a { color: rgba(255,255,255,0.7); text-decoration: none; transition: color 0.2s; }
.footer-bar a:hover { color: var(--gold); }
.footer-bar-links { display: flex; align-items: center; gap: 0; }
.footer-legal {
  position: relative; z-index: 1;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 1rem 3rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  text-align: center;
  line-height: 1.6;
}
@media (max-width: 600px) {
  .footer-bar { flex-direction: column; text-align: center; padding: 1.5rem; gap: 0.75rem; }
  .footer-bar-links { flex-wrap: wrap; justify-content: center; }
  .footer-inner { padding: 3.5rem 1.5rem 3rem; }
  .footer-logo { height: 90px; }
}

/* ── RESPONSIVE ── */
@media (max-width: 899px) {
  .menu-panel { width: 100%; transform: translateX(0) translateY(100%); margin-left: 0; }
  .menu-overlay.open .menu-panel { transform: translateX(0) translateY(0); }
  .nav-top-link { display: none; }
  .site-logo { height: 80px; }
  .site-logo img { height: 64px; }
  .nav-container { height: 80px; }
}
@media (max-width: 767px) {
  .site-logo { height: 84px; left: 1rem; }
  .site-logo img { height: 70px; }
  .nav-container { height: 84px; }
}

/* =============================================
   SATELLITE MAP CONTACT SECTION (footer.php)
   ============================================= */
.contact-section-map {
  position: relative;
  height: 600px;
  overflow: hidden;
}
.contact-map-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: none;
  filter: brightness(0.75) saturate(1.1);
  pointer-events: none;
}
.contact-map-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 4rem 2rem;
  pointer-events: none;
}
.contact-map-card {
  background: rgba(15, 31, 46, 0.90);
  backdrop-filter: blur(8px);
  border-radius: var(--radius);
  padding: 2.5rem 3rem;
  max-width: 480px;
  pointer-events: all;
  border: 1px solid rgba(255,255,255,0.1);
}
.contact-map-card .contact-label {
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}
.contact-map-card .contact-value,
.contact-map-card .contact-value a {
  color: #444444;
  font-size: 0.9rem;
  text-decoration: none;
}
.contact-map-card .contact-value a:hover { color: var(--gold); }
.contact-map-card .contact-item {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  margin-bottom: 1.1rem;
}
.contact-map-card .contact-item:last-child { margin-bottom: 0; }
.contact-map-card .contact-icon { font-size: 1.1rem; margin-top: 0.1rem; }


/* =============================================
   SATELLITE MAP CONTACT SECTION (footer.php)
   ============================================= */
.contact-section-map {
  position: relative !important;
  height: 600px;
  overflow: hidden;
  display: block;
}
.contact-map-bg {
  position: absolute !important;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
  border: none;
  filter: brightness(0.75) saturate(1.1);
  pointer-events: none;
  z-index: 1;
}
.contact-map-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 4rem 2rem;
  z-index: 2;
}
.contact-map-card {
  background: rgba(15, 31, 46, 0.90);
  backdrop-filter: blur(8px);
  border-radius: var(--radius);
  padding: 2.5rem 3rem;
  max-width: 480px;
  border: 1px solid rgba(255,255,255,0.1);
}
.contact-map-card .contact-label {
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}
.contact-map-card .contact-value,
.contact-map-card .contact-value a {
  color: #444444;
  font-size: 0.9rem;
  text-decoration: none;
}
.contact-map-card .contact-value a:hover { color: var(--gold); }
.contact-map-card .contact-item {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  margin-bottom: 1.1rem;
}
.contact-map-card .contact-item:last-child { margin-bottom: 0; }
.contact-map-card .contact-icon { font-size: 1.1rem; margin-top: 0.1rem; }

@media (max-width: 600px) {
  .contact-section-map { height: 700px; }
  .contact-map-bg { height: 700px; }
  .contact-map-overlay { padding: 1.25rem; align-items: flex-start; padding-top: 1.5rem; }
  .contact-map-card { padding: 1.25rem 1.5rem; max-width: 100%; width: 100%; background: rgba(15,31,46,0.92); }
  .contact-map-card h2 { font-size: 1.5rem !important; margin-bottom: 1rem !important; }
  .contact-map-card .contact-item { margin-bottom: 0.75rem; }
  .contact-map-card .contact-value { font-size: 0.85rem; }
  .contact-map-card .contact-icon { font-size: 1rem; }
}

/* ── POLICY PAGES ── */
.policy-content { background: #fff; }
.policy-inner {
  max-width: 820px; margin: 0 auto;
  padding: 4rem 2rem 5rem;
}
.policy-intro {
  font-size: 1.1rem; line-height: 1.85;
  color: var(--text-muted); margin-bottom: 2.5rem;
  padding-bottom: 2rem; border-bottom: 1px solid var(--border);
}
.policy-inner h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.6rem; color: var(--maroon);
  margin: 2.5rem 0 0.75rem;
}
.policy-inner h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--maroon); margin: 1.75rem 0 0.5rem;
}
.policy-inner p { color: var(--text); line-height: 1.85; margin-bottom: 1rem; font-size: 0.97rem; }
.policy-inner ul { margin: 0.5rem 0 1rem 1.5rem; }
.policy-inner ul li { color: var(--text); line-height: 1.85; font-size: 0.97rem; margin-bottom: 0.35rem; }
.policy-inner a { color: var(--maroon); text-decoration: underline; }
.policy-inner a:hover { color: var(--gold); }
.policy-table {
  width: 100%; border-collapse: collapse;
  margin: 1.5rem 0 2rem; font-size: 0.9rem;
}
.policy-table th {
  background: var(--navy); color: white;
  padding: 0.75rem 1rem; text-align: left;
  font-family: 'Futura PT', sans-serif;
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.policy-table td {
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--border);
  color: var(--text); vertical-align: top;
}
.policy-table tr:last-child td { border-bottom: none; }
.policy-table tr:nth-child(even) td { background: var(--off-white); }
@media (max-width: 600px) {
  .policy-inner { padding: 2.5rem 1.25rem 3rem; }
  .policy-table { font-size: 0.82rem; }
  .policy-table th, .policy-table td { padding: 0.6rem 0.6rem; }
}

/* ── NAVY FRAMEWORK — structural colour overrides ──────────────
   Dark sections use navy as the structural background.
   Section headings and body text flip to white in this context.
   Table headers use navy across all table classes.
   Individual page inline .page-section.dark definitions are
   also updated but these rules act as the canonical source.
──────────────────────────────────────────────────────────────── */

/* Dark sections: navy background */
.page-section.dark { background: var(--navy); }

/* Text colour inversion inside dark sections */
.page-section.dark .section-heading { color: white; }
.page-section.dark .section-heading em { color: var(--gold); }
.page-section.dark .section-body { color: rgba(255,255,255,0.75); }
.page-section.dark .section-eyebrow { color: var(--gold); }

/* Anything with a direct <a> inside a dark section */
.page-section.dark > * a:not([class]) { color: var(--gold); }
.page-section.dark > * a:not([class]):hover { opacity: 0.8; }

/* Accent titles that sit DIRECTLY on a navy section (not inside a white card)
   become unreadable when they default to maroon. Flip those to gold.
   Only targets classes known to render outside a card. */
.page-section.dark .comp-info-title { color: var(--gold); }
.page-section.dark .comp-info-sub   { color: rgba(255,255,255,0.65); }

/* ── DCGU TABLE — single source of truth for every data table on the site ──
   All pages should mark data tables with class="dcgu-table". Per-page
   inline overrides should NOT redefine these properties. */
.dcgu-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  overflow: hidden; /* clips rounded corners against rows */
}
.dcgu-table thead th {
  background: var(--navy);
  color: white;
  text-align: left;
  padding: 0.9rem 1.25rem;
  font-family: 'Futura PT','DM Sans',sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dcgu-table td {
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
  color: var(--text);
  vertical-align: middle;
  background: white;
}
.dcgu-table tr:last-child td { border-bottom: none; }
.dcgu-table tbody tr:hover td { background: #fdf9f0; }
/* First column: bold maroon. Pages that already use a .td-name class on
   the first cell get the same treatment via the class. */
.dcgu-table tbody tr td:first-child,
.dcgu-table .td-name { font-weight: 700; color: var(--maroon); }

@media (max-width: 768px) {
  .dcgu-table td { padding: 0.7rem 0.85rem; font-size: 0.88rem; }
  .dcgu-table thead th { padding: 0.7rem 0.85rem; font-size: 0.72rem; }
}