/*
 * Rooted DPC — personality: the per-design choices that aren't tokens. Presets only.
 */

/* ===== PERSONALITY — the per-blueprint choices that aren't tokens ===== */
/* FAQ: compact serif questions, answers set in the heading serif */
.rogiq-qa > summary { font-size: var(--wp--preset--font-size--large); }
.rogiq-qa > p { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--small); line-height: 1.7; }
/* Check / cross lists: "not a fit" items stay full strength */
:is(.rogiq-list-cross, .is-style-cross) li { color: inherit; }
:is(.rogiq-list-check, .is-style-check, .rogiq-list-cross, .is-style-cross) li + li { margin-top: var(--wp--preset--spacing--20); }
/* Contact: form card and fields as in the Rooted forms — flat card, transparent fields with a dark hairline */
.rogiq-form-card { padding: var(--wp--custom--form-card-pad, var(--wp--preset--spacing--60)) !important; border-radius: var(--wp--custom--radius--form, var(--wp--custom--radius--card)); box-shadow: none; }
/* A form card on its own (e.g. Employers consult) is 860px wide in the designs, wider than the text column */
.is-layout-constrained > .rogiq-form-card { max-width: var(--wp--custom--form-card-width, var(--wp--style--global--content-size)) !important; }
@media (max-width: 781px) { .rogiq-form-card { padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) !important; } }
.rogiq-form-card:hover { box-shadow: none; }
.rogiq-form { --rogiq-input-border: var(--wp--preset--color--contrast); margin-top: var(--wp--custom--form-top-gap, var(--wp--preset--spacing--40)); }
.rogiq-form :is(label, legend, .gfield_label) { font-size: var(--wp--preset--font-size--small); font-weight: 400; }
.rogiq-form :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"], [type="file"]), select, textarea) {
	min-height: 2.5rem;
	padding: 0 0.625rem;
	border-radius: var(--wp--custom--radius--sm, 5px);
	background: transparent;
	font-size: var(--wp--preset--font-size--small);
}
.rogiq-form textarea { min-height: 8.5rem; padding-block: 0.625rem; }
.rogiq-form :is(input, textarea)::placeholder { color: color-mix(in srgb, var(--wp--preset--color--contrast) 45%, transparent); opacity: 1; }
.rogiq-form .gform_wrapper .gform_fields { row-gap: var(--wp--custom--form-field-gap-y, var(--wp--preset--spacing--20)); column-gap: var(--wp--custom--form-field-gap-x, var(--wp--preset--spacing--20)); }
.rogiq-form .gform_wrapper .gfield textarea { height: var(--wp--custom--form-message-height, 8.5rem) !important; min-height: 0; }
.rogiq-form .gform-theme--framework .gfield--type-consent label { font-size: var(--wp--preset--font-size--small); }
/* Gravity Forms sizes fields and buttons with its own variables */
.rogiq-form .gform-theme--framework { --gf-ctrl-size-md: 2.5rem; --gf-ctrl-font-size: var(--wp--preset--font-size--small); }
/* GF re-declares its button variables on a size class, so set the box directly */
.rogiq-form .gform_wrapper :is(button, input).gform_button {
	height: auto !important;
	min-height: 0 !important;
	padding: 1rem 1.25rem !important;
	font-size: var(--wp--preset--font-size--medium) !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
}
/* Submit = the site's primary button (same size, type and radius as every other button) */
.rogiq-form :is(input[type="submit"], button[type="submit"], .gform_button) {
	min-height: 0;
	padding: 1rem 1.25rem;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
}

/* Heading → its intro line sits tight (10–11px in the designs), other gaps stay on the block gap */
/* Every section heading sits 10px above its intro paragraph (all Sketch frames) */
h2.wp-block-heading + p,
.rogiq-section-intro h1 + :is(p, .wp-block-term-description),
.rogiq-contact :is(h2, h3) + p { margin-top: var(--wp--custom--heading-gap, var(--wp--preset--spacing--20)); }
/* Smaller headings (H3–H6) sit just as tight on the paragraph under them (10px in the Sketch, e.g. "Membership is not
   insurance"). Sections with their own heading spacing keep it (article text, sidebar boxes, steps, divided columns).
   A margin set on the paragraph in the editor still wins. */
:where(h3, h4, h5, h6).wp-block-heading + p:not(:where(.rogiq-prose, .rogiq-sidebar-box, .rogiq-steps-row, .rogiq-divided) p) {
	margin-top: var(--wp--custom--heading-gap, var(--wp--preset--spacing--20));
}
/* Divided columns: content centred between the rules, tight title, link a little lower and bold */
.rogiq-divided > .wp-block-column { display: flex; flex-direction: column; justify-content: center; }
.rogiq-divided h3 { margin-bottom: var(--wp--custom--divided-title-gap, var(--wp--preset--spacing--20)); }
/* Meta line ("Ages 0–18, $22/month") is body size, like the description under it (one text block in the Sketch) */
.rogiq-divided p.rogiq-meta { margin-bottom: var(--wp--custom--divided-meta-gap, 0); font-size: inherit; }
.rogiq-divided p.rogiq-link-out { margin-top: var(--wp--custom--divided-link-gap, 0); }

/* ===== Offset icon box — the Rooted "Icon" symbol =====
   A dark hairline box with the tint box offset down-left behind it, thin dark glyph inside.
   Used by contact details (Contact, single location, location cards), Plus lists and Check / Cross lists. */
:root {
	--rogiq-ibox-w: 1.5625rem;
	--rogiq-ibox-h: 1.6875rem;
	--rogiq-ibox-dx: 0.25rem;
	--rogiq-ibox-dy: 0.1875rem;
	--rogiq-ibox-mark: 0.75rem;
	--rogiq-ibox-icon: 1rem;
	--rogiq-mark-size: 0.875rem;
	/* thinner marks, closer to the light icon weight in the designs */
	--rogiq-mark-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='black' stroke-width='0.8' stroke-linecap='round'%3E%3Cpath d='M5 1v8M1 5h8'/%3E%3C/svg%3E");
	--rogiq-mark-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='black' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 5.5l2.5 2.5L8.5 2.5'/%3E%3C/svg%3E");
	--rogiq-mark-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='black' stroke-width='0.8' stroke-linecap='round'%3E%3Cpath d='M1.5 1.5l7 7M8.5 1.5l-7 7'/%3E%3C/svg%3E");
}
:is(.rogiq-location-info, .rogiq-split-card) .rogiq-contact-item::before,
ul.is-style-plus li::before,
:is(.rogiq-list-check, .is-style-check, .rogiq-list-cross, .is-style-cross) li::before {
	box-sizing: border-box;
	width: var(--rogiq-ibox-w);
	height: var(--rogiq-ibox-h);
	border: 1px solid var(--wp--preset--color--contrast);
	--rogiq-ibox-r: var(--rogiq-icon-box-radius, var(--wp--custom--radius--sm, 5px));
	border-radius: var(--rogiq-ibox-r);
	/* tint inside the overlap (with the tint box's own rounded top-right corner) + the part that sticks out down-left */
	background:
		radial-gradient(farthest-side at 0 100%, var(--rogiq-tint) calc(100% - 0.5px), transparent 100%) right var(--rogiq-ibox-dx) top var(--rogiq-ibox-dy) / var(--rogiq-ibox-r) var(--rogiq-ibox-r) no-repeat border-box,
		linear-gradient(var(--rogiq-tint), var(--rogiq-tint)) left calc(-1 * var(--rogiq-ibox-dx)) top var(--rogiq-ibox-dy) / calc(100% - var(--rogiq-ibox-r)) 100% no-repeat border-box,
		linear-gradient(var(--rogiq-tint), var(--rogiq-tint)) right var(--rogiq-ibox-dx) bottom calc(-1 * var(--rogiq-ibox-dy)) / var(--rogiq-ibox-r) calc(100% - var(--rogiq-ibox-r)) no-repeat border-box;
	box-shadow: calc(-1 * var(--rogiq-ibox-dx)) var(--rogiq-ibox-dy) 0 0 var(--rogiq-tint);
}
:is(.rogiq-location-info, .rogiq-split-card) .rogiq-contact-item::after,
ul.is-style-plus li::after,
:is(.rogiq-list-check, .is-style-check, .rogiq-list-cross, .is-style-cross) li::after { background: var(--wp--preset--color--contrast); }

/* Lists: box at the start of the first line, text 10px after the footprint */
ul.is-style-plus li,
:is(.rogiq-list-check, .is-style-check, .rogiq-list-cross, .is-style-cross) li { padding-left: calc(var(--rogiq-ibox-dx) + var(--rogiq-ibox-w) + 0.625rem); }
ul.is-style-plus li::before,
:is(.rogiq-list-check, .is-style-check, .rogiq-list-cross, .is-style-cross) li::before { left: var(--rogiq-ibox-dx); top: 0; }
ul.is-style-plus li::after,
:is(.rogiq-list-check, .is-style-check, .rogiq-list-cross, .is-style-cross) li::after {
	left: calc(var(--rogiq-ibox-dx) + (var(--rogiq-ibox-w) - var(--rogiq-ibox-mark)) / 2);
	top: calc((var(--rogiq-ibox-h) - var(--rogiq-ibox-mark)) / 2);
	width: var(--rogiq-ibox-mark);
	height: var(--rogiq-ibox-mark);
}

/* Contact details: compact rows, no rules, box in a 29px column, label + value beside it */
:is(.rogiq-location-info, .rogiq-split-card) .rogiq-contact-item {
	--rogiq-tile: calc(var(--rogiq-ibox-dx) + var(--rogiq-ibox-w));
	--rogiq-glyph: var(--rogiq-ibox-icon);
	--rogiq-inset: 0px;
	--rogiq-inset-y: 0px;
	column-gap: 0.625rem;
	padding: 0;
	border: 0;
}
.rogiq-location-info .rogiq-contact-item + .rogiq-contact-item { margin-top: var(--wp--preset--spacing--20); }
:is(.rogiq-location-info, .rogiq-split-card) .rogiq-contact-item::before { margin: 1px 0 0 var(--rogiq-ibox-dx); }
:is(.rogiq-location-info, .rogiq-split-card) .rogiq-contact-item::after {
	left: calc(var(--rogiq-ibox-dx) + (var(--rogiq-ibox-w) - var(--rogiq-ibox-icon)) / 2);
	top: calc(1px + (var(--rogiq-ibox-h) - var(--rogiq-ibox-icon)) / 2);
	width: var(--rogiq-ibox-icon);
	height: var(--rogiq-ibox-icon);
}
:is(.rogiq-location-info, .rogiq-split-card) .rogiq-contact-item > * + * { margin-top: 2px; }
:is(.rogiq-location-info, .rogiq-split-card) .rogiq-contact-item p.rogiq-contact-label { font-size: var(--wp--preset--font-size--x-small); line-height: 1.35; }
.rogiq-location-info .rogiq-contact-item p.rogiq-contact-value { font-size: var(--wp--preset--font-size--medium); line-height: 1.4; color: var(--wp--preset--color--contrast); }
:is(.rogiq-location-info, .rogiq-split-card) .rogiq-contact-item a { color: inherit; }
/* Team bio contact links: same offset box */
.rogiq-team-contact:not(.is-icons) .rogiq-team-contact__icon {
	--rogiq-contact-box: var(--rogiq-ibox-w);
	height: var(--rogiq-ibox-h);
	margin-left: var(--rogiq-ibox-dx);
	--rogiq-ibox-r: var(--rogiq-icon-box-radius, var(--wp--custom--radius--sm, 8px));
	border-color: var(--wp--preset--color--contrast);
	background:
		radial-gradient(farthest-side at 0 100%, var(--rogiq-tint) calc(100% - 0.5px), transparent 100%) right var(--rogiq-ibox-dx) top var(--rogiq-ibox-dy) / var(--rogiq-ibox-r) var(--rogiq-ibox-r) no-repeat border-box,
		linear-gradient(var(--rogiq-tint), var(--rogiq-tint)) left calc(-1 * var(--rogiq-ibox-dx)) top var(--rogiq-ibox-dy) / calc(100% - var(--rogiq-ibox-r)) 100% no-repeat border-box,
		linear-gradient(var(--rogiq-tint), var(--rogiq-tint)) right var(--rogiq-ibox-dx) bottom calc(-1 * var(--rogiq-ibox-dy)) / var(--rogiq-ibox-r) calc(100% - var(--rogiq-ibox-r)) no-repeat border-box;
	box-shadow: calc(-1 * var(--rogiq-ibox-dx)) var(--rogiq-ibox-dy) 0 0 var(--rogiq-tint);
	color: var(--wp--preset--color--contrast);
}
.rogiq-team-contact:not(.is-icons) .rogiq-team-contact__icon::before { width: var(--rogiq-ibox-icon); height: var(--rogiq-ibox-icon); font-size: 0.875rem; }
.rogiq-team-contact:not(.is-icons) a { gap: 0.625rem; }
/* ===== END offset icon box ===== */

/* FAQ toggle — the "^ accordion" symbol: dark hairline circle, tint circle offset down-left, thin arrow
   (down when closed, flips up when open). Arrow is its own layer so the circle can carry the tint. */
.rogiq-qa > summary {
	--rogiq-qa-size: 2.1875rem;
	--rogiq-qa-arrow: 0.75rem;
	position: relative;
}
.rogiq-qa > summary::after,
.rogiq-qa > summary:hover::after,
.rogiq-qa[open] > summary::after {
	width: var(--rogiq-qa-size);
	height: var(--rogiq-qa-size);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: var(--rogiq-icon-toggle-radius, 50%);
	/* the tint circle inside the overlap is a circle too (square under Corners → Sharp: icons.php sets --rogiq-icon-toggle-tint) */
	background: radial-gradient(var(--rogiq-icon-toggle-tint, closest-side), var(--rogiq-tint) calc(100% - 0.5px), transparent 100%) calc(-1 * var(--rogiq-ibox-dy)) var(--rogiq-ibox-dy) / 100% 100% no-repeat border-box;
	box-shadow: calc(-1 * var(--rogiq-ibox-dy)) var(--rogiq-ibox-dy) 0 0 var(--rogiq-tint);
}
.rogiq-qa > summary::before {
	content: '';
	position: absolute;
	top: 50%;
	right: calc((var(--rogiq-qa-size) - var(--rogiq-qa-arrow)) / 2);
	width: var(--rogiq-qa-arrow);
	height: var(--rogiq-qa-arrow);
	background: var(--wp--preset--color--contrast);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 1v10M1.75 6.75 6 11l4.25-4.25'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 1v10M1.75 6.75 6 11l4.25-4.25'/%3E%3C/svg%3E") center / contain no-repeat;
	transform: translateY(-50%);
	transition: transform var(--wp--custom--transition--fast, 0.2s ease);
}
.rogiq-qa[open] > summary::before { transform: translateY(-50%) rotate(180deg); }

/* Providers grid: intro held to 720px, 100px down to the cards */
.rogiq-team-plain > .alignwide > p { max-width: 45rem; }
.rogiq-team-plain > .rogiq-team { margin-block-start: var(--wp--preset--spacing--70); }

/* Carousel arrows (team strip, steps rows) — the same "^ accordion" toggle as the FAQs, turned sideways:
   hairline circle with the tint circle offset down-left, thin arrow. Sit 30px under the cards. */
.rogiq-carousel-nav { gap: calc(var(--rogiq-ibox-dy) + 2px); margin-top: 1.875rem; padding-left: var(--rogiq-ibox-dy); }
.rogiq-carousel-btn {
	width: 2.1875rem;
	height: 2.1875rem;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: var(--rogiq-icon-toggle-radius, 50%);
	background: radial-gradient(var(--rogiq-icon-toggle-tint, closest-side), var(--rogiq-tint) calc(100% - 0.5px), transparent 100%) calc(-1 * var(--rogiq-ibox-dy)) var(--rogiq-ibox-dy) / 100% 100% no-repeat border-box;
	box-shadow: calc(-1 * var(--rogiq-ibox-dy)) var(--rogiq-ibox-dy) 0 0 var(--rogiq-tint);
	color: var(--wp--preset--color--contrast);
}
.rogiq-carousel-btn svg { width: 0.8125rem; height: 0.8125rem; stroke-width: 1.4; }
.rogiq-carousel-btn:not([disabled]):hover { border-color: var(--wp--preset--color--contrast); background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }

/* Phones: photo first, then the text — in every two-column section whose other column is just a photo.
   The split hero keeps its text first. */
@media (max-width: 781px) {
	.wp-block-columns:not(.rogiq-split-hero) > .wp-block-column:has(> figure.wp-block-image:only-child) { order: -1; }
}

/* Testimonial card (Sketch "Testimonial"): 500px grey card, content centred; heading → quote 10px; quote 16/28 in 720px;
   "Name, Title" bold on one line right under it; dots ~60px below */
/* Height follows the quote in view: the padding gives the Sketch's 500px with the reference quote; shorter quotes shrink it */
.rogiq-quote-card { display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; padding-block: var(--wp--custom--quote-card-pad, 7.125rem) !important; transition: height 0.35s ease; }
@media (max-width: 781px) { .rogiq-quote-card { padding-block: var(--wp--preset--spacing--60) !important; } }
.rogiq-quote-card .rogiq-testimonials { gap: var(--wp--custom--heading-gap, 0.625rem); }
.rogiq-quote-card .rogiq-testimonial { gap: 0.25rem; }
.rogiq-quote-card .rogiq-testimonial__quote { max-width: 45rem; font-size: var(--wp--preset--font-size--medium); line-height: 1.75; color: var(--wp--preset--color--contrast); }
.rogiq-quote-card .rogiq-testimonial__person { justify-content: center; margin-top: 0; }
.rogiq-quote-card .rogiq-testimonial__who { display: block; }
.rogiq-quote-card :is(.rogiq-testimonial__name, .rogiq-testimonial__detail) { display: inline; font-size: var(--wp--preset--font-size--medium); font-weight: 700; color: var(--wp--preset--color--contrast); }
.rogiq-quote-card .rogiq-testimonial__name + .rogiq-testimonial__detail::before { content: ", "; }
/* flat slides: no shadow room needed above / below the track */
.rogiq-quote-card .rogiq-testimonials__track { margin-block: 0; padding-block: 0; grid-auto-columns: 100%; }
.rogiq-quote-card .rogiq-testimonials__dots { order: 3; margin-top: var(--wp--preset--spacing--60); }

/* Footer (Sketch "FOOTER"): 40px top; logo column, then content-width link columns 150px apart (Care / About /
   Get Started at 732 / 1050 / 1346 at 1920); serif 20/30 headings right on top of 18/26 links (30px pitch);
   ruled bottom bar 16px with a mid-grey rule and "|" separators. */
.rogiq-footer.rogiq-footer-links { padding-top: 2.5rem !important; padding-bottom: 0 !important; }
.rogiq-footer-links { --rogiq-footer-sep: "|"; }
@media (min-width: 782px) {
	.rogiq-footer-links > .wp-block-columns { justify-content: flex-start; column-gap: var(--wp--custom--footer-col-gap, var(--wp--preset--spacing--50)) !important; }
	.rogiq-footer-links > .wp-block-columns > .wp-block-column { flex: 0 1 auto !important; }
	.rogiq-footer-links > .wp-block-columns > .wp-block-column:first-child { flex-basis: var(--wp--custom--footer-logo-col, auto) !important; min-width: 0; }
}
@media (min-width: 1200px) { .rogiq-footer-links > .wp-block-columns > .wp-block-column:not(:first-child) { min-width: var(--wp--custom--footer-col-min, 0); } }
.rogiq-footer-links .rogiq-footer-label { margin: 0 0 0.25rem; font-size: var(--wp--preset--font-size--large); line-height: 1.5; font-weight: 700; }
.rogiq-footer-links .rogiq-footer-list { gap: 0.25rem; margin-top: 0; }
.rogiq-footer-links .rogiq-footer-list a { font-size: var(--wp--custom--footer-link-size, var(--wp--preset--font-size--medium)); line-height: 1.625rem; white-space: nowrap; }
.rogiq-footer-links .rogiq-footer-list li { margin: 0; font-size: var(--wp--custom--footer-link-size, var(--wp--preset--font-size--medium)); line-height: 1.625rem; }
.rogiq-footer-links .rogiq-footer-nav { margin-top: 0; }
.rogiq-footer-links .rogiq-footer-nav .wp-block-navigation__container { gap: 0.25rem; }
.rogiq-footer-links .rogiq-footer-nav .wp-block-navigation-item { margin: 0; font-size: var(--wp--custom--footer-link-size, var(--wp--preset--font-size--medium)); line-height: 1.625rem; }
.rogiq-footer-links .rogiq-footer-nav .wp-block-navigation-item__content { white-space: nowrap; }
.rogiq-footer-links .rogiq-footer-bottom {
	margin-top: var(--wp--preset--spacing--60) !important;
	padding-block: 0.6875rem;
	border-top-color: color-mix(in srgb, var(--wp--preset--color--contrast) 40%, var(--wp--preset--color--base));
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.625;
}

/* ===== END PERSONALITY ===== */

/* ===== Blog sidebar newsletter (Sketch "NEWSLETTER"): grey hairline field, 16px text, button joined on the end ===== */
.rogiq-sidebar-box .rogiq-form { --rogiq-input-border: color-mix(in srgb, var(--wp--preset--color--contrast) 40%, transparent); }
.rogiq-sidebar-box .rogiq-form input[type="email"] { font-size: var(--wp--preset--font-size--medium); }