/**
 * Site-wide link-color fix + a couple of reusable card patterns ported from
 * the Astro build. Enqueued everywhere (small, no page-specific gating).
 */

/* WP core (via theme.json's elements.link) gives every <a> its own specified
 * color, and a specified value on the element itself always beats an
 * inherited one — so a link nested inside a white/navy heading or paragraph
 * (has-base-color, has-contrast-color, etc.) renders in the global link blue
 * instead of the color its container asked for. This was the footer's
 * dropdown-nav bullets and the home page's "Buying a home" / "Refinancing"
 * card titles all showing as blue text. Force those nested links back to the
 * color their container actually set.
 */
.has-text-color a:where(:not(.wp-element-button)) {
	color: inherit;
}

/* Global "never underline, change color instead" rule for every link's hover
 * and focus state (nav items included) — theme.json's elements.link :hover
 * already sets text-decoration:none, but that's emitted at :where() (zero)
 * specificity into a global-styles block WP caches separately from template
 * changes, so it can lag behind an edit. !important here is a deliberate,
 * unconditional backstop so hover never shows an underline anywhere, full
 * stop, regardless of that cache.
 */
a:hover,
a:focus {
	text-decoration: none !important;
}

/* Contact page "ways to reach us" cards — mirrors the Astro build's
 * ContactMethods.astro: white rounded-2xl card, soft shadow, lifts on hover.
 */
.df-contact-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	text-align: center;
	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--contrast, #002855);
	border-radius: 16px;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -4px rgba(0, 0, 0, 0.15);
	padding: 2.5rem 1.5rem;
	transition: transform 0.2s ease;
}

.df-contact-card:hover {
	transform: translateY(-5px);
}

.df-contact-card svg {
	width: 2.5rem;
	height: 2.5rem;
	color: var(--wp--preset--color--accent-1, #0058bb);
}

.df-contact-card-label {
	font-weight: 700;
}

.df-contact-card-value {
	font-size: 0.9rem;
}

/* Home page "Find the right loan for you" cards — the whole image should act
 * as the button, not just the small text link inside it: the card lifts and
 * darkens slightly on hover, and the link's hit area is stretched to cover
 * the full card (not just the heading text) via .df-card-link-stretched.
 */
.df-hero-card {
	position: relative;
	overflow: hidden;
	transition: transform 0.2s ease;
}

.df-hero-card:hover {
	transform: scale(1.02);
}

.df-hero-card:hover .wp-block-cover__background {
	opacity: 0.65 !important;
}

.df-card-link-stretched::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Loans hub "How can we help?" cards (/loans/) — core's columns block forces
 * every column into one flex row until its ~782px mobile breakpoint, so 6
 * cards get squeezed narrow enough that headings like "First home buyers"
 * wrap mid-word. Reflows to a proper responsive grid instead. */
.df-loan-cards.wp-block-columns {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
}

.df-loan-cards.wp-block-columns > .wp-block-column {
	width: 100% !important;
	flex-basis: auto !important;
}

@media (max-width: 900px) {
	.df-loan-cards.wp-block-columns {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.df-loan-cards.wp-block-columns {
		grid-template-columns: 1fr;
	}
}

/* Calculator-picker cards (/calculators/) — mirrors Astro's calculators/index.astro
 * exactly: brand-gradient background, white text (not the white-card/navy-text
 * treatment used elsewhere), lifts on hover. Lives here (not calculators.css)
 * because that stylesheet only loads on pages using the [df_calculator]
 * shortcode itself — the hub page that lists these cards doesn't.
 */
.df-calc-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	height: 100%;
	box-sizing: border-box;
	border-radius: 12px;
	padding: 1.5rem;
	background: linear-gradient(to top right, var(--wp--preset--color--contrast, #002855), var(--wp--preset--color--accent-1, #0058bb));
	color: #ffffff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
	transition: transform 0.2s ease;
}

.df-calc-card:hover {
	transform: translateY(-4px);
}

.df-calc-card-heading {
	font-size: 1.15rem;
	font-weight: 800;
}

.df-calc-card-text {
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.85);
}

.df-calc-card-cta {
	margin-top: auto;
	font-weight: 700;
	font-size: 0.9rem;
}