/*
Theme Name: EgidePage
Theme URI: https://egidepage.com
Author: Egide Inc
Description: Fast, dark, mobile-first theme for Live TV and Radio. Works with the Egide Live Channels plugin.
Version: 1.3.0
Requires PHP: 7.4
Text Domain: egidepage
*/

:root {
	--bg: #05070c;
	--surface: #141a26;
	--line: rgba(255, 255, 255, .08);
	--text: #f2f4f8;
	--muted: #9aa4b6;
	--accent: #1e90ff;
	--live: #ff3045;
	--gutter: 16px;
	color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--accent); }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }

/* Header */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(5, 7, 12, .92);
	-webkit-backdrop-filter: saturate(160%) blur(10px);
	backdrop-filter: saturate(160%) blur(10px);
	border-bottom: 1px solid var(--line);
}
.admin-bar .site-header { top: 46px; }
@media (min-width: 783px) { .admin-bar .site-header { top: 32px; } }
.site-header .wrap { display: flex; align-items: center; gap: 12px; min-height: 54px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; min-width: 0; }
.brand img, .brand .custom-logo { max-height: 36px; width: auto; }
.brand__logo { display: block; height: 22px; width: auto; }
@media (min-width: 720px) { .brand__logo { height: 26px; } }
.brand__mark {
	display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
	width: 34px; height: 34px; border-radius: 10px;
	background: linear-gradient(135deg, #2ee6a6, #1b8cff); color: #04130d; font-weight: 900; font-size: 16px;
}
.brand__name { font-size: 19px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-live {
	margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
	color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.header-live { font-weight: 500; }
.header-live.is-on {
	padding: 6px 12px 6px 10px; border-radius: 999px; text-decoration: none;
	background: rgba(255, 59, 92, .12); color: #ff8fa3; font-weight: 700; border: 1px solid rgba(255, 59, 92, .22);
}
.header-live.is-on:hover { background: rgba(255, 59, 92, .2); }
.header-live__dot { width: 8px; height: 8px; border-radius: 50%; background: #ff3b5c; animation: header-pulse 1.6s ease-out infinite; }
@keyframes header-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 59, 92, .55); } 100% { box-shadow: 0 0 0 8px rgba(255, 59, 92, 0); } }
@media (prefers-reduced-motion: reduce) { .header-live__dot { animation: none; } }

/* Main */
.site-main { padding: 20px 0 48px; }
.page-title { font-size: 22px; line-height: 1.2; margin: 4px 0 14px; }
.intro { color: var(--muted); margin: -6px 0 16px; font-size: 15px; }
.entry { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.entry > :first-child { margin-top: 0; }
.entry > :last-child { margin-bottom: 0; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; padding: 20px 0 28px; text-align: center; }
.site-footer a { color: var(--muted); }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px; margin: 0 0 12px; font-size: 14px; }
.footer-links a { color: #c3cbd8; text-decoration: none; padding: 6px 2px; }
.footer-links a:hover { color: #fff; text-decoration: underline; }
.footer-links span { color: var(--muted); }
.footer-links ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }

@media (min-width: 720px) {
	:root { --gutter: 24px; }
	.site-main { padding-top: 24px; }
	.page-title { font-size: 28px; }
}

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* ---------- "Add to home screen" banner ---------- */
.app-banner {
	position: fixed; z-index: 95; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	max-width: 520px; margin: 0 auto;
	display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 12px 12px 12px 14px;
	background: #141a26; border: 1px solid rgba(30, 144, 255, .35); border-radius: 16px;
	box-shadow: 0 12px 36px rgba(0, 0, 0, .55); color: var(--text);
	animation: app-banner-in .25s ease-out; transition: opacity .2s, transform .2s;
}
.app-banner.is-gone { opacity: 0; transform: translateY(12px); }
@keyframes app-banner-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .app-banner { animation: none; } }
.app-banner__icon { width: 48px; height: 48px; border-radius: 12px; flex: 0 0 auto; }
.app-banner__txt { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.app-banner__title { font-size: 15px; line-height: 1.3; }
.app-banner__sub { font-size: 13px; line-height: 1.4; color: var(--muted); }
.app-banner__share { display: inline-flex; vertical-align: -3px; color: var(--accent); }
.app-banner__share svg { width: 17px; height: 17px; fill: currentColor; }
.app-banner__acts { display: flex; gap: 8px; margin-left: auto; }
.app-banner__go, .app-banner__no {
	min-height: 40px; padding: 0 16px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 700;
	cursor: pointer; touch-action: manipulation;
}
.app-banner__go { border: 0; background: var(--accent); color: #fff; }
.app-banner__no { border: 1px solid rgba(255, 255, 255, .16); background: transparent; color: var(--text); }
.app-banner__go:focus-visible, .app-banner__no:focus-visible, .app-link:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.app-link {
	display: inline-flex; align-items: center; min-height: 40px; margin: 0 0 10px; padding: 0 16px;
	border: 1px solid rgba(30, 144, 255, .45); border-radius: 999px; background: transparent;
	color: var(--accent); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.app-link[hidden] { display: none; }
/* Opened from the home screen: room for the phone's status bar. */
.is-app .site-header { padding-top: env(safe-area-inset-top, 0px); }


/* =========================================================
   Background: "stadium night" — floodlights sweeping at the top,
   a faint pitch, and soft aurora light drifting lower down.
   Only transform/opacity move (light on phones); it calms down
   while something plays and stays still for "reduce motion".
   ========================================================= */
.site-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; transition: opacity .8s ease; }
.site-bg > span { position: absolute; display: block; will-change: transform; }
.site-bg__aurora--a {
	left: -25%; top: 25%; width: 90vmax; height: 90vmax;
	background: radial-gradient(closest-side, rgba(30, 144, 255, .2), rgba(30, 144, 255, .06) 55%, transparent 72%);
	animation: site-bg-drift-a 34s ease-in-out infinite alternate;
}
.site-bg__aurora--b {
	right: -30%; top: 45%; width: 80vmax; height: 80vmax;
	background: radial-gradient(closest-side, rgba(46, 230, 166, .15), rgba(124, 58, 237, .08) 55%, transparent 72%);
	animation: site-bg-drift-b 42s ease-in-out infinite alternate;
}
.site-bg__pitch {
	left: 50%; top: -120px; width: min(1100px, 160vw); height: 560px; transform: translateX(-50%);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1100 560' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Crect x='40' y='-40' width='1020' height='640' rx='4'/%3E%3Cline x1='550' y1='-40' x2='550' y2='600'/%3E%3Ccircle cx='550' cy='280' r='92'/%3E%3Ccircle cx='550' cy='280' r='4' fill='%23ffffff'/%3E%3Crect x='40' y='150' width='150' height='260'/%3E%3Crect x='910' y='150' width='150' height='260'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: .045;
	-webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 95%);
	mask-image: linear-gradient(180deg, #000 30%, transparent 95%);
	will-change: auto;
}
.site-bg__beam {
	top: -18vh; width: 34vw; min-width: 260px; height: 95vh;
	background: linear-gradient(180deg, rgba(210, 230, 255, .5), rgba(120, 180, 255, .14) 45%, transparent 85%);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 45%, #000 55%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 45%, #000 55%, transparent);
	opacity: .75;
}
.site-bg__beam--l { left: -6vw; transform-origin: 50% 0; transform: rotate(-28deg); animation: site-bg-sweep-l 11s ease-in-out infinite alternate; }
.site-bg__beam--r { right: -6vw; transform-origin: 50% 0; transform: rotate(28deg); animation: site-bg-sweep-r 13s ease-in-out infinite alternate; }
@keyframes site-bg-sweep-l { from { transform: rotate(-34deg); } to { transform: rotate(-16deg); } }
@keyframes site-bg-sweep-r { from { transform: rotate(32deg); } to { transform: rotate(15deg); } }
@keyframes site-bg-drift-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(18vw, -10vh) scale(1.15); } }
@keyframes site-bg-drift-b { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-16vw, 8vh) scale(.95); } }
/* While watching: the lights dim and stop, so the video gets all the attention. */
body:has(.elc.is-watching) .site-bg { opacity: .35; }
body:has(.elc.is-watching) .site-bg > span { animation-play-state: paused; }
@media (max-width: 720px) {
	.site-bg__beam { width: 60vw; opacity: .6; }
	.site-bg__pitch { opacity: .035; }
}
@media (prefers-reduced-motion: reduce) { .site-bg > span { animation: none !important; } }