/* ═══════════════════════════════════════════════════════════
   ON CALL EVENTS — LEGAL PAGES CSS (Privacy Policy, Terms of
   Service, Accessibility Statement — one stylesheet for all three)
   WordPress (WP Coder): paste this whole file ONCE into a CSS
   snippet → Auto Insert, Site Wide. Do NOT add <style> tags —
   WP Coder adds them for you. Everything is scoped to .oce-legal,
   so it can't affect the rest of the site.
   ═══════════════════════════════════════════════════════════ */

.oce-legal {
  --lg-ink: #131110; --lg-soft: #57503f; --lg-gold: #8a6519;
  --lg-line: rgba(19, 17, 16, 0.12); --lg-ivory: #faf7f0;
  box-sizing: border-box; max-width: 46rem; margin: 0 auto;
  padding: 4.5rem 1.5rem 6rem;
  font-family: "Outfit", -apple-system, "Segoe UI", sans-serif;
  font-weight: 300; font-size: 1.02rem; line-height: 1.75;
  color: var(--lg-ink); background: transparent;
}
.oce-legal * { box-sizing: border-box; }
.oce-legal .oce-legal__back {
  display: inline-block; margin-bottom: 2.5rem;
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none; color: var(--lg-gold);
}
.oce-legal .oce-legal__back:hover { text-decoration: underline; }
.oce-legal .oce-legal__kicker {
  margin: 0 0 0.6rem; font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--lg-gold);
}
.oce-legal h1 {
  margin: 0 0 0.5rem; font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500; font-size: clamp(2.3rem, 5vw, 3.2rem);
  line-height: 1.08; color: var(--lg-ink);
}
.oce-legal .oce-legal__updated {
  margin: 0 0 2.8rem; padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--lg-line);
  font-style: italic; color: var(--lg-soft); font-size: 0.95rem;
}
.oce-legal h2 {
  margin: 2.6rem 0 0.8rem; font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600; font-size: 1.65rem; line-height: 1.2; color: var(--lg-ink);
}
.oce-legal h3 {
  margin: 1.8rem 0 0.5rem; font-size: 1.02rem; font-weight: 600;
  letter-spacing: 0.02em; color: var(--lg-ink);
}
.oce-legal p { margin: 0 0 1.1rem; }
.oce-legal ul { margin: 0 0 1.3rem; padding-left: 1.1rem; }
.oce-legal li { margin: 0 0 0.55rem; padding-left: 0.35rem; }
.oce-legal li::marker { color: var(--lg-gold); }
.oce-legal a { color: var(--lg-gold); text-decoration: underline; text-underline-offset: 3px; }
.oce-legal a:hover { color: #6f5114; }
.oce-legal strong { font-weight: 600; }
.oce-legal .oce-legal__contact {
  margin: 1.2rem 0 0; padding: 1.4rem 1.6rem;
  background: var(--lg-ivory); border: 1px solid var(--lg-line);
  border-radius: 14px;
}
.oce-legal .oce-legal__cross {
  margin-top: 3.5rem; padding-top: 1.6rem; border-top: 1px solid var(--lg-line);
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem;
  font-size: 0.88rem; font-weight: 400;
}
.oce-legal .oce-legal__cross a { text-decoration: none; }
.oce-legal .oce-legal__cross a:hover { text-decoration: underline; }

/* #a1761f is 3.8:1 on ivory; the base gold #b98a2e was 2.91:1 and WCAG
   1.4.11 asks 3:1 of a focus indicator. */
.oce-legal :focus-visible { outline: 3px solid #a1761f; outline-offset: 2px; }

/* iOS paints a translucent block over whatever you tap. Over a gold gradient
   that reads as a white box around the button, which is what it looked like on
   a phone. Turned off here; the controls carry their own hover and pressed
   states, so nothing is lost. */
.oce-legal a, .oce-legal button, .oce-legal [tabindex], .oce-legal summary, .oce-legal label {
  -webkit-tap-highlight-color: transparent;
}

/* A pointer should not leave a ring behind either. Tapping sets :focus, and the
   browser draws its own box for that - dark on a light ground, light on a dark
   one, which is the black square seen around a colour swatch and the white one
   around a gold button. The keyboard ring above is untouched.

   Written as :focus:not(:focus-visible) deliberately: a browser too old to know
   :focus-visible treats the whole selector as invalid and drops the rule, so
   the default ring stays rather than vanishing for everyone. */
.oce-legal :focus:not(:focus-visible) { outline: none; }