/*
Theme Name: SKT Ieper
Description: Blokthema voor Basket SKT Ieper. Werkt samen met de plugin SKT Club.
Version: 1.2.8
Requires at least: 6.6
Requires PHP: 8.0
Author: Basket SKT Ieper
Text Domain: skt-ieper
*/

/* Template parts and sections sit flush against each other */
.wp-site-blocks > * { margin-block-start: 0; }

/* Off-canvas elements (mini-cart drawer) must not widen the page */
html, body { overflow-x: clip; }
.skt-header > * + * { margin-block-start: 0; }

/* Club logo: white round background plus a 1px white ring (box-shadow, so the layout size stays the same) */
.wp-block-site-logo img { background: #FFFFFF; border-radius: 50%; box-shadow: 0 0 0 1px #FFFFFF; }
.wp-block-site-logo { padding: 1px; }

/* Header */
.skt-header { position: sticky; top: 0; z-index: 50; }
.admin-bar .skt-header { top: var(--wp-admin--admin-bar--height, 0); }
.skt-header .wp-block-site-logo img { width: 56px; height: 56px; } /* fixed size (logo is square): with width/height auto the image is 0×0 until loaded and only the white ring shows as a dot */
.skt-header .wp-block-navigation a:hover { color: var(--wp--preset--color--accent); }
.skt-header .wp-block-navigation__submenu-container { border: 0 !important; border-radius: 10px; padding: 6px !important; box-shadow: var(--wp--preset--shadow--card); }
.skt-header .wp-block-navigation__submenu-container a { color: var(--wp--preset--color--contrast); text-transform: none; letter-spacing: 0; font-weight: 600; padding: 6px 10px !important; border-radius: 6px; }
.skt-header .wp-block-navigation__submenu-container a:hover { background: var(--wp--preset--color--surface); }
.skt-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--primary) !important; color: #fff !important; }
.skt-header .is-menu-open .wp-block-navigation__submenu-container { box-shadow: none; background: transparent !important; }
.skt-header .is-menu-open .wp-block-navigation__submenu-container a { color: #fff; }
/* Mobile menu: large, left-aligned tap targets */
.skt-header .wp-block-navigation__responsive-container.is-menu-open { --navigation-layout-justification-setting: flex-start; --navigation-layout-justify: flex-start; }
.skt-header .is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start !important; padding: 32px 8px !important; }
.skt-header .is-menu-open .wp-block-navigation__container { align-items: flex-start !important; gap: 18px !important; }
.skt-header .is-menu-open .wp-block-navigation-item { align-items: flex-start !important; font-size: 1.35rem; }
.skt-header .is-menu-open .wp-block-navigation__submenu-container { padding: 8px 0 0 16px !important; gap: 10px; }
.skt-header .is-menu-open .wp-block-navigation__submenu-container a { font-size: 1.1rem; text-transform: none; letter-spacing: 0; padding: 4px 0 !important; }

/* Page title band */
.skt-page-hero { position: relative; overflow: hidden; }
.skt-page-hero::after {
	content: "";
	position: absolute;
	right: -80px;
	bottom: -160px;
	width: 360px;
	height: 360px;
	border-radius: 50%;
	border: 36px solid rgba(10, 161, 199, 0.18);
	pointer-events: none;
}

/* News cards (query loop) */
.skt-news .wp-block-post { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
.skt-news .wp-block-post:hover { transform: translateY(-2px); box-shadow: var(--wp--preset--shadow--card); }
.skt-news .wp-block-post-featured-image { margin: 0; aspect-ratio: 16 / 9; background: var(--wp--preset--color--primary); }
.skt-news .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.skt-news .wp-block-post:not(:has(.wp-block-post-featured-image)) { border-top: 6px solid var(--wp--preset--color--accent); }
.skt-news .wp-block-post-title a { color: var(--wp--preset--color--primary); text-decoration: none; }
.skt-news .wp-block-post-title a:hover { color: var(--wp--preset--color--accent); }

/* Section heading with link on the right */
.skt-section-head { align-items: baseline !important; }
.skt-section-head a { font-weight: 700; text-decoration: none; }

/* Footer */
.skt-footer a { color: #fff; }
.skt-footer a:hover { color: var(--wp--preset--color--accent); }
.skt-footer .wp-block-site-logo img { width: 72px; height: 72px; }

/* Focus visibility */
:where(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--wp--preset--color--accent); outline-offset: 2px; }

/* WooCommerce: keep buttons in club style */
.woocommerce .button, .wc-block-components-button:not(.is-link) { border-radius: 999px !important; }

/* Homepage banner: the photo carries the slogan; intro and quick links sit on the floor at the bottom. */
.wp-block-cover.skt-hero { min-height: clamp(440px, 48vw, 760px) !important; background-color: var(--wp--preset--color--primary); }
.wp-block-cover.skt-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(to top, rgba(10, 29, 47, 0.92), rgba(10, 29, 47, 0.55) 45%, rgba(10, 29, 47, 0)); pointer-events: none; z-index: 1; }
.wp-block-cover.skt-hero .wp-block-cover__inner-container { position: relative; z-index: 2; }
.wp-block-cover.skt-hero .skt-hero__intro { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }
/* Phones: the whole banner on top (slogan readable), text and buttons below it on navy. */
@media (max-width: 781px) {
	.wp-block-cover.skt-hero { display: block; min-height: 0 !important; padding: 0 0 var(--wp--preset--spacing--50) !important; background: var(--wp--preset--color--primary); }
	.wp-block-cover.skt-hero .wp-block-cover__image-background { position: static; display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-position: 50% 50% !important; -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent); mask-image: linear-gradient(to bottom, #000 75%, transparent); }
	.wp-block-cover.skt-hero::after { display: none; }
	.wp-block-cover.skt-hero .wp-block-cover__inner-container { width: auto; padding: 0 16px; margin-top: -8px; }
}
.screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }

/* Links: darker club blue on light backgrounds (contrast 4.9:1, the light blue is 3:1); the light blue stays on navy. */
:where(.has-primary-background-color, .wp-block-cover) a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--accent); }
:where(.has-primary-background-color, .wp-block-cover) a:where(:not(.wp-element-button)):hover { color: #fff; }