/**
 * GymBeep theme - custom styles.
 * Style Tailwind-a sa w Play CDN (wczytane w functions.php).
 * Tutaj sa style specyficzne: glow, phone frame, seven-seg display, marquee, prose itd.
 */

html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: #070a12; color: #e6ecff; }

.font-display { font-family: 'Space Grotesk', Inter, sans-serif; letter-spacing: -0.02em; }

/* Hero grid background */
.grid-bg {
	background-image:
		radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,128,255,0.18), transparent 60%),
		radial-gradient(ellipse 60% 40% at 80% 20%, rgba(97,206,112,0.12), transparent 60%),
		linear-gradient(transparent 95%, rgba(255,255,255,0.04) 95%),
		linear-gradient(90deg, transparent 95%, rgba(255,255,255,0.04) 95%);
	background-size: auto, auto, 40px 40px, 40px 40px;
}

.glow-blue  { box-shadow: 0 0 0 1px rgba(0,128,255,0.35), 0 20px 60px -10px rgba(0,128,255,0.35); }
.glow-green { box-shadow: 0 0 0 1px rgba(97,206,112,0.35), 0 20px 60px -10px rgba(97,206,112,0.35); }

/* Phone frame */
.phone {
	background: linear-gradient(180deg, #0b1120 0%, #070a12 100%);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 38px;
	box-shadow:
		0 40px 80px -20px rgba(0,0,0,0.8),
		inset 0 0 0 6px #0b1120,
		inset 0 0 0 7px rgba(255,255,255,0.05);
}

/* 7-segment display look */
.seven-seg {
	font-family: 'Space Grotesk', monospace;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: #ff3b5c;
	text-shadow: 0 0 12px rgba(255,59,92,0.6), 0 0 40px rgba(255,59,92,0.35);
}

/* Device shell */
.device-shell {
	background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
	border: 1px solid #2a2a2a;
	box-shadow:
		0 30px 60px -10px rgba(0,0,0,0.8),
		inset 0 1px 0 rgba(255,255,255,0.06);
}

/* FAQ chevron rotation */
details[open] summary .chev { transform: rotate(180deg); }
summary::-webkit-details-marker { display: none; }

/* Buttons */
.btn-primary {
	background: linear-gradient(180deg, #0a8cff 0%, #0070e6 100%);
	box-shadow: 0 10px 30px -10px rgba(0,128,255,0.6), inset 0 1px 0 rgba(255,255,255,0.25);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: filter .15s ease;
}
.btn-primary:hover { filter: brightness(1.1); }

.pill {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.1);
}

/* Marquee */
.marquee { animation: slide 30s linear infinite; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Gradient text */
.gradient-text {
	background: linear-gradient(135deg, #fff 0%, #61CE70 50%, #0080FF 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* WordPress core blocks / prose compatibility */
.prose-invert { color: rgba(255,255,255,0.85); }
.prose-invert a { color: #0080FF; text-decoration: underline; text-underline-offset: 3px; }
.prose-invert a:hover { color: #61CE70; }
.prose-invert h1, .prose-invert h2, .prose-invert h3, .prose-invert h4 {
	font-family: 'Space Grotesk', Inter, sans-serif;
	font-weight: 700;
	color: #fff;
	letter-spacing: -0.02em;
}
.prose-invert h2 { font-size: 1.875rem; margin: 2rem 0 1rem; line-height: 1.15; }
.prose-invert h3 { font-size: 1.5rem; margin: 1.75rem 0 .75rem; }
.prose-invert p { margin: 1.25rem 0; line-height: 1.7; font-size: 1.1rem; }
.prose-invert ul, .prose-invert ol { margin: 1rem 0; padding-left: 1.5rem; }
.prose-invert li { margin: .4rem 0; }
.prose-invert blockquote {
	border-left: 3px solid #FF3B5C;
	padding: .5rem 1.5rem;
	margin: 1.5rem 0;
	color: rgba(255,255,255,0.75);
	font-style: italic;
}
.prose-invert code { background: rgba(255,255,255,0.08); padding: 2px 6px; border-radius: 4px; font-size: .9em; color: #61CE70; }
.prose-invert pre {
	background: #0b1120;
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 12px;
	padding: 1rem 1.25rem;
	overflow-x: auto;
}
.prose-invert pre code { background: transparent; padding: 0; color: #e6ecff; }
.prose-invert img { border-radius: 16px; border: 1px solid rgba(255,255,255,0.1); max-width: 100%; height: auto; }
.prose-invert strong { color: #fff; font-weight: 700; }
.prose-invert hr { border: 0; border-top: 1px solid rgba(255,255,255,0.1); margin: 2rem 0; }

/* Mobile menu display */
.mobile-menu-open [data-mobile-menu] { display: block; }

/* Logo in header: reset WP custom-logo defaults + size cap */
header .gymbeep-logo { margin: 0; padding: 0; }
header .custom-logo-link {
	display: inline-flex !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 0 !important;
}
header .custom-logo,
header .custom-logo-link img {
	display: block !important;
	max-height: 36px !important;
	width: auto !important;
	height: auto !important;
}

/* WooCommerce mini overrides - by sklep dopasowal sie do dark theme.
   Nie ingeruje w layout, tylko kolory. */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: linear-gradient(180deg, #0a8cff 0%, #0070e6 100%) !important;
	color: #fff !important;
	border-radius: 10px !important;
	padding: .6rem 1.2rem !important;
	font-weight: 600 !important;
	border: none !important;
}
.woocommerce .button.alt { background: #61CE70 !important; color: #070a12 !important; }
.woocommerce-info, .woocommerce-message, .woocommerce-error {
	background: rgba(0,128,255,0.1) !important;
	color: #e6ecff !important;
	border-top-color: #0080FF !important;
	border-radius: 12px;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: #0b1120;
	border: 1px solid rgba(255,255,255,0.08);
	padding: 1rem !important;
	border-radius: 20px;
}
.woocommerce ul.products li.product .price {
	color: #61CE70 !important;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
}

/* WP default fallback (inner comment list, etc.) */
.comment-body { padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.comment-body .fn { font-weight: 600; }
.comment-meta { font-size: .85rem; color: rgba(255,255,255,0.4); margin-bottom: .5rem; }

/* WP pagination */
.pagination .page-numbers,
nav.pagination .page-numbers {
	padding: .5rem .9rem;
	border-radius: 10px;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.1);
	color: #e6ecff;
	text-decoration: none;
}
.pagination .page-numbers.current,
nav.pagination .page-numbers.current {
	background: #0080FF;
	border-color: #0080FF;
	color: #fff;
}

/* Ensure body always dark bg (default) */
body.home, body.blog, body.single, body.page, body.archive, body.search { background-color: #070a12; color: #e6ecff; }

/* Smooth color transitions when toggling theme */
html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
body, header, footer, section, article, .phone, .pill, .device-shell, .btn-primary, .prose-invert, details {
	transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}

/* ============================================================
   LIGHT MODE OVERRIDES
   Aktywne kiedy <html data-theme="light">.
   Nadpisuje klasy Tailwind (bg-ink-*, text-white/X, border-white/X).
   ============================================================ */
html[data-theme="light"] body,
html[data-theme="light"] body.home,
html[data-theme="light"] body.blog,
html[data-theme="light"] body.single,
html[data-theme="light"] body.page,
html[data-theme="light"] body.archive,
html[data-theme="light"] body.search {
	background-color: #ffffff !important;
	color: #0f172a !important;
}

html[data-theme="light"] .bg-ink-950      { background-color: #ffffff !important; }
html[data-theme="light"] .bg-ink-950\/70  { background-color: rgba(255,255,255,0.85) !important; }
html[data-theme="light"] .bg-ink-900      { background-color: #f8fafc !important; }
html[data-theme="light"] .bg-ink-900\/50  { background-color: rgba(248,250,252,0.7) !important; }
html[data-theme="light"] .bg-ink-900\/30  { background-color: rgba(248,250,252,0.5) !important; }
html[data-theme="light"] .bg-ink-800      { background-color: #f1f5f9 !important; }
html[data-theme="light"] .bg-ink-800\/50  { background-color: rgba(241,245,249,0.7) !important; }

html[data-theme="light"] .from-ink-900     { --tw-gradient-from: #f8fafc !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(248,250,252,0)) !important; }
html[data-theme="light"] .to-ink-800\/50   { --tw-gradient-to: rgba(241,245,249,0.5) !important; }
html[data-theme="light"] .via-ink-900      { --tw-gradient-via: #f8fafc !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to) !important; }
html[data-theme="light"] .to-ink-900       { --tw-gradient-to: #f8fafc !important; }
html[data-theme="light"] .from-ink-900\/50 { --tw-gradient-from: rgba(248,250,252,0.5) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(248,250,252,0)) !important; }
html[data-theme="light"] .from-ink-900\/30 { --tw-gradient-from: rgba(248,250,252,0.3) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(248,250,252,0)) !important; }
html[data-theme="light"] .via-ink-900\/40  { --tw-gradient-via: rgba(248,250,252,0.4) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to) !important; }
html[data-theme="light"] .to-ink-900\/30   { --tw-gradient-to: rgba(248,250,252,0.3) !important; }

/* CTA (#buy) - zostaje ciemny tlem dla dramatu, nadpisujemy tylko wewnatrz */
html[data-theme="light"] #buy .bg-ink-950 { background-color: #0b1120 !important; }
html[data-theme="light"] #buy .text-white\/70 { color: rgba(255,255,255,0.7) !important; }

html[data-theme="light"] .text-white       { color: #0f172a !important; }
html[data-theme="light"] .text-white\/85   { color: rgba(15,23,42,0.85) !important; }
html[data-theme="light"] .text-white\/80   { color: rgba(15,23,42,0.78) !important; }
html[data-theme="light"] .text-white\/70   { color: rgba(15,23,42,0.7) !important; }
html[data-theme="light"] .text-white\/60   { color: rgba(15,23,42,0.6) !important; }
html[data-theme="light"] .text-white\/50   { color: rgba(15,23,42,0.5) !important; }
html[data-theme="light"] .text-white\/40   { color: rgba(15,23,42,0.48) !important; }
html[data-theme="light"] .text-white\/30   { color: rgba(15,23,42,0.38) !important; }
html[data-theme="light"] .text-white\/5    { color: rgba(15,23,42,0.05) !important; }

html[data-theme="light"] .border-white\/5   { border-color: rgba(0,0,0,0.06) !important; }
html[data-theme="light"] .border-white\/10  { border-color: rgba(0,0,0,0.1) !important; }
html[data-theme="light"] .border-white\/15  { border-color: rgba(0,0,0,0.15) !important; }
html[data-theme="light"] .border-white\/30  { border-color: rgba(0,0,0,0.25) !important; }

html[data-theme="light"] .bg-white\/5         { background-color: rgba(0,0,0,0.04) !important; }
html[data-theme="light"] .bg-white\/10        { background-color: rgba(0,0,0,0.08) !important; }
html[data-theme="light"] .bg-white\/\[0\.02\] { background-color: rgba(0,0,0,0.025) !important; }

html[data-theme="light"] .text-ink-950 { color: #ffffff !important; }

html[data-theme="light"] .grid-bg {
	background-image:
		radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,128,255,0.08), transparent 60%),
		radial-gradient(ellipse 60% 40% at 80% 20%, rgba(97,206,112,0.06), transparent 60%),
		linear-gradient(transparent 95%, rgba(0,0,0,0.05) 95%),
		linear-gradient(90deg, transparent 95%, rgba(0,0,0,0.05) 95%);
	background-size: auto, auto, 40px 40px, 40px 40px;
}

html[data-theme="light"] .gradient-text {
	background: linear-gradient(135deg, #0f172a 0%, #61CE70 50%, #0080FF 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

html[data-theme="light"] .phone {
	background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 100%);
	border: 1px solid rgba(0,0,0,0.12);
	box-shadow:
		0 40px 80px -20px rgba(0,0,0,0.2),
		inset 0 0 0 6px #e2e8f0,
		inset 0 0 0 7px rgba(255,255,255,0.4);
}

html[data-theme="light"] .device-shell {
	border: 1px solid rgba(0,0,0,0.15);
	box-shadow: 0 30px 60px -10px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
}

html[data-theme="light"] .pill {
	background: rgba(0,0,0,0.05);
	border: 1px solid rgba(0,0,0,0.12);
}

html[data-theme="light"] header.sticky {
	background-color: rgba(255,255,255,0.85) !important;
}

html[data-theme="light"] details.bg-ink-900 { background-color: #f8fafc !important; }

html[data-theme="light"] .prose-invert { color: #0f172a; }
html[data-theme="light"] .prose-invert h1,
html[data-theme="light"] .prose-invert h2,
html[data-theme="light"] .prose-invert h3,
html[data-theme="light"] .prose-invert h4 { color: #0f172a; }
html[data-theme="light"] .prose-invert blockquote { color: rgba(15,23,42,0.75); }
html[data-theme="light"] .prose-invert code { background: rgba(0,0,0,0.06); color: #0070e6; }
html[data-theme="light"] .prose-invert pre { background: #0f172a; color: #e6ecff; }
html[data-theme="light"] .prose-invert pre code { color: #e6ecff; }
html[data-theme="light"] .prose-invert strong { color: #0f172a; }
html[data-theme="light"] .prose-invert hr { border-top-color: rgba(0,0,0,0.1); }
html[data-theme="light"] .prose-invert img { border-color: rgba(0,0,0,0.1); }
html[data-theme="light"] .prose-invert a { color: #0070e6; }
html[data-theme="light"] .prose-invert a:hover { color: #4caf63; }

html[data-theme="light"] .woocommerce-info,
html[data-theme="light"] .woocommerce-message,
html[data-theme="light"] .woocommerce-error {
	background: rgba(0,128,255,0.08) !important;
	color: #0f172a !important;
}
html[data-theme="light"] .woocommerce ul.products li.product,
html[data-theme="light"] .woocommerce-page ul.products li.product {
	background: #f8fafc !important;
	border-color: rgba(0,0,0,0.08) !important;
}
html[data-theme="light"] .woocommerce ul.products li.product .price { color: #0070e6 !important; }

html[data-theme="light"] .pagination .page-numbers,
html[data-theme="light"] nav.pagination .page-numbers {
	background: rgba(0,0,0,0.04);
	border-color: rgba(0,0,0,0.1);
	color: #0f172a;
}
html[data-theme="light"] .pagination .page-numbers.current,
html[data-theme="light"] nav.pagination .page-numbers.current {
	background: #0080FF;
	border-color: #0080FF;
	color: #fff;
}

html[data-theme="light"] .comment-body { border-bottom-color: rgba(0,0,0,0.08); }
html[data-theme="light"] .comment-meta { color: rgba(15,23,42,0.5); }

/* ============================================================
   THEME TOGGLE BUTTON (w stopce)
   ============================================================ */
.theme-toggle {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem 1rem;
	border-radius: 9999px;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.1);
	color: inherit;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all .2s ease;
	font-family: 'Inter', sans-serif;
}
.theme-toggle:hover { background: rgba(255,255,255,0.12); transform: translateY(-1px); }
.theme-toggle:focus-visible { outline: 2px solid #0080FF; outline-offset: 2px; }
.theme-toggle svg { width: 16px; height: 16px; flex: none; }

html[data-theme="light"] .theme-toggle {
	background: rgba(0,0,0,0.05);
	border-color: rgba(0,0,0,0.12);
	color: #0f172a;
}
html[data-theme="light"] .theme-toggle:hover { background: rgba(0,0,0,0.08); }

/* Pokaz ikone PRZECIWNA do aktualnego motywu (pokazuje co bedzie po kliknieciu) */
.theme-toggle .icon-sun  { display: inline-block; }
.theme-toggle .icon-moon { display: none; }
html[data-theme="light"] .theme-toggle .icon-sun  { display: none; }
html[data-theme="light"] .theme-toggle .icon-moon { display: inline-block; }

.theme-toggle .label-dark  { display: inline; }
.theme-toggle .label-light { display: none; }
html[data-theme="light"] .theme-toggle .label-dark  { display: none; }
html[data-theme="light"] .theme-toggle .label-light { display: inline; }