/*
Theme Name: MMG Academy Edu
Author: Mukesh Gujjar
Author URI: https://wpfolks.org/folk/mukeshgujjar
Description: A clean, accessible WordPress theme built for K-12 schools and academies covering grades 5 to 12. Built with an object-oriented architecture and full WordPress coding standards compliance. Features front-page program sections, custom nav walker, widgetized areas, and Customizer-driven branding.
Version: 1.0.7
Requires at least: 6.0
Tested up to: 7.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: mmg-academy-edu
Tags: education, blog, one-column, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks

MMG Academy Edu WordPress Theme, Copyright (C) 2026 Mukesh Gujjar.
MMG Academy Edu is distributed under the terms of the GNU General
Public License as published by the Free Software Foundation, either
version 2 of the License, or (at your option) any later version.

    Copyright (C) 2026  Mukesh Gujjar

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program. If not, see https://www.gnu.org/licenses/gpl-2.0.html.
*/

/* -----------------------------------------------------------
   1. Reset / base
----------------------------------------------------------- */
:root {
	--ae-navy: #10243e;
	--ae-navy-light: #17335a;
	--ae-gold: #d4a017;
	--ae-gold-light: #f0c75e;
	--ae-bg: #f7f8fa;
	--ae-text: #24292f;
	--ae-muted: #5b6572;
	--ae-radius: 10px;
	--ae-max-width: 1180px;
}

* {
	box-sizing: border-box;
}

html {
	overflow-x: hidden;
}

body {
	margin: 0;
	overflow-x: hidden;
	font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--ae-text);
	background: var(--ae-bg);
	line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.page-title,
.site-title,
p,
a {
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
}

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

a {
	color: var(--ae-navy-light);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--ae-gold);
}

.screen-reader-text {
	position: absolute !important;
	left: -9999px;
	top: -9999px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ae-navy);
	color: #fff;
	padding: 10px 16px;
	z-index: 1000;
}

.skip-link:focus {
	left: 10px;
	top: 0;
	z-index: 100000;
}

body.admin-bar .skip-link:focus {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .skip-link:focus {
		top: 46px;
	}
}

/* -----------------------------------------------------------
   2. Layout
----------------------------------------------------------- */
.ae-container {
	max-width: var(--ae-max-width);
	margin: 0 auto;
	padding: 0 20px;
}

.site-content {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	padding: 40px 0 60px;
}

.site-content.has-sidebar {
	grid-template-columns: 2fr 1fr;
}

@media (max-width: 780px) {
	.site-content.has-sidebar {
		grid-template-columns: 1fr;
	}
}

/* -----------------------------------------------------------
   3. Header / navigation
----------------------------------------------------------- */
.site-header {
	background: var(--ae-navy);
	color: #fff;
}

.site-header .ae-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	flex-wrap: wrap;
	gap: 12px;
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 12px;
}

.site-title {
	font-size: 1.5rem;
	margin: 0;
}

.site-title a {
	color: #fff;
}

.site-description {
	font-size: 0.85rem;
	color: var(--ae-gold-light);
	margin: 0;
}

.ae-primary-nav ul {
	list-style: none;
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.ae-primary-nav a {
	color: #fff;
	display: block;
	padding: 10px 14px;
	border-radius: var(--ae-radius);
}

.ae-primary-nav a:hover,
.ae-primary-nav .current-menu-item > a {
	background: var(--ae-navy-light);
	color: var(--ae-gold-light);
}

.ae-primary-nav .sub-menu {
	display: none;
}

.ae-primary-nav li {
	position: relative;
}

.ae-primary-nav li:hover > .sub-menu,
.ae-primary-nav li:focus-within > .sub-menu {
	display: block;
	position: absolute;
	background: var(--ae-navy-light);
	min-width: 200px;
	padding: 6px;
	border-radius: var(--ae-radius);
	z-index: 10;
}

.ae-primary-nav .sub-menu li {
	position: static;
}

/* -----------------------------------------------------------
   4. Front page sections
----------------------------------------------------------- */
.ae-hero {
	background: linear-gradient(135deg, var(--ae-navy), var(--ae-navy-light));
	color: #fff;
	padding: 70px 20px;
	text-align: center;
}

.ae-hero h1 {
	font-size: 2.4rem;
	margin: 0 0 12px;
}

.ae-hero p {
	color: #d8deea;
	max-width: 640px;
	margin: 0 auto 24px;
}

.ae-btn {
	display: inline-block;
	background: var(--ae-gold);
	color: var(--ae-navy);
	font-weight: 600;
	padding: 12px 26px;
	border-radius: var(--ae-radius);
}

.ae-btn:hover {
	background: var(--ae-gold-light);
	color: var(--ae-navy);
}

.ae-front-page-content {
	padding: 30px 20px 0;
}

.ae-grades {
	padding: 60px 20px;
}

.ae-grades h2,
.ae-section-title {
	text-align: center;
	font-size: 1.9rem;
	margin-bottom: 34px;
	color: var(--ae-navy);
}

.ae-grade-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	max-width: var(--ae-max-width);
	margin: 0 auto;
}

@media (max-width: 900px) {
	.ae-grade-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 520px) {
	.ae-grade-grid {
		grid-template-columns: 1fr;
	}
}

.ae-grade-card {
	background: #fff;
	border-radius: var(--ae-radius);
	padding: 22px;
	box-shadow: 0 1px 4px rgba(16, 36, 62, 0.08);
	border-top: 4px solid var(--ae-gold);
}

.ae-grade-card h3 {
	margin-top: 0;
	color: var(--ae-navy);
}

.ae-cta {
	background: var(--ae-gold);
	color: var(--ae-navy);
	text-align: center;
	padding: 46px 20px;
}

.ae-cta h2 {
	margin-top: 0;
}

/* -----------------------------------------------------------
   5. Content / cards / widgets
----------------------------------------------------------- */
.ae-card {
	background: #fff;
	border-radius: var(--ae-radius);
	padding: 22px;
	margin-bottom: 24px;
	box-shadow: 0 1px 4px rgba(16, 36, 62, 0.06);
}

.entry-title a {
	color: var(--ae-navy);
}

.entry-meta {
	color: var(--ae-muted);
	font-size: 0.85rem;
	margin-bottom: 10px;
}

.widget {
	background: #fff;
	border-radius: var(--ae-radius);
	padding: 18px;
	margin-bottom: 20px;
	box-shadow: 0 1px 4px rgba(16, 36, 62, 0.06);
}

.widget-title {
	margin-top: 0;
	color: var(--ae-navy);
	font-size: 1.05rem;
	border-bottom: 2px solid var(--ae-gold);
	padding-bottom: 8px;
}

/* -----------------------------------------------------------
   6. Footer
----------------------------------------------------------- */
.site-footer {
	background: var(--ae-navy);
	color: #cfd6e2;
	padding: 40px 20px;
	margin-top: 40px;
	text-align: center;
	font-size: 0.9rem;
}

.site-footer a {
	color: var(--ae-gold-light);
}

/* -----------------------------------------------------------
   7. Comments
----------------------------------------------------------- */
.comment-list {
	list-style: none;
	padding: 0;
}

.comment-body {
	background: #fff;
	border-radius: var(--ae-radius);
	padding: 16px;
	margin-bottom: 14px;
}

/* -----------------------------------------------------------
   8. Core markup: captions, galleries, sticky posts
----------------------------------------------------------- */
.wp-caption {
	max-width: 100%;
	margin-bottom: 20px;
	text-align: center;
}

.wp-caption img {
	margin: 0 auto;
}

.wp-caption-text {
	font-size: 0.85rem;
	color: var(--ae-muted);
	padding: 8px 4px;
}

.gallery-caption {
	display: block;
	font-size: 0.8rem;
	color: var(--ae-muted);
	text-align: center;
}

.sticky {
	border-left: 4px solid var(--ae-gold);
	padding-left: 16px;
}

.bypostauthor {
	outline: 2px solid var(--ae-gold-light);
	outline-offset: 4px;
}

.tags-links {
	display: block;
	margin-top: 14px;
	font-size: 0.85rem;
	color: var(--ae-muted);
}

.tags-links a {
	display: inline-block;
	background: var(--ae-bg);
	border-radius: 4px;
	padding: 3px 10px;
	margin: 2px 4px 2px 0;
}

/* -----------------------------------------------------------
   10. Keyboard focus visibility
----------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.ae-btn:focus-visible,
.ae-primary-nav a:focus-visible,
.footer-navigation a:focus-visible {
	outline: 3px solid var(--ae-gold);
	outline-offset: 2px;
}

/* Fallback for browsers without :focus-visible support. */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
.ae-btn:focus,
.ae-primary-nav a:focus,
.footer-navigation a:focus {
	outline: 3px solid var(--ae-gold);
	outline-offset: 2px;
}

.ae-primary-nav a:focus,
.ae-primary-nav a:focus-visible {
	background: var(--ae-navy-light);
	color: var(--ae-gold-light);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="password"],
textarea,
select {
	border: 1px solid #cfd6e2;
	border-radius: 6px;
	padding: 8px 12px;
	font: inherit;
}

.comment-form input[type="submit"],
.search-form input[type="submit"],
button {
	background: var(--ae-gold);
	color: var(--ae-navy);
	border: none;
	border-radius: var(--ae-radius);
	padding: 10px 20px;
	font-weight: 600;
	cursor: pointer;
}

.comment-form input[type="submit"]:hover,
.search-form input[type="submit"]:hover,
button:hover {
	background: var(--ae-gold-light);
}
/* -----------------------------------------------------------
   11. Alignment helpers
----------------------------------------------------------- */
.alignleft {
	float: left;
	margin-right: 20px;
}

.alignright {
	float: right;
	margin-left: 20px;
}

.aligncenter {
	display: block;
	margin: 0 auto;
}