/*
Theme Name:   Twenty Twenty-Five Child
Theme URI:    https://iamdev.net
Description:  Child theme of Twenty Twenty-Five for iAmDev. Holds custom CSS/templates so changes survive theme updates.
Author:       iAmDev
Template:     twentytwentyfive
Version:      1.1.2
Text Domain:  twentytwentyfive-child
*/

/* ==========================================================================
   Dark frosted / translucent sticky header
   Targets the header template part only (the footer uses the same template-part
   class but a <footer> element, so this <header> selector won't touch it).
   ========================================================================== */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	/* Translucent near-black — also the graceful fallback where backdrop-filter is unsupported */
	background-color: rgba( 17, 17, 17, 0.72 );
	-webkit-backdrop-filter: saturate( 180% ) blur( 14px );
	backdrop-filter: saturate( 180% ) blur( 14px );
	border-bottom: 1px solid rgba( 255, 255, 255, 0.1 );
	box-shadow: 0 2px 18px rgba( 0, 0, 0, 0.18 );
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* --- Bar layout: vertical centering + padding we can shrink on scroll --- */
header.wp-block-template-part .tt5c-bar {
	align-items: center;
	padding-top: var( --wp--preset--spacing--40 );
	padding-bottom: var( --wp--preset--spacing--40 );
	transition: padding 0.3s ease;
}

header.wp-block-template-part .tt5c-actions {
	align-items: center;
	gap: clamp( 1rem, 2.5vw, 2rem );
}

/* --- Logo sizing (shrinks on scroll) --- */
header.wp-block-template-part .wp-block-site-logo img {
	height: 40px;
	width: auto;
	max-width: none;
	/* Preserve the file's aspect ratio — never stretch/squash to fill the box */
	object-fit: contain;
	transition: height 0.3s ease;
}

/* --- Light nav text on the dark bar --- */
header.wp-block-template-part .wp-block-navigation a,
header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item__content {
	color: #fff;
}

/* --- Nav: animated underline-on-hover --- */
header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	font-weight: 500;
	letter-spacing: 0.01em;
	padding-bottom: 3px;
}

header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 2px;
	background: currentColor;
	transition: right 0.25s ease;
}

header.wp-block-template-part .wp-block-navigation-item__content:hover::after,
header.wp-block-template-part .wp-block-navigation-item__content:focus::after,
header.wp-block-template-part .current-menu-item .wp-block-navigation-item__content::after {
	right: 0;
}

/* --- CTA pill button --- */
header.wp-block-template-part .tt5c-cta .wp-block-button__link {
	background-color: #fff;
	color: #111;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 0.5em 1.3em;
	font-weight: 600;
	white-space: nowrap;
	transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

header.wp-block-template-part .tt5c-cta .wp-block-button__link:hover,
header.wp-block-template-part .tt5c-cta .wp-block-button__link:focus {
	background-color: transparent;
	color: #fff;
	border-color: rgba( 255, 255, 255, 0.6 );
	transform: translateY( -1px );
}

/* --- Condensed state once scrolled: shrink height ONLY, keep the glass --- */
header.wp-block-template-part.tt5c-scrolled .tt5c-bar {
	padding-top: var( --wp--preset--spacing--20 );
	padding-bottom: var( --wp--preset--spacing--20 );
}

header.wp-block-template-part.tt5c-scrolled .wp-block-site-logo img {
	height: 32px;
}

/* ==========================================================================
   Front page only: header floats over the hero cover so the frosted glass is
   visible on load (there's a background image behind it from the very top).
   Scoped to body.home so inner pages keep the normal solid sticky bar.
   ========================================================================== */
body.home header.wp-block-template-part {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	/* Very translucent at rest so the hero image reads clearly through the frost */
	background-color: rgba( 17, 17, 17, 0.25 );
	border-bottom-color: transparent;
	box-shadow: none;
}

/* Pull the hero cover up under the floating header on the front page:
   drop the redundant duplicate page title ("iAmDev") and the top spacing,
   so the frosted glass overlaps the hero image from the very top. */
body.home main {
	margin-top: 0 !important;
}

body.home main > .wp-block-group {
	padding-top: 0 !important;
}

body.home .wp-block-post-title {
	display: none !important;
}

/* Keep the fixed header clear of the WP admin bar for logged-in users */
.admin-bar.home header.wp-block-template-part {
	top: 32px;
}

@media screen and ( max-width: 782px ) {
	.admin-bar.home header.wp-block-template-part {
		top: 46px;
	}
}

/* ==========================================================================
   Mobile menu overlay — give it a solid dark frosted panel so the white menu
   items are legible (default overlay was transparent over the hero image).
   ========================================================================== */

/* Hamburger + close icons stay white on the dark bar / dark overlay */
header.wp-block-template-part .wp-block-navigation__responsive-container-open,
header.wp-block-template-part .wp-block-navigation__responsive-container-close {
	color: #fff;
}

/* WooCommerce account + mini-cart icons in the bar: white for contrast */
header.wp-block-template-part .wp-block-woocommerce-customer-account,
header.wp-block-template-part .wp-block-woocommerce-customer-account a,
header.wp-block-template-part .wc-block-mini-cart__button {
	color: #fff !important;
	fill: #fff;
}

header.wp-block-template-part .wp-block-woocommerce-customer-account svg,
header.wp-block-template-part .wc-block-mini-cart__button svg {
	fill: currentColor;
}

/* The opened overlay: force a true full-screen, opaque dark frosted panel.
   (Core's full-screen width/height rule wasn't winning here, leaving a tiny
   content-sized box, so we pin it explicitly.) */
.wp-block-navigation__responsive-container.is-menu-open {
	position: fixed !important;
	/* Viewport units, not % / inset: the header's backdrop-filter makes it the
	   containing block for fixed descendants, so % would size to the header.
	   vw/vh are viewport-relative and escape that trap. */
	top: 0 !important;
	left: 0 !important;
	right: auto !important;
	bottom: auto !important;
	width: 100vw !important;
	height: 100vh !important;
	max-width: none !important;
	/* Include core's padding inside the 100vw width (it uses content-box, which
	   added ~60px and pushed the panel/menu off to the right). Zero the padding
	   here — the inner content element supplies its own. */
	box-sizing: border-box !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	/* Fully opaque so the bar behind it doesn't ghost through */
	background-color: #111 !important;
	/* Sit above the header bar (logo / icons / CTA) so the open menu is a clean
	   full-screen panel rather than letting the bar bleed through on top. */
	z-index: 100000 !important;
}

/* Close (X) pinned inside the viewport, top-right (core placed it off-screen) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: absolute !important;
	top: 1.25rem !important;
	right: 1.25rem !important;
	left: auto !important;
	z-index: 1 !important;
}

/* Content fills the panel; menu is centered both ways */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100% !important;
	/* Fill the viewport so the menu can be vertically centered (the flex chain
	   above this element doesn't stretch, so pin the height directly). */
	min-height: 100vh;
	box-sizing: border-box;
	padding: 4.5rem 1.5rem 2rem;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
}

/* Override core's right-justification: stack as a tight, centered column */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	gap: 0.25rem !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	max-width: 18rem !important;
	margin-inline: auto !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100% !important;
	justify-content: center !important;
	text-align: center !important;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.08 );
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: #fff;
	font-size: 1.25rem;
	font-weight: 500;
	padding: 0.85em 0;
	width: 100%;
}

/* Drop the desktop hover-underline inside the overlay (it looks odd on a list) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

/* --- Mobile: keep the bar within the viewport ---
   The action cluster (hamburger + account + cart + CTA) was overflowing the
   right edge, so tighten the gaps and CTA and give the logo edge padding. */
@media screen and ( max-width: 600px ) {
	header.wp-block-template-part .tt5c-bar {
		padding-left: 0.9rem;
		padding-right: 0.9rem;
	}

	header.wp-block-template-part .tt5c-actions {
		gap: 0.6rem;
	}

	header.wp-block-template-part .tt5c-cta .wp-block-button__link {
		padding: 0.4em 0.9em;
		font-size: 0.9rem;
	}
}

/* ==========================================================================
   Dark footer — bookends the dark frosted header. Also makes the white logo
   visible (it was invisible on the old white footer).
   ========================================================================== */
footer.wp-block-template-part {
	background-color: #111;
	color: #fff;
}

footer.wp-block-template-part a {
	color: rgba( 255, 255, 255, 0.82 );
	text-decoration: none;
	transition: color 0.2s ease;
}

footer.wp-block-template-part a:hover,
footer.wp-block-template-part a:focus {
	color: #fff;
}

/* Brand logo + tagline */
footer.wp-block-template-part .tt5c-footer-brand .wp-block-site-logo img {
	height: 44px;
	width: auto;
}

footer.wp-block-template-part .wp-block-site-tagline {
	color: rgba( 255, 255, 255, 0.55 );
	margin: 0;
}

/* Column headings */
footer.wp-block-template-part .tt5c-footer-h {
	margin: 0 0 0.4rem;
	color: rgba( 255, 255, 255, 0.5 );
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-weight: 600;
}

/* Tighten the link columns */
footer.wp-block-template-part .tt5c-footer-cols {
	gap: clamp( 2rem, 6vw, 5rem );
	row-gap: 2.5rem;
}

footer.wp-block-template-part .tt5c-footer-cols .wp-block-navigation .wp-block-navigation__container {
	gap: 0.5rem;
}

footer.wp-block-template-part .tt5c-footer-cols .wp-block-navigation a {
	font-size: 0.95rem;
}

/* Bottom bar: divider, muted copyright, social icons */
footer.wp-block-template-part .tt5c-footer-bottom {
	border-top: 1px solid rgba( 255, 255, 255, 0.1 );
	padding-top: 1.5rem;
}

footer.wp-block-template-part .tt5c-footer-bottom p {
	color: rgba( 255, 255, 255, 0.55 );
	margin: 0;
}

.tt5c-social {
	display: flex;
	align-items: center;
	gap: 1.1rem;
}

.tt5c-social a {
	display: inline-flex;
	color: rgba( 255, 255, 255, 0.75 );
	transition: color 0.2s ease, transform 0.15s ease;
}

.tt5c-social a:hover,
.tt5c-social a:focus {
	color: #fff;
	transform: translateY( -2px );
}

/* --- Respect reduced-motion preferences --- */
@media ( prefers-reduced-motion: reduce ) {
	header.wp-block-template-part,
	header.wp-block-template-part *,
	.tt5c-social a {
		transition: none !important;
	}
}