/*
Theme Name:  BATAS Theme
Theme URI:   https://batas.org
Description: Custom theme for batas.org — Philippine Bar Review.
Version:     1.1.0
Author:      BATAS
Author URI:  https://batas.org
License:     GPL-2.0+
Text Domain: batas-theme
*/

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 1.7;
	color: #1a2433;
	background: #eef1f5;
	-webkit-font-smoothing: antialiased;
}
img, video, svg { max-width: 100%; height: auto; }
a { color: #0b5cab; text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem; }
.brand-tld { color: #0b5cab; }

/* ---------- Header ---------- */
#site-header {
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(180%) blur(8px);
	border-bottom: 1px solid #e3e6ea;
	position: sticky;
	top: 0;
	z-index: 100;
}
#site-header .wrap {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 66px;
}
.site-brand {
	font-size: 1.45rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #0b1f3a;
}
.site-brand:hover { text-decoration: none; }
.site-nav { margin-left: 1rem; }
.site-nav .menu {
	list-style: none;
	display: flex;
	gap: 1.4rem;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.site-nav .menu a { color: #344054; font-weight: 500; }
.site-nav .menu a:hover { color: #0b5cab; text-decoration: none; }
.site-cta {
	margin-left: auto;
	background: linear-gradient(135deg, #0b5cab, #073a73);
	color: #fff;
	font-weight: 600;
	font-size: 0.92rem;
	padding: 0.55rem 1.1rem;
	border-radius: 9px;
	box-shadow: 0 2px 8px rgba(11, 92, 171, 0.28);
}
.site-cta:hover { text-decoration: none; filter: brightness(1.06); }

/* ---------- Full-width front page ---------- */
#main-full { display: block; }

/* ---------- Main reading column (posts, pages, lessons) ---------- */
#main {
	max-width: 860px;
	margin: 2rem auto;
	padding: 2.25rem 2.5rem;
	background: #fff;
	border: 1px solid #e3e6ea;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
}
#main h1 { font-size: 1.95rem; line-height: 1.25; margin: 0 0 1rem; color: #0b1f3a; }
#main h2 { font-size: 1.4rem; margin: 2rem 0 0.75rem; color: #0b1f3a; }
#main h3 { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; }
#main p { margin: 0 0 1.1rem; }
#main ul, #main ol { margin: 0 0 1.1rem 1.4rem; padding: 0; }
#main li { margin-bottom: 0.4rem; }
#main blockquote {
	margin: 1.2rem 0;
	padding: 0.6rem 1.1rem;
	border-left: 4px solid #cdd5df;
	color: #475467;
	background: #f8fafc;
	border-radius: 0 6px 6px 0;
}
#main hr { border: none; border-top: 1px solid #e3e6ea; margin: 2rem 0; }

/* Wider, card-free layout for the catalog / dashboard pages */
.page-template-default #main:has(.batas-catalog),
.page-template-default #main:has(.batas-dashboard) {
	max-width: 1120px;
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 1.5rem;
}

/* ---------- Footer ---------- */
#site-footer {
	background: #0b1f3a;
	color: #c9d4e3;
	margin-top: 0;
	padding: 3rem 0 1.5rem;
}
.footer-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 2rem;
	flex-wrap: wrap;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-logo { font-size: 1.3rem; font-weight: 800; color: #fff; }
.footer-logo .brand-tld { color: #ffd24a; }
.footer-tagline { margin: 0.4rem 0 0; color: #9fb3cc; max-width: 36ch; }
.footer-nav .menu { list-style: none; display: flex; gap: 1.4rem; margin: 0; padding: 0; flex-wrap: wrap; }
#site-footer a { color: #9ec1ee; }
.footer-bottom { padding-top: 1.2rem; font-size: 0.88rem; color: #7f94ad; }
.footer-bottom p { margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
	#site-header .wrap { flex-wrap: wrap; gap: 0.6rem 1rem; min-height: 0; padding-top: 0.7rem; padding-bottom: 0.7rem; }
	.site-cta { margin-left: 0; }
	.site-nav { margin-left: 0; width: 100%; order: 3; }
}
@media (max-width: 640px) {
	body { font-size: 17px; }
	#main { margin: 1rem; padding: 1.3rem; border-radius: 10px; }
	#main h1 { font-size: 1.6rem; }
}