/* FoxBox-IT-Theme — Main Stylesheet
   Orange (#ff7a1a) / Black (#111111) / Cream (#f7f1e8)
   ─────────────────────────────────────────────────────── */

/* ── Custom Properties ──────────────────────────────────── */
:root {
	--foxbox-orange:   #ff7a1a;
	--foxbox-black:    #111111;
	--foxbox-charcoal: #1e1e1e;
	--foxbox-cream:    #f7f1e8;
	--foxbox-white:    #ffffff;
	--foxbox-grey:     #777777;
	--foxbox-border:   #e5e5e5;
	--foxbox-shadow:   0 2px 12px rgba(0,0,0,.10);
	--foxbox-shadow-lg:0 8px 32px rgba(0,0,0,.14);
	--foxbox-radius:   6px;
	--foxbox-radius-lg:12px;
	--foxbox-transition: 200ms ease;
}

/* ── Base ────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--foxbox-cream);
	color: var(--foxbox-black);
	font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img, video, svg {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--foxbox-orange);
	transition: color var(--foxbox-transition), opacity var(--foxbox-transition);
}
a:hover { opacity: 0.85; }
a:focus-visible {
	outline: 2px solid var(--foxbox-orange);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ── Typography ──────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	font-weight: 700;
	line-height: 1.15;
	color: var(--foxbox-black);
	margin-top: 0;
	letter-spacing: -0.01em;
}

/* Allow WordPress color classes to override the heading color above */
h1.has-text-color, h2.has-text-color, h3.has-text-color,
h4.has-text-color, h5.has-text-color, h6.has-text-color {
	color: inherit;
}

p { margin-top: 0; }

ul, ol { padding-left: 1.5em; }

blockquote {
	border-left: 4px solid var(--foxbox-orange);
	margin-left: 0;
	padding-left: 1.5rem;
	font-style: italic;
	color: #444;
}

code, kbd, samp, pre {
	font-family: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
	font-size: 0.9em;
}

/* ── Header ──────────────────────────────────────────────── */
.foxbox-site-header {
	position: sticky;
	top: 0;
	z-index: 9999;
	background-color: var(--foxbox-nav-bg) !important;
	box-shadow: 0 2px 8px rgba(0,0,0,.4);
}

.foxbox-site-header .wp-site-blocks,
.foxbox-site-header .wp-block-group__inner-container {
	overflow: visible !important;
}

/* Content-width overrides are now handled per-page via wp_head in seo.php */

/* Strip WordPress global margin-block-start from every direct child of wp-site-blocks
   (WP global styles inject this on all children; the header causes a visible gap line) */
.wp-site-blocks > * {
	margin-block-start: 0 !important;
}

/* Also remove any bottom border/padding that can produce the same visual line */
.wp-block-template-part[data-slug="header"],
header.wp-block-template-part,
.foxbox-site-header {
	border-bottom: none !important;
	margin-bottom: 0 !important;
}

/* Suppress inline padding on foxbox-header-inner if WP injects it */
.foxbox-header-inner {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	gap: 1.5rem;
}

.foxbox-site-header .wp-block-site-title a,
.foxbox-site-header .wp-block-site-title {
	color: #ffffff !important;
	text-decoration: none;
}

/* Navigation — colours driven by CSS variables set via wp_head */
:root {
	--foxbox-nav-bg:              #111111;
	--foxbox-nav-link:            #e0e0e0;
	--foxbox-nav-hover:           #ff7a1a;
	--foxbox-nav-dropdown-bg:     #1a1a1a;
	--foxbox-nav-dropdown-link:   #e0e0e0;
	--foxbox-nav-current-style:   color;    /* sentinel — overridden in JS-less envs */
}

.foxbox-site-header {
	background-color: var(--foxbox-nav-bg) !important;
}

.foxbox-primary-nav .wp-block-navigation__responsive-container-content {
	gap: 2rem;
}

.foxbox-primary-nav a {
	color: var(--foxbox-nav-link) !important;
	text-decoration: none;
	font-weight: 500;
	font-size: 0.9375rem;
	transition: color var(--foxbox-transition), background-color var(--foxbox-transition);
}

/* ── Hover ── */
.foxbox-primary-nav a:hover {
	color: var(--foxbox-nav-hover) !important;
}

/* ── Current page — colour mode (default) ── */
.foxbox-primary-nav .current-menu-item > a,
.foxbox-primary-nav .current-menu-ancestor > a,
.foxbox-primary-nav .current-menu-parent > a,
.foxbox-primary-nav .current_page_item > a,
.foxbox-primary-nav .current_page_ancestor > a,
.foxbox-primary-nav li.wp-block-navigation-item--active > a {
	color: var(--foxbox-nav-hover) !important;
}

/* ── Current page — underline mode ── */
.foxbox-nav-current-underline .foxbox-primary-nav .current-menu-item > a,
.foxbox-nav-current-underline .foxbox-primary-nav .current-menu-ancestor > a,
.foxbox-nav-current-underline .foxbox-primary-nav .current-menu-parent > a,
.foxbox-nav-current-underline .foxbox-primary-nav .current_page_item > a,
.foxbox-nav-current-underline .foxbox-primary-nav .current_page_ancestor > a,
.foxbox-nav-current-underline .foxbox-primary-nav li.wp-block-navigation-item--active > a {
	color: var(--foxbox-nav-hover) !important;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* ── Current page — pill mode ── */
.foxbox-nav-current-pill .foxbox-primary-nav .current-menu-item > a,
.foxbox-nav-current-pill .foxbox-primary-nav .current-menu-ancestor > a,
.foxbox-nav-current-pill .foxbox-primary-nav .current-menu-parent > a,
.foxbox-nav-current-pill .foxbox-primary-nav .current_page_item > a,
.foxbox-nav-current-pill .foxbox-primary-nav .current_page_ancestor > a,
.foxbox-nav-current-pill .foxbox-primary-nav li.wp-block-navigation-item--active > a {
	color: var(--foxbox-nav-bg) !important;
	background-color: var(--foxbox-nav-hover) !important;
	border-radius: 4px;
	padding-left: 0.6rem !important;
	padding-right: 0.6rem !important;
}

/* ── Dropdown submenu ── */
/* Use high specificity + !important to beat WP Global Styles */
.foxbox-primary-nav .wp-block-navigation__submenu-container,
.wp-block-navigation .foxbox-primary-nav .wp-block-navigation__submenu-container {
	background-color: var(--foxbox-nav-dropdown-bg) !important;
	border: 1px solid rgba(255,255,255,.08) !important;
	border-top: 2px solid var(--foxbox-nav-hover) !important;
	min-width: 200px;
	box-shadow: 0 6px 20px rgba(0,0,0,.4);
}

.foxbox-primary-nav .wp-block-navigation__submenu-container a {
	color: var(--foxbox-nav-dropdown-link) !important;
	padding: 0.6rem 1.25rem;
}

.foxbox-primary-nav .wp-block-navigation__submenu-container a:hover {
	color: var(--foxbox-nav-hover) !important;
	background-color: rgba(255,255,255,.06) !important;
}

/* Open/Close buttons — nav uses "hasIcon":false so they read MENU / CLOSE
   as plain words. Style them as obvious buttons. */
.foxbox-site-header .wp-block-navigation__responsive-container-open,
.foxbox-site-header .wp-block-navigation__responsive-container-close {
	font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #ffffff;
	background: transparent;
	border: 2px solid var(--foxbox-orange);
	border-radius: var(--foxbox-radius);
	padding: 0.4rem 1rem;
	line-height: 1.2;
	cursor: pointer;
}

.foxbox-site-header .wp-block-navigation__responsive-container-open:hover,
.foxbox-site-header .wp-block-navigation__responsive-container-close:hover {
	background: var(--foxbox-orange);
	color: #ffffff;
}

/* Mobile nav overlay */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--foxbox-nav-bg) !important;
	padding: 1.5rem 1.25rem !important;
}

/* Nav items in overlay — larger tap targets, readable text */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 0.75rem 0 !important;
	font-size: 1.125rem !important;
	font-weight: 600 !important;
	border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Hide anything inside the nav overlay that isn't a nav item
   (e.g. address blocks or extra groups added by the editor) */
.wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__responsive-container-content > .wp-block-group:not(.wp-block-navigation__submenu-container),
.wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__responsive-container-content > .wp-block-paragraph,
.wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__responsive-container-content > .wp-block-buttons {
	display: none !important;
}

/* Scrolled state (added by navigation.js) */
.foxbox-site-header.is-scrolled {
	box-shadow: 0 2px 20px rgba(0,0,0,.6);
}

/* ── Header layout modes ─────────────────────────────────────────────────────── */

/* Full width (default) — background and content span 100% */
.foxbox-header-full .foxbox-site-header {
	width: 100%;
	max-width: 100%;
	border-radius: 0;
}

/* Boxed — header box is constrained, floats centered with page bg visible on sides */
.foxbox-header-boxed .foxbox-site-header {
	border-radius: 0 0 10px 10px;
	box-shadow: 0 4px 24px rgba(0,0,0,.5);
}

/* Custom — width comes from inline style set by foxbox_header_layout_css() */
.foxbox-header-custom .foxbox-site-header {
	border-radius: 0 0 10px 10px;
	box-shadow: 0 4px 24px rgba(0,0,0,.5);
}

/* Call Now button */
.foxbox-btn-call .wp-block-button__link {
	white-space: nowrap;
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: var(--foxbox-radius) !important;
}

/* ── Hero ────────────────────────────────────────────────── */
.foxbox-hero {
	position: relative;
	overflow: hidden;
}

.foxbox-hero .wp-block-cover__inner-container {
	text-align: left;
}

/* ── Buttons ─────────────────────────────────────────────── */
.wp-block-button__link,
.wp-element-button {
	border-radius: var(--foxbox-radius) !important;
	font-family: 'Barlow Condensed', sans-serif !important;
	font-weight: 700 !important;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	transition: filter var(--foxbox-transition), box-shadow var(--foxbox-transition), transform var(--foxbox-transition);
	cursor: pointer;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
	filter: brightness(1.1);
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(255,122,26,.35);
}

.is-style-outline .wp-block-button__link {
	border: 2px solid currentColor !important;
	background: transparent !important;
}

.is-style-outline .wp-block-button__link:hover {
	background: var(--foxbox-orange) !important;
	color: #fff !important;
	border-color: var(--foxbox-orange) !important;
}

/* ── Cards (service / testimonial) ──────────────────────── */
.foxbox-service-card {
	transition: transform var(--foxbox-transition), box-shadow var(--foxbox-transition);
	box-shadow: var(--foxbox-shadow);
}

.foxbox-service-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--foxbox-shadow-lg);
}

.foxbox-testimonial-card {
	box-shadow: var(--foxbox-shadow);
}

/* ── Steps ───────────────────────────────────────────────── */
.foxbox-step {
	border-top: 2px solid #333;
}

/* ── Service sidebar ─────────────────────────────────────── */
.foxbox-service-sidebar {
	position: sticky;
	top: 80px;
}

/* ── Footer ──────────────────────────────────────────────── */
.foxbox-footer-list {
	list-style: none !important;
	padding-left: 0 !important;
	margin: 0;
}

.foxbox-footer-list li {
	margin-bottom: 0.5rem;
}

.foxbox-footer-list a:hover {
	color: var(--foxbox-orange) !important;
}

/* ── Utility ─────────────────────────────────────────────── */
.screen-reader-text {
	border: 0;
	clip: rect(1px,1px,1px,1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}

.screen-reader-text:focus {
	background: var(--foxbox-cream);
	clip: auto;
	clip-path: none;
	color: var(--foxbox-black);
	display: block;
	font-size: 1rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 1rem 1.5rem;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* ── WordPress Core Overrides ────────────────────────────── */
.wp-block-separator.is-style-wide {
	border-color: var(--foxbox-border);
}

.wp-block-pullquote {
	border-color: var(--foxbox-orange);
}

.wp-block-quote {
	border-left-color: var(--foxbox-orange);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 782px) {
	/* !important needed — WP's generated layout CSS (display:flex on the
	   group) prints after this stylesheet and ties on specificity */
	.foxbox-header-cta { display: none !important; }

	/* Utility bar — phone has the bottom CTA bar for quick contact */
	.foxbox-utility-bar { display: none !important; }

	/* Tighten the header row so it fits on a phone screen */
	.foxbox-header-inner {
		flex-wrap: nowrap !important;
		padding-top:    0.5rem !important;
		padding-bottom: 0.5rem !important;
		gap: 0.5rem !important;
	}

	/* Hide any extra content blocks that may have been added to the
	   header in the Site Editor — paragraphs, standalone buttons,
	   extra groups that are NOT the logo+title group or the nav. */
	.foxbox-site-header .foxbox-header-inner > .wp-block-group:not(:first-child):not(.foxbox-primary-nav):not(.foxbox-header-cta) {
		display: none !important;
	}
	.foxbox-site-header .foxbox-header-inner > .wp-block-paragraph,
	.foxbox-site-header .foxbox-header-inner > .wp-block-columns,
	.foxbox-site-header .foxbox-header-inner > .wp-block-buttons {
		display: none !important;
	}

	/* Logo stays prominent on phones — capped only so the sticky
	   header doesn't swallow the screen */
	.foxbox-site-header .wp-block-site-logo img {
		max-width: 80px !important;
		height: auto !important;
	}

	/* Keep site title readable but not huge */
	.foxbox-site-header .wp-block-site-title {
		font-size: 1rem !important;
	}

	/* Ensure the hamburger button shows */
	.foxbox-site-header .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}

	/* Core only collapses the nav below 600px ("mobile" overlay mode).
	   Since the hamburger is forced visible up to 782px, hide the inline
	   menu in that range too so we never show both at once. */
	.foxbox-site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.foxbox-service-sidebar {
		position: static;
	}

	.foxbox-site-header {
		position: sticky;
		top: 0;
	}
}

@media (max-width: 600px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-direction: column !important;
	}

	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ── FoxBox Icon Card ────────────────────────────────────────── */
.foxbox-icon-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	box-sizing: border-box;
	height: 100%;
	transition: transform var(--foxbox-transition), box-shadow var(--foxbox-transition),
	            outline var(--foxbox-transition);
}

.foxbox-icon-card:hover {
	transform: translateY(-3px);
}

.foxbox-icon-card__icon-row {
	display: flex;
	/* justify-content set via inline style (flex-start / center / flex-end) */
}

.foxbox-icon-card__icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

.foxbox-icon-card__emoji {
	display: block;
	line-height: 1;
	/* keep emoji full-color, not tinted by the card's text color */
	color: initial !important;
	font-style: normal;
}

/* label shown inside the colored icon box */
.foxbox-icon-card__icon-wrap--has-label {
	flex-direction: column !important;
	height: auto !important;
	padding: 6px 8px;
	gap: 4px;
	box-sizing: border-box;
}

.foxbox-icon-card__icon-label {
	font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.foxbox-icon-card__text-icon {
	font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.foxbox-icon-card__icon-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	display: block;
}

.foxbox-icon-card__title {
	margin: 0 !important;
	font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif !important;
	font-size:      var(--fc-title-size,    1.375rem) !important;
	font-weight:    var(--fc-title-weight,  700)      !important;
	line-height:    var(--fc-title-lh,      1.2)      !important;
	letter-spacing: var(--fc-title-ls,      -0.01em);
	text-transform: var(--fc-title-transform, none);
}

.foxbox-icon-card__body {
	font-size:   var(--fc-body-size,   0.9375rem);
	font-weight: var(--fc-body-weight, normal);
	line-height: var(--fc-body-lh,     1.7);
	flex-grow: 1;
}

.foxbox-icon-card__body > *:first-child { margin-top: 0; }
.foxbox-icon-card__body > *:last-child  { margin-bottom: 0; }

.foxbox-icon-card--inline {
	flex-direction: row;
	align-items: flex-start;
}

.foxbox-icon-card--inline .foxbox-icon-card__content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.foxbox-icon-card--icon-only {
	align-items: center;
	justify-content: center;
}

/* Band header mode */
.foxbox-icon-card--band {
	overflow: hidden;
	gap: 0; /* band and body touch with no gap between them */
}

.foxbox-icon-card__band {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0;
	width: 100%;
	box-sizing: border-box;
}

.foxbox-icon-card__card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	box-sizing: border-box;
}

/* ── FoxBox Icon Card Button ─────────────────────────────────── */
.foxbox-icon-card__btn-wrap {
	display: flex;
	margin-top: auto; /* pin button to card bottom regardless of body text length */
}
.foxbox-icon-card__btn-wrap--left   { justify-content: flex-start; }
.foxbox-icon-card__btn-wrap--center { justify-content: center; }
.foxbox-icon-card__btn-wrap--right  { justify-content: flex-end; }

.foxbox-icon-card__btn {
	display: inline-block;
	padding: 0.55em 1.4em;
	border-radius: var(--foxbox-radius);
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.3;
	cursor: pointer;
	white-space: nowrap;
	transition: filter var(--foxbox-transition), transform var(--foxbox-transition),
	            box-shadow var(--foxbox-transition);
}
/* hover variants — JS adds the class, CSS handles the effect */
.foxbox-icon-card__btn--hover-brighten:hover {
	filter: brightness(1.15);
	transform: translateY(-1px);
	opacity: 1 !important;
}
.foxbox-icon-card__btn--hover-darken:hover {
	filter: brightness(0.85);
	opacity: 1 !important;
}
.foxbox-icon-card__btn--hover-lift:hover {
	transform: translateY(-4px);
	box-shadow: 0 6px 18px rgba(0,0,0,.22);
	opacity: 1 !important;
}
.foxbox-icon-card__btn--hover-scale:hover {
	transform: scale(1.06);
	opacity: 1 !important;
}
.foxbox-icon-card__btn--hover-none:hover {
	filter: none;
	transform: none;
	opacity: 1 !important;
}

/* ── Card hover effects ──────────────────────────────────────── */

/* Suppress the default lift for cards that have their own hover animation */
.foxbox-flip-wrap:hover > .foxbox-icon-card,
.foxbox-icon-card--hover-slide:hover,
.foxbox-icon-card--hover-fade:hover {
	transform: none;
}

/* Shared overlay content */
.foxbox-hover-overlay {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	text-align: center;
	padding: 1.75rem;
}
.foxbox-hover-overlay__body {
	font-size: 0.9375rem;
	line-height: 1.65;
}
.foxbox-hover-overlay__btn {
	display: inline-block;
	padding: 0.5em 1.3em;
	border-radius: 6px;
	font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.3;
	white-space: nowrap;
	border: none;
	cursor: pointer;
	transition: filter 0.15s;
}
.foxbox-hover-overlay__btn:hover {
	filter: brightness(1.12);
}

/* ── Flip ─────────────────────────────────────────────────── */
.foxbox-flip-wrap {
	perspective: 1200px;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.foxbox-flip-inner {
	flex: 1;
	position: relative;
	min-height: 220px;
	transition: transform var(--foxbox-hover-speed, 0.55s) cubic-bezier(.4, 0, .2, 1);
	transform-style: preserve-3d;
}
.foxbox-flip-wrap:hover .foxbox-flip-inner,
.foxbox-flip-wrap:focus-within .foxbox-flip-inner {
	transform: rotateY(180deg);
}
.foxbox-flip-front,
.foxbox-flip-back {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	border-radius: inherit;
	overflow: hidden;
}
.foxbox-flip-front.foxbox-icon-card {
	height: auto;
}
.foxbox-flip-back {
	transform: rotateY(180deg);
}

/* ── Slide reveal ─────────────────────────────────────────── */
.foxbox-icon-card--hover-slide {
	overflow: hidden;
	position: relative;
}
.foxbox-icon-card--hover-slide .foxbox-hover-overlay {
	position: absolute;
	inset: 0;                /* full-card cover — was missing top, causing half-cover */
	border-radius: inherit;
	transform: translateY(100%);
	transition: transform var(--foxbox-hover-speed, 0.4s) cubic-bezier(.4, 0, .2, 1);
}
.foxbox-icon-card--hover-slide:hover .foxbox-hover-overlay,
.foxbox-icon-card--hover-slide:focus-within .foxbox-hover-overlay {
	transform: translateY(0);
}

/* ── Fade overlay ─────────────────────────────────────────── */
.foxbox-icon-card--hover-fade {
	overflow: hidden;
	position: relative;
}
.foxbox-icon-card--hover-fade .foxbox-hover-overlay {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--foxbox-hover-speed, 0.35s) ease;
}
.foxbox-icon-card--hover-fade:hover .foxbox-hover-overlay,
.foxbox-icon-card--hover-fade:focus-within .foxbox-hover-overlay {
	opacity: 1;
}

/* ── FoxBox Offer Grid ───────────────────────────────────────── */
.foxbox-offer-grid {
	display: grid;
	gap: 1.5rem;
	align-items: stretch;
}

.foxbox-offer-grid--cols-1 { grid-template-columns: 1fr; }
.foxbox-offer-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.foxbox-offer-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.foxbox-offer-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

.foxbox-offer-grid--gap-small  { gap: 1rem; }
.foxbox-offer-grid--gap-medium { gap: 1.5rem; }
.foxbox-offer-grid--gap-large  { gap: 2rem; }

.foxbox-offer-grid--align-start  { align-items: start; }
.foxbox-offer-grid--align-center { align-items: center; }
.foxbox-offer-grid--align-end    { align-items: end; }

@media (max-width: 782px) {
	.foxbox-offer-grid--cols-3,
	.foxbox-offer-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Phones (matches the theme's 600px phone breakpoint): everything stacks */
@media (max-width: 600px) {
	.foxbox-offer-grid--cols-2,
	.foxbox-offer-grid--cols-3,
	.foxbox-offer-grid--cols-4 { grid-template-columns: 1fr; }
}

/* ── FoxBox Breakout ─────────────────────────────────────── */
/*
 * Escapes ALL parent max-width constraints; stretches to 100vw.
 *
 * WHY THE EXTRA SELECTORS:
 * WordPress's theme.json generates a global inline stylesheet with:
 *   .is-layout-constrained > :where(...) { margin-left: auto !important; }
 * That selector has specificity 0,1,0 and fires after the theme CSS.
 * When both rules carry !important, HIGHER specificity wins regardless of
 * source order. The :is() selector below has specificity 0,2,0 (two classes),
 * so it beats WordPress's 0,1,0 rule and the negative margins take effect.
 */
.foxbox-breakout {
	width:         100vw !important;
	max-width:     100vw !important;
	margin-left:   calc(50% - 50vw) !important;
	margin-right:  calc(50% - 50vw) !important;
	position:      relative;
}

/* Specificity 0,2,0 — beats WP global layout !important (0,1,0) */
:is(
	.is-layout-constrained,
	.is-layout-flow,
	.is-layout-grid,
	.wp-block-group,
	.wp-block-post-content,
	.entry-content
) > .foxbox-breakout {
	width:         100vw !important;
	max-width:     100vw !important;
	margin-left:   calc(50% - 50vw) !important;
	margin-right:  calc(50% - 50vw) !important;
}

/* ── Print ───────────────────────────────────────────────── */
@media print {
	.foxbox-site-header,
	.wp-block-navigation,
	.foxbox-header-cta { display: none; }
}

/* ══════════════════════════════════════════════════════════
   UTILITY BAR  (thin strip above header)
   ══════════════════════════════════════════════════════════ */
.foxbox-utility-bar {
	font-size: 0.8125rem;
	line-height: 1.4;
}

.foxbox-utility-bar a {
	color: #ff7a1a;
	text-decoration: none;
}

.foxbox-utility-bar a:hover {
	text-decoration: underline;
}

@media (max-width: 600px) {
	.foxbox-utility-bar { display: none; }
}

/* ══════════════════════════════════════════════════════════
   PRICING TABLE
   ══════════════════════════════════════════════════════════ */
.foxbox-pricing-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.foxbox-pricing-table th,
.foxbox-pricing-table td {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid #e5e5e5;
	text-align: left;
}

.foxbox-pricing-table thead th {
	background-color: #f0f0f0;
	font-weight: 700;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.foxbox-pricing-table tbody tr:last-child td {
	border-bottom: none;
}

.foxbox-pricing-table tbody tr:nth-child(even) td {
	background-color: #fafafa;
}

.foxbox-pricing-table td:last-child {
	font-weight: 600;
	color: #ff7a1a;
	white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
   FOOTER LIST  (inline link lists in footer columns)
   ══════════════════════════════════════════════════════════ */
.foxbox-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.foxbox-footer-list li {
	margin-bottom: 0.5rem;
}

.foxbox-footer-list li:last-child {
	margin-bottom: 0;
}

.foxbox-footer-list a:hover {
	color: #ff7a1a !important;
}

/* ══════════════════════════════════════════════════════════
   MOBILE STICKY CTA BAR  (fixed bottom — Call / Text / Directions)
   ══════════════════════════════════════════════════════════ */
.foxbox-mobile-cta {
	display: none;
}

@media (max-width: 782px) {
	/* Reserve space so content doesn't hide behind the bar */
	body {
		padding-bottom: 62px;
	}

	.foxbox-mobile-cta {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		border-top: 2px solid rgba(255, 122, 26, 0.5);
		box-shadow: 0 -2px 12px rgba(0,0,0,0.3);
	}

	.foxbox-mobile-cta a {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.2rem;
		padding: 0.6rem 0.25rem;
		text-decoration: none;
		font-size: 0.6875rem;
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: 0.03em;
		text-transform: uppercase;
	}

	.foxbox-mobile-cta a:nth-child(1) {
		/* Call */
		background-color: #ff7a1a;
		color: #ffffff;
	}

	.foxbox-mobile-cta a:nth-child(2) {
		/* Text */
		background-color: #1a8a3a;
		color: #ffffff;
	}

	.foxbox-mobile-cta a:nth-child(3) {
		/* Directions */
		background-color: #1a5fa8;
		color: #ffffff;
	}

	.foxbox-mobile-cta a:hover,
	.foxbox-mobile-cta a:focus {
		filter: brightness(1.1);
	}

	.foxbox-mobile-cta a span[aria-hidden] {
		font-size: 1.25rem;
		line-height: 1;
	}
}

/* ── WordPress color preset class fixes ──────────────────────────────────────
 * WordPress generates .has-*-color rules inside :where() (specificity 0).
 * The theme.json global text color outputs a body rule that can beat them.
 * These explicit !important rules ensure the color classes always apply.   */

/* Text colors */
.has-white-color          { color: #ffffff          !important; }
.has-charcoal-black-color { color: #111111          !important; }
.has-dark-charcoal-color  { color: #1e1e1e          !important; }
.has-fox-orange-color     { color: #ff7a1a          !important; }
.has-cream-bg-color       { color: #f7f1e8          !important; }
.has-mid-grey-color       { color: #777777          !important; }
.has-accent-green-color   { color: #20b267          !important; }
.has-accent-red-color     { color: #e05650          !important; }
.has-light-cream-color    { color: #fdf8f2          !important; }

/* Background colors */
.has-white-background-color          { background-color: #ffffff !important; }
.has-charcoal-black-background-color { background-color: #111111 !important; }
.has-dark-charcoal-background-color  { background-color: #1e1e1e !important; }
.has-fox-orange-background-color     { background-color: #ff7a1a !important; }
.has-cream-bg-background-color       { background-color: #f7f1e8 !important; }
.has-mid-grey-background-color       { background-color: #777777 !important; }
.has-accent-green-background-color   { background-color: #20b267 !important; }
.has-accent-red-background-color     { background-color: #e05650 !important; }
.has-light-cream-background-color    { background-color: #fdf8f2 !important; }

/* ── Classes page: badges ─────────────────────────────────────────────────── */
.foxbox-badge {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 4px;
	padding: 3px 8px;
	white-space: nowrap;
	line-height: 1.4;
	vertical-align: middle;
	margin: 0;
}
.foxbox-badge-free     { background-color: #20b267; color: #ffffff; }
.foxbox-badge-donation { background-color: #fdf0d5; color: #7a5a1a; border: 1px solid #c49a3c; }
.foxbox-badge-book     { background-color: transparent; color: #666666; border: 1px solid #aaaaaa; }
.foxbox-badge-paid     { background-color: #ff7a1a; color: #ffffff; }

/* ── Classes page: card grid ──────────────────────────────────────────────── */
.foxbox-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--40, 1.5rem);
}
.foxbox-card-grid .foxbox-card {
	height: 100%;
}
.foxbox-card-grid .foxbox-card .wp-block-buttons {
	margin-top: auto;
}
@media (max-width: 781px) {
	.foxbox-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
	.foxbox-card-grid { grid-template-columns: 1fr; }
}

/* ── Classes page: section headers ───────────────────────────────────────── */
.foxbox-section-header {
	padding-left: 0.875rem !important;
	border-left: 4px solid #ff7a1a;
}
.foxbox-section-intro {
	color: #666666;
	font-style: italic;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE LAYER — phones, tablets, touch devices
   ══════════════════════════════════════════════════════════ */

/* ── Horizontal overflow guard ─────────────────────────────
   .foxbox-breakout uses 100vw which can exceed the viewport by
   the scrollbar width; clip avoids a sideways scrollbar without
   creating a scroll container (which would break sticky). */
html { overflow-x: clip; }
@supports not (overflow-x: clip) {
	html { overflow-x: hidden; }
}

/* Long words, URLs and email addresses must never push the layout wide */
p, li, dd, dt, td, th,
h1, h2, h3, h4, h5, h6,
.foxbox-icon-card__body,
.foxbox-hover-overlay__body {
	overflow-wrap: break-word;
}

/* Embedded media scales with its container */
iframe, embed, object {
	max-width: 100%;
}

/* ── Tables scroll sideways instead of breaking the page ── */
.foxbox-pricing-table,
.wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.foxbox-pricing-table table,
.wp-block-table table {
	min-width: 480px; /* keep columns legible; wrapper scrolls if narrower */
}
@media (min-width: 601px) {
	.foxbox-pricing-table table,
	.wp-block-table table { min-width: 0; }
}

/* ── Fluid section spacing ─────────────────────────────────
   Page content uses spacing presets for section padding; shrink
   the large steps on smaller screens so sections don't waste
   half the viewport. html:root outranks WP's :root presets. */
@media (max-width: 781px) {
	html:root {
		--wp--preset--spacing--60: 2.5rem;
		--wp--preset--spacing--70: 3rem;
		--wp--preset--spacing--80: 4rem;
		--wp--preset--spacing--90: 5.5rem;
	}
}
@media (max-width: 600px) {
	html:root {
		--wp--preset--spacing--60: 2rem;
		--wp--preset--spacing--70: 2.5rem;
		--wp--preset--spacing--80: 3rem;
		--wp--preset--spacing--90: 4rem;
	}
}

/* ── Tablet (601–781px): footer link columns as a 2×2 grid ──
   Core stacks all columns to 100% below 782px; four stacked
   footer columns make the page very long on tablets. */
@media (min-width: 601px) and (max-width: 781px) {
	footer .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: calc(50% - 1rem) !important;
		flex-grow: 1;
	}
}

/* ── Tablet ONLY (783–1024px): 4-column offer grids step down to 3.
   Must be range-scoped — an open max-width:1024px here sits later in
   the file than the phone rules above, so equal specificity made it
   win on phones and force 3 columns onto small screens. ── */
@media (min-width: 783px) and (max-width: 1024px) {
	.foxbox-offer-grid--cols-4 { grid-template-columns: repeat(3, 1fr); }
}

/* ── Phones ── */
@media (max-width: 600px) {
	/* Tall hero covers (580/600px in content) cap to fit a phone
	   screen above the fold; short band covers are left alone. */
	.foxbox-hero,
	.wp-block-cover[style*="min-height:580px"],
	.wp-block-cover[style*="min-height:600px"] {
		min-height: 420px !important;
	}

	/* Oversized display numerals (stats, step numbers) set inline
	   in page content scale down instead of dominating the screen */
	p[style*="font-size:4rem"]  { font-size: 2.75rem !important; }
	p[style*="font-size:3rem"],
	h3[style*="font-size:3rem"] { font-size: 2.25rem !important; }

	/* Form fields: fit the screen, and 16px+ stops iOS zoom-on-focus */
	input, select, textarea { max-width: 100%; }
	input[type="text"], input[type="email"], input[type="tel"],
	input[type="url"], input[type="search"], input[type="number"],
	select, textarea {
		font-size: 16px;
		width: 100%;
	}

	/* Buttons: allow long labels to wrap instead of overflowing */
	.wp-block-button__link,
	.wp-element-button {
		white-space: normal;
	}
}

/* ── Small phones: inline icon cards stack vertically ── */
@media (max-width: 480px) {
	.foxbox-icon-card--inline {
		flex-direction: column;
	}
}

/* ── Touch devices: hover-revealed card content stays reachable ──
   Flip/slide/fade overlays also open via :focus-within (wrappers
   carry tabindex), so a tap reveals them. Disable the lift/scale
   hover transforms that otherwise stick after a tap. */
@media (hover: none) {
	.foxbox-icon-card:hover,
	.wp-block-button__link:hover,
	.wp-element-button:hover {
		transform: none;
	}
}