/*
Theme Name: Teeechai Theme
Theme URI: https://teeechai.com
Author: Teeechai Team
Description: A lightweight companion theme for teeechai.com, built to match the Teeechai Games Engine plugin's dark gaming design site-wide (header, footer, homepage) instead of leaving those on a mismatched default theme.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: teeechai-theme
*/

:root{
	--t-bg: #0f1220;
	--t-surface: #171b2e;
	--t-surface2: #1f2440;
	--t-accent: #ff5c35;
	--t-accent-hover: #ff7a55;
	--t-accent2: #3dd6c4;
	--t-text: #f2f3f7;
	--t-muted: #a6abc2;
	--t-border: rgba(255,255,255,.08);
}

*{ box-sizing:border-box; }

html, body{
	background: var(--t-bg);
	color: var(--t-text);
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	line-height: 1.6;
}

a{ color: var(--t-accent2); }
a:hover{ color: var(--t-accent); }

img{ max-width: 100%; height: auto; }

.t-container{ max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* ---------- Header ---------- */
.t-header{
	background: var(--t-surface);
	border-bottom: 1px solid var(--t-border);
	position: sticky;
	top: 0;
	z-index: 50;
}
.t-header__inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	max-width: 1100px;
	margin: 0 auto;
	gap: 20px;
	flex-wrap: wrap;
}
.t-logo{
	font-size: 22px;
	font-weight: 900;
	color: var(--t-text);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 8px;
}
.t-logo img{ height: 34px; width: auto; border-radius: 8px; }
.t-logo .t-logo-accent{ color: var(--t-accent); }

.t-nav ul{ list-style:none; display:flex; gap: 22px; margin: 0; padding: 0; flex-wrap: wrap; }
.t-nav a{
	color: var(--t-text);
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
}
.t-nav a:hover{ color: var(--t-accent); }

.t-nav-toggle{ display:none; background:none; border:0; color:var(--t-text); font-size:26px; cursor:pointer; }

@media (max-width: 780px){
	.t-nav-toggle{ display:block; }
	.t-nav{ width:100%; display:none; }
	.t-nav.is-open{ display:block; }
	.t-nav ul{ flex-direction:column; gap: 12px; padding: 14px 0; }
}

/* ---------- Homepage hero ---------- */
.t-hero{
	background: linear-gradient(135deg, var(--t-surface) 0%, #1a1e35 100%);
	padding: 60px 20px;
	text-align: center;
}
.t-hero h1{ font-size: 38px; margin: 0 0 14px; }
.t-hero p{ color: var(--t-muted); font-size: 18px; max-width: 640px; margin: 0 auto 26px; }
.t-hero .t-cta{
	display:inline-block;
	background: var(--t-accent);
	color: #fff;
	font-weight: 800;
	padding: 14px 30px;
	border-radius: 50px;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(255,92,53,.4);
}
.t-hero .t-cta:hover{ background: var(--t-accent-hover); color:#fff; }

/* ---------- Category tiles on homepage ---------- */
.t-categories{ padding: 40px 20px; max-width: 1100px; margin: 0 auto; }
.t-categories h2{ font-size: 24px; margin-bottom: 18px; }
.t-cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.t-cat-tile{
	background: var(--t-surface2);
	border-radius: 14px;
	padding: 22px 16px;
	text-align:center;
	text-decoration:none;
	color: var(--t-text);
	font-weight: 700;
	border: 1px solid var(--t-border);
	transition: transform .15s ease, border-color .15s ease;
}
.t-cat-tile:hover{ transform: translateY(-3px); border-color: var(--t-accent2); color: var(--t-text); }
@media (max-width:900px){ .t-cat-grid{ grid-template-columns:repeat(2,1fr); } }

.t-section{ padding: 10px 20px 40px; max-width: 1100px; margin: 0 auto; }
.t-section h2{ font-size:22px; margin-bottom:16px; }

/* ---------- Generic page wrapper (About/Privacy/etc bring their own scoped styles) ---------- */
.t-page{ max-width: 1100px; margin: 0 auto; padding: 40px 20px 60px; }
.t-page h1.t-page-title{ font-size: 30px; margin-bottom: 20px; }

/* ---------- Standard blog post fallback ---------- */
.t-post{ max-width: 760px; margin: 0 auto; padding: 40px 20px; }
.t-post h1{ font-size: 30px; }
.t-post .t-post-meta{ color: var(--t-muted); font-size: 13px; margin-bottom: 20px; }

/* ---------- Footer ---------- */
.t-footer{
	background: var(--t-surface);
	border-top: 1px solid var(--t-border);
	margin-top: 40px;
	padding: 36px 20px 24px;
}
.t-footer__inner{ max-width:1100px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; }
.t-footer__col h4{ font-size:14px; text-transform:uppercase; letter-spacing:.05em; color: var(--t-accent2); margin: 0 0 12px; }
.t-footer__col ul{ list-style:none; margin:0; padding:0; }
.t-footer__col li{ margin-bottom:8px; }
.t-footer__col a{ color: var(--t-muted); text-decoration:none; font-size:14px; }
.t-footer__col a:hover{ color: var(--t-accent); }
.t-footer__bottom{
	text-align:center;
	color: var(--t-muted);
	font-size:12px;
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid var(--t-border);
}