/*
Theme Name: Fighting Child
Theme URI: https://mxnkeys.agency
Template: connery-master
Author: Mxnkeys Agency
Author URI: https://mxnkeys.agency
Description: Fighting.dk skin for the Mxnkeys Connery base theme.
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 5.7
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mxnkeys
*/

/*
 * Colours, fonts and spacing live in theme.json, not here — Connery generates
 * CSS custom properties from it and its Tailwind build consumes them, so the
 * whole skin retargets without a Tailwind rebuild.
 *
 * This file is only for rules that have no token: the self-hosted display face
 * and layout details Connery has no slot for.
 */

/*
 * SF Compact, self-hosted, copied from fighting.dk's media library.
 *
 * NOTE: the live site declares 400/700/900 all pointing at the SAME file, so
 * the heavy headline look is the browser synthesising bold. Reproduced here so
 * the demo matches the current site exactly. See README for the licence issue.
 */
@font-face {
	font-family: 'SF Compact';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('assets/fonts/SF-Compact.woff2') format('woff2'),
		url('assets/fonts/SF-Compact.woff') format('woff');
}

/*
 * Card headlines on fighting.dk are uppercase — but only card headlines.
 * The article headline and the section headings on a post ("Måske du også vil
 * være interesseret i…") are mixed case on the live site, so this is scoped to
 * .post-heading rather than applied to h1/h2/h3 across the board.
 */
.post-heading {
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

/*
 * Slanted orange strip above the header, carrying the site tagline.
 *
 * Geometry measured from the live site: a 50px band whose background is a
 * skewed pseudo-element sitting behind the text, so the strip tilts while the
 * words stay level. transform-origin at the top-left lifts the right-hand end,
 * which is the direction the live slant runs.
 *
 * The live strip is #FF5722, a few points off the brand accent #FF4D00 used
 * everywhere else — drift from the old child theme rather than intent. Both
 * are unified on the accent token here, so the strip follows the palette
 * wherever this theme is deployed instead of pinning a second orange.
 */
.fighting-topbar {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	height: 50px;
	padding-inline: var(--wp--preset--spacing--sm);
	overflow: visible;
}

.fighting-topbar::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wp--preset--color--accent);
	transform: skewY(-2deg);
	transform-origin: 0 0;
}

.fighting-topbar__text {
	margin: 0;
	color: #fff;
	font-size: 17px;
	font-weight: 900;
	text-transform: uppercase;
	line-height: 1;
}

@media (max-width: 768px) {
	.fighting-topbar {
		height: 38px;
	}

	.fighting-topbar__text {
		font-size: 13px;
	}
}

/*
 * Header width.
 *
 * Connery's header runs full-bleed; fighting.dk constrains it to the same
 * 1000px column as the content, so the logo lines up with the article grid
 * below it. Measured on the live site at a 1440px viewport: header content
 * spans x=220 to x=1220.
 */
.header-content > div {
	max-width: var(--wp--style--global--content-size, 1000px);
}

/*
 * Menu items are set in the same heavy uppercase as the headlines — measured
 * 16px/900/uppercase live, against Connery's default 16px/400.
 * Scoped to list items so the logo link is untouched.
 */
#site-navigation li a {
	font-weight: 900;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * Front page
 *
 * Two designs, split at 1024px:
 *
 *   Below 1024px — the demo's own mobile layout, kept by decision (judged
 *   better than the live site's): hero, then the tabbed box, then the middle
 *   cards two across, then the grid two across; headlines at the bottom of
 *   the photo over a gradient, category above them.
 *
 *   1024px and up — the live desktop layout, measured at 1440px: flush under
 *   the header, a 1000px column, 10px gaps throughout; 650x450 hero beside the
 *   340x450 box; two 495x250 cards; six 327-wide cards three across. Overlay
 *   cards carry a flat 30% tint, the headline at the top, the category
 *   bottom-left and "Læs mere →" bottom-right. Square corners.
 * ------------------------------------------------------------------------ */

.fighting-lead {
	display: flex;
	flex-wrap: wrap;
	/* Items keep their own height; stretched to a taller neighbour, an
	 * overlay card's bottom-pinned meta would slide off the photo. */
	align-items: flex-start;
	column-gap: var(--wp--preset--spacing--base);
	row-gap: var(--wp--preset--spacing--xl);
}

.fighting-card-hero,
.fighting-lead__box {
	flex: 0 0 100%;
}

.fighting-card-md {
	flex: 0 0 calc((100% - var(--wp--preset--spacing--base)) / 2);
}

.fighting-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--wp--preset--spacing--base);
	row-gap: var(--wp--preset--spacing--xl);
	margin-top: var(--wp--preset--spacing--xl);
}

/* Overlay cards, mobile design: meta pinned to the bottom over a gradient. */
.fighting-card-overlay {
	position: relative;
}

.fighting-card-hero .post-loop__image {
	aspect-ratio: 65 / 45;
}

.fighting-card-overlay .post-loop__meta {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	margin-top: 0;
	padding: var(--wp--preset--spacing--sm);
	background: linear-gradient(to top, rgb(0 0 0 / 88%), rgb(0 0 0 / 55%) 55%, transparent);
	border-bottom-left-radius: var(--wp--preset--spacing--xs);
	border-bottom-right-radius: var(--wp--preset--spacing--xs);
}

.fighting-card-overlay .post-heading {
	color: #fff;
}

.fighting-card-overlay a.decoration-body-accent {
	color: var(--wp--preset--color--gold);
}

.fighting-card-hero .post-heading {
	font-size: var(--wp--preset--font-size--h-2);
}

.fighting-card-md .post-heading {
	font-size: var(--wp--preset--font-size--h-3);
	line-height: 1.15;
}

.fighting-card-sm .post-heading {
	font-size: 18px;
	line-height: 1.2;
}

/* The desktop-only "Læs mere" link; the mobile cards don't carry it. */
.fighting-card__more {
	display: none;
}

/*
 * Phones: the two middle cards stack full width. Two across at ~160px wide
 * left a 90px-tall photo under a ~200px headline block, which ran up over the
 * tabbed box above it. Full width they read like the hero card does.
 */
@media (max-width: 767px) {
	.fighting-card-md {
		flex-basis: 100%;
	}
}

@media (min-width: 1024px) {

	/*
	 * Page frame. Connery keeps a margin on the top ad slot even when it is
	 * empty, a margin on <main>, and 24px of padding inside the content box —
	 * together 56px of white under the header and a 952px content column.
	 * The live page sits flush under the header in a full 1000px column.
	 */
	#ad-leaderboard-hook-top:not(:has(*)) {
		margin-top: 0;
	}

	#main {
		margin-top: 0;
	}

	#main .main-continer > .bg-body-background-main {
		padding: 0;
	}

	.fighting-lead {
		gap: 10px;
	}

	.fighting-card-hero {
		flex: 0 0 calc((100% - 10px) * 650 / 990);
	}

	.fighting-lead__box {
		flex: 0 0 calc((100% - 10px) * 340 / 990);
	}

	.fighting-card-md {
		flex: 0 0 calc((100% - 10px) / 2);
	}

	.fighting-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px;
		margin-top: 12px;
	}

	/* Square corners on every card image, as on the live site. */
	.post-loop__image {
		border-radius: 0;
	}

	/* Overlay cards. The image fills the card; a flat tint sits over it. */
	.fighting-card-overlay {
		overflow: hidden;
	}

	.fighting-card-overlay > a:first-child::after {
		content: "";
		position: absolute;
		inset: 0;
		background: rgb(3 3 3 / 30%);
		pointer-events: none;
	}

	.fighting-card-hero .post-loop__image {
		aspect-ratio: 650 / 450;
	}

	.fighting-card-md .post-loop__image {
		aspect-ratio: 495 / 250;
	}

	/*
	 * The parent's card renders the category row before the headline. Spread
	 * over the whole card as a column, with the headline moved first: the
	 * headline lands at the top and the category row at the bottom. Clicks
	 * pass through to the image link except on the meta's own links.
	 */
	.fighting-card-overlay .post-loop__meta {
		top: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 0;
		padding: 10px 15px 13px;
		background: none;
		border-radius: 0;
		pointer-events: none;
	}

	.fighting-card-md .post-loop__meta {
		padding: 10px 10px 13px;
	}

	.fighting-card-overlay .post-loop__meta a {
		pointer-events: auto;
	}

	.fighting-card-overlay .post-loop__meta > a {
		order: -1;
	}

	.fighting-card-hero .post-heading {
		font-size: 30px;
		line-height: 36px;
	}

	.fighting-card-md .post-heading {
		font-size: 24px;
		line-height: 1.2;
	}

	.fighting-card-overlay a.decoration-body-accent {
		font-size: 16px;
		font-weight: 800;
		letter-spacing: 0;
	}

	.fighting-card__more {
		display: block;
		position: absolute;
		right: 15px;
		bottom: 13px;
		color: #fff;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.5;
		text-decoration: none;
	}

	.fighting-card-md .fighting-card__more {
		right: 10px;
	}

	/* Grid cards: no category label live, title 10px under a 327x180 image. */
	.fighting-card-sm .post-loop__image {
		aspect-ratio: 327 / 180;
	}

	.fighting-card-sm .post-loop__meta {
		margin-top: 10px;
	}

	.fighting-card-sm .post-loop__meta > div:first-child {
		display: none;
	}

}

/*
 * "Seneste nyt" / "Mest læste" tabbed box beside the hero.
 *
 * Measurements follow the Elementor HTML widget it replaces: a 450px box on a
 * #f9f9f9 ground, two half-width tabs with a 10px gap, rows 80px tall divided
 * by a hairline, and the inactive tab in pale gold. Tab state comes from a
 * radio group, so the panels switch with no JavaScript.
 */
.fighting-tabbox {
	display: flex;
	flex-direction: column;
	height: 450px;
	background: #f9f9f9;
}

.fighting-tabbox__state {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.fighting-tabbox__tabs {
	display: flex;
	gap: 10px;
	flex: 0 0 auto;
}

.fighting-tabbox__tab {
	width: 50%;
	padding: 10px 20px;
	border-radius: 5px;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	background: #f5e3af;
	color: #030303;
	transition: background-color 0.15s ease;
}

/* The checked input drives which tab reads as active and which panel shows. */
#fighting-tabbox-latest:checked ~ .fighting-tabbox__tabs .fighting-tabbox__tab:first-child,
#fighting-tabbox-popular:checked ~ .fighting-tabbox__tabs .fighting-tabbox__tab:last-child {
	background: var(--wp--preset--color--accent);
	color: #fff;
}

/* Keyboard focus follows the radio, so mirror it onto the visible label. */
.fighting-tabbox__state:focus-visible ~ .fighting-tabbox__tabs .fighting-tabbox__tab {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.fighting-tabbox__panel {
	display: none;
	flex: 1 1 auto;
	margin: 5px 0 0;
	padding: 0 10px;
	overflow-y: auto;
	list-style: none;
}

#fighting-tabbox-latest:checked ~ .fighting-tabbox__panel--latest,
#fighting-tabbox-popular:checked ~ .fighting-tabbox__panel--popular {
	display: block;
}

/* The "Mest læste" panel is numbered, as on the live site. */
.fighting-tabbox__panel--popular {
	counter-reset: fighting-tabbox-counter;
}

.fighting-tabbox__item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
	height: 80px;
	padding: 10px 0;
	border-bottom: 1px solid #ddd;
	position: relative;
	overflow: hidden;
}

.fighting-tabbox__item:last-child {
	border-bottom: none;
}

.fighting-tabbox__panel--popular .fighting-tabbox__item {
	padding-left: 25px;
}

.fighting-tabbox__panel--popular .fighting-tabbox__item::before {
	content: counter(fighting-tabbox-counter) ".";
	counter-increment: fighting-tabbox-counter;
	position: absolute;
	left: 0;
	top: 10px;
	font-weight: 700;
}

.fighting-tabbox__title {
	font-size: 13px;
	font-weight: 900;
	line-height: 1.25;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--typography);
}

.fighting-tabbox__title:hover {
	color: var(--wp--preset--color--accent);
}

.fighting-tabbox__date {
	align-self: center;
	flex: 0 0 auto;
	font-size: 11px;
	color: #666;
	font-variant-numeric: tabular-nums;
}

/* Placed after the base tabbox rules so these win on source order. */
@media (min-width: 1024px) {

	/*
	 * Tabbed box, desktop values from the live widget: 16px tabs 44px tall,
	 * titles 14px regular in mixed case, dates 14px semibold in #555. The
	 * mobile box keeps the demo's bolder treatment.
	 */
	.fighting-tabbox__tab {
		padding: 12px 20px;
		font-size: 16px;
		line-height: 20px;
	}

	.fighting-tabbox__title {
		font-size: 14px;
		font-weight: 400;
		line-height: 1.3;
		text-transform: none;
		color: #000;
	}

	.fighting-tabbox__date {
		font-size: 14px;
		font-weight: 600;
		color: #555;
	}
}

/*
 * Category labels: fighting.dk sets them in accent orange and uppercase,
 * where Connery's default is dark text with an accent underline.
 *
 * Targeted through the utility class the partial already carries, rather than
 * overriding post-category.php — an overridden partial stops inheriting parent
 * improvements, and that trade is not worth making for a colour.
 */
a.decoration-body-accent {
	color: var(--wp--preset--color--accent);
	text-transform: uppercase;
	text-decoration-line: none;
	letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------------
 * Footer
 *
 * A gold newsletter band over a white bar. Measured on the live site:
 *
 *   1440px — band 360px tall, content in an 800px column; heading 37px/900
 *            white; email field 47px tall with a 1px #C8D5DC border and no
 *            radius; 253px orange button, 8px radius, 20px from the field.
 *            Bar 65px: links left, logo centre, icons centred in the right
 *            third, as three 320px columns across the 1000px content width.
 *   375px  — heading 28px, field and button stacked full width, 20px apart;
 *            bar stacks links, logo, icons.
 * ------------------------------------------------------------------------ */

.fighting-footer {
	background: #fff;
}

.fighting-newsletter {
	display: flex;
	align-items: center;
	min-height: 360px;
	padding: 48px var(--wp--preset--spacing--sm);
	background: var(--wp--preset--color--gold);
}

.fighting-newsletter__inner {
	width: 100%;
	max-width: 800px;
	margin-inline: auto;
}

.fighting-newsletter__heading {
	margin: 0 0 30px;
	color: #fff;
	font-size: 37px;
	font-weight: 900;
	line-height: 1.2;
	text-transform: none;
}

.fighting-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.fighting-newsletter__input {
	flex: 1 1 280px;
	height: 47px;
	padding: 0 16px;
	border: 1px solid var(--wp--preset--color--knockout);
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--typography);
	font: inherit;
	font-size: 16px;
}

.fighting-newsletter__input::placeholder {
	color: var(--wp--preset--color--typography);
	opacity: 0.6;
}

.fighting-newsletter__button {
	flex: 0 0 253px;
	height: 47px;
	border: 0;
	border-radius: 8px;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
}

.fighting-newsletter__input:focus-visible,
.fighting-newsletter__button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.fighting-newsletter__notice {
	flex-basis: 100%;
	margin: 0;
	color: #fff;
	font-weight: 700;
}

.fighting-footer__bar {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: center;
	gap: 20px;
	/* Content width plus the side gutters, so the three columns inside land on
	 * exactly the 1000px column the header and grid use. */
	max-width: calc(var(--wp--style--global--content-size, 1000px) + 2 * var(--wp--preset--spacing--sm));
	min-height: 65px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--sm);
}

/*
 * Links. The live link is #C8D5DC on white — a contrast ratio of 1.5:1, well
 * under the 4.5:1 WCAG asks of 12px text, and close to invisible in practice.
 * Set in the body colour here instead; revert to var(--wp--preset--color--knockout)
 * to match the live site exactly.
 */
.fighting-footer__menu {
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fighting-footer__menu a {
	color: var(--wp--preset--color--typography);
	font-size: 12px;
	font-weight: 900;
	text-transform: uppercase;
	text-decoration: none;
}

.fighting-footer__menu a:hover {
	color: var(--wp--preset--color--accent);
}

.fighting-footer__logo {
	justify-self: center;
	display: block;
	line-height: 0;
}

.fighting-footer__logo img {
	height: 32px;
	width: auto;
}

.fighting-footer__social {
	justify-self: center;
	display: flex;
	gap: 5px;
}

.fighting-footer__social a {
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	color: var(--wp--preset--color--typography);
}

.fighting-footer__social a:hover {
	color: var(--wp--preset--color--accent);
}

/*
 * The parent's icon files disagree about colour — one declares an invalid
 * fill, one declares none on the outer element — so it is set here for all
 * three, sized to the live 25px.
 */
.fighting-footer__social svg {
	width: 25px;
	height: 25px;
}

.fighting-footer__social svg,
.fighting-footer__social svg path {
	fill: currentColor;
}

.fighting-footer__cookie {
	padding: 0 var(--wp--preset--spacing--sm) var(--wp--preset--spacing--sm);
	text-align: center;
	font-size: 12px;
}

@media (max-width: 768px) {
	.fighting-newsletter {
		min-height: 0;
		padding: 68px 53px;
	}

	.fighting-newsletter__heading {
		font-size: 28px;
	}

	.fighting-newsletter__input,
	.fighting-newsletter__button {
		flex-basis: 100%;
	}

	.fighting-footer__bar {
		grid-template-columns: 1fr;
		padding-block: 15px;
	}

	.fighting-footer__social {
		justify-self: center;
	}
}

/*
 * Sponsored partner box, carried over verbatim from the old hello-theme-child.
 * Referenced by id from inside article content, so the markup is not ours to
 * change — only the styling.
 */
#mma-info-box {
	max-width: 41%;
	float: right;
	margin: 0 0 20px 20px;
	padding: 20px;
	background-color: var(--wp--preset--color--knockout);
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
}

#mma-info-box p {
	font-size: 14px;
	color: var(--wp--preset--color--typography);
	margin-bottom: 8px;
	line-height: 1.4;
	text-align: left;
}

#mma-info-box .mma-link {
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

#mma-info-box .mma-link:hover {
	text-decoration: underline;
}

#mma-info-box .mma-disclaimer {
	font-size: 12px;
	color: #888;
	margin-bottom: 10px;
}

.mma-logo {
	max-width: 100%;
	height: auto;
	margin-bottom: 10px;
	padding-right: 15px;
}

.mma-ad-notice {
	font-size: 12px;
	color: #888;
	text-align: left;
	font-style: italic;
}

@media (max-width: 768px) {
	#mma-info-box {
		max-width: 100%;
		float: none;
		margin: 20px 0;
	}
}

/* ---------------------------------------------------------------------------
 * Single post
 *
 * The live article stacks three widths at a 1440px viewport: headline across
 * the full 1000px column, featured image and share row at 840px, body text
 * narrowed again to ~756px. Connery already narrows body text via
 * is-style-prose (65ch), so only the headline and media tiers are set here.
 * ------------------------------------------------------------------------ */

.fighting-single__head .post-title {
	font-size: 42px;
	font-weight: 900;
	line-height: 1.2;
	text-transform: none;
	margin-bottom: 0;
}

@media (max-width: 768px) {
	.fighting-single__head .post-title {
		font-size: 28px;
	}
}

/* Date sits under the headline as its own line, in gold — the live site's one
 * use of the secondary brand colour outside sponsored elements. */
.fighting-single__date {
	margin: 0.6rem 0 0;
	font-size: 16px;
	font-weight: 900;
	color: var(--wp--preset--color--gold);
}

.fighting-single__media {
	max-width: 840px;
	margin-inline: auto;
}

/*
 * The parent's byline pairs an avatar with the name and repeats the date.
 * The live byline is a plain "Af <name>" line, and the date already appears
 * above, so both are hidden rather than forking post-author.php.
 */
.fighting-single__byline img {
	display: none;
}

.fighting-single__byline .text-\[80\%\] {
	display: none;
}

/*
 * Body column. The parent's is-style-prose caps measure at 65ch, which lands
 * at ~667px in this face; the live column is 756px. Set explicitly, and it
 * wins on source order since the child stylesheet loads after the parent's.
 */
.entry-content {
	font-size: 17px;
	line-height: 1.5;
	max-width: 756px;
	margin-inline: auto;
}

/* Inline links in article text: accent orange, no underline. */
.entry-content a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.entry-content a:hover {
	text-decoration: underline;
}

/* Image captions are centred italics under the picture. */
.entry-content figcaption,
.fighting-single__media figcaption,
.wp-caption-text {
	font-style: italic;
	font-size: 16px;
	text-align: center;
	color: var(--wp--preset--color--typography);
}

.fighting-single__share {
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: 840px;
	margin: var(--wp--preset--spacing--lg) auto 0;
}

.fighting-single__share-label {
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
}

/* The parent centres the share control; here it sits beside its label. */
.fighting-single__share .share-button {
	justify-content: flex-start;
}

/*
 * Related posts under an article. Values from the live Elementor posts
 * widget: 840px column, two cards across with a 60px column gap and 80px row
 * gap (30px on mobile), image cropped at 0.62 height-to-width, title
 * 22px/900 at 1.2 line height (18px on mobile), no excerpt or meta.
 */
.fighting-related {
	max-width: 840px;
	margin: var(--wp--preset--spacing--lg) auto;
}

.fighting-related__heading {
	margin: 0 0 var(--wp--preset--spacing--base);
	font-size: 45px;
	font-weight: 900;
	line-height: 1.2;
	text-transform: none;
}

.fighting-related__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 80px 60px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fighting-related__item .post-loop__image {
	aspect-ratio: 1 / 0.62;
}

.fighting-related__item .post-heading {
	font-size: 22px;
	line-height: 1.2;
	color: var(--wp--preset--color--typography);
}

@media (max-width: 768px) {
	.fighting-related__heading {
		font-size: 28px;
	}

	.fighting-related__grid {
		gap: 30px;
	}

	.fighting-related__item .post-heading {
		font-size: 18px;
	}
}

/* ---------------------------------------------------------------------------
 * "Vis flere"
 *
 * Below 1024px it keeps the demo's pill button. From 1024px, the live button:
 * orange, 16px/600 uppercase, 3px corners, 12px/24px padding, 30px under the
 * last card.
 * ------------------------------------------------------------------------ */

.fighting-vis-flere {
	display: flex;
	justify-content: center;
	margin-block: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg);
}

.fighting-vis-flere__button[aria-busy="true"] {
	opacity: 0.6;
	cursor: progress;
}

@media (min-width: 1024px) {
	.fighting-vis-flere {
		margin-block: 30px 22px;
	}

	.fighting-vis-flere__button.wp-block-button__link {
		padding: 12px 24px;
		border-radius: 3px;
		background: var(--wp--preset--color--accent);
		color: #fff;
		font-size: 16px;
		font-weight: 600;
		line-height: 16px;
		text-transform: uppercase;
	}
}

/* ---------------------------------------------------------------------------
 * Feature banner ("UFC-arkivet")
 *
 * Measured live at 1440px: full width, 670px tall, cover image, content
 * centred; title 52px/700 white uppercase, text 16px/700 uppercase, link
 * 16px/700 in the accent. The angled top and bottom edges are a clip-path
 * polygon, copied from the live container.
 * ------------------------------------------------------------------------ */

/* Lets the banner run to the viewport edges from inside the content column.
 * clip rather than hidden, so the sticky header keeps working. */
body {
	overflow-x: clip;
}

.fighting-feature {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	min-height: 670px;
	margin-inline: calc(50% - 50vw);
	padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--sm);
	background: #030303 var(--fighting-feature-image) center / cover no-repeat;
	clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 93%);
	text-align: center;
}

.fighting-feature__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	max-width: 800px;
}

.fighting-feature__title {
	margin: 0;
	color: #fff;
	font-size: 52px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
}

.fighting-feature__text {
	margin: 0;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	text-transform: uppercase;
}

/* Live leaves 37px between the text and the link, against 20px elsewhere. */
.fighting-feature__link {
	margin-top: 17px;
	color: var(--wp--preset--color--accent);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

.fighting-feature__link:hover {
	text-decoration: underline;
}

@media (max-width: 767px) {
	.fighting-feature {
		min-height: 420px;
	}

	.fighting-feature__title {
		font-size: 36px;
	}

	/* Narrow, the text lands on the bright middle of the photo, where white on
	 * a white shirt disappears. Live has no tint; a shadow keeps it readable
	 * without adding one. */
	.fighting-feature__title,
	.fighting-feature__text {
		text-shadow: 0 1px 10px rgb(0 0 0 / 70%);
	}
}

/* ---------------------------------------------------------------------------
 * Active menu item: an orange line under the link, tilted 3 degrees — the
 * live menu's underline pointer, 3px tall across the link's width. Shown on
 * the current item and on hover, as the live pointer is. Desktop menu only;
 * the parent's walker marks the current item with .current-page.
 * ------------------------------------------------------------------------ */

@media (min-width: 1024px) {
	.navigation > #primary-nav > li > a {
		position: relative;
		display: inline-block;
	}

	.navigation > #primary-nav > li > a::after {
		content: "";
		position: absolute;
		left: 0;
		top: calc(50% + 10px);
		width: 100%;
		height: 3px;
		background: var(--wp--preset--color--accent);
		transform: rotate(-3deg);
		opacity: 0;
		transition: opacity 0.2s ease;
		pointer-events: none;
	}

	.navigation > #primary-nav > li.current-page > a::after,
	.navigation > #primary-nav > li > a:hover::after,
	.navigation > #primary-nav > li > a:focus-visible::after {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.navigation > #primary-nav > li > a::after {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Search popup, 768–1023px. The parent right-aligns the popup to the search
 * button from 768px up, but below 1024px that button sits at the left of the
 * header, so a 320px box aligned to its right edge opens off the screen.
 * Aligned to its left edge instead in that range.
 * ------------------------------------------------------------------------ */

@media (min-width: 768px) and (max-width: 1023px) {
	#site-navigation .search-popup {
		left: 0;
		right: auto;
	}
}