/*
Theme Name: Play2sell Blog
Theme URI: https://play2sell.com/blog
Description: Custom block theme for blog.play2sell.com matching the Play2sell design system. DM Sans + Instrument Serif + JetBrains Mono with brand colors, light/dark variants, Polylang-aware locale switcher, and Lucide-inspired theme toggle.
Version: 1.2.0
Author: Play2sell
Author URI: https://play2sell.com
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: play2sell-blog
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 7.4
*/

/* ── Dark theme variables (used by both manual toggle & OS preference) ── */
html.is-dark,
html.is-dark body {
	--wp--preset--color--bg-primary:    #06102E;
	--wp--preset--color--bg-secondary:  #0A1628;
	--wp--preset--color--bg-card:       #111827;
	--wp--preset--color--bg-elevated:   #1F2937;
	--wp--preset--color--bg-hover:      #374151;

	--wp--preset--color--text-primary:   #F9FAFB;
	--wp--preset--color--text-secondary: #9CA3AF;
	--wp--preset--color--text-tertiary:  #6B7280;
	--wp--preset--color--text-muted:     #4B5563;

	--wp--preset--color--border-primary:   #1F2937;
	--wp--preset--color--border-secondary: #374151;

	color-scheme: dark;
}

/* OS preference triggers dark ONLY when no explicit theme set (data-theme not "light") */
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]):not(.is-dark) {
		--wp--preset--color--bg-primary:    #06102E;
		--wp--preset--color--bg-secondary:  #0A1628;
		--wp--preset--color--bg-card:       #111827;
		--wp--preset--color--bg-elevated:   #1F2937;
		--wp--preset--color--bg-hover:      #374151;
		--wp--preset--color--text-primary:   #F9FAFB;
		--wp--preset--color--text-secondary: #9CA3AF;
		--wp--preset--color--text-tertiary:  #6B7280;
		--wp--preset--color--text-muted:     #4B5563;
		--wp--preset--color--border-primary:   #1F2937;
		--wp--preset--color--border-secondary: #374151;
		color-scheme: dark;
	}
}

/* ── Typography polish ── */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--wp--preset--color--brand-red);
	color: #FFFFFF;
}

html { scroll-behavior: smooth; }

.wp-block-code,
.wp-block-preformatted {
	border: 1px solid var(--wp--preset--color--border-primary);
}

.wp-block-quote {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
}

.wp-block-post-title {
	text-wrap: balance;
}

/* ════════════════════════════════════════════
 * Logo (PNG dual: black for light bg, white for dark bg)
 * ════════════════════════════════════════════ */

.p2s-logo {
	display: inline-flex;
	align-items: center;
	height: 9rem;
	line-height: 0;
}

.p2s-logo img {
	height: 100%;
	width: auto;
	display: block;
}

.p2s-logo-dark { display: none; }

html.is-dark .p2s-logo-light { display: none; }
html.is-dark .p2s-logo-dark  { display: block; }

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]):not(.is-dark) .p2s-logo-light { display: none; }
	html:not([data-theme="light"]):not(.is-dark) .p2s-logo-dark  { display: block; }
}

/* ════════════════════════════════════════════
 * Theme toggle button
 * ════════════════════════════════════════════ */

.p2s-theme-toggle {
	all: unset;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 0.5rem;
	color: var(--wp--preset--color--text-secondary);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
	box-sizing: border-box;
}

.p2s-theme-toggle:hover,
.p2s-theme-toggle:focus-visible {
	background: var(--wp--preset--color--bg-elevated);
	color: var(--wp--preset--color--text-primary);
}

.p2s-theme-toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-red);
	outline-offset: 1px;
}

.p2s-theme-toggle [data-icon] { display: none; }
.p2s-theme-toggle [data-icon="system"] { display: inline-flex; }

html[data-theme="light"] .p2s-theme-toggle [data-icon="system"],
html[data-theme="dark"]  .p2s-theme-toggle [data-icon="system"] { display: none; }
html[data-theme="light"] .p2s-theme-toggle [data-icon="light"]  { display: inline-flex; }
html[data-theme="dark"]  .p2s-theme-toggle [data-icon="dark"]   { display: inline-flex; }

/* ════════════════════════════════════════════
 * Locale switcher (Polylang)
 * <details> based dropdown — no JS needed for toggle
 * ════════════════════════════════════════════ */

.p2s-locale {
	position: relative;
	display: inline-block;
}

.p2s-locale > summary {
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.625rem;
	border-radius: 0.5rem;
	color: var(--wp--preset--color--text-secondary);
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.p2s-locale > summary::-webkit-details-marker { display: none; }
.p2s-locale > summary::marker { content: ''; }

.p2s-locale > summary:hover,
.p2s-locale[open] > summary {
	background: var(--wp--preset--color--bg-elevated);
	color: var(--wp--preset--color--text-primary);
}

.p2s-locale-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 0.25rem);
	min-width: 5rem;
	margin: 0;
	padding: 0.25rem;
	list-style: none;
	background: var(--wp--preset--color--bg-card);
	border: 1px solid var(--wp--preset--color--border-primary);
	border-radius: 0.5rem;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
	z-index: 50;
}

.p2s-locale-item {
	display: block;
	padding: 0.375rem 0.75rem;
	border-radius: 0.375rem;
	font-size: 0.875rem;
	text-decoration: none;
	color: var(--wp--preset--color--text-secondary);
	transition: background-color 0.12s ease, color 0.12s ease;
}

.p2s-locale-item:hover {
	background: var(--wp--preset--color--bg-elevated);
	color: var(--wp--preset--color--text-primary);
}

.p2s-locale-item.is-active {
	background: rgba(226, 12, 24, 0.10);
	color: var(--wp--preset--color--brand-red);
	font-weight: 600;
}

/* ════════════════════════════════════════════
 * Header row spacing (when logo + controls together)
 * ════════════════════════════════════════════ */

.p2s-header-controls {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

/* ════════════════════════════════════════════
 * Footer (full apex-style: brand + 4 link cols + addresses + copyright)
 * ════════════════════════════════════════════ */

.p2s-footer {
	border-top: 1px solid var(--wp--preset--color--border-primary);
	background: var(--wp--preset--color--bg-secondary);
	margin-top: var(--wp--preset--spacing--100, 6rem);
}

.p2s-footer-inner {
	max-width: 80rem;
	margin: 0 auto;
	padding: 3rem 1.5rem;
}

@media (min-width: 640px) { .p2s-footer-inner { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .p2s-footer-inner { padding-left: 2.5rem; padding-right: 2.5rem; } }

.p2s-footer-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
}

@media (min-width: 768px) { .p2s-footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .p2s-footer-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.p2s-footer-brand {
	grid-column: span 2 / span 2;
}

@media (min-width: 768px) { .p2s-footer-brand { grid-column: span 4 / span 4; } }
@media (min-width: 1024px) { .p2s-footer-brand { grid-column: span 1 / span 1; } }

.p2s-footer-brand a { display: inline-block; line-height: 0; }
.p2s-footer-brand img {
	height: 7rem;
	width: auto;
	object-fit: contain;
}

.p2s-footer-logo-dark { display: none; }
html.is-dark .p2s-footer-logo-light { display: none; }
html.is-dark .p2s-footer-logo-dark  { display: block; }

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]):not(.is-dark) .p2s-footer-logo-light { display: none; }
	html:not([data-theme="light"]):not(.is-dark) .p2s-footer-logo-dark  { display: block; }
}

.p2s-footer-heading {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--text-primary);
	margin: 0 0 0.75rem 0;
}

.p2s-footer-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.p2s-footer-link {
	font-size: 0.75rem;
	color: var(--wp--preset--color--text-tertiary);
	text-decoration: none;
	transition: color 0.15s ease;
}

.p2s-footer-link:hover,
.p2s-footer-link:focus-visible {
	color: var(--wp--preset--color--text-primary);
}

.p2s-footer-addresses {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--wp--preset--color--border-primary);
}

@media (min-width: 640px) { .p2s-footer-addresses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.p2s-footer-address {
	display: flex;
	gap: 0.75rem;
}

.p2s-footer-pin {
	display: flex;
	width: 2rem;
	height: 2rem;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	border-radius: 0.375rem;
	background: rgba(226, 12, 24, 0.10);
	color: var(--wp--preset--color--brand-red, #E20C18);
}

.p2s-footer-address-body {
	font-size: 0.75rem;
	line-height: 1.6;
}

.p2s-footer-address-body p { margin: 0; color: var(--wp--preset--color--text-tertiary); }
.p2s-footer-address-title {
	font-weight: 600;
	color: var(--wp--preset--color--text-primary) !important;
	margin-bottom: 0.25rem !important;
}

.p2s-footer-copyright {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--border-primary);
	text-align: center;
}

.p2s-footer-copyright p {
	font-size: 0.75rem;
	color: var(--wp--preset--color--text-muted);
	margin: 0;
}