/*
Theme Name:  Eagle Dental Care
Theme URI:   https://eagledentalcare.com/
Description: Eagle Dental Care child theme of Twenty Twenty-Five.
Author:      Doug Webster
Author URI:  https://eagledentalcare.com/
Template:    twentytwentyfive
Version:     1.0.0
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eagle-dental-care
*/

/* ==========================================================================
   Buttons
   ========================================================================== */

.wp-block-button__link,
.wp-element-button {
	transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

/* Primary gold button hover */
.wp-block-button:not(.is-style-outline):not(.is-style-outline-white) .wp-block-button__link:hover {
	background-color: #8B6A15 !important;
	box-shadow: 0 4px 14px rgba(201, 162, 40, 0.35);
	transform: translateY(-1px);
}

/* Outline on dark backgrounds */
.is-style-outline-white .wp-block-button__link {
	color: #ffffff;
	border: 2px solid rgba(255, 255, 255, 0.65);
	background: transparent;
}
.is-style-outline-white .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.12) !important;
	border-color: #ffffff;
}

/* Gold accent button */
.is-style-gold .wp-block-button__link {
	background-color: #C9A228;
	color: #ffffff;
	border: none;
}
.is-style-gold .wp-block-button__link:hover {
	background-color: #8B6A15 !important;
	box-shadow: 0 4px 14px rgba(201, 162, 40, 0.4);
	transform: translateY(-1px);
}

/* ==========================================================================
   Gold divider line (mirrors the logo rule)
   ========================================================================== */

.edc-gold-rule {
	border: none;
	border-top: 2px solid #C9A228;
	margin: 0;
}

/* ==========================================================================
   Eyebrow label
   ========================================================================== */

.edc-eyebrow {
	display: inline-block;
	font-family: var(--wp--preset--font-family--jakarta);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #C9A228;
	margin-bottom: 0.75rem;
}

/* inline-block shrink-wraps the paragraph, which defeats text-align: center —
   the text centers inside a box that's only as wide as itself. When the block
   is set to centered, let it fill the row so centering actually shows. */
.edc-eyebrow.has-text-align-center {
	display: block;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.edc-card {
	background: #ffffff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	padding: 2rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.edc-card:hover {
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.11);
	transform: translateY(-3px);
}

/* ==========================================================================
   Quick Actions Bar
   ========================================================================== */

.edc-actions-bar {
	background: #ffffff;
	border-bottom: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Stretch all columns to the same height, then center content within each */
.edc-actions-bar .wp-block-columns {
	align-items: stretch;
	min-height: 72px;
}

.edc-actions-bar .wp-block-column {
	display: flex;
}

.edc-actions-bar .wp-block-column > .wp-block-group {
	flex: 1;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	padding: 0.875rem 1rem;
}

/* Kill default paragraph margins so they don't create uneven spacing */
.edc-actions-bar .wp-block-column > .wp-block-group p {
	margin: 0 !important;
	line-height: 1.2;
}

/* ==========================================================================
   Stat callout
   ========================================================================== */

.edc-stat-number {
	font-family: var(--wp--preset--font-family--jakarta);
	font-size: 3rem;
	font-weight: 800;
	color: var(--wp--preset--color--primary);
	line-height: 1;
}

.edc-stat-label {
	font-size: 0.875rem;
	color: var(--wp--preset--color--text-muted);
	margin-top: 0.25rem;
}

/* ==========================================================================
   Review stars
   ========================================================================== */

.edc-stars { color: #C9A228; letter-spacing: 2px; }

/* ==========================================================================
   Credentials bar
   ========================================================================== */

.edc-credentials {
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.edc-credentials img {
	filter: brightness(100) grayscale(100);
	max-width: 200px;
}
/* Wide, even spacing between badges */
.edc-credentials > .wp-block-group {
	gap: 1rem 3.5rem;
}

.edc-cred-item {
	gap: 0.5rem;
}

.edc-cred-item p {
	margin: 0;
	color: var(--wp--preset--color--text-muted);
	font-family: var(--wp--preset--font-family--jakarta);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.edc-cred-icon {
	display: flex;
	align-items: center;
	color: var(--wp--preset--color--primary);
}

.edc-cred-icon svg {
	display: block;
}

/* ==========================================================================
   Section helpers
   ========================================================================== */

.edc-section    { padding-top: 5rem; padding-bottom: 5rem; }
.edc-section-sm { padding-top: 3rem; padding-bottom: 3rem; }

/* ==========================================================================
   Block gap resets
   ========================================================================== */

/*
 * The blockGap setting in theme.json makes WordPress core emit a margin-block-start
 * rule per layout type, each at specificity (0,1,0) or lower:
 *
 *   :where(.wp-site-blocks) > *              → (0,0,0)
 *   :root :where(.is-layout-constrained) > * → (0,1,0)
 *   :root :where(.is-layout-flow) > *        → (0,1,0)
 *
 * A :root + class selector reaches (0,2,0) and beats all of them without !important.
 *
 * 1. Template-part wrappers (.wp-block-template-part) are always chrome — the header
 *    and footer. They never want blockGap rhythm above them, regardless of which
 *    container they sit in. Target the wrapper itself, NOT a parent > child path, so
 *    it holds on every template (the footer's parent differs between front-page and
 *    inner page templates).
 *
 *    <main> gets the same treatment: it's the 2nd child of .wp-site-blocks (after the
 *    header part), so blockGap gives it a margin-block-start. That margin is the space
 *    above the hero. main is a structural wrapper — it never wants top rhythm; its
 *    content controls its own spacing.
 */
:root .wp-block-template-part,
:root .wp-site-blocks > main {
	margin-block-start: 0;
}

/* 2 & 3. Gap between inner rows inside header and footer */
:root .site-header > *,
:root .site-footer > * {
	margin-block-start: 0;
}

/* 4. Flow groups: core's `:root :where(.is-layout-flow) > *` adds vertical
   rhythm between the children of every default-layout group. Our sections
   all handle their own spacing explicitly, so this only ever added stray
   gaps. Zeroed site-wide at (0,2,0). Constrained layouts (typed page
   content) and flex/grid gaps (columns, buttons, nav) keep their spacing.
   If a flow stack ever needs space back, set margins on those blocks in
   the editor (Dimensions panel) — inline styles beat this reset. */
:root .is-layout-flow > * {
	margin-block-start: 0;
}

/* Also zero the flex gap on the outer site wrapper */
:root .wp-site-blocks {
	gap: 0;
}

/* Full-bleed content sections (hero, CTA bands) inside constrained page layout */
:root .is-layout-constrained > .wp-block-group.alignfull,
:root .is-layout-constrained > .wp-block-cover.alignfull {
	margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   The "checkbox": per-block opt-out utilities.

   blockGap stays ON globally (columns, buttons, nav, content rhythm all keep
   their spacing). To make any single block ignore the gap, open it in the
   editor → Advanced → "Additional CSS class(es)" and add one of:

     edc-flush          → removes the space ABOVE this block (sits flush
                          against whatever is above it)
     edc-flush-inside   → removes the gap BETWEEN this block's children
                          (collapse a stack with no vertical rhythm)

   :root prefix gives (0,2,0) so these win over core's blockGap rules.
   -------------------------------------------------------------------------- */
:root .edc-flush {
	margin-block-start: 0 !important;
}

:root .edc-flush-inside > * {
	margin-block-start: 0 !important;
}

/* ==========================================================================
   Hero background video
   ========================================================================== */

/* The video must anchor to the FULL cover, not the constrained inner wrapper
   (the shortcode renders inside .wp-block-cover__inner-container; if that
   wrapper is positioned, absolute children size to it — that's what made the
   video small). Force the intermediate wrappers static so .wp-block-cover is
   the containing block, and clip overflow at the cover. */
.wp-block-cover:has(.edc-hero-video) {
	overflow: hidden;
}

.wp-block-cover:has(.edc-hero-video) .wp-block-cover__inner-container,
.wp-block-cover:has(.edc-hero-video) .wp-block-cover__inner-container > *:has(.edc-hero-video) {
	position: static;
}

/* Everything else inside the cover stacks above the video + scrim.
   The :not(.edc-hero-video) exclusion is load-bearing: :has() only matches
   ANCESTORS of the video, so without it this rule catches the video wrapper
   itself, flips it to position:relative, and collapses it to zero height. */
.wp-block-cover:has(.edc-hero-video) .wp-block-cover__inner-container > *:not(:has(.edc-hero-video)):not(.edc-hero-video) {
	position: relative;
	z-index: 1;
}

/* Full-bleed wrapper over the whole cover. container-type lets the iframe
   size itself against the ACTUAL cover box (cqw/cqh) instead of the viewport —
   viewport units under-covered whenever the hero ran taller than the vw/vh
   math assumed, leaving an uncovered band at the bottom. */
.edc-hero-video {
	position: absolute;
	inset: 0;
	container-type: size;
	overflow: hidden;
	pointer-events: none;
	max-width: 100%;
	z-index: -1;
}

/* 16:9 iframe, centered, sized to always cover the hero in both directions —
   exactly background-size: cover (fills by cropping edges, never stretches).
   The two max() pairs flip at the same container ratio, so 16:9 always holds. */
.edc-hero-video iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 0;
	width: max(100cqw, 177.78cqh);
	height: max(56.25cqw, 100cqh);
}

/* Dark scrim so the headline stays readable over the moving video */
.edc-hero-video::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
}

/* ==========================================================================
   Header — floating pill
   ========================================================================== */

/* Fixed overlay — transparent wrapper, pill provides the visual surface */
.site-header {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
	padding: 0.75rem 1rem;
	background: transparent !important;
	border-bottom: none !important;
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* WP admin bar pushes fixed elements down */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

/* In the Site Editor, neutralize fixed/absolute positioning so the header sits
   inline and never covers other blocks — otherwise it overlaps the canvas and
   you can't click blocks (or validation-recovery prompts) underneath it. */
.editor-styles-wrapper .site-header,
.editor-styles-wrapper .site-header-overlay {
	position: relative !important;
	transform: none !important;
	top: auto !important;
}

/* Hides when scrolling down, reappears on scroll up (class toggled by JS) */
.site-header.is-scrolled-down {
	transform: translateY(-110%);
}

/* Pill container. max-width and border-radius are in the transition list so
   the pill-to-full-bar shift (.is-solid) animates instead of snapping. */
.edc-header-main-row {
	background: rgba(255, 255, 255, 0.96) !important;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-radius: 60px !important;
	border: 1px solid rgba(201, 162, 40, 0.22) !important;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.09), 0 1px 4px rgba(0, 0, 0, 0.05);
	padding: 0.5rem 1.5rem !important;
	transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease,
		border-radius 0.35s cubic-bezier(0.4, 0, 0.2, 1),
		max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
		padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Schedule CTA button — styled here so the block markup stays inline-style-free
   (inline styles on hand-authored buttons are what triggered the validation
   "attempt recovery" warnings). */
.edc-header-cta .wp-block-button__link {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--ink);
	border-radius: 50px;
	padding: 0.625rem 1.25rem;
	font-weight: 700;
	font-size: 0.875rem;
}

.edc-header-cta .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary-dark) !important;
	color: var(--wp--preset--color--ink);
}

/* After scrolling (.is-solid, toggled by JS), the floating pill becomes a
   full-width squared bar — no rounded corners, no side gutters */
.site-header.is-solid {
	padding: 0 !important;
}

.site-header.is-solid .edc-header-main-row {
	border-radius: 0 !important;
	/* 100vw, not `none` — `none` can't be animated, a length can */
	max-width: 100vw;
	border-top: 0 !important;
	border-left: 0 !important;
	border-right: 0 !important;
	gap 5px;
}

/* ==========================================================================
   Mobile menu (navigation overlay)
   ========================================================================== */

/* The open menu is position:fixed, but backdrop-filter on the pill and the
   scroll-hide transform on the header both create CSS containing blocks that
   trap it INSIDE the pill. Lift both while the menu is open so the overlay
   can actually cover the viewport. */
.site-header:has(.has-modal-open) {
	transform: none !important;
}

.site-header:has(.has-modal-open) .edc-header-main-row {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* The open menu panel is white — force dark text and controls. (The overlay
   header otherwise paints nav links white → white-on-white.) */
.site-header .wp-block-navigation__responsive-container.has-modal-open {
	color: var(--wp--preset--color--ink);
}

.site-header .has-modal-open .wp-block-navigation a,
.site-header .has-modal-open .wp-block-navigation-item__content,
.site-header-overlay .has-modal-open .wp-block-navigation a,
.site-header-overlay .has-modal-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink) !important;
}

/* Nav link hover */
.site-header .wp-block-navigation__container > .wp-block-navigation-item > a {
	padding: 0.4rem 0.65rem;
	border-radius: 5px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.site-header .wp-block-navigation__container > .wp-block-navigation-item > a:hover {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--charcoal);
}

/* Mobile pill */
@media (max-width: 600px) {
	.site-header { padding: 0.625rem 0.75rem; }
	.edc-header-main-row {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
		border-radius: 40px !important;
	}
}

/* ==========================================================================
   Header overlay variant (homepage / full-bleed hero pages)
   Fixed like the standard header so it can hide on scroll, but starts
   transparent OVER the hero (no body padding — the hero sits beneath it) and
   turns into the solid pill once .is-solid is added (JS, past the hero top).
   ========================================================================== */

.site-header-overlay {
	/* position: fixed inherited from .site-header; just nudge the top spacing */
	padding-top: 1.25rem !important;
}

/* Transparent glass pill while sitting over the hero
   (transition comes from the base .edc-header-main-row rule) */
.site-header-overlay .edc-header-main-row {
	background: rgba(255, 255, 255, 0.1) !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
}

/* Logo: the site logo artwork is white — shown as-is over the hero, darkened
   to black once the bar turns solid so it reads on the white background */
.site-header-overlay .wp-block-site-logo img {
	transition: filter 0.3s ease;
}

.site-header-overlay.is-solid .wp-block-site-logo img {
	filter: brightness(0);
}

/* The standard header (inner pages) is always a solid white bar, so the white
   logo needs the black treatment at all times there */
.site-header:not(.site-header-overlay) .wp-block-site-logo img {
	filter: brightness(0);
}

/* Nav links: white text over the dark hero */
.site-header-overlay .wp-block-navigation,
.site-header-overlay .wp-block-navigation a,
.site-header-overlay .wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.92) !important;
}

.site-header-overlay .wp-block-navigation__container > .wp-block-navigation-item > a:hover {
	background-color: rgba(255, 255, 255, 0.15) !important;
	color: #ffffff !important;
}

/* Scrolled past the hero: become the solid white pill */
.site-header-overlay.is-solid .edc-header-main-row {
	background: rgba(255, 255, 255, 0.96) !important;
	border-color: rgba(201, 162, 40, 0.22) !important;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.09), 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* ...and flip nav text to dark so it's readable on the solid pill */
.site-header-overlay.is-solid .wp-block-navigation,
.site-header-overlay.is-solid .wp-block-navigation a,
.site-header-overlay.is-solid .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink) !important;
}

.site-header-overlay.is-solid .wp-block-navigation__container > .wp-block-navigation-item > a:hover {
	background-color: var(--wp--preset--color--surface) !important;
	color: var(--wp--preset--color--charcoal) !important;
}

/* ==========================================================================
   Action bar SVG icons
   ========================================================================== */

.edc-action-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.edc-action-icon svg {
	display: block;
	flex-shrink: 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* Set base text color at the footer level — avoids fighting the cascade
   on every individual paragraph block */
.site-footer,
.site-footer p,
.site-footer li,
.site-footer a {
	color: rgba(255, 255, 255, 0.65);
}

.site-footer h4 {
	color: #C9A228;
}

.site-footer a:hover {
	color: #C9A228;
	text-decoration: none;
}

/* Copyright bar gets slightly dimmer text */
.site-footer .footer-bottom p {
	color: rgba(255, 255, 255, 0.35);
}

.footer-links {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.footer-links li {
	margin-bottom: 0.45rem;
}

/* Gold overrides — used on specific elements like the star rating and links */
/* .site-footer .has-gold-color,
.site-footer [style*="color:#C9A228"],
.site-footer [style*="color: #C9A228"] {
	color: #C9A228 !important;
} */

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
	.edc-section    { padding-top: 3rem; padding-bottom: 3rem; }
	.edc-section-sm { padding-top: 2rem; padding-bottom: 2rem; }

	.edc-action-item {
		flex: 1 1 50%;
		border-right: none;
		border-bottom: 1px solid var(--wp--preset--color--border);
	}
}