/* MetalBattle – a Wacken Metal Battle (metal-battle.com) 2027-es arculatára.
   Az évad színei, háttérképe és címsor-betűje a Testreszabásból jön CSS-változóként (inc/season.php). */
:root {
	--mb-bg: #050d14;
	--mb-surface: #0a1622;
	--mb-text: #f2f4f2;
	--mb-muted: #aeb8b6;
	--mb-accent: #29c8e0;
	--mb-ink: #050d14;
	--mb-red: #d9304a;
	--mb-shade: .55;
	--mb-hero: none;
	--mb-hero-sm: var(--mb-hero);
	--mb-display: Anton, Oswald, Impact, "Arial Narrow", sans-serif;
	--mb-body: Barlow, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--mb-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--mb-bar: color-mix(in srgb, var(--mb-surface) 70%, var(--mb-accent) 8%);
	--mb-line: color-mix(in srgb, var(--mb-accent) 22%, var(--mb-surface));
	--mb-wrap: 76rem;
	--mb-gutter: clamp(1rem, 4vw, 2rem);
	--mb-cut: 8px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body {
	margin: 0;
	background: var(--mb-bg);
	color: var(--mb-text);
	font: 400 1.0625rem/1.6 var(--mb-body);
	letter-spacing: .02em;
	text-rendering: optimizeLegibility;
	position: relative;
	isolation: isolate;
}
/* A grunge háttérkép az egész oldal mögött áll, és nem görög (mint a metal-battle.com-on). */
body::before {
	content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
	background:
		url("../img/blood.webp") center / cover no-repeat,
		linear-gradient(180deg, rgb(5 13 20 / calc(var(--mb-shade) * .2)) 0%, rgb(5 13 20 / var(--mb-shade)) 100%),
		var(--mb-hero-sm) center / cover no-repeat,
		var(--mb-bg);
}
@media (min-width: 1025px) {
	body::before { background:
		url("../img/blood.webp") center / cover no-repeat,
		linear-gradient(180deg, rgb(5 13 20 / calc(var(--mb-shade) * .2)) 0%, rgb(5 13 20 / var(--mb-shade)) 100%),
		var(--mb-hero) center / cover no-repeat,
		var(--mb-bg); }
}
img, video, iframe { max-width: 100%; height: auto; }
a { color: var(--mb-accent); text-underline-offset: .2em; }
a:hover { color: var(--mb-text); }
:focus-visible { outline: 2px solid var(--mb-accent); outline-offset: 3px; }
::selection { background: var(--mb-accent); color: var(--mb-ink); }

h1, h2, h3, h4 { font-family: var(--mb-display); font-weight: 400; line-height: 1.15; letter-spacing: -.01em; text-transform: uppercase; margin: 1.6em 0 .5em; }
h1 { font-size: clamp(2.6rem, 8vw, 5.6rem); letter-spacing: -.02em; }
h2, .mb-h2 { font-size: clamp(2rem, 5vw, 3.6rem); letter-spacing: -.02em; }
h3, .mb-h3 { font-size: clamp(1.3rem, 2.6vw, 1.6rem); letter-spacing: .02em; }
h4 { font-size: 1.15rem; letter-spacing: .03em; }
p, ul, ol { margin: 0 0 1em; }
strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--mb-line); margin: 2rem 0; }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.mb-skip:focus { clip: auto; width: auto; height: auto; z-index: 100; left: 1rem; top: 1rem; padding: .6rem 1rem; background: var(--mb-accent); color: var(--mb-ink); }

.mb-wrap { width: 100%; max-width: var(--mb-wrap); margin-inline: auto; padding-inline: var(--mb-gutter); }
.mb-section { padding-block: clamp(3rem, 8vw, 6rem); }

/* Felső kis címke: // MONO SZÖVEG */
.mb-kicker { font: 400 .75rem/1.45 var(--mb-mono); text-transform: uppercase; letter-spacing: .18em; color: color-mix(in srgb, var(--mb-text) 85%, transparent); margin: 0 0 1.25rem; }
.mb-kicker::before { content: "// "; color: var(--mb-accent); }
.mb-kicker a { color: inherit; text-decoration: none; }
.mb-kicker a:hover { color: var(--mb-accent); }
.mb-rule { display: block; width: 3rem; height: 3px; background: var(--mb-accent); margin: 1.75rem 0; }

/* Gombok: levágott sarkok */
.mb-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: 2.9rem; padding: .7em 1.6em;
	background: var(--mb-accent); color: var(--mb-ink);
	font: 600 1rem/1 var(--mb-body); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
	border: 1px solid var(--mb-accent); border-radius: 0;
	clip-path: polygon(var(--mb-cut) 0, 100% 0, 100% calc(100% - var(--mb-cut)), calc(100% - var(--mb-cut)) 100%, 0 100%, 0 var(--mb-cut));
	transition: background-color .15s, color .15s, filter .15s;
}
.mb-btn:hover { color: var(--mb-ink); filter: brightness(1.12); }
.mb-btn--line, .mb-btn--ghost { background: color-mix(in srgb, var(--mb-bg) 70%, transparent); color: var(--mb-accent); clip-path: none; }
.mb-btn--line:hover, .mb-btn--ghost:hover { background: var(--mb-accent); color: var(--mb-ink); filter: none; }
.mb-btn--lg { min-height: 3.5rem; padding: 1.1em 2em; }

/* Fejléc */
.mb-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--mb-bar) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--mb-line); }
.mb-header__in { display: flex; align-items: center; gap: 1.5rem; min-height: 4.5rem; }
.mb-brand { display: inline-flex; align-items: center; margin-right: auto; text-decoration: none; color: var(--mb-text); }
.mb-brand__logo { display: block; height: clamp(3.5rem, 6vw, 5rem); width: auto; filter: drop-shadow(0 2px 6px rgb(0 0 0 / .5)); }
.mb-brand__text { font: 400 1.7rem/1 var(--mb-display); text-transform: uppercase; }
.mb-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem 1.6rem; flex-wrap: wrap; }
.mb-nav__list a { display: block; padding: .6rem 0; color: var(--mb-text); text-decoration: none; font: 600 .95rem/1 var(--mb-body); letter-spacing: .08em; text-transform: uppercase; border-bottom: 2px solid transparent; }
.mb-nav__list a:hover, .mb-nav__list .current-menu-item > a { color: var(--mb-accent); border-bottom-color: var(--mb-accent); }
.mb-nav { display: flex; align-items: center; gap: 1.6rem; }
.mb-navtoggle { display: none; }

@media (max-width: 1040px) {
	.mb-navtoggle { display: inline-flex; align-items: center; justify-content: center; width: 2.9rem; height: 2.9rem; background: none; border: 1px solid var(--mb-line); color: var(--mb-text); cursor: pointer; }
	.mb-navtoggle__bars, .mb-navtoggle__bars::before, .mb-navtoggle__bars::after { display: block; width: 1.2rem; height: 2px; background: currentColor; position: relative; content: ""; transition: transform .2s; }
	.mb-navtoggle__bars::before { position: absolute; top: -6px; }
	.mb-navtoggle__bars::after { position: absolute; top: 6px; }
	.mb-nav-open .mb-navtoggle__bars { background: transparent; }
	.mb-nav-open .mb-navtoggle__bars::before { transform: translateY(6px) rotate(45deg); }
	.mb-nav-open .mb-navtoggle__bars::after { transform: translateY(-6px) rotate(-45deg); }
	.mb-nav { display: none; position: absolute; inset: 100% 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--mb-gutter) 1.5rem; background: var(--mb-bar); border-bottom: 1px solid var(--mb-line); }
	.mb-nav-open .mb-nav { display: flex; }
	.mb-nav__list { flex-direction: column; gap: 0; }
	.mb-nav__list a { padding: 1rem 0; border-bottom: 1px solid var(--mb-line); font-size: 1.05rem; }
	.mb-btn--nav { margin-top: 1.25rem; }
}

/* Kezdőlap fejléce */
.mb-hero { min-height: min(86vh, 52rem); display: grid; align-items: center; }
.mb-hero__in { padding-block: clamp(4rem, 14vh, 8rem) clamp(3rem, 10vh, 6rem); }
.mb-hero__title { margin: 0; font-size: clamp(3rem, 10vw, 6.25rem); line-height: 1.14; }
.mb-hero__title span { display: block; }
.mb-l2 { color: transparent; -webkit-text-stroke: 1.5px var(--mb-text); paint-order: stroke fill; }
.mb-l3 { color: var(--mb-accent); }
@supports not (-webkit-text-stroke: 1px black) { .mb-l2 { color: var(--mb-text); } }
.mb-hero__lead { font-size: clamp(1.05rem, 2vw, 1.2rem); max-width: 38rem; color: color-mix(in srgb, var(--mb-text) 92%, transparent); }
.mb-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* Aloldalak fejléce */
.mb-pagehead .mb-wrap { padding-block: clamp(3.5rem, 10vw, 7rem) 0; }
.mb-pagehead__title { margin: 0; overflow-wrap: anywhere; }
.mb-pagehead__title::after { content: ""; display: block; width: 3rem; height: 3px; background: var(--mb-accent); margin-top: 1.5rem; }

/* Szöveges tartalom */
.mb-prose { max-width: 50rem; }
.mb-prose > :first-child { margin-top: 0; }
.mb-prose h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.mb-prose h3 { color: var(--mb-text); }
.mb-prose img { height: auto; }
.mb-prose .aligncenter { display: block; margin-inline: auto; }
.mb-prose [style*="background-color"] { background: var(--mb-red) !important; color: #fff; padding: .15em .35em; }
.mb-prose ul, .mb-prose ol { padding-left: 1.3em; }
.mb-prose li { margin-bottom: .5em; }
.mb-prose li::marker { color: var(--mb-accent); font-family: var(--mb-mono); }
.mb-prose table { width: 100%; border-collapse: collapse; }
.mb-prose th, .mb-prose td { padding: .6rem; border-bottom: 1px solid var(--mb-line); text-align: left; }

/* A kezdőlap szakaszai „// 01 —” számozást kapnak, mint az eredeti oldalon. */
.mb-front { counter-reset: mbsec; }
.mb-front .mb-prose h2 { counter-increment: mbsec; }
.mb-front .mb-prose h2::before { content: "// 0" counter(mbsec); display: block; margin-bottom: 1rem; font: 400 .75rem/1.4 var(--mb-mono); letter-spacing: .18em; color: var(--mb-accent); }
.mb-front .mb-prose h2::after { content: ""; display: block; width: 3rem; height: 3px; background: var(--mb-accent); margin-top: 1.25rem; }

.mb-section--alt { background: rgb(5 13 20 / .62); border-block: 1px solid var(--mb-line); }

.mb-notice { border: 1px solid var(--mb-line); border-left: 3px solid var(--mb-accent); background: rgb(10 22 34 / .85); padding: 1.1rem 1.35rem; margin: 0 0 2rem; }
.mb-notice > :last-child { margin-bottom: 0; }
.mb-notice--closed { font-size: 1.15rem; }

/* Zenekar-rács */
.mb-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); margin-block: 2rem; }
.mb-card { background: rgb(10 22 34 / .85); border: 1px solid var(--mb-line); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); transition: border-color .2s; }
.mb-card:hover { border-color: var(--mb-accent); }
.mb-card__link { display: block; color: var(--mb-text); text-decoration: none; height: 100%; }
.mb-card__img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--mb-surface); filter: saturate(.85); transition: filter .3s; }
.mb-card__link:hover .mb-card__img { filter: none; }
.mb-card__title { margin: 0; padding: 1rem 1.1rem 1.2rem; font-size: 1.4rem; }
.mb-card__link:hover .mb-card__title { color: var(--mb-accent); }
.mb-more { font: 600 .95rem/1 var(--mb-body); text-transform: uppercase; letter-spacing: .1em; text-decoration: none; }
.mb-more::after { content: " \2192"; }
.mb-archives ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.mb-archives a { display: inline-block; padding: .55rem .9rem; border: 1px solid var(--mb-line); text-decoration: none; color: var(--mb-text); font: 400 .8rem/1 var(--mb-mono); letter-spacing: .12em; text-transform: uppercase; }
.mb-archives a:hover { border-color: var(--mb-accent); color: var(--mb-accent); }
.mb-pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.mb-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 2.9rem; height: 2.9rem; padding: 0 .6rem; border: 1px solid var(--mb-line); text-decoration: none; color: var(--mb-text); font-family: var(--mb-mono); }
.mb-pagination .current { background: var(--mb-accent); border-color: var(--mb-accent); color: var(--mb-ink); }

/* Zenekar adatlap */
.mb-band { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .mb-band { grid-template-columns: 26rem 1fr; align-items: start; } .mb-band__videos { grid-column: 1 / -1; } }
.mb-band__photo { margin: 0; border: 1px solid var(--mb-line); }
.mb-band__photo img { display: block; width: 100%; }
.mb-band__videos { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.mb-yt { position: relative; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--mb-line); overflow: hidden; }
.mb-yt a, .mb-yt img, .mb-yt iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.mb-yt__play { position: absolute; inset: 50% auto auto 50%; width: 4.5rem; height: 3.2rem; translate: -50% -50%; background: var(--mb-accent); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); opacity: .92; }
.mb-yt__play::after { content: ""; position: absolute; inset: 50% auto auto 54%; translate: -50% -50%; border: .8rem solid transparent; border-left: 1.3rem solid var(--mb-ink); border-right: 0; }
.mb-yt a:hover .mb-yt__play { opacity: 1; }
.mb-postnav { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 4rem; font: 400 .8rem/1.4 var(--mb-mono); letter-spacing: .1em; text-transform: uppercase; }
.mb-postnav a { text-decoration: none; }

/* Űrlap (Contact Form 7) */
.wpcf7 { background: rgb(10 22 34 / .85); border: 1px solid var(--mb-line); padding: clamp(1.25rem, 4vw, 2.25rem); }
.wpcf7 label { display: block; font: 400 .78rem/1.4 var(--mb-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mb-muted); margin-bottom: .35rem; }
.wpcf7 input:not([type="checkbox"]):not([type="submit"]):not([type="file"]), .wpcf7 textarea {
	width: 100%; min-height: 3rem; padding: .7rem .85rem; font: 400 1rem/1.4 var(--mb-body); letter-spacing: .02em; color: var(--mb-text);
	background: var(--mb-bg); border: 1px solid var(--mb-line); border-radius: 0;
}
.wpcf7 textarea { min-height: 9rem; }
.wpcf7 input:focus, .wpcf7 textarea:focus { border-color: var(--mb-accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--mb-accent) 30%, transparent); }
.wpcf7 input[type="file"] { color: var(--mb-muted); font: inherit; }
.wpcf7 input[type="checkbox"] { width: 1.2rem; height: 1.2rem; accent-color: var(--mb-accent); vertical-align: -.2em; }
.wpcf7 .wpcf7-list-item-label { text-transform: none; letter-spacing: .02em; font: 400 1rem/1.5 var(--mb-body); color: var(--mb-text); }
.wpcf7 input[type="submit"] {
	appearance: none; cursor: pointer; margin-top: .75rem; min-height: 3.5rem; padding: 1em 2.2em;
	background: var(--mb-accent); color: var(--mb-ink); border: 0; border-radius: 0;
	font: 600 1rem/1 var(--mb-body); letter-spacing: .1em; text-transform: uppercase;
	clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.wpcf7 p { margin-bottom: 1.2rem; }
.wpcf7 h3, .wpcf7 h4 { margin-top: 2rem; }
.wpcf7-not-valid-tip { color: #ff8a9b; font-size: .95rem; }
.wpcf7 form .wpcf7-response-output { margin: 1rem 0 0; padding: .9rem 1rem; }

/* Lábléc */
.mb-footer { margin-top: 3rem; background: rgb(5 13 20 / .92); border-top: 1px solid var(--mb-line); padding-block: 3rem; color: var(--mb-muted); font-size: .95rem; }
.mb-sponsors { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem 3rem; margin-bottom: 2.5rem; }
.mb-sponsors img { max-height: 4rem; width: auto; opacity: .85; }
.mb-footer__nav ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.mb-footer a { color: var(--mb-muted); }
.mb-footer a:hover { color: var(--mb-accent); }
.mb-footer__copy { margin: 0; font: 400 .75rem/1.6 var(--mb-mono); letter-spacing: .12em; text-transform: uppercase; }

/* Aloldalak szövege sötét panelen, hogy a mozgalmas háttér előtt is jól olvasható legyen. */
.mb-wrap.mb-prose { max-width: var(--mb-wrap); }
.mb-wrap.mb-prose > * { max-width: 50rem; }
article.mb-wrap.mb-prose, .mb-band { position: relative; }
article.mb-wrap.mb-prose::before, .mb-band::before {
	content: ""; position: absolute; z-index: -1; inset: clamp(1.5rem, 4vw, 3rem) calc(var(--mb-gutter) - 1.25rem);
	background: rgb(5 13 20 / .78); border: 1px solid var(--mb-line); backdrop-filter: blur(2px);
}
@media (max-width: 600px) { article.mb-wrap.mb-prose::before, .mb-band::before { inset-inline: 0; } }
.mb-front article.mb-wrap.mb-prose::before { display: none; }

/* Kezdőlap: zárt nevezés jól látható állapotdobozban. */
.mb-closed {
	position: relative; max-width: 40rem; margin-top: .5rem; padding: 1.5rem 1.75rem 1.75rem;
	background: rgb(5 13 20 / .82); border: 1px solid color-mix(in srgb, var(--mb-red) 55%, transparent); border-left: 4px solid var(--mb-red);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
	box-shadow: 0 0 40px color-mix(in srgb, var(--mb-red) 18%, transparent);
}
.mb-closed__label { display: flex; align-items: center; gap: .6rem; margin: 0 0 .6rem; font: 400 .75rem/1.4 var(--mb-mono); letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, var(--mb-red) 65%, #fff); }
.mb-closed__dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--mb-red); box-shadow: 0 0 0 0 var(--mb-red); animation: mb-pulse 1.8s infinite; }
@keyframes mb-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mb-red) 70%, transparent); } 70% { box-shadow: 0 0 0 .6rem transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .mb-closed__dot { animation: none; } }
.mb-closed__title { margin: 0 0 .5rem; font: 400 clamp(1.8rem, 5vw, 2.8rem)/1.1 var(--mb-display); text-transform: uppercase; letter-spacing: -.01em; color: var(--mb-text); }
.mb-closed__text { margin: 0 0 1.25rem; font-size: 1.05rem; color: color-mix(in srgb, var(--mb-text) 88%, transparent); }
.mb-btn--red { background: var(--mb-red); border-color: var(--mb-red); color: #fff; }
.mb-btn--red:hover { color: #fff; }