/*
Theme Name: KDramas Maza Links
Theme URI: https://kdramasmaza.com.pk/
Author: Dyar.pk
Author URI: https://dyar.pk/
Description: A fast, mobile-first theme for drama link posts. No header, footer, logo or sidebars. Each link post shows only its own links under the drama name (display only), with an Official Site button and Telegram / WhatsApp report buttons. The home page is one screen. Widget areas for ads.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kdmaza
*/

:root {
	--kdm-bg: #0f1115;
	--kdm-card: #171a21;
	--kdm-card-2: #1d212a;
	--kdm-line: #2a2f3a;
	--kdm-text: #e8eaed;
	--kdm-muted: #9aa3b2;
	--kdm-folder: #f5b301;
	--kdm-radius: 14px;
	--kdm-gap: 14px;
}

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

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

body {
	margin: 0;
	background: var(--kdm-bg);
	color: var(--kdm-text);
	font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}

a { color: #7cb7ff; }
img, video, iframe { max-width: 100%; height: auto; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.skip-link:focus {
	clip: auto; clip-path: none; width: auto; height: auto; margin: 0;
	position: fixed !important; top: 8px; left: 8px; z-index: 100000;
	background: #fff; color: #000; padding: 10px 14px; border-radius: 8px;
}

:focus-visible { outline: 3px solid #7cb7ff; outline-offset: 2px; }

.kdm-page {
	max-width: 860px;
	margin: 0 auto;
	padding: 18px 14px 40px;
}
.kdm-main { display: block; }

/* ---------- Drama name ---------- */
.kdm-drama { margin: 6px 0 var(--kdm-gap); }
.kdm-drama-name {
	display: flex; align-items: center; gap: 12px;
	margin: 0; font-size: clamp(22px, 5.4vw, 30px); line-height: 1.2; font-weight: 750; letter-spacing: -.01em;
	word-break: break-word;
}
.kdm-drama-name a, .kdm-drama-name span:not(.kdm-icon) { color: var(--kdm-text); text-decoration: none; }
.kdm-drama-name a:hover { text-decoration: underline; text-underline-offset: 4px; }
.kdm-drama-name .kdm-icon-folder { color: var(--kdm-folder); width: 1.35em; height: 1.35em; flex: none; filter: drop-shadow(0 2px 6px rgba(245, 179, 1, .25)); }
.kdm-updated { margin: 6px 0 0 calc(1.35em + 12px); color: var(--kdm-muted); font-size: 13px; }

.kdm-icon { display: inline-flex; width: 1.25em; height: 1.25em; flex: none; }
.kdm-icon svg { width: 100%; height: 100%; display: block; }

/* ---------- Official site + report ---------- */
.kdm-actions { display: grid; gap: 12px; margin: 0 0 var(--kdm-gap); }

.kdm-btn {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 50px; padding: 12px 18px; border-radius: 12px;
	font-weight: 700; font-size: 16px; line-height: 1.2; text-align: center;
	text-decoration: none; color: #fff;
	transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
	-webkit-tap-highlight-color: transparent;
}
.kdm-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.kdm-btn:active { transform: translateY(1px); }

.kdm-btn-official {
	background: linear-gradient(135deg, #ff7a2f 0%, #f0442a 100%);
	box-shadow: 0 8px 24px rgba(240, 68, 42, .28);
	font-size: 17px;
}
.kdm-btn-official .kdm-icon-arrow { width: 1.1em; height: 1.1em; opacity: .9; }

.kdm-report {
	background: var(--kdm-card); border: 1px solid var(--kdm-line); border-radius: var(--kdm-radius);
	padding: 14px;
}
.kdm-report-title { margin: 0 0 10px; color: var(--kdm-muted); font-size: 14px; font-weight: 600; text-align: center; }
.kdm-report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kdm-btn-telegram { background: #1d8fd8; }
.kdm-btn-whatsapp { background: #128c4a; }
.kdm-btn-setup { background: transparent; border: 1px dashed var(--kdm-muted); color: var(--kdm-muted); font-weight: 500; font-size: 13px; }
.kdm-btn-ghost { background: var(--kdm-card); border: 1px solid var(--kdm-line); color: var(--kdm-text); font-weight: 600; }
.kdm-btn-ghost .kdm-icon-folder { color: var(--kdm-folder); }

@media (max-width: 480px) {
	.kdm-report { padding: 12px 10px; }
	.kdm-report-grid { gap: 8px; }
	.kdm-report-grid .kdm-btn { flex-direction: column; gap: 4px; min-height: 64px; padding: 10px 8px; font-size: 14px; }
	.kdm-report-grid .kdm-icon { width: 1.5em; height: 1.5em; }
}
@media (max-width: 300px) {
	.kdm-report-grid { grid-template-columns: 1fr; }
}

/* ---------- Posts ---------- */
.kdm-post { margin: 0 0 var(--kdm-gap); }
.kdm-post-in-list + .kdm-post-in-list,
.kdm-area-kdm-between + .kdm-post-in-list { margin-top: var(--kdm-gap); }
.kdm-post-title { margin: 0 0 10px; font-size: 18px; }
.kdm-post-title a { color: var(--kdm-text); }
.kdm-content > *:first-child { margin-top: 0; }
.kdm-content > *:last-child { margin-bottom: 0; }
.kdm-content p { margin: 0 0 1em; }

.kdm-more { margin: var(--kdm-gap) 0; }

.kdm-empty { color: var(--kdm-muted); text-align: center; padding: 18px; }

/* ---------- Ad / widget areas ---------- */
.kdm-area {
	display: grid; gap: 10px; justify-items: center;
	margin: 0 0 var(--kdm-gap); text-align: center;
	overflow: hidden; /* a too-wide ad can never break the mobile layout */
}
.kdm-area:empty { display: none; }
.kdm-widget, .kdm-widget .textwidget { width: 100%; max-width: 100%; display: flex; flex-direction: column; align-items: center; }
.kdm-widget-title { font-size: 14px; color: var(--kdm-muted); margin: 0 0 6px; }

/* ---------- Pages ---------- */
.kdm-page-content { background: var(--kdm-card); border: 1px solid var(--kdm-line); border-radius: var(--kdm-radius); padding: 16px; margin-bottom: var(--kdm-gap); }
.kdm-page-title { margin: 0 0 12px; font-size: 24px; }

/* ---------- One-screen home ---------- */
.kdm-screen-page .kdm-page { padding: 0 16px; }
.kdm-screen {
	min-height: 100vh;
	min-height: 100svh;
	display: grid;
	place-items: center;
	padding: 24px 0;
}
.kdm-screen-card {
	width: 100%;
	max-width: 520px;
	text-align: center;
	background: var(--kdm-card);
	border: 1px solid var(--kdm-line);
	border-radius: 20px;
	padding: clamp(24px, 6vw, 40px) clamp(18px, 5vw, 36px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.kdm-screen-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: rgba(245, 179, 1, .12); color: var(--kdm-folder); margin-bottom: 14px; }
.kdm-screen-icon .kdm-icon { width: 36px; height: 36px; }
.kdm-screen-title { margin: 0 0 10px; font-size: clamp(24px, 6vw, 32px); line-height: 1.2; font-weight: 750; letter-spacing: -.01em; }
.kdm-screen-text { margin: 0 0 22px; color: var(--kdm-muted); font-size: 16px; line-height: 1.6; }
.kdm-screen .kdm-btn-official { width: 100%; }
.kdm-screen .kdm-area { margin: 16px 0 0; }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}