/*
Theme Name: RLC County Theme
Theme URI: https://github.com/ghub-account-random-telephone-variable/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: St. Johns County Republican Liberty Caucus
Template: twentytwentyfive
Version: 0.2.0
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
*/

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;
}

/* -------------------------------------------------------------------------
   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
   ------------------------------------------------------------------------- */


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 {
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	background-color: #ffffff;
}

/* Home page main: transparent so the banner injected by RLC Settings
   (see functions.php) shows through. Banner image + sizing are added via
   inline CSS in wp_head when an attachment is configured. */
body main.wp-block-group.x-home-main {
	background-color: transparent;
}

/* Each home page post: white rounded card sitting on top of the banner. */
body main.wp-block-group.x-home-main .x-home-post-card {
	background-color: #ffffff;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

body header > .wp-block-group.has-page-background-background-color {
	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 {
	min-height: fit-content;
	box-sizing: border-box;
}

/* Don't centre the top bar's flex children — space-between handles
   positioning so the left cluster sits left and the right cluster sits right. */
header .x-top-bar > .wp-block-group {
	margin-left: 0;
	margin-right: 0;
}


/* 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;
	padding-left: 3rem;
	padding-right: 3rem;
}

/* Brand row wrap: match the top bar's horizontal padding so both blocks
   align at the same left/right edges. */
header .x-brand-row-wrap {
	padding-left: 3rem !important;
	padding-right: 3rem !important;
}

/* 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;
    text-transform: uppercase;
}

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;
}

/* On narrow screens, stack the two clusters into two rows:
   row 1 = site title + Join, row 2 = search + socials. */
@media (max-width: 600px) {
	header .x-top-bar {
		flex-wrap: wrap !important;
		padding-left: 0.5rem !important;
		padding-right: 0.5rem !important;
	}
	header .x-top-bar > .wp-block-group {
		flex: 0 0 100%;
		justify-content: center;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

header .x-top-bar .x-anchor-button .wp-block-button__link {
	white-space: nowrap;
}

@media (max-width: 600px) {
	header .x-primary-menu .wp-block-navigation__responsive-container.is-menu-open,
	header .x-primary-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		background-color: #ffffff !important;
		color: #333333;
	}
	header .x-primary-menu .wp-block-navigation__responsive-container.is-menu-open a {
		color: #333333 !important;
	}
}


/* -------------------------------------------------------------------------
   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: 3.5rem;
	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;
}