/*
Theme Name: DFI2026 Child
Template: dfi2026
Description: Site-specific overrides for the DFI2026 theme. All customizations that can't be done through Theme Options live here so the parent theme stays untouched and upgradeable.
Version: 1.0.0
*/

/* Header background: semi-transparent dark navy (#0f1823) instead of
   the Theme Options "Header Background" color field (which only stores
   solid hex, no alpha) — overrides the --dfi-header-bg custom property
   the parent theme's inline CSS sets. Only affects the header once it
   has a background at all (the default header, and the
   transparent-on-home header after it scrolls/collapses) — the fully
   transparent, not-yet-scrolled state on the home page is untouched. */
:root {
	--dfi-header-bg: rgba(23, 29, 35, 1);
}

/* Top bar "Follow Us:" label at half the icon size — the Theme Options
   "Social Media Icons" size field (--dfi-social-size) drives both the
   label and the icon with one value, so this overrides just the label
   with a calc() off that same variable. The icon itself is untouched. */
.top-bar__social-label {
	font-size: calc(var(--dfi-social-size, 1rem) * 0.5);
	font-weight: 700;
}

@media (max-width: 768px) {
	.top-bar__social-label {
		font-size: calc(var(--dfi-social-size-mobile, 1rem) * 0.5);
	}
}

/* Phone/social area — text and icons alike — in the brand navy,
   overriding the Theme Options colors (--dfi-phone-color,
   --dfi-social-color) which default to white. */
.top-bar__phone,
.top-bar__phone-label,
.top-bar__phone-number,
.top-bar__social-label,
.top-bar__social-link {
	color: #21344d;
}

/* "|" divider between the social icons and the phone number — only
   renders when both are present, since it's keyed off the social block
   being immediately followed by the phone link (their actual markup
   order in inc/top-bar.php). It's the phone link's own first flex item,
   so the left gap comes from .top-bar__right's 1rem gap (Instagram icon
   side) but the right gap comes from .top-bar__phone's own smaller
   0.4rem gap (phone icon side) — the extra 0.6rem margin below tops
   that up to 1rem so both sides match. */
.top-bar__social + .top-bar__phone::before {
	content: "|";
	color: #21344d;
	font-size: var(--dfi-phone-size, 0.85rem);
	font-weight: 400;
	margin-right: 0.6rem;
}

/*
 * Nav hover effect, copied from patioparadise2026.newwebsite.me's
 * dfi2026-child (same parent theme): a thin bar slides in from above and
 * another from below, both fading in, sandwiching the link text.
 * Top-level items only (not dropdown links). currentColor means these
 * follow --dfi-nav-color/--dfi-nav-hover-color automatically, so if
 * either changes later in Theme Options the bars stay in sync. Not
 * wrapped in a desktop-only media query (same as the source site) since
 * touch devices don't trigger :hover anyway.
 */
.primary-menu > li > a {
	position: relative;
}

.primary-menu > li > a::before,
.primary-menu > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	opacity: 0;
	transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

.primary-menu > li > a::before {
	top: 0;
	transform: translate3d(0, -8px, 0);
}

.primary-menu > li > a::after {
	bottom: 0;
	transform: translate3d(0, 8px, 0);
}

.primary-menu > li > a:hover::before,
.primary-menu > li > a:hover::after,
.primary-menu > li > a:focus::before,
.primary-menu > li > a:focus::after {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* Button row title text a little bolder — no font-weight field exists
   for this on the options page (only size/color), so it's set here. */
.dfi-button-row__h2 {
	font-weight: 600;
}

/* CTA title ("Contact Us Today for a Quote!") in the footer blue — no
   dedicated color field exists for it on the options page (it just
   inherits the sitewide H2 color), so it's scoped here instead of
   changing that global H2 color and affecting every heading on the site. */
.dfi-cta__title {
	color: #21344d;
}

/* Image Text Panel's scroll-in reveal (fade + slide up, triggered by
   assets/js/image-text-panel.js) runs slower than the parent theme's
   default 0.7s — no options-page field for it, so overridden here. */
.dfi-image-text-panel__box {
	transition: opacity 1.4s ease, transform 1.4s ease;
}

/* AWS badge next to the footer logo — inserted by
   assets/js/footer-aws-logo.js, which wraps the existing footer logo
   link in this row and appends the badge after it. Row on desktop,
   stacked and centered on mobile, matching how the theme's other footer
   elements switch layout at its usual 768px breakpoint. */
.dfi-footer-logo-row {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

/* ".site-footer__logo .dfi-footer-aws-logo" rather than the plain class
   alone: the parent theme's ".site-footer__logo img" rule (style.css)
   sizes every <img> nested in the footer logo box to the MAIN logo's
   configured height/width, and its class+type selector outranks a
   class-only selector in specificity no matter which stylesheet loads
   later — without the extra ancestor class here, the AWS badge silently
   inherits the main logo's own size instead of this one, on both
   desktop and mobile. */
.site-footer__logo .dfi-footer-aws-logo {
	display: block;
	height: 6vw;
	width: auto;
}

@media (max-width: 768px) {
	.dfi-footer-logo-row {
		flex-direction: column;
		gap: 1rem;
	}

	.site-footer__logo .dfi-footer-aws-logo {
		height: auto;
		width: 20vw;
	}
}

/* Footer contact text in white on mobile only — the light gradient
   underlay panel (.site-footer__underlay) that the dark Theme Options
   text color (#2c2c2c) is tuned for is display:none below 768px (parent
   theme's own mobile rule), leaving contact info sitting directly on
   the flat navy footer background instead, where dark text nearly
   disappears. Desktop is untouched, still using the Theme Options
   Text Color as-is. */
@media (max-width: 768px) {
	.site-footer__info-row {
		color: #ffffff;
	}
}

/* Fixes the footer text looking pushed right on mobile: the parent
   theme centers each icon+text row as ONE block (.site-footer__info
   sets align-items: center), so the icon eats space on the left of
   that centered block and the text itself ends up sitting right of
   true center — worse, inconsistently row to row, since the phone
   number, email, address, and license lines are all different widths.
   Taking the icon out of flow and centering only the text fixes both:
   text is now what gets centered, and the icon rides along fixed to
   its left edge. */
@media (max-width: 768px) {
	.site-footer__info-row {
		position: relative;
		width: fit-content;
		margin: 0 auto;
	}

	.site-footer__info-icon {
		position: absolute;
		right: 100%;
		margin-right: 0.6rem;
	}
}

/*
 * Vimeo Background Video slide text (Home page). Theme Options only
 * gives each slide ONE background color for its whole box (Slides ->
 * Desktop Styles -> Background Color) — there's no separate field for
 * styling the heading vs. the paragraph within it, so a two-tone
 * "title bar + text bar" look isn't reachable from the options page and
 * has to be done here. Zeroing the h2/p's own default margins is what
 * makes the two color bands sit flush with no gap between them, reading
 * as one rectangle instead of two separate floating blocks.
 */
/* Pushes the box down from dead-center within the video's vertical flex
   centering (.dfi-vimeo-slide-flex uses align-items: center) — margin on
   a centered flex item shifts it off-center rather than adding blank
   space, so this reads as "a little below center" as requested. */
.dfi-vimeo-slide-box {
	margin-top: 4vw;
}

.dfi-vimeo-slide-text {
	border-radius: 8px;
	overflow: hidden;
}

.dfi-vimeo-slide-text h2 {
	margin: 0;
	padding: 0.75rem 1.5rem;
	background: rgba(33, 52, 77, 0.9);
	color: #ffffff;
	text-transform: uppercase;
	text-align: center;
	font-weight: 900;
}

.dfi-vimeo-slide-text p {
	margin: 0;
	padding: 1vw 2vw 2vw;
	background: rgba(255, 255, 255, 0.8);
	color: #434343;
	font-weight: 600;
	line-height: 1.5;
}

@media (min-width: 769px) {
	.dfi-vimeo-slide-text h2 {
		font-size: 3vw;
	}

	.dfi-vimeo-slide-text p {
		font-size: 1.1vw;
	}
}