/**
 * Holler Blocks — Global CSS
 *
 * Site-wide custom CSS that goes beyond theme.json tokens.
 * Design tokens (colors, type scale, spacing) belong in theme.json —
 * reference them here as CSS custom properties, e.g.:
 *
 *   var(--wp--preset--color--primary)
 *   var(--wp--preset--font-size--title-2)
 *   var(--wp--preset--spacing--gap-default)
 *
 * Elementor widgets and custom code can use the same variables, so
 * theme.json stays the single source of truth for the design system.
 */

/* ---------------------------------------------------------------------------
 * Forms
 *
 * Baseline styling for text inputs, textareas, and selects on the tokens —
 * covers the comment form, the search block, and plugin-rendered forms.
 * Element-level selectors on purpose: form plugins and Elementor can
 * override without specificity fights.
 * ------------------------------------------------------------------------ */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
	font: inherit;
	color: var(--wp--preset--color--neutral-dark);
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--neutral-light);
	border-radius: 6px;
	padding: 0.5rem 0.75rem;
	max-width: 100%;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea {
	line-height: 1.5;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 20%, transparent);
}

::placeholder {
	color: var(--wp--preset--color--neutral-mid);
	opacity: 0.7;
}

form label {
	font-size: var(--wp--preset--font-size--text-small);
	font-weight: 600;
	color: var(--wp--preset--color--neutral-dark);
}

input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--wp--preset--color--primary);
}

/* Comment form rhythm */
.comment-form p {
	margin: 0 0 1rem;
}
.comment-form label {
	display: block;
	margin-bottom: 0.25rem;
}
.comment-form input:not([type="checkbox"]):not([type="submit"]),
.comment-form textarea {
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	input, textarea, select { transition: none; }
}

/* ---------------------------------------------------------------------------
 * Gravity Forms token skin
 *
 * GF ≥2.7 (theme framework / Orbital) exposes --gf-* variables scoped on
 * .gform-theme--framework — mapping them to the theme tokens replaces the
 * per-site "GF styler" addons. The -rgb triplet (used for focus glows)
 * can't be derived from a var, so it stays the default-brand indigo; under
 * a style variation only that subtle glow tint keeps the default hue.
 * ------------------------------------------------------------------------ */

.gform-theme--framework,
.gform-theme--api {
	--gf-color-primary: var(--wp--preset--color--primary);
	--gf-color-primary-rgb: 65, 62, 197;
	--gf-color-primary-contrast: var(--wp--preset--color--white);
	--gf-color-primary-darker: var(--wp--preset--color--primary);
	--gf-color-primary-lighter: var(--wp--preset--color--secondary);
	--gf-ctrl-border-color: var(--wp--preset--color--neutral-light);
	--gf-ctrl-color: var(--wp--preset--color--neutral-dark);
	--gf-ctrl-bg: var(--wp--preset--color--white);
	--gf-ctrl-radius: 6px;
	--gf-ctrl-accent-color: var(--wp--preset--color--primary);
	--gf-color-in-ctrl-primary: var(--wp--preset--color--primary);
	--gf-color-in-ctrl-primary-contrast: var(--wp--preset--color--white);
}

/* Legacy gravity-theme (pre-framework) submit button + labels */
.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"] {
	font: inherit;
	font-weight: 600;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--primary);
	border: none;
	border-radius: 6px;
	padding: 0.6rem 1.4rem;
	cursor: pointer;
}
.gform_wrapper .gfield_label {
	font-size: var(--wp--preset--font-size--text-small);
	font-weight: 600;
	color: var(--wp--preset--color--neutral-dark);
}
.gform_wrapper .gfield_description {
	color: var(--wp--preset--color--neutral-mid);
	font-size: var(--wp--preset--font-size--caption);
}

/* ---------------------------------------------------------------------------
 * Pattern helpers
 * ------------------------------------------------------------------------ */

/* Dual-color heading block style: italicize the words to highlight —
   they render upright in the primary color. */
.is-style-dual-color em {
	font-style: normal;
	color: var(--wp--preset--color--primary);
}
.has-dark-bg-background-color .is-style-dual-color em {
	color: var(--wp--preset--color--secondary);
}

/* Stats pattern: lining, columnar digits */
.stat-number {
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

/* Dark section block style (core/group): one class instead of hand-setting
   dark-bg + white on the group and every child. :where() keeps specificity
   at zero, so explicit has-*-color choices and preset classes still win. */
.is-style-section-dark {
	background-color: var(--wp--preset--color--dark-bg);
	color: var(--wp--preset--color--white);
}
.is-style-section-dark :where(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}
.is-style-section-dark :where(p, li, cite, figcaption) {
	color: inherit;
}
.is-style-section-dark :where(a:not(.wp-block-button__link)) {
	color: var(--wp--preset--color--secondary);
}

/* Outline buttons on dark grounds: they inherit dark text and vanish.
   Flip to white wherever the section is dark. */
.has-dark-bg-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.is-style-section-dark .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--white);
	border-color: currentColor;
}

/* Details/FAQ: replace the browser disclosure triangle with a +/− marker */
.wp-block-details > summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding-right: 1.75rem;
}
.wp-block-details > summary::marker,
.wp-block-details > summary::-webkit-details-marker {
	content: "";
	display: none;
}
.wp-block-details > summary::after {
	content: "+";
	position: absolute;
	right: 0.25rem;
	top: 50%;
	transform: translateY(-50%);
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}
.wp-block-details[open] > summary::after {
	content: "\2212";
}
.has-dark-bg-background-color .wp-block-details > summary::after,
.is-style-section-dark .wp-block-details > summary::after {
	color: var(--wp--preset--color--secondary);
}

/* Logo strip: mute logos until hover */
.logo-strip img {
	filter: grayscale(1);
	opacity: 0.6;
	transition: filter 0.2s ease, opacity 0.2s ease;
}
.logo-strip img:hover {
	filter: none;
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.logo-strip img { transition: none; }
}

/* ---------------------------------------------------------------------------
 * Legacy content guard
 *
 * Pages exported from Elementor carry inline icon SVGs with no width
 * attribute; without Elementor's CSS they expand to full container width.
 * Cap unsized SVGs in post content at icon size until those pages are
 * rebuilt as blocks.
 * ------------------------------------------------------------------------ */

.wp-block-post-content svg:not([width]) {
	max-width: 2em;
	max-height: 2em;
}

/* ---------------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------------ */

.site-header {
	z-index: 100;
	border-bottom-style: solid;
}

/* ---------------------------------------------------------------------------
 * Flyout menu
 *
 * The core Navigation block's mobile overlay, restyled as a right-hand
 * slide-in panel (Astra-style flyout).
 * ------------------------------------------------------------------------ */

.wp-block-navigation__responsive-container.is-menu-open {
	left: auto;
	right: 0;
	width: min(22rem, 90vw);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--large);
	padding: 2rem;
	animation: holler-flyout-in 0.25s ease both;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	padding-top: 3.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--title-4);
}

@keyframes holler-flyout-in {
	from { transform: translateX(100%); }
	to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation__responsive-container.is-menu-open {
		animation: none;
	}
}