/*
Theme Name:   Rejoice Pro Child
Description:  Child theme
Template:     rejoice-pro
Version:      1.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  rejoice-pro-child
*/

/* Write here your own personal stylesheet */

/* ---- Global typography override: Fraunces headings, Inter body ---- */

body,
p, li, td, th,
input, textarea, select, button,
.entry-content,
.widget,
.menu,
.navigation {
	font-family: "Inter", sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.section-title,
.widget-title,
.site-title {
	font-family: "Fraunces", serif !important;
}


/* ============================================================
   GRACE PALETTE — logo-derived (v3)
   Reference: grace-palette-swatches-v3-logo-derived.html
   Every value below is measured, not estimated.
   ============================================================ */

:root {
	/* Interactive */
	--gpv-green: #037A39;        /* primary — 5.46:1 white, 5.07:1 cream */
	--gpv-green-hover: #026B32;  /* 6.66:1 white-on */
	--gpv-logo-green: #049244;   /* signature green — DISPLAY ONLY, 4.04:1 */

	/* Greens that survive dark surfaces */
	--gpv-leaf: #5CAC4F;         /* on dark bars — 5.43:1 w/ espresso text */
	--gpv-leaf-hi: #8FCB84;      /* on brown — 5.46:1 */

	/* Structure */
	--gpv-brown: #563A22;        /* cross brown — dark surface, 9.64:1 cream-on */
	--gpv-trunk: #402F1D;        /* trunk brown — headings, focus ring, 11.88:1 */
	--gpv-olive: #4A663F;        /* vine olive — secondary, 6.43:1 white-on */

	/* Text */
	--gpv-ink: #2B2420;          /* body — 14.18:1 on cream */
	--gpv-muted: #6E5F55;        /* secondary — 6.12:1 on white, 5.38:1 on surface */

	/* Surfaces */
	--gpv-cream: #FAF6F0;        /* page background */
	--gpv-surface: #F5EFE6;      /* bands, cards */
	--gpv-tint: #E5E9DD;         /* olive tint — subtle fills */

	/* Lines */
	--gpv-line: #D8CDBF;         /* decorative borders only — 1.37:1 on surface */
	--gpv-field-border: #8C7B6A; /* FORM FIELDS — 4.07:1 white, 3.56:1 cream */

	/* Semantic — not a brand colour.
	   FLAG: introduced with the connect card. Check it against PENDING
	   item 1 below, which is removing the last warm orange from the
	   footer — a new red should not read as that orange returning.
	   #A32A22 is a deep brick red with no orange cast at text size, but
	   it is a judgement call; darken toward #8E2318 if it sits wrong
	   beside the greens. */
	--gpv-error: #A32A22;        /* 6.74:1 cream, 6.32:1 surface */

	/* Decoration only — never as text, never as a sole state indicator */
	--gpv-camel: #C68D58;        /* 2.65:1 on cream */
	--gpv-gold: #C89B3C;         /* 2.38:1 on cream */
}


/* ---- Breadcrumbs sit on the brown page banner ----
   The Theme Options primary green is 1.90:1 against that brown, which
   fails outright. Leaf-hi holds 5.46:1.
   VERIFY the class name in rendered source — Rejoice may not use
   .breadcrumbs. If none of the three below bind, inspect and adjust. */

.breadcrumbs a,
.breadcrumb a,
.bread-crumb a {
	color: var(--gpv-leaf-hi) !important;
}

.breadcrumbs a:hover,
.breadcrumb a:hover,
.bread-crumb a:hover {
	color: var(--gpv-cream) !important;
}


/* ---- Sitewide focus ring (WCAG 2.4.7 / 1.4.11) ----
   Trunk brown on light surfaces: 11.88:1 on cream, 12.79:1 on white,
   10.37:1 on the olive tint. Components sitting on green or brown
   fills override this to a cream ring with a trunk outer band, since
   no single ring colour clears 3:1 on both light and dark surfaces. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--gpv-trunk) !important;
	outline-offset: 2px !important;
}


/* ---- Links need underlines (WCAG 1.4.1) ----
   Green against espresso body text is under 3:1, so colour alone does
   not identify a link. Buttons are excluded — they are identified by
   their fill, not by underline. */

.entry-content a:not([class*="button"]):not([class*="btn"]):not([class*="gpv-"]):not([class*="gmin-"]) {
	text-decoration: underline;
	text-underline-offset: 2px;
}


/* ---- Form fields ----
   Rejoice ships CF7 inputs with a near-invisible border. Field outlines
   are UI components and need 3:1 (1.4.11); --gpv-line is only 1.37:1
   against a cream panel, so form borders use --gpv-field-border. */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
	border-color: var(--gpv-field-border);
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
	color: var(--gpv-muted);
}


/* ============================================================
   CONNECT CARD — CF7 form 6fde996 · page /connect-card/
   ------------------------------------------------------------
   Post-launch: fold into the consolidated .gpv-contact
   stylesheet. The BEGIN/END markers make that a contiguous cut.

   SPECIFICITY: every rule is scoped .wpcf7 .gpv-connect-card
   (0,2,x) on purpose. CF7 renders <div class="wpcf7"> around
   <form class="wpcf7-form gpv-connect-card">, so that ancestor
   is always present. Two reasons for the prefix:
     - the .wpcf7 input[type="text"] rule above is (0,2,1) and
       would otherwise win the border declaration
     - Rejoice's own .entry-content p is (0,1,1) and would
       otherwise beat the wpautop suppression, reintroducing
       the doubled label/field spacing this block exists to fix
   No !important is used below. If a rule loses, raise its
   specificity rather than reaching for !important.

   INHERITED FROM ABOVE — deliberately not restated:
     - font-family (the global Inter override, !important)
     - input/select:focus-visible (3px trunk ring, !important)
     - .wpcf7 field border-color and ::placeholder colour

   The page shortcode must carry html_class="gpv-connect-card"
   or none of this binds.
   ============================================================ */

/* ===== BEGIN .gpv-connect-card ===== */

.wpcf7 .gpv-connect-card {
	max-width: 46rem;
	margin-inline: auto;
	padding: clamp(1.25rem, 4vw, 2.25rem);
	background: var(--gpv-surface);
	border: 1px solid var(--gpv-line);
	border-radius: 10px;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--gpv-ink);
}

/* ---- wpautop suppression ----
   CF7 runs wpautop over the form markup, wrapping stray text in <p>
   and injecting <br> between every label and its field. Labels and
   fields are stacked by flex below, so the breaks are redundant. */

.wpcf7 .gpv-connect-card p {
	margin: 0;
}

.wpcf7 .gpv-connect-card p:empty {
	display: none;
}

.wpcf7 .gpv-connect-card br {
	display: none;
}


/* ---- Layout ---- */

.wpcf7 .gpv-connect-card .gpv-cc-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 0 1rem;
}

.wpcf7 .gpv-connect-card .gpv-cc-field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin-bottom: 1.375rem;
}

.wpcf7 .gpv-connect-card .gpv-cc-field > label {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--gpv-muted);
}

.wpcf7 .gpv-connect-card .gpv-cc-req {
	color: var(--gpv-muted);
}

.wpcf7 .gpv-connect-card .gpv-cc-hint {
	display: block;
	font-weight: 400;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--gpv-muted);
}


/* ---- Text, tel, email, select ----
   Fields are white rather than cream so --gpv-field-border holds
   4.07:1 rather than 3.56:1. White is already the card fill used by
   the .gpv-ns and .gpv-cp grids, so it is not a new surface. */

.wpcf7 .gpv-connect-card input[type="text"],
.wpcf7 .gpv-connect-card input[type="tel"],
.wpcf7 .gpv-connect-card input[type="email"],
.wpcf7 .gpv-connect-card select {
	width: 100%;
	min-height: 44px;
	padding: 0.625rem 0.75rem;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--gpv-ink);
	background: #FFFFFF;
	border: 1px solid var(--gpv-field-border);
	border-radius: 6px;
	appearance: none;
}

.wpcf7 .gpv-connect-card select {
	padding-right: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23402F1D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.875rem center;
}

/* Focus ring is inherited from the sitewide rule. Only the border
   darkens here, as a secondary cue. */
.wpcf7 .gpv-connect-card input:focus-visible,
.wpcf7 .gpv-connect-card select:focus-visible {
	border-color: var(--gpv-trunk);
}


/* ---- Checkbox groups ----
   Inputs are visually hidden but focusable; the box is drawn on the CF7
   label span. Same technique as the radios elsewhere on the site.
   The sitewide focus ring lands on the clipped input where it cannot be
   seen, so it is redrawn on ::before below. */

.wpcf7 .gpv-connect-card .gpv-cc-group {
	margin: 0 0 1.5rem;
	padding: 0;
	border: 0;
}

.wpcf7 .gpv-connect-card .gpv-cc-group legend {
	padding: 0;
	margin-bottom: 0.625rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--gpv-muted);
}

.wpcf7 .gpv-connect-card .wpcf7-checkbox {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
	gap: 0.5rem;
}

.wpcf7 .gpv-connect-card .wpcf7-list-item {
	margin: 0;
}

.wpcf7 .gpv-connect-card .wpcf7-list-item > label {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	background: #FFFFFF;
	border: 1px solid var(--gpv-line);
	border-radius: 6px;
	cursor: pointer;
}

.wpcf7 .gpv-connect-card .wpcf7-list-item input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.wpcf7 .gpv-connect-card .wpcf7-list-item-label {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.9375rem;
	line-height: 1.35;
	color: var(--gpv-ink);
}

.wpcf7 .gpv-connect-card .wpcf7-list-item-label::before {
	content: "";
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	background: #FFFFFF;
	border: 1.5px solid var(--gpv-field-border);
	border-radius: 4px;
}

.wpcf7 .gpv-connect-card .wpcf7-list-item-label::after {
	content: "";
	position: absolute;
	left: 0.375rem;
	top: 50%;
	width: 0.3125rem;
	height: 0.5625rem;
	border: solid var(--gpv-cream);
	border-width: 0 2px 2px 0;
	transform: translateY(-65%) rotate(45deg);
	opacity: 0;
}

.wpcf7 .gpv-connect-card input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
	background: var(--gpv-green);
	border-color: var(--gpv-green);
}

.wpcf7 .gpv-connect-card input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
	opacity: 1;
}

/* Matches the sitewide ring: 3px trunk, 2px offset. */
.wpcf7 .gpv-connect-card input[type="checkbox"]:focus-visible + .wpcf7-list-item-label::before {
	outline: 3px solid var(--gpv-trunk);
	outline-offset: 2px;
}

/* Whole-row checked state — progressive enhancement. Without :has()
   support the box alone still carries the state, so nothing is lost. */
.wpcf7 .gpv-connect-card .wpcf7-list-item > label:has(input:checked) {
	background: var(--gpv-tint);
	border-color: var(--gpv-green);
}


/* ---- Submit ---- */

.wpcf7 .gpv-connect-card .gpv-cc-actions {
	margin-top: 1.75rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.wpcf7 .gpv-connect-card .gpv-cc-submit {
	min-height: 48px;
	padding: 0.75rem 1.75rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--gpv-cream);
	background: var(--gpv-green);
	border: 1px solid var(--gpv-green);
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 120ms ease;
}

.wpcf7 .gpv-connect-card .gpv-cc-submit:hover {
	background: var(--gpv-green-hover);
	border-color: var(--gpv-green-hover);
}

.wpcf7 .gpv-connect-card .gpv-cc-submit[disabled] {
	opacity: 0.6;
	cursor: default;
}

.wpcf7 .gpv-connect-card .wpcf7-spinner {
	margin: 0;
}


/* ---- Validation and response messages ---- */

.wpcf7 .gpv-connect-card .wpcf7-not-valid-tip {
	margin-top: 0.375rem;
	font-size: 0.875rem;
	color: var(--gpv-error);
}

.wpcf7 .gpv-connect-card .wpcf7-not-valid {
	border-color: var(--gpv-error);
	border-width: 2px;
}

.wpcf7 .gpv-connect-card .wpcf7-response-output {
	margin: 1.5rem 0 0;
	padding: 0.875rem 1rem;
	font-size: 0.9375rem;
	background: #FFFFFF;
	border: 1px solid var(--gpv-line);
	border-radius: 6px;
}

.wpcf7 .gpv-connect-card.sent .wpcf7-response-output {
	background: var(--gpv-tint);
	border-color: var(--gpv-green);
}

.wpcf7 .gpv-connect-card.invalid .wpcf7-response-output,
.wpcf7 .gpv-connect-card.failed .wpcf7-response-output,
.wpcf7 .gpv-connect-card.aborted .wpcf7-response-output {
	border-color: var(--gpv-error);
}

@media (prefers-reduced-motion: reduce) {
	.wpcf7 .gpv-connect-card * {
		transition: none;
	}
}

/* ===== END .gpv-connect-card ===== */

/* ============================================================
   FOOTER STROKE — prevent brush mask seam on wide viewports
   Parent theme uses a fixed 1940px mask which repeats on
   viewports wider than the mask.
   ============================================================ */

/* ===== BEGIN .footer-stroke ===== */

.footer-stroke {
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;

	mask-size: 100% 100%;
	-webkit-mask-size: 100% 100%;

	mask-position: center;
	-webkit-mask-position: center;
}

/* ===== END .footer-stroke ===== */

/* ============================================================
   FOOTER OPENING HOURS
   Parent theme hard-codes color:red !important on the last row
   (Sunday / Closed), overriding the Theme Options footer
   description colour that the other rows inherit. Restores
   parity. Last warm-red left on the page.

   Also covers the child-theme "Grace : Office Hours" widget
   (inc/gpv-office-hours-widget.php). It deliberately reuses the
   parent's .opening-hrs / .opening-hrs-list markup so it inherits
   this styling, including this override on its last row. No
   separate rules for it.
   ============================================================ */

/* ===== BEGIN .opening-hrs ===== */

/* Matches parent specificity (0,2,2) and relies on the child sheet
   loading after the parent. The span inside inherits from the li,
   so no separate rule is needed for it.
   Cream, not leaf-hi: #8FCB84 is the footer link hover value, and
   resting text in it would read as a hovered link. 9.64:1 on the
   #563A22 footer. */
.opening-hrs .opening-hrs-list li:last-child {
	color: var(--gpv-cream) !important;
}

/* ===== END .opening-hrs ===== */

/* ============================================================
   FOOTER LEGAL LINKS
   Privacy Policy · Cookie Policy
   ------------------------------------------------------------
   Lives in Theme Options > Footer Design by Text, which accepts
   raw HTML (the field shipped with an anchor in it). Rejoice
   floats that field opposite the copyright, so no margin is
   needed here.
   ============================================================ */

/* ===== BEGIN .gpv-legal ===== */

.gpv-legal {
	font-size: 0.875rem;
}

/* The sitewide underline rule is scoped to .entry-content, so footer
   anchors do not inherit it. Declared explicitly for 1.4.1 — cream on
   cream is no colour difference at all against the copyright text
   beside it. */
.gpv-legal a {
	color: var(--gpv-cream);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 120ms ease;
}

/* Matches the footer link hover value used elsewhere. 5.46:1 on brown. */
.gpv-legal a:hover {
	color: var(--gpv-leaf-hi);
}

/* Trunk is ~1.4:1 on the #563A22 footer, so the sitewide ring is
   invisible here. Cream inverts it at 9.64:1. The shorthand is
   repeated with !important because the sitewide rule sets `outline`
   as a shorthand with !important — a longhand outline-color cannot
   beat it. */
.gpv-legal a:focus-visible {
	outline: 3px solid var(--gpv-cream) !important;
	outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {

	.gpv-legal a {
		transition: none;
	}

}

/* ===== END .gpv-legal ===== */

/* ============================================================
   GRACE HEADER INFORMATION
   Logo · Worship · Visit · Email · Phone
   ============================================================ */

/* ===== BEGIN .grace-header-info ===== */

.header-default .header-wrap {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 2.5rem;
	padding-top: 18px;
	padding-bottom: 18px;
}

/* Logo */
.header-default .site-title-logo {
	flex: 0 0 auto;
}

.header-default .site-title-logo .logo img {
	width: auto;
	max-width: 210px;
	height: auto;
}

/* Information area */
.header-default .grace-header-info {
	flex: 1 1 auto;
	width: auto;
	margin-left: auto;
}

.header-default .grace-header-info-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
}

/* Individual information blocks */
.header-default .grace-headinfo-box {
	flex: 0 1 auto;
	width: auto;
	margin: 0;
}

.header-default .grace-headinfo-box > .flex-element {
	flex-wrap: nowrap;
}

.header-default .grace-headinfo-box .headinfo-data {
	display: flex;
	flex-direction: column;
	white-space: nowrap;
}

.header-default .grace-headinfo-box .data-ttl {
	display: block;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.header-default .grace-headinfo-box .headinfo-icon {
	flex: 0 0 auto;
}

/* Slightly tighten things on smaller desktops */
@media (max-width: 1200px) {

	.header-default .header-wrap {
		gap: 1.25rem;
	}

	.header-default .grace-header-info-row {
		gap: 0.75rem;
	}

	.header-default .site-title-logo .logo img {
		max-width: 180px;
	}

}

/* ===== END .grace-header-info ===== */

/* ============================================================
   GRACE DIRECTIONS MODAL
   Apple Maps · Google Maps · Waze
   ============================================================ */

/* ===== BEGIN .grace-directions-modal ===== */


/* ---- Clickable header information ---- */

.header-default .grace-headinfo-link {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

/* Visit Us is a button, so remove default/theme button styling */
.header-default button.grace-headinfo-link {
	font: inherit;
	text-align: left;
	color: inherit;
	background: transparent;
	border: 0;
	padding: 0;
}

.header-default .grace-headinfo-link:hover,
.header-default .grace-headinfo-link:focus {
	color: inherit;
	text-decoration: none;
}


/* ---- Modal container ---- */

.grace-directions-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 1.25rem;
}

.grace-directions-modal[hidden] {
	display: none;
}


/* ---- Background overlay ---- */

.grace-directions-backdrop {
	position: absolute;
	inset: 0;

	background: rgba(43, 36, 32, 0.72);
}


/* ---- Dialog ---- */

.grace-directions-dialog {
	position: relative;
	z-index: 1;

	width: 100%;
	max-width: 440px;

	padding: 2rem;

	color: var(--gpv-ink);
	background: var(--gpv-cream);

	border-radius: 10px;

	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.25);
}


/* ---- Dialog focus target ----
   The dialog panel carries tabindex="-1" so focus can be moved into it
   on open. It is a container, not an operable control, so the sitewide
   [tabindex]:focus-visible ring is suppressed here -- a 3px band around
   the whole 440px panel reads as an error state. The close button and
   the three map options keep their own focus indicators. */

.grace-directions-dialog:focus,
.grace-directions-dialog:focus-visible {
	outline: none !important;
}


/* ---- Close button ---- */

.grace-directions-close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 44px;
	height: 44px;

	padding: 0;

	font-size: 1.75rem;
	line-height: 1;

	color: var(--gpv-ink);
	background: transparent;

	border: 0;
	border-radius: 6px;

	cursor: pointer;
}


/* ---- Heading ---- */

.grace-directions-heading {
	display: flex;
	align-items: center;

	gap: 1rem;

	padding-right: 2.5rem;
	margin-bottom: 1.25rem;
}

.grace-directions-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 48px;

	width: 48px;
	height: 48px;

	color: var(--gpv-cream);
	background: var(--gpv-green);

	border-radius: 6px;
}

.grace-directions-heading h2 {
	margin: 0 0 0.25rem;

	font-size: 1.5rem;

	color: var(--gpv-trunk);
}

.grace-directions-heading p {
	margin: 0;

	color: var(--gpv-muted);
}


/* ---- Address ---- */

.grace-directions-address {
	display: flex;
	flex-direction: column;

	margin-bottom: 1.5rem;
	padding: 1rem;

	background: var(--gpv-surface);

	border: 1px solid var(--gpv-line);
	border-radius: 6px;
}

.grace-directions-address strong {
	color: var(--gpv-trunk);
}


/* ---- Map choices ---- */

.grace-directions-options {
	display: grid;
	gap: 0.625rem;
}

.grace-map-option {
	display: flex;
	align-items: center;
	justify-content: space-between;

	min-height: 48px;

	padding: 0.75rem 1rem;

	font-weight: 600;

	color: var(--gpv-cream) !important;
	background: var(--gpv-green);

	border: 1px solid var(--gpv-green);
	border-radius: 6px;

	text-decoration: none !important;

	transition: background-color 120ms ease;
}

.grace-map-option:hover {
	color: var(--gpv-cream) !important;

	background: var(--gpv-green-hover);
	border-color: var(--gpv-green-hover);
}

.grace-map-option:focus-visible {
	outline: 3px solid var(--gpv-trunk) !important;
	outline-offset: 2px !important;
}


/* ---- Mobile bottom-sheet presentation ---- */

@media (max-width: 600px) {

	.grace-directions-modal {
		align-items: flex-end;

		padding: 0;
	}

	.grace-directions-dialog {
		max-width: none;

		padding: 1.5rem;

		border-radius: 12px 12px 0 0;
	}

}


/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {

	.grace-map-option {
		transition: none;
	}

}


/* ===== END .grace-directions-modal ===== */

/* ============================================================
   GRACE MOBILE HEADER INFO
   Worship + Visit Us inside .header-responsive
   ------------------------------------------------------------
   The desktop rules above are scoped to .header-default, so the
   two new blocks in header-responsive.php need their own reset.
   The mobile info wrap lives INSIDE .sitenav, which means the
   primary-menu link rules would otherwise render the Worship
   anchor as a full-width menu item with dividers and padding.
   ============================================================ */

/* ===== BEGIN .header-responsive .grace-headinfo-box ===== */

.header-responsive .grace-headinfo-link {
	display: block;
	width: 100%;

	font: inherit;
	text-align: left;
	line-height: inherit;

	color: inherit;
	background: transparent;

	border: 0;
	padding: 0;

	text-decoration: none;
	cursor: pointer;
}

/* Beat the .sitenav menu-link rules on specificity, not on !important. */
.header-responsive .sitenav a.grace-headinfo-link,
.header-responsive .sitenav a.grace-headinfo-link:hover,
.header-responsive .sitenav a.grace-headinfo-link:focus {
	display: block;

	padding: 0;
	border: 0;

	color: inherit;
	background: transparent;

	text-decoration: none;
}

.header-responsive button.grace-headinfo-link:hover,
.header-responsive button.grace-headinfo-link:focus {
	color: inherit;
	background: transparent;
}

/* Target size (WCAG 2.5.8). The icon is 44px on desktop; make sure the
   whole row clears the minimum on touch. */
.header-responsive .grace-headinfo-box > .flex-element {
	min-height: 44px;
}

/* ===== END .header-responsive .grace-headinfo-box ===== */

/* ============================================================
   VANCO APP-STORE CHOOSER
   App Store · Google Play
   ------------------------------------------------------------
   Visual language deliberately matches .grace-directions-modal
   so the two dialogs read as one component to a visitor.

   The rules are duplicated rather than shared. The directions
   modal is a deployed, QC-passed component and nothing here is
   able to reach it. Consolidating the two into a single modal
   component belongs on the post-launch list, next to the
   .gpv-contact stylesheet consolidation.
   ============================================================ */

/* ===== BEGIN .gpv-appchoice ===== */


/* ---- In-content trigger ----
   Lives inside the "Give Online or by App" iconbox body, so it has
   to reset whatever the theme applies to buttons in post content. */

.gpv-appchoice-trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;

	min-height: 44px;

	margin-top: 0.5rem;

	padding: 0.6rem 1.25rem;

	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;

	color: var(--gpv-green);
	background: transparent;

	border: 1.5px solid var(--gpv-green);
	border-radius: 6px;

	cursor: pointer;

	transition: background-color 120ms ease, color 120ms ease;
}

.gpv-appchoice-trigger:hover,
.gpv-appchoice-trigger:focus {
	color: var(--gpv-cream);

	background: var(--gpv-green);
	border-color: var(--gpv-green);
}

.gpv-appchoice-trigger:focus-visible {
	outline: 3px solid var(--gpv-trunk) !important;
	outline-offset: 2px !important;
}


/* ---- Modal container ---- */

.gpv-appchoice {
	position: fixed;
	inset: 0;
	z-index: 99999;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 1.25rem;
}

.gpv-appchoice[hidden] {
	display: none;
}


/* ---- Background overlay ---- */

.gpv-appchoice-backdrop {
	position: absolute;
	inset: 0;

	background: rgba(43, 36, 32, 0.72);
}


/* ---- Dialog ---- */

.gpv-appchoice-dialog {
	position: relative;
	z-index: 1;

	width: 100%;
	max-width: 440px;

	padding: 2rem;

	color: var(--gpv-ink);
	background: var(--gpv-cream);

	border-radius: 10px;

	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.25);
}


/* ---- Dialog focus target ----
   The dialog panel carries tabindex="-1" so focus can be moved into it
   on open. It is a container, not an operable control, so the sitewide
   [tabindex]:focus-visible ring is suppressed here -- a 3px band around
   the whole 440px panel reads as an error state. The close button and
   the two store options keep their own focus indicators. */

.gpv-appchoice-dialog:focus,
.gpv-appchoice-dialog:focus-visible {
	outline: none !important;
}


/* ---- Close button ---- */

.gpv-appchoice-close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 44px;
	height: 44px;

	padding: 0;

	font-size: 1.75rem;
	line-height: 1;

	color: var(--gpv-ink);
	background: transparent;

	border: 0;
	border-radius: 6px;

	cursor: pointer;
}

.gpv-appchoice-close:focus-visible {
	outline: 3px solid var(--gpv-trunk) !important;
	outline-offset: 2px !important;
}


/* ---- Heading ---- */

.gpv-appchoice-heading {
	display: flex;
	align-items: center;

	gap: 1rem;

	padding-right: 2.5rem;
	margin-bottom: 1.25rem;
}

.gpv-appchoice-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 48px;

	width: 48px;
	height: 48px;

	color: var(--gpv-cream);
	background: var(--gpv-green);

	border-radius: 6px;
}

.gpv-appchoice-heading h2 {
	margin: 0 0 0.25rem;

	font-size: 1.5rem;

	color: var(--gpv-trunk);
}

.gpv-appchoice-heading p {
	margin: 0;

	color: var(--gpv-muted);
}


/* ---- Finding Grace in the app ---- */

.gpv-appchoice-find {
	display: flex;
	flex-direction: column;

	margin-bottom: 1.5rem;
	padding: 1rem;

	background: var(--gpv-surface);

	border: 1px solid var(--gpv-line);
	border-radius: 6px;
}

.gpv-appchoice-find > strong {
	margin-bottom: 0.35rem;

	color: var(--gpv-trunk);
}

.gpv-appchoice-find > span {
	font-size: 0.9375rem;
	line-height: 1.6;
}

.gpv-appchoice-find strong {
	color: var(--gpv-trunk);
}


/* ---- Store choices ---- */

.gpv-appchoice-options {
	display: grid;
	gap: 0.625rem;
}

.gpv-appchoice-option {
	display: flex;
	align-items: center;
	justify-content: space-between;

	min-height: 48px;

	padding: 0.75rem 1rem;

	font-weight: 600;

	color: var(--gpv-cream) !important;
	background: var(--gpv-green);

	border: 1px solid var(--gpv-green);
	border-radius: 6px;

	text-decoration: none !important;

	transition: background-color 120ms ease;
}

.gpv-appchoice-option:hover {
	color: var(--gpv-cream) !important;

	background: var(--gpv-green-hover);
	border-color: var(--gpv-green-hover);
}

/* The sitewide a:focus-visible rule uses the `outline` shorthand with
   !important, so an outline-color declaration alone cannot win here.
   The full shorthand is repeated with !important to match. */

.gpv-appchoice-option:focus-visible {
	outline: 3px solid var(--gpv-trunk) !important;
	outline-offset: 2px !important;
}


/* ---- Mobile bottom-sheet presentation ---- */

@media (max-width: 600px) {

	.gpv-appchoice {
		align-items: flex-end;

		padding: 0;
	}

	.gpv-appchoice-dialog {
		max-width: none;

		padding: 1.5rem;

		border-radius: 12px 12px 0 0;
	}

}


/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {

	.gpv-appchoice-trigger,
	.gpv-appchoice-option {
		transition: none;
	}

}


/* ===== END .gpv-appchoice ===== */

/* ============================================================
   ABOUT US — ICONBOX ICON ALIGNMENT
   Our Community · Our Mission · Our Beliefs
   ------------------------------------------------------------
   Rejoice's style2 iconbox vertically centers the icon against
   its own card's height. The three About Us cards carry copy of
   very different lengths — Our Beliefs runs roughly twice Our
   Mission — so the icons land on three different lines across
   the row while the headings stay on one baseline.

   Scoped to .gpv-about-cards (added to the section's
   container_class) so style2 iconboxes elsewhere on the site
   keep the theme default.

   PROVISIONAL: the selector list below is written against
   guessed Rejoice class names, not inspected markup. See
   PENDING item 4.
   ============================================================ */

/* ===== BEGIN .gpv-about-cards ===== */

.gpv-about-cards .iconbox,
.gpv-about-cards .icon-box,
.gpv-about-cards .iconbox-style2,
.gpv-about-cards .iconbox.style2 {
	align-items: flex-start !important;
}

.gpv-about-cards .iconbox .iconbox-icon,
.gpv-about-cards .icon-box .icon,
.gpv-about-cards .iconbox-icon,
.gpv-about-cards .iconbox i,
.gpv-about-cards .iconbox .icon-wrap {
	align-self: flex-start !important;
	margin-top: 0 !important;
}

/* ===== END .gpv-about-cards ===== */

/* ============================================================
   PENDING — add when the selectors are confirmed
   ------------------------------------------------------------
   1. .grace-team-* (Staff & Leaders card grid) currently lives in
      Customizer > Additional CSS. Move it into this file so it is
      version-controlled with the rest, and swap its literal hexes
      for the --gpv- tokens above.

   2. Once Tabler is confirmed loading from functions.php, remove the
      per-block <link> tags from the Custom HTML blocks listed in the
      functions.php comment. Count is now SIX — the connect card page
      block (.gpv-cp) was added after that comment was written.

   3. Consolidated .gpv-contact stylesheet: fold the
      .gpv-connect-card block above into it post-launch, and drop
      the local --cp-* and --ns-* token blocks from the Custom HTML
      components in favour of the :root tokens.

   4. .gpv-about-cards carries nine selectors written against
      guessed Rejoice iconbox class names. Inspect one card,
      confirm which selector actually matches, and delete the
      other eight. Then test whether the !important flags are
      needed at all — iconbox alignment is likely stylesheet-
      level, not inline, in which case they come out too and the
      block wins on specificity like .gpv-connect-card does.
   ============================================================ */