/*!
 * BrandForge child theme overrides.
 *
 * How the cascade works here:
 *
 * WordPress emits a `global-styles-inline-css` block in wp_head that sets
 * body background, heading colors, link colors and button styles. Because
 * that block lands in the DOM AFTER every stylesheet we enqueue, it would
 * normally win the "later-wins" tiebreaker — even with !important at equal
 * specificity.
 *
 * inc/enqueue.php wraps WP's compiled global stylesheet in a cascade layer
 * (`@layer wp-defaults { ... }`) via the `wp_get_global_stylesheet` filter.
 * The CSS Cascade 5 spec says any un-layered rule beats any layered rule,
 * regardless of DOM order or !important flags.
 *
 * So this file is plain, un-layered CSS. It wins because it's outside the
 * layer, not because of specificity tricks.
 *
 * Contains:
 *   1. theme.json neutralisation — WP forces black headings and blue
 *      underlined links on all <a>/<h1-6> elements; BrandForge uses
 *      Tailwind utilities for those instead.
 *   2. Dark-surface contrast fixes — when the original theme's `dark:`
 *      variants were stripped, some elements on dark backgrounds lost
 *      their light-color variant and ended up dark-on-dark. Rather than
 *      touch every template, patch the known dark surfaces here.
 *   3. Skip-link visible focus state.
 *
 * Keep this file curated. Don't use it for one-off template tweaks.
 */

/* ============================================================
 * 1. Neutralise WordPress theme.json defaults.
 *
 * WordPress's global-styles-inline-css emits:
 *   - body { background: white; color: secondary; font: ...; }
 *   - h1..h6 { color: dark; font-weight: 700; font-size: 2.5rem etc. }
 *   - a:where(...) { color: primary; text-decoration: underline; }
 *
 * Those rules wreck BrandForge because:
 *   - Tailwind utility classes set colors/sizes via their own rules
 *     and the WP defaults fight back.
 *   - On dark-bg sections (.bg-secondary, .bg-background-8), `color: dark`
 *     renders black-on-black.
 *
 * We can't just use `color: inherit` — on dark sections inherit still
 * falls back to body's `color: secondary` which is black. We have to
 * explicitly match Tailwind's expected behavior: let utility classes
 * (text-white, text-primary-50, etc.) set colors, default everything
 * else to a sane dark-on-light that still works on white sections.
 * ============================================================ */

/* Neutralise WP's theme.json-derived body background only. We kill the
 * whole global-styles-inline-css block in inc/enqueue.php via
 * brandforge_kill_global_styles(), so WP no longer forces font-family,
 * font-size, line-height, h1..h6 sizing, or link underlines onto us.
 * That means this file must NOT redeclare those properties — any
 * un-layered rule here would clobber Tailwind's `@layer base` and
 * `@layer utilities` heading/text utilities and break the type scale.
 */
body {
	background-color: transparent;
}

/* Ensure dark surfaces force light text on everything inside that isn't
 * already explicitly colored by a Tailwind utility. This catches the
 * stats section (.bg-secondary), the footer (.bg-secondary), and any
 * other section using a known dark background token. */
.bg-secondary,
.bg-secondary *:not([class*="text-primary"]):not([class*="text-accent"]):not([class*="text-white"]):not([class*="text-black"]):not([class*="text-secondary"]):not([class*="btn-"]),
.bg-background-5,
.bg-background-5 *:not([class*="text-"]):not([class*="btn-"]),
.bg-background-6,
.bg-background-6 *:not([class*="text-"]):not([class*="btn-"]),
.bg-background-7,
.bg-background-7 *:not([class*="text-"]):not([class*="btn-"]),
.bg-background-8,
.bg-background-8 *:not([class*="text-"]):not([class*="btn-"]),
.bg-background-9,
.bg-background-9 *:not([class*="text-"]):not([class*="btn-"]),
.footer,
.footer *:not([class*="btn-"]) {
	color: #ffffff;
}

/* Inside dark sections, paragraphs and captions can be dimmed slightly
 * for hierarchy — use 70% white. */
.bg-secondary p,
.bg-background-8 p,
.footer p {
	color: rgba(255, 255, 255, 0.75);
}

/*
 * SITE-WIDE: no underlined links.
 *
 * WordPress global-styles emits `a:where(:not(.wp-element-button)) {
 * text-decoration: underline }` which underlines EVERY link on the site
 * unless we explicitly opt out. Matt really hates underlined text, so we
 * strip it globally — but we MUST NOT touch buttons.
 *
 * Buttons (.btn, .btn-*, .wp-element-button) have their own text colours
 * defined by Tailwind (white on dark, dark on light) and using
 * `color: inherit` on an anchor that has `btn-secondary` would force the
 * button text to inherit from its parent heading section's colour, ending
 * up as near-black text on the near-black button surface.
 *
 * So the rule below:
 *   1. Kills text-decoration site-wide (safe, buttons don't want underlines)
 *   2. Forces color: inherit ONLY on anchors that are NOT buttons, so
 *      .btn classes can keep their own colour rules
 */

/* Kill the underline on every anchor. Buttons don't care because they
 * already use text-decoration: none. This is the one declaration we
 * DO want to apply to .btn anchors. */
a,
a:where(:not(.wp-element-button)),
a:hover,
a:where(:not(.wp-element-button)):hover,
a:focus,
a:where(:not(.wp-element-button)):focus {
	text-decoration: none !important;
}

/* Force color:inherit only on non-button anchors. `.btn` wraps itself in
 * a `:not(.btn)` here so `.btn-primary`, `.btn-secondary` etc. keep the
 * text colour their own class defines. */
a:not(.btn):not([class*="btn-"]):not(.wp-element-button),
a:not(.btn):not([class*="btn-"]):not(.wp-element-button):hover,
a:not(.btn):not([class*="btn-"]):not(.wp-element-button):focus {
	color: inherit;
}

/* Button colors. The compiled main.css defines .btn-* rules inside a
 * Tailwind @layer, so un-layered rules from WP global-styles (like
 * `a:where(:not(.wp-element-button)) { color: primary }`) beat them.
 * We re-declare each button variant here at the top level so they win
 * the cascade regardless of source order.
 *
 * IMPORTANT: colour is set ONLY on the button element itself, never on
 * the `> span` child. The `.btn` has `transition: all 0.5s ease-in-out`
 * so its `color` transitions smoothly; the `<span>` inherits that
 * transitioned value. Setting `color !important` directly on the span
 * would bypass the parent's transition and cause an instant flash. */
.btn-secondary,
a.btn-secondary {
	background-color: #1a1a1c !important;
	color: #ffffff !important;
}

.btn-primary,
a.btn-primary {
	background-color: #00a4de !important;
	color: #ffffff !important;
}

.btn-white,
a.btn-white {
	background-color: #ffffff !important;
	color: #1a1a1c !important;
}

.btn-accent,
a.btn-accent {
	background-color: #ffffff !important;
	color: #1a1a1c !important;
}

/* Hover variants — the original templates use utilities like
 * `hover:btn-primary` which swap the button appearance on hover. */
.btn-secondary:hover,
a.btn-secondary:hover,
.hover\:btn-primary:hover {
	background-color: #00a4de !important;
	color: #ffffff !important;
}

.btn-primary:hover,
a.btn-primary:hover,
.hover\:btn-white:hover {
	background-color: #ffffff !important;
	color: #1a1a1c !important;
}

.hover\:btn-secondary:hover {
	background-color: #1a1a1c !important;
	color: #ffffff !important;
}

/* Opt-in underline utilities — Tailwind users can still add `underline`
 * or `hover:underline` to a specific element when the design calls for it. */
a.underline,
a .underline,
a.hover\:underline:hover {
	text-decoration: underline !important;
}

/* ============================================================
 * 2. Dark-surface contrast fixes — footer + CTA panels.
 *    Curated list: each selector targets a specific template
 *    section that sits on a dark background. When adding a new
 *    entry, add a comment pointing to the template file/line.
 * ============================================================ */

/* footer.php — entire footer wrapper uses bg-secondary (dark). */
.footer h2,
.footer h3,
.footer h4,
.footer p,
.footer li,
.footer a:not(.btn),
.footer .footer-link,
.footer .text-primary-50 {
	color: #ffffff;
}

.footer p.text-accent\/60,
.footer .text-accent\/60,
.footer .text-accent\/50,
.footer .text-accent\/30,
.footer .text-tagline-3 {
	color: rgba(255, 255, 255, 0.65);
}

.footer .footer-link {
	color: rgba(255, 255, 255, 0.6);
	transition: color 150ms ease;
}

.footer .footer-link:hover {
	color: #ffffff;
}

/* Zoho signup form inputs on dark CTA panel. */
.footer input[type="text"],
.footer input[type="email"] {
	color: #ffffff;
	background-color: rgba(255, 255, 255, 0.05);
}

.footer input[type="text"]::placeholder,
.footer input[type="email"]::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

/* Legal menu bottom bar. */
.footer nav[aria-label="Legal"] a {
	color: #ffffff;
}
.footer nav[aria-label="Legal"] a:hover {
	color: rgba(255, 255, 255, 0.8);
}

/* ============================================================
 * 3. Mega menu reveal on hover / keyboard focus.
 *
 *    main.css ships `.mega-menu, .dropdown-menu { opacity: 0 }`
 *    at (0,1,0) specificity, which wins against Tailwind's
 *    `opacity-100` utility by DOM order (it appears later in
 *    main.css than the Tailwind utilities). That meant the
 *    dropdowns never became visible even when menu-init.js
 *    correctly toggled the opacity classes.
 *
 *    We target the same selector with higher specificity so
 *    our reveal state actually sticks. The selectors tie
 *    reveal visibility to two triggers:
 *      1. `.nav-item:hover .dropdown-menu` — pointer hover
 *      2. `.nav-item:focus-within .dropdown-menu` — keyboard
 *    Both use classic CSS hover/focus so we don't depend on
 *    menu-init.js alone to open the menu.
 * ============================================================ */
/*
 * main.css ships `.mega-menu, .dropdown-menu { visibility: hidden;
 * opacity: 0; transform: translateY(10px); }` with (0,1,0) specificity.
 * We need to override ALL THREE properties on reveal — handling only
 * opacity leaves visibility:hidden which still hides the menu.
 *
 * Three trigger selectors:
 *   1. `.nav-item:hover .dropdown-menu`           — pointer hover
 *   2. `.nav-item:focus-within .dropdown-menu`    — keyboard focus
 *   3. `.nav-item .dropdown-menu.opacity-100`     — JS-driven state
 *      (menu-init.js toggles opacity-100 class on click/keyboard)
 */
.nav-item .dropdown-menu {
	transition:
		opacity 300ms ease,
		visibility 300ms ease,
		transform 300ms ease;
}

.nav-item:hover .dropdown-menu,
.nav-item:focus-within .dropdown-menu,
.nav-item .dropdown-menu.opacity-100,
.nav-item .dropdown-menu.pointer-events-auto {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	transform: translateY(0) !important;
}

/* The invisible bridge strip between trigger and menu — keeps the menu
 * from closing when the cursor is in the vertical gap. */
.nav-item:hover .dropdown-menu-bridge,
.nav-item:focus-within .dropdown-menu-bridge {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Rotate the arrow indicator in the trigger while the menu is open. */
.nav-item:hover .nav-arrow,
.nav-item:focus-within .nav-arrow {
	transform: rotate(180deg);
}

/* ============================================================
 * 4. Skip link visible focus.
 * ============================================================ */
.skip-link.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.skip-link:focus,
.skip-link:focus-visible {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 10000;
	width: auto;
	height: auto;
	padding: 0.75rem 1.25rem;
	margin: 0;
	clip: auto;
	overflow: visible;
	background: #0066cc;
	color: #ffffff;
	font-weight: 600;
	text-decoration: none;
	border-radius: 9999px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* ============================================================
 * 5. Contact Form 7 — pill-input look to match BrandForge design.
 *
 * Scoped with .bf-cf7 (on the wrapper div in page-contact.php) so
 * these overrides don't leak into any other CF7 form on the site.
 * The Zoho bridging is handled by the "CF7 to Zoho CRM" plugin,
 * not in-theme.
 * ============================================================ */
.bf-cf7 .wpcf7-form p {
	margin-bottom: 1.25rem;
}

.bf-cf7 .wpcf7-form label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: #1a1a1c;
	margin-bottom: 0.5rem;
}

.bf-cf7 .wpcf7-form-control-wrap {
	display: block;
}

.bf-cf7 .wpcf7-text,
.bf-cf7 .wpcf7-email,
.bf-cf7 .wpcf7-tel,
.bf-cf7 .wpcf7-number,
.bf-cf7 .wpcf7-url,
.bf-cf7 .wpcf7-date,
.bf-cf7 .wpcf7-select {
	width: 100%;
	height: 48px;
	padding: 0 1.125rem;
	border-radius: 9999px;
	border: 1px solid #dfe4eb;
	background-color: #fcfcfd;
	font-size: 0.875rem;
	color: #1a1a1c;
	font-family: inherit;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.bf-cf7 .wpcf7-textarea {
	width: 100%;
	min-height: 140px;
	padding: 0.875rem 1.125rem;
	border-radius: 1rem;
	border: 1px solid #dfe4eb;
	background-color: #fcfcfd;
	font-size: 0.875rem;
	color: #1a1a1c;
	font-family: inherit;
	resize: vertical;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.bf-cf7 .wpcf7-text::placeholder,
.bf-cf7 .wpcf7-email::placeholder,
.bf-cf7 .wpcf7-tel::placeholder,
.bf-cf7 .wpcf7-textarea::placeholder {
	color: rgba(26, 26, 28, 0.5);
}

.bf-cf7 .wpcf7-text:focus,
.bf-cf7 .wpcf7-email:focus,
.bf-cf7 .wpcf7-tel:focus,
.bf-cf7 .wpcf7-number:focus,
.bf-cf7 .wpcf7-url:focus,
.bf-cf7 .wpcf7-date:focus,
.bf-cf7 .wpcf7-select:focus,
.bf-cf7 .wpcf7-textarea:focus {
	outline: 2px solid transparent;
	border-color: #00A4DE;
	box-shadow: 0 0 0 3px rgba(0, 164, 222, 0.12);
}

/* Acceptance / checkbox controls */
.bf-cf7 .wpcf7-acceptance {
	display: block;
	margin: 0.5rem 0;
}

.bf-cf7 .wpcf7-list-item {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin: 0;
}

.bf-cf7 .wpcf7-list-item label {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-weight: 400;
	color: rgba(26, 26, 28, 0.65);
	font-size: 0.8125rem;
	margin: 0;
}

.bf-cf7 .wpcf7-list-item label input[type="checkbox"] {
	margin-top: 0.2em;
	flex-shrink: 0;
}

.bf-cf7 .wpcf7-list-item input[type="checkbox"] {
	margin-top: 0.2rem;
	accent-color: #00A4DE;
}

/* Submit button — brand pill */
.bf-cf7 .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 2rem;
	border-radius: 9999px;
	background-color: #00A4DE;
	color: #ffffff;
	font-weight: 600;
	font-size: 0.9375rem;
	border: none;
	cursor: pointer;
	transition: background-color 150ms ease, transform 150ms ease;
	font-family: inherit;
}

.bf-cf7 .wpcf7-submit:hover {
	background-color: #1a1a1c;
}

.bf-cf7 .wpcf7-submit:focus-visible {
	outline: 2px solid #00A4DE;
	outline-offset: 2px;
}

/* Spinner + CF7 feedback panels */
.bf-cf7 .wpcf7-spinner {
	margin: 0 0 0 0.625rem;
}

.bf-cf7 .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	font-size: 0.875rem;
	border-width: 1px;
}

.bf-cf7 .wpcf7 form.sent .wpcf7-response-output {
	background-color: rgba(0, 185, 0, 0.08);
	border-color: rgba(0, 185, 0, 0.3);
	color: #0a5a0a;
}

.bf-cf7 .wpcf7 form.invalid .wpcf7-response-output,
.bf-cf7 .wpcf7 form.unaccepted .wpcf7-response-output {
	background-color: rgba(239, 68, 68, 0.06);
	border-color: rgba(239, 68, 68, 0.35);
	color: #991b1b;
}

.bf-cf7 .wpcf7-not-valid-tip {
	color: #991b1b;
	font-size: 0.8125rem;
	margin-top: 0.375rem;
}

.bf-cf7 .wpcf7-not-valid {
	border-color: #ef4444 !important;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Two-column row helper — add class="bf-cf7-row" on a <p> containing two
 * form-controls in your CF7 template to get a side-by-side layout on ≥640px. */
@media (min-width: 640px) {
	.bf-cf7 p.bf-cf7-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1rem;
	}
}

/* ============================================================
 * 6. 352 Consent banner — BrandForge brand colours.
 *
 * The plugin ships with #0073aa (default WP blue). These overrides
 * bring it onto the BrandForge primary palette + pill button shape
 * + Inter font so it sits inside the design system.
 *
 * Selectors target `.tc-consent-banner` which is the banner wrapper
 * rendered by includes/class-banner.php. The plugin's own CSS
 * already ships variables; where possible we set the CSS custom
 * properties at :root so the plugin keeps control of layout and
 * we only override colours.
 * ============================================================ */
:root {
	--tcc-primary: #00A4DE;
	--tcc-primary-hover: #1a1a1c;
	--tcc-secondary: #1a1a1c;
	--tcc-secondary-hover: rgba(26, 26, 28, 0.85);
	--tcc-bg: #ffffff;
	--tcc-text: #1a1a1c;
	--tcc-border: #dfe4eb;
	--tcc-focus: #00A4DE;
	--tcc-radius: 1rem;
	--tcc-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}

.tc-consent-banner,
.tc-consent-banner * {
	font-family: "Inter", system-ui, -apple-system, sans-serif !important;
}

.tc-consent-banner {
	font-size: 14px;
	background-color: #ffffff !important;
	color: #1a1a1c !important;
}

.tc-consent-banner__container {
	padding: 1.25rem 1.5rem;
}

.tc-consent-banner--bottom-left,
.tc-consent-banner--bottom-right {
	box-shadow: var(--tcc-shadow);
}

.tc-consent-banner__title {
	font-family: "Poppins", "Inter", system-ui, sans-serif !important;
	font-weight: 600;
	font-size: 1.0625rem;
	color: #1a1a1c !important;
}

.tc-consent-banner__description {
	color: rgba(26, 26, 28, 0.7) !important;
	line-height: 1.55;
}

.tc-consent-btn {
	border-radius: 9999px !important;
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	font-weight: 600;
	font-size: 0.875rem;
	min-height: 44px;
	padding: 0.625rem 1.5rem;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.tc-consent-btn:hover {
	transform: translateY(-1px);
}

.tc-consent-btn--primary {
	background-color: #00A4DE !important;
	border-color: #00A4DE !important;
	color: #ffffff !important;
}

.tc-consent-btn--primary:hover {
	background-color: #1a1a1c !important;
	border-color: #1a1a1c !important;
}

.tc-consent-btn--secondary {
	background-color: #ffffff !important;
	border-color: #1a1a1c !important;
	color: #1a1a1c !important;
}

.tc-consent-btn--secondary:hover {
	background-color: #1a1a1c !important;
	color: #ffffff !important;
}

.tc-consent-btn--tertiary {
	background-color: transparent !important;
	border-color: #dfe4eb !important;
	color: rgba(26, 26, 28, 0.7) !important;
}

.tc-consent-btn--tertiary:hover {
	background-color: #f4f5f8 !important;
	color: #1a1a1c !important;
}

.tc-consent-preferences {
	border-top-color: #dfe4eb;
}

.tc-consent-category {
	background-color: #f9fafb;
	border-radius: 0.875rem;
	padding: 1rem 1.125rem;
}

.tc-consent-category__name {
	font-weight: 600;
	color: #1a1a1c !important;
}

.tc-consent-category__always {
	color: rgba(26, 26, 28, 0.55) !important;
	font-size: 0.75rem;
	font-weight: 500;
}

.tc-consent-category__description {
	color: rgba(26, 26, 28, 0.65) !important;
	font-size: 0.8125rem;
	line-height: 1.55;
	margin-top: 0.375rem;
}

.tc-consent-toggle__input:checked + .tc-consent-toggle__slider {
	background-color: #00A4DE !important;
}

.tc-consent-toggle__input:focus-visible + .tc-consent-toggle__slider {
	box-shadow: 0 0 0 3px rgba(0, 164, 222, 0.35);
}

/* Footer "Cookie Settings" link — keep it subtle + on-brand */
.tc-consent-settings-link {
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	font-size: 12px;
	background-color: #ffffff;
	color: rgba(26, 26, 28, 0.7);
	border: 1px solid #dfe4eb;
	border-radius: 9999px;
	padding: 0.5rem 0.875rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.tc-consent-settings-link:hover {
	background-color: #1a1a1c;
	color: #ffffff;
	border-color: #1a1a1c;
}

.tc-consent-settings-link:focus-visible {
	outline: 2px solid #00A4DE;
	outline-offset: 2px;
}

/* Hide Zoho SalesIQ's built-in cookie consent banner.
 * 352-consent handles consent site-wide; Zoho's duplicate
 * banner is suppressed via cookieconsent:false in the widget
 * config AND hidden here as a CSS fallback. */
.zsiq_custommain .zsiq_cnt .zsiq_cookiemain,
.zsiq-cookiebar,
[class*="zsiq_cookie"],
.siqcookiebanner {
	display: none !important;
}

/* ============================================================
 * 7. Icon font decorative opacity.
 *
 * The Nexsas ns-shape icon font is purely decorative. A slight
 * opacity reduction keeps them as accents rather than content.
 *
 * NOTE: do NOT set font-size here. This rule is unlayered and
 * would beat every Tailwind `text-[Xpx]` class (which lives
 * inside @layer utilities). Let each template set its own size
 * via inline style or Tailwind class.
 * ============================================================ */
[class^="ns-shape-"],
[class*=" ns-shape-"] {
	opacity: 0.5;
}

/* ============================================================
 * 8. Reduced motion — respect prefers-reduced-motion.
 *
 * Disables transitions and animations from this file for users
 * who have opted into reduced motion. main.css and main.js
 * already handle their own reduced-motion checks; this covers
 * the un-layered overrides declared above.
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.nav-item .dropdown-menu {
		transition: none;
	}

	.footer .footer-link,
	.bf-cf7 .wpcf7-text,
	.bf-cf7 .wpcf7-email,
	.bf-cf7 .wpcf7-tel,
	.bf-cf7 .wpcf7-number,
	.bf-cf7 .wpcf7-url,
	.bf-cf7 .wpcf7-date,
	.bf-cf7 .wpcf7-select,
	.bf-cf7 .wpcf7-textarea,
	.bf-cf7 .wpcf7-submit,
	.tc-consent-btn,
	.tc-consent-settings-link {
		transition: none;
	}

	.tc-consent-btn:hover {
		transform: none;
	}
}

/* ============================================================
 * 6. Contact Form 7 — hide the response box until it fires.
 *    CF7 renders .wpcf7-response-output with a visible border
 *    before any submission, leaving an empty bordered rectangle
 *    at the bottom of every form.
 * ============================================================ */
.wpcf7-response-output {
	display: none !important;
}

.wpcf7-response-output[role="alert"],
.wpcf7-form.sent .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output {
	display: block !important;
	border-radius: 10px;
	font-size: 14px;
}