/*
Theme Name: Astra
Theme URI: https://wpastra.com/
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It's ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It's fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme.
Version: 4.12.0
Requires at least: 5.3
WC requires at least: 3.0
WC tested up to: 9.6
Tested up to: 6.9
Requires PHP: 5.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra
Domain Path: /languages
Tags: custom-menu, custom-logo, entertainment, one-column, two-columns, left-sidebar, e-commerce, right-sidebar, custom-colors, editor-style, featured-images, full-width-template, microformats, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready, blog
AMP: true
*/

/* CSS Variables - Educational Blue Theme */
:root {
    --background: #f7f8fc;
    --foreground: #1a1f36;
    --card: #ffffff;
    --card-foreground: #1a1f36;
    --popover: #ffffff;
    --popover-foreground: #1a1f36;
    --primary: #3b5998;
    --primary-foreground: #ffffff;
    --secondary: #2d3748;
    --secondary-foreground: #ffffff;
    --muted: #edf2f7;
    --muted-foreground: #718096;
    --accent: #4a6fa5;
    --accent-foreground: #ffffff;
    --border: #e2e8f0;
    --input: #e2e8f0;
    --ring: #3b5998;
    --hero-overlay: rgba(26, 31, 54, 0.6);
    --radius: 0.625rem;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--background);
    color: var(--foreground);
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}

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

/* Container */
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Header */
.site-header {
    background-color: var(--primary);
    color: var(--primary-foreground);
    box-shadow: var(--shadow-lg);
    position: sticky;
    top: 0;
    z-index: 50;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo-icon {
    width: 40px;
    height: 40px;
    background-color: var(--accent);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
}

.logo-text {
    font-weight: 700;
    font-size: 1.125rem;
}

/* Navigation */
.main-navigation {
    display: none;
}

.main-navigation ul {
    display: flex;
    list-style: none;
    gap: 0.25rem;
}

.main-navigation li {
    position: relative;
}

.main-navigation a {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.6rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease;
    font-size: 0.85rem;
    white-space: nowrap;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Dropdown Menu */
.main-navigation .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 14rem;
    background-color: var(--popover);
    color: var(--popover-foreground);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    display: block;
}

.main-navigation li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.main-navigation .sub-menu a {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--popover-foreground);
}

.main-navigation .sub-menu a:hover {
    background-color: var(--muted);
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: flex;
    padding: 0.5rem;
    background: transparent;
    border: none;
    color: var(--primary-foreground);
    cursor: pointer;
    border-radius: 0.375rem;
}

.menu-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.menu-toggle svg {
    width: 24px;
    height: 24px;
}

/* Mobile Navigation */
.mobile-navigation {
    display: none;
    padding-bottom: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 0.5rem;
    padding-top: 1rem;
}

.mobile-navigation.active {
    display: block;
}

.mobile-navigation ul {
    list-style: none;
}

.mobile-navigation a {
    display: block;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
}

.mobile-navigation a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.mobile-navigation .sub-menu {
    padding-left: 1.5rem;
}

.mobile-navigation .sub-menu a {
    font-size: 0.875rem;
    opacity: 0.8;
}

/* Hero Section */
.hero-section {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-background {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background-color: var(--hero-overlay);
}

.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    color: #ffffff;
    padding: 1rem;
    max-width: 56rem;
    margin: 0 auto;
}

.hero-content h1 {
    font-size: 1.875rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-wrap: balance;
}

.hero-content p {
    font-size: 1.125rem;
    opacity: 0.9;
}

.hero-buttons {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
}

.hero-btn {
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    display: inline-block;
}

.hero-btn-primary {
    background-color: #ffffff;
    color: var(--primary);
}

.hero-btn-primary:hover {
    background-color: #f1f1f1;
}

.hero-btn-secondary {
    border: 2px solid #ffffff;
    color: #ffffff;
    background: transparent;
}

.hero-btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Main Layout */
.site-main {
    padding: 2rem 0;
}

.content-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.main-content {
    min-width: 0;
}

/* Cards */
.card {
    background-color: var(--card);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    margin-bottom: 2rem;
}

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

.card h2 {
    color: var(--primary);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.card h3 {
    color: var(--secondary);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.card p {
    color: var(--muted-foreground);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.card img {
    border-radius: 0.5rem;
    margin: 1.5rem 0;
}

/* Content Section Item */
.content-item {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background-color: var(--card);
    border-radius: 0.75rem;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease;
    margin-bottom: 1rem;
}

.content-item:hover {
    box-shadow: var(--shadow-md);
}

.content-icon {
    width: 48px;
    height: 48px;
    background-color: rgba(59, 89, 152, 0.1);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.content-icon svg {
    width: 24px;
    height: 24px;
    color: var(--primary);
}

.content-text h3 {
    color: var(--secondary);
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.content-text p {
    color: var(--muted-foreground);
    line-height: 1.6;
    margin: 0;
}

/* Video Container */
.video-container {
    aspect-ratio: 16 / 9;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: var(--muted);
}

.video-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Sidebar */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.widget {
    background-color: var(--card);
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}

.widget-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--secondary);
    margin-bottom: 0.75rem;
}

.widget-title svg {
    width: 16px;
    height: 16px;
}

/* Search Widget */
.search-form {
    position: relative;
}

.search-form input[type="search"] {
    width: 100%;
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    border: 1px solid var(--input);
    border-radius: 0.5rem;
    background-color: var(--background);
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.search-form input[type="search"]:focus {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 2px rgba(59, 89, 152, 0.2);
}

.search-form button {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--muted-foreground);
    cursor: pointer;
    padding: 0;
}

.search-form button svg {
    width: 16px;
    height: 16px;
}

/* Recent Posts Widget */
.widget ul {
    list-style: none;
}

.widget ul li {
    margin-bottom: 0.5rem;
}

.widget ul li a {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    transition: color 0.2s ease;
}

.widget ul li a:hover {
    color: var(--primary);
}

/* Tags Widget */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag-cloud a {
    padding: 0.25rem 0.75rem;
    background-color: var(--muted);
    color: var(--muted-foreground);
    font-size: 0.875rem;
    border-radius: 9999px;
    transition: all 0.2s ease;
}

.tag-cloud a:hover {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

/* Links Widget */
.links-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem !important;
}

.links-list li svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

.links-list li a {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.links-list li a:hover {
    color: var(--primary);
}

/* About Widget */
.widget-about p {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    line-height: 1.6;
}

/* Calendar Widget */
.calendar-placeholder {
    text-align: center;
    padding: 1rem;
    background-color: var(--muted);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

/* Footer */
.site-footer {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
}

.footer-inner {
    padding: 3rem 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.footer-about .site-logo {
    margin-bottom: 1rem;
}

.footer-about .logo-icon {
    color: #ffffff;
}

.footer-about p {
    font-size: 0.875rem;
    opacity: 0.8;
    line-height: 1.6;
}

.footer-links h4,
.footer-contact h4 {
    font-weight: 600;
    margin-bottom: 1rem;
}

.footer-links ul {
    list-style: none;
}

.footer-links ul li {
    margin-bottom: 0.5rem;
}

.footer-links ul li a {
    font-size: 0.875rem;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.footer-links ul li a:hover {
    opacity: 1;
}

.footer-contact ul {
    list-style: none;
}

.footer-contact ul li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    opacity: 0.8;
    margin-bottom: 0.75rem;
}

.footer-contact ul li svg {
    width: 16px;
    height: 16px;
}

/* Social Links */
.social-links {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.social-links a {
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.social-links a:hover {
    background-color: var(--accent);
}

.social-links a svg {
    width: 16px;
    height: 16px;
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem 0;
    text-align: center;
    font-size: 0.875rem;
    opacity: 0.7;
}

/* WordPress Specific */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.aligncenter {
    display: block;
    margin: 1.5rem auto;
}

.alignleft {
    float: left;
    margin: 0 1.5rem 1.5rem 0;
}

.alignright {
    float: right;
    margin: 0 0 1.5rem 1.5rem;
}

.wp-caption {
    max-width: 100%;
}

.wp-caption-text {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    text-align: center;
    margin-top: 0.5rem;
}

/* Responsive Styles */
@media (min-width: 640px) {
    .logo-text {
        display: block;
    }

    .hero-buttons {
        flex-direction: row;
    }
}

@media (min-width: 768px) {
    .hero-section {
        height: 500px;
    }

    .hero-content h1 {
        font-size: 3rem;
    }

    .hero-content p {
        font-size: 1.25rem;
    }

    .card {
        padding: 2rem;
    }

    .card h2 {
        font-size: 1.875rem;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .menu-toggle {
        display: none;
    }

    .main-navigation {
        display: flex;
    }

    .content-wrapper {
        grid-template-columns: 1fr 320px;
    }

    .footer-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Page Hero Section */
.hero-page {
    height: 300px;
}

.hero-page .hero-content h1 {
    font-size: 2rem;
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .hero-page {
        height: 350px;
    }

    .hero-page .hero-content h1 {
        font-size: 2.5rem;
    }
}

/* Page Content */
.page-content {
    line-height: 1.8;
}

.page-content h2 {
    color: var(--primary);
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.page-content h2:first-child {
    margin-top: 0;
}

.page-content h3 {
    color: var(--secondary);
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.page-content p {
    color: var(--muted-foreground);
    margin-bottom: 1rem;
}

.page-content ul,
.page-content ol {
    color: var(--muted-foreground);
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.page-content li {
    margin-bottom: 0.5rem;
}

.page-content img {
    border-radius: 0.5rem;
    margin: 1.5rem 0;
    max-width: 100%;
    height: auto;
}

.page-content a {
    color: var(--primary);
    text-decoration: underline;
}

.page-content a:hover {
    text-decoration: none;
}

.page-content strong {
    color: var(--foreground);
    font-weight: 600;
}

/* WordPress Calendar */
#wp-calendar {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

#wp-calendar caption {
    font-weight: 600;
    padding-bottom: 0.5rem;
    color: var(--secondary);
}

#wp-calendar th,
#wp-calendar td {
    padding: 0.25rem;
    text-align: center;
}

#wp-calendar th {
    font-weight: 600;
    color: var(--secondary);
}

#wp-calendar td {
    color: var(--muted-foreground);
}

#wp-calendar td a {
    color: var(--primary);
    font-weight: 600;
}

#wp-calendar tfoot td {
    padding-top: 0.5rem;
}

/* Content Item Links */
.content-item {
    cursor: pointer;
    text-decoration: none;
    display: flex;
}

a.content-item:hover {
    box-shadow: var(--shadow-md);
}

a.content-item .content-text h3,
a.content-item .content-text p {
    transition: color 0.2s ease;
}

a.content-item:hover .content-text h3 {
    color: var(--primary);
}

/* Utility Classes */
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-muted { color: var(--muted-foreground); }
.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-muted { background-color: var(--muted); }