:root{
  --ink:#1f2937;
  --muted:#4b5563;
  --paper:#ffffff;
  --blue:#A3C6E3;
  --blue-dark:#0b2540;
  --border:#d9e2ec;
  --radius:8px;
  --shadow:0 2px 8px rgba(0,0,0,.06);

  /* Fluid type & layout scale */
  --step--1: clamp(12px, 0.85rem + 0.2vw, 14px);
  --step-0:  clamp(14px, 0.95rem + 0.3vw, 16px);
  --step-1:  clamp(18px, 1.05rem + 0.6vw, 22px);
  --step-2:  clamp(22px, 1.2rem + 1.0vw, 28px);
  --step-3:  clamp(28px, 1.6rem + 1.5vw, 36px);
  --step-4:  clamp(34px, 2rem + 2.0vw, 46px);
  --container: min(1120px, 92vw);
  --gutter: clamp(12px, 2.5vw, 24px);

  --title-font: 'DIN 2014', 'DIN', Bahnschrift, Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  --label-font: 'Superclarendon', Clarendon, Rockwell, 'Roboto Slab', 'Noto Serif', Georgia, serif;
  --body-font: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
/* Licensed font hooks (provide files and uncomment) */
/*
@font-face { font-family:'Superclarendon'; src:url('../fonts/Superclarendon-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'DIN 2014'; src:url('../fonts/DIN2014-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'DIN 2014'; src:url('../fonts/DIN2014-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
*/
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: var(--body-font);
  color:var(--ink);
  background:#fff;
  line-height:1.55;
}
h1,h2,h3{font-family: Georgia, 'Times New Roman', serif}
a{color:var(--blue-dark);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width: var(--container); margin:0 auto; padding:0 var(--gutter)}

.topbar{background:var(--blue);border-bottom:1px solid #8fb4d3;position:sticky;top:0;z-index:40}
.navrow{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px;color:var(--blue-dark);font-weight:800;letter-spacing:.2px}

.links{display:flex;gap:14px}
.links a{color:var(--blue-dark);font-weight:600}
.navbtn{display:none}
@media (max-width:780px){
  .navbtn{display:inline-flex;background:#e7f0f8;border:1px solid #b7d0e4;color:var(--blue-dark);padding:6px 10px;border-radius:6px}
  .links{display:none;flex-direction:column;position:absolute;top:56px;right:20px;background:#fff;padding:10px;border:1px solid var(--border);border-radius:6px;box-shadow:var(--shadow)}
  .links.open{display:flex}
}

.banner{background:#f3f9ff;border-bottom:1px solid var(--border)}
.banner__inner{display:grid;grid-template-columns:1fr;gap:clamp(8px,2vw,18px);padding:26px 0}
@media(min-width:900px){.banner__inner{grid-template-columns:1.2fr .8fr}}
.banner__cap{display:inline-block;background:#d9e9f6;border:1px solid #b7d0e4;border-radius:999px;padding:6px 12px;color:#0b2540;font-weight:700;margin-bottom:8px}
.banner__cap .cap{font-family: var(--label-font); font-weight:700; letter-spacing:.04em}
.banner h1{margin:0;font-size: var(--step-4); letter-spacing:.02em; font-family: var(--title-font); font-weight:700; color:#0b2540}
.verse{color:var(--muted);margin:4px 0 0}
.banner__times{display:grid;grid-template-columns:1fr; gap: clamp(8px, 2.2vw, 14px)}
@media(min-width:880px){ .banner__times{grid-template-columns:1fr 1fr} }
.banner__times .timecol div{padding:6px 0;border-bottom:1px dashed #cfe0f0}
.banner__times .timecol div:last-child{border-bottom:none}
.mtimes-mobile{display:none;margin-top:10px;background:#fff;border:1px solid var(--border);border-radius:6px}
.mtimes-mobile summary{cursor:pointer;font-weight:700;padding:10px 12px;list-style:none}
.mtimes-mobile[open] summary{border-bottom:1px solid var(--border)}
.mtimes-mobile__list{padding:10px 12px}
.mtimes-mobile__list div{padding:6px 0;border-bottom:1px dashed #cfe0f0}
.mtimes-mobile__list div:last-child{border-bottom:none}
@media(max-width:640px){.mtimes-mobile{display:block}}
.mtimes-desktop{display:block}
@media(max-width:640px){.mtimes-desktop{display:none}}

.section{padding: clamp(24px, 4vw, 44px) 0}
.pagehead{background:#f6fbff;border-bottom:1px solid var(--border);padding: clamp(16px, 3vw, 24px) 0}
.split{display:grid;grid-template-columns:1fr;gap:clamp(12px, 2.4vw, 18px)}
@media(min-width:900px){.split{grid-template-columns:1fr .9fr}}
.columns{display:grid;grid-template-columns:1fr;gap:clamp(12px, 2.4vw, 18px)}
@media(min-width:900px){.columns{grid-template-columns:1.1fr .9fr}}
.asidecard{background:#fff;border:1px solid var(--border);border-radius:8px;padding:14px;box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--blue-dark);color:#fff;border:1px solid #0c2f4b;border-radius:6px;padding: clamp(8px, 1.3vw, 12px) clamp(12px, 2vw, 16px);font-weight:700}
.btn:hover{text-decoration:none;opacity:.95}
.btn--outline{background:#fff;color:var(--blue-dark);border:1px solid #0c2f4b}

.grid{display:grid;gap:clamp(12px,2.4vw,18px)}
.grid-2{grid-template-columns:1fr}
@media(min-width:760px){.grid-2{grid-template-columns:1fr 1fr}}
.meet{border:1px solid var(--border);border-radius:8px;padding:14px;background:#fff;box-shadow:var(--shadow)}
.meet .when{font-weight:600;color:#0b2540;margin:6px 0}
.meet .desc{color:var(--muted)}

.scripture{background:#f6fbff;border-left:4px solid var(--blue-dark);padding:12px 14px;border:1px solid var(--border);border-radius:8px}

.map{min-height:320px;border:1px solid var(--border);border-radius:8px;width:100%}

.footer{background:#f8fbff;border-top:1px solid var(--border);margin-top:18px}
.footrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0}
.footlinks{display:flex;flex-wrap:wrap;gap:12px}
.copy{text-align:center;color:var(--muted);padding:10px 0;border-top:1px solid var(--border)}

.special-banner{background:#0b2540;color:#ffffff;border-bottom:4px solid var(--blue)}
.special-banner .inner{max-width:var(--container);margin:0 auto;padding:16px var(--gutter);display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:900px){.special-banner .inner{grid-template-columns:1.2fr .8fr;align-items:center}}
.special-title{margin:0;font-size: var(--step-2);letter-spacing:.2px; font-family: var(--title-font); font-weight:700}
.special-dates{font-weight:700;color:#A3C6E3;margin:4px 0 0}
.special-times{background:#102e53;border:1px solid #2c4d78;border-radius:8px;padding:12px}
.special-times .row{display:flex;gap:10px;align-items:center;justify-content:space-between}
.special-times .row+ .row{margin-top:6px;border-top:1px dashed #305680;padding-top:6px}
.special-note{margin-top:8px;font-style:italic;opacity:.9}
.special-cta{display:inline-flex;align-items:center;gap:8px;margin-top:10px;background:#A3C6E3;color:#0b2540;border:1px solid #90b8d6;border-radius:6px;padding:8px 12px;font-weight:800;text-decoration:none}
.special-cta:hover{text-decoration:none;opacity:.95}


h1,h2,h3,h4,h5,h6 { font-family: var(--title-font); font-weight: 700; letter-spacing: .02em; }
p, li, a, summary, div { font-family: var(--body-font); }



/* === Language switcher (Google Translate) === */
.langswitch{display:flex;align-items:center;margin-right:8px}
@media (max-width:780px){ .langswitch{order:3;margin-top:6px} }



/* Hide the top banner Google injects */
body{top:0 !important}

    

/* === About / FAQ styling === */
.faq{display:grid;gap:clamp(16px, 2.4vw, 20px)}
.faq .q{border:1px solid var(--border);border-radius:8px;background:#fff;box-shadow:var(--shadow);padding:clamp(12px,2vw,16px)}
.faq .q h2{margin:.1rem 0 .4rem;color:#0b2540}
.faq .q p{margin:.5rem 0;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){
  .faq .q{transition:box-shadow .2s ease, transform .2s ease}
  .faq .q:hover{box-shadow:0 6px 16px rgba(0,0,0,.06); transform:translateY(-1px)}
}


/* Add a faux caret via background gradient */
.lang-select{background-image: linear-gradient(45deg, transparent 50%, var(--blue-dark) 50%), linear-gradient(135deg, var(--blue-dark) 50%, transparent 50%);
  background-position: calc(100% - 16px) 10px, calc(100% - 11px) 10px; background-size: 5px 5px, 5px 5px; background-repeat:no-repeat}
/* Keep header tidy on small screens */
@media (max-width:820px){
  .navrow{flex-wrap:wrap;gap:8px}
  .langswitch{order:3;width:100%;justify-content:flex-end}
}
/* Hide Google banner and native gadget UI */


body{top:0 !important}

/* Translator fixes */
.lang-ico{width:16px;height:16px}
@media (max-width:640px){
  .lang-ico{width:12px;height:12px}
}


/* Remove any previous gadget-hiding rules just in case */


body{top:0 !important}





/* Footer social link (simple, inline) */
.footlinks a.social{font-weight:600}
.footlinks a.social:hover{text-decoration:underline}