/*
 * ATK 2026: the few rules theme.json cannot express.
 * Colours, fonts, spacing and block styles live in theme.json and /styles.
 */

/* Header, main and footer sit flush against each other (no global block gap between them). */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Footer stays at the bottom of the window on short pages: main grows to fill the gap.
   The admin bar (logged-in users) is subtracted so short pages don't scroll. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

.wp-site-blocks > .atk-main {
	flex-grow: 1;
}

/* Header: hide the long club name on phones; the ATK tag is enough there. */
@media (max-width: 599px) {
	.atk-hide-on-mobile {
		display: none !important;
	}

	/* Footer menu reads better left-aligned once the columns stack. */
	.atk-footer .wp-block-navigation .wp-block-navigation__container {
		justify-content: flex-start;
	}
}

/* Logo in the header: one link to the front page holding the skewed "ATK" tag and the club name. */
.atk-brand {
	margin: 0;
}

.atk-brand a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--wp--preset--color--ink-foreground);
	text-decoration: none;
}

.atk-brand__tag {
	display: inline-block;
	padding: 0.25rem 0.75rem 0.125rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 900;
	line-height: 1.3;
	transform: skew(-12deg);
}

/* Un-skew the letters so only the box is slanted. */
.atk-brand__tag > span {
	display: inline-block;
	transform: skew(12deg);
}

.atk-brand__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Phones: the ATK tag alone. */
@media (max-width: 599px) {
	.atk-brand__name {
		display: none;
	}
}

/* Dark title band under the header: same height on every page. A small line above the
   title (breadcrumb "← Kalender", "Sted", a date) sits in the band's top padding
   instead of adding height. */
.atk-title-band .alignwide:has(> .is-style-eyebrow:first-child) {
	position: relative;
}

.atk-title-band .alignwide > .is-style-eyebrow:first-child {
	position: absolute;
	bottom: 100%;
	left: 0;
	margin: 0 0 var(--wp--preset--spacing--20);
}

.atk-title-band .alignwide > .is-style-eyebrow:first-child + * {
	margin-block-start: 0;
}

/* Compact pill button in the header. */
.atk-button-small .wp-block-button__link {
	padding: 0.6rem 1.25rem 0.5rem;
}

/* Login/logout link and site title in dark sections keep the light text colour. */
.is-style-section-ink .wp-block-loginout a,
.is-style-section-ink .wp-block-site-title a,
.is-style-section-ink .wp-block-navigation a {
	color: inherit;
}

.is-style-section-ink .wp-block-loginout a:hover,
.is-style-section-ink .wp-block-navigation a:hover {
	color: var(--wp--preset--color--primary);
}

/* Links inside an "Overlinje" (eyebrow) paragraph take its colour. */
.is-style-eyebrow a {
	color: inherit;
	text-decoration: none;
}

/* Mobile menu overlay: bigger tap targets. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-loginout {
	font-size: var(--wp--preset--font-size--x-large);
}

/* Discipline cards (pattern "Forside: Tre discipliner"). */
.atk-discipline {
	border-radius: 0.5rem;
	overflow: hidden;
}

/* Coloured bar on top of each card: swim blue, bike orange, run lime. */
.atk-discipline::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 6px;
	z-index: 2;
	background: var(--wp--preset--color--primary);
}

.atk-discipline--swim::before { background: var(--wp--preset--color--swim); }
.atk-discipline--bike::before { background: var(--wp--preset--color--bike); }

/* Make the whole card clickable via its "Træningsinfo" link. */
/* Cards are always dark, so their link is lime whatever section they sit in. */
.atk-discipline a {
	color: var(--wp--preset--color--primary);
}

.atk-discipline a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.atk-discipline .wp-block-cover__image-background {
	transition: transform 0.7s ease;
}

.atk-discipline:hover .wp-block-cover__image-background {
	transform: scale(1.05);
}

/* Small icon above a fact card label (pattern "Om ATK"). */
.atk-fact-icon {
	margin-block: 0;
}

/* "Tid & sted" schedule rows separated by thin lines. */
.atk-schedule__item {
	border-top: 1px solid var(--wp--preset--color--border);
}

.atk-schedule__item:last-child {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Text + side column ("atk-split", e.g. training pages: description 2/3, schedule + links 1/3).
   When the columns stack (below 782px, WordPress' columns breakpoint) the side column dissolves:
   its first block (the schedule) goes above the text, the rest (links, buttons) below it. */
@media (max-width: 781px) {
	.atk-split > .atk-split__aside {
		display: contents;
	}

	.atk-split__aside > * {
		order: 1;
	}

	.atk-split__aside > :first-child {
		order: -1;
	}
}

/* Link list as rows with dividers and an arrow (same rhythm as the schedule rows).
   Add the class "atk-link-list" to a list block whose items are links. */
.atk-link-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Breathing room between an "Overlinje" label and the list under it. */
.is-style-eyebrow + .atk-link-list {
	margin-top: 1rem;
}

.atk-link-list li {
	margin: 0;
	padding: 0.85rem 0;
	border-top: 1px solid var(--wp--preset--color--border);
	font-weight: 600;
}

.atk-link-list li:last-child {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* The link fills the whole row (the row's padding is pulled into the link). A row
   without a link keeps the same size and weight, just without the arrow. */
.atk-link-list a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin: -0.85rem 0;
	padding: 0.85rem 0;
	color: var(--wp--preset--color--foreground);
	font-weight: 600;
	text-decoration: none;
}

.atk-link-list a::after {
	content: "→";
	color: var(--wp--preset--color--brand-deep);
	transition: transform 0.15s ease;
}

.atk-link-list a:hover {
	color: var(--wp--preset--color--brand-deep);
}

.atk-link-list a:hover::after {
	transform: translateX(4px);
}

/* Big display-font links with an arrow, e.g. "De andre discipliner": Cykling → Løb →
   Add the class "atk-big-links" to a paragraph whose links each end in a "→". */
.atk-big-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
}

.atk-big-links a {
	color: var(--wp--preset--color--foreground);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-style: italic;
	font-weight: 900;
	text-decoration: none;
	text-transform: uppercase;
}

.atk-big-links a span {
	display: inline-block;
	margin-left: 0.5rem;
	font-style: normal;
	font-weight: 400;
	transition: transform 0.15s ease;
}

.atk-big-links a:hover {
	color: var(--wp--preset--color--brand-deep);
}

.atk-big-links a:hover span {
	transform: translateX(4px);
}

/* Footer sponsor logos keep their aspect ratio. */
.atk-sponsors img {
	width: auto;
	max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.atk-discipline .wp-block-cover__image-background {
		transition: none;
	}
}

/* Partner cards (Klubaftaler page): logos of very different shapes get one fixed height,
   and the website link sits at the bottom of every card so the cards line up. */
.atk-partner__logo {
	margin: 0 0 var(--wp--preset--spacing--10);
}

.atk-partner__logo img {
	display: block;
	width: auto;
	max-width: min(100%, 14rem);
	height: 3.5rem;
	object-fit: contain;
	object-position: left center;
}

.atk-partner h3 {
	margin: 0;
}

.atk-partner__deal {
	color: var(--wp--preset--color--brand-deep);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
}

.atk-partner .wp-block-list {
	margin: 0;
	padding-left: 1.25rem;
}

.atk-partner .wp-block-list li + li {
	margin-top: 0.35rem;
}

.atk-partner__code-label {
	margin-bottom: -0.25rem;
}

.atk-partner .is-style-tag {
	align-self: flex-start;
	margin-left: 0.25rem;
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: 0.02em;
}

.wp-block-group.atk-partner > .atk-partner__link {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--20);
	font-weight: 600;
}

.atk-partner__link a {
	color: var(--wp--preset--color--brand-deep);
	text-decoration: none;
}

.atk-partner__link a:hover {
	color: var(--wp--preset--color--foreground);
}