/* Site shell: top bar, masthead, nav, weekly theme strip and footer. Shared by every page on the new design. */
:root {
  --kertas: #f4f1ea;
  --input: #fbf9f5;
  --tinta: #1c1917;
  --abu-teks: #44403c;
  --abu-meta: #57534e;
  --abu-placeholder: #78716c;
  --garis: #d6d0c4;
  --garis-input: #a8a29e;
  --merah: #a3171b;
  --merah-garis: #d9777a;
  --topbar-teks: #e8e3da;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --pad: 28px;
}
@media (max-width: 480px) { :root { --pad: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--kertas); color: var(--tinta); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--merah); text-decoration: none; }
a:hover { color: var(--tinta); }
::selection { background: var(--merah); color: #fff; }
:focus-visible { outline: 3px solid var(--merah); outline-offset: 3px; }
button, input { font: inherit; color: inherit; }

.wrap { max-width: 1240px; margin-inline: auto; padding-inline: var(--pad); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--tinta); color: #fff; padding: 10px 16px; font-weight: 600; }
.skip:focus { left: 8px; color: #fff; }
.label { font: 400 11.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }

/* Top bar */
.topbar { background: var(--tinta); color: var(--topbar-teks); font-size: 12.5px; letter-spacing: .02em; }
.topbar .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 24px; padding-block: 9px; }
.topbar p { margin: 0; line-height: 1.5; min-width: 0; }
.topbar p span { white-space: nowrap; }
.topbar nav { display: flex; gap: 18px; }
.topbar a { color: var(--topbar-teks); }
.topbar a:hover { color: #fff; }
.topbar :focus-visible { outline-color: #fff; }

/* Masthead: the seal, the name and the church's full name, stacked and centred;
   today's date and the live button share a row beneath. */
.masthead { padding-top: 36px; }
.mast { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 28px 12px; }
.mast-brand { grid-column: 1 / -1; justify-self: center; display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2vw, 26px); color: var(--tinta); text-align: center; }
.mast-brand:hover { color: var(--tinta); }
.mast-brand img { width: clamp(64px, 8.5vw, 124px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.mast-nama { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2vw, 30px); }
.mast-wm { font: 500 clamp(40px, 6.6vw, 96px)/.95 var(--serif); letter-spacing: -.02em; white-space: nowrap; }
.mast-wm em { color: var(--merah); }
.mast-sub { font-size: clamp(11px, 1.15vw, 16px); letter-spacing: .22em; text-transform: uppercase; color: var(--abu-meta); white-space: nowrap; }
.mast-date { font: 400 11.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--abu-meta); white-space: nowrap; }
.btn-live { justify-self: end; display: inline-flex; align-items: center; gap: 10px; background: var(--merah); color: #fff; padding: 11px 18px; border-radius: 2px; font-weight: 600; font-size: 14px; white-space: nowrap; }
.btn-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.btn-live:hover { background: var(--tinta); color: #fff; }
@media (max-width: 480px) {
  .masthead { padding-top: 24px; }
  .mast { row-gap: 20px; }
  .mast-brand img { width: 56px; }
  /* the full name stays on one line down to 320px */
  .mast-wm { font-size: min(40px, 9.2vw); }
  .mast-sub { font-size: min(12px, 2.9vw); letter-spacing: .14em; }
}

/* Main nav */
.mainnav { margin-top: 28px; border-top: 3px double var(--tinta); border-bottom: 1px solid var(--tinta); }
.mainnav > ul { list-style: none; margin: 0; padding: 12px 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 34px; font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.mainnav a { color: var(--tinta); display: inline-block; padding-block: 2px; }
.mainnav a:hover, .mainnav a[aria-current="page"] { color: var(--merah); }
.mainnav a[aria-current="page"] { border-bottom: 2px solid var(--merah); }
.mainnav .has-sub { position: relative; }
.mainnav .sub { list-style: none; margin: 0; padding: 8px 0; position: absolute; top: 100%; left: 50%; z-index: 20; min-width: 190px; transform: translate(-50%, 6px); background: var(--kertas); border: 1px solid var(--tinta); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 15px; visibility: hidden; opacity: 0; transition: opacity .15s, transform .15s, visibility .15s; }
.mainnav .sub a { display: block; padding: 7px 16px; }
.has-sub:hover .sub, .has-sub:focus-within .sub { visibility: visible; opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 480px) { .mainnav > ul { font-size: 13px; } }

/* Weekly theme strip (set in build.mjs) */
.tema { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 0; padding: 14px 0; border-bottom: 1px solid var(--garis); }
.tema-label { color: var(--merah); letter-spacing: .08em; }
.tema-judul { font: italic 400 22px/1.3 var(--serif); }
.tema-ayat { color: var(--abu-meta); font-size: 14px; white-space: nowrap; }

/* Footer */
.kaki { background: var(--merah); color: #fff; margin-top: 72px; }
.kaki .wrap { padding-block: 64px 28px; display: flex; flex-direction: column; gap: 48px; }
.kaki a { color: #fff; }
.kaki a:hover { color: #fff; opacity: .8; }
.kaki :focus-visible { outline-color: #fff; }
.kaki-motto { margin: 0; font: 400 clamp(30px, 4.6vw, 60px)/1.05 var(--serif); letter-spacing: -.02em; max-width: 18ch; text-wrap: balance; }
.kaki-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 32px; font-size: 14.5px; line-height: 1.7; border-top: 1px solid var(--merah-garis); padding-top: 28px; }
.kaki-grid h2 { margin: 0 0 8px; font: 400 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.kaki-grid ul { list-style: none; margin: 0; padding: 0; }
.kaki-grid p { margin: 0; }
.kaki-grid a { overflow-wrap: anywhere; }
.kaki-bawah { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 12.5px; }
.kaki-bawah p { margin: 0; }
.kaki-bawah a { border-bottom: 1px solid #fff; }

/* ---------- Shared pieces ---------- */
.meta { margin: 0; font: 400 11.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--abu-meta); }
.meta .kat { color: var(--merah); }
.status { margin: 0; font: 400 11.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--abu-meta); }
/* Most photos are portrait Instagram posters with text on them, so they are shown whole (contain)
   over a blurred copy of themselves rather than cropped to the frame. */
.bingkai { position: relative; overflow: hidden; background: repeating-linear-gradient(135deg, #e6e0d5 0 10px, #ede8df 10px 20px); }
.bingkai::before { content: ""; position: absolute; inset: -24px; background: var(--img) center / cover; filter: blur(18px) brightness(.8); }
.bingkai img, .bingkai iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* Stretched link: the whole story is clickable, the headline link is what gets focus. */
.cerita { position: relative; display: flex; flex-direction: column; min-width: 0; }
.cerita h2 a, .cerita h3 a { color: inherit; }
.cerita h2 a::after, .cerita h3 a::after { content: ""; position: absolute; inset: 0; }
.cerita:hover :is(h2, h3), .cerita :is(h2, h3) a:focus-visible { color: var(--merah); }
.cerita :is(h2, h3) a:focus-visible { outline: none; }
.cerita:has(a:focus-visible) { outline: 3px solid var(--merah); outline-offset: 6px; }

/* Sunday service card (Beranda, Warta) */
.ibadah { background: var(--merah); color: #fff; padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; }
.ibadah h2 { margin: 0; font-weight: 400; }
.ibadah .jam { margin: 0; font: 400 64px/.95 var(--serif); letter-spacing: -.02em; }
.ibadah .jam small { font-size: 22px; letter-spacing: 0; }
.ibadah p { margin: 0; font-size: 15px; line-height: 1.5; }
.ibadah p.ajak { font-size: 14px; }
.ibadah a { align-self: flex-start; margin-top: 6px; color: #fff; font-weight: 600; font-size: 14px; border-bottom: 1px solid #fff; }
.ibadah a:hover { color: #fff; opacity: .8; }
.ibadah :focus-visible { outline-color: #fff; }

/* ---------- Phones ---------- */
/* Every link stands at least 32px tall, so it can be hit with a thumb. */
.kaki-grid li a { display: inline-block; padding-block: 5px; }
.topbar nav a { padding-block: 6px; }
.ibadah a { padding-block: 6px 2px; }
@media (max-width: 600px) {
  /* Top bar: the church's line only; the social links are in the footer and on Sosmed. */
  .topbar { font-size: 11.5px; }
  .topbar .wrap { justify-content: center; text-align: center; padding-block: 8px; }
  .topbar nav { display: none; }
  /* Nav: all six items in two even rows of three. The About sections are reached from the
     Tentang Kami page itself; a hover dropdown means nothing on a touch screen. */
  .mainnav { margin-top: 20px; }
  .mainnav > ul { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; justify-items: center; gap: 0 12px; padding: 4px 0; }
  .mainnav a { padding-block: 10px 8px; }
  .mainnav .sub { display: none; }
  .tema { gap: 2px 12px; padding-block: 12px; }
  .tema-label { flex-basis: 100%; }
  .tema-judul { font-size: 19px; }
  .kaki .wrap { padding-block: 48px 24px; gap: 36px; }
  .kaki-grid { gap: 24px; }
}
/* The smallest phones: the date and the live button still share one line. */
@media (max-width: 400px) {
  .mast { column-gap: 8px; }
  .mast-date { font-size: 10.5px; letter-spacing: .02em; }
  .btn-live { font-size: 13px; padding: 10px 12px; gap: 8px; }
}