/* ═══════════════════════════════════
   GSJA Betlehem Redesign — Shared CSS
   ═══════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  --cream: #F7F3EE;
  --cream-dark: #EDE6DB;
  --gold: #B8935A;
  --gold-light: #D4AA72;
  --gold-pale: #F0E4CC;
  --dark: #1A1612;
  --dark-mid: #2E2820;
  --dark-soft: #4A4038;
  --muted: #7A6E64;
  --white: #FFFFFF;
  --nav-h: 60px;
  --px: 20px;
  --r: 4px;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body { font-family: 'DM Sans', system-ui, -apple-system, sans-serif; background: var(--cream); color: var(--dark); overflow-x: hidden }
img { max-width: 100%; display: block }
a { color: inherit; text-decoration: none }

/* ── NAV ── */
nav.main-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--nav-h); display: flex; align-items: center;
  justify-content: space-between; padding: 0 var(--px);
  background: rgba(247,243,238,.96); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(184,147,90,.15);
}
.nav-logo { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 600; color: var(--dark) }
.nav-logo span { color: var(--gold) }
.nav-desktop { display: none; align-items: center; gap: 24px; list-style: none }
.nav-desktop a { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dark-soft); transition: color .2s }
.nav-desktop a:hover, .nav-desktop a.active { color: var(--gold) }
.nav-cta-desk { background: var(--gold) !important; color: var(--white) !important; padding: 8px 16px; border-radius: var(--r); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase }
.hamburger { background: none; border: none; cursor: pointer; padding: 8px; display: flex; flex-direction: column; gap: 5px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center }
.hamburger span { display: block; width: 22px; height: 1.5px; background: var(--dark); transition: all .25s; transform-origin: center }
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg) }
.hamburger.open span:nth-child(2) { opacity: 0 }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg) }
.mobile-menu { display: none; position: fixed; inset: 0; top: var(--nav-h); z-index: 150; background: rgba(247,243,238,.98); backdrop-filter: blur(16px); flex-direction: column; padding: 24px var(--px) 32px; overflow-y: auto }
.mobile-menu.open { display: flex }
.mobile-menu a { font-size: 26px; font-family: 'Cormorant Garamond', serif; font-weight: 600; color: var(--dark); padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,.06); transition: color .2s; display: block }
.mobile-menu a:hover { color: var(--gold) }
.m-cta { margin-top: 24px; background: var(--gold); color: var(--white) !important; text-align: center; padding: 16px; border-radius: var(--r); font-size: 14px; font-family: 'DM Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase; border-bottom: none !important }

/* ── PAGE HERO ── */
.page-hero { padding-top: var(--nav-h); background: var(--dark); position: relative; overflow: hidden }
.page-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gold) }
.hero-inner { padding: 44px var(--px) 40px; position: relative; z-index: 2 }
.breadcrumb { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.28); margin-bottom: 14px }
.breadcrumb a { color: var(--gold-light) }
.page-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(36px,10vw,64px); font-weight: 600; color: var(--white); line-height: 1.05; margin-bottom: 10px }
.page-title em { font-style: italic; color: var(--gold) }
.page-sub { font-size: 14px; color: rgba(255,255,255,.42); line-height: 1.7; max-width: 480px }

/* ── SHARED SECTIONS ── */
.sec { padding: 44px var(--px) }
.lbl { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 10px; margin-bottom: 10px }
.lbl::before { content: ''; width: 24px; height: 1px; background: var(--gold); flex-shrink: 0 }
.lbl-w { color: var(--gold-light) }
.lbl-w::before { background: var(--gold-light) }
.ttl { font-family: 'Cormorant Garamond', serif; font-size: clamp(26px,7vw,40px); font-weight: 600; line-height: 1.1; color: var(--dark); margin-bottom: 16px }
.ttl em { font-style: italic; color: var(--gold) }
.ttl-w { color: var(--white) }
.body-t { font-size: 14px; line-height: 1.8; color: var(--muted); margin-bottom: 16px }

/* ── BUTTONS ── */
.btn-dark { display: flex; align-items: center; justify-content: center; background: var(--dark); color: var(--white); padding: 14px 20px; border-radius: var(--r); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; min-height: 48px; transition: background .2s }
.btn-dark:hover { background: var(--gold) }
.btn-ol { display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--dark); color: var(--dark); padding: 14px 20px; border-radius: var(--r); font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; min-height: 48px; transition: all .2s }
.btn-ol:hover { background: var(--dark); color: var(--white) }

/* ── CTA SECTION ── */
.cta { background: var(--gold); padding: 44px var(--px); text-align: center }
.cta h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(26px,7vw,38px); font-weight: 600; color: var(--white); line-height: 1.15; margin-bottom: 8px }
.cta h2 em { font-style: italic }
.cta p { font-size: 14px; color: rgba(255,255,255,.75); margin-bottom: 22px; line-height: 1.6 }
.cta-btns { display: flex; flex-direction: column; gap: 10px }
.btn-w { display: flex; align-items: center; justify-content: center; background: var(--white); color: var(--gold); padding: 14px 20px; border-radius: var(--r); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; min-height: 48px }
.btn-gw { display: flex; align-items: center; justify-content: center; border: 1.5px solid rgba(255,255,255,.6); color: var(--white); padding: 13px 20px; border-radius: var(--r); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; min-height: 48px }

/* ── FULL FOOTER ── */
footer.main-footer { background: var(--dark); padding: 44px var(--px) 28px }
.f-logo { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 600; color: var(--white); display: block; margin-bottom: 10px }
.f-logo span { color: var(--gold) }
.f-about { font-size: 13px; color: rgba(255,255,255,.33); line-height: 1.7; margin-bottom: 20px }
.f-socials { display: flex; gap: 10px; margin-bottom: 32px; flex-wrap: wrap }
.soc { width: 44px; height: 44px; border-radius: var(--r); border: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; transition: border-color .2s }
.soc:hover { border-color: var(--gold) }
.soc svg { width: 16px; height: 16px; fill: rgba(255,255,255,.42); transition: fill .2s }
.soc:hover svg { fill: var(--gold) }
.f-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; margin-bottom: 32px }
.f-col h4 { font-size: 10px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px }
.f-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px }
.f-col ul a { font-size: 13px; color: rgba(255,255,255,.38); transition: color .2s; padding: 3px 0; display: block; min-height: 30px }
.f-col ul a:hover { color: var(--white) }
.f-bottom { border-top: 1px solid rgba(255,255,255,.06); padding-top: 20px }
.f-bottom p { font-size: 11px; color: rgba(255,255,255,.2) }

/* ── FOOTER MINI ── */
.foot-mini { background: var(--dark); padding: 28px var(--px); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px }
.foot-mini p { font-size: 12px; color: rgba(255,255,255,.25) }
.foot-mini a { color: var(--gold-light); font-size: 12px; min-height: 44px; display: flex; align-items: center }

/* ── BREAKPOINTS ── */
@media (min-width: 600px) {
  :root { --px: 5vw }
  .cta-btns { flex-direction: row; justify-content: center }
  .btn-w, .btn-gw { display: inline-flex; width: auto }
  .f-cols { grid-template-columns: repeat(3, 1fr) }
}

@media (min-width: 900px) {
  :root { --nav-h: 72px }
  .nav-desktop { display: flex }
  .hamburger { display: none }
  .sec { padding: 80px var(--px) }
  .cta { text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 56px 6vw }
  .cta p { margin-bottom: 0 }
  .cta-btns { flex-shrink: 0 }
  footer.main-footer { padding: 64px 6vw 36px }
}