/* Digital Sports: layout and effects only. Colours, fonts and sizes live in theme.json. */

.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-site-blocks > header { position: relative; z-index: 20; }
body { overflow-x: clip; }

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

/* Heavy display type: no fake bold, balanced lines. */
h1, h2, h3, h4, .dsm-display { font-synthesis-weight: none; text-wrap: balance; }
mark.has-inline-color { background: none; }

/* Logo */
.dsm-logo a { color: inherit; text-decoration: none; }

/* Hover lift: buttons and cards */
.wp-element-button, .dsm-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.2s ease;
}
.wp-element-button:hover, .wp-element-button:focus-visible { transform: translateY(-2px); }
.dsm-card:hover, .dsm-card:focus-within {
	transform: translateY(-6px);
	border-color: var(--wp--preset--color--accent) !important;
	box-shadow: 0 24px 48px -28px color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent);
}
.dsm-card .dsm-more { margin-top: auto; }
.dsm-card .dsm-more a { text-decoration: none; }

/* Angled section edges */
.dsm-angle-top { clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%); }
.dsm-angle-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw), 0 100%); }
.dsm-angle-both { clip-path: polygon(0 4vw, 100% 0, 100% calc(100% - 4vw), 0 100%); }
.dsm-strip { clip-path: polygon(0 14%, 100% 0, 100% 86%, 0 100%); }

/* Hero with accent slashes */
.dsm-hero { position: relative; isolation: isolate; overflow: hidden; }
.dsm-hero::before, .dsm-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: -20%;
	height: 140%;
	transform: skewX(-16deg);
	pointer-events: none;
}
.dsm-hero::before { right: 4vw; width: 11vw; background: var(--wp--preset--color--accent); }
.dsm-hero::after { right: 17vw; width: 3vw; border: 2px solid var(--wp--preset--color--accent); }
.dsm-hero h1 { max-width: 13ch; }
@media (max-width: 900px) {
	.dsm-hero::before, .dsm-hero::after { opacity: 0.12; }
}

/* Smaller slashes on inner pages */
.dsm-hero-page::before { right: 3vw; width: 6vw; }
.dsm-hero-page::after { right: 11vw; width: 1.6vw; }
.dsm-hero-page h1 { max-width: 16ch; }

/* Page and post text */
.dsm-content > h2 { margin-block-start: var(--wp--preset--spacing--60); }
.dsm-content > h3 { margin-block-start: var(--wp--preset--spacing--50); }
.dsm-content li::marker { color: var(--wp--preset--color--accent); }
.dsm-content li + li { margin-block-start: 0.4em; }
.dsm-content strong { color: var(--wp--preset--color--contrast); }

/* Services page: every service gets a big number and a rule */
.dsm-services { counter-reset: dsm-svc; }
.dsm-services > h2 {
	counter-increment: dsm-svc;
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--preset--color--line);
	margin-block-start: var(--wp--preset--spacing--70);
}
.dsm-services > h2::before {
	content: counter(dsm-svc, decimal-leading-zero);
	display: block;
	margin-block-end: 0.15em;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--xx-large);
}
.dsm-services > hr ~ h2 { counter-increment: none; border: 0; }
.dsm-services > hr ~ h2::before { content: none; }

/* Blog cards */
.dsm-card .wp-block-post-featured-image { overflow: hidden; }
.dsm-card .wp-block-post-featured-image img { transition: transform 0.4s ease; }
.dsm-card:hover .wp-block-post-featured-image img { transform: scale(1.04); }
.dsm-card .wp-block-read-more { margin-top: auto; text-decoration: none; }

/* FAQ */
.wp-block-details { border-block-end: 1px solid var(--wp--preset--color--line); padding-block: var(--wp--preset--spacing--30); }

/* Placeholder boxes */
.dsm-placeholder { min-height: 6rem; display: flex; align-items: center; justify-content: center; }

/* Social icons in brand colours of the site */
.dsm-social .wp-social-link { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); }
.dsm-social .wp-social-link:hover { background: var(--wp--preset--color--contrast); transform: translateY(-2px); }

img { max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
	.wp-element-button:hover, .dsm-card:hover { transform: none; }
}