/* ═══════════════════════════════════════════════════════════
   ON CALL EVENTS — FOOTER CSS (site footer)
   WordPress (WP Coder): paste this whole file into a CSS snippet.
   Do NOT add <style> tags — WP Coder adds them for you.
   ═══════════════════════════════════════════════════════════ */

/* base tokens (duplicated per part on purpose — harmless in WP) */
.oce {
  --oce-ivory: #faf7f0; --oce-ivory2: #f1ecdf; --oce-ink: #131110; --oce-ink2: #221e19;
  --oce-soft: #57503f; --oce-gold: #b98a2e; --oce-gold2: #dcb96e; --oce-champagne: #f2dcae;
  --oce-line: rgba(19,17,16,0.1);
  --oce-gold-ink: #8a6519; --oce-gold-head: #a1761f;
  --oce-serif: "Cormorant Garamond", Georgia, serif;
  --oce-sans: "Outfit", -apple-system, "Segoe UI", sans-serif;
  --oce-ease: cubic-bezier(0.22, 1, 0.36, 1);
  font-family: var(--oce-sans); font-weight: 300; color: var(--oce-ink);
  line-height: 1.65; font-size: 16px; -webkit-font-smoothing: antialiased;
}
.oce-f *, .oce-f *::before, .oce-f *::after { margin: 0; padding: 0; box-sizing: border-box; }
.oce h1, .oce h2, .oce h3 { font-family: var(--oce-serif); font-weight: 600; line-height: 1.06; letter-spacing: -0.01em; }
.oce h2 em { font-style: italic; color: var(--oce-gold-head); }
.oce a { color: inherit; text-decoration: none; }
.oce button { font-family: inherit; cursor: pointer; }
.oce ::selection { background: var(--oce-gold2); color: var(--oce-ink); }
.oce .oce-kicker {
  font-size: 0.7rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--oce-gold-ink); font-weight: 600; display: inline-flex; align-items: center; gap: 0.9rem;
}
.oce .oce-kicker::before { content: ""; width: 2.2rem; height: 1px; background: currentColor; opacity: 0.5; }
.oce .oce-kicker--light { color: var(--oce-gold2); }
.oce .oce-btn {
  position: relative; display: inline-block; padding: 1rem 2.6rem; border-radius: 100px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid transparent; overflow: hidden; will-change: transform;
  transition: transform 0.5s var(--oce-ease), box-shadow 0.5s var(--oce-ease), background 0.3s, color 0.3s;
}
.oce .oce-btn--gold {
  background: linear-gradient(120deg, var(--oce-gold) 0%, var(--oce-gold2) 55%, var(--oce-gold) 100%);
  background-size: 200% 100%; color: #fff; box-shadow: 0 14px 34px -12px rgba(185,138,46,0.6);
}
.oce .oce-btn--gold:hover { background-position: 100% 0; box-shadow: 0 20px 44px -12px rgba(185,138,46,0.72); }
/* The ghost variant MUST live beside the base rule above. This file is loaded
   last on any page with a footer, so a base rule here without its modifiers
   overwrites the ones the header and middle set — which is what erased the
   hero's "Plan My Event" border and left it as floating text. */
.oce .oce-btn--ghost { border-color: rgba(250,247,240,0.4); color: var(--oce-ivory); }
.oce .oce-btn--ghost:hover { background: var(--oce-ivory); color: var(--oce-ink); border-color: var(--oce-ivory); }
.oce .oce-btn--full { width: 100%; border: 0; }
.oce .oce-reveal { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--oce-ease), transform 1s var(--oce-ease); }
.oce .oce-reveal.oce-in { opacity: 1; transform: none; }

/* ── Footer ──────────────────────────────────────────────── */
.oce-footer {
  background: var(--oce-ink); color: rgba(250,247,240,0.7); text-align: center;
  padding: 4.5rem 1.5rem 2.5rem;
  /* the page now runs under iOS's bottom bar, so the fine print has to sit
     above the home indicator rather than behind it */
  padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px));
}
/* on a phone the fixed action bar floats over this, so leave it room */
@media (max-width: 860px) {
  .oce-footer { padding-bottom: calc(2.5rem + 4.75rem + env(safe-area-inset-bottom, 0px)); }
}
.oce-footer__brand { font-family: var(--oce-serif); font-size: 2rem; font-weight: 600; color: var(--oce-ivory); }
.oce-footer__brand em { font-style: italic; color: var(--oce-gold2); }
.oce-footer__tag { font-size: 0.76rem; letter-spacing: 0.22em; text-transform: uppercase; margin: 0.85rem 0 1.7rem; }
/* ── How to reach us ── */
.oce-footer__contact { display: grid; justify-items: center; gap: 0.55rem; margin-bottom: 2.1rem; }
/* These need two classes to beat ".oce a { color: inherit }" (0,1,1);
   with one class the links quietly fall back to the footer's dimmer text. */
.oce .oce-footer__phone {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--oce-serif); font-size: 1.7rem; font-weight: 600; color: var(--oce-ivory);
  /* line-height 1 keeps the text's box the height of the glyphs, so centring
     the icon against it lands where the eye expects. The inherited 1.65
     leaves tall empty space above and below the number. */
  line-height: 1; padding: 0.4rem 0.6rem; transition: color 0.3s;
}
.oce-footer__phone-num { display: block; }
.oce-footer__phone svg {
  width: 1.15rem; height: 1.15rem; flex: none; display: block; color: var(--oce-gold2);
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.oce .oce-footer__phone:hover { color: var(--oce-gold2); }
.oce .oce-footer__mail { font-size: 0.9rem; color: rgba(250,247,240,0.85); padding: 0.35rem 0.5rem; transition: color 0.3s; }
.oce .oce-footer__mail:hover { color: var(--oce-gold2); }
.oce-footer__area { font-size: 0.78rem; color: rgba(250,247,240,0.6); max-width: 26rem; }

.oce-footer__links { display: flex; gap: 1.9rem; justify-content: center; flex-wrap: wrap; font-size: 0.85rem; margin-bottom: 2.2rem; }
/* text links were 20-22px tall; the padding brings the tap area to 44px
   without moving anything visually, since the row is centred */
.oce-footer__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.2rem; transition: color 0.3s; }
.oce-footer__links a:hover { color: var(--oce-gold2); }
.oce-footer__rule { width: 4rem; height: 1px; background: rgba(220,185,110,0.4); margin: 0 auto 1.6rem; border: 0; }
.oce-footer__links--legal { font-size: 0.76rem; margin-bottom: 1.4rem; }
.oce-footer__fine { font-size: 0.72rem; color: rgba(250,247,240,0.62); }

@media (prefers-reduced-motion: reduce) {
  .oce .oce-reveal { opacity: 1; transform: none; }
}


/* keyboard focus is always visible (WCAG 2.4.7) */
.oce a:focus-visible, .oce button:focus-visible, .oce input:focus-visible,
.oce textarea:focus-visible, .oce [tabindex]:focus-visible {
  /* #a1761f: 3.8:1 on ivory, 3.95:1 on the dark bands. The base gold #b98a2e
     was 2.91:1 and WCAG 1.4.11 wants 3:1 of a focus indicator. */
  outline: 3px solid #a1761f; outline-offset: 2px; border-radius: 4px;
}

/* 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 a, .oce button, .oce [tabindex], .oce summary, .oce 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 :focus:not(:focus-visible) { outline: none; }

/* iOS press-and-hold on a link opens a preview menu, and while it is open the
   system draws a white card behind the link and highlights the text inside it.
   Over a gold gradient that reads as a white box around the button. Nothing can
   restyle that card - the only control is whether the menu appears.

   These three are actions, not addresses: "open in new tab" means nothing for
   Get a Quote or a tel: link you already tap to dial. So the menu is turned off
   for them, which takes the white card with it. Plain text links - the nav
   items, the footer links, the footer phone and email - deliberately keep it,
   because copying a link or a number there is genuinely useful.

   user-select goes too: long-press was also selecting the button's label. */
.oce .oce-btn, .oce .oce-nav__cta, .oce .oce-callbar__btn {
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
}