/* TrustiVet theme: layout details that theme.json cannot express. Colours and fonts come from theme.json. */

:root { --tv-radius: 12px; }

/* No gap between header, page and footer: sections carry their own spacing. */
.wp-site-blocks > * + * { margin-block-start: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

:where(a, button, input, textarea):focus-visible { outline: 3px solid var(--wp--preset--color--pine); outline-offset: 3px; }

/* ---------- header ---------- */
.tv-header { position: sticky; top: 0; z-index: 20; }
.admin-bar .tv-header { top: 32px; }
.tv-header .wp-block-site-title a { text-decoration: none; }
.tv-mark img { border-radius: 8px; }
.tv-header .wp-block-navigation a { text-decoration: none; padding: 0.4rem 0.2rem; }
.tv-header .wp-block-navigation a:hover { text-decoration: underline; text-underline-offset: 6px; }

/* ---------- sections ---------- */
.tv-section { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); }

/* ---------- hero ---------- */
.tv-hero { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--50); }
.tv-eyebrow {
	font-size: var(--wp--preset--font-size--small); font-weight: 700; letter-spacing: 0.12em;
	text-transform: uppercase; color: var(--wp--preset--color--pine); margin-bottom: 0.75rem;
}
.tv-hero h1 { text-wrap: balance; margin-bottom: 1rem; }
.tv-hero .wp-block-buttons { margin-top: 1.5rem; }
/* The photo has a white background; multiply lets it melt into the off-white page. */
.tv-hero-img img {
	width: 100%; height: auto; mix-blend-mode: multiply; display: block;
	-webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 58%, transparent 100%);
	mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 58%, transparent 100%);
}
@media (max-width: 781px) { .tv-hero-img { max-width: 420px; margin-inline: auto; } }

/* ---------- call-to-action band ---------- */
.tv-cta { padding-top: 1.75rem; padding-bottom: 1.75rem; }
.tv-cta-title { font-size: var(--wp--preset--font-size--x-large); margin: 0; max-width: 28ch; text-wrap: balance; }
.tv-cta-title strong { color: var(--wp--preset--color--lime); font-weight: 800; }

/* ---------- services ---------- */
.tv-services h2 { margin-bottom: var(--wp--preset--spacing--40); }
.tv-grid { gap: 1rem; }
.tv-card {
	background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--tv-radius); padding: 1.5rem; min-width: 0;
}
.tv-card h3 { margin: 0 0 0.6rem; }
.tv-card p { margin: 0; color: var(--wp--preset--color--muted); }

/* ---------- contact ---------- */
.tv-contact-cols { gap: var(--wp--preset--spacing--50); }
.tv-label {
	margin: 1.5rem 0 0.15rem; font-size: var(--wp--preset--font-size--small); font-weight: 700;
	letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--pine);
}
.tv-value { margin: 0; font-size: var(--wp--preset--font-size--large); font-weight: 600; overflow-wrap: anywhere; }
.tv-contact .wp-block-buttons { margin-top: 1.75rem; }

.tv-wa-form {
	background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--tv-radius); padding: clamp(1.25rem, 3vw, 2rem);
}
.tv-wa-title { margin: 0 0 1rem; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: var(--wp--preset--font-size--large); }
.tv-wa-form p { margin: 0 0 1rem; }
.tv-wa-form label { display: block; font-weight: 600; font-size: var(--wp--preset--font-size--small); margin-bottom: 0.3rem; }
.tv-wa-form input[type="text"], .tv-wa-form input[type="email"], .tv-wa-form textarea {
	width: 100%; font: inherit; color: inherit; background: var(--wp--preset--color--white);
	border: 1px solid #B9C4B8; border-radius: 8px; padding: 0.7rem 0.8rem;
}
.tv-wa-form button { cursor: pointer; border: 0; }
.tv-wa-note { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); margin: 0 !important; }

/* ---------- footer ---------- */
.tv-footer a { color: var(--wp--preset--color--white); text-decoration: none; opacity: 0.9; }
.tv-footer a:hover { text-decoration: underline; opacity: 1; }
.tv-footer p { margin-block: 0.25rem; }
.tv-footer-title { font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--lime); }
.tv-footer-list { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.tv-footer-list li { margin: 0.35rem 0; }
.tv-copyright { opacity: 0.75; border-top: 1px solid rgba(255, 255, 255, 0.18); padding-top: 1.25rem; }