/* Outreach Center Church — shared site styles */
@import url("/assets/css/fonts.css");

/* ---- Design tokens: Outreach Center Church Design System (tokens.css + components/bundle.css, Nov 2026) ---- */
:root {
  /* Palette */
  --oc-navy: #153159; --oc-slate: #455f7f; --oc-olive: #9ba579; --oc-mist: #d5dfe0; --oc-parchment: #f1f0e7;
  --oc-ember: #e05d3f; --oc-tan: #c39a6a; --oc-white: #ffffff; --oc-navy-deep: #0e2440; --oc-olive-soft: #b6bd9c;
  --oc-ember-deep: #c74d32; --oc-mist-soft: #e6ecec;
  /* Surfaces, text, accents */
  --surface-page: var(--oc-parchment); --surface-card: var(--oc-white); --surface-raised: var(--oc-mist-soft);
  --surface-inverse: var(--oc-navy); --surface-accent: var(--oc-ember);
  --text-heading: var(--oc-navy); --text-body: #2c3a4d; --text-muted: #5f6f80; --text-inverse: var(--oc-parchment); --text-on-accent: var(--oc-parchment);
  --accent: var(--oc-ember); --accent-hover: var(--oc-ember-deep); --link: var(--oc-slate); --link-hover: var(--oc-navy);
  --border-subtle: #dfddd2; --border-strong: #c6c3b4; --border-width: 1px; --focus-ring: var(--oc-slate); --success: var(--oc-olive); --danger: #a83232;
  --shadow-card: 0 1px 3px rgba(21,49,89,.08),0 4px 16px rgba(21,49,89,.07); --shadow-raised: 0 8px 32px rgba(21,49,89,.16);
  /* Spacing, radius */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-pill: 999px;
  /* Type */
  --font-display: "Lora", Georgia, serif; --font-sans: "Montserrat", -apple-system, sans-serif; --font-condensed: "Barlow Condensed", sans-serif;
  --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 19px; --text-xl: 24px; --text-2xl: 32px; --text-3xl: 44px; --text-4xl: 60px;
  --eyebrow-tracking: 0.18em;
  --text-h1: 700 60px/1.08 var(--font-display); --text-h2: 700 44px/1.12 var(--font-display); --text-h3: 700 32px/1.2 var(--font-display);
  --text-h4: 700 24px/1.3 var(--font-display); --text-body-lg: 400 19px/1.65 var(--font-sans); --text-label: 700 14px/1.2 var(--font-sans);
  --text-eyebrow: 700 14px/1.2 var(--font-sans); --text-condensed-lg: 600 19px/1.3 var(--font-condensed);
  --font-h1: 700 var(--text-4xl)/1.08 var(--font-display); --font-h2: 700 var(--text-3xl)/1.12 var(--font-display);
  --font-h3: 700 var(--text-2xl)/1.2 var(--font-display); --font-h4: 700 var(--text-xl)/1.3 var(--font-display);
  --font-body: 400 var(--text-base)/1.65 var(--font-sans); --font-body-lg: 400 var(--text-lg)/1.65 var(--font-sans);
  --font-label: 700 var(--text-sm)/1.2 var(--font-sans); --font-eyebrow: 700 var(--text-sm)/1.2 var(--font-sans);
  --font-condensed-lg: 600 var(--text-lg)/1.3 var(--font-condensed);
  /* Motion */
  --ease-standard: cubic-bezier(.4,0,.2,1); --dur-fast: 120ms; --dur-base: 200ms;
}

/* ---- Base element styles (design system) ---- */
body { font: var(--font-body); color: var(--text-body); background: var(--surface-page); margin: 0; }
h1 { font: var(--font-h1); color: var(--text-heading); margin: 0; }
h2 { font: var(--font-h2); color: var(--text-heading); margin: 0; }
h3 { font: var(--font-h3); color: var(--text-heading); margin: 0; }
h4 { font: var(--font-h4); color: var(--text-heading); margin: 0; }
a { color: var(--link); text-decoration-color: color-mix(in oklab,var(--link) 40%,transparent); transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--link-hover); }
::selection { background: var(--oc-mist); }

/* Type style classes (design system) */
.h1 { font: var(--text-h1); } .h2 { font: var(--text-h2); } .h3 { font: var(--text-h3); } .h4 { font: var(--text-h4); }
.body-lg { font: var(--text-body-lg); } .body { font: var(--font-body); } .label { font: var(--text-label); }
.eyebrow { font: var(--text-eyebrow); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; }
.condensed-lg { font: var(--text-condensed-lg); }

/* ---- Site layout ---- */
@media print {
  @page { margin: 0.5cm; }
  figure, table { break-inside: avoid; }
  #dc-root, #dc-root > .sc-host { height: auto; }
  *, ::before, ::after { print-color-adjust: exact; backdrop-filter: none !important; animation-delay: -99s !important; animation-duration: 0.001s !important; animation-iteration-count: 1 !important; animation-fill-mode: both !important; animation-play-state: running !important; transition-duration: 0s !important; }
}
html, body { height: 100%; margin: 0px; }
#dc-root, #dc-root > .sc-host { height: 100%; }
body { margin: 0px; background: var(--surface-page); }
a { color: var(--link); text-decoration: none; }
occ-header .occ-mnavbtn { display: none; }
occ-header .occ-skip { position: absolute; left: 16px; top: -52px; z-index: 200; background: var(--oc-parchment); color: var(--oc-navy); padding: 10px 16px; border-radius: 0px 0px 8px 8px; font: 700 13px/1 var(--font-sans); text-decoration: none; transition: top 0.15s; }
occ-header .occ-skip:focus { top: 0px; }
occ-header .occ-dnav a:hover { color: var(--oc-parchment); }
occ-header .occ-give:hover { background: var(--accent-hover); }
@media (max-width: 1000px) {
  occ-header .occ-dnav { display: none !important; }
  occ-header .occ-mnavbtn { display: flex !important; }
}
occ-footer a:hover { color: var(--oc-parchment); }
occ-footer .occ-soc:hover { background: var(--accent) !important; color: var(--oc-parchment) !important; }
@media (max-width: 860px) {
  occ-footer .occ-fgrid { grid-template-columns: 1fr !important; }
}

/* Button hover states */
.bh-054a2b:hover{background: var(--oc-mist) !important}
.bh-11134f:hover{background: var(--oc-navy) !important;color: var(--text-inverse) !important}
.bh-ab5c63:hover{background: var(--oc-navy-deep) !important}
.bh-e849a8:hover{background: var(--accent-hover) !important}