/* Import CSS partials here.
 * Example: @import 'partials/footer.css';
 */

/*
 * Transparent Header Overlay
 *
 * Positions the site header absolutely so it overlays the hero section,
 * matching the Figma design where the nav sits on top of the hero image.
 * Uses .wp-site-blocks > header to target the template-part header wrapper.
 *
 * @since 1.0.0
 */
.wp-site-blocks > header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
}

/*
 * Admin Bar Offset for Transparent Header
 *
 * When logged in, WordPress adds a 32px admin bar (46px on mobile < 783px).
 * The absolutely-positioned header needs to shift down to avoid being
 * hidden behind the admin bar.
 *
 * @since 1.0.0
 */
.admin-bar .wp-site-blocks > header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/*
 * Remove blockGap margin above main content.
 *
 * WordPress applies margin-block-start via .wp-site-blocks > * + * for blockGap.
 * Because the header is absolutely positioned but still a DOM sibling, main
 * receives a ~24px top margin, creating a visible white gap above the hero.
 *
 * @since 1.0.0
 */
.wp-site-blocks > header + main {
	margin-block-start: 0;
}

/*
 * Remove blockGap margin above footer.
 *
 * Same blockGap issue as header + main: the Image Divider pattern sits flush
 * against the footer in the Figma design, but blockGap adds a 24px gap
 * between main and footer.
 *
 * @since 1.0.0
 */
.wp-site-blocks > main + footer {
	margin-block-start: 0;
}

/*
 * Responsive Header Navigation
 *
 * At tablet (< 1024px), hide CTA buttons and search to prevent overflow.
 * These items remain accessible through the hamburger overlay menu.
 * At mobile (< 768px), the wp:navigation block switches to overlay mode
 * via the overlayMenu:"mobile" attribute.
 *
 * @since 1.0.0
 */
@media (max-width: 1023px) {
	.wp-site-blocks > header .wp-block-buttons,
	.wp-site-blocks > header .wp-block-search {
		display: none;
	}
}

/*
 * Medium Breakpoint Header Tightening (1024-1439px)
 *
 * At laptop widths the nav items + logo + buttons exceed available space,
 * causing the nav to wrap to two lines. Reduce gaps and font size to keep
 * everything on a single row.
 *
 * @since 1.0.0
 */
@media (min-width: 1024px) and (max-width: 1439px) {
	.wp-site-blocks > header .wp-block-navigation {
		font-size: var(--wp--preset--font-size--small);
		gap: 0.75rem;
	}

	.wp-site-blocks > header .wp-block-navigation .wp-block-navigation-item {
		white-space: nowrap;
	}

	.wp-site-blocks > header .wp-block-button__link {
		padding: 0.5rem 1rem;
		white-space: nowrap;
	}
}

/*
 * Navigation Dropdown Submenu Colors
 *
 * The nav block uses textColor:"theme-01" (white) for the transparent header
 * overlay. WordPress generates .has-theme-01-color { color: white !important }
 * which cascades into submenu links. theme.json's css property uses
 * :root :where(...) which cannot override !important, so we must counter
 * with !important here.
 *
 * @since 1.0.0
 */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	/* Override inherited .has-theme-01-color !important from nav block */
	color: var(--wp--preset--color--theme-02) !important;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--theme-03) !important;
}

/*
 * Feature Icon Cards - Hover Effect
 *
 * Adds subtle elevation and lift on hover to the icon CTA cards.
 * Targets cards within the .feature-icon-cards section. The hover
 * state matches the middle card variant shown in the Figma design.
 *
 * @since 1.0.0
 */
.feature-icon-cards .wp-block-group > .wp-block-group.has-theme-05-background-color {
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.feature-icon-cards .wp-block-group > .wp-block-group.has-theme-05-background-color:hover {
	box-shadow: 0 8px 24px rgba(36, 62, 99, 0.12);
	transform: translateY(-2px);
}

/*
 * Fixed-Size Image Icons in Flex Rows
 *
 * When a wp:image block with explicit width/height is placed inside a
 * flex row (e.g., icon + text list items), the figure element inherits
 * flex-shrink: 1 from core styles, causing the icon to compress below
 * its set dimensions. This forces fixed-size images to hold their width.
 *
 * No block-attribute equivalent exists for flex-shrink on child elements.
 *
 * @since 1.0.0
 */
.is-layout-flex > .wp-block-image.is-resized {
	flex-shrink: 0;
}

/*
 * Cover Block Flex Children Stretch
 *
 * WordPress cover blocks with vertical flex layout (orientation: "vertical")
 * default to align-items: flex-start, causing children to shrink to content
 * width. This prevents justify-content from working on child flex groups.
 * Override to stretch so children fill the full width of the cover block.
 *
 * No block-attribute equivalent exists for align-items on cover inner container.
 *
 * @since 1.0.0
 */
.wp-block-cover > .wp-block-cover__inner-container.is-layout-flex.is-vertical {
	align-items: stretch;
}

/*
 * Cover Block Overlay Margin Fix
 *
 * WordPress applies blockGap (margin-block-start) to sibling children inside
 * .wp-block-cover via the flow layout selector. The overlay <span> and
 * background <img> are absolutely positioned but still receive blockGap
 * margin, which offsets the overlay 24px from the top edge of the cover,
 * leaving an un-overlaid strip of the background image visible.
 *
 * No block-attribute equivalent exists to disable blockGap on cover internals.
 *
 * @since 1.0.0
 */
.wp-block-cover > .wp-block-cover__background,
.wp-block-cover > .wp-block-cover__image-background {
	margin-block-start: 0;
}

/*
 * Hero Wave Decoration
 *
 * Layered wave transition at the bottom of the hero section.
 * Pseudo-elements are placed on the section (not the cover) because
 * wp-block-cover has overflow:hidden from core styles.
 *
 * Wave shapes trace the organic, asymmetric curves from the Figma design
 * (node 28986:16670). The blue wave sits behind and peeks out around
 * the white wave to create a layered transition effect.
 *
 * Note: SVG fill colors are hardcoded in data URIs because CSS custom
 * properties cannot be used inside url() data URIs. Values correspond to:
 *   #AACBEE = var(--wp--preset--color--theme-06)
 *   #FFFFFF = var(--wp--preset--color--theme-01)
 *
 * @since 1.0.0
 */
.has-hero-wave {
	position: relative;
	z-index: 0;
}

/* Blue accent wave (behind) - offset from white wave to peek through at dips */
.has-hero-wave::before {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 140px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath d='M0,100 C100,70 200,50 320,30 C440,10 500,40 600,70 C700,100 800,80 900,50 C1000,20 1100,40 1200,70 C1300,100 1380,60 1440,40 L1440,140 L0,140 Z' fill='%23AACBEE'/%3E%3C/svg%3E");
	z-index: 10;
	pointer-events: none;
}

/* White wave (foreground) - big hump left, dip center, small hump right */
.has-hero-wave::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 140px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C80,20 180,0 280,5 C380,10 420,60 500,90 C580,120 660,130 760,120 C860,110 920,80 1000,100 C1080,120 1160,100 1240,70 C1320,40 1380,50 1440,60 L1440,140 L0,140 Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
	z-index: 11;
	pointer-events: none;
}

/*
 * Gravity Forms - Prayer Request Form
 *
 * Styles the Gravity Forms output to match the Figma design (node 29115:10336).
 * Ice-blue input fields, clean typography, and steel-blue submit button.
 * No block-attribute equivalent exists for third-party form plugin styling.
 *
 * @since 1.0.0
 */

/* Hide text/email/textarea labels -- Figma uses placeholders only.
 * Labels remain in DOM for screen readers via sr-only pattern. */
.gform_wrapper .gfield--type-text > .gfield_label,
.gform_wrapper .gfield--type-email > .gfield_label,
.gform_wrapper .gfield--type-textarea > .gfield_label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* Input fields and textareas: ice-blue surface, 40px height per Figma */
.gform_wrapper .gfield input[type="text"],
.gform_wrapper .gfield input[type="email"],
.gform_wrapper .gfield input[type="tel"],
.gform_wrapper .gfield input[type="url"],
.gform_wrapper .gfield textarea,
.gform_wrapper .gfield select {
	background-color: var(--wp--preset--color--theme-05);
	border: none;
	border-radius: 4px;
	color: var(--wp--preset--color--theme-02);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.7;
	padding: 8px 12px;
	width: 100%;
}

/* Single-line inputs: fixed 40px height per Figma */
.gform_wrapper .gfield input[type="text"],
.gform_wrapper .gfield input[type="email"],
.gform_wrapper .gfield input[type="tel"],
.gform_wrapper .gfield input[type="url"] {
	height: 40px;
}

/* Textarea: 167px height per Figma */
.gform_wrapper .gfield textarea {
	min-height: 167px;
	resize: vertical;
}

/* Placeholder text */
.gform_wrapper .gfield input::placeholder,
.gform_wrapper .gfield textarea::placeholder {
	color: rgba(0, 0, 0, 0.8);
	font-size: 16px;
}

/* Checkbox/radio question labels stay visible */
.gform_wrapper .gfield_label {
	color: var(--wp--preset--color--theme-02);
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
}

/* Checkbox/radio: question label + choices inline per Figma (node 29115:10336).
 * <fieldset> + <legend> defeats flex/grid -- legend is rendered in the border
 * area, not the content flow. Float the checkbox container right so it sits
 * beside the legend text. Negative margin-top pulls it up to align with the
 * legend since GF renders the container after the legend in DOM order. */
.gform_wrapper .gfield--type-checkbox,
.gform_wrapper .gfield--type-radio {
	overflow: hidden;
}

.gform_wrapper .gfield--type-checkbox > legend,
.gform_wrapper .gfield--type-radio > legend {
	margin: 0;
	padding: 0;
	float: left;
	width: calc(100% - 150px);
}

.gform_wrapper .gfield--type-checkbox .ginput_container,
.gform_wrapper .gfield--type-radio .ginput_container {
	float: right;
}

/* Choices (Yes/No) inline within their container.
 * GF theme framework uses .gform-theme--framework .gfield--type-choice
 * to set flex-direction:column -- extra class needed to win cascade. */
.gform_wrapper.gform-theme--framework .gfield--type-choice .gfield_checkbox,
.gform_wrapper.gform-theme--framework .gfield--type-choice .gfield_radio {
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 16px;
	align-items: center;
}

.gform_wrapper.gform-theme--framework .gfield--type-choice .gchoice {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
}

.gform_wrapper .gfield_checkbox label,
.gform_wrapper .gfield_radio label {
	color: var(--wp--preset--color--theme-02);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
}

/* Submit button: steel-blue with white text.
 * GF framework applies styles through --gf-local-* CSS custom properties.
 * GF's selector specificity is 0-6-1 via
 * .gform-theme--framework.gform-theme.gform_wrapper input[type="submit"].button.gform_button
 * Must match that specificity to override custom properties. */
.gform-theme--framework.gform-theme.gform_wrapper .gform-footer input[type="submit"].button.gform_button {
	--gf-local-bg-color: var(--wp--preset--color--theme-03);
	--gf-local-radius: 0px;
	--gf-local-color: var(--wp--preset--color--theme-01);
	--gf-local-font-size: var(--wp--preset--font-size--medium);
	--gf-local-border-color: transparent;
	font-weight: 500;
	padding: 12px 24px;
	transition: background-color 0.2s ease;
}

.gform-theme--framework.gform-theme.gform_wrapper .gform-footer input[type="submit"].button.gform_button:hover {
	--gf-local-bg-color: var(--wp--preset--color--theme-02);
}

/* Field spacing: 24px between fields per Figma (node 29115:10336).
 * GF foundation theme sets row-gap via --gf-form-gap-y on
 * .gform-theme--foundation .gform_fields -- extra class needed to win cascade. */
.gform_wrapper.gform-theme--foundation .gform_fields {
	row-gap: 24px;
}

.gform_wrapper .gfield {
	margin-bottom: 0;
}

/* Tighten submit button gap to match Figma */
.gform_wrapper .gform_footer {
	margin-top: 0;
	padding-top: 0;
}

/* Validation error styling using theme tokens */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea {
	border: 1px solid var(--wp--preset--color--theme-04);
}

.gform_wrapper .validation_message {
	color: var(--wp--preset--color--theme-04);
	font-size: var(--wp--preset--font-size--small);
}

/*
 * Button Style Variation Hover States
 *
 * WordPress generates hover rules via :root :where() from theme.json
 * style variations, but this specificity (0,0,0) loses to the normal-state
 * border rules which have class-based specificity. Direct selectors here
 * ensure hover colors actually apply.
 *
 * @since 1.0.0
 */
.wp-block-button[class*="is-style-outline-inverse"] .wp-block-button__link:hover {
	background-color: var(--wp--custom--color--button--outline-inverse--hover--background);
	color: var(--wp--custom--color--button--outline-inverse--hover--text);
	border-color: var(--wp--custom--color--button--outline-inverse--hover--background);
}

/*
 * Bottom-Aligned Buttons in Grid Cards
 *
 * When cards (bordered groups) sit inside a CSS grid, push the last
 * wp:buttons block to the card bottom so all cards in a row align.
 * No block-attribute equivalent exists for margin-top:auto on a child.
 *
 * @since 1.0.0
 */
.is-layout-grid > .wp-block-group.has-border-color > .wp-block-buttons:last-child {
	margin-top: auto;
}

.wp-block-button[class*="is-style-fill-accent"] .wp-block-button__link:hover {
	background-color: var(--wp--custom--color--button--fill-accent--hover--background);
	color: var(--wp--custom--color--button--fill-accent--hover--text);
	border-color: var(--wp--custom--color--button--fill-accent--hover--border);
}

/*
 * Mobile Header Logo Constraint
 *
 * The logo image has an explicit width of 270px which leaves very little room
 * for the hamburger button at 375px viewport (375 - 270 - 128px padding = -23px).
 * Constrain the logo at mobile so it shares space with the nav toggle.
 *
 * @since 1.0.0
 */
@media (max-width: 767px) {
	.wp-site-blocks > header .wp-block-image.is-resized {
		width: auto !important; /* Override inline width:270px set by block attributes */
		max-width: 200px;
	}

	.wp-site-blocks > header .wp-block-image.is-resized img {
		width: 100%;
		height: auto;
	}
}

/*
 * Mobile Hamburger Button Touch Target
 *
 * The wp:navigation block renders the mobile menu toggle at 0px width because
 * it relies on an SVG icon inside a button with no explicit sizing. WordPress
 * core sets display:flex but no min-width or padding. Force a 44x44px minimum
 * touch target per WCAG 2.5.5 guidelines.
 *
 * @since 1.0.0
 */
button.wp-block-navigation__responsive-container-open {
	min-width: 44px;
	min-height: 44px;
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Ensure the SVG icon inside the hamburger button is visible */
button.wp-block-navigation__responsive-container-open svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

/*
 * Footer Social Media Icon Touch Targets
 *
 * Social link anchors render at 24x24px by default, which is below the 44x44px
 * minimum touch target recommended by WCAG 2.5.5. Increase the tap area at
 * mobile using min-width/min-height so the icons remain visually small but
 * the interactive area is large enough for touch input.
 *
 * @since 1.0.0
 */
@media (max-width: 767px) {
	.wp-block-social-links .wp-block-social-link-anchor {
		min-width: 44px;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}