/* ==========================================================================
   MathOpus Global Design System — site chrome (header, sidebar/widgets,
   footer, buttons, forms). Loaded on every page via mathopus-global-style.php.

   Shares the same --mo-* token names as assets/mo-exam.css and
   assets/mo-notice.css so chrome and post content read as one system.
   ========================================================================== */

:root {
	--mo-font-sans: 'Pretendard Variable', Pretendard, 'Inter', -apple-system, BlinkMacSystemFont,
		'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Malgun Gothic', sans-serif;

	--mo-fw-regular: 400;
	--mo-fw-medium: 500;
	--mo-fw-semibold: 600;
	--mo-fw-bold: 700;

	--mo-bg: #ffffff;
	--mo-bg-subtle: #f8fafc;
	--mo-bg-muted: #f1f5f9;

	--mo-text-primary: #0f172a;
	--mo-text-secondary: #475569;
	--mo-text-tertiary: #94a3b8;

	--mo-navy: #1e293b;
	--mo-indigo: #4f46e5;
	--mo-indigo-hover: #4338ca;
	--mo-indigo-soft: #eef2ff;

	--mo-border: #eef1f6;
	--mo-border-strong: #e2e8f0;

	--mo-radius-sm: 0.5rem;
	--mo-radius-md: 0.75rem;
	--mo-radius-lg: 1rem;
	--mo-radius-xl: 1.25rem;
	--mo-radius-full: 999px;

	--mo-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
	--mo-shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
	--mo-shadow-lg: 0 16px 40px -12px rgba(15, 23, 42, 0.14), 0 4px 10px -4px rgba(15, 23, 42, 0.05);

	--mo-space-2: 0.5rem;
	--mo-space-3: 0.75rem;
	--mo-space-4: 1rem;
	--mo-space-5: 1.25rem;
	--mo-space-6: 1.5rem;
	--mo-space-8: 2rem;
	--mo-space-10: 2.5rem;

	--mo-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--mo-duration: 180ms;
}

/* ==========================================================================
   1. BASE TYPOGRAPHY
   ========================================================================== */

body {
	font-family: var(--mo-font-sans);
	color: var(--mo-text-primary);
	letter-spacing: -0.011em;
	-webkit-font-smoothing: antialiased;
}

body a {
	color: var(--mo-indigo);
	text-decoration: none;
	transition: color var(--mo-duration) var(--mo-ease), background-color var(--mo-duration) var(--mo-ease);
}

body a:hover,
body a:focus {
	color: var(--mo-indigo-hover);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.widget-title,
.main-title,
.wp-block-heading {
	font-family: var(--mo-font-sans);
	font-weight: var(--mo-fw-bold);
	color: var(--mo-navy);
	letter-spacing: -0.02em;
}

.entry-content p,
.entry-content li {
	font-size: 1.03rem;
	line-height: 1.8;
}

/* ==========================================================================
   2. LAYOUT
   ========================================================================== */

.site-content {
	padding-top: var(--mo-space-10);
	padding-bottom: var(--mo-space-10);
}

.inside-article {
	background: var(--mo-bg);
	border: 1px solid var(--mo-border);
	border-radius: var(--mo-radius-xl);
	box-shadow: var(--mo-shadow-sm);
}

.entry-header {
	border-bottom: 1px solid var(--mo-border);
	margin-bottom: var(--mo-space-6);
}

/* ==========================================================================
   3. HEADER & NAVIGATION
   ========================================================================== */

.site-header {
	background-color: var(--mo-bg);
	border-bottom: 1px solid var(--mo-border);
}

.main-title a,
.main-title a:hover {
	font-weight: var(--mo-fw-bold);
	color: var(--mo-navy);
	letter-spacing: -0.03em;
}

.site-description {
	color: var(--mo-text-tertiary);
}

.main-navigation .main-nav ul li a,
.main-navigation .menu-bar-item > a {
	font-weight: var(--mo-fw-medium);
	font-size: 0.9375rem;
	color: var(--mo-text-secondary);
	transition: color var(--mo-duration) var(--mo-ease);
}

.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: var(--mo-indigo);
}

.main-navigation ul ul {
	border-radius: var(--mo-radius-md);
	border: 1px solid var(--mo-border);
	box-shadow: var(--mo-shadow-lg);
	padding: var(--mo-space-2);
}

.main-navigation .main-nav ul ul li a {
	border-radius: var(--mo-radius-sm);
	padding: var(--mo-space-2) var(--mo-space-3);
}

/* ==========================================================================
   4. BUTTONS & FORMS
   ========================================================================== */

.button,
.wp-block-button .wp-block-button__link,
input[type="submit"] {
	background-color: var(--mo-indigo);
	border: none;
	border-radius: var(--mo-radius-md);
	font-weight: var(--mo-fw-semibold);
	box-shadow: var(--mo-shadow-sm);
	transition: background-color var(--mo-duration) var(--mo-ease), transform var(--mo-duration) var(--mo-ease);
}

.button:hover,
.wp-block-button .wp-block-button__link:hover,
input[type="submit"]:hover {
	background-color: var(--mo-indigo-hover);
	transform: translateY(-1px);
}

input[type="text"],
input[type="email"],
input[type="search"],
textarea,
select {
	background-color: var(--mo-bg-subtle);
	border: 1px solid var(--mo-border-strong);
	border-radius: var(--mo-radius-md);
	font-family: var(--mo-font-sans);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
	background-color: var(--mo-bg);
	border-color: var(--mo-indigo);
	outline: none;
	box-shadow: 0 0 0 3px var(--mo-indigo-soft);
}

/* ==========================================================================
   5. SIDEBAR / WIDGETS — CARD SHELL
   ========================================================================== */

.widget-area .widget {
	background: var(--mo-bg);
	border: 1px solid var(--mo-border);
	border-radius: var(--mo-radius-lg);
	box-shadow: var(--mo-shadow-sm);
	padding: var(--mo-space-6) var(--mo-space-6);
	margin-bottom: var(--mo-space-5);
	transition: box-shadow var(--mo-duration) var(--mo-ease);
}

.widget-title,
.widget-area .wp-block-heading {
	font-size: 1rem;
	font-weight: var(--mo-fw-semibold);
	color: var(--mo-navy);
	margin: 0 0 var(--mo-space-4);
	padding-bottom: var(--mo-space-3);
	border-bottom: 1px solid var(--mo-border);
	letter-spacing: -0.01em;
}

.widget-area .wp-block-group > .wp-block-heading:first-child {
	margin-top: 0;
}

.widget-area ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.widget-area .widget li {
	border-bottom: none;
}

/* Search widget */
.widget-area .wp-block-search__button {
	background-color: var(--mo-navy);
	color: #fff;
	border-radius: var(--mo-radius-sm);
	border: none;
	font-weight: var(--mo-fw-medium);
	font-size: 0.875rem;
	padding: 0 var(--mo-space-4);
	transition: background-color var(--mo-duration) var(--mo-ease);
}

.widget-area .wp-block-search__button:hover {
	background-color: var(--mo-indigo);
}

.widget-area .wp-block-search__input {
	border: 1px solid var(--mo-border-strong);
	border-radius: var(--mo-radius-sm);
	background: var(--mo-bg-subtle);
}

/* Generic link-list widgets: Latest Posts / Latest Comments / Archives */
.widget-area .wp-block-latest-posts__list li,
.widget-area .wp-block-latest-comments li,
.widget-area .wp-block-archives li {
	padding: var(--mo-space-2) 0;
	border-bottom: 1px dashed var(--mo-border);
	font-size: 0.9rem;
	line-height: 1.55;
}

.widget-area .wp-block-latest-posts__list li:last-child,
.widget-area .wp-block-latest-comments li:last-child,
.widget-area .wp-block-archives li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.widget-area .wp-block-latest-posts__list a,
.widget-area .wp-block-latest-comments__comment-link,
.widget-area .wp-block-archives a {
	color: var(--mo-text-primary);
	font-weight: var(--mo-fw-medium);
}

.widget-area .wp-block-latest-posts__list a:hover,
.widget-area .wp-block-archives a:hover {
	color: var(--mo-indigo);
}

/* ==========================================================================
   6. CATEGORIES WIDGET — HIERARCHICAL TREE
   ========================================================================== */

.wp-block-categories-list,
.widget_categories ul.children {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Top-level category */
.wp-block-categories-list > li {
	margin-top: var(--mo-space-2);
}

.wp-block-categories-list > li:first-child {
	margin-top: 0;
}

.wp-block-categories-list > li > a {
	display: flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.5em 0.65em;
	border-radius: var(--mo-radius-sm);
	font-weight: var(--mo-fw-semibold);
	font-size: 0.9375rem;
	color: var(--mo-navy);
}

.wp-block-categories-list > li > a::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: var(--mo-radius-full);
	background: var(--mo-indigo);
	flex-shrink: 0;
}

.wp-block-categories-list > li > a:hover {
	background: var(--mo-indigo-soft);
	color: var(--mo-indigo-hover);
}

/* Nested levels share one recursive treatment */
.wp-block-categories-list ul.children {
	margin: 0.15em 0 0.35em;
	padding-left: 1.05em;
	border-left: 1.5px solid var(--mo-border-strong);
}

.wp-block-categories-list ul.children li {
	margin: 0;
}

.wp-block-categories-list ul.children > li > a {
	display: block;
	padding: 0.4em 0.65em;
	border-radius: var(--mo-radius-sm);
	font-weight: var(--mo-fw-medium);
	font-size: 0.875rem;
	color: var(--mo-text-secondary);
}

.wp-block-categories-list ul.children > li > a:hover {
	background: var(--mo-bg-subtle);
	color: var(--mo-indigo);
}

/* Third level (exam sets) — smaller, quieter, so the school-name tier reads
   as the visual anchor of each branch */
.wp-block-categories-list ul.children ul.children > li > a {
	font-weight: var(--mo-fw-regular);
	font-size: 0.8125rem;
	color: var(--mo-text-tertiary);
}

.wp-block-categories-list ul.children ul.children > li > a::before {
	content: "—";
	margin-right: 0.4em;
	color: var(--mo-border-strong);
}

.wp-block-categories-list ul.children ul.children > li > a:hover {
	color: var(--mo-indigo);
}

.wp-block-categories-list > li.cat-item-38 > a {
	color: var(--mo-indigo);
}

/* ==========================================================================
   7. FOOTER
   ========================================================================== */

.footer-widgets {
	background-color: var(--mo-navy);
	color: #cbd5e1;
}

.footer-widgets .widget-title {
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, 0.12);
}

.footer-widgets a {
	color: #cbd5e1;
}

.footer-widgets a:hover {
	color: #fff;
}

.site-info {
	background-color: var(--mo-navy);
	color: #94a3b8;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 0.875rem;
}

.site-info a {
	color: #cbd5e1;
}

/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
	.widget-area .widget {
		padding: var(--mo-space-5);
	}
}