/*
Theme Name: EKhanS Theme
Theme URI: https://store.ekhans.com/
Author: EKhanS
Description: Presentation layer for the EKhanS marketplace. Owns layout, design tokens and templates only. All marketplace behaviour lives in the EKhanS Core plugin, so this theme can be replaced without affecting a single transaction.
Version: 2.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: ekhans-theme
Tags: marketplace, custom-theme
*/

/* ---------------------------------------------------------------------------
   DESIGN TOKENS

   Dark, high-contrast marketplace surface.

   Green carries "safe / money moves forward".
   Amber is reserved EXCLUSIVELY for Timer 1 (seller response).
   Blue is reserved EXCLUSIVELY for Timer 2 (buyer completion).

   Do not reuse those two hues for anything else. The whole point is that a
   user can tell the two clocks apart at a glance without reading the label.
   --------------------------------------------------------------------------- */

:root {
	--ek-bg:            #0a0b0e;
	--ek-surface:       #101218;
	--ek-surface-2:     #191c24;
	--ek-surface-3:     #20242e;
	--ek-border:        #2b303c;
	--ek-border-strong: #3a404e;

	--ek-text:          #f0f2f6;
	--ek-text-2:        #c8cdd8;
	--ek-text-3:        #939aa9;
	--ek-text-4:        #6d7383;

	--ek-accent:        #3fd08e;
	--ek-accent-hover:  #55dc9c;
	--ek-accent-ink:    #08110c;
	--ek-accent-soft:   rgba(63, 208, 142, 0.12);
	--ek-accent-line:   rgba(63, 208, 142, 0.30);

	--ek-timer1:        #f2b34f;
	--ek-timer1-ink:    #1a1206;
	--ek-timer1-soft:   rgba(242, 179, 79, 0.09);
	--ek-timer1-line:   rgba(242, 179, 79, 0.28);
	--ek-timer1-text:   #c9a86a;

	--ek-timer2:        #5aa8f2;
	--ek-timer2-ink:    #06121e;
	--ek-timer2-soft:   rgba(90, 168, 242, 0.09);
	--ek-timer2-line:   rgba(90, 168, 242, 0.26);
	--ek-timer2-text:   #9cc4e8;

	--ek-danger:        #e0665a;
	--ek-danger-soft:   rgba(224, 102, 90, 0.12);
	--ek-danger-line:   rgba(224, 102, 90, 0.32);
	--ek-danger-text:   #e8a097;

	--ek-radius-sm:     8px;
	--ek-radius:        11px;
	--ek-radius-lg:     20px;
	--ek-gap:           16px;
	--ek-tap:           48px;

	--ek-font: 'Space Grotesk', 'Hind Siliguri', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	--ek-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------------------------------------------------------------------------
   Reset and base
   --------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--ek-bg);
	color: var(--ek-text);
	font-family: var(--ek-font);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-wrap: pretty;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--ek-accent); text-decoration: none; }
a:hover, a:focus { color: var(--ek-accent-hover); text-decoration: underline; }

:focus-visible {
	outline: 2px solid var(--ek-accent);
	outline-offset: 2px;
	border-radius: 3px;
}

h1, h2, h3, h4 {
	margin: 0 0 0.5em;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.25;
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1em; padding-left: 1.2em; }

/* Tabular figures everywhere money appears, so columns of prices align. */
.ek-amount { font-variant-numeric: tabular-nums; }
.ek-mono { font-family: var(--ek-font-mono); }

.ek-screen-reader-text,
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ek-skip {
	position: absolute;
	left: -9999px;
	z-index: 100;
	padding: 12px 18px;
	background: var(--ek-accent);
	color: var(--ek-accent-ink);
	font-weight: 600;
}

.ek-skip:focus {
	left: 12px;
	top: 12px;
}

/* ---------------------------------------------------------------------------
   Shell and layout — mobile first
   --------------------------------------------------------------------------- */

.ek-shell {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 var(--ek-gap);
}

.ek-main { padding: 20px 0 56px; }

.ek-page-header { margin: 0 0 20px; }

.ek-page-header__title {
	margin: 0 0 6px;
	font-size: 1.5rem;
	letter-spacing: -0.02em;
}

.ek-page-header__subtitle {
	margin: 0;
	color: var(--ek-text-3);
	font-size: 14px;
	max-width: 62ch;
}

.ek-stack { display: grid; gap: var(--ek-gap); }
.ek-stack--sm { display: grid; gap: 10px; }
.ek-stack--lg { display: grid; gap: 28px; }

.ek-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.ek-row--between { justify-content: space-between; }
.ek-row--end { justify-content: flex-end; }

.ek-grid {
	display: grid;
	gap: var(--ek-gap);
	grid-template-columns: 1fr;
}

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */

.ek-header {
	position: sticky;
	top: 0;
	z-index: 30;
	background: rgba(10, 11, 14, 0.94);
	backdrop-filter: saturate(140%) blur(8px);
	border-bottom: 1px solid #21252e;
}

.ek-header__bar {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 58px;
}

.ek-logo {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ek-text);
	flex-shrink: 0;
	white-space: nowrap;
}

.ek-logo:hover { color: var(--ek-text); text-decoration: none; }

.ek-header__search {
	display: none;
	flex: 1;
	position: relative;
	min-width: 0;
}

.ek-header__search-submit {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	background: transparent;
	border: 0;
	color: var(--ek-text-3);
	font-size: 17px;
	cursor: pointer;
}

.ek-header__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	flex-shrink: 0;
}

.ek-wallet-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 12px;
	background: var(--ek-surface-2);
	border: 1px solid var(--ek-border);
	border-radius: 999px;
	color: var(--ek-text-2);
	font-size: 13px;
	white-space: nowrap;
}

.ek-wallet-chip:hover { color: var(--ek-text); text-decoration: none; border-color: var(--ek-border-strong); }
.ek-wallet-chip__label { display: none; }
.ek-wallet-chip strong { color: var(--ek-text); font-weight: 600; }

.ek-icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--ek-surface-2);
	border: 1px solid var(--ek-border);
	border-radius: var(--ek-radius-sm);
	color: var(--ek-text-2);
	font-size: 16px;
	cursor: pointer;
}

.ek-icon-btn:hover { color: var(--ek-text); text-decoration: none; border-color: var(--ek-border-strong); }

.ek-icon-btn__count {
	position: absolute;
	top: -5px;
	right: -5px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	display: grid;
	place-items: center;
	background: var(--ek-danger);
	border-radius: 999px;
	color: #1a0a08;
	font-size: 10px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Navigation
   --------------------------------------------------------------------------- */

.ek-nav {
	display: none;
	border-top: 1px solid #21252e;
	background: var(--ek-surface);
}

.ek-nav.is-open { display: block; }

.ek-nav__list {
	list-style: none;
	margin: 0;
	padding: 8px 0;
	display: grid;
	gap: 2px;
}

.ek-nav__list a {
	display: flex;
	align-items: center;
	min-height: var(--ek-tap);
	padding: 0 4px;
	color: var(--ek-text-2);
	font-size: 15px;
}

.ek-nav__list a:hover { color: var(--ek-text); text-decoration: none; }

.ek-nav-toggle { display: inline-flex; }

/* ---------------------------------------------------------------------------
   Banners
   --------------------------------------------------------------------------- */

.ek-banner {
	padding: 10px 0;
	font-size: 13.5px;
	text-align: center;
}

.ek-banner--warn {
	background: var(--ek-timer1-soft);
	border-bottom: 1px solid var(--ek-timer1-line);
	color: var(--ek-timer1-text);
}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */

.ek-footer {
	border-top: 1px solid #21252e;
	padding: 28px 0 44px;
	color: var(--ek-text-4);
	font-size: 13px;
}

.ek-footer__inner { display: grid; gap: 16px; }
.ek-footer__name { margin: 0 0 4px; color: var(--ek-text); font-weight: 600; font-size: 15px; }
.ek-footer__tagline { margin: 0; max-width: 46ch; }

.ek-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.ek-footer__legal { margin: 0; padding-top: 8px; border-top: 1px solid #1b1f28; }

/* ---------------------------------------------------------------------------
   Responsive escalation
   --------------------------------------------------------------------------- */

.ek-show-mobile { display: block; }
.ek-hide-mobile { display: none; }

@media (min-width: 640px) {
	.ek-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ek-wallet-chip__label { display: inline; }
	.ek-footer__inner { grid-template-columns: 1fr auto; align-items: start; }
	.ek-footer__legal { grid-column: 1 / -1; }
}

@media (min-width: 860px) {
	body { font-size: 16px; }
	.ek-header__search { display: block; }
	.ek-hide-mobile { display: inline-flex; }
	.ek-show-mobile { display: none; }
	.ek-nav-toggle { display: none; }
	.ek-nav { display: block; }
	.ek-nav__list {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		padding: 0;
	}
	.ek-nav__list a { min-height: 44px; padding: 0 12px; font-size: 14px; }
	.ek-main { padding: 28px 0 72px; }
	h1 { font-size: 1.9rem; }
	.ek-page-header__title { font-size: 1.8rem; }
}

@media (min-width: 1024px) {
	.ek-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}