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


/* ============================================================
   PENDING — add when the selectors are confirmed
   ------------------------------------------------------------
   1. FOOTER "SUNDAY / CLOSED" still renders red-orange while the
      other days render cream. Inspect the footer hours widget and
      add the rule here. Last warm-orange left on the page.
      NOTE: --gpv-error was added to the palette for the connect
      card. Confirm the two reds do not collide visually.

   2. .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.

   3. 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.

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