/*
Theme Name: Boroko Baptist
Theme URI: https://borokobaptistchurch.org
Author: Boroko Baptist Church
Description: A block theme for Boroko Baptist Church, Port Moresby. Built from the church's own material: the timber-panelled sanctuary, the crest's maroon crosses and gold bird of paradise, and the maroon-and-gold bars of the Sunday livestream. Light on data for slow connections and small phones.
Version: 2.2.2
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: boroko
Tags: church, block-theme, full-site-editing, accessibility-ready
*/

/* ==========================================================================
   1. Ground
   ========================================================================== */

:root {
  --bbc-maroon: var(--wp--preset--color--primary);
  --bbc-gold: var(--wp--preset--color--gold-bright);
  --bbc-timber: var(--wp--preset--color--timber);
  --bbc-timber-dark: var(--wp--preset--color--timber-dark);
  --bbc-pad: var(--wp--style--root--padding-left, 22px);
  /* Dark bands are a deep maroon; the timber boards are kept for the footer. */
  --bbc-maroon-deep: #4A0C18;
  /* The sanctuary wall: narrow vertical boards, each a slightly different
     brown, with a dark seam between them. Pure CSS, nothing to download. */
  --bbc-planks:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.28) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.035) 0 19px, rgba(0,0,0,.05) 19px 38px, rgba(255,255,255,.02) 38px 76px);
  /* Bilum zigzag. Used as the edge where a dark band meets the paper. */
  --bbc-zigzag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='10' viewBox='0 0 24 10'%3E%3Cpath d='M0 10 L6 2 L12 10 L18 2 L24 10' fill='none' stroke='%23D9A63C' stroke-width='2'/%3E%3C/svg%3E");
}

body {
  background: var(--wp--preset--color--base);
  -webkit-font-smoothing: antialiased;
}

/* Header, page and footer sit flush: the banners and dark bands carry
   their own spacing. */
.wp-site-blocks > main,
.wp-site-blocks > footer,
.wp-site-blocks > main > .wp-block-post-content > :first-child { margin-block-start: 0; }
.wp-site-blocks > main > .alignfull:first-child,
.wp-site-blocks > main > .wp-block-post-content > .alignfull:first-child { margin-top: 0; }
/* Full-width bands stack edge to edge, with no strip of paper between. */
main .alignfull + .alignfull,
main .alignfull + .bbc-zigzag,
main .bbc-zigzag + .alignfull { margin-block-start: 0 !important; }
.wp-block-post-content > .bbc-zigzag { margin-block-start: 0; }

h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

::selection { background: var(--bbc-gold); color: var(--bbc-timber-dark); }

/* ==========================================================================
   2. Labels: the livestream lower-third
   On the Sunday stream, names and notices sit in a maroon bar with a gold
   tab. Section labels use the same device, so the website and the stream
   look like they come from the same church.
   ========================================================================== */

/* A block-level flex box sized to its text, so WordPress's centred
   layouts can still line it up with the heading beneath it. */
.bbc-label {
  display: flex;
  width: fit-content;
  align-items: stretch;
  font-family: var(--wp--preset--font-family--label);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  color: #fff;
  background: var(--bbc-maroon);
  padding: 6px 12px 6px 0;
  margin: 0 0 18px;
}
.bbc-label::before {
  content: "";
  width: 8px;
  margin: -6px 10px -6px 0;
  background: var(--bbc-gold);
}
.bbc-label a { color: inherit; text-decoration: none; }

.bbc-lede {
  font-size: 1.22rem;
  line-height: 1.6;
  color: var(--wp--preset--color--muted);
  max-width: 58ch;
}

/* Tok Pisin lines are set in the display italic, in gold: they are the
   church's own greeting, not a translation footnote. */
.bbc-tokpisin {
  font-family: var(--wp--preset--font-family--display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--wp--preset--color--gold);
}

/* ==========================================================================
   3. Buttons
   ========================================================================== */

.wp-block-button__link { transition: background-color .15s ease, color .15s ease, border-color .15s ease; }

.wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent;
  color: var(--bbc-maroon);
  border: 2px solid var(--bbc-maroon);
  padding: 11px 22px;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: var(--bbc-maroon);
  color: #fff;
}

/* On dark grounds (photo, timber, maroon) buttons turn gold and white. */
.bbc-dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link,
.bbc-hero .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
  background: var(--bbc-gold);
  color: var(--bbc-timber-dark);
}
.bbc-dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.bbc-hero .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
  background: #F0C766;
}
.bbc-dark .wp-block-button.is-style-outline > .wp-block-button__link,
.bbc-hero .wp-block-button.is-style-outline > .wp-block-button__link {
  color: #fff;
  border-color: rgba(255,255,255,.75);
}
.bbc-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.bbc-hero .wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: #fff;
  color: var(--bbc-timber-dark);
  border-color: #fff;
}

/* ==========================================================================
   4. Page banners
   Every inner page opens on a plain maroon banner. Only the home page photo
   banner carries the gold bilum edge.
   ========================================================================== */

.bbc-hero {
  position: relative;
  background-color: var(--bbc-maroon);
  color: #F8EEE6;
  padding-bottom: 64px !important;
}
.bbc-hero--photo::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 10px;
  background: var(--bbc-zigzag) repeat-x left bottom / 24px 10px;
}
.bbc-hero > * { position: relative; }
.bbc-hero h1, .bbc-hero h2, .bbc-hero .wp-block-post-title { color: #fff; }
.bbc-hero .bbc-lede { color: #F1DED6; }
.bbc-hero .bbc-tokpisin { color: var(--bbc-gold); }
.bbc-hero a:not(.wp-element-button) { color: #fff; }
.bbc-hero .bbc-meta { color: #EBCFC6; }
.bbc-hero .bbc-label { background: var(--bbc-timber-dark); }

/* Banner contents share the left edge of the sections below instead of
   centring in the wide container. WordPress centres constrained children
   with !important, so these have to match it. */
.bbc-hero.has-global-padding,
.bbc-prose.has-global-padding {
  padding-left: max(var(--bbc-pad), calc((100% + (var(--bbc-pad) * 2) - 1160px) / 2));
  padding-right: max(var(--bbc-pad), calc((100% + (var(--bbc-pad) * 2) - 1160px) / 2));
}
.bbc-hero > *,
.bbc-prose > * {
  margin-left: 0 !important;
  margin-right: auto !important;
}
.bbc-prose > p,
.bbc-prose > ul,
.bbc-prose > ol { max-width: 68ch; }
.bbc-hero > h1.wp-block-heading,
.bbc-hero > .wp-block-post-title { max-width: 18ch; }
.bbc-hero > .bbc-lede { max-width: 58ch; }

/* Home: the banner is the sanctuary itself. */
.bbc-hero--photo {
  min-height: min(88vh, 760px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-color: var(--bbc-timber-dark);
  background-image:
    linear-gradient(180deg, rgba(28,14,8,.15) 0%, rgba(28,14,8,.25) 40%, rgba(28,14,8,.88) 100%),
    url("assets/images/worship-1920.jpg");
  background-size: cover;
  background-position: center 30%;
  padding-top: 140px !important;
}
@media (max-width: 760px) {
  .bbc-hero--photo {
    min-height: min(78vh, 680px);
    background-image:
      linear-gradient(180deg, rgba(28,14,8,.1) 0%, rgba(28,14,8,.35) 35%, rgba(28,14,8,.92) 100%),
      url("assets/images/worship-960.jpg");
    background-position: 62% 30%;
  }
}
/* In a flex column, the auto right margin used elsewhere would shrink each
   child to its content width and push it off a phone screen. Stretch them,
   and let the max-widths below keep the measure. */
.bbc-hero--photo > * {
  margin-right: 0 !important;
  max-width: 100%;
  min-width: 0;
}
.bbc-hero--photo > .bbc-times { max-width: 760px; }
.bbc-hero--photo > .bbc-lede { max-width: 58ch; }
.bbc-hero--photo > .bbc-tokpisin,
.bbc-hero--photo > .wp-block-buttons { align-self: flex-start; }
.bbc-hero--photo h1 {
  font-size: var(--wp--preset--font-size--xx-large) !important;
  line-height: 0.98 !important;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
  max-width: 14ch !important;
}
.bbc-hero--photo .bbc-lede { color: #F3E6DA; text-shadow: 0 1px 12px rgba(0,0,0,.4); }

/* Sermons: the pulpit, flowers either side, under the banner text. */
.bbc-hero--pulpit {
  background-image:
    linear-gradient(90deg, rgba(92,14,29,.96) 0%, rgba(92,14,29,.86) 45%, rgba(92,14,29,.35) 100%),
    url("assets/images/pulpit-1600.jpg");
  background-size: cover;
  background-position: center 40%;
}
@media (max-width: 760px) {
  .bbc-hero--pulpit {
    background-image:
      linear-gradient(180deg, rgba(92,14,29,.75) 0%, rgba(92,14,29,.95) 70%),
      url("assets/images/pulpit-800.jpg");
  }
}

.bbc-latest .wp-block-post-content > * { margin-top: 0; }
/* The latest-service feature shows the video only; the write-up is on the
   sermon's own page. */
.bbc-latest .wp-block-post-content > :not(.wp-block-embed) { display: none; }
.bbc-latest .wp-block-post-excerpt { margin-top: 14px; }
.bbc-latest .wp-block-post-excerpt__more-text { display: none; }
.bbc-latest .bbc-meta { color: var(--bbc-gold); display: block; }

/* ==========================================================================
   5. Service times
   Big gold numerals on a dark ground, like the hymn board.
   ========================================================================== */

.bbc-times {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  border-top: 1px solid rgba(217,166,60,.55);
  border-bottom: 1px solid rgba(217,166,60,.55);
}
.bbc-times > div {
  padding: 18px 22px 18px 0;
}
.bbc-times > div + div { padding-left: 22px; border-left: 1px solid rgba(217,166,60,.35); }
.bbc-times .when {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: 2.3rem;
  line-height: 1;
  color: var(--bbc-gold);
  font-variant-numeric: lining-nums;
}
.bbc-times .what {
  display: block;
  margin-top: 6px;
  font-size: 0.98rem;
  color: #F6EADF;
}
.bbc-times .lang {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--wp--preset--font-family--label);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bbc-timber-dark);
  background: var(--bbc-gold);
  padding: 3px 8px;
}
.bbc-times .when small {
  font-family: var(--wp--preset--font-family--label);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-left: 4px;
}
/* On a phone the three times stay side by side, smaller, so the board
   reads at a glance instead of filling the screen. */
@media (max-width: 600px) {
  :not(.bbc-hero) > .bbc-times > div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgba(217,166,60,.35); }
  .bbc-hero .bbc-times { grid-template-columns: repeat(3, 1fr); }
  .bbc-hero .bbc-times > div { padding: 14px 8px 14px 0; }
  .bbc-hero .bbc-times > div + div { padding-left: 10px; }
  .bbc-hero .bbc-times .when { font-size: 1.7rem; }
  .bbc-hero .bbc-times .when small { display: block; margin: 2px 0 0; font-size: 0.68rem; }
  .bbc-hero .bbc-times .what { font-size: 0.82rem; line-height: 1.35; }
  .bbc-hero .bbc-times .lang { font-size: 0.62rem; padding: 2px 5px; letter-spacing: 0.08em; }
}
/* On paper (Visit page) the board keeps its colours. */
:not(.bbc-hero):not(.bbc-dark) > .bbc-times {
  background: var(--bbc-maroon-deep);
  border: 0;
  padding: 4px 24px;
}

/* ==========================================================================
   6. Header
   ========================================================================== */

.bbc-header {
  background: var(--wp--preset--color--surface);
  border-bottom: 1px solid var(--wp--preset--color--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.bbc-header::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--bbc-maroon) 0 70%, var(--bbc-gold) 70% 100%);
}
.admin-bar .bbc-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .bbc-header { top: 46px; } }

.bbc-crest {
  display: block;
  flex-shrink: 0;
  background: url("assets/images/crest.png") no-repeat center / contain;
}
.bbc-crest--header { width: 58px; height: 54px; }
.bbc-crest--footer { width: 96px; height: 90px; margin-bottom: 16px; background-color: #FFFCF6; border-radius: 50%; background-size: 82%; }

.bbc-header .wp-block-site-title a {
  color: var(--bbc-maroon);
  text-decoration: none;
}
.bbc-tagline {
  font-family: var(--wp--preset--font-family--label);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--faint);
  margin: 5px 0 0;
}

.bbc-header .wp-block-navigation a {
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
  padding: 10px 2px;
  margin: 0 7px;
  border-bottom: 3px solid transparent;
}
.bbc-header .wp-block-navigation a:hover { color: var(--bbc-maroon); border-bottom-color: var(--wp--preset--color--border); }
.bbc-header .wp-block-navigation .current-menu-item a {
  color: var(--bbc-maroon);
  border-bottom-color: var(--bbc-gold);
}
.bbc-header .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--bbc-maroon) !important;
}
.bbc-header .wp-block-navigation__responsive-container.is-menu-open a {
  color: #fff;
  font-size: 1.25rem;
  border: 0;
}
.bbc-header .wp-block-navigation__responsive-container.is-menu-open .current-menu-item a { color: var(--bbc-gold); }
.bbc-header .wp-block-navigation__responsive-container-close { color: #fff; }

@media (max-width: 600px) {
  .bbc-crest--header { width: 44px; height: 41px; }
  .bbc-header .wp-block-site-title { font-size: 1.15rem; }
  .bbc-tagline { font-size: 0.62rem; letter-spacing: 0.12em; }
}

/* ==========================================================================
   7. Sections
   ========================================================================== */

/* A dark band in deep maroon. */
.bbc-dark {
  background-color: var(--bbc-maroon-deep);
  color: #F3E4DE;
}
.bbc-dark h1, .bbc-dark h2, .bbc-dark h3 { color: #fff; }
.bbc-dark a:not(.wp-element-button) { color: var(--bbc-gold); }

/* Photograph set on the page like a print, with a gold offset frame. */
.bbc-photo {
  position: relative;
  margin: 0;
}
.bbc-photo img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}
.bbc-photo::before {
  content: "";
  position: absolute;
  inset: 14px -14px -14px 14px;
  border: 2px solid var(--bbc-gold);
}
.bbc-photo figcaption {
  position: relative;
  z-index: 1;
  margin-top: 26px;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--wp--preset--color--faint);
}

/* Lists of places and groups read as a list, not a row of boxes. */
.bbc-card {
  background: transparent;
  border: 0;
  border-top: 3px solid var(--bbc-maroon);
  padding: 18px 0 0;
}
/* In a card the label is usually when the group meets, so it is set to be
   read, not as a tab. */
.bbc-card .bbc-label {
  background: transparent;
  color: var(--wp--preset--color--gold);
  font-family: var(--wp--preset--font-family--body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.3;
  padding: 0;
  margin-bottom: 8px;
}
.bbc-card .bbc-label::before { display: none; }
.bbc-card h3 { margin-top: 0; }

.bbc-note {
  border-left: 4px solid var(--bbc-gold);
  background: var(--wp--preset--color--gold-soft);
  padding: 16px 20px;
  font-size: 0.95rem;
}

/* A pull-quote of Scripture, the way it would sit in a bulletin. */
.bbc-verse {
  font-family: var(--wp--preset--font-family--display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  line-height: 1.25;
  color: var(--bbc-maroon);
  border: 0;
  padding: 0;
  margin: 0;
}
.bbc-verse cite {
  display: block;
  margin-top: 14px;
  font-family: var(--wp--preset--font-family--label);
  font-style: normal;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--faint);
}

/* Bilum edge, available as a divider anywhere. */
.bbc-zigzag {
  height: 10px;
  background: var(--bbc-zigzag) repeat-x left center / 24px 10px;
  margin: 0;
}

/* ==========================================================================
   8. Tables: the weekly board
   ========================================================================== */

.wp-block-table { overflow-x: auto; }
.wp-block-table table {
  border-collapse: collapse;
  width: 100%;
  border: 0;
  background: var(--wp--preset--color--surface);
}
.wp-block-table thead { border: 0; }
.wp-block-table th {
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #F6EADF;
  background: var(--bbc-maroon-deep);
  border: 0;
  padding: 12px 18px;
  text-align: left;
}
.wp-block-table td {
  border: 0;
  border-bottom: 1px solid var(--wp--preset--color--border);
  padding: 13px 18px;
  text-align: left;
  vertical-align: top;
}
.wp-block-table tbody tr:nth-child(even) td { background: rgba(238,227,208,.45); }
.wp-block-table td:first-child {
  font-weight: 600;
  color: var(--bbc-maroon);
  white-space: nowrap;
}

/* The year's four pathways; the current quarter is marked in gold. */
.bbc-pathways table { background: transparent; }
.bbc-pathways td { padding: 14px 16px; line-height: 1.45; }
.bbc-pathways td:first-child { width: 7.5em; padding-top: 17px; }
.bbc-pathways tbody tr:nth-child(even) td { background: transparent; }
.bbc-pathways tr.is-now td { background: var(--wp--preset--color--gold-soft) !important; }
.bbc-pathways tr.is-now td:last-child strong::after {
  content: "Now";
  margin-left: 10px;
  font-family: var(--wp--preset--font-family--label);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--bbc-maroon);
  padding: 2px 7px;
  vertical-align: 2px;
}

/* The full weekly programme. On a phone each row becomes a small card:
   day and time on one line, then what it is and who it is for. */
@media (max-width: 640px) {
  .bbc-schedule { overflow: visible; }
  .bbc-schedule thead { display: none; }
  .bbc-schedule table, .bbc-schedule tbody { display: block; background: transparent; }
  .bbc-schedule tr {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    background: var(--wp--preset--color--surface);
    border-left: 4px solid var(--bbc-maroon);
  }
  .bbc-schedule td,
  .bbc-schedule tbody tr:nth-child(even) td { padding: 0; border: 0; background: transparent; }
  .bbc-schedule td:nth-child(2) { font-weight: 600; color: var(--bbc-maroon); }
  .bbc-schedule td:nth-child(3),
  .bbc-schedule td:nth-child(4) { grid-column: 1 / -1; }
  .bbc-schedule td:nth-child(4) { font-size: 0.92rem; color: var(--wp--preset--color--muted); }
}

/* Home: the week at a glance, a card per day. */
.bbc-days {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.bbc-day {
  background: var(--wp--preset--color--base);
  border-top: 4px solid var(--bbc-maroon);
  padding: 18px 20px 16px;
}
.bbc-day__name {
  font-size: 1.45rem;
  margin: 0 0 10px;
}
.bbc-day ul { list-style: none; margin: 0; padding: 0; }
.bbc-day li { padding: 6px 0; border-top: 1px solid var(--wp--preset--color--border); line-height: 1.4; }
.bbc-day li:first-child { border-top: 0; padding-top: 0; }
.bbc-day__time {
  display: block;
  font-weight: 700;
  color: var(--bbc-maroon);
}

.bbc-contact-line { font-size: 1rem; color: #EBD6CE; margin-top: 18px; }
.bbc-contact-line a { white-space: nowrap; }

/* ==========================================================================
   9. Sermons: YouTube, light on data
   A sermon shows its thumbnail and a play button. The YouTube player (about
   a megabyte) only loads when someone taps play.
   ========================================================================== */

/* A sermon picture: the YouTube thumbnail over a maroon panel carrying the
   title, which shows only if the thumbnail cannot load. */
.bbc-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    url("assets/images/crest.png") 18px 16px / 44px auto no-repeat,
    radial-gradient(120% 90% at 30% 20%, #9b2238 0%, var(--bbc-maroon) 45%, var(--bbc-timber-dark) 100%);
}
.bbc-thumb__fallback {
  position: absolute;
  inset: auto 18px 40px 18px;
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  font-weight: 600;
  line-height: 1.15;
  color: #fff;
  text-align: start;
  text-wrap: balance;
}
.bbc-thumb__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bbc-video {
  border: 0;
  padding: 0;
  width: 100%;
  cursor: pointer;
}
.bbc-video::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55));
}
.bbc-video__play, .bbc-video__label { z-index: 2; }
.bbc-video__play {
  position: absolute;
  left: 50%; top: 50%;
  width: 74px; height: 74px;
  margin: -37px 0 0 -37px;
  border-radius: 50%;
  background: var(--bbc-maroon);
  box-shadow: 0 0 0 4px rgba(217,166,60,.85);
  transition: transform .15s ease;
}
.bbc-video__play::after {
  content: "";
  position: absolute;
  left: 29px; top: 23px;
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent #fff;
}
.bbc-video:hover .bbc-video__play { transform: scale(1.06); }
.bbc-video__label {
  position: absolute;
  left: 16px; bottom: 12px;
  font-family: var(--wp--preset--font-family--label);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}
.bbc-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Sermon list */
/* Only the row gap: WordPress sizes the grid columns from its own column
   gap, and a different one here drops the grid to two columns. */
.bbc-sermons .wp-block-post-template { row-gap: 34px; }
.bbc-sermons .wp-block-post-featured-image { margin: 0 0 12px; position: relative; }
.bbc-sermons .wp-block-post-featured-image .bbc-thumb__fallback {
  inset: auto 14px 14px 14px;
  font-size: 1.15rem;
}
.bbc-sermons .wp-block-post-featured-image a::after {
  content: "";
  position: absolute;
  right: 10px; bottom: 10px;
  width: 0; height: 0;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.6));
}
.bbc-sermons .wp-block-post-title {
  font-size: 1.35rem;
  line-height: 1.2;
  margin: 4px 0 0;
}
.bbc-sermons .wp-block-post-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.bbc-sermons .wp-block-post-title a:hover { color: var(--bbc-maroon); }

.bbc-meta,
.bbc-sermons .wp-block-post-date {
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--wp--preset--color--gold);
}
.bbc-meta a { color: inherit; }

/* Featured sermon on the Sermons page and Home */
.bbc-latest .wp-block-post-template { display: block; }
.bbc-latest .wp-block-post-title { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.bbc-latest .wp-block-post-title a { color: #fff; text-decoration: none; }

.wp-block-post-title a { text-decoration: none; }

/* ==========================================================================
   9b. Bulletin and events
   ========================================================================== */

/* Home: "This week" band under the banner, in gold-on-paper. */
.bbc-week {
  background: var(--wp--preset--color--gold-soft);
  border-bottom: 1px solid var(--wp--preset--color--border);
  padding: 40px var(--bbc-pad);
}
.bbc-week__inner {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 24px 56px;
  align-items: start;
}
.bbc-week h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0 0 6px; }
.bbc-week h2 a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.bbc-week h2 a:hover { color: var(--bbc-maroon); }
.bbc-week__more { font-weight: 600; }
.bbc-week__links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
@media (max-width: 760px) { .bbc-week__inner { grid-template-columns: 1fr; } }
.bbc-week--events-only .bbc-week__inner { grid-template-columns: 1fr; max-width: 860px; }
.bbc-week--events-only .bbc-events { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 32px; }
.bbc-week--events-only .bbc-event:first-child { padding-top: 12px; }

/* A list of dates set like a hymn board: the day number large, in a maroon
   block, then what and when. */
.bbc-events { list-style: none; margin: 0; padding: 0; }
.bbc-event {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.bbc-event:first-child { padding-top: 0; }
.bbc-event__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bbc-maroon);
  color: #fff;
  padding: 6px 0 7px;
  box-shadow: inset 0 -4px 0 var(--bbc-gold);
}
.bbc-event__day {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1;
}
.bbc-event__month {
  font-family: var(--wp--preset--font-family--label);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 2px;
}
.bbc-event__body { display: flex; flex-direction: column; gap: 3px; }
.bbc-event__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
}
.bbc-event__title:hover { color: var(--bbc-maroon); }
.bbc-event__when {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--wp--preset--color--gold);
}
.bbc-event__note { font-size: 0.96rem; color: var(--wp--preset--color--muted); }
.bbc-events--compact .bbc-event { grid-template-columns: 50px minmax(0, 1fr); gap: 14px; padding: 12px 0; }
.bbc-events--compact .bbc-event__day { font-size: 1.5rem; }
.bbc-events--compact .bbc-event__title { font-size: 1.2rem; }
.bbc-hero .bbc-event-when { color: #F1DED6; font-size: 0.9rem; }

.bbc-calendar-links {
  font-weight: 600;
  margin-top: 18px;
}

/* Side panels on the bulletin pages. */
.bbc-aside {
  background: var(--wp--preset--color--surface);
  border-top: 4px solid var(--bbc-maroon);
  padding: 22px 22px 18px;
}
.bbc-aside + .bbc-aside { margin-top: 24px; }

/* The bulletin itself reads like the printed one: section heads in the
   livestream bar style, prose in the body face. */
.bbc-bulletin h2.wp-block-heading {
  font-family: var(--wp--preset--font-family--label);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bbc-maroon);
  border-bottom: 2px solid var(--bbc-gold);
  padding-bottom: 8px;
  margin: 40px 0 16px;
}
.bbc-bulletin h2.wp-block-heading:first-child { margin-top: 0; }
.bbc-bulletin ul { padding-left: 1.2em; }
.bbc-bulletin li { margin: 0.45em 0; }
.bbc-bulletin li::marker { color: var(--bbc-maroon); }
.bbc-bulletin .wp-block-quote {
  border-left: 4px solid var(--bbc-gold);
  padding: 4px 0 4px 22px;
  margin: 0 0 18px;
}
.bbc-bulletin .wp-block-quote cite {
  font-family: var(--wp--preset--font-family--label);
  font-style: normal;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--faint);
}

.bbc-share { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.bbc-share a {
  font-weight: 600;
  text-decoration: none;
  padding: 11px 18px;
}
.bbc-share__wa { background: #1F7A4D; color: #fff; }
.bbc-share__wa:hover { background: #17603C; color: #fff; }
.bbc-share__follow { border: 2px solid #1F7A4D; color: #1F7A4D; }

/* Bulletin list */
.bbc-bulletins .wp-block-post-template > li {
  padding: 0 0 26px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.bbc-bulletins .wp-block-post-title { font-size: 1.9rem; margin: 4px 0 8px; }
.bbc-bulletins .wp-block-post-title a { color: var(--wp--preset--color--contrast); }
.bbc-bulletins .wp-block-post-title a:hover { color: var(--bbc-maroon); }
.bbc-bulletins .wp-block-post-excerpt__more-link { font-weight: 600; }

/* MailPoet's form, made to match. */
.bbc-subscribe .mailpoet_paragraph { margin-bottom: 10px; }
.bbc-subscribe input[type="email"],
.bbc-subscribe input[type="text"] {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--base);
  font: inherit;
}
.bbc-subscribe input[type="submit"] {
  background: var(--bbc-maroon);
  color: #fff;
  border: 0;
  padding: 12px 22px;
  font-family: var(--wp--preset--font-family--body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
/* MailPoet pads the form and floats its thank-you note over the middle of
   it; inside the aside both should sit flush with the text above. */
.bbc-subscribe form.mailpoet_form { padding: 0 !important; }
.bbc-subscribe .mailpoet_message { padding: 0; }
.bbc-subscribe .mailpoet_form_successfully_send .mailpoet_validate_success {
  position: static;
  transform: none;
  text-align: start;
  margin: 0;
}

/* ==========================================================================
   10. Footer
   ========================================================================== */

.bbc-footer {
  position: relative;
  background-color: var(--bbc-timber-dark);
  background-image: var(--bbc-planks);
  color: #DCCBBC;
  font-size: 0.96rem;
}
.bbc-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 10px;
  background: var(--bbc-zigzag) repeat-x left top / 24px 10px;
  transform: scaleY(-1);
}
.bbc-footer h2 {
  font-family: var(--wp--preset--font-family--label);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bbc-gold);
  margin: 0 0 14px;
}
.bbc-footer h2.bbc-footer__name {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
}
.bbc-footer a { color: #F3E6DA; text-decoration: none; border-bottom: 1px solid rgba(217,166,60,.45); }
.bbc-footer a:hover { color: var(--bbc-gold); border-bottom-color: var(--bbc-gold); }
.bbc-footer .wp-block-page-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bbc-footer .wp-block-page-list a { border-bottom: 0; }
.bbc-colophon {
  font-size: 0.88rem;
  color: #B9A594;
  border-top: 1px solid rgba(217,166,60,.3);
  padding-top: 22px;
}

/* ==========================================================================
   11. Accessibility and motion
   ========================================================================== */

:focus-visible {
  outline: 3px solid var(--bbc-gold);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bbc-maroon);
  color: #fff;
  padding: 12px 20px;
  z-index: 200;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

img, video, iframe { max-width: 100%; height: auto; }

/* Ministries and similar pages: cards in a grid that reflows on phones. */
.bbc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 32px 36px;
  margin-top: 30px;
}
.bbc-grid > .bbc-card { margin: 0; }

/* Sections that hold a wide row (a card grid or wide columns) line their
   label, heading and intro up with the left edge of that row, instead of
   centring them in the narrower reading column above it. */
.wp-block-group.has-global-padding:has(> .bbc-grid),
.wp-block-group.has-global-padding:has(> .bbc-days),
.wp-block-group.has-global-padding:has(> .bbc-schedule),
.wp-block-group.has-global-padding:has(> .wp-block-columns.alignwide) {
  padding-left: max(var(--bbc-pad), calc((100% + (var(--bbc-pad) * 2) - 1160px) / 2));
  padding-right: max(var(--bbc-pad), calc((100% + (var(--bbc-pad) * 2) - 1160px) / 2));
}
.wp-block-group.has-global-padding:has(> .bbc-grid) > *,
.wp-block-group.has-global-padding:has(> .bbc-days) > *,
.wp-block-group.has-global-padding:has(> .bbc-schedule) > *,
.wp-block-group.has-global-padding:has(> .wp-block-columns.alignwide) > * {
  margin-left: 0 !important;
  margin-right: auto !important;
}
.wp-block-group.has-global-padding:has(> .bbc-grid) > .bbc-grid,
.wp-block-group.has-global-padding:has(> .bbc-days) > .bbc-days,
.wp-block-group.has-global-padding:has(> .bbc-schedule) > .bbc-schedule,
.wp-block-group.has-global-padding:has(> .wp-block-columns.alignwide) > .alignwide { max-width: none; width: 100%; }