/* ================================================
   LMS GrowthOrbit Digital — Main Stylesheet
   ================================================ */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
	--color-primary:    #7ed957;
	--color-accent:     #5cbe33;
	--color-dark:       #1e293b;
	--color-text:       #334155;
	--color-muted:      #64748b;
	--color-border:     #e2e8f0;
	--color-bg:         #ffffff;
	--color-bg-alt:     #f8fafc;

	--font-base:        'Comic Relief', system-ui, sans-serif;
	--font-heading:     'Comic Relief', system-ui, sans-serif;

	--radius:           0.5rem;
	--shadow-sm:        0 1px 2px rgba(0,0,0,.06);
	--shadow:           0 4px 6px -1px rgba(0,0,0,.1);

	--container-max:    1200px;
	--container-pad:    1.5rem;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
	font-family: var(--font-base);
	color: var(--color-text);
	background: var(--color-bg);
	line-height: 1.7;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: none; }

/* --- Container --- */
.container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

/* --- Skip Link --- */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; padding: .5rem 1rem; background: var(--color-primary); color: #1a1a2e; border-radius: var(--radius); z-index: 9999; }

/* --- Header --- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
}

.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding-block: 1rem;
}

.site-title { font-size: 1.5rem; font-weight: 700; }
.site-title a { color: var(--color-dark); text-decoration: none; }
.site-description { font-size: .875rem; color: var(--color-muted); }

.site-logo { display: flex; align-items: center; }
.site-logo a { display: inline-flex; align-items: center; text-decoration: none; }
.site-logo img.custom-logo { height: 50px; width: auto; max-width: 200px; display: block; }

/* --- Navigation --- */
.main-navigation ul { list-style: none; display: flex; gap: 1.5rem; }
.main-navigation a { font-weight: 500; color: var(--color-dark); transition: color .15s; }
.main-navigation a:hover { color: var(--color-primary); text-decoration: none; }
.menu-toggle { display: none; background: none; border: none; cursor: pointer; }

/* --- Layout --- */
#site-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
#site-content { max-width: 860px; margin-inline: auto; width: 100%; padding: 3rem clamp(1.25rem, 4vw, 2rem); }

/* --- Article / Entry --- */
.entry-title { font-size: 1.75rem; font-weight: 700; color: var(--color-dark); margin-bottom: .5rem; }
.entry-title a { color: inherit; }
.entry-title a:hover { color: var(--color-primary); text-decoration: none; }
.entry-meta { font-size: .875rem; color: var(--color-muted); margin-bottom: 1.5rem; }
.entry-meta span + span::before { content: ' · '; }
.entry-content { line-height: 1.8; }
.entry-footer { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--color-border); font-size: .875rem; color: var(--color-muted); }
.post-thumbnail { margin-bottom: 1.5rem; border-radius: var(--radius); overflow: hidden; }

/* --- Buttons --- */
.button, .wp-block-button__link {
	display: inline-block;
	padding: .625rem 1.5rem;
	background: var(--color-primary);
	color: #fff;
	border-radius: var(--radius);
	font-weight: 600;
	transition: opacity .15s;
}
.button:hover, .wp-block-button__link:hover { opacity: .85; text-decoration: none; color: #fff; }

.read-more {
	display: inline-block;
	padding: .5rem 1.25rem;
	background: var(--color-primary);
	color: #fff;
	border-radius: var(--radius);
	font-size: .875rem;
	font-weight: 500;
}
.read-more:hover { opacity: .85; text-decoration: none; color: #fff; }

/* --- Sidebar / Widgets --- */
.widget-area .widget { margin-bottom: 2rem; }
.widget-title { font-size: 1rem; font-weight: 700; margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 2px solid var(--color-primary); }

/* --- Footer --- */
.site-footer {
	background: var(--color-dark);
	color: #cbd5e1;
	padding-block: 3rem 1.5rem;
}

.footer-widgets {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	margin-bottom: 2rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid rgba(255,255,255,.1);
}

.footer-widget-col .widget-title { color: #fff; border-color: var(--color-accent); }

.site-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: .875rem;
}

.footer-menu { display: flex; list-style: none; gap: 1.5rem; }
.footer-menu a { color: #cbd5e1; }
.footer-menu a:hover { color: #fff; }

/* --- 404 / No Results --- */
.error-404 .page-title, .no-results .page-title { font-size: 2rem; margin-bottom: 1rem; }

/* --- Search Form --- */
.search-form { display: flex; gap: .5rem; margin-top: 1rem; }
.search-form input[type="search"] { flex: 1; padding: .625rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 1rem; }
.search-form button { padding: .625rem 1.25rem; background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius); cursor: pointer; }

/* --- Responsive --- */
@media (max-width: 768px) {
	.site-content .container { grid-template-columns: 1fr; }
	.footer-widgets { grid-template-columns: 1fr; }
	.site-info { flex-direction: column; text-align: center; }

	.main-navigation ul { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-bg); padding: 1rem; border-bottom: 1px solid var(--color-border); }
	.main-navigation.toggled ul { display: flex; }
	.menu-toggle { display: block; }
}