/* HYROX Oldebroek — thema: header/navigatie en algemene paginastijl. */

:root {
	--hyrox-ink: #2F2F2F;
	--hyrox-night: #171717;
	--hyrox-mint: #7BD59D;
	--hyrox-green: #2A7A40;
	--hyrox-green-deep: #14381C;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: #fff; color: #334155; font-family: "Inter", Arial, Helvetica, sans-serif; line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: var(--hyrox-green); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Header */
.hyrox-header { position: sticky; top: 0; z-index: 50; background: var(--hyrox-night); color: #fff; transition: background .25s, box-shadow .25s; }
.hyrox-has-hero .hyrox-header { position: fixed; left: 0; right: 0; background: transparent; }
.hyrox-has-hero .hyrox-header.is-scrolled, .hyrox-has-hero .hyrox-header.is-menu-open { background: rgba(23, 23, 23, .92); backdrop-filter: blur(10px); box-shadow: 0 10px 30px -15px rgba(0, 0, 0, .5); }
.admin-bar .hyrox-header { top: 32px; }
.hyrox-header__inner { max-width: 1160px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; }
.hyrox-logo { display: flex; align-items: center; color: #fff; text-decoration: none; }
.hyrox-logo__text { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-size: 26px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; line-height: 1; }
.hyrox-logo__text b { font-weight: 800; font-style: italic; color: var(--hyrox-mint); margin-right: 2px; }
.hyrox-logo__img { display: block; height: 34px; width: auto; }

.hyrox-nav { display: flex; align-items: center; gap: 28px; }
.hyrox-nav__list { list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; }
.hyrox-nav__list a { color: rgba(255, 255, 255, .85); text-decoration: none; font-weight: 600; font-size: 15px; transition: color .15s; }
.hyrox-nav__list a:hover { color: var(--hyrox-mint); }
.hyrox-nav__cta { padding: 10px 22px; border-radius: 999px; background: var(--hyrox-mint); color: var(--hyrox-green-deep); font-weight: 700; font-size: 15px; text-decoration: none; transition: background .15s; }
.hyrox-nav__cta:hover { background: #96DEB1; color: var(--hyrox-green-deep); }
.hyrox-nav__toggle { display: none; flex-direction: column; gap: 5px; padding: 10px; border: 0; background: none; cursor: pointer; }
.hyrox-nav__toggle span:not(.screen-reader-text) { display: block; width: 24px; height: 2px; border-radius: 2px; background: #fff; transition: transform .2s, opacity .2s; }
.hyrox-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hyrox-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hyrox-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Gewone pagina's (voorwaarden, privacy) */
.hyrox-page__head { max-width: 760px; margin: 0 auto; padding: 72px 20px 0; }
.hyrox-page__title { margin: 0; font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-size: clamp(40px, 6vw, 64px); font-weight: 800; text-transform: uppercase; line-height: 1; color: var(--hyrox-ink); }
.hyrox-page__content.hyr-section { max-width: 760px; margin: 0 auto; padding: 32px 20px 96px; }

@media (max-width: 820px) {
	.admin-bar .hyrox-header { top: 46px; }
	.hyrox-nav__toggle { display: flex; }
	.hyrox-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 8px; padding: 8px 20px 24px; background: rgba(23, 23, 23, .97); display: none; }
	.hyrox-nav.is-open { display: flex; }
	.hyrox-nav__list { flex-direction: column; gap: 0; }
	.hyrox-nav__list a { display: block; padding: 14px 0; font-size: 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
	.hyrox-nav__cta { margin-top: 12px; padding: 14px; text-align: center; }
}

/* Race-stijl header */
body { background: #0E0E0E; }
.hyrox-nav__cta { border-radius: 0; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; font-weight: 800; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.hyrox-nav__list a { text-transform: uppercase; letter-spacing: .08em; font-size: 13px; font-weight: 700; }
.hyrox-has-hero .hyrox-header.is-scrolled { border-bottom: 3px solid var(--hyrox-mint); }
.hyrox-logo__text { font-size: 28px; font-style: italic; font-weight: 800; }
.hyrox-page { background: #fff; }
body:not(.hyrox-has-hero) { background: #F4F4F2; }

/* Menu: lijn schuift onder de link, knop gloeit */
.hyrox-nav__list a { position: relative; }
.hyrox-nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--hyrox-mint); transform: scaleX(0); transform-origin: 0 50%; transition: transform .25s ease; box-shadow: 0 0 10px rgba(123, 213, 157, .8); }
.hyrox-nav__list a:hover::after { transform: scaleX(1); }
.hyrox-nav__cta { transition: background .2s, box-shadow .25s, transform .2s; }
.hyrox-nav__cta:hover { transform: translateY(-1px); box-shadow: 0 0 24px -4px rgba(123, 213, 157, .9); }
.hyrox-logo__text b { transition: text-shadow .3s; }
.hyrox-logo:hover .hyrox-logo__text b { text-shadow: 0 0 18px rgba(123, 213, 157, .9); }
@media (max-width: 820px) { .hyrox-nav__list a::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .hyrox-nav__list a::after, .hyrox-nav__cta { transition: none; } }