/* PoolBuilders Connect — enquiry form (FORMS-1, 0.9.0).
   Every value is a PB design token with a sane fallback, so a client palette/font swap
   re-skins the form with zero code — the same contract the Studio already honours. No
   colours, sizes or families are invented here. Plugin-rendered markup cannot use Bricks
   global classes (Bricks only emits CSS for classes an ELEMENT references), which is why
   this stylesheet ships with the plugin rather than living in the child theme. */

.c-convo {
	--pbc-ink: var(--ink, #141A2B);
	--pbc-muted: var(--muted, #555C6B);
	--pbc-line: var(--line, #D6D5CE);
	--pbc-brand: var(--brand, #2050A0);
	--pbc-deep: var(--brand-deep, #12305F);
	--pbc-accent: var(--accent, #B5421A);
	--pbc-paper: var(--paper, #F7F5F0);
	--pbc-surface: var(--surface, #FFFFFF);
	--pbc-radius: var(--radius-m, 0px);
	--pbc-ease: var(--ease, 0.25s cubic-bezier(0.4, 0, 0.2, 1));
	display: block;
	background: var(--pbc-surface);
	border: 1px solid var(--pbc-line);
	border-radius: var(--pbc-radius);
	padding: var(--space-l, 1.5rem);
	font-family: var(--font-body, system-ui, sans-serif);
	color: var(--pbc-ink);
	box-shadow: var(--shadow-s, 0 1px 2px rgba(18, 48, 95, 0.06));
}

/* Dropped inside a PB card (the /contact/ recipe puts it where the Bricks form was), the
   chrome is the card's job — ours would double the border, padding and shadow. */
.c-card .c-convo, .c-form .c-convo, .c-convo--bare { border: 0; background: none; padding: 0; box-shadow: none; }

/* ---- chrome ---- */
.c-convo__head { display: flex; justify-content: space-between; gap: var(--space-s, 0.75rem); align-items: baseline; }
.c-convo__micro { font-size: var(--text-s, 0.85rem); letter-spacing: 0.08em; text-transform: uppercase; color: var(--pbc-muted); }
.c-convo__progress { display: flex; gap: 4px; margin: var(--space-s, 0.75rem) 0 var(--space-l, 1.5rem); }
.c-convo__progress span { flex: 1 1 0; height: 2px; background: var(--pbc-line); transition: background var(--pbc-ease); }
.c-convo__progress span.is-filled { background: var(--pbc-brand); }
.c-convo__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.c-convo__hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.c-convo__q {
	font-family: var(--font-display, Georgia, serif);
	font-size: var(--text-xl, 1.5rem);
	font-weight: 500;
	line-height: 1.2;
	margin: 0 0 var(--space-m, 1.13rem);
	color: var(--pbc-ink);
}

/* ---- choices ---- */
.c-convo__choices { display: grid; gap: var(--space-xs, 0.5rem); }
.c-convo__choice {
	display: grid; grid-template-columns: auto 1fr auto; align-items: center;
	gap: var(--space-s, 0.75rem);
	width: 100%; text-align: left; cursor: pointer;
	padding: var(--space-s, 0.75rem) var(--space-m, 1.13rem);
	background: var(--pbc-paper);
	border: 1px solid var(--pbc-line);
	border-radius: var(--pbc-radius);
	color: inherit;
	font: inherit;
	transition: border-color var(--pbc-ease), background var(--pbc-ease);
}
.c-convo__choice:hover { border-color: var(--pbc-brand); }
.c-convo__choice[aria-pressed="true"] { border-color: var(--pbc-brand); background: var(--pbc-surface); box-shadow: inset 0 0 0 1px var(--pbc-brand); }
.c-convo__n { font-size: var(--text-s, 0.85rem); color: var(--pbc-muted); font-variant-numeric: lining-nums tabular-nums; }
.c-convo__choice-body { display: grid; gap: 2px; }
.c-convo__choice-title { font-weight: 600; font-size: var(--text-m, 1rem); }
.c-convo__choice-desc { font-size: var(--text-s, 0.85rem); color: var(--pbc-muted); }
.c-convo__chev { width: 8px; height: 8px; border-right: 1.5px solid var(--pbc-muted); border-top: 1.5px solid var(--pbc-muted); transform: rotate(45deg); }
.c-convo__choice[aria-pressed="true"] .c-convo__chev { border-color: var(--pbc-brand); }

/* ---- fields ---- */
.c-convo__fields { display: grid; gap: var(--space-m, 1.13rem); }
.c-convo__field { display: grid; gap: var(--space-2xs, 0.25rem); }
.c-convo__label { font-size: var(--text-s, 0.85rem); letter-spacing: 0.04em; text-transform: uppercase; color: var(--pbc-muted); }
.c-convo__input, .c-convo__textarea {
	width: 100%; font: inherit; color: var(--pbc-ink);
	padding: var(--space-s, 0.75rem) var(--space-m, 1.13rem);
	background: var(--pbc-paper);
	border: 1px solid var(--pbc-line);
	border-radius: var(--pbc-radius);
}
.c-convo__textarea { resize: vertical; min-height: 7rem; }
.c-convo__input:focus, .c-convo__textarea:focus { outline: none; border-color: var(--pbc-brand); box-shadow: inset 0 0 0 1px var(--pbc-brand); }
.c-convo__field.is-error .c-convo__input, .c-convo__field.is-error .c-convo__textarea { border-color: var(--pbc-accent); }
.c-convo__err { margin: 0; font-size: var(--text-s, 0.85rem); color: var(--pbc-accent); }
.c-convo__check { display: grid; grid-template-columns: auto 1fr; gap: var(--space-xs, 0.5rem); align-items: start; font-size: var(--text-s, 0.85rem); color: var(--pbc-muted); cursor: pointer; }
.c-convo__check input { margin-top: 0.2em; accent-color: var(--pbc-brand); width: 1rem; height: 1rem; }
.c-convo__field--consent.is-error .c-convo__check { color: var(--pbc-accent); }

/* ---- foot ---- */
.c-convo__foot { display: flex; flex-wrap: wrap; gap: var(--space-s, 0.75rem); justify-content: space-between; align-items: center; margin-top: var(--space-l, 1.5rem); }
.c-convo__note { font-size: var(--text-s, 0.85rem); color: var(--pbc-muted); }
.c-convo__cta {
	display: inline-flex; align-items: center; gap: var(--space-xs, 0.5rem);
	font: inherit; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: var(--text-s, 0.85rem);
	padding: var(--space-s, 0.75rem) var(--space-l, 1.5rem);
	background: var(--pbc-brand); color: var(--pbc-surface);
	border: 1px solid var(--pbc-brand); border-radius: var(--pbc-radius);
	cursor: pointer; transition: background var(--pbc-ease), border-color var(--pbc-ease);
}
.c-convo__cta:hover { background: var(--pbc-deep); border-color: var(--pbc-deep); }
.c-convo__cta[disabled] { background: transparent; color: var(--pbc-muted); border-color: var(--pbc-line); cursor: not-allowed; }
.c-convo__cta-line { width: 1.25rem; height: 1px; background: currentColor; }
.c-convo__back, .c-convo__restart {
	display: inline-flex; align-items: center; gap: var(--space-2xs, 0.25rem);
	background: none; border: 0; padding: 0; margin: 0 0 var(--space-m, 1.13rem);
	font: inherit; font-size: var(--text-s, 0.85rem); color: var(--pbc-muted); cursor: pointer;
}
.c-convo__restart { margin: var(--space-m, 1.13rem) 0 0; }
.c-convo__back:hover, .c-convo__restart:hover { color: var(--pbc-brand); }
.c-convo__arrow { width: 7px; height: 7px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }

/* ---- close ---- */
.c-convo__close-title { font-family: var(--font-display, Georgia, serif); font-size: var(--text-2xl, 1.9rem); font-weight: 500; line-height: 1.15; margin: 0 0 var(--space-s, 0.75rem); }
.c-convo__close-title:focus-visible { outline: 2px solid var(--pbc-brand); outline-offset: 3px; }
.c-convo__close-body { margin: 0; color: var(--pbc-muted); font-size: var(--text-m, 1rem); line-height: 1.55; }
.c-convo__contacts { display: flex; flex-wrap: wrap; gap: var(--space-m, 1.13rem); margin-top: var(--space-m, 1.13rem); }
.c-convo__contact { color: var(--pbc-brand); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }
.c-convo__contact:hover { color: var(--pbc-deep); }

/* ---- stage transitions (entirely skipped under reduced motion: the JS never adds the classes) ---- */
.c-convo__stage { transition: opacity 0.2s ease, transform 0.2s ease; }
.c-convo__stage.is-out-fwd { opacity: 0; transform: translateX(-8px); }
.c-convo__stage.is-out-back { opacity: 0; transform: translateX(8px); }
.c-convo__stage.is-in-fwd { opacity: 0; transform: translateX(8px); }
.c-convo__stage.is-in-back { opacity: 0; transform: translateX(-8px); }

/* ---- focus ---- */
.c-convo :focus-visible { outline: 2px solid var(--pbc-brand); outline-offset: 2px; }

/* ---- the no-JS form (visible only when the widget did not boot) ---- */
.pbc-nojs { display: grid; gap: var(--space-m, 1.13rem); }
.pbc-nojs__lead { margin: 0; color: var(--pbc-muted); font-size: var(--text-m, 1rem); }
.pbc-nojs__field { display: grid; gap: var(--space-2xs, 0.25rem); }
.pbc-nojs__field label { font-size: var(--text-s, 0.85rem); letter-spacing: 0.04em; text-transform: uppercase; color: var(--pbc-muted); }
.pbc-nojs input, .pbc-nojs select, .pbc-nojs textarea {
	width: 100%; font: inherit; color: var(--pbc-ink);
	padding: var(--space-s, 0.75rem) var(--space-m, 1.13rem);
	background: var(--pbc-paper); border: 1px solid var(--pbc-line); border-radius: var(--pbc-radius);
}
.pbc-nojs__consent label { display: grid; grid-template-columns: auto 1fr; gap: var(--space-xs, 0.5rem); align-items: start; font-size: var(--text-s, 0.85rem); color: var(--pbc-muted); text-transform: none; letter-spacing: 0; }
.pbc-nojs__consent input { width: 1rem; height: 1rem; margin-top: 0.2em; accent-color: var(--pbc-brand); }
.pbc-nojs__submit {
	justify-self: start; font: inherit; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: var(--text-s, 0.85rem);
	padding: var(--space-s, 0.75rem) var(--space-l, 1.5rem);
	background: var(--pbc-brand); color: var(--pbc-surface); border: 1px solid var(--pbc-brand); border-radius: var(--pbc-radius); cursor: pointer;
}
.pbc-nojs__submit:hover { background: var(--pbc-deep); border-color: var(--pbc-deep); }
.pbc-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---- the no-JS result banner ---- */
.pbc-banner { background: var(--brand-deep, #12305F); color: #fff; font-family: var(--font-body, system-ui, sans-serif); }
.pbc-banner--error { background: var(--accent, #B5421A); }
.pbc-banner__in { max-width: var(--wrap, 1312px); margin: 0 auto; padding: var(--space-s, 0.75rem) var(--space-m, 1.13rem); display: flex; flex-wrap: wrap; gap: var(--space-s, 0.75rem); align-items: baseline; font-size: var(--text-s, 0.9rem); }
.pbc-banner__links { display: flex; gap: var(--space-m, 1.13rem); }
.pbc-banner a { color: inherit; }

@media (max-width: 767px) {
	.c-convo { padding: var(--space-m, 1.13rem) !important; }
	.c-convo__foot { flex-direction: column !important; align-items: stretch !important; }
	.c-convo__cta { justify-content: center !important; }
	.c-convo__choice { grid-template-columns: auto 1fr !important; }
	.c-convo__chev { display: none !important; }
}

/* ---- winning against a site-wide button rule -------------------------------
   Found on curtispools during FORMS-1 acceptance: a global class ships
   `button { background: var(--accent) !important; … }` — a BARE element selector with
   !important on every declaration, so it repaints every button on the site, ours included
   (the widget's Continue button came out accent-orange instead of brand-blue). A plugin
   that renders its own markup onto an unknown site cannot assume its rules are the last
   word, so the widget's buttons state their case at `#pb-form-slot .class` (1,1,0) with
   !important: two !importants tie, and specificity then decides in our favour. Only the
   properties such a rule realistically hijacks are repeated here — this is a shield, not
   a second stylesheet. */
#pb-form-slot .c-convo__cta {
	background: var(--pbc-brand) !important;
	color: var(--pbc-surface) !important;
	border: 1px solid var(--pbc-brand) !important;
	border-radius: var(--pbc-radius) !important;
	font-family: inherit !important;
	min-height: 0 !important;
	padding: var(--space-s, 0.75rem) var(--space-l, 1.5rem) !important;
}
#pb-form-slot .c-convo__cta:hover { background: var(--pbc-deep) !important; border-color: var(--pbc-deep) !important; }
#pb-form-slot .c-convo__cta[disabled] { background: transparent !important; color: var(--pbc-muted) !important; border-color: var(--pbc-line) !important; }
#pb-form-slot .c-convo__choice {
	background: var(--pbc-paper) !important;
	color: inherit !important;
	border: 1px solid var(--pbc-line) !important;
	border-radius: var(--pbc-radius) !important;
	font: inherit !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	min-height: 0 !important;
	padding: var(--space-s, 0.75rem) var(--space-m, 1.13rem) !important;
}
#pb-form-slot .c-convo__choice[aria-pressed="true"] { border-color: var(--pbc-brand) !important; background: var(--pbc-surface) !important; }
#pb-form-slot .c-convo__back, #pb-form-slot .c-convo__restart {
	background: none !important; border: 0 !important; color: var(--pbc-muted) !important;
	font: inherit !important; font-size: var(--text-s, 0.85rem) !important;
	letter-spacing: normal !important; text-transform: none !important;
	min-height: 0 !important; padding: 0 !important;
}
/* The consent line is a sentence, not a field label: a site-wide `label` rule that
   uppercases and letter-spaces (Curtis has one) turns it into shouting. */
#pb-form-slot .c-convo__check, #pb-form-slot .c-convo__check span,
#pb-form-slot .pbc-nojs__consent label, #pb-form-slot .pbc-nojs__consent span {
	text-transform: none !important;
	letter-spacing: normal !important;
	font-size: var(--text-s, 0.85rem) !important;
	line-height: 1.45 !important;
}
#pb-form-slot .pbc-nojs__submit {
	background: var(--pbc-brand) !important; color: var(--pbc-surface) !important;
	border: 1px solid var(--pbc-brand) !important; border-radius: var(--pbc-radius) !important;
}

/* ---- AIS-1: "Questions people ask" (c-faq) ---------------------------------
   A native <details> disclosure list — no JavaScript, open to find-in-page, printable, and
   keyboard-operable for free. Same token contract as everything else here: a palette swap
   re-skins it. Lives in this stylesheet because both are plugin-rendered markup enqueued by
   the same handle; Bricks only emits CSS for classes an ELEMENT references, so neither can be
   a global class. */
/* The block is mounted by a root-level text element, NOT wrapped in a Bricks band — so when
   no question is answered yet it renders literally nothing (an empty band on every page would
   be the cost of the alternative), and when it fills it brings its own band spacing. */
.c-faq {
	padding-block: var(--space-2xl, 3rem);
	padding-inline: var(--space-l, 1.5rem);
	--pbc-ink: var(--ink, #141A2B);
	--pbc-muted: var(--muted, #555C6B);
	--pbc-line: var(--line, #D6D5CE);
	--pbc-brand: var(--brand, #2050A0);
	--pbc-ease: var(--ease, 0.25s cubic-bezier(0.4, 0, 0.2, 1));
	display: block;
	max-width: var(--wrap-narrow, 720px);
	margin-inline: auto;
	font-family: var(--font-body, system-ui, sans-serif);
	color: var(--pbc-ink);
}
.c-faq__head {
	font-family: var(--font-display, Georgia, serif);
	font-size: var(--text-2xl, 1.9rem);
	font-weight: 500;
	line-height: 1.15;
	margin: 0 0 var(--space-l, 1.5rem);
}
.c-faq__list { border-top: 1px solid var(--pbc-line); }
.c-faq__item { border-bottom: 1px solid var(--pbc-line); }
.c-faq__q {
	display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-m, 1.13rem);
	padding: var(--space-m, 1.13rem) 0;
	cursor: pointer; list-style: none;
	font-size: var(--text-l, 1.15rem);
	font-weight: 600; line-height: 1.35;
	transition: color var(--pbc-ease);
}
.c-faq__q::-webkit-details-marker { display: none; }
.c-faq__q:hover { color: var(--pbc-brand); }
.c-faq__q:focus-visible { outline: 2px solid var(--pbc-brand); outline-offset: 2px; }
.c-faq__mark { position: relative; flex: 0 0 auto; width: 12px; height: 12px; margin-top: 0.35em; }
.c-faq__mark::before, .c-faq__mark::after {
	content: ''; position: absolute; inset: 50% 0 auto 0; height: 1.5px; background: currentColor; transition: transform var(--pbc-ease);
}
.c-faq__mark::after { transform: rotate(90deg); }
.c-faq__item[open] .c-faq__mark::after { transform: rotate(0deg); }
.c-faq__item[open] .c-faq__q { color: var(--pbc-brand); }
.c-faq__a { padding: 0 0 var(--space-m, 1.13rem); max-width: 62ch; }
.c-faq__a p { margin: 0; color: var(--pbc-muted); font-size: var(--text-m, 1rem); line-height: 1.6; }
.c-faq__a a { color: var(--pbc-brand); }

@media (max-width: 767px) {
	.c-faq__q { font-size: var(--text-m, 1rem) !important; }
}
@media (prefers-reduced-motion: reduce) {
	.c-faq__q, .c-faq__mark::before, .c-faq__mark::after { transition: none !important; }
}