/*
Theme Name: Dez Visuals Media
Theme URI: https://dezvisuals.com
Author: Dez Visuals Media, LLC
Author URI: https://dezvisuals.com
Description: Block child theme of Twenty Twenty-Five for Dez Visuals Media, LLC — a Phoenix-based corporate & government photography and video production company. Self-owned, subscription-free design system with locally bundled fonts.
Template: twentytwentyfive
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 1.6.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dez-visuals-theme
*/

/*
 * "Eyebrow" label style (13px, Manrope 800, uppercase, 0.08em tracking).
 * Not expressible as a theme.json font-size preset (those carry size only,
 * not weight/transform/tracking), so it lives here as a utility class.
 * Add "eyebrow" to a paragraph/heading block's Advanced > Additional CSS class(es).
 */
.eyebrow {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 800;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--ink);
}

/* Blue is reserved for CTAs/booking — only use this accent variant inside hero/CTA sections. */
.eyebrow.is-style-accent {
	color: var(--wp--preset--color--blue);
}

/*
 * Sticky header. Must be applied to the template-part wrapper (the <header>
 * element that sits directly in the scrolling .wp-site-blocks container).
 * Putting sticky on the inner .site-header group does nothing, because a
 * sticky element only moves within its parent, and the wrapper is exactly
 * as tall as the header itself.
 */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/*
 * Footer links: Gray on Dark, hover Cream (per design system).
 * Scoped here because theme.json's global link color (Muted) is meant
 * for light backgrounds and can't be overridden per-section in JSON.
 */
.site-footer a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--gray-on-dark);
	text-decoration: none;
}

.site-footer a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--cream);
	text-decoration: underline;
}

/*
 * Remove the default 1.2rem block gap between the page's top-level pieces
 * (header, main, footer) so full-bleed sections sit flush with no white
 * strips between them. Core's rule uses :where() so this cleanly wins.
 */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/*
 * Anchor targets (e.g. /photography/#headshots) would otherwise scroll
 * underneath the sticky header; this offsets the jump by the header height.
 */
[id] {
	scroll-margin-top: 96px;
}

/*
 * Honeybook contact form embed: force the widget and anything it injects
 * to respect the column width (it caused overflow issues in Elementor).
 */
/*
 * Logo strip treatment.
 * Custom CSS is used here deliberately. Grayscale is a CSS filter with no
 * theme.json setting and no block support behind it. The nearest block
 * support is duotone, which is a different effect, is disabled site-wide in
 * theme.json, and would have to be re-applied by hand to every logo each
 * time one is swapped. The max-height rule is the other half of the job:
 * client logos arrive at wildly different aspect ratios, and normalizing
 * them here means no per-image sizing work in the editor.
 */
.logo-strip img {
	max-height: 48px;
	width: auto;
	filter: grayscale(1);
	opacity: 0.75;
}

div[class*="hb-p-"],
div[class*="hb-p-"] iframe {
	width: 100% !important;
	max-width: 100% !important;
}

/*
 * Utility: temporarily hide a section from the live site while keeping it
 * (and its content) in the editor. Add "hide-for-now" to the block's
 * Advanced > Additional CSS class(es); remove the class to show it again.
 * body-scoped so it hides on the front end only, not in the editor canvas.
 */
body .hide-for-now {
	display: none !important;
}