/* arpcc.org — traditional church theme
   Deep burgundy + antique gold on ivory. Serif headings. Mobile-first. */
:root{
  --burgundy:#5d1220;
  --burgundy-dark:#430c17;
  --gold:#a8852c;
  --gold-soft:#c9ab5e;
  --ivory:#faf5ea;
  --paper:#fffdf6;
  --ink:#2b2320;
  --muted:#6f6156;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ivory);color:var(--ink);
  font-family:Georgia,'Times New Roman','Noto Serif TC','Noto Serif SC',serif;
  font-size:17px;line-height:1.75;
}
a{color:var(--burgundy);text-decoration-color:var(--gold-soft)}
a:hover{color:var(--burgundy-dark)}
img{max-width:100%;height:auto}

/* ---------- header ---------- */
header{
  background:var(--burgundy);color:var(--ivory);
  padding:1.2rem 1rem 0;border-bottom:4px solid var(--gold);
}
.head-row{
  position:relative;display:flex;align-items:center;gap:1rem;
  max-width:1100px;margin:0 auto;padding-bottom:1rem;min-height:84px;
}
header .logo{width:64px;height:64px;flex:0 0 auto}
.title-block{
  position:absolute;left:50%;transform:translateX(-50%);
  text-align:center;max-width:calc(100% - 300px);
}
header h1{
  margin:0;font-size:2rem;font-weight:600;letter-spacing:.06em;
}
/* English church name is long: shrink it so it normally stays on one line */
html[lang="en"] header h1{font-size:1.5rem}
header .sub{margin:.15rem 0 0;color:#e8dcc0;font-size:.95rem;letter-spacing:.04em}
.lang-switch{
  display:flex;justify-content:flex-end;gap:.4rem;flex-wrap:wrap;
  font-size:.9rem;align-self:flex-start;padding-top:.4rem;
  margin-left:auto;position:relative;z-index:1;
}
.lang-switch a{
  color:var(--ivory);text-decoration:none;border:1px solid var(--gold-soft);
  border-radius:999px;padding:.15rem .8rem;
}
.lang-switch a:hover{background:var(--burgundy-dark)}
.lang-switch a.current{background:var(--gold);border-color:var(--gold);color:#fff}
nav.main{
  display:flex;flex-wrap:wrap;justify-content:center;gap:0;
  background:var(--burgundy-dark);
  margin:0 -1rem;
}
nav.main a{
  color:#f3e9d2;text-decoration:none;padding:.65rem .95rem;font-size:1rem;
}
nav.main a:hover{background:var(--burgundy);color:#fff}
nav.main a.current{background:var(--gold);color:#fff}

/* ---------- layout ---------- */
main{max-width:880px;margin:0 auto;padding:1.4rem 1.1rem 2.4rem}
section{
  background:var(--paper);border:1px solid #e6dcc4;border-top:3px solid var(--gold);
  border-radius:4px;padding:1.1rem 1.3rem;margin:0 0 1.4rem;
}
h2{
  color:var(--burgundy);font-size:1.55rem;margin:.2rem 0 1rem;
  border-bottom:1px solid #e6dcc4;padding-bottom:.45rem;letter-spacing:.03em;
}
h3{color:var(--burgundy);font-size:1.18rem;margin:1.1rem 0 .5rem}
p{margin:.55rem 0}
ul{margin:.4rem 0 .8rem;padding-left:1.4rem}
li{margin:.25rem 0}
blockquote{
  margin:1rem 0;padding:.6rem 1rem;border-left:3px solid var(--gold);
  background:#f7efdb;color:#4a3b30;font-style:normal;
}
table{border-collapse:collapse;width:100%;margin:.6rem 0;font-size:.98rem}
th,td{border:1px solid #ddd0ae;padding:.45rem .6rem;text-align:left;vertical-align:top}
th{background:#f3ead2;color:var(--burgundy)}
.events td:first-child,.events td:nth-child(2){white-space:nowrap}
address{font-style:normal;line-height:1.6}
.note{color:var(--muted);font-size:.92rem}
.section-links{font-size:.88rem}
.indent{margin-left:1.5rem}
.btn{
  display:inline-block;background:var(--burgundy);color:#fff;text-decoration:none;
  padding:.5rem 1.1rem;border-radius:4px;margin:.3rem .3rem .3rem 0;
}
.btn:hover{background:var(--burgundy-dark);color:#fff}
.btn.gold{background:var(--gold)}
.live-badge{
  display:inline-block;background:#c0392b;color:#fff;font-weight:700;
  border-radius:4px;padding:.15rem .6rem;letter-spacing:.05em;
}
#live-wrap{display:none}
#live-wrap.live-on{display:block}

/* ---------- collapsible homepage sections ---------- */
details.collapsible{
  background:var(--paper);border:1px solid #e6dcc4;border-top:3px solid var(--gold);
  border-radius:4px;padding:.9rem 1.3rem;margin:0 0 1.4rem;
}
details.collapsible summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:.6rem;
}
details.collapsible summary::-webkit-details-marker{display:none}
details.collapsible .collapsible-title{
  color:var(--burgundy);font-size:1.55rem;font-weight:600;letter-spacing:.03em;
}
details.collapsible .arrow{
  color:var(--gold);font-size:1.2rem;transition:transform .2s;margin-left:auto;
}
details.collapsible[open] .arrow{transform:rotate(90deg)}
details.collapsible .collapsible-body{padding-top:.8rem}

/* responsive embeds */
.video,.cal{position:relative;height:0;overflow:hidden;border-radius:4px;background:#000}
.video{padding-top:56.25%}
.cal{padding-top:120%;background:#fff;border:1px solid #e6dcc4}
.video iframe,.cal iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
@media(min-width:640px){.cal{padding-top:70%}}

/* placeholder photos */
figure.photo{
  margin:.8rem 0;background:#f3ead2;border:1px dashed var(--gold);
  border-radius:4px;padding:.7rem;text-align:center;color:var(--muted);
}
figure.photo img{min-height:120px;width:100%;object-fit:cover;background:#e9dfc6}
figure.photo figcaption{font-size:.9rem;padding-top:.4rem}
.cards{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:640px){.cards{grid-template-columns:1fr 1fr}}
.card{
  background:var(--paper);border:1px solid #e6dcc4;border-top:3px solid var(--gold);
  border-radius:4px;padding:1rem 1.2rem;
}
.card h3{margin-top:.2rem}

/* ---------- hero + logistics (homepage) ---------- */
.hero{text-align:center;padding:1.6rem 1rem 1.2rem}
.hero h2{font-size:2.1rem;margin:.2rem 0 .4rem}
.hero .tagline{font-size:1.15rem;color:var(--burgundy);font-weight:600}
.logistics{
  background:var(--paper);border:1px solid #e6dcc4;border-top:3px solid var(--gold);
  border-radius:4px;padding:1rem 1.3rem;margin:0 0 1.4rem;text-align:center;
}
.logistics p{margin:.35rem 0}
.logistics .times{font-weight:600;color:var(--burgundy)}
.btn-row{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:.7rem}
.btn-row .btn{margin:0}
/* ---------- homepage two-column photo + intro ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:start;margin:0 0 1.4rem}
.two-col-text h3{margin-top:.2rem}
.two-col-text ul{margin:.4rem 0}
/* English text beside the carousel runs a touch smaller so the two
   columns line up better; the Chinese versions keep the normal size. */
html[lang="en"] .two-col-text{font-size:.92rem}
@media(max-width:640px){.two-col{grid-template-columns:1fr}}
.carousel{position:relative;background:#f3ead2;border:1px solid #e6dcc4;border-radius:4px;padding:.7rem}
.carousel-slides{aspect-ratio:4/3;overflow:hidden}
.carousel-slides figure.carousel-slide{display:none;margin:0;height:100%}
.carousel-slides figure.carousel-slide.is-active{display:block;height:100%}
.carousel-slides img{width:100%;height:100%;object-fit:cover;background:#e9dfc6}
.carousel-controls{display:flex;align-items:center;gap:.6rem;margin-top:.5rem}
.carousel-prev,.carousel-next{
  border:1px solid var(--gold);background:var(--paper);color:var(--burgundy);
  border-radius:4px;font-size:1.3rem;line-height:1;padding:.2rem .7rem;cursor:pointer;
}
.carousel-dots{display:flex;flex-wrap:wrap;gap:.35rem;margin-left:auto}
.carousel-dot{
  width:.7rem;height:.7rem;border-radius:50%;border:1px solid var(--gold);
  background:var(--paper);padding:0;cursor:pointer;
}
.carousel-dot.is-active{background:var(--gold)}
.placeholder{
  background:#f7efdb;border:1px dashed var(--gold);border-radius:4px;
  padding:.7rem 1rem;color:#4a3b30;
}

/* ---------- connection-card form ---------- */
.form label{display:block;font-weight:600;margin:.7rem 0 .25rem}
.form input,.form textarea{
  width:100%;box-sizing:border-box;padding:.55rem .7rem;font:inherit;
  border:1px solid #cbbd90;border-radius:4px;background:#fffdf6;
}
.form textarea{min-height:5rem}

/* landing page */
.landing{max-width:640px;margin:0 auto;text-align:center;padding:3rem 1.2rem}
.landing .logo{width:72px;height:72px}
.landing h1{color:var(--burgundy);font-size:1.9rem;margin:.5rem 0 .2rem}
.landing .langs{display:flex;flex-direction:column;gap:.7rem;margin-top:1.6rem}
.landing .langs a{
  border:1px solid var(--gold);border-radius:4px;padding:.7rem;text-decoration:none;
  background:var(--paper);color:var(--burgundy);font-size:1.1rem;
}
.landing .langs a:hover{background:#f3ead2}
.landing p.addr{color:var(--muted);margin-top:2rem}

/* ---------- footer ---------- */
footer{
  background:var(--burgundy);color:#efe4c8;text-align:center;
  padding:1.4rem 1rem 1.8rem;border-top:4px solid var(--gold);font-size:.95rem;
}
footer .cross{color:var(--gold-soft)}
footer p{margin:.3rem 0}
footer a{color:#efe4c8}

@media(max-width:560px){
  header h1{font-size:1.55rem}
  header .logo{width:48px;height:48px}
  .head-row{gap:.7rem;min-height:0}
  .title-block{position:static;transform:none;max-width:none;order:3;flex:1 1 100%}
  html[lang="en"] header h1{font-size:1.2rem}
  .lang-switch{font-size:.85rem}
  nav.main a{padding:.55rem .6rem;font-size:.95rem}
  .hero h2{font-size:1.7rem}
  .btn-row{flex-direction:column;align-items:stretch}
  .btn-row .btn{text-align:center}
  main{padding:1rem .7rem 2rem}
  section{padding:.95rem .95rem}
  body{font-size:16px}
}