/*
Theme Name:   Kadence Child — WBCA
Theme URI:    https://wbca.babfo.org/
Description:  Child theme for the Wancho Baptist Church Association weekly bulletin. Adds the bulletin homepage, bulletin layout and archive on top of Kadence.
Author:       Wancho Baptist Church Association
Template:     kadence
Version:      0.5.0
Requires PHP: 7.4
License:      GNU General Public License v3.0 (or later)
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  kadence-child-wbca
*/

/* --------------------------------------------------------------------------
   Design tokens

   Placeholders until WBCA supplies a logo and colours. Change them here and
   nothing below needs touching — every rule in this file reads from these.
   -------------------------------------------------------------------------- */

:root {
	--wbca-ink:          #1b1e33;
	--wbca-ink-soft:     #4a4f6a;
	--wbca-ink-faint:    #7b8098;
	--wbca-rule:         #e2e4ee;
	--wbca-surface:      #ffffff;
	--wbca-surface-alt:  #f6f7fb;

	/* Sampled from the association seal.
	 *
	 *   blue    #2E3192   10.7:1 on white — safe for text at any size
	 *   yellow  #FEF200    1.2:1 on white — NEVER text on white. Background
	 *                      only, with blue or ink on top (9.0:1).
	 *   red     #ED1B24    4.4:1 on white — large text and accents only, not
	 *                      body copy. Reserved for genuine emphasis.
	 */
	--wbca-accent:       #2e3192;
	--wbca-accent-dark:  #23255e;
	--wbca-accent-wash:  #eceef8;
	--wbca-gold:         #fef200;
	--wbca-red:          #ed1b24;

	--wbca-radius:       10px;
	--wbca-gap:          1.5rem;
	--wbca-measure:      68ch;
}

/* --------------------------------------------------------------------------
   Bulletin dateline
   -------------------------------------------------------------------------- */

.wbca-dateline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem .9rem;
	margin: 0 0 .75rem;
	font-size: .8125rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wbca-ink-faint);
}

.wbca-dateline__issue {
	padding: .2rem .55rem;
	border-radius: 999px;
	background: var(--wbca-accent-wash);
	color: var(--wbca-accent-dark);
	font-weight: 600;
	letter-spacing: .04em;
}

/* --------------------------------------------------------------------------
   Lead bulletin — the most recent issue, shown in full on the homepage
   -------------------------------------------------------------------------- */

.wbca-lead {
	margin-bottom: 3rem;
	padding-bottom: 2.5rem;
	border-bottom: 3px solid var(--wbca-gold);
}

.wbca-lead__title {
	margin: 0 0 .5rem;
	font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
	line-height: 1.15;
	color: var(--wbca-ink);
}

.wbca-lead__title a {
	color: inherit;
	text-decoration: none;
}

.wbca-lead__title a:hover,
.wbca-lead__title a:focus-visible {
	color: var(--wbca-accent);
	text-decoration: underline;
	text-underline-offset: .15em;
}

.wbca-lead__media {
	margin: 1.25rem 0;
	border-radius: var(--wbca-radius);
	overflow: hidden;
}

.wbca-lead__media img {
	display: block;
	width: 100%;
	height: auto;
}

.wbca-lead__excerpt {
	max-width: var(--wbca-measure);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--wbca-ink-soft);
}

/* --------------------------------------------------------------------------
   Bulletin grid — earlier issues
   -------------------------------------------------------------------------- */

.wbca-section-heading {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 1.5rem;
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wbca-ink-faint);
}

.wbca-section-heading::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--wbca-rule);
}

.wbca-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: var(--wbca-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wbca-card {
	display: flex;
	flex-direction: column;
	background: var(--wbca-surface);
	border: 1px solid var(--wbca-rule);
	border-radius: var(--wbca-radius);
	overflow: hidden;
	transition: border-color .18s ease, transform .18s ease;
}

.wbca-card:hover,
.wbca-card:focus-within {
	border-color: var(--wbca-accent);
	transform: translateY(-2px);
}

.wbca-card__media {
	aspect-ratio: 16 / 9;
	background: var(--wbca-surface-alt);
	overflow: hidden;
}

.wbca-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wbca-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: .5rem;
	padding: 1.125rem 1.25rem 1.375rem;
}

.wbca-card__title {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.3;
}

.wbca-card__title a {
	color: var(--wbca-ink);
	text-decoration: none;
}

.wbca-card__title a:hover,
.wbca-card__title a:focus-visible {
	color: var(--wbca-accent);
	text-decoration: underline;
	text-underline-offset: .15em;
}

.wbca-card__excerpt {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--wbca-ink-soft);
}

/* --------------------------------------------------------------------------
   Empty state — shown before the first bulletin is published
   -------------------------------------------------------------------------- */

.wbca-empty {
	padding: 2.5rem 1.5rem;
	border: 1px dashed var(--wbca-rule);
	border-radius: var(--wbca-radius);
	background: var(--wbca-surface-alt);
	text-align: center;
	color: var(--wbca-ink-soft);
}

.wbca-empty p {
	margin: 0 auto;
	max-width: 42ch;
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

.wbca-card a:focus-visible,
.wbca-lead a:focus-visible {
	outline: 3px solid var(--wbca-accent);
	outline-offset: 3px;
	border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.wbca-card {
		transition: none;
	}
	.wbca-card:hover,
	.wbca-card:focus-within {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Share row — beneath every bulletin

   Brand colours are used at full strength here on purpose. These two buttons
   are the point of the page on a phone, and a reader scanning quickly should
   recognise them by colour before reading the label.
   -------------------------------------------------------------------------- */

.wbca-share {
	margin: 2.5rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wbca-rule);
}

.wbca-share__label {
	margin: 0 0 .75rem;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wbca-ink-faint);
}

.wbca-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: .625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wbca-share__link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	/* 44px min height — the smallest reliable touch target on a phone. */
	min-height: 44px;
	padding: .5rem 1.1rem;
	border-radius: 999px;
	color: #fff;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: filter .15s ease, transform .15s ease;
}

.wbca-share__link:hover,
.wbca-share__link:focus-visible {
	color: #fff;
	text-decoration: none;
	filter: brightness(1.08);
	transform: translateY(-1px);
}

.wbca-share__link:focus-visible {
	outline: 3px solid var(--wbca-ink);
	outline-offset: 2px;
}

.wbca-share__link--whatsapp { background: #25d366; color: #05331a; }
.wbca-share__link--whatsapp:hover,
.wbca-share__link--whatsapp:focus-visible { color: #05331a; }

.wbca-share__link--facebook { background: #1877f2; }

.wbca-share__icon {
	flex: none;
}

@media (prefers-reduced-motion: reduce) {
	.wbca-share__link {
		transition: none;
	}
	.wbca-share__link:hover,
	.wbca-share__link:focus-visible {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Bulletin archive
   -------------------------------------------------------------------------- */

.wbca-archive-header {
	margin-bottom: 2rem;
	padding-bottom: 1.25rem;
	border-bottom: 3px solid var(--wbca-gold);
}

.wbca-archive-header__title {
	margin: 0;
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
	line-height: 1.2;
	color: var(--wbca-ink);
}

.wbca-archive-header__intro {
	max-width: var(--wbca-measure);
	margin-top: .625rem;
	color: var(--wbca-ink-soft);
}

/* ==========================================================================
   MOBILE

   Roughly 99% of readers arrive on a phone, so this section is not a set of
   patches over a desktop design — it is the primary case.

   Kadence prints its branding rules inline as `.site-branding a.brand img` and
   `.site-branding .site-title`. Our stylesheet declares kadence-global as a
   dependency, so it loads afterwards and wins on equal specificity. The
   selectors below deliberately mirror Kadence's own rather than reaching for
   !important.
   ========================================================================== */

@media (max-width: 767px) {

	/* The header, as installed, put a 200px seal beside a 26px title and wrapped
	   "Wancho Baptist Church Association" onto four lines — most of a phone
	   screen before any content. The seal shrinks to a mark and the title drops
	   to two lines.

	   The title is kept rather than hidden: at 60px the lettering around the
	   seal is far too small to read, so the mark alone no longer identifies the
	   association. */
	.site-branding a.brand img {
		max-width: 60px;
	}

	.site-branding .site-title {
		font-size: 1.0625rem;
		line-height: 1.25;
	}

	.site-branding a.brand {
		gap: .75rem;
		align-items: center;
	}

	/* Reclaim horizontal space. Kadence's default gutters are generous for a
	   desktop column and wasteful at 360px. */
	.content-container.site-container,
	.site-container {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.wbca-lead {
		margin-bottom: 2rem;
		padding-bottom: 1.75rem;
	}

	.wbca-lead__excerpt {
		font-size: 1rem;
	}

	.wbca-empty {
		padding: 1.75rem 1.25rem;
	}

	/* Share buttons share the row evenly instead of huddling at the left. The
	   whole point of this site is a bulletin forwarded to a WhatsApp group, so
	   these are the most-tapped controls on the page. */
	.wbca-share__list > li {
		flex: 1 1 0;
	}

	.wbca-share__link {
		justify-content: center;
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   Content safety on narrow screens

   These apply at every width but only ever matter on a phone.
   -------------------------------------------------------------------------- */

/* The bulletin template includes a "Coming up" table. A table has a minimum
   width it cannot go below, so without this it either overflows the viewport
   and scrolls the whole page sideways, or squeezes the date column to one
   character per line. Scrolling the table inside its own box keeps the page
   itself fixed. */
.entry-content .wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.entry-content .wp-block-table table {
	min-width: 22rem;
}

/* A long word or a pasted URL in a bulletin would otherwise push the layout
   wider than the screen. Whoever types the bulletin should not have to think
   about this. */
.entry-content,
.wbca-card__title,
.wbca-lead__title {
	overflow-wrap: break-word;
}

/* Quotes carry the Word for the Week, which is the first thing most readers
   see. The gold rule ties it to the seal without relying on colour alone. */
.entry-content .wp-block-quote {
	border-left: 4px solid var(--wbca-gold);
	padding-left: 1.1rem;
	font-style: normal;
	color: var(--wbca-ink);
}

/* Bulletin headings, in brand blue. */
.entry-content h2 {
	color: var(--wbca-accent);
}

/* --------------------------------------------------------------------------
   Header overflow on phones

   The header row is a flex container, and flex items default to
   `min-width: auto` — meaning they refuse to shrink below their content's
   intrinsic width. The association's name is long enough that the branding
   item held the whole header open at roughly 430px, so on a 360–390px phone
   the entire document became wider than the screen. Every element inherited
   that: the title, the empty-state box and the footer were all clipped on the
   right, and the menu button sat off-screen entirely.

   Setting min-width: 0 lets the branding shrink so the title wraps to two
   lines rather than holding the header open.

   Verified with the DevTools protocol at 360px and 390px: document scrollWidth
   equals the viewport and no element overflows. Note for future debugging —
   Chrome's --screenshot flag lays the page out at one width and captures at
   another, which fakes convincing right-edge clipping that is not real. Use
   Emulation.setDeviceMetricsOverride then Page.captureScreenshot instead.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	.site-header-row-container-inner,
	.site-header-item,
	.site-branding,
	.site-branding a.brand,
	.site-title-wrap {
		min-width: 0;
	}

	.site-branding .site-title {
		overflow-wrap: break-word;
		hyphens: none;
	}
}