/* ABOUTME: Custom styles that supplement theme.json for McKee's Chapel. */
/* ABOUTME: Handles gap removal between sections, sticky header, and other layout tweaks. */

body {
	margin: 0;
	padding: 0;
}

/* Override WordPress default block gap for top-level site blocks */
.wp-site-blocks {
	--wp--style--block-gap: 0px;
}

.wp-site-blocks > * + * {
	margin-block-start: 0 !important;
}

/* Template parts no extra spacing */
.wp-block-template-part {
	margin: 0 !important;
}

/* Full-width sections flush together */
.wp-block-cover.alignfull,
.wp-block-group.alignfull {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Restore spacing INSIDE sections (between child elements within a section) */
.wp-block-group.alignfull > * > * + * {
	margin-block-start: 1.5rem;
}

/* Navigation spacing */
nav.wp-block-navigation .wp-block-navigation__container {
	gap: 1.5rem !important;
}

/* Nav link styling — bold and white */
nav.wp-block-navigation a,
nav.wp-block-navigation .wp-block-navigation-item__content {
	font-weight: 700 !important;
	color: #FAF9F6 !important;
}

nav.wp-block-navigation a:hover,
nav.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent-copper, #BF843B) !important;
}

/* Active page copper underline — desktop and mobile */
nav.wp-block-navigation .current-menu-item > a,
nav.wp-block-navigation .current-menu-item .wp-block-navigation-item__content,
nav.wp-block-navigation a.mc-nav-active,
.mc-mobile-nav a.mc-nav-active {
	text-decoration: underline !important;
	text-decoration-color: #BF843B !important;
	text-underline-offset: 4px !important;
	text-decoration-thickness: 2px !important;
}

/* Mobile nav Give button — don't stretch full width */
.mc-mobile-nav a.mc-nav-give {
	align-self: flex-start;
}

/* Give nav link styled as subtle pill */
.mc-nav-give a,
a.mc-nav-give,
.wp-block-navigation-item.mc-nav-give .wp-block-navigation-item__content {
	background-color: rgba(250, 249, 246, 0.15) !important;
	border: 1px solid rgba(250, 249, 246, 0.4) !important;
	border-radius: 999px !important;
	padding: 0.3rem 1.2rem !important;
}

.mc-nav-give a:hover,
a.mc-nav-give:hover,
.wp-block-navigation-item.mc-nav-give .wp-block-navigation-item__content:hover {
	background-color: rgba(250, 249, 246, 0.25) !important;
}

/* Force event card columns to align at top */
/* Remove default column margin-top on desktop — only needed when stacked on mobile */
.wp-block-columns > .wp-block-column {
	margin-top: 0 !important;
}

.wp-block-columns.are-vertically-aligned-top {
	align-items: flex-start !important;
}

.wp-block-columns.are-vertically-aligned-top > .wp-block-column > .wp-block-group {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Footer section title spacing */
footer.wp-block-template-part h3,
.wp-block-template-part[data-area="footer"] h3 {
	margin-bottom: 0.6rem !important;
}

footer.wp-block-template-part p,
.wp-block-template-part[data-area="footer"] p {
	margin-top: 0 !important;
}

footer.wp-block-template-part > .wp-block-group > p:last-child,
.wp-block-template-part[data-area="footer"] > .wp-block-group > p:last-child {
	margin-top: 2.5rem !important;
}

/* Footer list styling */
.wp-block-template-part .wp-block-list {
	list-style: none !important;
	padding-left: 0 !important;
	margin-top: 0 !important;
}

.wp-block-template-part .wp-block-list li a {
	color: var(--wp--preset--color--background, #FAF9F6) !important;
	text-decoration: none;
}

.wp-block-template-part .wp-block-list li a:hover {
	color: var(--wp--preset--color--accent-copper, #BF843B) !important;
}

/* ============================================
   Sticky header with transparent-to-solid transition
   ============================================ */

/* Header is always fixed at top */
header.wp-block-template-part {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Push page content below the fixed header */
.wp-site-blocks {
	padding-top: 70px;
}

/* Account for WordPress admin bar when logged in */
.admin-bar header.wp-block-template-part {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar header.wp-block-template-part {
		top: 46px;
	}
}

/* On homepage: header starts transparent, hero compensates for padding */
body.home .wp-site-blocks {
	padding-top: 0;
}

body.home header.wp-block-template-part {
	background-color: transparent !important;
}

body.home header.wp-block-template-part .wp-block-group {
	background-color: transparent !important;
}

/* When scrolled: solid background kicks in */
body.home.header-scrolled header.wp-block-template-part,
body.home.header-scrolled header.wp-block-template-part .wp-block-group {
	background-color: var(--wp--preset--color--primary, #2B678C) !important;
}

body.home.header-scrolled header.wp-block-template-part {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Non-homepage: always solid */
body:not(.home) header.wp-block-template-part .wp-block-group {
	background-color: var(--wp--preset--color--primary, #2B678C) !important;
}

/* ============================================
   Dual navigation: desktop inline + mobile hamburger
   ============================================ */

/* Hamburger button — hidden on desktop */
.mc-mobile-menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	position: relative;
}

/* Hamburger lines with animation */
.mc-hamburger,
.mc-hamburger::before,
.mc-hamburger::after {
	display: block;
	width: 22px;
	height: 2.5px;
	background: #FAF9F6;
	border-radius: 2px;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.mc-hamburger {
	position: relative;
}

.mc-hamburger::before,
.mc-hamburger::after {
	content: '';
	position: absolute;
	left: 0;
}

.mc-hamburger::before {
	top: -7px;
}

.mc-hamburger::after {
	top: 7px;
}

/* Animate to X when active */
.mc-mobile-menu-toggle.is-active .mc-hamburger {
	background: transparent;
}

.mc-mobile-menu-toggle.is-active .mc-hamburger::before {
	top: 0;
	transform: rotate(45deg);
}

.mc-mobile-menu-toggle.is-active .mc-hamburger::after {
	top: 0;
	transform: rotate(-45deg);
}

/* Mobile nav overlay — hidden by default */
.mc-mobile-nav {
	display: none;
	flex-direction: column;
	gap: 1rem;
	padding: 1.5rem 2rem 2rem;
	background-color: var(--wp--preset--color--primary, #2B678C);
	position: relative;
	z-index: 1001;
}

.mc-mobile-nav.is-open {
	display: flex;
}

.mc-mobile-nav a {
	color: #FAF9F6;
	text-decoration: none;
	font-size: 1.1rem;
	font-weight: 700;
	padding: 0.25rem 0;
}

.mc-mobile-nav a:hover {
	color: var(--wp--preset--color--accent-copper, #BF843B);
}

/* Backdrop — appended to body via JS so it's outside header stacking context */
.mc-mobile-backdrop {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
}

.mc-mobile-backdrop.is-visible {
	display: block;
}

/* When menu is open on homepage: make header solid */
body.home.mc-menu-open header.wp-block-template-part,
body.home.mc-menu-open header.wp-block-template-part .wp-block-group {
	background-color: var(--wp--preset--color--primary, #2B678C) !important;
}

/* At 768px and below: hide desktop nav, show hamburger */
@media (max-width: 768px) {
	.mc-desktop-nav,
	header .wp-block-navigation {
		display: none !important;
	}

	.mc-mobile-menu-toggle {
		display: flex;
	}

	.mc-header-brand {
		width: 100%;
		justify-content: space-between !important;
	}
}

@media (max-width: 781px) {
	/* Restore column gap when stacked on mobile */
	.wp-block-columns > .wp-block-column:not(:first-child) {
		margin-top: 1.5rem !important;
	}

	/* Center images in stacked columns on mobile */
	.wp-block-column .wp-block-image {
		text-align: center;
	}

	.wp-block-column .wp-block-image img {
		margin-left: auto;
		margin-right: auto;
	}

	/* Hide service times divider when columns stack on mobile */
	.wp-block-column[style*="border-right"] {
		border-right: none !important;
	}
}

/* Blockquote spacing */
.wp-block-quote {
	padding-left: 1.5rem !important;
}