/* =========================================================
   Opole United — design tokens, base typography, components
   ========================================================= */

:root{
	/* colour */
	--ou-bg:#07070a;
	--ou-surface:#111115;
	--ou-surface-2:#18181d;
	--ou-border:rgba(255,255,255,.09);
	--ou-border-strong:rgba(255,255,255,.18);
	--ou-text:#e9e9ee;
	--ou-muted:#a3a3ad;
	--ou-subtle:#8a8a95;
	--ou-accent:#f6551c;
	--ou-accent-2:#ff7a45;
	--ou-accent-soft:rgba(246,85,28,.14);
	/* fills behind white text (WCAG AA 4.5:1 — #f6551c only reaches 3.4:1) */
	--ou-fill:#cf440e;
	--ou-fill-2:#b93c0a;

	/* type */
	--ou-font:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
	--ou-font-display:'Big Shoulders Display','Arial Narrow',Impact,'Arial Black',sans-serif;
	--ou-chamfer:12px;

	/* space & shape */
	--ou-wrap:1200px;
	--ou-wrap-narrow:820px;
	--ou-gutter:clamp(16px,4vw,40px);
	--ou-section:clamp(56px,8vw,112px);
	--ou-radius:18px;
	--ou-radius-sm:12px;
	--ou-shadow:0 18px 50px rgba(0,0,0,.45);
	--ou-ease:cubic-bezier(.22,.8,.28,1);

	/* Elementor global kit values still referenced by migrated layout CSS */
	--e-global-color-primary:var(--ou-accent);
	--e-global-color-secondary:#54595F;
	--e-global-color-text:var(--ou-muted);
	--e-global-color-accent:var(--ou-accent);
	--e-global-typography-primary-font-family:"Poppins";
	--e-global-typography-primary-font-weight:600;
	--e-global-typography-text-font-family:"Poppins";
	--e-global-typography-text-font-weight:400;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:110px; }
body{
	margin:0;
	background:var(--ou-bg);
	color:var(--ou-text);
	font-family:var(--ou-font);
	font-size:17px;
	line-height:1.7;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	text-rendering:optimizeLegibility;
	overflow-x:hidden;
}
img,svg,video,iframe{ max-width:100%; }
img{ height:auto; vertical-align:middle; border:0; }
figure{ margin:0; }
a{ color:var(--ou-accent); text-decoration:none; transition:color .2s ease; }
a:hover{ color:var(--ou-accent-2); }
::selection{ background:var(--ou-fill); color:#fff; }
:focus-visible{ outline:2px solid var(--ou-accent); outline-offset:3px; }

h1,h2,h3,h4,h5,h6{
	margin:0 0 .6em;
	color:#fff;
	font-family:var(--ou-font);
	font-weight:700;
	line-height:1.15;
	letter-spacing:-.01em;
	text-wrap:balance;
}
h1{ font-size:clamp(34px,5.2vw,58px); }
h2{ font-size:clamp(26px,3.4vw,40px); }
h3{ font-size:clamp(20px,2.2vw,26px); }
h4{ font-size:20px; }
p{ margin:0 0 1.2em; text-wrap:pretty; }

.ou-skip{
	position:absolute; left:12px; top:-60px; z-index:10000;
	padding:10px 16px; border-radius:10px;
	background:var(--ou-fill); color:#fff; font-weight:600;
}
.ou-skip:focus{ top:12px; color:#fff; }

/* ---------- layout helpers ---------- */
.ou-main{ display:block; min-height:60vh; }
.ou-wrap{ width:100%; max-width:calc(var(--ou-wrap) + 2 * var(--ou-gutter)); margin-inline:auto; padding-inline:var(--ou-gutter); }
.ou-wrap--narrow{ max-width:calc(var(--ou-wrap-narrow) + 2 * var(--ou-gutter)); }
.ou-section{ padding-block:var(--ou-section); }
.ou-muted{ color:var(--ou-muted); }

.ou-eyebrow{
	display:inline-flex; align-items:center; gap:10px;
	margin:0 0 14px;
	font-size:12.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
	color:var(--ou-accent);
}
.ou-eyebrow::before{ content:""; width:14px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 3px 0 rgba(246,85,28,.45); transform:translateY(-1px); }

.ou-display{
	font-family:var(--ou-font-display);
	font-weight:900;
	text-transform:uppercase;
	letter-spacing:.005em;
	line-height:.92;
}
.ou-accent{ color:var(--ou-accent); }

.ou-chip{
	display:inline-flex; align-items:center; gap:8px;
	margin:0;
	padding:6px 14px; border-radius:999px;
	background:var(--ou-accent-soft); color:#ffb393;
	font-size:13px; font-weight:600; letter-spacing:.06em;
}

/* ---------- buttons ---------- */
.ou-btn{
	position:relative;
	display:inline-flex; align-items:center; justify-content:center; gap:10px;
	padding:15px 30px;
	background:linear-gradient(135deg,var(--ou-fill),var(--ou-fill-2));
	color:#fff; font-weight:700; font-size:14.5px; letter-spacing:.08em; text-transform:uppercase;
	clip-path:polygon(var(--ou-chamfer) 0,100% 0,100% calc(100% - var(--ou-chamfer)),calc(100% - var(--ou-chamfer)) 100%,0 100%,0 var(--ou-chamfer));
	filter:drop-shadow(0 10px 22px rgba(246,85,28,.35));
	transition:transform .25s var(--ou-ease), filter .25s ease, background .25s ease;
}
.ou-btn .ou-icon{ width:18px; height:18px; transition:transform .25s var(--ou-ease); }
.ou-btn:hover{ color:#fff; transform:translateY(-2px); filter:drop-shadow(0 16px 30px rgba(246,85,28,.5)); }
.ou-btn:hover .ou-icon{ transform:translateX(3px); }
.ou-btn--ghost{ background:rgba(255,255,255,.06); filter:none; box-shadow:inset 0 0 0 1px var(--ou-border-strong); }
.ou-btn--ghost:hover{ background:rgba(246,85,28,.16); filter:none; }
/* clip-path hides outlines, so chamfered controls draw their focus ring inside (WCAG 2.4.7 / 2.4.13) */
.ou-btn:focus-visible,
.wpcf7-form .wpcf7-submit:focus-visible{ outline:none; box-shadow:inset 0 0 0 3px #fff, inset 0 0 0 5px #000; }
.ou-logos__item:focus-visible{ outline:none; box-shadow:inset 0 0 0 4px var(--ou-fill); filter:none; }

/* visually hidden, still read by screen readers */
.screen-reader-text{
	position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
	clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* pause / play control for moving content (WCAG 2.2.2) */
.ou-motion{
	display:inline-grid; place-items:center; width:40px; height:40px; padding:0; cursor:pointer;
	border-radius:50%; border:1px solid var(--ou-border-strong);
	background:rgba(8,8,11,.75); color:#fff; backdrop-filter:blur(6px);
	transition:background .2s ease, border-color .2s ease;
}
.ou-motion:hover{ background:var(--ou-fill); border-color:var(--ou-fill); }
.ou-motion svg{ width:16px; height:16px; }
.ou-motion .ou-motion__play{ display:none; }
.ou-motion[aria-pressed="true"] .ou-motion__play{ display:block; }
.ou-motion[aria-pressed="true"] .ou-motion__pause{ display:none; }
.ou-motion-off *,
.ou-motion-off *::before,
.ou-motion-off *::after{ animation-play-state:paused !important; }

/* ---------- prose (editor content, posts, legal pages) ---------- */
.ou-prose{ max-width:calc(var(--ou-wrap-narrow) + 2 * var(--ou-gutter)); color:#d6d6dc; }
.ou-prose > *:first-child{ margin-top:0; }
.ou-prose h2,.ou-prose h3{ margin-top:1.8em; }
.ou-prose a{ text-decoration:underline; text-decoration-color:rgba(246,85,28,.45); text-underline-offset:3px; }
.ou-prose a:hover{ text-decoration-color:currentColor; }
.ou-prose ul,.ou-prose ol{ padding-left:1.3em; margin:0 0 1.2em; }
.ou-prose li{ margin-bottom:.4em; }
.ou-prose li::marker{ color:var(--ou-accent); }
.ou-prose blockquote{
	margin:1.6em 0; padding:18px 24px;
	border-left:3px solid var(--ou-accent); border-radius:0 var(--ou-radius-sm) var(--ou-radius-sm) 0;
	background:var(--ou-surface); font-size:1.1em; color:#fff;
}
.ou-prose img{ border-radius:var(--ou-radius-sm); }
.ou-prose .modula,
.ou-prose .wp-block-gallery,
.ou-prose .alignwide{ max-width:none; }

/* ---------- generic page (editor content) ---------- */
.ou-page{ padding-block:clamp(40px,6vw,80px) var(--ou-section); }
.ou-page__head{ margin-bottom:clamp(28px,4vw,48px); text-align:center; }
.ou-page__title{
	position:relative; display:inline-block;
	margin:0; padding-bottom:18px;
	font-family:var(--ou-font-display); font-weight:900; text-transform:uppercase;
	font-size:clamp(28px,4.4vw,52px); letter-spacing:.01em;
}
.ou-page__title::after{
	content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
	width:64px; height:3px; border-radius:3px;
	background:linear-gradient(90deg,var(--ou-accent),var(--ou-accent-2));
}

/* ---------- single post (match report) ---------- */
.ou-post__back{
	display:inline-flex; gap:8px; margin-bottom:26px;
	font-size:14px; font-weight:600; color:var(--ou-muted);
}
.ou-post__back:hover{ color:#fff; }
.ou-post__title{
	display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center;
	gap:.2em .5em;
	margin:0 0 18px; max-width:1000px; color:#fff;
	font-family:var(--ou-font-display); font-weight:900; text-transform:uppercase;
	font-size:clamp(28px,4.6vw,56px); line-height:1.05;
}
.ou-post__vs{
	display:inline-grid; place-items:center;
	width:1.6em; height:1.6em; border-radius:50%;
	background:var(--ou-accent); color:#fff;
	font-family:var(--ou-font); font-size:.42em; font-weight:800; letter-spacing:.05em;
	box-shadow:0 0 0 6px rgba(246,85,28,.18);
}
.ou-post__content{ max-width:calc(var(--ou-wrap) + 2 * var(--ou-gutter)); padding-block:clamp(36px,5vw,64px); }
.ou-post__content > p,.ou-post__content > ul,.ou-post__content > h2{ max-width:var(--ou-wrap-narrow); }

.ou-postnav{
	display:grid; grid-template-columns:1fr 1fr; gap:16px;
	padding-bottom:var(--ou-section);
}
.ou-postnav__link{
	display:flex; flex-direction:column; gap:6px;
	padding:20px 24px; border-radius:var(--ou-radius);
	background:var(--ou-surface); border:1px solid var(--ou-border);
	transition:border-color .25s ease, transform .25s var(--ou-ease);
}
.ou-postnav__link:hover{ border-color:rgba(246,85,28,.5); transform:translateY(-3px); }
.ou-postnav__link--next{ text-align:right; }
.ou-postnav__label{ font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ou-accent); }
.ou-postnav__title{ color:#fff; font-weight:600; line-height:1.35; }
@media (max-width:640px){
	.ou-postnav{ grid-template-columns:1fr; }
	.ou-postnav__link--next{ text-align:left; }
}

/* ---------- cards (archives) ---------- */
.ou-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px; }
.ou-card{
	display:flex; flex-direction:column; overflow:hidden;
	border-radius:var(--ou-radius); background:var(--ou-surface); border:1px solid var(--ou-border);
	color:var(--ou-text);
	transition:transform .3s var(--ou-ease), border-color .3s ease, box-shadow .3s ease;
}
.ou-card:hover{ color:var(--ou-text); transform:translateY(-4px); border-color:rgba(246,85,28,.45); box-shadow:var(--ou-shadow); }
.ou-card__media{ aspect-ratio:16/10; overflow:hidden; }
.ou-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ou-ease); }
.ou-card:hover .ou-card__media img{ transform:scale(1.05); }
.ou-card__body{ display:flex; flex-direction:column; gap:6px; padding:20px 22px 24px; }
.ou-card__meta{ font-size:13px; color:var(--ou-muted); }
.ou-card__title{ font-weight:700; color:#fff; line-height:1.3; }

/* ---------- 404 ---------- */
.ou-404{ padding-block:var(--ou-section); text-align:center; }
.ou-404__code{
	margin:0; line-height:.9;
	font-family:var(--ou-font-display); font-weight:900; font-size:clamp(110px,22vw,240px);
	background:linear-gradient(180deg,var(--ou-accent),rgba(246,85,28,.08));
	-webkit-background-clip:text; background-clip:text; color:transparent;
}
.ou-404 .ou-page__title{ margin-bottom:18px; }
.ou-404 .ou-btn{ margin-top:10px; }

/* ---------- pagination ---------- */
.nav-links{ display:flex; justify-content:center; gap:8px; margin-top:40px; }
.nav-links .page-numbers{
	display:grid; place-items:center; min-width:42px; height:42px; padding:0 12px;
	border-radius:12px; border:1px solid var(--ou-border); color:var(--ou-text);
}
.nav-links .page-numbers.current,
.nav-links .page-numbers:hover{ background:var(--ou-fill); border-color:var(--ou-fill); color:#fff; }

/* ---------- scroll reveal (see assets/js/footer.js) ---------- */
.ou-js .ou-reveal{
	opacity:0; transform:translateY(26px);
	transition:opacity .8s ease, transform .8s var(--ou-ease);
	transition-delay:var(--ou-delay,0s);
}
.ou-js .ou-reveal.is-in{ opacity:1; transform:none; }
/* First screen (hero): CSS-only entrance on page load, so the headline paints without waiting for JS (LCP). */
.ou-js .ou-hero2 .ou-reveal,
.ou-js .ou-phero .ou-reveal{
	opacity:1; transform:none; transition:none;
	animation:ouRise .7s var(--ou-ease) both; animation-delay:var(--ou-delay,0s);
}
@keyframes ouRise{ from{ opacity:.01; transform:translateY(18px); } to{ opacity:1; transform:none; } }
/* paused motion (.ou-motion-off pauses every animation) or reduced motion: just show it */
.ou-motion-off .ou-hero2 .ou-reveal,
.ou-motion-off .ou-phero .ou-reveal{ animation:none; }
@media (prefers-reduced-motion: reduce){
	.ou-js .ou-hero2 .ou-reveal,
	.ou-js .ou-phero .ou-reveal{ animation:none; }
}

@media (prefers-reduced-motion: reduce){
	html{ scroll-behavior:auto; }
	.ou-js .ou-reveal{ opacity:1; transform:none; transition:none; animation:none; }
}

/* ---------- Contact Form 7 ---------- */
.wpcf7{ font-family:var(--ou-font); max-width:820px; margin:0 auto; }
.wpcf7-form{
	display:grid; grid-template-columns:1fr; gap:16px;
	padding:24px; border-radius:20px;
	background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
	border:1px solid var(--ou-border);
}
.wpcf7-form .hidden-fields-container{ display:none !important; }
.wpcf7-form > p{ margin:0; }
.wpcf7-form label{
	display:flex; flex-direction:column; gap:7px;
	font-size:13.5px; font-weight:600; letter-spacing:.3px; color:#e7e7ea;
}
.wpcf7-form .wpcf7-form-control-wrap{ display:block; }
.wpcf7-form input[type=text],
.wpcf7-form input[type=email],
.wpcf7-form input[type=url],
.wpcf7-form input[type=tel],
.wpcf7-form input[type=number],
.wpcf7-form input[type=date],
.wpcf7-form textarea,
.wpcf7-form select{
	width:100%; padding:13px 15px;
	font-family:inherit; font-size:15px; color:#fff;
	background:rgba(0,0,0,.35);
	border:1px solid #6e6e78; border-radius:12px; outline:none; /* 3.9:1 boundary (WCAG 1.4.11) */
	transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder{ color:#8a8a90; }
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus{
	border-color:var(--ou-accent); background:rgba(0,0,0,.5);
	box-shadow:0 0 0 3px rgba(246,85,28,.22);
}
.wpcf7-form textarea{ min-height:120px; resize:vertical; }
.wpcf7-form .wpcf7-submit{
	width:100%; padding:16px 32px;
	font-family:inherit; font-size:14.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff;
	background:linear-gradient(135deg,var(--ou-fill),var(--ou-fill-2));
	border:0; border-radius:0; cursor:pointer;
	clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
	filter:drop-shadow(0 10px 22px rgba(246,85,28,.4));
	transition:transform .2s ease, filter .2s ease;
}
@media (hover:hover){
	.wpcf7-form .wpcf7-submit:hover{ transform:translateY(-2px); filter:drop-shadow(0 16px 30px rgba(246,85,28,.55)); }
}
.wpcf7-spinner{ display:block; margin:10px auto 0; }
.wpcf7-not-valid-tip{ color:#ff9a76; font-size:12.5px; margin-top:5px; }
.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid{ border-color:#ff6a4d; }
.wpcf7-response-output{
	grid-column:1 / -1;
	margin:6px 0 0 !important; padding:12px 16px !important;
	border-radius:12px !important; border:1px solid rgba(255,255,255,.2) !important;
	font-size:14px; color:#fff;
}
@media (min-width:720px){
	.wpcf7-form{ grid-template-columns:1fr 1fr; padding:32px; gap:18px; }
	.wpcf7-form > p:has(textarea),
	.wpcf7-form > p:has(.wpcf7-submit),
	.wpcf7-form > p:has(.wpcf7-acceptance){ grid-column:1 / -1; }
	.wpcf7-form .wpcf7-submit{ width:auto; min-width:240px; }
}
.grecaptcha-badge{ visibility:hidden; }

/* ---------- Modula gallery on narrow screens (from previous custom CSS) ---------- */
@media (max-width:1024px){
	.modula .modula-items{ display:block !important; height:auto !important; position:static !important; }
	.modula .modula-items .modula-item{
		position:relative !important; top:auto !important; left:auto !important;
		transform:none !important; margin:0 auto 10px !important; max-width:100% !important;
	}
}

/* ---------- display headings used across the migrated HTML sections ---------- */
.ouh__word,
.ou-hero__title,
.ou-partner__h2,
.ou-event__title,
.ou-reels__title,
.ou-date__day,
.ou-stat__num{
	font-family:var(--ou-font-display) !important;
	font-weight:900 !important;
	letter-spacing:1px;
}

@media (hover:none){
	.ou-hero__btn:hover,.ou-partner__btn:hover,.ou-logo:hover,.ou-btn:hover,
	.ou-btn-alt:hover,.ou-card:hover,.glass-box:hover{ transform:none !important; }
}

/* never allow sideways page scrolling on phones */
html,body{ overflow-x:clip; }