/*
Theme Name: MTACA Custom Theme
Theme URI: https://www.mtaca.org/
Description: Twenty Twenty-Five child theme for the Music Teachers Association of Central Arkansas. Wide beige navigation flyouts, sticky header, soft open/close motion, and scroll-revealed grids.
Author: M3Designs
Template: twentytwentyfive
Version: 1.1.36
Requires at least: 6.7
Requires PHP: 7.2
Text Domain: mtaca
*/

/* ==========================================================================
   1. CSS Variables
   ========================================================================== */
:root {
	--mtaca-brand: #840000;
	--mtaca-nav-cream: #f7f1e8;
	--mtaca-beige: #f8f7f5;
	--mtaca-submenu-beige: #fbfaf3;
	--mtaca-submenu-radius: 0.75rem;
	--mtaca-submenu-offset: 0.4rem;
	--mtaca-submenu-ease: cubic-bezier(0.25, 1, 0.5, 1);
	--mtaca-submenu-duration: 0.22s;
	--mtaca-reveal-duration: 0.55s;
	--mtaca-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--mtaca-reveal-shift-y: 2rem;
	--mtaca-reveal-shift-x: 0;
}

/* ==========================================================================
   2. Header & Navigation Styles
   ========================================================================== */
/* Sticky header bar */
.mtaca_header {
	position: sticky;
	top: 0;
	z-index: 9999;
	background-color: var(--mtaca-beige);
	border-bottom: 1px solid #8e0a01;
}

/* Mobile compact header: logo + hamburger on one row, full menu replaced
   by the hamburger icon. Applies to narrow portrait phones AND any
   landscape phone - a landscape phone (e.g. iPhone 16 Pro Max at
   956x440) is wider than 781px, so without the max-height alternative
   here it would fall through to the full desktop header (spelled-out
   menu, uncapped logo size) instead of collapsing like it should.
   The extra max-width:1024px on that branch matters too: max-height
   alone also matches an ordinary desktop browser window that's just
   been resized short (devtools open, a small non-maximized window,
   etc.), which would otherwise strip the nav down to a bare hamburger
   on a full-width desktop view - a real bug this caught in practice,
   not just a hypothetical. 1024px comfortably covers real landscape
   phones (~960px at most) while excluding that desktop case. */
@media (max-width: 781px), (orientation: landscape) and (max-height: 550px) and (max-width: 1024px) {
	.mtaca_header {
		padding: 0.4rem 0.75rem !important;
	}

	.mtaca_header > .wp-block-columns {
		gap: 0 !important;
		margin: 0 !important;
	}

	.mtaca_header > .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.mtaca_header .wp-block-group {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding-top: 0 !important;
		padding-right: 0 !important;
		padding-bottom: 0 !important;
		padding-left: 0 !important;
	}

	.mtaca_header .wp-block-group.is-vertical,
	.mtaca_header .wp-block-group.is-nowrap {
		display: block !important;
		width: 100% !important;
	}

	.mtaca_header .wp-block-group.has-global-padding.is-layout-constrained {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 0.75rem !important;
		width: 100% !important;
		max-width: none !important;
	}

	.mtaca_header .wp-block-image {
		margin: 0 !important;
		flex: 1 1 auto !important;
		min-width: 0 !important;
		width: auto !important;
		max-width: calc(100% - 3.25rem) !important;
	}

	.mtaca_header .wp-block-image img {
		display: block !important;
		width: auto !important;
		max-width: min(240px, calc(100vw - 5rem)) !important;
		max-height: 52px !important;
		height: auto !important;
		object-fit: contain !important;
		aspect-ratio: auto !important;
	}

	/* flex:1 1 auto + min-width:0 (not the old flex:0 0 auto + max-width:none)
	   so this wrapper - and the nav inside it - can actually shrink to fit
	   the remaining space next to the logo, keeping the compact header
	   from overflowing. (The hamburger-vs-inline switch itself is forced
	   explicitly below - see the note by .wp-block-navigation__responsive-
	   container-open - it isn't something WP measures automatically.) */
	.mtaca_header .wp-block-group.has-global-padding > .wp-block-group:has(.wp-block-navigation) {
		display: flex !important;
		flex: 1 1 auto !important;
		min-width: 0 !important;
		align-items: center !important;
		justify-content: flex-end !important;
		margin: 0 0 0 auto !important;
		padding: 0 !important;
	}

	.mtaca_header .wp-block-navigation,
	.mtaca_header .wp-block-navigation__responsive-container,
	.mtaca_header .wp-block-navigation__responsive-container-open {
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.mtaca_header .wp-block-navigation {
		display: flex !important;
		justify-content: flex-end !important;
	}

	.mtaca_header .wp-block-navigation__responsive-container-open {
		padding: 0.35rem !important;
		margin: 0 !important;
	}

	.mtaca_header .wp-block-navigation__responsive-container-open svg {
		width: 28px !important;
		height: 28px !important;
	}

	/* WP core hard-codes the hamburger/inline-menu switch to a fixed
	   @media (min-width:600px) breakpoint (wp-includes/blocks/navigation/
	   style.min.css) - NOT overflow measurement, and NOT aware of this
	   theme's own landscape-phone query above. Above 600px core forces
	   the toggle button to display:none and the container to display:
	   block (always-inline), so a landscape phone like the iPhone 16/17
	   Pro Max (900-960px wide) gets the full desktop menu even though
	   everything above in this block is trying to build a compact
	   header for it. Override both here so it actually collapses. */
	.mtaca_header .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}

	.mtaca_header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
}

/* Portrait phones get a larger header/logo than the landscape-compact
   default set above (52px) - more presence when there's vertical room
   to spare. Loaded after the shared rule above so it wins for portrait
   specifically; landscape is untouched and stays at 52px. */
@media (max-width: 781px) and (orientation: portrait) {
	.mtaca_header {
		padding: 0.65rem 0.9rem !important;
	}

	.mtaca_header .wp-block-image img {
		max-height: 72px !important;
	}
}

/* Desktop flyouts */
@media (min-width: 600px) {
	.mtaca_header .wp-block-navigation:not(:has(.wp-block-navigation__responsive-container.is-menu-open))
	.wp-block-navigation__container > .wp-block-navigation-item.has-child {
		position: relative;
	}

	.mtaca_header .wp-block-navigation:not(:has(.wp-block-navigation__responsive-container.is-menu-open))
	.wp-block-navigation__submenu-container {
		position: absolute !important;
		top: calc(100% + var(--mtaca-submenu-offset)) !important;
		left: 0 !important;
		right: auto !important;
		width: max-content !important;
		min-width: 14rem !important;
		max-width: min(36rem, 92vw) !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		margin: 0 !important;
		box-sizing: border-box !important;
		border-radius: var(--mtaca-submenu-radius) !important;
		overflow: visible !important;
		background-color: var(--mtaca-submenu-beige) !important;
		border: 1px solid rgba(142, 10, 1, 0.18) !important;
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12) !important;
		padding: 0.55rem 0 !important;
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		gap: 0 !important;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-0.35rem);
		transition:
			opacity var(--mtaca-submenu-duration) var(--mtaca-submenu-ease),
			transform var(--mtaca-submenu-duration) var(--mtaca-submenu-ease),
			visibility var(--mtaca-submenu-duration);
		z-index: 10000;
	}

	.mtaca_header .wp-block-navigation:not(:has(.wp-block-navigation__responsive-container.is-menu-open))
	.wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		top: calc(var(--mtaca-submenu-offset) * -1 - 2px);
		left: 0;
		right: 0;
		height: calc(var(--mtaca-submenu-offset) + 2px);
	}

	.mtaca_header .wp-block-navigation:not(:has(.wp-block-navigation__responsive-container.is-menu-open))
	.wp-block-navigation__submenu-container[hidden] {
		display: flex !important;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-0.35rem);
	}

	.mtaca_header .wp-block-navigation:not(:has(.wp-block-navigation__responsive-container.is-menu-open))
	.wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container,
	.mtaca_header .wp-block-navigation:not(:has(.wp-block-navigation__responsive-container.is-menu-open))
	.wp-block-navigation__container > .wp-block-navigation-item:focus-within:not(:has(> button[aria-expanded="false"])) > .wp-block-navigation__submenu-container,
	.mtaca_header .wp-block-navigation:not(:has(.wp-block-navigation__responsive-container.is-menu-open))
	.wp-block-navigation-item.has-child:has(> button[aria-expanded="true"]) > .wp-block-navigation__submenu-container {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
	}

	.mtaca_header .wp-block-navigation:not(:has(.wp-block-navigation__responsive-container.is-menu-open))
	.wp-block-navigation__submenu-container > .wp-block-navigation-item {
		position: static !important;
		float: none !important;
		width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
	}

	.mtaca_header .wp-block-navigation:not(:has(.wp-block-navigation__responsive-container.is-menu-open))
	.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		position: static !important;
		display: block !important;
		width: 100% !important;
		box-sizing: border-box !important;
		padding: 0.4rem 1.1rem !important;
		white-space: nowrap !important;
		color: var(--mtaca-brand) !important;
		font-size: 0.9rem !important;
		line-height: 1.35 !important;
	}

	.mtaca_header .wp-block-navigation:not(:has(.wp-block-navigation__responsive-container.is-menu-open))
	.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		text-decoration: underline;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mtaca_header .wp-block-navigation .wp-block-navigation__submenu-container {
		transition: none !important;
	}
}

/* Hero Cover block only (Advanced > Additional CSS class "mtaca-hero" on
   the block itself - scoped here instead of the generic .wp-block-cover
   so this can't affect any other cover block on the site, and so the
   selector's higher specificity rules out any other rule silently
   winning the cascade).

   "parallax" uses background-attachment:fixed, which makes
   background-size:cover scale against the full viewport height instead
   of the block's own short height - on a tall mobile screen this blows
   the image up into a huge, blurry, cropped-in close-up. WordPress core
   only disables this for iOS Safari; drop it for every narrow portrait
   viewport AND every landscape phone instead (comma = OR: a phone in
   landscape is short but can be wider than 781px, e.g. an iPhone 16 Pro
   Max is 956x440, so max-height covers it where max-width alone would
   miss it). */
@media (max-width: 781px), (orientation: landscape) and (max-height: 550px) and (max-width: 1024px) {
	.wp-block-cover.mtaca-hero.has-parallax,
	.mtaca-hero .wp-block-cover__image-background.has-parallax {
		background-attachment: scroll !important;
	}
}

/* Hero height by orientation on mobile: taller in portrait for a proper
   hero presence, shorter in landscape so it doesn't eat the whole short
   viewport before any content is visible. Landscape phones (e.g. iPhone
   16 Pro Max at 956x440) are WIDER than the 781px portrait breakpoint,
   so this keys off max-height instead of max-width - a phone in
   landscape is always short, while a tablet/laptop in landscape stays
   tall, so height is what actually distinguishes them. */
@media (max-width: 781px) and (orientation: portrait) {
	.wp-block-cover.mtaca-hero {
		min-height: 400px !important;
	}
}

@media (orientation: landscape) and (max-height: 550px) and (max-width: 1024px) {
	.wp-block-cover.mtaca-hero {
		min-height: 160px !important;
	}
}

/* ==========================================================================
   3. Scroll-Revealed Grids
   ========================================================================== */
.dynamic_grid.is-reveal-ready .mtaca-reveal-item {
	opacity: 0;
	transform: translate3d(var(--mtaca-reveal-shift-x), var(--mtaca-reveal-shift-y), 0);
	transition: none;
	will-change: opacity, transform;
}

.dynamic_grid.is-reveal-ready .mtaca-reveal-item.is-revealed {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--mtaca-reveal-duration) var(--mtaca-reveal-ease),
		transform var(--mtaca-reveal-duration) var(--mtaca-reveal-ease);
	transition-delay: var(--mtaca-reveal-delay, 0s);
	will-change: auto;
}

.dynamic_grid.reveal-from-left {
	--mtaca-reveal-shift-x: -2.5rem;
	--mtaca-reveal-shift-y: 0;
}

.dynamic_grid.reveal-from-right {
	--mtaca-reveal-shift-x: 2.5rem;
	--mtaca-reveal-shift-y: 0;
}

@media (prefers-reduced-motion: reduce) {
	.dynamic_grid.is-reveal-ready .mtaca-reveal-item {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ==========================================================================
   4. Forminator UI Styles
   ========================================================================== */
.forminator-ui .forminator-label {
	color: #7b181e !important; 
	font-weight: 500 !important;
	font-size: 16px !important;
}

.forminator-ui .forminator-input,
.forminator-ui .forminator-textarea {
	background-color: #faf7f2 !important; 
	color: #7b181e !important;
	border: 1px solid #d9cdc3 !important;
	border-radius: 12px !important;
	padding: 12px 16px !important;
	transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.forminator-ui .forminator-input::placeholder,
.forminator-ui .forminator-textarea::placeholder {
	color: #b58c8e !important;
	opacity: 1;
}

.forminator-ui .select2-container--default .select2-selection--single {
	background-color: #ffffff !important; 
	border: 1px solid #d9cdc3 !important;
	border-radius: 12px !important;
	height: auto !important;
	padding: 12px 16px !important;
}

.forminator-ui .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: #7b181e !important;
	line-height: normal !important;
	padding-left: 0 !important;
}

.forminator-ui .select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: #7b181e transparent transparent transparent !important;
}
.forminator-ui .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
	border-color: transparent transparent #7b181e transparent !important;
}

.forminator-ui .forminator-input:focus,
.forminator-ui .forminator-textarea:focus,
.forminator-ui .select2-container--default.select2-container--focus .select2-selection--single,
.forminator-ui .select2-container--default.select2-container--open .select2-selection--single {
	border-color: #7b181e !important;
	outline: none !important;
	box-shadow: 0 0 0 1px #7b181e !important; 
}

.select2-container .select2-dropdown {
	background-color: #ffffff !important;
	border: 1px solid #d9cdc3 !important;
	border-radius: 0 0 12px 12px !important;
	overflow: hidden !important;
}

.select2-container .select2-results__option {
	background-color: #ffffff !important;
	color: #7b181e !important;
	padding: 10px 16px !important;
}

.select2-container .select2-results__option--highlighted[aria-selected],
.select2-container .select2-results__option:hover {
	background-color: #faf7f2 !important; 
	color: #7b181e !important;
}

.select2-container .select2-results__option[aria-selected="true"] {
	background-color: #faf7f2 !important;
	color: #7b181e !important;
}

/* Forminator's submit button is intentionally left unstyled here so it
   picks up the single unified button style in section 5 below. */

/* ==========================================================================
   5. Global Buttons & File Blocks (Fortified for FSE)
   ========================================================================== */
/* Force the layout to stack properly */
body .wp-block-file {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

/* Keep the PDF Embed Preview at the very top (if enabled) */
body .wp-block-file .wp-block-file__embed {
    order: 1 !important;
    width: 100% !important;
    margin-bottom: 10px !important;
}

/* Text Link - Pushed to the bottom */
body .wp-block-file > a:not(.wp-element-button) {
    order: 3 !important;
    display: inline-block !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

/* Global Buttons & File Block Button - one consistent brand pill style.
   Scoped to known content/action-button classes rather than every <button>
   element on the page: bare <button> is also used for UI chrome we must
   never restyle - WP's nav submenu-toggle and hamburger open/close
   controls, Forminator's pagination step tabs, the mtaca plugins' icon
   buttons - none of which carry these classes. Forminator's own
   .forminator-button covers its real actions (Submit/Next/Previous). */
body input[type="button"],
body input[type="reset"],
body input[type="submit"],
body .forminator-button,
body .wp-element-button,
body .wp-block-file .wp-block-file__button.wp-element-button {
    order: 2 !important;
    background-color: var(--mtaca-brand) !important;
    border: none !important;
    border-radius: 9999px !important;
    color: #ffffff !important;
    padding: 10px 24px !important;
    margin: 0 !important;
    align-self: flex-start !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease-in-out !important;
}

/* Global Hover and Focus States */
body input[type="button"]:hover,
body input[type="button"]:focus,
body input[type="reset"]:hover,
body input[type="reset"]:focus,
body input[type="submit"]:hover,
body input[type="submit"]:focus,
body .forminator-button:hover,
body .forminator-button:focus,
body .wp-element-button:hover,
body .wp-element-button:focus,
body .wp-block-file .wp-block-file__button.wp-element-button:hover,
body .wp-block-file .wp-block-file__button.wp-element-button:focus {
    background-color: #60000f !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* ==========================================================================
   6. Fluid Page Titles
   ========================================================================== */
/* Large standalone page-hero titles (e.g. the "Find a teacher" H1) are
   set at a fixed editor font size that doesn't shrink for narrow
   screens, so long titles or long words can break mid-word
   ("teache/r"). Scale smoothly instead. Scoped to .artist-page-title
   specifically - .wp-block-post-title alone is NOT unique to these big
   hero titles, WordPress reuses it for every small card title inside a
   listing/query-loop grid too (e.g. the "Articles"/"Find a
   teacher"/etc. cards on the Resources page), and the first version of
   this rule blew all of those up to full hero size as a result.

   The first version of this clamp (1.3rem + 3vw, floor 1.75rem) actually
   computed to ~32-34px on a normal phone width - the vw term alone
   passes the 1.75rem floor well before typical phone widths, so the
   "floor" was never really being used. That's too large for a title
   like "Parent and Student Resources" to fit without a mid-word break.
   Lowered the whole scale so mobile lands around 24-26px, with a true
   floor as a backstop. overflow-wrap:break-word stays as a last-resort
   safety net for a genuinely unbreakable long word, not the everyday
   behavior. */
.wp-block-post-title.artist-page-title {
	font-size: clamp(1.375rem, 1rem + 2.2vw, 3rem) !important;
	overflow-wrap: break-word !important;
}

/* ==========================================================================
   7. Resource Pages: Vertical Sidebar (Mobile)
   ========================================================================== */
/* The "Find a Teacher" / Resources pages use a different header entirely
   from the homepage: a persistent left-hand sidebar (small logo, its own
   always-on hamburger nav, and a decorative site title rotated 90° via
   writing-mode) fixed at 8rem wide with a min-height:100vh column next to
   it. None of that shrinks for mobile, so on a narrow phone it overflows
   the screen and the rotated title has a full page height to fill,
   dominating the view. On mobile: stack the sidebar above the content
   instead of beside it, drop its forced full-height sizing, and re-order
   it to logo, rotated title, then hamburger - via CSS `order` only, so
   the underlying block order (logo, nav, title) and desktop's layout,
   which share this same markup, are untouched. */
@media (max-width: 781px) {
	.wp-block-columns:has(.vertical-sidebar) {
		flex-wrap: wrap !important;
	}

	.wp-block-column:has(.vertical-sidebar) {
		flex-basis: 100% !important;
		width: 100% !important;
	}

	.wp-block-column:has(.vertical-sidebar) .is-layout-constrained {
		min-height: 0 !important;
	}

	/* The sidebar's own wrapper carries top/bottom padding sized for
	   standing beside a 100vh-tall column on desktop; stacked above the
	   content on mobile, that padding plus whatever the page title uses
	   to line itself up with the sidebar on desktop - a leading spacer
	   on some pages, margin-top directly on the title on others - reads
	   as one big empty gap after the hamburger. Trim all of it down for
	   mobile only. */
	.wp-block-column:has(.vertical-sidebar) > .wp-block-group {
		padding-top: 0.5rem !important;
		padding-bottom: 0.5rem !important;
	}

	.wp-block-column:has(.vertical-sidebar) + .wp-block-column > main > .wp-block-group > .wp-block-spacer:first-child {
		height: 0.5rem !important;
	}

	.wp-block-column:has(.vertical-sidebar) + .wp-block-column .artist-page-title {
		margin-top: 0.25rem !important;
	}

	/* Stacked (column), not row: logo on top, hamburger directly below
	   it, both left-aligned, instead of side by side. */
	.vertical-sidebar {
		flex-direction: column !important;
		justify-content: flex-start !important;
		align-items: flex-start !important;
		gap: 0.5rem !important;
		padding: 0.4rem 0.75rem !important;
	}

	/* The logo's containing group/figure were sized for the narrow 8rem
	   vertical rail; switching that rail to a full-width row let them
	   flex-grow to fill it, blowing the icon up to fill most of the
	   screen. Pin it back to a small, fixed, non-growing size. */
	.vertical-sidebar .wp-block-image,
	.vertical-sidebar figure {
		flex: 0 0 auto !important;
		width: auto !important;
	}

	.vertical-sidebar img {
		width: 200px !important;
		max-width: 200px !important;
		height: auto !important;
		flex: 0 0 auto !important;
	}

	/* Keep the nav (and its hamburger button) sized to its own content
	   instead of inheriting a width meant for the old narrow vertical
	   rail - that was stretching/pushing the button off past the
	   visible edge. */
	.vertical-sidebar .wp-block-navigation {
		flex: 0 0 auto !important;
		width: auto !important;
		display: flex !important;
		justify-content: flex-start !important;
		order: 3 !important;
	}

	/* Replace the block's built-in 2-line "handle" icon with a classic
	   3-bar hamburger drawn in pure CSS (one bar as the element itself,
	   two more via box-shadow), so it reads as a menu icon rather than
	   an equals sign. */
	.vertical-sidebar .wp-block-navigation__responsive-container-open {
		flex: 0 0 auto !important;
		width: 24px !important;
		height: 24px !important;
		position: relative !important;
	}

	.vertical-sidebar .wp-block-navigation__responsive-container-open svg {
		display: none !important;
	}

	.vertical-sidebar .wp-block-navigation__responsive-container-open::before {
		content: "" !important;
		position: absolute !important;
		left: 50% !important;
		top: 50% !important;
		width: 20px !important;
		height: 2px !important;
		background: currentColor !important;
		transform: translate(-50%, -50%) !important;
		box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor !important;
	}

	/* A small left/right margin so the responsive nav panel's focus
	   outline (auto-focused on open) never sits flush against the
	   viewport edge and gets visually clipped. */
	.vertical-sidebar .wp-block-navigation__responsive-container-content {
		margin-left: 0.5rem !important;
		margin-right: 0.5rem !important;
	}

	/* Image wrapper defaults to order:0 and stays first; this moves the
	   title to sit right after it, ahead of the hamburger (order:3
	   above) - block order in the editor is untouched. Also flip it out
	   of the desktop rail's vertical writing-mode (set inline on the
	   block) back to normal horizontal text, and give it room to
	   breathe now that it's a normal line of text, not a tall strip. */
	.verticalsiteititle {
		order: 2 !important;
		writing-mode: horizontal-tb !important;
		padding: 0.5rem 0 !important;
	}
}

/* ==========================================================================
   8. Header Login Widget
   ========================================================================== */
/* The core Login/out block embedded in the site header (className
   "loginform" set on the block itself, wrapping its own <form>) as a
   compact always-visible login form. Narrow it down and swap its default
   labeled fields for a tight, underlined-link-style submit so it reads as
   a small utility widget instead of a full login page. */
/* Sits beside the logo/nav group in the header's own flex row; margin-left:
   auto pushes it to the far right edge of that row without having to touch
   the row's own justify-content (which would also move the logo/nav).
   Targets whichever element is actually the flex item in that row: either
   .loginform directly, or a wrapping group placed around it in the editor
   (the group's own justifyContent:"right" only aligns content inside
   that group - it doesn't push the group itself over within the row). */
.loginform,
.wp-block-group:has(> .loginform) {
	margin-left: auto !important;
}

/* The content grid below (Mission/Events/Partners) is .alignwide, which
   in this theme means max-width:var(--wp--style--global--wide-size)
   (1340px) centered by its is-layout-constrained parent - its right edge
   sits (100vw - 1340px)/2 in from the true viewport edge, not some small
   fixed gutter. Reproduce the same centering math directly as
   padding-right on the row itself (not the login group, so it doesn't
   shift with fluid contents), falling back to the theme's normal root
   padding on narrow screens where wide-size is wider than the viewport.

   This has to be 100vw, not 100% - this row lives inside the header's
   wp-block-column, which carries an explicit flex-basis:80% (see the
   markup in the "MTACA" columns block), so "100%" here resolves against
   that already-narrowed 80%-wide containing block, not the actual page
   width. That's what silently undershot by hundreds of px at wide
   viewports (the "-1rem to taste" nudge previously here was papering
   over that, not fixing it) - 100vw anchors the calc to the real
   viewport regardless of how deeply this row is nested. */
.wp-block-group:has(> .wp-block-group:has(> .loginform)) {
	padding-right: max(
		0px,
		max(
			var(--wp--style--root--padding-right, 2rem),
			calc((100vw - var(--wp--style--global--wide-size, 1340px)) / 2)
		)
	) !important;
}

/* The block editor's own Spacing panel on this wrapping group keeps
   adding a padding-right value here every time it's touched (border,
   alignment, etc. all live on the same panel) - that eats directly into
   the row-level padding-right above, since it sits between .loginform
   and the row's now-correctly-computed edge. Zero it out so the row-level
   fix stays the only thing controlling that gap, however the group's own
   panel gets set in the editor. */
.wp-block-group:has(> .loginform) {
	padding-right: 0 !important;
}

/* Match the desktop nav's submenu card look: same cream background,
   radius, hairline border and shadow (see the ".mtaca_header ...
   .wp-block-navigation__submenu-container" rules above) - reads as one
   consistent "floating panel" style used for both. This also fully
   replaces whatever border the block editor's own Border panel sets
   inline on .loginform (border-width alone, with no border-style, so it
   was never actually rendering) - any further border/radius/shadow
   tweaks belong here now, not in that panel. */
.loginform {
	background-color: var(--mtaca-submenu-beige);
	border: 1px solid rgba(142, 10, 1, 0.18) !important;
	border-radius: var(--mtaca-submenu-radius);
	padding: 1rem 1.25rem !important;
}

.loginform form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 220px;
	margin: 0;
}

/* Each field is a plain <p> (login-username, login-password, etc.) that
   still carries the theme's normal paragraph margin - left alone, that
   margin adds on top of the flex gap above instead of being replaced by
   it, which is what was actually causing the big gaps between fields. */
.loginform form > p {
	margin: 0 !important;
}

.loginform p > label {
	display: none !important;
}

.loginform .forgetmenot label {
	display: inline-flex !important;
	align-items: center;
	font-size: 13px;
}

/* width:100% plus horizontal padding, under the default content-box
   model, adds that padding on top of the 100% instead of inside it -
   that's what was pushing these past the card's own edge. border-box
   makes the padding count toward the 100% instead of past it. */
.loginform input[type="text"],
.loginform input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	padding: 6px 10px !important;
	font-size: 14px;
	line-height: 1.2;
}

/* mtaca_login_reveal_script() (functions.php, wp_footer) adds this class
   once JS confirms it can also remove it - so with JS disabled both
   fields just stay visible as normal, nothing permanently hidden. With
   JS: the password field starts collapsed and reveals once the username
   field has a value, then the submit link does the same once the
   password field has a value - one field leading to the next. */
.loginform .login-password.mtaca-collapsible,
.loginform .login-submit.mtaca-collapsible {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.25s ease, opacity 0.2s ease;
}

.loginform .login-password.mtaca-collapsible.is-visible,
.loginform .login-submit.mtaca-collapsible.is-visible {
	max-height: 60px;
	opacity: 1;
}

.loginform .forgetmenot {
	margin: 0 !important;
}

/* The <input type=submit> isn't itself a flex item - its wrapping
   <p class="login-submit"> is - so right-aligning it means text-align on
   that wrapper, not align-self on the input. */
.loginform .login-submit {
	text-align: right;
}

/* Shared by the "Log In" submit (logged out) and the "Log out" link WP
   renders in .loginform's place once a visitor is signed in - same small,
   understated treatment either way: smaller and lighter than a bold
   underline, with a bit of letter-spacing and a finer, offset underline
   for a more refined look. */
.loginform input[type="submit"],
.loginform button[type="submit"],
.loginform > a {
	background: transparent !important;
	border: none !important;
	color: #7a151b !important;
	text-decoration: underline !important;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	display: block;
	text-align: right;
	padding: 0 !important;
	font-size: 12px !important;
	font-weight: 500;
	letter-spacing: 0.03em;
	box-shadow: none !important;
	cursor: pointer;
	margin-top: 4px;
}

.loginform input[type="submit"]:hover,
.loginform button[type="submit"]:hover,
.loginform > a:hover {
	background: transparent !important;
	color: #000 !important;
}

/* mtaca_loginout_mobile_link() in functions.php appends this link right
   after the block's own markup on every render; keep it hidden until
   mobile takes over below. */
.mtaca-mobile-login-link {
	display: none;
}

/* Below 768px, swap the squeezed-in form for a plain link straight to
   wp-login.php (kept fully usable there - see mtaca_login_styles() in
   functions.php) - simplest possible path for members who find a
   cramped inline form on a phone more confusing than helpful. */
@media screen and (max-width: 768px) {
	.loginform form {
		display: none !important;
	}

	.mtaca-mobile-login-link {
		display: inline-block;
		color: #7a151b;
		text-decoration: underline;
		font-weight: bold;
		font-size: 14px;
	}
}