/* =====================================================================
 * Your Carmel Dentist - component overrides.
 *
 * Scoped, brand-specific styling that layers on top of vgs-base primitives.
 * Keep components additive: no resets, no unrelated rewrites.
 *
 * vgs-base already provides: sticky header + backdrop blur + is-scrolled
 * class toggling from vgs.js. We add: logo sizing, header layout, hours
 * dropdown, directions button, phone CTA, scroll-triggered shadow.
 * ===================================================================== */

/* -----------------------------------------------------------------
 * 1. Header custom-logo sizing.
 *
 * WP's the_custom_logo() outputs <a class="custom-logo-link"><img class="custom-logo">.
 * Target the direct child so the rule cannot leak. The CDA logo is 900 x 689
 * (aspect 1.306:1). Cap at 70px desktop per brand direction; shrink at mobile.
 * ----------------------------------------------------------------- */
.vgs-header__brand .custom-logo-link > img,
.custom-logo-link > img.custom-logo {
	display: block;
	max-height: 70px;
	height: auto;
	width: auto;
	max-width: 260px;
	object-fit: contain;
}

@media (max-width: 768px) {
	.vgs-header__brand .custom-logo-link > img,
	.custom-logo-link > img.custom-logo {
		max-height: 56px;
		max-width: 200px;
	}
}

@media (max-width: 420px) {
	.vgs-header__brand .custom-logo-link > img,
	.custom-logo-link > img.custom-logo {
		max-height: 48px;
		max-width: 170px;
	}
}

/* -----------------------------------------------------------------
 * 2. Header shell polish (works with vgs-base sticky + blur).
 *
 * Adds a subtle lift-on-scroll via the .is-scrolled class that
 * vgs.js toggles when scrollY > 8.
 * ----------------------------------------------------------------- */
.vgs-header {
	transition: box-shadow 200ms ease, background-color 200ms ease, border-color 200ms ease;
}
.vgs-header.is-scrolled {
	background: color-mix(in srgb, var(--color-bg-page) 98%, transparent);
	box-shadow: 0 6px 24px -12px rgba(15, 30, 42, 0.20);
	border-bottom-color: transparent;
}

/* -----------------------------------------------------------------
 * 3. Header layout: brand hard-left, actions hard-right.
 *
 * Explicit rather than relying on justify-content:space-between so the
 * layout does not shift when there are 1-3 action items or on odd
 * breakpoints. margin-right:auto on the brand + no flex-grow on actions
 * guarantees the split.
 * ----------------------------------------------------------------- */
.vgs-header__inner {
	gap: 1rem;
}

.vgs-header__brand {
	margin-right: auto;
	margin-left: 0;
}

.vgs-header__actions {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
}

/* -----------------------------------------------------------------
 * 4. Shared header action styling (Hours toggle + Directions).
 *
 * Ghost-button look: transparent bg, brand-blue text + border on hover.
 * Same rounded pill as the primary CTA so the three read as a set.
 * ----------------------------------------------------------------- */
.vgs-header__hours-toggle,
.vgs-header__directions {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.55rem 0.9rem;
	color: var(--color-text-primary);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 999px;
	text-decoration: none;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 0.92rem;
	line-height: 1;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
	white-space: nowrap;
}
.vgs-header__hours-toggle:hover,
.vgs-header__hours-toggle:focus-visible,
.vgs-header__directions:hover,
.vgs-header__directions:focus-visible {
	color: var(--color-brand-primary);
	background: var(--color-bg-subtle);
}

.vgs-header__action-icon {
	flex-shrink: 0;
	color: var(--color-brand-accent);
}

/* -----------------------------------------------------------------
 * 5. Hours dropdown (details/summary, no JS needed).
 *
 * <summary> is the trigger; the .vgs-header__hours-panel appears below,
 * absolutely positioned so it does not push the header layout when open.
 * ----------------------------------------------------------------- */
.vgs-header__hours {
	position: relative;
}

/* Remove browser default disclosure triangle. */
.vgs-header__hours > summary {
	list-style: none;
}
.vgs-header__hours > summary::-webkit-details-marker {
	display: none;
}

/* Chevron indicator, rotates on open. */
.vgs-header__hours > summary::after {
	content: "";
	display: inline-block;
	width: 0.55rem;
	height: 0.55rem;
	margin-left: 0.15rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-1px);
	transition: transform 180ms ease;
	opacity: 0.7;
}
.vgs-header__hours[open] > summary::after {
	transform: rotate(-135deg) translateY(2px);
}

.vgs-header__hours-panel {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	min-width: 260px;
	padding: 0.75rem 1rem;
	background: var(--color-bg-page);
	border: 1px solid var(--color-border-default);
	border-radius: 12px;
	box-shadow: 0 14px 36px -18px rgba(15, 30, 42, 0.28);
	z-index: 60;
}

.vgs-header__hours-list {
	margin: 0;
	padding: 0;
	font-family: var(--font-body);
	font-size: 0.92rem;
	line-height: 1.5;
}
.vgs-header__hours-row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.25rem 0;
}
.vgs-header__hours-row + .vgs-header__hours-row {
	border-top: 1px solid var(--color-border-default);
}
.vgs-header__hours-row dt {
	color: var(--color-text-primary);
	font-weight: 500;
}
.vgs-header__hours-row dd {
	margin: 0;
	color: var(--color-text-secondary);
}
.vgs-header__hours-row.is-closed dd {
	color: var(--color-text-secondary);
	opacity: 0.75;
}

/* -----------------------------------------------------------------
 * 6. Primary phone CTA.
 * ----------------------------------------------------------------- */
.vgs-header__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.7rem 1.1rem;
	background: var(--color-brand-primary);
	color: var(--color-text-inverse);
	border-radius: 999px;
	text-decoration: none;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1;
	letter-spacing: 0.01em;
	transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
	box-shadow: 0 2px 0 0 rgba(15, 91, 132, 0.15);
	white-space: nowrap;
}
.vgs-header__cta:hover,
.vgs-header__cta:focus-visible {
	background: var(--color-brand-primary-hover);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px -6px rgba(23, 116, 163, 0.45);
	color: var(--color-text-inverse);
}
.vgs-header__cta:active {
	transform: translateY(0);
	box-shadow: 0 1px 0 0 rgba(15, 91, 132, 0.20);
}
.vgs-header__cta-icon {
	flex-shrink: 0;
}
.vgs-header__cta-label { display: inline; }
.vgs-header__cta-short { display: none; }

/* -----------------------------------------------------------------
 * 7. Responsive: shrink actions gracefully.
 *
 * Tablet: Hours + Directions collapse to icon-only (label hidden).
 * Small mobile: Hours + Directions hide entirely to preserve room
 *   for the primary Call CTA. Users can still find hours + directions
 *   in the location section further down the page.
 * ----------------------------------------------------------------- */
@media (max-width: 900px) {
	.vgs-header__hours-toggle .vgs-header__action-label,
	.vgs-header__directions .vgs-header__action-label {
		display: none;
	}
	.vgs-header__hours > summary::after {
		display: none;
	}
	.vgs-header__hours-toggle,
	.vgs-header__directions {
		padding: 0.55rem;
	}
}

@media (max-width: 560px) {
	.vgs-header__hours,
	.vgs-header__directions {
		display: none;
	}
	.vgs-header__cta {
		padding: 0.6rem 0.85rem;
		font-size: 0.9rem;
	}
	.vgs-header__cta-label { display: none; }
	.vgs-header__cta-short { display: inline; }
}

/* -----------------------------------------------------------------
 * 8. Form embed + Fluent Forms submit button.
 *
 * Fluent Forms ships its own .ff-btn class. Extend to match the site
 * button family: rounded pill, brand primary color, hover lift.
 * ----------------------------------------------------------------- */
.vgs-form-embed {
	margin-top: 1.5rem;
}

.vgs-form-embed .ff-btn,
.vgs-form-embed .ff-btn-submit,
.vgs-form-embed button[type="submit"] {
	background: var(--color-brand-primary) !important;
	color: var(--color-text-inverse) !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 0.75rem 1.5rem !important;
	font-family: var(--font-display) !important;
	font-weight: 600 !important;
	font-size: 0.95rem !important;
	letter-spacing: 0.01em !important;
	line-height: 1 !important;
	min-height: 44px;
	box-shadow: 0 2px 0 0 rgba(15, 91, 132, 0.15) !important;
	transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease !important;
	cursor: pointer;
}
.vgs-form-embed .ff-btn:hover,
.vgs-form-embed .ff-btn:focus-visible,
.vgs-form-embed button[type="submit"]:hover,
.vgs-form-embed button[type="submit"]:focus-visible {
	background: var(--color-brand-primary-hover) !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 18px -6px rgba(23, 116, 163, 0.45) !important;
}
.vgs-form-embed .ff-btn:active,
.vgs-form-embed button[type="submit"]:active {
	transform: translateY(0) !important;
}

/* -----------------------------------------------------------------
 * 8b. Promo offer cards.
 *
 * Three-column grid on desktop, single column on mobile. Cards use
 * subtle brand-blue tint, a decorative icon top-left, a value line
 * in accent color for scan-ability, and a primary CTA that scrolls
 * to the form section with the offer pre-filled.
 * ----------------------------------------------------------------- */
.vgs-offers__grid {
	display: grid;
	gap: 1.5rem;
	margin-top: 2rem;
}
@media (min-width: 720px)  { .vgs-offers__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .vgs-offers__grid { grid-template-columns: repeat(3, 1fr); } }

.vgs-offer-card {
	display: flex;
	flex-direction: column;
	padding: 1.75rem;
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-default);
	border-radius: 14px;
	box-shadow: 0 12px 32px -24px rgba(15, 30, 42, 0.20);
	transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.vgs-offer-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 24px 48px -24px rgba(23, 116, 163, 0.28);
	border-color: var(--color-brand-accent);
}

.vgs-offer-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 1rem;
	background: color-mix(in srgb, var(--color-brand-accent) 15%, transparent);
	color: var(--color-brand-primary);
	border-radius: 12px;
}
.vgs-offer-card__icon .vgs-icon { width: 22px; height: 22px; }

.vgs-offer-card__badge {
	align-self: flex-start;
	margin-bottom: 0.75rem;
	padding: 0.25rem 0.65rem;
	background: color-mix(in srgb, var(--color-brand-primary) 10%, transparent);
	color: var(--color-brand-primary);
	border-radius: 999px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.vgs-offer-card__title {
	margin: 0 0 0.35rem;
	font-family: var(--font-display);
	font-size: 1.25rem;
	line-height: 1.25;
	color: var(--color-text-primary);
}

.vgs-offer-card__value {
	margin: 0 0 0.75rem;
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--color-brand-accent);
	font-size: 1rem;
	letter-spacing: 0.01em;
}

.vgs-offer-card__desc {
	margin: 0 0 1.5rem;
	color: var(--color-text-secondary);
	font-size: 0.95rem;
	line-height: 1.5;
	flex-grow: 1;
}

.vgs-offer-card__cta {
	align-self: flex-start;
}

/* -----------------------------------------------------------------
 * 9. Two-column marketing sections (vgs_render_section_two_col).
 *
 * Content beside image. Mobile stacks with image above by default;
 * .vgs-two-col--image-left keeps the image visually left on desktop
 * by reordering the second flex/grid item.
 * ----------------------------------------------------------------- */
.vgs-two-col__inner {
	display: grid;
	gap: 2rem;
	align-items: center;
}

@media (min-width: 800px) {
	.vgs-two-col__inner {
		grid-template-columns: 1fr 1fr;
		gap: 3.5rem;
	}
	/* Default (image right): DOM order is media, body -> visually swap
	   so the body reads first on the left. */
	.vgs-two-col--image-right .vgs-two-col__media { order: 2; }
	.vgs-two-col--image-right .vgs-two-col__body  { order: 1; }
	/* Image left: DOM order = visual order. */
	.vgs-two-col--image-left  .vgs-two-col__media { order: 1; }
	.vgs-two-col--image-left  .vgs-two-col__body  { order: 2; }
}

.vgs-two-col__media img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 24px 60px -32px rgba(15, 30, 42, 0.35);
	display: block;
}

.vgs-two-col__body .vgs-eyebrow {
	color: var(--color-brand-accent);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.78rem;
	margin: 0 0 0.5rem;
}

.vgs-two-col__body .vgs-display--section {
	margin: 0 0 1rem;
}

.vgs-two-col__bullets {
	list-style: none;
	padding: 0;
	margin: 1.25rem 0 0;
}
.vgs-two-col__bullets li {
	position: relative;
	padding: 0.4rem 0 0.4rem 1.75rem;
	color: var(--color-text-primary);
}
.vgs-two-col__bullets li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.85rem;
	width: 0.85rem;
	height: 0.5rem;
	border-left: 2px solid var(--color-brand-primary);
	border-bottom: 2px solid var(--color-brand-primary);
	transform: rotate(-45deg);
}

/* -----------------------------------------------------------------
 * 10b. Global button treatment: rounded pill + icon-friendly.
 *
 * Every .vgs-btn on the LP reads as a rounded pill so the header
 * CTA, hero CTAs, offer CTAs, and final CTA all sit in the same
 * visual family (Riverwoods muse). Overrides vgs-base's default
 * small border-radius without touching the parent.
 * ----------------------------------------------------------------- */
.vgs-btn {
	border-radius: 999px;
	padding: 0.75rem 1.35rem;
	font-family: var(--font-display);
	transition: background-color 160ms ease, color 160ms ease,
	            transform 160ms ease, box-shadow 160ms ease,
	            border-color 160ms ease;
}
.vgs-btn:hover,
.vgs-btn:focus-visible {
	transform: translateY(-1px);
}
.vgs-btn:active {
	transform: translateY(0);
}

/* Primary keeps CDA blue with a soft lift shadow on hover. */
.vgs-btn--primary {
	box-shadow: 0 2px 0 0 rgba(15, 91, 132, 0.15);
}
.vgs-btn--primary:hover,
.vgs-btn--primary:focus-visible {
	box-shadow: 0 6px 18px -6px rgba(23, 116, 163, 0.45);
}

/* Icon-in-button: inline SVG next to label with consistent gap. */
.vgs-btn--icon {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
}
.vgs-btn--icon .vgs-icon {
	flex-shrink: 0;
}

/* CTA row: consistent gap and wrap on small screens. */
.vgs-cta-row {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.25rem;
}
.vgs-cta-row--center {
	justify-content: center;
}

/* -----------------------------------------------------------------
 * 10c. Trust bar with icons.
 *
 * Each chip: icon + text, both inline. Icons use the CDA bright
 * blue accent to catch the eye without shouting.
 * ----------------------------------------------------------------- */
.vgs-trust__row {
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem 2rem;
}
.vgs-trust__item--text {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	white-space: nowrap;
}
.vgs-trust__item--text p {
	margin: 0;
	color: var(--color-text-primary);
	font-size: 0.95rem;
}
.vgs-trust__icon {
	display: inline-flex;
	color: var(--color-brand-accent);
}
.vgs-trust__icon .vgs-icon {
	width: 20px;
	height: 20px;
}

/* -----------------------------------------------------------------
 * 11. Section eyebrow accent.
 *
 * Consistent eyebrow treatment across all section types uses the
 * brand accent (bright CDA blue) uppercase + tracked. Keeps the LP
 * visually cohesive.
 * ----------------------------------------------------------------- */
.vgs-eyebrow {
	color: var(--color-brand-accent);
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.78rem;
}
.vgs-eyebrow--on-inverse {
	color: var(--color-text-inverse-secondary);
}