/*
Theme Name:   Generatepress Child - 21st.dev Inspired
Theme URI:    https://mushroom-scholars.org/htdocs/wp-content/themes/generatepress/
Description:  Modern Educational Blog Theme - 21st.dev Minimal Design Principles
Author:       MAT
Author URI:   [https://mushroom-scholars.org](https://mushroom-scholars.org/)
Template:    generatepress
Version:      3.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: generatepresschild
*/

/* ================================
21ST.DEV INSPIRED CSS CUSTOM PROPERTIES
================================ */
:root {
/* 21st.dev Light Mode Color System - Always Light */
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 9.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 5.9% 10%;

/* Light mode color helpers */
--color-background: hsl(var(--background));
--color-foreground: hsl(var(--foreground));
--color-card: hsl(var(--card));
--color-card-foreground: hsl(var(--card-foreground));
--color-primary: hsl(var(--primary));
--color-primary-foreground: hsl(var(--primary-foreground));
--color-secondary: hsl(var(--secondary));
--color-secondary-foreground: hsl(var(--secondary-foreground));
--color-muted: hsl(var(--muted));
--color-muted-foreground: hsl(var(--muted-foreground));
--color-accent: hsl(var(--accent));
--color-accent-foreground: hsl(var(--accent-foreground));
--color-border: hsl(var(--border));
--color-input: hsl(var(--input));
--color-ring: hsl(var(--ring));

/* Enhanced gradient system for modern buttons (like your reference image) */
--gradient-border: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
--gradient-subtle: linear-gradient(135deg, hsl(240 4.8% 95.9% / 0.5) 0%, hsl(240 4.8% 95.9% / 0.8) 100%);

/* 21st.dev Typography - Lightweight and readable */
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;

/* 21st.dev spacing system - Minimal yet generous */
--space-1: 0.25rem;   /* 4px */
--space-2: 0.5rem;    /* 8px */
--space-3: 0.75rem;   /* 12px */
--space-4: 1rem;      /* 16px */
--space-5: 1.25rem;   /* 20px */
--space-6: 1.5rem;    /* 24px */
--space-8: 2rem;      /* 32px */
--space-10: 2.5rem;   /* 40px */
--space-12: 3rem;     /* 48px */
--space-16: 4rem;     /* 64px */
--space-20: 5rem;     /* 80px */
--space-24: 6rem;     /* 96px */

/* 21st.dev radius system - Minimal and consistent */
--radius: 0.5rem;
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-2xl: 1.5rem;

/* Lightweight shadows */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

/* Smooth micro-interactions */
--transition-all: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-colors: color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-transform: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================
MODERN RESET & BASE STYLES
================================ */
*,
*::before,
*::after {
box-sizing: border-box;
}

- {
margin: 0;
}

html,
body {
height: 100%;
}

body {
font-family: var(--font-sans);
background-color: var(--color-background);
color: var(--color-foreground);
line-height: 1.6;
font-size: 1rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeSpeed;
}

img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}

input,
button,
textarea,
select {
font: inherit;
}

/* ================================
LAYOUT - GENEROUS WHITE SPACE
================================ */
.site {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-6);
min-height: 100vh;
}

.site-main {
padding: var(--space-12) 0;
}

/* ================================
TYPOGRAPHY - LIGHTWEIGHT & READABLE
================================ */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-sans);
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.025em;
color: var(--color-foreground);
margin-bottom: var(--space-4);
}

/* Main content headings with 21st.dev styling */
.site-main h1, .widget.widget_block h1 {
font-size: clamp(1.875rem, 4vw, 2.5rem);
font-weight: 700;
margin: var(--space-16) 0 var(--space-8) 0;
line-height: 1.1;
}

.site-main h2, .widget.widget_block h2 {
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 600;
margin: var(--space-12) 0 var(--space-6) 0;
}

.site-main h3, .widget.widget_block h3 {
font-size: clamp(1.25rem, 2.5vw, 1.75rem);
font-weight: 600;
margin: var(--space-10) 0 var(--space-5) 0;
}

.site-main h4, .widget.widget_block h4 {
font-size: clamp(1.125rem, 2vw, 1.5rem);
font-weight: 600;
margin: var(--space-8) 0 var(--space-4) 0;
}

/* Body text optimized for reading */
p {
margin-bottom: var(--space-6);
max-width: 65ch;
line-height: 1.6;
}

/* ================================
ENHANCED HOVER EFFECTS & ANIMATED LINKS
================================ */

/* Enhanced hover visibility for buttons */
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px -5px rgb(0 0 0 / 0.2), 0 8px 16px -8px rgb(0 0 0 / 0.2);
background: linear-gradient(var(--color-accent), var(--color-accent)) padding-box,
var(--gradient-border) border-box;
border-width: 3px;
}

/* Enhanced card hover effects */
article .inside-article:hover {
box-shadow: 0 10px 40px -10px rgb(0 0 0 / 0.15), 0 0 0 1px rgb(0 0 0 / 0.05);
border-color: hsl(var(--primary) / 0.3);
transform: translateY(-2px);
z-index: 3;
}

.sidebar .widget:hover {
box-shadow: 0 8px 30px -8px rgb(0 0 0 / 0.12), 0 0 0 1px rgb(0 0 0 / 0.05);
transform: translateY(-1px);
border-color: hsl(var(--primary) / 0.2);
}

/* ================================
ANIMATED HYPERLINK UNDERLINES
================================ */

/* Base link styling with animated underline */
a {
color: var(--color-primary);
text-decoration: none;
border-radius: var(--radius-sm);
position: relative;
transition: var(--transition-colors);
}

/* Animated underline effect */
a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 1px;
background: linear-gradient(90deg,
var(--color-primary) 0%,
hsl(var(--primary) / 0.6) 100%);
transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

a:hover::after {
width: 100%;
}

a:hover {
color: hsl(var(--primary) / 0.8);
}

/* Enhanced entry title links */
.entry-title a {
color: var(--color-foreground);
font-weight: 600;
transition: var(--transition-colors);
position: relative;
}

.entry-title a::after {
background: linear-gradient(90deg,
var(--color-primary) 0%,
hsl(var(--primary) / 0.4) 100%);
height: 2px;
bottom: -4px;
}

.entry-title a:hover {
color: var(--color-primary);
transform: translateX(2px);
}

/* Content links with enhanced animation */
.entry-content a {
font-weight: 500;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
transition: var(--transition-all);
position: relative;
display: inline;
}

.entry-content a::after {
bottom: 0;
height: 2px;
background: linear-gradient(90deg,
var(--color-primary) 0%,
hsl(var(--primary) / 0.3) 50%,
var(--color-primary) 100%);
}

.entry-content a:hover {
background-color: var(--color-accent);
transform: translateY(-1px);
box-shadow: 0 2px 8px -2px rgb(0 0 0 / 0.1);
}

.entry-content a:hover::after {
width: 100%;
animation: shimmer 600ms ease-out;
}

/* Widget links with subtle animation */
.widget.widget_block a,
.widget a {
color: var(--color-primary);
font-weight: 500;
position: relative;
transition: var(--transition-all);
}

.widget a::after {
bottom: -1px;
height: 1px;
background: var(--color-primary);
opacity: 0.6;
}

.widget a:hover {
color: var(--color-foreground);
transform: translateX(1px);
}

.widget a:hover::after {
width: 100%;
opacity: 1;
}

/* Navigation links with underline animation */
#primary-menu a {
color: var(--color-muted-foreground);
font-weight: 500;
padding: var(--space-3) var(--space-4);
margin: 0 var(--space-1);
border-radius: var(--radius-md);
transition: var(--transition-all);
position: relative;
overflow: hidden;
}

#primary-menu a::after {
bottom: var(--space-1);
height: 2px;
background: var(--color-primary);
border-radius: var(--radius-sm);
}

#primary-menu a:hover {
color: var(--color-foreground);
background-color: var(--color-accent);
transform: translateY(-1px);
}

#primary-menu a:hover::after {
width: calc(100% - var(--space-8));
left: var(--space-4);
}

/* ================================
SHIMMER ANIMATION FOR LINKS
================================ */

@keyframes shimmer {
0% {
transform: translateX(-100%);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translateX(100%);
opacity: 0;
}
}

@keyframes subtle-glow {
0%, 100% {
box-shadow: 0 0 5px transparent;
}
50% {
box-shadow: 0 0 10px hsl(var(--primary) / 0.2);
}
}

/* Enhanced hover for special link types */
.entry-meta a {
position: relative;
transition: var(--transition-all);
}

.entry-meta a::after {
height: 1px;
background: var(--color-muted-foreground);
opacity: 0.5;
}

.entry-meta a:hover {
color: var(--color-primary);
}

.entry-meta a:hover::after {
width: 100%;
background: var(--color-primary);
opacity: 1;
}

/* Archive pagination links with enhanced hover */
.archive .pagination a {
position: relative;
overflow: hidden;
}

.archive .pagination a::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent 0%,
hsl(var(--primary) / 0.1) 50%,
transparent 100%);
transition: left 400ms ease;
}

.archive .pagination a:hover::before {
left: 100%;
}

.archive .pagination a:hover {
background-color: var(--color-accent);
border-color: var(--color-primary);
transform: translateY(-2px);
box-shadow: 0 4px 12px -3px rgb(0 0 0 / 0.1);
}

/* ================================
FOCUS STATES WITH ENHANCED VISIBILITY
================================ */

a:focus-visible {
outline: 2px solid var(--color-ring);
outline-offset: 2px;
border-radius: var(--radius-sm);
background-color: hsl(var(--primary) / 0.05);
}

button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible {
outline: 2px solid var(--color-ring);
outline-offset: 3px;
box-shadow: 0 0 0 4px hsl(var(--primary) / 0.1);
}

/* ================================
RESPONSIVE HOVER ADJUSTMENTS
================================ */

@media (max-width: 768px) {
/* Reduce hover transforms on mobile */
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
transform: translateY(-2px);
}

article .inside-article:hover {
transform: translateY(-1px);
}

.entry-title a:hover,
#primary-menu a:hover {
transform: none;
}
}

@media (hover: none) {
/* Disable hover effects on touch devices */
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
article .inside-article:hover,
.sidebar .widget:hover {
transform: none;
box-shadow: var(--shadow-sm);
}
}

/* ================================
HEADER & NAVIGATION - MINIMAL CLEAN
================================ */
#masthead {
background-color: var(--color-background);
border-bottom: 1px solid var(--color-border);
position: sticky;
top: 0;
z-index: 50;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}

#masthead > div {
margin-bottom: 0;
padding: var(--space-6) 0;
}

.page-header {
background-color: var(--color-muted);
margin: var(--space-12) 0;
padding: var(--space-10);
border-radius: var(--radius-lg);
text-align: center;
border: 1px solid var(--color-border);
}

/* Clean navigation */
#primary-menu {
background-color: transparent;
padding: var(--space-4) 0;
}

#primary-menu a {
color: var(--color-muted-foreground);
font-weight: 500;
padding: var(--space-3) var(--space-4);
margin: 0 var(--space-1);
border-radius: var(--radius-md);
transition: var(--transition-all);
}

#primary-menu a:hover {
color: var(--color-foreground);
background-color: var(--color-accent);
}

/* primary menu icon for mobile devices - preserved from original */
#mobile-menu-control-wrapper {
background-color: var(--color-primary);
border-radius: var(--radius-md);
}

button .menu-toggle {
border-radius: var(--radius-md) !important;
padding: var(--space-3) !important;
background: transparent;
border: none;
color: var(--color-primary-foreground);
}

/* ================================
BUTTONS - GRADIENT BORDER STYLE (like your reference image)
================================ */
/* sort out the BUTTON colours - preserved from original with gradient border enhancement */
button,
input[type="button"],
input[type="submit"],
.wp-block-button__link {
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 500;
color: var(--color-foreground);
background-color: var(--color-background);
border: 2px solid transparent;
border-radius: var(--radius-xl);
padding: var(--space-3) var(--space-6);
margin: var(--space-2);
cursor: pointer;
transition: var(--transition-all);
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
position: relative;
max-width: 85% !important;

/* Gradient border effect exactly like your reference image */
background: linear-gradient(var(--color-background), var(--color-background)) padding-box,
var(--gradient-border) border-box;
}

/* Modern hover states with lift effect */
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
background: linear-gradient(var(--color-muted), var(--color-muted)) padding-box,
var(--gradient-border) border-box;
}

/* Modern active states */
button:active,
input[type="button"]:active,
input[type="submit"]:active {
transform: translateY(0);
box-shadow: var(--shadow-sm);
}

/* Focus states for accessibility */
button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible {
outline: 2px solid var(--color-ring);
outline-offset: 2px;
}

/* to control internal size of 'input' buttons */
input[type="button"] {
font-size: 90%;
}

/* Button variants for different use cases */
.btn-primary {
background-color: var(--color-primary);
color: var(--color-primary-foreground);
border: 2px solid var(--color-primary);
}

.btn-primary:hover {
background-color: hsl(var(--primary) / 0.9);
}

.btn-secondary {
background-color: var(--color-secondary);
color: var(--color-secondary-foreground);
border: 2px solid var(--color-border);
}

.btn-secondary:hover {
background-color: var(--color-accent);
}

.btn-outline {
background-color: transparent;
color: var(--color-primary);
border: 2px solid var(--color-primary);
}

.btn-outline:hover {
background-color: var(--color-primary);
color: var(--color-primary-foreground);
}

.btn-ghost {
background-color: transparent;
color: var(--color-foreground);
border: 2px solid transparent;
}

.btn-ghost:hover {
background-color: var(--color-accent);
}

/* ================================
CONTENT LAYOUT - MINIMAL CARDS
================================ */

/* Article containers with minimal card styling */
article {
margin-bottom: var(--space-16);
}

article .inside-article {
background-color: var(--color-card);
border: 1px solid var(--color-border);
padding: var(--space-10);
margin-bottom: var(--space-12);
border-radius: var(--radius-lg);
transition: var(--transition-all);
}

/* on hover - preserved from original with minimal enhancements */
article .inside-article:hover {
box-shadow: var(--shadow-md);
border-color: hsl(var(--border) / 0.8);
}

/* Content spacing */
.entry-content {
max-width: 65ch;
}

.entry-content > * {
margin-bottom: var(--space-5);
}

.entry-content > ol > li,
.entry-content > ul > li {
margin-bottom: var(--space-3);
line-height: 1.7;
}

/* ================================
IMAGES - CLEAN STYLING
================================ */
/* stop words breaking - preserved from original */
img {
max-width: 100%;
height: auto;
border-radius: var(--radius-md);
}

/* sorting out the featured image on posts and pages - preserved from original */
.featured-image {
border-radius: var(--radius-lg) !important;
margin: var(--space-6) 0;
overflow: hidden;
}

.featured-image.page-header-image-single.grid-container.grid-parent,
.featured-image.page-header-image.grid-container.grid-parent {
float: left;
margin: 0 var(--space-6) var(--space-4) 0;
max-width: 180px;
}

.entry-content img {
padding: 0;
margin: var(--space-6) 0;
display: block;
border-radius: var(--radius-md);
}

/* Hide featured images on portrait mobile for cleaner layout */
@media (orientation: portrait) and (max-width: 768px) {
.featured-image {
display: none;
}
}

/* ================================
SIDEBAR & WIDGET STYLING - preserved from original
================================ */
.sidebar {
margin-top: var(--space-12);
}

.sidebar .widget {
background-color: var(--color-card);
margin-bottom: var(--space-10);
border-radius: var(--radius-lg);
padding: 0;
border: 1px solid var(--color-border);
transition: var(--transition-all);
}

.widget-area .widget {
padding: var(--space-6);
}

.sidebar .widget:hover {
box-shadow: var(--shadow-sm);
}

/* Widget titles */
.widget h2,
.widget h3 {
color: var(--color-foreground);
font-size: 1.125rem;
font-weight: 600;
margin-bottom: var(--space-4);
}

/* ================================
FRONTEND FOR MUSHROOM STYLING - preserved from original with 21st.dev enhancements
================================ */

/* Study Note Box */
.study-note {
background-color: var(--color-muted);
border-left: 4px solid var(--color-primary);
padding: var(--space-6);
margin: var(--space-6) 0;
border-radius: 0 var(--radius-md) var(--radius-md) 0;
position: relative;
border: 1px solid var(--color-border);
}

.study-note::before {
content: "📚";
position: absolute;
top: var(--space-4);
right: var(--space-4);
font-size: 1.25rem;
opacity: 0.7;
}

/* Assignment Box */
.assignment-box {
background-color: hsl(48 96% 89%);
border-left: 4px solid hsl(25 95% 53%);
padding: var(--space-6);
margin: var(--space-6) 0;
border-radius: 0 var(--radius-md) var(--radius-md) 0;
position: relative;
border: 1px solid var(--color-border);
}

.assignment-box::before {
content: "✏️";
position: absolute;
top: var(--space-4);
right: var(--space-4);
font-size: 1.25rem;
opacity: 0.7;
}

/* Key Concept Highlight */
.key-concept {
background-color: hsl(250 100% 96%);
border-left: 4px solid hsl(262 83% 58%);
padding: var(--space-6);
margin: var(--space-6) 0;
border-radius: 0 var(--radius-md) var(--radius-md) 0;
position: relative;
border: 1px solid var(--color-border);
}

.key-concept::before {
content: "💡";
position: absolute;
top: var(--space-4);
right: var(--space-4);
font-size: 1.25rem;
opacity: 0.7;
}

/* Success/Achievement Box */
.success-highlight {
background-color: hsl(143 85% 94%);
border-left: 4px solid hsl(142 71% 45%);
padding: var(--space-6);
margin: var(--space-6) 0;
border-radius: 0 var(--radius-md) var(--radius-md) 0;
position: relative;
border: 1px solid var(--color-border);
}

.success-highlight::before {
content: "🌟";
position: absolute;
top: var(--space-4);
right: var(--space-4);
font-size: 1.25rem;
opacity: 0.7;
}

/* Code blocks for technical subjects */
code {
font-family: var(--font-mono);
background-color: var(--color-muted);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
font-size: 0.875em;
}

pre {
background-color: var(--color-muted);
padding: var(--space-5);
border-radius: var(--radius-md);
overflow-x: auto;
margin: var(--space-6) 0;
border: 1px solid var(--color-border);
}

pre code {
background: none;
padding: 0;
}

/* ================================
BLOCKQUOTES - MINIMAL DESIGN
================================ */
blockquote {
font-family: var(--font-serif);
font-size: 1.125rem;
line-height: 1.6;
color: var(--color-muted-foreground);
border-left: 4px solid var(--color-primary);
padding: var(--space-6);
margin: var(--space-8) 0;
background-color: var(--color-muted);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
font-style: italic;
position: relative;
border: 1px solid var(--color-border);
border-left: 4px solid var(--color-primary);
}

blockquote::before {
content: '"';
font-size: 2rem;
color: hsl(var(--primary) / 0.3);
opacity: 0.5;
position: absolute;
top: var(--space-2);
left: var(--space-4);
line-height: 1;
font-family: var(--font-serif);
}

blockquote p {
margin-bottom: var(--space-3);
padding-left: var(--space-4);
}

/* ================================
SOME OTHER STYLES THAT ARE READY TO USE - preserved from original
================================ */

/* Legacy styling for existing content with 21st.dev enhancements */
.bluebox {
background-color: var(--color-muted) !important;
border-left: 4px solid var(--color-primary) !important;
padding: var(--space-6) !important;
margin: var(--space-6) 0 !important;
border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
border: 1px solid var(--color-border) !important;
}

.yellowbox {
background-color: hsl(48 96% 89%) !important;
border-left: 4px solid hsl(25 95% 53%) !important;
padding: var(--space-6) !important;
margin: var(--space-6) 0 !important;
border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
border: 1px solid var(--color-border) !important;
}

/* enable css generated speech bubbles - preserved from original */
.bubble {
background-color: var(--color-card) !important;
border: 1px solid var(--color-border) !important;
border-radius: var(--radius-lg) !important;
padding: var(--space-6) !important;
margin: var(--space-8) 0 !important;
max-width: 30em;
position: relative;
}

.bubble::before {
content: '';
position: absolute;
width: 0;
height: 0;
top: 100%;
left: var(--space-4);
border: 10px solid transparent;
border-bottom: none;
border-top-color: var(--color-card);
}

/* ================================
FOOTER - MINIMAL
================================ */
#footer-widgets {
background-color: var(--color-muted);
color: var(--color-muted-foreground);
padding: var(--space-12) 0;
margin-top: var(--space-16);
border-top: 1px solid var(--color-border);
}

/* sort out the copyright - preserved from original */
.site-footer.site-info,
.copyright-bar,
.inside-site-info {
display: none;
}

/* ================================
MENU & IF USER IS LOGGED IN - preserved from original
================================ */
#wp-admin-bar-wp-logo {
display: none;
}

body.logged-in #menu-item-23 {
display: none;
}

/* ================================
RESPONSIVE DESIGN - MOBILE FIRST
================================ */
@media (max-width: 1024px) {
.site {
padding: 0 var(--space-4);
}

article .inside-article {
padding: var(--space-8);
}
}

@media (max-width: 768px) {
body {
font-size: 0.9rem;
}

.site-main h1, .widget.widget_block h1 {
margin: var(--space-10) 0 var(--space-6) 0;
}

.site-main h2, .widget.widget_block h2 {
margin: var(--space-8) 0 var(--space-4) 0;
}

article .inside-article {
padding: var(--space-6);
margin-bottom: var(--space-10);
}

.entry-content {
max-width: none;
}

.widget-area .widget {
padding: var(--space-5);
}

blockquote {
font-size: 1rem;
padding: var(--space-5);
margin: var(--space-6) 0;
}
}

@media (max-width: 480px) {
.site {
padding: 0 var(--space-3);
}

article .inside-article {
padding: var(--space-5);
}

button,
input[type="button"],
input[type="submit"] {
width: 100%;
margin: var(--space-2) 0;
max-width: none !important;
}

.featured-image.page-header-image-single.grid-container.grid-parent,
.featured-image.page-header-image.grid-container.grid-parent {
float: none;
margin: 0 0 var(--space-3) 0;
max-width: 100%;
}
}

/* ================================
PHP-COMPATIBLE UTILITY CLASSES
================================ */

/* Content width variations for PHP loops */
.content-narrow {
max-width: 45ch;
}

.content-wide {
max-width: 75ch;
}

.content-full {
max-width: none;
}

/* Spacing utilities for dynamic content */
.spacing-sm { margin-bottom: var(--space-3); }
.spacing-md { margin-bottom: var(--space-6); }
.spacing-lg { margin-bottom: var(--space-10); }
.spacing-xl { margin-bottom: var(--space-12); }

/* Modern card variations for PHP-generated content */
.card {
background-color: var(--color-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-5);
margin-bottom: var(--space-5);
transition: var(--transition-all);
}

.card:hover {
box-shadow: var(--shadow-sm);
}

.card-header {
border-bottom: 1px solid var(--color-border);
padding-bottom: var(--space-3);
margin-bottom: var(--space-3);
}

.card-content {
padding: var(--space-3) 0;
}

.card-footer {
border-top: 1px solid var(--color-border);
padding-top: var(--space-3);
margin-top: var(--space-3);
}

/* Subject-specific themes for PHP-generated content - minimal approach */
.subject-science {
border-left: 3px solid hsl(217 91% 60%);
}

.subject-arts {
border-left: 3px solid hsl(262 83% 58%);
}

.subject-math {
border-left: 3px solid hsl(142 71% 45%);
}

.subject-language {
border-left: 3px solid hsl(316 73% 69%);
}

.subject-general {
border-left: 3px solid hsl(25 95% 53%);
}

/* Simple post type indicators without distracting colors */
.post-type-lesson::before {
content: "📖 ";
opacity: 0.7;
}

.post-type-assignment::before {
content: "📝 ";
opacity: 0.7;
}

.post-type-resource::before {
content: "📚 ";
opacity: 0.7;
}

.post-type-discussion::before {
content: "💬 ";
opacity: 0.7;
}

/* ================================
MEDIA CONTROLS - preserved from original
================================ */
.mejs-controls a:hover {
background-color: var(--color-accent) !important;
border-radius: var(--radius-sm);
color: var(--color-accent-foreground) !important;
}

/* ================================
ACCESSIBILITY IMPROVEMENTS
================================ */
/* Enhanced focus management */
:focus {
outline: 2px solid var(--color-ring);
outline-offset: 2px;
}

:focus:not(:focus-visible) {
outline: none;
}

:focus-visible {
outline: 2px solid var(--color-ring);
outline-offset: 2px;
}

/* Screen reader only text */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

/* Skip to content link */
.skip-to-content {
position: absolute;
top: -40px;
left: var(--space-4);
background-color: var(--color-primary);
color: var(--color-primary-foreground);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-md);
text-decoration: none;
font-weight: 500;
z-index: 100;
transition: var(--transition-all);
}

.skip-to-content:focus {
top: var(--space-4);
}

/* High contrast support */
@media (prefers-contrast: high) {
:root {
--color-border: hsl(var(--foreground));
}

button,
input[type="button"],
input[type="submit"] {
border-width: 2px;
}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}

/* ================================
STYLING OF STANDARD ARCHIVE PAGE ENTRIES - preserved from original
================================ */
.archive .entry-summary {
margin-bottom: var(--space-6);
max-width: 65ch;
}

.archive .entry-title {
margin-bottom: var(--space-3);
}

.archive .entry-meta {
color: var(--color-muted-foreground);
font-size: 0.875rem;
margin-bottom: var(--space-4);
}

.archive .entry-meta a {
color: var(--color-muted-foreground);
text-decoration: none;
}

.archive .entry-meta a:hover {
color: var(--color-primary);
}

.archive article {
padding-bottom: var(--space-6);
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--space-6);
}

.archive article:last-child {
border-bottom: none;
margin-bottom: 0;
}

/* Archive pagination */
.archive .pagination {
display: flex;
justify-content: center;
gap: var(--space-2);
margin-top: var(--space-10);
}

.archive .pagination a,
.archive .pagination span {
padding: var(--space-2) var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
text-decoration: none;
color: var(--color-foreground);
background-color: var(--color-background);
transition: var(--transition-all);
}

.archive .pagination a:hover {
background-color: var(--color-accent);
border-color: var(--color-primary);
}

.archive .pagination .current {
background-color: var(--color-primary);
color: var(--color-primary-foreground);
border-color: var(--color-primary);
}

/* Archive pagination with separators */
.archive .pagination {
display: flex;
justify-content: center;
gap: var(--space-2);
margin-top: var(--space-16);
border-top: 1px solid var(--color-border);
padding-top: var(--space-12);
position: relative;
}

.archive .pagination::before {
content: '';
position: absolute;
top: calc(var(--space-6) * -1);
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
var(--color-primary) 50%,
transparent 100%);
opacity: 0.6;
}

.archive .pagination a,
.archive .pagination span {
padding: var(--space-2) var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
text-decoration: none;
color: var(--color-foreground);
background-color: var(--color-background);
transition: var(--transition-all);
}

.archive .pagination a:hover {
background-color: var(--color-accent);
border-color: var(--color-primary);
}

.archive .pagination .current {
background-color: var(--color-primary);
color: var(--color-primary-foreground);
border-color: var(--color-primary);
}

/* ================================
UTILITY CLASSES FOR MANUAL SEPARATORS
================================ */

/* For PHP template use - manual separator insertion */
.blog-separator {
margin: var(--space-16) 0;
text-align: center;
position: relative;
}

.blog-separator::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--color-border) 20%,
var(--color-primary) 50%,
var(--color-border) 80%,
transparent 100%);
opacity: 0.6;
}

.blog-separator::after {
content: '✦';
background: var(--color-background);
color: var(--color-muted-foreground);
font-size: 0.875rem;
padding: 0 var(--space-3);
position: relative;
z-index: 1;
}

/* Simple divider for content sections */
.content-divider {
margin: var(--space-12) 0;
height: 1px;
background: var(--color-border);
position: relative;
}

.content-divider.with-icon::before {
content: '•';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: var(--color-background);
color: var(--color-muted-foreground);
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
}

/* Loading states for dynamic content */
.loading {
opacity: 0.6;
pointer-events: none;
transition: opacity var(--transition-all);
}

/* Modern selection styling */
::selection {
background-color: hsl(var(--primary) / 0.1);
color: var(--color-foreground);
}

/* Smooth scrolling */
html {
scroll-behavior: smooth;
}

/* Custom scrollbar styling - minimal */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}

::-webkit-scrollbar-track {
background: var(--color-background);
}

::-webkit-scrollbar-thumb {
background: var(--color-border);
border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
background: var(--color-muted-foreground);
}

/* Print styles */
@media print {
.sidebar,
#masthead,
#footer-widgets,
.skip-to-content,
button,
input[type="button"],
input[type="submit"] {
display: none !important;
}

body {
font-size: 12pt;
line-height: 1.5;
color: black;
background: white;
}

article .inside-article {
box-shadow: none;
border: 1px solid #ddd;
page-break-inside: avoid;
}
}

/* ================================
EDUCATIONAL SPECIFIC ENHANCEMENTS
================================ */

/* ================================
Z-INDEX MANAGEMENT - PREVENT CONTENT HIDING
================================ */

/* Global z-index hierarchy */
.reading-progress {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: var(--gradient-border);
z-index: 100;
transform-origin: left;
}

/* Dropdown menus and overlays */
.dropdown-menu,
.menu-overlay {
z-index: 60;
}

/* Sticky header */
#masthead {
z-index: 40;
}

/* Navigation elements */
#primary-menu {
z-index: 30;
}

/* Interactive buttons and links */
button,
input[type="button"],
input[type="submit"],
.wp-block-button__link,
a {
z-index: 10;
}

/* Content containers */
article,
.entry-content,
.sidebar,
.widget {
z-index: 1;
}

/* Hover states get higher z-index */
article:hover,
.widget:hover {
z-index: 5;
}

/* ================================
WIDGET CONTENT VISIBILITY FIXES
================================ */

/* Ensure all widget content is properly contained and visible */
.widget * {
position: relative;
z-index: inherit;
}

.widget ul li a,
.widget ol li a {
display: block;
padding: var(--space-1) 0;
color: var(--color-primary);
text-decoration: none;
line-height: 1.4;
word-wrap: break-word;
hyphens: auto;
}

.widget ul li a:hover,
.widget ol li a:hover {
color: var(--color-foreground);
background-color: var(--color-accent);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
margin: 0 calc(var(--space-2) * -1);
}

/* Comments widget specific fixes */
.widget_recent_comments .recentcomments {
margin-bottom: var(--space-3);
line-height: 1.5;
}

.widget_recent_comments .recentcomments a {
font-weight: 500;
}

/* Prevent widget backgrounds from covering content */
.widget::before,
.widget::after {
z-index: -1;
}

/* Clear any absolute positioning that might cause overlap */
.widget {
position: relative !important;
float: none !important;
clear: both;
}

/* Make sure widget lists don't overlap */
.widget ul,
.widget ol {
overflow: visible;
position: relative;
z-index: 1;
}

/* Content table of contents */
.table-of-contents {
background-color: var(--color-muted);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-5);
margin: var(--space-6) 0;
}

.table-of-contents h3 {
margin-top: 0;
margin-bottom: var(--space-3);
font-size: 1rem;
color: var(--color-foreground);
}

.table-of-contents ul {
list-style: none;
padding: 0;
margin: 0;
}

.table-of-contents li {
margin-bottom: var(--space-2);
}

.table-of-contents a {
color: var(--color-muted-foreground);
text-decoration: none;
font-size: 0.875rem;
transition: var(--transition-colors);
}

.table-of-contents a:hover {
color: var(--color-primary);
}

/* Learning objectives box */
.learning-objectives {
background-color: var(--color-background);
border: 2px solid var(--color-primary);
border-radius: var(--radius-lg);
padding: var(--space-6);
margin: var(--space-8) 0;
}

.learning-objectives h3 {
color: var(--color-primary);
margin-top: 0;
margin-bottom: var(--space-4);
}

.learning-objectives ul {
margin-bottom: 0;
}

/* Highlight text for important terms */
.highlight {
background-color: hsl(48 96% 89%);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
font-weight: 500;
}

/* Definition boxes */
.definition {
background-color: var(--color-background);
border-left: 4px solid hsl(142 71% 45%);
border: 1px solid var(--color-border);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
padding: var(--space-5);
margin: var(--space-6) 0;
position: relative;
}

.definition::before {
content: "📖";
position: absolute;
top: var(--space-3);
right: var(--space-3);
opacity: 0.7;
}

.definition-term {
font-weight: 600;
color: var(--color-foreground);
margin-bottom: var(--space-2);
}

/* Interactive elements for educational content */
.interactive-element {
border: 2px dashed var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-5);
margin: var(--space-6) 0;
text-align: center;
transition: var(--transition-all);
}

.interactive-element:hover {
border-color: var(--color-primary);
background-color: var(--color-muted);
}

/* Study Note Box */
.study-note {
background: var(--gradient-bg-blue);
border-left: 4px solid var(--color-info);
padding: var(--space-6);
margin: var(--space-6) 0;
border-radius: 0 var(--radius-md) var(--radius-md) 0;
position: relative;
border: 1px solid var(--color-info);
}

.study-note::before {
content: "📚";
position: absolute;
top: var(--space-4);
right: var(--space-4);
font-size: 1.25rem;
opacity: 0.7;
}

/* Assignment Box */
.assignment-box {
background: var(--gradient-bg-orange);
border-left: 4px solid var(--color-warning);
padding: var(--space-6);
margin: var(--space-6) 0;
border-radius: 0 var(--radius-md) var(--radius-md) 0;
position: relative;
border: 1px solid var(--color-warning);
}

.assignment-box::before {
content: "✏️";
position: absolute;
top: var(--space-4);
right: var(--space-4);
font-size: 1.25rem;
opacity: 0.7;
}

/* Key Concept Highlight */
.key-concept {
background: var(--gradient-bg-purple);
border-left: 4px solid var(--color-creative);
padding: var(--space-6);
margin: var(--space-6) 0;
border-radius: 0 var(--radius-md) var(--radius-md) 0;
position: relative;
border: 1px solid var(--color-creative);
}

.key-concept::before {
content: "💡";
position: absolute;
top: var(--space-4);
right: var(--space-4);
font-size: 1.25rem;
opacity: 0.7;
}

/* Success/Achievement Box */
.success-highlight {
background: var(--gradient-bg-green);
border-left: 4px solid var(--color-success);
padding: var(--space-6);
margin: var(--space-6) 0;
border-radius: 0 var(--radius-md) var(--radius-md) 0;
position: relative;
border: 1px solid var(--color-success);
}

.success-highlight::before {
content: "🌟";
position: absolute;
top: var(--space-4);
right: var(--space-4);
font-size: 1.25rem;
opacity: 0.7;
}

/* Additional Educational Box Types */
.info-highlight {
background: var(--gradient-bg-blue);
border-left: 4px solid var(--color-info);
padding: var(--space-6);
margin: var(--space-6) 0;
border-radius: 0 var(--radius-md) var(--radius-md) 0;
position: relative;
border: 1px solid var(--color-info);
}

.info-highlight::before {
content: "ℹ️";
position: absolute;
top: var(--space-4);
right: var(--space-4);
font-size: 1.25rem;
opacity: 0.7;
}

.creative-task {
background: var(--gradient-bg-pink);
border-left: 4px solid var(--color-accent-pink);
padding: var(--space-6);
margin: var(--space-6) 0;
border-radius: 0 var(--radius-md) var(--radius-md) 0;
position: relative;
border: 1px solid var(--color-accent-pink);
}

.creative-task::before {
content: "🎨";
position: absolute;
top: var(--space-4);
right: var(--space-4);

/* ================================
END OF 21ST.DEV INSPIRED EDUCATIONAL THEME
================================ */