/*
Theme Name: Al Quran Institute
Theme URI: https://example.com/al-quran-theme
Author: Developer Hammad Ansar from Pakistan
Author URI: https://example.com
Description: A custom dark-themed WordPress theme for Islamic Online Madrasah / Quran academy websites. Built with Gutenberg support, Tutor LMS and WooCommerce compatibility, and a full Customizer control panel for the hero, top bar, features, about, courses, testimonials and footer sections.
Version: 1.0.2
Requires at least: 6.0
Tested up to: 6.6
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: al-quran-theme
Tags: education, e-commerce, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks, dark
*/

/* =========================================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ========================================================= */
:root {
	--color-primary: #1a7a4a;
	--color-primary-dark: #14603a;
	--color-primary-light: #e8f5ee;
	--color-accent: #f5a623;
	--color-accent-dark: #d98f14;
	--color-dark: #0a0f0c;
	--color-white: #ffffff;

	--color-bg: #0d1712;
	--color-surface: #16241c;
	--color-surface-alt: #1c2b22;
	--color-body-text: #b7c1ba;
	--color-heading: #ffffff;
	--color-light-bg: #16241c;
	--color-border: rgba(255, 255, 255, 0.1);

	--font-heading: 'Poppins', 'Segoe UI', Arial, sans-serif;
	--font-body: 'Inter', 'Segoe UI', Arial, sans-serif;

	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 20px;

	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
	--shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35);

	--container-width: 1200px;
	--transition: all 0.25s ease;
}

/* =========================================================
   2. RESET & BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; max-width: 100%; overflow-x: hidden; }
body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-body-text);
	background: var(--color-bg);
	font-size: 16px;
	line-height: 1.7;
	max-width: 100%;
	overflow-x: hidden;
}
img, svg, video, iframe, embed, object { max-width: 100%; height: auto; }
img { display: block; }
table { max-width: 100%; }
a { color: inherit; text-decoration: none; transition: var(--transition); }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p { overflow-wrap: break-word; word-break: break-word; }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--color-heading);
	line-height: 1.3;
	margin: 0 0 16px;
	font-weight: 700;
}
p { margin: 0 0 16px; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
}
.skip-link { position: absolute; top: -100px; left: 0; background: var(--color-primary); color: #fff; padding: 12px 20px; z-index: 100000; }
.skip-link:focus { top: 0; }

.container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 20px; }
.section { position: relative; padding: 80px 0; }
.section--tight { padding: 50px 0; }

.section-eyebrow {
	display: inline-block;
	color: var(--color-accent);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 13px;
	margin-bottom: 10px;
}
.section-title { font-size: 36px; margin-bottom: 16px; color: var(--color-heading); }
.section-header { text-align: center; max-width: 640px; margin: 0 auto 50px; }
.section-header--split { text-align: left; max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 40px; }
.section-header--split .section-title, .section-header--split .section-eyebrow { margin-bottom: 0; }

.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 30px;
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: 15px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: var(--transition);
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); color: #fff; }

/* Soft pulse ring on hover — a pale ring expands outward from the button
   edge and fades, repeating while the pointer stays over it. */
.btn-primary::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--radius-sm);
	border: 2px solid rgba(255, 255, 255, 0.55);
	opacity: 0;
	pointer-events: none;
}
.btn-primary:hover::after {
	animation: al-quran-btn-pulse 1.1s ease-out infinite;
}
@keyframes al-quran-btn-pulse {
	0% { transform: scale(1); opacity: .6; }
	100% { transform: scale(1.18); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.btn-primary:hover::after { animation: none; }
}
.btn-accent { background: var(--color-accent); color: var(--color-dark); }
.btn-accent:hover { background: var(--color-accent-dark); color: var(--color-dark); }
.btn-outline { background: transparent; border-color: currentColor; color: var(--color-heading); }
.btn-white { background: #fff; color: var(--color-dark); }
.btn-white:hover { background: var(--color-accent); }
.btn-sm { padding: 10px 20px; font-size: 13px; }

/* =========================================================
   3. TOP BAR
   ========================================================= */
.topbar {
	background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
	color: #fff;
	font-size: 13px;
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-top: 10px; padding-bottom: 10px; }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.topbar a { color: #fff; opacity: .95; }
.topbar-item { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.topbar-item svg { flex-shrink: 0; }

/* =========================================================
   4. HEADER
   ========================================================= */
.site-header {
	background: var(--color-bg);
	position: sticky;
	top: 0;
	z-index: 999;
	border-bottom: 1px solid var(--color-border);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; gap: 24px; }
.site-branding { display: flex; align-items: center; gap: 10px; }
.site-branding img { max-height: 46px; width: auto; }
.site-title { font-size: 24px; font-weight: 800; margin: 0; }
.site-title a { color: var(--color-heading); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.site-title .accent { color: var(--color-accent); }
.site-title .accent-2 { color: var(--color-primary); }
.site-title-icon { display: inline-flex; color: var(--color-heading); }
.site-title-icon svg { width: 20px; height: 20px; }

.main-navigation { flex: 1; display: flex; justify-content: center; }
.main-navigation ul { display: flex; align-items: center; gap: 34px; }
.main-navigation a {
	color: var(--color-heading);
	font-weight: 600;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .3px;
	padding: 8px 0;
	position: relative;
}
.main-navigation a:hover, .main-navigation .current-menu-item > a { color: var(--color-accent); }

/* Active nav item gets a pill-shaped outline hugging its text, via an
   absolutely positioned ring so it never disturbs the flex gap of the
   surrounding menu items. */
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	position: relative;
}
.main-navigation .current-menu-item > a::before,
.main-navigation .current_page_item > a::before {
	content: '';
	position: absolute;
	inset: -8px -16px;
	border: 1.5px solid var(--color-accent);
	border-radius: 20px;
	pointer-events: none;
}
.main-navigation li { position: relative; }

/* Dropdown panels are intentionally light — readable, high-contrast pop-over on the dark header. */
.main-navigation .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	background: #ffffff;
	box-shadow: var(--shadow-md);
	border-radius: var(--radius-sm);
	min-width: 230px;
	padding: 10px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: var(--transition);
	z-index: 30;
}
.main-navigation li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.main-navigation .sub-menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 20px;
	text-transform: none;
	color: var(--color-dark);
	font-size: 14px;
	font-weight: 600;
}
.main-navigation .sub-menu a:hover { color: var(--color-primary); background: var(--color-primary-light); }

/* Nested (3rd level) flyout submenu opens to the right of its parent item. */
.main-navigation .sub-menu .sub-menu {
	top: -10px;
	left: 100%;
	margin-left: 6px;
}
.main-navigation .sub-menu .menu-item-has-children > a::after {
	content: '';
	width: 6px; height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	flex-shrink: 0;
	opacity: .6;
}

/* Optional "NEW" badge: add the CSS class "menu-badge-new" to any menu
   item in Appearance > Menus (enable Screen Options > CSS Classes first). */
.menu-badge-new > a::after {
	content: 'NEW';
	display: inline-flex;
	align-items: center;
	background: var(--color-primary);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .5px;
	padding: 2px 7px;
	border-radius: 4px;
	margin-left: 4px;
	text-transform: uppercase;
}
.main-navigation .sub-menu .menu-badge-new > a::after { margin-left: auto; }

.header-actions { display: flex; align-items: center; gap: 14px; }

/* "Quick Join Now" header CTA gets the same hanging-hook hover as the hero
   button: flips to accent gold and a hook loop swings in above it. */
.header-actions .btn-primary { position: relative; overflow: visible; }
.header-actions .btn-primary::before {
	content: '';
	position: absolute;
	top: -14px;
	left: 50%;
	width: 22px;
	height: 16px;
	border: 2px solid var(--color-accent);
	border-bottom: none;
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	transform: translateX(-50%) scaleY(0);
	transform-origin: bottom center;
	opacity: 0;
	transition: transform .25s ease, opacity .25s ease;
	pointer-events: none;
}
.header-actions .btn-primary:hover {
	background: var(--color-accent);
	color: var(--color-dark);
}
.header-actions .btn-primary:hover::before {
	opacity: 1;
	transform: translateX(-50%) scaleY(1);
}
/* Header CTA already has its own hook animation above — skip the generic
   pulse ring here so the two effects don't compete on the same button. */
.header-actions .btn-primary:hover::after { animation: none; opacity: 0; }
.header-icon-btn {
	width: 44px; height: 44px;
	border-radius: 50%;
	background: #ffffff;
	border: 1px solid var(--color-border);
	display: flex; align-items: center; justify-content: center;
	color: var(--color-dark);
	transition: var(--transition);
}
.header-icon-btn svg { stroke-width: 2; }
.header-icon-btn:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}
.menu-toggle {
	display: none;
	background: none; border: none; cursor: pointer;
	width: 44px; height: 44px;
	align-items: center; justify-content: center;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
	content: ''; display: block; width: 24px; height: 2px; background: var(--color-heading);
	position: relative; transition: var(--transition);
}
.menu-toggle span::before { position: absolute; top: -8px; }
.menu-toggle span::after { position: absolute; top: 8px; }

.header-search-panel { background: var(--color-surface); border-top: 1px solid var(--color-border); padding: 18px 0; }
.header-search-panel[hidden] { display: none; }
.header-search-panel .search-form { display: flex; gap: 10px; }
.header-search-panel input[type="search"] { flex: 1; padding: 12px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-heading); }
.header-search-panel button { background: var(--color-primary); color: #fff; border: none; padding: 0 24px; border-radius: var(--radius-sm); cursor: pointer; }

/* =========================================================
   5. HERO
   ========================================================= */
.hero {
	position: relative;
	color: #fff;
	background-color: var(--color-dark);
	padding: 140px 0 220px;
	text-align: center;
	overflow: hidden;
}

/* Separate scalable background layer: grows slightly larger while the hero
   is at/near the top of the viewport, and eases back to 1x as you scroll
   past it (see initHeroZoom in main.js). */
.hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transform: scale(1);
	transform-origin: center;
	will-change: transform;
	z-index: 0;
}
.hero::before {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(6,12,9,.45) 0%, rgba(6,12,9,.8) 100%);
	z-index: 1;
}
.hero .container { position: relative; z-index: 2; max-width: 800px; }
@media (prefers-reduced-motion: reduce) {
	.hero-bg { transform: none !important; }
}
.hero-eyebrow { text-transform: uppercase; letter-spacing: 2px; font-weight: 700; color: var(--color-accent); margin-bottom: 18px; }
.hero-title { font-size: 56px; color: #fff; margin-bottom: 20px; }
.hero-subtitle { font-size: 18px; opacity: .92; margin-bottom: 34px; color: #e4e9e6; }

/* Hero CTA "hanging hook" hover effect: button flips to primary green and a
   loop/hook outline swings in above it, as if the button were hung on it. */
.hero .btn-accent { position: relative; overflow: visible; }
.hero .btn-accent::before {
	content: '';
	position: absolute;
	top: -16px;
	left: 50%;
	width: 24px;
	height: 18px;
	border: 2px solid var(--color-primary);
	border-bottom: none;
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	transform: translateX(-50%) scaleY(0);
	transform-origin: bottom center;
	opacity: 0;
	transition: transform .25s ease, opacity .25s ease;
	pointer-events: none;
}
.hero .btn-accent:hover {
	background: var(--color-primary);
	color: #fff;
}
.hero .btn-accent:hover::before {
	opacity: 1;
	transform: translateX(-50%) scaleY(1);
}

.features-strip {
	position: relative;
	z-index: 3;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	margin: -90px auto 0;
	max-width: calc(var(--container-width) - 40px);
	box-shadow: var(--shadow-md);
	padding: 40px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}
.feature-box { display: flex; align-items: center; gap: 18px; }
.feature-icon {
	width: 64px; height: 64px;
	background: var(--color-accent);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	border: 3px solid var(--color-dark);
	color: var(--color-dark);
}
.feature-icon img, .feature-icon svg { width: 30px; height: 30px; }
.feature-box h3 { font-size: 18px; margin: 0; color: var(--color-heading); }

/* =========================================================
   5b. INNER-PAGE BANNER (pages, posts, archives, services, search, 404)
   ========================================================= */
.page-banner {
	position: relative;
	background-color: var(--color-dark);
	background-size: cover;
	background-position: center;
	padding: 90px 0 60px;
	text-align: center;
}
.page-banner::before {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(6,12,9,.55) 0%, rgba(6,12,9,.85) 100%);
}
.page-banner .container { position: relative; z-index: 2; }
.page-banner-title { color: #fff; font-size: 40px; margin-bottom: 12px; }
.page-banner-breadcrumb { font-size: 14px; color: #d7ded9; }
.page-banner-breadcrumb a { color: #d7ded9; }
.page-banner-breadcrumb a:hover { color: var(--color-accent); }
.page-banner-breadcrumb span { color: var(--color-accent); margin: 0 6px; }

/* =========================================================
   6. ABOUT SECTION
   ========================================================= */
.about-section { position: relative; overflow: hidden; }
.about-section .container { position: relative; z-index: 1; }
.about-section .container { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about-media { position: relative; }
.about-media img { border-radius: var(--radius-lg); width: 100%; }
.about-media-link { position: absolute; inset: 0; border-radius: var(--radius-lg); overflow: hidden; display: block; }

/* Frame + zoom-arrow reveal on hover/focus/tap. */
.about-media-frame {
	position: absolute;
	inset: 18px;
	border: 2px solid rgba(255, 255, 255, .85);
	border-radius: calc(var(--radius-lg) - 10px);
	opacity: 0;
	transform: scale(.94);
	transition: opacity .35s ease, transform .35s ease;
	pointer-events: none;
}
.about-media-zoom {
	position: absolute;
	left: 50%;
	bottom: 34px;
	width: 56px; height: 56px;
	border-radius: 50%;
	background: var(--color-accent);
	color: var(--color-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: translate(-50%, 16px) scale(.6);
	transition: opacity .35s ease, transform .35s ease;
	box-shadow: var(--shadow-md);
}
.about-media-link:hover .about-media-frame,
.about-media-link:focus-visible .about-media-frame {
	opacity: 1;
	transform: scale(1);
}
.about-media-link:hover .about-media-zoom,
.about-media-link:focus-visible .about-media-zoom {
	opacity: 1;
	transform: translate(-50%, 0) scale(1);
}
@media (hover: none), (pointer: coarse) {
	.about-media-frame, .about-media-zoom { opacity: 1; transform: none; }
}

/* Decorative Arabic calligraphy watermark on the photo's right edge. */
.about-media-calligraphy {
	position: absolute;
	top: 18%;
	right: 6%;
	font-family: 'Traditional Arabic', 'Amiri', 'Segoe UI', serif;
	font-size: clamp(36px, 6vw, 64px);
	color: var(--color-primary);
	opacity: .8;
	text-shadow: 0 0 18px rgba(26, 122, 74, .6);
	pointer-events: none;
	line-height: 1;
}
@media (max-width: 640px) {
	.about-media-calligraphy { font-size: 32px; }
}
.about-badge {
	position: absolute; left: -24px; bottom: 30px;
	background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); color: #fff;
	padding: 14px 22px; border-radius: var(--radius-sm);
	display: flex; align-items: center; gap: 10px;
	font-weight: 700;
	box-shadow: var(--shadow-md);
}
.about-highlight { display: flex; align-items: center; gap: 16px; margin: 22px 0; }
.about-highlight-icon {
	width: 54px; height: 54px; border-radius: 50%;
	background: var(--color-primary); color: #fff;
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.about-highlight strong { display: block; color: var(--color-accent); font-size: 16px; }

/* Small accent bar sitting on the image's top-left edge. */
.about-media-bar {
	position: absolute;
	top: -14px;
	left: -14px;
	width: 14px;
	height: 60px;
	border-radius: 4px;
	background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent) 30%, var(--color-primary) 30%, var(--color-primary) 100%);
	z-index: 2;
}

/* Small quote block: square photo + short line of text, next to the highlight. */
.about-quote { display: flex; align-items: center; gap: 16px; margin: 22px 0; }
.about-quote img { width: 76px; height: 76px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.about-quote p { margin: 0; font-size: 14px; }

/* =========================================================
   7. SERVICES / OFFER SECTION
   ========================================================= */
.offer-section {
	position: relative;
	overflow: hidden;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23f5a623' stroke-width='1' opacity='0.08'%3E%3Cpath d='M60 10 L74 46 L110 60 L74 74 L60 110 L46 74 L10 60 L46 46 Z'/%3E%3Ccircle cx='60' cy='60' r='26'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: repeat;
}
.offer-section .container { position: relative; z-index: 1; }

/* Ornate gold corner flourish — one SVG asset, mirrored/flipped per corner. */
.offer-section-corner {
	position: absolute;
	width: 110px; height: 110px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23f5a623' stroke-width='1.5' opacity='0.55'%3E%3Cpath d='M12 60C12 28 28 12 60 12'/%3E%3Cpath d='M12 60 12 108'/%3E%3Cpath d='M60 12 108 12'/%3E%3Cpath d='M12 78C34 78 34 96 12 96'/%3E%3Cpath d='M78 12C78 34 96 34 96 12'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='4' fill='%23f5a623' opacity='0.7'/%3E%3Cpath d='M24 26C29 16 39 16 44 26C39 21 29 21 24 26Z' fill='%23f5a623' opacity='0.45'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	opacity: .8;
	pointer-events: none;
	z-index: 1;
}
.offer-section-corner--tl { top: 20px; left: 20px; }
.offer-section-corner--tr { top: 20px; right: 20px; transform: scaleX(-1); }
.offer-section-corner--bl { bottom: 20px; left: 20px; transform: scaleY(-1); }
.offer-section-corner--br { bottom: 20px; right: 20px; transform: scale(-1, -1); }
@media (max-width: 782px) {
	.offer-section-corner { display: none; }
}
.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.offer-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.offer-card-text { padding: 30px; }
.offer-card-icon, .offer-card .feature-icon {
	width: 54px; height: 54px; border-radius: 50%;
	background: var(--color-accent); color: var(--color-dark);
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 20px;
}
.offer-card { display: flex; flex-direction: column; padding: 30px 30px 0; }
.offer-card h3 { font-size: 20px; }
.offer-card .read-more { font-weight: 700; color: var(--color-accent); display: inline-flex; align-items: center; gap: 6px; padding: 16px 0; margin-top: auto; border-top: 1px solid var(--color-border); }

.stats-banner {
	margin-top: 60px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
}
.stats-count { font-size: 44px; font-weight: 800; color: var(--color-heading); }
.stats-card-group { display: flex; flex-direction: column; gap: 16px; }
.stats-card { background: var(--color-white); color: var(--color-dark); border-radius: var(--radius-md); padding: 20px; display: flex; gap: 16px; align-items: flex-start; box-shadow: var(--shadow-md); }
.stats-card h3, .stats-card p { color: var(--color-dark); }
.stats-card-badge { background: var(--color-accent); border-radius: var(--radius-sm); padding: 12px 16px; font-weight: 800; text-align: center; flex-shrink: 0; }

/* =========================================================
   8. COURSES SECTION
   ========================================================= */
.courses-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.course-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: var(--transition);
}
.course-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: var(--color-primary); }
.course-card-thumb { position: relative; height: 170px; background: linear-gradient(135deg, var(--color-surface), var(--color-bg)); }
.course-card-thumb img { width: 100%; height: 170px; object-fit: cover; }
.course-card-thumb-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 170px; color: var(--color-accent); opacity: .5; }
.course-card-thumb-placeholder svg { width: 40px; height: 40px; }
.course-level {
	position: absolute; top: 14px; right: 14px;
	background: var(--color-primary); color: #fff;
	font-size: 12px; font-weight: 700;
	padding: 5px 12px; border-radius: 20px;
}
.course-card-body { padding: 20px; position: relative; }
.course-avatar {
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--color-primary); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700;
	position: absolute; top: -20px; left: 20px;
	border: 3px solid var(--color-surface);
}
.course-rating { color: var(--color-accent); font-size: 13px; margin: 14px 0 8px; }
.course-card h3 { font-size: 17px; margin-bottom: 12px; }
.course-card h3 a { color: var(--color-heading); }
.course-card h3 a:hover { color: var(--color-accent); }
.course-meta { display: flex; gap: 20px; font-size: 13px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); margin-bottom: 12px; }
.course-meta strong { display: block; color: var(--color-accent); }
.course-card-footer { display: flex; align-items: center; justify-content: space-between; padding: 0 20px 20px; }
.course-price del { color: #7c8a81; margin-right: 6px; font-size: 13px; }
.course-price ins { text-decoration: none; font-weight: 800; color: var(--color-heading); font-size: 16px; }

.cta-banner {
	background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
	border-radius: var(--radius-lg);
	color: #fff;
	padding: 40px 50px;
	display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
	margin-top: 60px;
}
.cta-banner h3 { color: #fff; margin: 0; font-size: 24px; max-width: 600px; }
.cta-banner.cta-banner--icon { align-items: center; }
.cta-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--color-accent); display: flex; align-items: center; justify-content: center; margin-right: 20px; flex-shrink: 0; font-size: 24px; }

/* =========================================================
   9. WHY CHOOSE US
   ========================================================= */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.why-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 34px 26px;
	text-align: center;
	transition: var(--transition);
}
.why-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-primary); }
.why-icon {
	width: 70px; height: 70px; border-radius: 50%;
	background: var(--color-accent); color: var(--color-dark);
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto 20px;
}
.why-card h3 { font-size: 18px; }
.why-card p { font-size: 14px; margin: 0; }

/* =========================================================
   10. TESTIMONIALS
   ========================================================= */
.testimonial-section { position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.testimonial-slide { display: grid; grid-template-columns: 420px 1fr; align-items: center; }
.testimonial-slide > img { height: 100%; min-height: 320px; object-fit: cover; }
.testimonial-content { padding: 50px 60px; }
.testimonial-stars { background: rgba(245,166,35,.12); display: inline-flex; padding: 8px 14px; border-radius: 20px; color: var(--color-accent); margin-bottom: 20px; }
.testimonial-text { font-size: 18px; color: var(--color-heading); }
.testimonial-author { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.testimonial-author img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.testimonial-author strong { display: block; color: var(--color-heading); }
.testimonial-author span { font-size: 13px; }
.testimonial-dots { display: flex; gap: 8px; margin-top: 24px; }
.testimonial-dots button { width: 10px; height: 10px; border-radius: 50%; background: var(--color-border); border: none; cursor: pointer; padding: 0; }
.testimonial-dots button.is-active { background: var(--color-accent); width: 26px; border-radius: 6px; }

/* =========================================================
   11. PRICING
   ========================================================= */
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.pricing-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-align: center; padding: 40px 24px; }
.pricing-price {
	width: 90px; height: 90px; border-radius: 50%;
	background: var(--color-accent); color: var(--color-dark);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	margin: 0 auto 20px; font-weight: 800; font-size: 20px;
}
.pricing-price small { font-size: 11px; font-weight: 600; }
.pricing-card h3 { font-size: 18px; }
.pricing-badge { display: inline-block; background: rgba(26,122,74,.18); color: #6fd6a0; font-weight: 700; font-size: 13px; padding: 6px 16px; border-radius: 20px; margin: 16px 0; }
.pricing-card ul { text-align: left; margin: 16px 0; }
.pricing-card li { padding: 6px 0; font-size: 14px; border-bottom: 1px solid var(--color-border); }

/* =========================================================
   12. GALLERY
   ========================================================= */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.gallery-grid img { width: 100%; height: 260px; object-fit: cover; border-radius: var(--radius-md); transition: var(--transition); }
.gallery-grid a:hover img { transform: scale(1.03); opacity: .92; }

/* =========================================================
   13. BLOG
   ========================================================= */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.blog-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); }
.blog-card img { width: 100%; height: 200px; object-fit: cover; }
.blog-card-body { padding: 22px; }
.blog-meta { display: flex; gap: 18px; font-size: 12px; color: #8a9790; margin-bottom: 12px; }
.blog-meta span { display: flex; align-items: center; gap: 6px; }
.blog-card h3 { font-size: 17px; }
.blog-card h3 a { color: var(--color-heading); }
.blog-card h3 a:hover { color: var(--color-accent); }
.blog-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.blog-author { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; color: var(--color-heading); }
.blog-author img { width: 32px; height: 32px; border-radius: 50%; }

.single-post-content { max-width: 800px; margin: 0 auto; }
.single-post-content img { border-radius: var(--radius-md); }
.post-thumbnail { margin-bottom: 30px; border-radius: var(--radius-md); overflow: hidden; }

/* =========================================================
   14. FOOTER
   ========================================================= */
.site-footer {
	background-color: var(--color-dark);
	background-image: linear-gradient(180deg, rgba(8,12,10,.75) 0%, rgba(8,12,10,.92) 100%), var(--footer-bg-image, none);
	background-size: cover;
	background-position: center;
	color: #b7c1ba;
	padding-top: 0;
	position: relative;
}
.site-footer .container { position: relative; z-index: 1; }
.footer-cta { transform: translateY(-50%); }
.footer-columns { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding: 40px 0 60px; }
.footer-columns h4 { color: #fff; font-size: 18px; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 2px solid var(--color-primary); display: inline-block; }
.footer-columns li { padding: 6px 0; }
.footer-columns a { color: #b7c1ba; }
.footer-columns a:hover { color: var(--color-accent); }
.footer-columns ul.footer-links li a { display: flex; align-items: center; gap: 8px; }
.footer-brand .site-title a { color: #fff; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; }
.footer-social a:hover { background: var(--color-primary); }
.footer-newsletter-form { display: flex; align-items: center; background: rgba(255,255,255,.06); border-radius: var(--radius-sm); padding: 4px; margin-top: 10px; }
.footer-newsletter-form input { flex: 1; background: transparent; border: none; padding: 12px 14px; color: #fff; }
.footer-newsletter-form input::placeholder { color: #8b938f; }
.footer-newsletter-form button { background: var(--color-accent); border: none; width: 42px; height: 42px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.site-footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 22px 0; display: flex; align-items: center; justify-content: space-between; font-size: 13px; flex-wrap: wrap; gap: 10px; }
.site-footer-bottom a { color: #b7c1ba; margin-left: 18px; }

.back-to-top {
	position: fixed; right: 26px; bottom: 26px;
	width: 46px; height: 46px; border-radius: 50%;
	background: var(--color-accent); color: var(--color-dark);
	display: flex; align-items: center; justify-content: center;
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: var(--transition);
	z-index: 500; border: none; cursor: pointer;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* =========================================================
   15. SIDEBAR / WIDGETS
   ========================================================= */
.content-area-with-sidebar { display: grid; grid-template-columns: 2.4fr 1fr; gap: 50px; }
.widget { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 26px; margin-bottom: 26px; }
.widget h2, .widget .widget-title { font-size: 18px; padding-bottom: 12px; border-bottom: 2px solid var(--color-primary); display: inline-block; color: var(--color-heading); }
.widget ul li { padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.widget select, .widget input[type="text"], .widget input[type="search"] { width: 100%; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-heading); }

/* =========================================================
   16. WOOCOMMERCE
   ========================================================= */
.woocommerce-page .container,
.woocommerce.container { max-width: var(--container-width); margin: 0 auto; padding: 60px 20px; }
.woocommerce ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.woocommerce ul.products li.product {
	background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
	padding: 16px; text-align: center; transition: var(--transition);
}
.woocommerce ul.products li.product:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: var(--color-primary); }
.woocommerce ul.products li.product img { border-radius: var(--radius-sm); margin-bottom: 14px; }
.woocommerce ul.products li.product .price, .woocommerce ul.products li.product h2, .woocommerce ul.products li.product h3 { color: var(--color-heading); }
.woocommerce ul.products li.product .price ins { color: var(--color-accent); text-decoration: none; }
.woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit, .woocommerce input.button {
	background: var(--color-primary); color: #fff; border-radius: var(--radius-sm); border: none; padding: 12px 24px; font-weight: 600;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--color-primary-dark); color: #fff; }
.woocommerce span.onsale { background: var(--color-accent); color: var(--color-dark); font-weight: 700; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--color-accent); }
.woocommerce div.product .product_title, .woocommerce-loop-product__title { color: var(--color-heading); }
.woocommerce-checkout #payment, .woocommerce-cart-form, .cart-collaterals .cart_totals { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.single-post-content table, .entry-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); }
.woocommerce table.shop_table { width: 100%; border-radius: var(--radius-md); border-color: var(--color-border); background: var(--color-surface); color: var(--color-body-text); }
.woocommerce table.shop_table_responsive, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.woocommerce table.shop_table th { color: var(--color-heading); }
.woocommerce-MyAccount-navigation ul { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 10px; }
.woocommerce-MyAccount-navigation li { padding: 4px; }
.woocommerce-MyAccount-navigation li a { display: block; padding: 10px 16px; border-radius: var(--radius-sm); color: var(--color-body-text); }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--color-primary); color: #fff; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select {
	background: var(--color-bg); color: var(--color-heading); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}
.woocommerce-account .woocommerce-MyAccount-content, .woocommerce-page table.shop_table td { color: var(--color-body-text); }

/* =========================================================
   17. TUTOR LMS
   ========================================================= */
.tutor-wrap .tutor-btn, .tutor-btn-primary { background: var(--color-primary) !important; border-color: var(--color-primary) !important; }
.tutor-course-list-item, .tutor-course-loop-item, .tutor-card { border-radius: var(--radius-md) !important; overflow: hidden; background: var(--color-surface) !important; border-color: var(--color-border) !important; }
.tutor-color-primary { color: var(--color-accent) !important; }
.tutor-badge-label.tutor-badge-primary { background: var(--color-primary) !important; }
.tutor-course-price, .tutor-price { color: var(--color-accent) !important; font-weight: 800 !important; }
.tutor-dashboard-permalinks li.active a, .tutor-dashboard-permalinks li a.active { color: var(--color-accent) !important; border-color: var(--color-accent) !important; }
.tutor-progress-bar .tutor-progress-value { background: var(--color-accent) !important; }
.tutor-fs-16, .tutor-fs-18, .tutor-fs-20, .tutor-fs-24, h1.tutor-fs-24, h2.tutor-fs-24 { color: var(--color-heading); }

/* =========================================================
   17b. AUTH / REGISTRATION FORMS
   Covers Tutor LMS's instructor/student registration + login forms,
   core WordPress wp-login.php, and WooCommerce login/register — a light
   cream card sitting on the dark page, matching the rest of the site's
   "light accent panel on dark ground" pattern (pricing badges, stats card).
   Class names are matched broadly since exact markup varies by plugin
   version; harmless no-ops if a selector isn't present on a given page.
   ========================================================= */
.tutor-form-wrap,
.tutor-frontend-dashboard-registration,
.tutor-registration-form-wrap,
.tutor-login-form-wrap,
.woocommerce-form-register,
.woocommerce-form-login,
#registerform,
#loginform {
	background: #f5f2e6;
	border-radius: var(--radius-lg);
	padding: 50px;
	max-width: 780px;
	margin: 0 auto;
	box-shadow: var(--shadow-md);
}
.tutor-form-wrap .tutor-row,
.tutor-registration-form-wrap .tutor-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 24px;
}
.tutor-form-wrap label,
.tutor-registration-form-wrap label,
.tutor-login-form-wrap label,
.woocommerce-form-register label,
.woocommerce-form-login label,
#registerform label,
#loginform label {
	display: block;
	color: var(--color-accent-dark);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .3px;
	margin-bottom: 8px;
}
.tutor-form-wrap input[type="text"],
.tutor-form-wrap input[type="email"],
.tutor-form-wrap input[type="password"],
.tutor-form-wrap input[type="url"],
.tutor-form-control,
.tutor-registration-form-wrap input,
.tutor-login-form-wrap input,
.woocommerce-form-register input,
.woocommerce-form-login input,
#registerform input,
#loginform input {
	width: 100%;
	padding: 14px 16px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	background: #ffffff;
	color: var(--color-dark);
	margin-bottom: 20px;
}
.tutor-form-wrap button[type="submit"],
.tutor-form-wrap input[type="submit"],
.tutor-registration-form-wrap button[type="submit"],
.woocommerce-form-register button[type="submit"],
.woocommerce-form-login button[type="submit"],
#registerform #wp-submit,
#loginform #wp-submit {
	width: 100%;
	background: var(--color-primary);
	color: #fff;
	border: none;
	padding: 16px;
	border-radius: var(--radius-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	cursor: pointer;
	transition: var(--transition);
}
.tutor-form-wrap button[type="submit"]:hover,
#registerform #wp-submit:hover,
#loginform #wp-submit:hover {
	background: var(--color-primary-dark);
}
@media (max-width: 640px) {
	.tutor-form-wrap .tutor-row, .tutor-registration-form-wrap .tutor-row { grid-template-columns: 1fr; }
	.tutor-form-wrap, .tutor-registration-form-wrap, #registerform, #loginform { padding: 30px; }
}

/* =========================================================
   17b2. CONTACT PAGE (template-contact.php)
   ========================================================= */
.form-notice {
	padding: 16px 20px;
	border-radius: var(--radius-sm);
	margin-bottom: 30px;
	font-weight: 600;
}
.form-notice--success { background: rgba(26, 122, 74, .18); color: #6fd6a0; border: 1px solid var(--color-primary); }
.form-notice--error { background: rgba(217, 83, 79, .15); color: #f0a3a0; border: 1px solid #d9534f; }

.contact-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; }
.contact-form { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 40px; }
.contact-form label { display: block; color: var(--color-heading); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 8px; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea {
	width: 100%;
	padding: 14px 16px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	background: var(--color-bg);
	color: var(--color-heading);
	margin-bottom: 20px;
	resize: vertical;
}
.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.contact-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.contact-info-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 40px; }
.contact-info-row { display: flex; align-items: flex-start; gap: 10px; color: var(--color-body-text); }
.contact-info-row svg { flex-shrink: 0; margin-top: 3px; color: var(--color-accent); }
@media (max-width: 1024px) {
	.contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.contact-row { grid-template-columns: 1fr; }
	.contact-form, .contact-info-card { padding: 26px; }
}

/* =========================================================
   17c. PAGINATION (blog, archives, Services grid)
   ========================================================= */
.pagination, .navigation.pagination { margin-top: 50px; }
.pagination .nav-links, .navigation.pagination .nav-links { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.page-numbers {
	display: flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px; padding: 0 6px;
	border-radius: var(--radius-sm);
	background: #f2ede0;
	border: 1px solid transparent;
	color: var(--color-dark);
	font-weight: 700;
}
.page-numbers.current { background: var(--color-accent); color: var(--color-dark); }
.page-numbers:hover { background: var(--color-primary); color: #fff; }
.page-numbers.dots { background: transparent; border: none; color: var(--color-body-text); }
.page-numbers.next, .page-numbers.prev { background: #f2ede0; }

/* =========================================================
   18. GUTENBERG / EDITOR BLOCKS
   ========================================================= */
.wp-block-button__link { background: var(--color-primary); border-radius: var(--radius-sm); }
.wp-block-quote { border-left: 4px solid var(--color-accent); padding-left: 20px; }
.alignwide { max-width: 1100px; }
.alignfull { max-width: none; }

/* =========================================================
   18a. PARALLAX DOT-GRID PANELS
   Tall / square dot-grid blocks sitting in a section's side margins,
   drifting slowly on scroll (see initParallaxDots in main.js). Purely
   decorative — hidden from screen readers, static under reduced-motion.
   ========================================================= */
.deco-dots {
	position: absolute;
	top: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, .5) 1.5px, transparent 1.5px);
	background-size: 22px 22px;
	pointer-events: none;
	z-index: 0;
	will-change: transform;
}
.deco-dots--left { left: 0; }
.deco-dots--right { right: 0; }
.deco-dots--tall { width: 220px; height: 480px; }
.deco-dots--square { width: 170px; height: 170px; }
.deco-dots--right.deco-dots--square { clip-path: polygon(100% 0, 100% 100%, 0 0); }
@media (max-width: 1024px) {
	.deco-dots { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.deco-dots { transform: none !important; }
}

/* =========================================================
   18b. CUSTOM CURSOR
   Desktop-only: a soft green ring that trails the pointer with easing,
   and swells solid when it crosses a link, button, or anything clickable.
   The native OS cursor stays visible — this rides on top of it, it
   doesn't replace it.
   ========================================================= */
.custom-cursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 34px;
	height: 34px;
	border: 2px solid var(--color-primary);
	border-radius: 50%;
	pointer-events: none;
	z-index: 10000;
	transform: translate(-50%, -50%) scale(0);
	opacity: 0;
	transition: opacity .2s ease, width .25s ease, height .25s ease, background-color .25s ease, border-color .25s ease;
	will-change: transform;
}
.custom-cursor.is-visible { opacity: 1; }
.custom-cursor.is-hover {
	width: 54px;
	height: 54px;
	background: rgba(26, 122, 74, 0.18);
	border-color: var(--color-accent);
}
.custom-cursor.is-down { width: 26px; height: 26px; }
@media (hover: none), (pointer: coarse) {
	.custom-cursor { display: none; }
}

/* =========================================================
   19. RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
	.about-section .container { grid-template-columns: 1fr; }
	.courses-grid, .why-grid, .offer-grid, .pricing-grid { grid-template-columns: repeat(2, 1fr); }
	.footer-columns { grid-template-columns: 1fr 1fr; }
	.stats-banner { grid-template-columns: 1fr; }
	.testimonial-slide { grid-template-columns: 1fr; }
	.testimonial-slide > img { min-height: 220px; }
	.content-area-with-sidebar { grid-template-columns: 1fr; }
	.gallery-grid { grid-template-columns: repeat(2, 1fr); }
	.woocommerce ul.products { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 782px) {
	.topbar-left .topbar-item:nth-child(n+2) { display: none; }
	.main-navigation { position: fixed; top: 0; right: -100%; width: 300px; max-width: 85%; height: 100vh; background: var(--color-surface); flex-direction: column; padding: 90px 30px 30px; box-shadow: var(--shadow-md); transition: var(--transition); z-index: 998; }
	.main-navigation.is-open { right: 0; }
	.main-navigation ul { flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; }
	.main-navigation .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; display: none; padding-left: 14px; background: transparent; min-width: 0; }
	.main-navigation .sub-menu a { color: var(--color-heading); }
	.main-navigation .sub-menu a:hover { background: transparent; color: var(--color-accent); }
	.main-navigation li.is-open .sub-menu { display: block; }
	.menu-toggle { display: flex; }
	.header-actions .header-icon-btn:first-child { display: none; }
	.hero { padding: 90px 0 170px; }
	.hero-title { font-size: 34px; }
	.features-strip { grid-template-columns: 1fr; margin-top: -60px; padding: 26px; }
	.courses-grid, .why-grid, .offer-grid, .pricing-grid, .blog-grid, .gallery-grid { grid-template-columns: 1fr; }
	.footer-columns { grid-template-columns: 1fr; }
	.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
	.section { padding: 50px 0; }
	.section-header--split { flex-direction: column; align-items: flex-start; }
	.cta-banner { padding: 30px; flex-direction: column; text-align: center; }
	.about-badge { left: 12px; right: 12px; bottom: 16px; font-size: 13px; }
	.footer-cta { transform: translateY(-30px); }
	.testimonial-content { padding: 30px; }
	.testimonial-slide > img { min-height: 180px; }
	.page-banner-title { font-size: 28px; }
	.pricing-price { width: 76px; height: 76px; font-size: 16px; }
}

@media (max-width: 480px) {
	.site-header .container { gap: 10px; }
	.site-title { font-size: 18px; }
	.site-title-icon svg { width: 16px; height: 16px; }
	.header-actions { gap: 8px; }
	.header-actions .btn-primary { padding: 10px 16px; font-size: 13px; }
	.header-icon-btn { width: 38px; height: 38px; }
	.header-icon-btn svg { width: 15px; height: 15px; }
	.hero-title { font-size: 26px; }
	.hero { padding: 70px 0 140px; }
	.topbar-right .topbar-item { display: none; }
	.topbar-right .topbar-item:last-child { display: flex; }
	.cta-icon { display: none; }
	.footer-columns { padding-top: 20px; }
}

.menu-toggle.is-active span { background: transparent; }
.menu-toggle.is-active span::before { top: 0; transform: rotate(45deg); }
.menu-toggle.is-active span::after { top: 0; transform: rotate(-45deg); }