/*
Theme Name: RLC County Theme
Theme URI: https://github.com/scarepenguin/rlc-county-theme
Description: Custom block theme for the RLC site. Child of Twenty Twenty-Five — inherits its base typography, layout and block patterns; layers on a red brand frame, blue sidebar, custom header, and home-page layout.
Author: scarepenguin
Template: twentytwentyfive
Version: 0.1.1
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html
Text Domain: rlc-county-theme
Tags: block-theme, full-site-editing
*/

/* -------------------------------------------------------------------------
   Four-sided red frame around the page.
   Body is red; constrained <main> + header sub-sections get a white card
   that's narrower than the viewport so body red shows on the sides.
   ------------------------------------------------------------------------- */

body {
	background-color: #ffffff;
	font-family: Poppins, sans-serif;
}

.wp-block-button.x-anchor-button .wp-block-button__link {
	background-color: rgba(255, 255, 255, 0.9) !important;
	color: #721515 !important;
	padding: 0.4rem 1.2rem;
	text-decoration: none;
	font-weight: 400;
	font-size: 0.9rem;
	font-family: Poppins, sans-serif;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

.wp-block-button.x-anchor-button .wp-block-button__link:hover {
	background-color: #ffffff !important;
	color: #721515 !important;
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
   RLC.org-style header — two stacked rows:
     1. Top bar   (dark-red strip; left: site title + Join button,
                   right: pill search bar + white social icons)
     2. Brand row (compact white shadow-card; logo on left + primary
                   navigation links on right, single row, no socials)
   Brand colour is the deep RLC red #721515 (a hair darker than rlc.org's
   #8a1818 — kept consistent with the existing theme).
   ------------------------------------------------------------------------- */


header.x-rlc-header {
	background-color: #ffffff;
	color: #1f1f1f;
	font-family: Poppins, sans-serif;
	position: relative;
	z-index: 100;
}


/* Constrain the white card sections to match each other and centre them so
   the body red shows on left/right. WP's `layout: constrained` constrains
   *child* widths, not the group's own width — without this rule the white
   cards span 100vw and there's no red border. */
body main.wp-block-group {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	background-color: #ffffff;
}

body header > .wp-block-group.has-page-background-background-color {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	box-sizing: border-box;
	background-color: #ffffff;
}

body header > .wp-block-group.has-page-background-background-color h1 {
	padding-top: 0.4em;
}

/* Make sure constrained groups inside main don't accidentally inherit red. */
main.wp-block-group .wp-block-group:not(.has-background) {
	background-color: transparent;
}

/* -------------------------------------------------------------------------
   Header / footer inner content: cap at the same width as <main> so the
   social icons (and footer site title) align with the main card's right
   edge instead of the viewport edge. Without this, alignfull strips
   stretch to the viewport and the right-justified flex children sit at
   the corner of the screen.
   ------------------------------------------------------------------------- */
body header > .wp-block-group > .wp-block-group,
body footer.wp-block-group > .wp-block-group,
body footer.wp-block-group > .wp-block-columns {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}


/* Modern search input. */
.wp-block-search__input {
	border: 1px solid #ddd;
	border-radius: 0;
	padding: 0.5rem;
}
.has-sidebar-background-color .wp-block-search__input {
	border: 1px solid #ffffff;
	background: transparent;
	color: #ffffff;
}
.wp-block-search__button {
	border-radius: 0;
	border: 0;
	padding: 0.5rem 1rem;
	font-weight: bold;
	background-color: transparent;
	color: #1f1f1f;
}
.wp-block-search__button svg {
	fill: currentColor;
}
.has-sidebar-background-color .wp-block-search__button {
	background: #ffffff;
	color: #1f1f1f;
}

/* Sidebar list styling. */
.has-sidebar-background-color .wp-block-latest-posts,
.has-sidebar-background-color .wp-block-categories {
	font-size: 0.9rem;
}
.has-sidebar-background-color .wp-block-latest-posts li {
	margin-bottom: 1.5rem;
}
.has-sidebar-background-color .wp-block-categories li {
	margin-bottom: 0.5rem;
}
.has-sidebar-background-color .wp-block-latest-posts li .wp-block-latest-posts__post-date {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.8rem;
	opacity: 0.7;
}

/* -------------------------------------------------------------------------
   Sidebar (blue) link styling: white text, hover underlines but does NOT
   change colour. Override theme.json's global link colours which would
   otherwise paint links red on the blue background.
   ------------------------------------------------------------------------- */

.has-sidebar-background-color a,
.has-sidebar-background-color a:visited,
.has-sidebar-background-color a:active {
	color: #ffffff;
	text-decoration: none;
}
.has-sidebar-background-color a:hover,
.has-sidebar-background-color a:focus {
	color: #ffffff;
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
   Top bar: force alignfull strips to extend to both viewport edges. WP's
   built-in alignfull break-out only works inside a wp-site-blocks wrapper,
   which isn't always present (e.g., RSVP pages render the header via
   block_template_part directly). Using position+transform instead of
   negative margins because the calc(50% - 50vw) approach was leaving the
   right edge clamped at the parent's right.
   ------------------------------------------------------------------------- */
body header > .wp-block-group.alignfull {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	max-width: 100vw;
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   Row 1: top bar — dark-red strip.
     Left  : site title + Join button (white pill, 90% opacity → 100% on hover)
     Right : pill search bar (icon inside, left-justified) + white social icons
   The search-bar pill mirrors the .x-anchor-button styling: same background
   colour, opacity, rounding, and font.
   ------------------------------------------------------------------------- */
header .x-top-bar {
	background-color: #721515;
	color: #ffffff;
	font-size: 0.9rem;
	align-items: center;
}

/* Inner flex clusters share a small horizontal gap. */
header .x-top-bar > .wp-block-group {
	gap: 1rem;
	align-items: center;
}

/* Site title: white text, no underline, light weight. */
header .x-top-bar .wp-block-site-title {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 400;
}

header .x-top-bar .wp-block-site-title a {
	color: #ffffff;
	text-decoration: none;
}
header .x-top-bar .wp-block-site-title a:hover,
header .x-top-bar .wp-block-site-title a:focus {
	text-decoration: underline;
}

/* Top-bar plain links (defensive for anything not covered by the above). */
header .x-top-bar a { color: #ffffff; }

/* ---- Search bar: pill-shaped to match the Join button. The default WP
        markup is [input][button], so we reverse the row to put the icon
        on the visible left edge of the pill and merge the two children
        into a single shared white background. ---- */
header .x-top-bar .wp-block-search { margin: 0; }
header .x-top-bar .wp-block-search > .wp-block-search__inside-wrapper {
	display: flex;
	flex-direction: row-reverse;
	align-items: stretch;
	background-color: rgba(255, 255, 255, 0.9);
	border: 0;
	border-radius: 4px;
	overflow: visible;
	height: auto;
	transition: background-color 0.15s ease-in-out;
}
header .x-top-bar .wp-block-search > .wp-block-search__inside-wrapper:hover,
header .x-top-bar .wp-block-search > .wp-block-search__inside-wrapper:focus-within {
	background-color: #ffffff;
}
header .x-top-bar .wp-block-search__input {
	border: 0;
	background: transparent;
	color: #721515;
	padding: 0.4rem 0.8rem 0.4rem 0;
	margin: 0;
	font-size: 0.9rem;
	font-family: Poppins, sans-serif;
	line-height: 1.4;
	min-width: 0;
}
header .x-top-bar .wp-block-search__input::placeholder {
	color: rgba(114, 21, 21, 0.6);
}
header .x-top-bar .wp-block-search__button {
	border: 0;
	background: transparent !important;
	color: #721515 !important;
	padding: 0.4rem 0.4rem 0.4rem 0.6rem;
	margin: 0;
	display: flex;
	align-items: center;
	border-radius: 0;
	font-weight: normal;
}
header .x-top-bar .wp-block-search__button svg {
	fill: currentColor;
	width: 1rem;
	height: 1rem;
}
header .x-top-bar .wp-block-search__button:hover {
	background: transparent !important;
	opacity: 0.7;
}

/* ---- Social icons in the top bar: white glyphs, transparent background. */
header .x-top-bar .x-top-social {
	gap: 0.5rem;
}
header .x-top-bar .x-top-social .wp-social-link {
	background-color: transparent !important;
	color: #ffffff !important;
}
header .x-top-bar .x-top-social .wp-social-link svg {
	fill: currentColor;
}
header .x-top-bar .x-top-social .wp-social-link:hover {
	opacity: 0.75;
}


/* -------------------------------------------------------------------------
   Row 2: brand row — a compact white shadow-card sitting on the body's
   red frame, holding the logo (left) and primary nav links (right) on a
   single line. Mirrors the rounded card on https://rlc.org/about/.

   The wrap (.x-brand-row-wrap) provides the outer red gutter; the inner
   .x-brand-row is the actual card and gets the shadow + radius.
   ------------------------------------------------------------------------- */
/* The whole brand row (card + outer red gutter) is capped at 100px tall.
   With 0.5rem (8px) of vertical padding on the wrap, the inner card gets
   100 - 16 = 84px to play with. The card uses 0.5rem internal padding,
   so the logo + text get ~68px of vertical room. */
/* `overflow: visible` is set explicitly all the way up the chain so the
   nav dropdown (which renders as a submenu absolutely positioned below
   its parent <li>) isn't clipped by the brand-row's height cap or by any
   ancestor that gets an implicit `overflow: hidden` from a layout block.
   The full chain includes the alignfull wrapper, the brand row, and every
   layer of the WP Navigation block's responsive-container structure. */
body header > .wp-block-group.alignfull,
header.x-rlc-header,
header .x-brand-row-wrap,
header .x-brand-row,
header .x-primary-menu .wp-block-navigation,
header .x-primary-menu .wp-block-navigation__responsive-container,
header .x-primary-menu .wp-block-navigation__responsive-close,
header .x-primary-menu .wp-block-navigation__responsive-dialog,
header .x-primary-menu .wp-block-navigation__responsive-container-content,
header .x-primary-menu .wp-block-navigation__container,
header .x-primary-menu .wp-block-page-list,
header .x-primary-menu .wp-block-navigation-item.has-child {
	overflow: visible;
}

/* WordPress's block layout injects dynamically-named wp-container-* classes
   that set container-type: inline-size for container queries. That property
   implies contain: layout, which clips absolutely-positioned descendants
   (like the dropdown submenu) at the element boundary — overflow: visible
   alone cannot override it. Reset containment on the two elements that carry
   those dynamic classes inside the header. */
header .x-brand-row,
header .x-primary-menu.wp-block-navigation {
	contain: none !important;
	container-type: normal !important;
}

header .x-brand-row-wrap {
	background-color: #ffffff;
	max-height: 100px;
	box-sizing: border-box;
}

header .x-brand-row {
	background-color: #ffffff;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
	padding: 0.5rem 1.5rem;
	align-items: center;
	flex-wrap: nowrap;
	gap: 1.5rem;
	max-height: 84px;
	box-sizing: border-box;
	/* The brand row needs to create a positioning context with a stacking
	   level above the page content so the submenu hovers over the body
	   instead of slipping behind it. */
	position: relative;
	z-index: 5;
}


/* Logo — height-constrained (so it never exceeds the card) and width-auto
   so the aspect ratio is preserved. The 150px width cap from the previous
   iteration would let a tall image push the row past 100px; switching to
   a height cap is what actually keeps the row ≤100px. */
header .x-brand-row .x-brand-icon {
	margin: 0;
	flex: 0 0 auto;
	height: 100px;
	max-height: 100px;
	display: flex;
	align-items: center;
}
header .x-brand-row .x-brand-icon a,
header .x-brand-row .x-brand-icon img {
	display: block;
	height: 100%;
	max-height: 100px;
	width: auto;
	max-width: 100px;
}


/* Primary navigation: Poppins, uppercase, single row.
   Link colour is the navy rgb(8, 54, 99); weight is light (400) so the
   header reads less heavy. Hover keeps the same colour and just
   underlines (no red flash). */
header .x-primary-menu {
	font-family: Poppins, sans-serif;
	font-size: 0.9rem;
	flex: 0 1 auto;
}
header .x-primary-menu .wp-block-navigation__container {
	flex-wrap: nowrap;
	gap: 2rem;
	white-space: nowrap;
}
header .x-primary-menu .wp-block-navigation-item__content {
	color: rgb(8, 54, 99) !important;
	font-family: Poppins, sans-serif;
	font-weight: 400;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.25rem 0;
}
header .x-primary-menu .wp-block-navigation-item__content:hover,
header .x-primary-menu .wp-block-navigation-item__content:focus,
header .x-primary-menu .current-menu-item .wp-block-navigation-item__content {
	color: rgb(8, 54, 99) !important;
	text-decoration: underline;
}


/* ---- Sub-menu (dropdown) styling. The default block-nav submenu packs
        items with almost no padding, which feels cramped against the
        rest of the page typography. Give each child page its own
        comfortable vertical and horizontal breathing room, and a soft
        hover state. */
header .x-primary-menu .wp-block-navigation__submenu-container {
	background-color: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 6px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
	padding: 0.5rem 0;
	min-width: 14rem;
	/* Float above any siblings of the header (page content, sidebar, etc.). */
	position: absolute;
	z-index: 9999;
}

/* Submenu items: stack vertically, full-width hover band, no nowrap-gap
   inheritance from the top-level container. */
header .x-primary-menu .wp-block-navigation__submenu-container .wp-block-navigation-item {
	display: block;
	width: 100%;
}
header .x-primary-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: 0.6rem 1.25rem;
	letter-spacing: 0.04em;
	font-weight: 400;
	color: rgb(8, 54, 99) !important;
}
header .x-primary-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
header .x-primary-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	background-color: rgba(8, 54, 99, 0.08);
	color: rgb(8, 54, 99) !important;
	text-decoration: underline;
}



/* -------------------------------------------------------------------------
   Footer — solid mid-gray strip, three equal columns:

     Left   : RLC logo (B&W)
     Centre : site tagline (centered)
     Right  : repeat of the social icons in white
   The footer uses the same alignfull break-out that the header sub-rows
   use, so its grey runs to both viewport edges; its inner .wp-block-columns
   is centred and capped via the rule near the top of this file.
   ------------------------------------------------------------------------- */
footer.x-rlc-footer {
	background-color: rgb(52, 52, 52);
	color: #ffffff;
	font-family: Poppins, sans-serif;
}

/* Apply the same alignfull break-out we use for the header strips so the
   gray fills the viewport regardless of the surrounding template wrapper. */
body footer.x-rlc-footer.alignfull {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	max-width: 100vw;
	box-sizing: border-box;
}

/* Three equal columns, vertically centred, no internal stacking gutters. */
footer.x-rlc-footer .x-footer-cols {
	gap: 2rem;
	margin: 0;
	align-items: center;
}
footer.x-rlc-footer .x-footer-cols > .wp-block-column {
	flex: 1 1 0;
	margin: 0;
}

/* Left column: logo flush-left, capped at the source 180px width. */
footer.x-rlc-footer .x-footer-col-left {
	text-align: left;
}
footer.x-rlc-footer .x-footer-logo {
	margin: 0;
}
footer.x-rlc-footer .x-footer-logo img {
	display: block;
	max-width: 180px;
	width: 100%;
	height: auto;
}

/* Centre column: tagline centered, lighter weight. */
footer.x-rlc-footer .x-footer-col-center {
	text-align: center;
}
footer.x-rlc-footer .x-footer-tagline {
	margin: 0;
	color: #ffffff;
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.4;
}

/* Right column: social icons flush-right, white glyphs, no backgrounds. */
footer.x-rlc-footer .x-footer-col-right {
	text-align: right;
}
footer.x-rlc-footer .x-footer-social {
	justify-content: flex-end;
	gap: 0.5rem;
	margin: 0;
}
footer.x-rlc-footer .x-footer-social .wp-social-link {
	background-color: transparent !important;
	color: #ffffff !important;
}
footer.x-rlc-footer .x-footer-social .wp-social-link svg {
	fill: currentColor;
}
footer.x-rlc-footer .x-footer-social .wp-social-link:hover {
	opacity: 0.75;
}

/* -------------------------------------------------------------------------
   Event RSVP Manager — normalize button/anchor height inside .erm-public.
   The plugin's inline <style> block uses ".erm-public .btn" (specificity
   0,2,0). Adding .erm-content to the <article> lets us use the three-class
   selector below (0,3,0) to win the cascade even though the inline block
   appears later in the HTML than this stylesheet.
   ------------------------------------------------------------------------- */
.erm-public .erm-content .btn {
	font-size: 1em;
	line-height: 1.5;
	vertical-align: middle;
	box-sizing: border-box;
}