/*
Theme Name: Krystalearna
Theme URI: https://krystalearna.com
Author: Etuitive Technology Solutions
Description: Krystalearna brand theme. Child of Twenty Twenty-Five: navy and gold palette, Cinzel and Montserrat, page patterns for programmes, corporate training and enrolment.
Template: twentytwentyfive
Version: 1.0.1
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: krystalearna
*/

/* Sticky header with a hairline under it. */
.kl-header {
	position: sticky;
	top: 0;
	z-index: 50;
	box-shadow: 0 1px 0 var(--wp--preset--color--accent-6);
}
.admin-bar .kl-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .kl-header { top: 0; } }

.kl-eyebrow { letter-spacing: 0.16em; text-transform: uppercase; }

/* Cards fill their column and lift slightly on hover. */
.wp-block-column > .kl-card { height: 100%; }
.kl-card { transition: transform .2s ease, box-shadow .2s ease; }
.kl-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(2, 26, 70, .10); }

.kl-photo img { border-radius: 14px; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.kl-step-number { font-family: var(--wp--preset--font-family--heading); line-height: 1; }

:where(a, button, .wp-element-button):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-1);
	outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
	.kl-card, .kl-card:hover { transition: none; transform: none; }
}

/* Full-width sections sit flush; no white gaps between bands. */
.wp-site-blocks > * + *,
.wp-block-post-content > .alignfull + .alignfull,
.wp-block-post-content > .alignfull:first-child { margin-block-start: 0; }
.kl-card > .wp-block-buttons { margin-top: auto; }
.kl-header .wp-block-image img { width: 190px; height: auto; }
@media (max-width: 600px) {
	.kl-header .wp-block-image img { width: 150px; }
}
/* Footer: 2x2 grid between phone and desktop so emails never break mid-word. */
@media (min-width: 782px) and (max-width: 1100px) {
	.kl-footer-cols { flex-wrap: wrap !important; }
	.kl-footer-cols > .wp-block-column { flex-basis: calc(50% - 2rem) !important; flex-grow: 0; }
}
.kl-footer-cols a { overflow-wrap: normal; }