/* shared.css — Holy Temple COGIC
   Base layout for the public membership pages (memberships.php,
   member_signup.php, member_complete_signup.php). Those pages came from
   another site whose stylesheet is not part of this one; this file gives
   their hero, breadcrumb and section blocks the Holy Temple navy and gold.
   Nothing else on the site loads this file. */

:root{ --ht-navy:#0F2A5C; --ht-navy-d:#081B3D; --ht-gold:#C9A227; --ht-gold-l:#E8C766; --ht-ivory:#FAF7F0; }

body{ margin:0; background:var(--ht-ivory); color:#1d2433; font-family:'Inter','Poppins',system-ui,sans-serif; }
.container{ max-width:1200px; margin:0 auto; padding:0 24px; box-sizing:border-box; }

/* ── Hero ── */
.page-hero{ position:relative; overflow:hidden; background:var(--ht-navy-d); color:#fff; }
.page-hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center;
  background-image:url('images/ht-church.jpg') !important; }
.page-hero-bg::after{ content:''; position:absolute; inset:0; background:rgba(8,27,61,.75) !important; }
.page-hero-inner{ position:relative; z-index:1; max-width:1100px; margin:0 auto; display:flex; flex-direction:column; }
.page-hero h1{ font-family:'Playfair Display',Georgia,serif; font-size:clamp(32px,4.4vw,54px); line-height:1.1; margin:0 0 14px; color:#fff; }
.page-hero p{ font-size:17px; line-height:1.7; margin:0 auto; max-width:640px; color:rgba(255,255,255,.88); }
.page-hero-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:26px; }

/* ── Buttons ── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 26px; border-radius:10px;
  font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
  border:2px solid transparent; transition:transform .15s, background .15s, color .15s; box-shadow:0 6px 18px -10px rgba(8,27,61,.45); }
.btn:hover{ transform:translateY(-1px); }
.btn-green{ background:var(--ht-gold); color:var(--ht-navy-d); }
.btn-green:hover{ background:var(--ht-gold-l); }
.btn-outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.7); }
.btn-outline:hover{ background:#fff; color:var(--ht-navy-d); }

/* ── Breadcrumbs ── */
.breadcrumb-bar{ background:#fff; border-bottom:1px solid rgba(15,42,92,.08); }
.breadcrumb-bar-inner{ max-width:1200px; margin:0 auto; padding:14px 24px; }
.breadcrumb{ font-size:13px; color:#5b6478; }
.breadcrumb a{ color:var(--ht-navy); text-decoration:none; font-weight:600; }
.breadcrumb a:hover{ color:var(--ht-gold); }
.breadcrumb .sep{ margin:0 8px; color:#a8afbd; }

/* ── Sections ── */
.sec{ padding:clamp(56px,7vw,96px) 0; }
.sec-white{ background:var(--ht-ivory); }
.sec-label{ font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--ht-gold); margin-bottom:10px; }
.sec-h2{ font-family:'Playfair Display',Georgia,serif; font-size:clamp(28px,3.4vw,42px); color:var(--ht-navy); margin:0; }

/* ── Closing call-to-action band ── */
.cta-band{ background:var(--ht-navy); color:#fff; text-align:center; padding:clamp(48px,6vw,80px) 0; }
.cta-band h2{ font-family:'Playfair Display',Georgia,serif; font-size:clamp(26px,3vw,38px); margin:0 0 10px; color:#fff; }
.cta-band p{ margin:0; color:rgba(255,255,255,.85); }

/* Reveal-on-scroll helpers: shown immediately. */
.rv{ opacity:1; transform:none; }