/*
Theme Name: PrintWorksheets
Description: A modern educational worksheets theme for kids with search functionality, categories, and responsive design.
Author: PrintWorksheets.com
Version: 6.1
Tags: education, worksheets, kids, responsive, modern
Text Domain: printworksheets
*/

#pw-zoom-btn {
    box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
    top: 16px;
    right: 16px;
}

/* Newsletter Messages */
.newsletter-message {
    padding: 10px 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
}

.newsletter-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.newsletter-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.newsletter-warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.newsletter-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* SEO: Related Worksheets Title - Semantic HTML */
.related-worksheets-title {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    font-style: normal;
    font-weight: 400;
    color: rgb(33, 37, 41);
    font-size: 29px;
    line-height: 35px;
    margin-bottom: 40px;
}

/* Menus: Force removal of dots ONLY for navigation (User Request) */
#primary-menu li,
#mobile-primary-menu li,
.menu-item {
    list-style: none !important;
    padding: 0;
    margin-left: 0;
}

/* Content: Restore default list styles for articles (User Request) */
.entry-content ul,
.post-content ul,
.entry-content li,
.post-content li {
    list-style: disc;
    /* Start with disc/decimal as needed, or inherit */
    list-style-type: disc;
    margin-left: 1.5em;
    /* Ensure indentation for bullets */
}

/* Ensure ordered lists have numbers */
.entry-content ol,
.post-content ol {
    list-style: decimal;
    list-style-type: decimal;
    margin-left: 1.5em;
}

/* Reset for specific known non-content lists if needed, e.g. related posts handled by grid styles */

/* Hide "Copy Delete Posts" Loader Overlay & Fake H1 (User Request) */
.cdp-copy-loader-overlay,
.cdp-copy-alert-success {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -9999 !important;
}

/* SEO: Pagination Styles for Archive Pages */
.pagination-nav {
    margin: 3rem 0;
    padding: 2rem 0;
    border-top: 1px solid #e5e7eb;
}

.pagination-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.pagination-numbers {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0.5rem 1rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #374151;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.pagination-link:hover {
    background: #f3f4f6;
    border-color: #3b82f6;
    color: #3b82f6;
}

.pagination-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0.5rem 1rem;
    background: #3b82f6;
    color: #ffffff;
    border-radius: 8px;
    font-weight: 600;
}

.pagination-prev,
.pagination-next {
    padding: 0.5rem 1.5rem;
}

@media (max-width: 640px) {
    .pagination-wrapper {
        gap: 0.5rem;
    }

    .pagination-link {
        min-width: 36px;
        height: 36px;
        padding: 0.25rem 0.75rem;
        font-size: 0.875rem;
    }
}

/* Favorites badge alignment */
.pw-fav-icon-wrap {
    position: relative;
    line-height: 1;
}

.pw-fav-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    transform: translate(25%, -25%);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 9999px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

/* Share popover styles - Mobile optimized */
.pw-share-popover {
    display: none;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 12px 14px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
    align-items: center;
    gap: 10px;
    z-index: 1000;
    white-space: nowrap;
}

.pw-share-popover.open {
    display: flex;
}

.pw-share-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
    flex-shrink: 0;
}

.pw-share-icon:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}

.pw-share-icon svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: currentColor;
}

.pw-share-icon.fb {
    background: #1877F2;
    color: #fff;
}

.pw-share-icon.tw {
    background: #000000;
    color: #fff;
}

.pw-share-icon.pin {
    background: #E60023;
    color: #fff;
}

.pw-share-icon.wa {
    background: #25D366;
    color: #fff;
}

.pw-share-icon.rd {
    background: #FF4500;
    color: #fff;
}

/* Mobile responsive share popover */
@media (max-width: 768px) {
    .pw-share-popover {
        bottom: calc(100% + 8px);
        padding: 10px 12px;
        gap: 8px;
        border-radius: 14px;
    }

    .pw-share-icon {
        width: 42px;
        height: 42px;
    }

    .pw-share-icon svg {
        width: 18px;
        height: 18px;
    }
}

/* Simple Slider Styles */
.simple-image-container {
    position: relative;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    min-height: 550px;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-worksheet-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    cursor: pointer;
    transition: transform 0.3s ease;
    /* Make images bigger */
    max-width: 95%;
    max-height: 95%;
    /* Prevent image copying and right-click */
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    pointer-events: none !important;
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    user-drag: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-context-menu: none !important;
    -moz-context-menu: none !important;
    context-menu: none !important;
}

.main-worksheet-image:hover {
    transform: scale(1.02);
}

.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    color: #111827;
    /* dark for light background */
    border: none;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.nav-arrow:hover {
    transform: translateY(-50%) scale(1.05);
    color: #374151;
}

.nav-prev {
    left: 10px;
}

.nav-next {
    right: 10px;
}

.fullscreen-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    color: #111827;
    /* dark for light background */
    border: none;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.fullscreen-btn:hover {
    transform: scale(1.05);
    color: #374151;
}

/* Touch devices: always show and enable controls (no hover on mobile) */
@media (hover: none) {

    .simple-image-container .nav-arrow,
    .simple-image-container .fullscreen-btn {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Reveal controls when hovering the main image container */
.simple-image-container:hover .nav-arrow,
.simple-image-container:hover .fullscreen-btn {
    opacity: 1;
    pointer-events: auto;
}

/* Add subtle translucent background only on hover for contrast */
.simple-image-container:hover .nav-arrow,
.simple-image-container:hover .fullscreen-btn {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 9999px;
}

/* Ensure container establishes positioning context */
.simple-image-container {
    position: relative;
}

.image-counter {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
}

.thumbnail-container {
    display: flex;
    gap: 6px;
    padding: 8px;
    background: #f8fafc;
    overflow-x: auto;
    border-top: 1px solid #e2e8f0;
}

.thumbnail-btn {
    flex-shrink: 0;
    width: 60px;
    height: 45px;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
}

.thumbnail-btn:hover {
    border-color: #3b82f6;
    transform: translateY(-2px);
}

.thumbnail-btn.active {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.thumbnail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.no-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #6b7280;
    font-size: 16px;
}

/* Lightbox Styles */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: none !important;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox-overlay.show {
    display: flex !important;
    visibility: visible;
    opacity: 1;
}

.lightbox-content {
    position: relative;
    max-width: 100vw;
    max-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 60px 80px;
    box-sizing: border-box;
}

/* Desktop Lightbox Optimization */
@media (min-width: 769px) {
    .lightbox-overlay {
        padding: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .lightbox-content {
        max-width: 100vw;
        max-height: 100vh;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 60px 80px;
        box-sizing: border-box;
    }

    .lightbox-img {
        max-width: 95vw !important;
        max-height: 95vh !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: center !important;
    }
}

.lightbox-img {
    max-width: 95vw !important;
    max-height: 95vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 8px;
    /* Ensure image is readable and properly sized */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    /* Prevent image copying and right-click */
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    pointer-events: none !important;
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    user-drag: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-context-menu: none !important;
    -moz-context-menu: none !important;
    context-menu: none !important;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    color: #ffffff;
    border: none;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-close:hover {
    transform: scale(1.05);
    color: #e5e7eb;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    border: none;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    padding: 0;
}

.lightbox-nav:hover {
    transform: translateY(-50%) scale(1.1);
    color: rgba(255, 255, 255, 1);
    background: rgba(0, 0, 0, 0.1);
}

.lightbox-nav svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

/* Ensure lightbox arrows are always visible and clickable */
.lightbox-nav {
    opacity: 1;
    pointer-events: auto;
    z-index: 1000002;
    /* above image */
}

/* Desktop Navigation Positioning */
@media (min-width: 769px) {
    .lightbox-prev {
        left: 30px;
    }

    .lightbox-next {
        right: 30px;
    }
}

/* Thumbnail Container */
.thumbnail-container {
    display: flex;
    gap: 8px;
    padding: 12px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

/* 2. Header: Force White Site Title */
.hero-header a,
.site-title,
.site-title a,
.mobile-site-logo .site-title,
.mobile-nav-header .site-title,
.navbar-brand,
.logo-text {
    color: #ffffff !important;
}

/* 3. Download Button Enhancement (Orange CTA) */
.download-Timer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 18px 32px;

    /* Solid Orange Background */
    background: #ff8c00;

    color: #ffffff !important;
    font-size: 1.25rem;
    font-weight: 700;
    /* Bold */
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;

    /* Rectangular with slight radius */
    border-radius: 6px;

    /* Subtle Shadow */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    position: relative;
}

.download-Timer-btn:hover {
    background: #e67e00;
    /* Darker orange on hover */
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    color: #ffffff !important;
}

.download-Timer-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.download-Timer-btn .text {
    font-size: 1.25rem;
    padding-left: 0;
}

/* Hide Redundant Heading above button */
.download-section-wrapper h3 {
    display: none !important;
}

/* 4. Social Share: Pinterest Mobile */
@media (max-width: 768px) {

    /* HIDE text for Favorite, Share AND Pinterest buttons ("Icon Only" requested) - DISABLED BY NEW REQUEST
    .pw-fav-label,
    .pw-share-btn span,
    .pw-share-btn .font-medium,
    .pw-share-pinterest span,
    .pw-share-pinterest .text {
        display: none !important;
    }
    */

    /* Ensure buttons are square/icon-only if text is hidden - DISABLED
    .pw-fav-toggle,
    .pw-share-btn,
    .pw-share-pinterest {
        width: 48px !important;
        min-width: 48px !important;
        padding: 0 !important;
        justify-content: center !important;
    }
    */

    /* Revert to auto width for text visibility */
    .pw-fav-toggle,
    .pw-share-btn,
    .pw-share-pinterest {
        width: auto !important;
        min-width: auto !important;
        padding: 8px 16px !important;
    }

    .pw-fav-toggle svg,
    .pw-share-btn svg,
    .pw-share-pinterest svg {
        margin: 0 !important;
    }

    /* 5. Mobile Content Width Fix (Fix "Squashed" text) */
    .site-main .max-w-7xl,
    .site-main article .bg-white,
    .entry-content,
    .post-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Ensure lists don't indent too much */
    .entry-content ul,
    .entry-content ol {
        padding-left: 1.2rem !important;
        /* Visual align with text */
        margin-left: 0 !important;
    }
}

.thumbnail-container::-webkit-scrollbar {
    height: 6px;
}

.thumbnail-container::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.thumbnail-container::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.thumbnail-container::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.thumbnail-btn {
    flex-shrink: 0;
    width: 80px;
    height: 60px;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
}

.thumbnail-btn:hover {
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.thumbnail-btn.active {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.thumbnail-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #ffffff;
    /* Prevent image copying */
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    pointer-events: none !important;
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    user-drag: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-context-menu: none !important;
    -moz-context-menu: none !important;
    context-menu: none !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .simple-image-container {
        height: 400px;
    }

    .nav-arrow {
        width: 48px;
        height: 48px;
        font-size: 20px;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
    }

    /* Mobile must see and use arrows */
    .simple-image-container .nav-arrow,
    .simple-image-container .fullscreen-btn {
        opacity: 1;
        pointer-events: auto;
    }

    .nav-prev {
        left: 5px;
    }

    .nav-next {
        right: 5px;
    }

    .thumbnail-container {
        padding: 8px;
        gap: 6px;
    }

    .thumbnail-btn {
        width: 70px;
        height: 50px;
    }

    .lightbox-nav {
        width: 50px;
        height: 50px;
        font-size: 22px;
        background: rgba(0, 0, 0, 0.7);
        border-radius: 50%;
    }

    .lightbox-prev {
        left: 10px;
    }

    .lightbox-next {
        right: 10px;
    }

    /* Extra safety for mobile fullscreen arrows */
    .lightbox-nav {
        opacity: 1;
        pointer-events: auto;
        z-index: 1000002;
    }

    .fullscreen-btn {
        width: 48px;
        height: 48px;
        top: 8px;
        right: 8px;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
    }
}

/* Mobile Lightbox Optimization - Screenshot Protection */
.lightbox-overlay {
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-content {
    max-width: 85vw;
    max-height: 85vh;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-img {
    max-width: 85vw;
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
}

.lightbox-close {
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    font-size: 20px;
}
}

/*
Theme Name: PrintWorksheets
Description: A modern educational worksheets theme for kids with search functionality, categories, and responsive design.
Author: Your Name
Version: 1.0
Tags: education, worksheets, kids, responsive, modern
Text Domain: printworksheets
*/

/* Google Fonts moved to header.php for better performance - no render blocking */

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    line-height: inherit;
    color: hsl(var(--foreground));
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

body {
    margin: 0;
    line-height: inherit;
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent;
}

:root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --border: 0 0% 89.8%;
    --radius: 0.5rem;
}

/* CSS Variables for Tailwind-like functionality */
body {
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-bg-opacity: 1;
    --tw-gradient-from: #2563eb var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(29 78 216 / 0) var(--tw-gradient-via-position);
    --tw-gradient-stops: var(--tw-gradient-from), #1d4ed8 var(--tw-gradient-via-position), var(--tw-gradient-to);
    --tw-gradient-to: #1e40af var(--tw-gradient-to-position);
    --tw-text-opacity: 1;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    --tw-space-x-reverse: 0;
    --tw-bg-opacity: 1;
    --tw-space-x-reverse: 0;
    --tw-bg-opacity: 1;
    --tw-gradient-from: #facc15 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(250 204 21 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #f97316 var(--tw-gradient-to-position);
    --tw-space-x-reverse: 0;
    --tw-text-opacity: 1;
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
}

* {
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
}

* {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}

* {
    border-color: hsl(var(--border));
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

*,
:before,
:after {
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
}

*,
:before,
:after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}

:backdrop {
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
}

/* Utility Classes for New Header */
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-blue-600 {
    --tw-gradient-from: #2563eb var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-blue-700 {
    --tw-gradient-to: rgb(29 78 216 / 0) var(--tw-gradient-via-position);
    --tw-gradient-stops: var(--tw-gradient-from), #1d4ed8 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-blue-800 {
    --tw-gradient-to: #1e40af var(--tw-gradient-to-position);
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.max-w-7xl {
    max-width: 80rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.flex {
    display: flex;
}

.h-16 {
    height: 4rem;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.hidden {
    display: none;
}

@media (min-width: 1024px) {
    .lg\:block {
        display: block;
    }
}

@media (min-width: 768px) {
    .md\:block {
        display: block;
    }
}

@media (min-width: 1024px) {
    .lg\:hidden {
        display: none;
    }
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.ml-10 {
    margin-left: 2.5rem;
}

.items-baseline {
    align-items: baseline;
}

.ml-4 {
    margin-left: 1rem;
}

@media (min-width: 768px) {
    .md\:ml-6 {
        margin-left: 1.5rem;
    }
}

button {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

button {
    text-transform: none;
}

button {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}

button {
    cursor: pointer;
}

.inline-flex {
    display: inline-flex;
}

.justify-center {
    justify-content: center;
}

.rounded-md {
    border-radius: calc(var(--radius) - 2px);
}

.bg-blue-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

.p-2 {
    padding: 0.5rem;
}

.text-blue-100 {
    --tw-text-opacity: 1;
    color: rgb(219 234 254 / var(--tw-text-opacity, 1));
}

.hover\:bg-blue-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.hover\:text-white:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

a {
    color: inherit;
    text-decoration: inherit;
}

.relative {
    position: relative;
}

.space-x-4> :not([hidden])~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.font-medium {
    font-weight: 500;
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.duration-200 {
    transition-duration: 200ms;
}

.duration-200 {
    animation-duration: 200ms;
}

.bg-blue-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}

.space-x-3> :not([hidden])~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.75rem * var(--tw-space-x-reverse));
    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

.hover\:bg-blue-400:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
}

svg {
    display: block;
    vertical-align: middle;
}

.block {
    display: block;
}

.h-6 {
    height: 1.5rem;
}

.w-6 {
    width: 1.5rem;
}

.h-8 {
    height: 2rem;
}

.w-8 {
    width: 2rem;
}

.rounded-lg {
    border-radius: var(--radius);
}

.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.from-yellow-400 {
    --tw-gradient-from: #facc15 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(250 204 21 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-orange-500 {
    --tw-gradient-to: #f97316 var(--tw-gradient-to-position);
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.font-bold {
    font-weight: 700;
}

.space-x-2> :not([hidden])~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.whitespace-nowrap {
    white-space: nowrap;
}

.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.invisible {
    visibility: hidden;
}

.absolute {
    position: absolute;
}

.left-0 {
    left: 0px;
}

.z-50 {
    z-index: 50;
}

.mt-2 {
    margin-top: 0.5rem;
}

.w-48 {
    width: 12rem;
}

.opacity-0 {
    opacity: 0;
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.group:hover .group-hover\:visible {
    visibility: visible;
}

.group:hover .group-hover\:opacity-100 {
    opacity: 1;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.ml-1 {
    margin-left: 0.25rem;
}

.h-4 {
    height: 1rem;
}

.w-4 {
    width: 1rem;
}

.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.text-gray-700 {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.hover\:bg-gray-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.hover\:text-gray-900:hover {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

body.mobile-nav-open {
    overflow: hidden;
}

.container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

.wide-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

/* Override Tailwind max-width classes for full width */
.max-w-7xl {
    max-width: 100% !important;
    width: 100% !important;
}

/* Header Styles - Updated for new design */
.hero-header {
    background-color: #2055DE;
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Logo Styling */
.site-logo img {
    max-height: 38px;
    max-width: 200px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Navigation Search Bar */
.nav-search-form {
    position: relative;
    margin-left: 3rem;
}

.nav-search-wrapper {
    display: flex;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav-search-wrapper:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.nav-search-input {
    background: transparent;
    border: none;
    padding: 8px 12px;
    color: #374151;
    font-size: 14px;
    width: 280px;
    outline: none;
}

.nav-search-input::placeholder {
    color: #9ca3af;
}

.nav-search-submit {
    background: #f3f4f6;
    border: none;
    padding: 8px 12px;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-search-submit:hover {
    background: #e5e7eb;
    color: #374151;
}

/* Responsive Navigation Search */
@media (max-width: 1024px) {
    .nav-search-input {
        width: 200px;
    }
}

@media (max-width: 768px) {
    .nav-search-form {
        display: none;
    }
}

/* Mobile Search Dropdown */
.mobile-search-dropdown {
    position: fixed;
    top: 64px;
    /* Header height */
    left: 0;
    right: 0;
    background: white;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 999;
    animation: slideDown 0.3s ease-out;
}

/* Hide mobile search icon on desktop */
@media (min-width: 1024px) {
    .mobile-search-icon {
        display: none !important;
    }

    .mobile-search-dropdown {
        display: none !important;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-search-dropdown-content {
    padding: 1rem;
}

.mobile-search-dropdown-wrapper {
    display: flex;
    background: #f8fafc;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.mobile-search-dropdown-wrapper:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.mobile-search-dropdown-input {
    background: transparent;
    border: none;
    padding: 12px 16px;
    color: #374151;
    font-size: 16px;
    flex: 1;
    outline: none;
}

.mobile-search-dropdown-input::placeholder {
    color: #9ca3af;
}

.mobile-search-dropdown-submit {
    background: #3b82f6;
    border: none;
    padding: 12px 20px;
    color: white;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.mobile-search-dropdown-submit:hover {
    background: #2563eb;
}

/* Show search bar in sticky header on all pages */
.hero-header .nav-search-form {
    display: block !important;
}

/* Hide search bar on homepage initially, show after scroll */
.home .hero-header .nav-search-form {
    display: none !important;
}

/* Show search bar after hero section on homepage */
.home .hero-header.scrolled .nav-search-form {
    display: block !important;
}

/* Hide mobile search icon on homepage initially */
.home .mobile-search-icon {
    display: none;
}

/* Show mobile search icon after hero section on homepage */
.home .hero-header.scrolled .mobile-search-icon {
    display: inline-flex;
}

/* Logo styling without background */
.site-logo {
    display: inline-block;
}

@media (max-width: 768px) {
    .site-logo img {
        max-height: 40px;
        max-width: 150px;
    }
}

@media (max-width: 480px) {
    .site-logo img {
        max-height: 35px;
        max-width: 120px;
    }
}

/* Hero Section */
.hero-section {
    background-image: linear-gradient(to right bottom, rgb(37, 99, 235), rgb(29, 78, 216), rgb(126, 34, 206));
    color: white;
    text-align: center;
    padding: 5rem 0;
}

.hero-content h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 3rem;
    color: #bfdbfe;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Search Form */
.hero-search {
    max-width: 56rem;
    margin: 0 auto 4rem;
    position: relative;
}

.search-form {
    display: flex;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    max-width: 100%;
}

.search-form input[type="search"] {
    flex: 1;
    padding: 1rem 1.5rem;
    border: none;
    font-size: 1.1rem;
    color: #333;
    outline: none;
    background: transparent;
}

.search-form input[type="search"]::placeholder {
    color: #9ca3af;
}

.search-form button {
    background: #f97316;
    color: white;
    border: none;
    padding: 1rem 2rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0 12px 12px 0;
}

.search-form button:hover {
    background: #ea580c;
}

/* Category Grid */
.grid {
    display: grid;
}

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

.gap-6 {
    gap: 1.5rem;
}

.max-w-4xl {
    max-width: 56rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.text-center {
    text-align: center;
}

.group {
    position: relative;
}

.cursor-pointer {
    cursor: pointer;
}

.block {
    display: block;
}

.bg-white {
    background-color: white;
}

.bg-opacity-10 {
    background-color: rgba(255, 255, 255, 0.1);
}

.backdrop-blur-sm {
    backdrop-filter: blur(4px);
}

.rounded-xl {
    border-radius: 0.75rem;
}

.p-6 {
    padding: 1.5rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.duration-300 {
    transition-duration: 300ms;
}

.group:hover .group-hover\:bg-opacity-20 {
    background-color: rgba(255, 255, 255, 0.2);
}

.group:hover .group-hover\:scale-105 {
    transform: scale(1.05);
}

.h-12 {
    height: 3rem;
}

.w-12 {
    width: 3rem;
}

.text-blue-100 {
    color: rgb(219, 234, 254);
}

.group:hover .group-hover\:text-white {
    color: white;
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.font-semibold {
    font-weight: 600;
}

h3 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}


/* Main Content Area */
.site-main {
    padding: 0;
    background: transparent;
}

.section-title {
    text-align: left;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 36px;
    color: rgb(17, 24, 39);
    margin-bottom: 3rem;
}

/* Worksheets Section */
.worksheets-section {
    padding: 3rem 0;
    background: #f8fafc;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.section-header .section-title {
    margin: 0;
    color: #111827;
    font-weight: 300;
    font-size: 24px;
    line-height: 1.2;
    flex: 1 1 auto;
}

@media (max-width: 640px) {
    .section-header {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
}

.view-all-link {
    display: inline-block;
    color: #ffffff;
    background-color: #007ee5;
    border: 1px solid #007ee5;
    text-decoration: none;
    font-weight: 600;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    white-space: nowrap;
}

.view-all-link:hover {
    background-color: #0069bf;
    border-color: #0062b2;
    text-decoration: none;
}

/* Category Grid */
.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 16px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    text-decoration: none;
    color: #e0f2fe;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.category-card:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-4px);
    color: #ffffff;
    text-decoration: none;
}

.category-icon {
    margin-bottom: 12px;
    color: #b3e5fc;
    transition: color 0.3s ease;
}

.category-card:hover .category-icon {
    color: #ffffff;
}

.category-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .category-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .category-card {
        padding: 20px 12px;
    }

    .category-title {
        font-size: 14px;
    }
}

/* Grid Layout - Always 5 columns on desktop */
.grid-col {
    float: left;
    width: 20%;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding: 0 5px;
}

/* Responsive Grid Layout - Keep 5 columns on desktop */
@media (max-width: 1200px) {
    .grid-col {
        width: 20%;
        /* 5 columns */
        flex-basis: 20%;
    }
}

@media (max-width: 992px) {
    .grid-col {
        width: 25%;
        /* 4 columns */
        flex-basis: 25%;
    }
}

@media (max-width: 768px) {
    .grid-col {
        width: 33.333%;
        /* 3 columns */
        flex-basis: 33.333%;
    }
}

@media (max-width: 480px) {
    .grid-col {
        width: 50%;
        /* 2 columns */
        flex-basis: 50%;
    }
}

/* Worksheet Grid - 5 columns on desktop */
.worksheets-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px;
    margin-bottom: 1rem;
    align-items: stretch;
}

/* Ensure 5 columns on desktop for worksheets-grid */
@media (min-width: 1200px) {
    .worksheets-grid .grid-col {
        width: 20%;
        /* 5 columns */
        flex-basis: 20%;
        padding: 0 5px;
        margin-bottom: 20px;
    }
}

/* Responsive Grid for worksheets-grid */
@media (max-width: 1200px) {
    .worksheets-grid .grid-col {
        width: 20%;
        /* 5 columns */
        flex-basis: 20%;
        padding: 0 5px;
        margin-bottom: 20px;
    }
}

@media (max-width: 992px) {
    .worksheets-grid .grid-col {
        width: 25%;
        /* 4 columns */
        flex-basis: 25%;
        padding: 0 5px;
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .worksheets-grid .grid-col {
        width: 33.333%;
        /* 3 columns */
        flex-basis: 33.333%;
        padding: 0 5px;
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {
    .worksheets-grid .grid-col {
        width: 50%;
        /* 2 columns */
        flex-basis: 50%;
        padding: 0 5px;
        margin-bottom: 20px;
    }
}

/* Fixed Masonry Layout - Proper brick arrangement */
.worksheets-masonry {
    column-count: 5;
    column-gap: 20px;
    margin-bottom: 1rem;
    width: 100%;
    column-fill: balance;
    orphans: 1;
    widows: 1;
}

.masonry-item {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 20px;
    display: inline-block;
    width: 100%;
    vertical-align: top;
}

/* Grid item styling for masonry */
.worksheets-masonry .grid-item {
    width: 100%;
    height: auto;
    display: block;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 0;
}

.worksheets-masonry .grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
}

/* Thumbnail styling */
.worksheets-masonry .grid-thumbnail {
    height: 200px;
    overflow: hidden;
    position: relative;
    display: block;
}

.worksheets-masonry .grid-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.worksheets-masonry .grid-item:hover .grid-thumbnail img {
    transform: scale(1.05);
}

/* Text area styling */
.worksheets-masonry .grid-text {
    padding: 15px;
    display: block;
}

/* Compact tags under cards */
.worksheets-masonry .grid-tags {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.worksheets-masonry .grid-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.75rem;
    line-height: 1.2;
    background-color: #f3f4f6;
    color: #374151;
    text-decoration: none;
    white-space: normal;
    max-width: 100%;
}

.worksheets-masonry .grid-tag:hover {
    background-color: #dbeafe;
    color: #1d4ed8;
}

/* Responsive Masonry - Column Layout */
@media (max-width: 1200px) {
    .worksheets-masonry {
        column-count: 5;
        column-gap: 18px;
    }
}

@media (max-width: 992px) {
    .worksheets-masonry {
        column-count: 4;
        column-gap: 16px;
    }
}

@media (max-width: 768px) {
    .worksheets-masonry {
        column-count: 1;
        column-gap: 15px;
    }
}

@media (max-width: 480px) {
    .worksheets-masonry {
        column-count: 1;
        column-gap: 12px;
    }
}

/* Featured Worksheets: limit to 4 items on mobile */
@media (max-width: 768px) {
    .featured-worksheets .worksheets-masonry .masonry-item:nth-child(n+5) {
        display: none !important;
    }
}

/* Reduce gap between consecutive sections (e.g., Featured → Latest) */
.worksheets-section+.worksheets-section {
    padding-top: 1.25rem;
}

/* Grid Item */
.grid-item {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    margin-bottom: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Grid Item within Grid Column */
.grid-col .grid-item {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0;
}

.grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
    color: inherit;
}

/* Grid Thumbnail */
.grid-thumbnail {
    overflow: hidden;
    height: auto !important;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 10px;
    transition: .15s linear;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 19%), 0 3px 10px 0 rgb(0 0 0 / 19%);
    position: relative;
}

/* Grid Instant Options */
.grid-instant-option {
    float: right;
    right: 0;
    display: flex;
    width: 15%;
    position: absolute;
    height: 100%;
    z-index: 10;
}

.grid-item:hover .grid-instant-option {
    background: linear-gradient(90deg, rgba(8, 25, 43, 0), rgba(8, 25, 43, .3));
}

/* Grid Text */
.grid-text {
    line-height: 1.2;
    padding-bottom: 30px;
    margin-top: 8px;
    padding-left: 15px;
    flex-grow: 1;
    display: flex;
    align-items: flex-end;
}

/* Grid Link */
.grid-link {
    font-size: 14px;
    font-weight: 400;
    color: #000;
    text-transform: capitalize;
    text-decoration: none;
}

.grid-link:hover {
    color: #23527c;
    text-decoration: none;
}

/* Grid Image */
.grid-image {
    display: block;
    width: 100%;
    border-radius: 3px;
}

.top-20-grid-image {
    height: auto;
}

/* Wishlist Styles */
.grid-whishlist {
    float: right;
    cursor: pointer;
}

.grid-whishlist-svg {
    position: absolute;
    top: 11px;
    right: 8px;
    float: right;
    z-index: 1;
    display: none;
    border-radius: 3px;
    background: rgb(255 255 255/1);
    padding: 2px;
}

.grid-item:hover .grid-whishlist-svg {
    display: block;
}

/* Download Styles */
.instant-download-svg {
    fill: rgb(255 255 255/1);
    opacity: 90%;
    position: absolute;
    top: 45px;
    right: 8px;
    display: none;
    cursor: pointer;
    border-radius: 3px;
    background: #f4921f;
    padding: 3px;
}

.grid-item:hover .instant-download-svg {
    display: block;
    background: #c2410c;
    /* Darker orange for better contrast (was #f4921f) */
}


/* SVG Performance */
.grid-instant-option svg {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Tooltip Styles */
.wishlist-tooltip .wishlist-tooltiptext {
    visibility: hidden;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    padding: 4px;
    position: absolute;
    font-size: 10px;
    left: -35px;
    right: -6px;
    top: 10px;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.5s;
}

.wishlist-tooltiptext:before {
    content: "";
    position: absolute;
    right: -4px;
    top: 30%;
    transform: rotate(180deg);
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #333;
}

.wishlist-tooltip:hover .wishlist-tooltiptext {
    visibility: visible;
    opacity: 1;
    z-index: 10;
}

.dwd-tooltip .dwd-tooltiptext {
    visibility: hidden;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    padding: 4px;
    position: absolute;
    font-size: 10px;
    left: -30px;
    right: 0px;
    top: 44px;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.5s;
}

.dwd-tooltiptext:before {
    content: "";
    position: absolute;
    right: -4px;
    top: 30%;
    transform: rotate(180deg);
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #333;
}

.dwd-tooltip:hover .dwd-tooltiptext {
    visibility: visible;
    opacity: 1;
}



.worksheet-content {
    padding: 1.5rem;
}

.worksheet-category {
    background: #dbeafe;
    color: #1d4ed8;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    display: inline-block;
    margin-bottom: 1rem;
}

.worksheet-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.worksheet-excerpt {
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.worksheet-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.worksheet-tag {
    background: #f3f4f6;
    color: #374151;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    text-decoration: none;
}

.worksheet-tag:hover {
    background: #e5e7eb;
    color: #374151;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;
    margin-bottom: 4rem;
}

.pagination-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.pagination-list li {
    display: inline-block;
}

.pagination a,
.pagination span {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    color: #374151;
    background: white;
    border: 1px solid #d1d5db;
    transition: all 0.3s ease;
    min-width: 44px;
    text-align: center;
    display: inline-block;
}

.pagination a:hover {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.pagination .pagination-current {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.pagination .pagination-dots {
    padding: 0.75rem 0.5rem;
    color: #6b7280;
    background: transparent;
    border: none;
    font-weight: bold;
}

/* Mobile Pagination */
@media (max-width: 768px) {
    .pagination {
        margin-top: 2rem;
        margin-bottom: 2rem;
        padding: 0 1rem;
    }

    .pagination-list {
        gap: 0.25rem;
    }

    .pagination a,
    .pagination span {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        min-width: 40px;
    }

    .pagination .pagination-dots {
        padding: 0.5rem 0.25rem;
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .pagination-list {
        gap: 0.125rem;
    }

    .pagination a,
    .pagination span {
        padding: 0.375rem 0.5rem;
        font-size: 0.8rem;
        min-width: 36px;
    }

    .pagination .pagination-dots {
        padding: 0.375rem 0.125rem;
        font-size: 0.8rem;
    }
}

/* Worksheets Page: Hero */
/* Utility classes to support Tailwind-like hero */
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-blue-600 {
    --tw-gradient-from: #2563eb var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-blue-700 {
    --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);
}

.text-white {
    color: #ffffff;
}

.text-blue-100 {
    color: #dbeafe;
}

.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.max-w-7xl {
    max-width: 80rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

.font-bold {
    font-weight: 700;
}

.mb-4 {
    margin-bottom: 1rem;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

/* Exact background + box properties requested for hero */
.worksheets-hero-bar {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 24px;
    text-align: start;
    text-transform: none;
    white-space: normal;
    background-attachment: scroll;
    background-color: #2055DE;
    background-image: none;
    background-position: 0% 0%;
    background-repeat: repeat;
    color: rgb(255, 255, 255);
    min-height: 120px;
    margin: 0;
    padding: 48px 0;
    position: static;
    display: block;
    overflow: visible;
    visibility: visible;
    margin-bottom: 2rem;
}

/* Responsive hero bar for mobile */
@media (max-width: 768px) {
    .worksheets-hero-bar {
        padding: 24px 0;
        min-height: 80px;
    }

    .worksheets-hero-bar h1 {
        font-size: 2rem !important;
        line-height: 1.2;
        margin-bottom: 12px;
    }

    .worksheets-hero-bar p {
        font-size: 1rem !important;
        line-height: 1.4;
    }
}

/* Override Tailwind py-12 for hero bars to be responsive */
.py-12 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

@media (max-width: 768px) {
    .py-12 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

/* SEO Internal Linking Styles */
.auto-internal-link {
    color: #3b82f6 !important;
    text-decoration: underline !important;
    font-weight: 500 !important;
    transition: all 0.3s ease;
}

.auto-internal-link:hover {
    color: #1d4ed8 !important;
    text-decoration: none !important;
    background-color: #dbeafe;
    padding: 2px 4px;
    border-radius: 3px;
}

.seo-internal-link {
    color: #059669 !important;
    text-decoration: underline !important;
    font-weight: 500 !important;
    transition: all 0.3s ease;
}

.seo-internal-link:hover {
    color: #047857 !important;
    text-decoration: none !important;
    background-color: #d1fae5;
    padding: 2px 4px;
    border-radius: 3px;
}

/* Breadcrumb bar utility and styles */
.bg-white {
    background-color: #ffffff;
}

.border-b {
    border-bottom: 1px solid #e5e7eb;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.breadcrumbs {
    font-size: 14px;
    color: #111827;
}

.breadcrumbs a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

.breadcrumbs .separator {
    margin: 0 .5rem;
    color: #9ca3af;
}

.breadcrumbs .current {
    color: #6b7280;
}

/* Filters Bar */
.filters-bar {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    margin: 16px 0 24px 0;
}

.filters-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr auto;
    gap: 12px;
    align-items: center;
}

.filter-group select,
.filter-group input[type="search"] {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #111827;
}

.filter-actions {
    display: flex;
    gap: 8px;
}

.btn-primary,
.btn-secondary {
    display: inline-block;
    padding: 10px 14px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
}

.btn-primary {
    background: #007ee5;
    color: #fff;
    border-color: #007ee5;
}

.btn-primary:hover {
    background: #0069bf;
    border-color: #0062b2;
    color: #fff;
}

.btn-secondary {
    background: #f3f4f6;
    color: #111827;
    border-color: #d1d5db;
}

.btn-secondary:hover {
    background: #e5e7eb;
    color: #111827;
}

@media (max-width: 1024px) {
    .filters-row {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .filters-row {
        grid-template-columns: 1fr;
    }
}

/* Single Post Styles */
.single-worksheet {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.single-worksheet-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.single-worksheet-content {
    padding: 2rem;
}

.single-worksheet-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1rem;
}

.worksheet-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    align-items: center;
}

.download-btn {
    background: #10b981;
    color: white;
    padding: 1rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.download-btn:hover {
    background: #059669;
    transform: translateY(-2px);
    color: white;
}

/* Enhanced Download Free PDF button */
.bg-gradient-to-r.from-orange-500.to-orange-600 {
    margin-top: 1rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(249, 115, 22, 0.3);
    border: 2px solid transparent;
    background-clip: padding-box;
}

.bg-gradient-to-r.from-orange-500.to-orange-600:hover {
    box-shadow: 0 12px 35px rgba(249, 115, 22, 0.4);
    transform: translateY(-3px) scale(1.02);
}

.bg-gradient-to-r.from-orange-500.to-orange-600:active {
    transform: translateY(-1px) scale(0.98);
}

/* Add pulse animation for attention */
@keyframes pw-pulse {

    0%,
    100% {
        box-shadow: 0 8px 25px rgba(249, 115, 22, 0.3);
    }

    50% {
        box-shadow: 0 8px 25px rgba(249, 115, 22, 0.5);
    }
}

.bg-gradient-to-r.from-orange-500.to-orange-600 {
    animation: pw-pulse 2s infinite;
}

.bg-gradient-to-r.from-orange-500.to-orange-600:hover {
    animation: none;
}

/* Disabled download button */
#download-btn:disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

#download-btn:disabled:hover {
    transform: none !important;
    box-shadow: 0 8px 25px rgba(249, 115, 22, 0.3) !important;
}

/* Countdown Area Styles */
#countdown-area {
    animation: slideInUp 0.5s ease-out;
}

#countdown-number {
    font-size: 3rem;
    font-weight: 900;
    color: #3b82f6;
    text-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
    animation: pulse 1s infinite;
}

#download-ready {
    animation: fadeInUp 0.6s ease-out;
}

#final-download-btn {
    animation: bounceIn 0.8s ease-out;
}

#final-download-btn span {
    color: white !important;
    font-weight: bold;
}

/* Animations */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    70% {
        transform: scale(0.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* Engagement boosters */
#countdown-area:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

#final-download-btn:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 15px 35px rgba(34, 197, 94, 0.4);
}

#final-download-btn {
    animation: pulse 2s infinite;
}

/* Footer Styles */
.bg-gray-900 {
    background-color: rgb(17 24 39);
}

.text-white {
    color: rgb(255 255 255);
}

.max-w-7xl {
    max-width: 80rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.gap-8 {
    gap: 2rem;
}

.col-span-1 {
    grid-column: span 1 / span 1;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.font-semibold {
    font-weight: 600;
}

.mb-4 {
    margin-bottom: 1rem;
}

.text-gray-300 {
    color: rgb(209 213 219);
}

.text-gray-400 {
    color: rgb(156 163 175);
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.space-y-2> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-x-2> :not([hidden])~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-4> :not([hidden])~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.w-8 {
    width: 2rem;
}

.h-8 {
    height: 2rem;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.from-yellow-400 {
    --tw-gradient-from: #facc15;
    --tw-gradient-to: rgb(250 204 21 / 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-orange-500 {
    --tw-gradient-to: #f97316;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.font-bold {
    font-weight: 700;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.h-5 {
    height: 1.25rem;
}

.w-5 {
    width: 1.25rem;
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.duration-200 {
    transition-duration: 200ms;
}

.hover\:text-white:hover {
    color: rgb(255 255 255);
}

.border-t {
    border-top-width: 1px;
}

.border-gray-800 {
    border-color: rgb(31 41 55);
}

.mt-8 {
    margin-top: 2rem;
}

.pt-8 {
    padding-top: 2rem;
}

.flex-col {
    flex-direction: column;
}

.justify-between {
    justify-content: space-between;
}

.mt-4 {
    margin-top: 1rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.font-medium {
    font-weight: 500;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.flex-1 {
    flex: 1 1 0%;
}

.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.bg-gray-800 {
    background-color: rgb(31 41 55);
}

.border {
    border-width: 1px;
}

.border-gray-700 {
    border-color: rgb(55 65 81);
}

.rounded-l-lg {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

.rounded-r-lg {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.bg-blue-600 {
    background-color: rgb(37 99 235);
}

.hover\:bg-blue-700:hover {
    background-color: rgb(29 78 216);
}

.text-md {
    font-size: 1rem;
    line-height: 1.5rem;
}

.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.focus\:ring-2:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-blue-500:focus {
    --tw-ring-color: rgb(59 130 246);
}

/* CSS Variables for Tailwind */
:root {
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-ring-inset: ;
}

/* Responsive Footer */
@media (min-width: 640px) {
    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:flex-row {
        flex-direction: row;
    }

    .md\:mt-0 {
        margin-top: 0px;
    }
}

@media (min-width: 1024px) {
    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .lg\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .lg\:col-span-1 {
        grid-column: span 1 / span 1;
    }
}

/* Footer Grid Override */
footer .grid {
    display: grid !important;
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

/* Remove list bullets from footer */
footer ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

footer li {
    list-style: none !important;
}

/* Footer bottom links spacing */
footer .space-x-6> :not([hidden])~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1.5rem * var(--tw-space-x-reverse));
    margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}

/* Footer logo sizing */
footer .custom-logo {
    width: auto !important;
    height: 1.75rem !important;
    object-fit: contain !important;
    max-width: 200px !important;
}

@media (min-width: 768px) {
    footer .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1024px) {
    footer .grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

#final-download-btn {
    background: linear-gradient(to right, #10b981, #059669) !important;
}

#final-download-btn:hover {
    background: linear-gradient(to right, #059669, #047857) !important;
}

#final-download-btn,
#final-download-btn span,
#final-download-btn svg {
    color: white !important;
}

/* Product Title Styling */
.product-title {
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-style: normal;
    font-weight: 400;
    font-size: 26px;
    line-height: 35px;
    color: rgb(33, 37, 41);
    margin: 0;
    padding: 8px 0 10px 0;
    /* small top/bottom padding to visually center within header */
    border-radius: 0;
}

/* Related Worksheets Card Styling */
.bg-white {
    background-color: #ffffff;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.hover\:shadow-xl:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.duration-300 {
    transition-duration: 300ms;
}

.transform {
    transform: translateZ(0);
}

.hover\:-translate-y-1:hover {
    transform: translateY(-0.25rem);
}

.overflow-hidden {
    overflow: hidden;
}

.cursor-pointer {
    cursor: pointer;
}

.relative {
    position: relative;
}

.h-48 {
    height: 12rem;
}

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.object-cover {
    object-fit: cover;
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.hover\:scale-110:hover {
    transform: scale(1.1);
}

.absolute {
    position: absolute;
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.from-black\/50 {
    --tw-gradient-from: rgba(0, 0, 0, 0.5);
    --tw-gradient-to: rgba(0, 0, 0, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-transparent {
    --tw-gradient-to: transparent;
}

.opacity-0 {
    opacity: 0;
}

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.hover\:opacity-100:hover {
    opacity: 1;
}

.bottom-4 {
    bottom: 1rem;
}

.left-4 {
    left: 1rem;
}

.right-4 {
    right: 1rem;
}

.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.text-white {
    color: #ffffff;
}

.font-semibold {
    font-weight: 600;
}

.h-5 {
    height: 1.25rem;
}

.w-5 {
    width: 1.25rem;
}

.mr-2 {
    margin-right: 0.5rem;
}

.p-6 {
    padding: 1.5rem;
}

.justify-between {
    justify-content: space-between;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.inline-block {
    display: inline-block;
}

.bg-blue-100 {
    background-color: rgb(219 234 254);
}

.text-blue-800 {
    color: rgb(30 64 175);
}

.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.px-2\.5 {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}

.py-0\.5 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}

.rounded-full {
    border-radius: 9999px;
}

.hover\:bg-blue-200:hover {
    background-color: rgb(191 219 254);
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-gray-900 {
    color: rgb(17 24 39);
}

.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.hover\:text-blue-600:hover {
    color: rgb(37 99 235);
}

.duration-200 {
    transition-duration: 200ms;
}

.text-gray-600 {
    color: rgb(75 85 99);
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.space-x-1> :not([hidden])~ :not([hidden]) {
    margin-left: 0.25rem;
}

.h-4 {
    height: 1rem;
}

.w-4 {
    width: 1rem;
}

.text-gray-400 {
    color: rgb(156 163 175);
}

.flex-wrap {
    flex-wrap: wrap;
}

.gap-1 {
    gap: 0.25rem;
}

.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.bg-gray-100 {
    background-color: rgb(243 244 246);
}

.text-gray-500 {
    color: rgb(107 114 128);
}

.rounded-md {
    border-radius: 0.375rem;
}

.hover\:bg-blue-100:hover {
    background-color: rgb(219 234 254);
}

.hover\:text-blue-600:hover {
    color: rgb(37 99 235);
}

/* Footer */
.site-footer {
    background: #1f2937;
    color: #9ca3af;
    text-align: center;
    padding: 2rem 0;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1001;
    transition: all 0.3s ease;
}

@media (max-width: 1024px) {
    .mobile-menu-toggle {
        display: inline-flex !important;
    }
}

/* Make mobile hamburger icon highly visible */
.mobile-menu-toggle {
    color: #ffffff;
}

.mobile-menu-toggle svg {
    stroke: #ffffff;
}

/* Force display on mobile devices */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: inline-flex !important;
    }
}

.mobile-menu-toggle.active svg:first-child {
    display: none;
}

.mobile-menu-toggle.active svg:last-child {
    display: block;
}

.mobile-menu-toggle svg:first-child {
    display: block;
}

.mobile-menu-toggle svg:last-child {
    display: none;
}

.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;
}

/* Mobile Navigation Overlay */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-nav-overlay.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
}

.mobile-nav-overlay:not(.hidden) {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.mobile-nav-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 85%;
    max-width: 320px;
    height: 100%;
    background: white;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.mobile-nav-overlay:not(.hidden) .mobile-nav-content {
    transform: translateX(0);
}

.mobile-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: linear-gradient(135deg, #1e40af 0%, #3730a3 100%);
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-logo {
    display: flex;
    align-items: center;
}

.mobile-site-logo img {
    max-height: 30px;
    max-width: 150px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.mobile-site-logo {
    display: inline-block;
}

.mobile-logo .logo-icon {
    width: 32px;
    height: 32px;
    background: #f97316;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-weight: bold;
    font-size: 18px;
    margin-right: 10px;
}

.mobile-logo .site-title {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
}

.mobile-nav-close {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

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


/* Mobile Search Bar */
.mobile-search {
    padding: 1rem;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}

.mobile-search-form {
    display: flex;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    align-items: center;
    min-width: 0;
    /* allow children to shrink */
}

.mobile-search-form input[type="search"] {
    flex: 1;
    padding: 0.75rem 1rem;
    border: none;
    font-size: 1rem;
    color: #333;
    outline: none;
    min-width: 0;
    /* prevents overflow when button is large */
}

.mobile-search-form input[type="search"]::placeholder {
    color: #9ca3af;
}

.mobile-search-form button {
    background: #1e40af;
    color: white;
    border: none;
    /* Responsive sizing to fit small devices */
    padding: clamp(0.5rem, 2.5vw, 0.75rem) clamp(0.75rem, 4vw, 1rem);
    font-size: clamp(12px, 3.8vw, 16px);
    cursor: pointer;
    transition: background 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    /* do not stretch, but allow input to take remaining space */
    white-space: nowrap;
}

.mobile-search-form button:hover {
    background: #1d4ed8;
}

.mobile-navigation {
    padding: 1rem 0;
}

.mobile-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu li {
    margin: 0;
}

.mobile-menu a {
    display: block;
    padding: 1rem 1.5rem;
    color: #1f2937;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid #e5e7eb;
    transition: background 0.3s ease;
}

.mobile-menu a:hover {
    background: #f3f4f6;
    color: #1e40af;
}

/* Mobile Submenu */
.mobile-menu-item-has-children>a::after {
    content: "▼";
    float: right;
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.mobile-menu-item-has-children.active>a::after {
    transform: rotate(180deg);
}

.mobile-sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #f8fafc;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.mobile-menu-item-has-children.active .mobile-sub-menu {
    max-height: 500px;
}

.mobile-sub-menu a {
    padding: 0.75rem 2.5rem;
    color: #6b7280;
    font-size: 0.9rem;
    border-bottom: 1px solid #e5e7eb;
}

.mobile-sub-menu a:hover {
    background: #e5e7eb;
    color: #1e40af;
}

/* Mobile Action Buttons */
.mobile-actions {
    padding: 1rem;
    border-top: 1px solid #e5e7eb;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mobile-action-btn {
    display: block;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.mobile-action-link {
    background: transparent;
    color: #1e40af;
    border: 1px solid #1e40af;
}

.mobile-action-link:hover {
    background: #1e40af;
    color: white;
}

.mobile-action-primary {
    background: #1e40af;
    color: white;
}

.mobile-action-primary:hover {
    background: #1d4ed8;
    color: white;
}


/* Responsive Design */
@media (max-width: 1024px) {
    .mobile-menu-toggle {
        display: block;
    }
}

@media (max-width: 768px) {
    .header-content {
        justify-content: space-between;
        align-items: center;
    }

    .main-navigation {
        display: none;
    }

    .header-buttons {
        display: none;
    }

    /* Mobile Logo Styling */
    .site-logo {
        padding: 0;
        margin: 0;
        border-radius: 4px;
        max-width: fit-content;
        width: auto;
        height: fit-content;
        line-height: 1;
    }

    .site-logo img {
        max-height: 85px;
        max-width: 250px;
    }

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

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

    .search-form {
        flex-direction: column;
    }

    .search-form button {
        justify-content: center;
    }

    .category-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .worksheets-grid {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -5px;
    }

    .grid-col {
        width: 20%;
        padding: 0 5px;
        margin-bottom: 20px;
    }
}

/* Extra Small Screens */
@media (max-width: 480px) {
    .site-logo {
        padding: 0;
        margin: 0;
        border-radius: 4px;
        max-width: fit-content;
        width: auto;
        height: fit-content;
        line-height: 1;
    }

    .site-logo img {
        max-height: 75px;
        max-width: 220px;
    }
}

/* WordPress Specific Styles */
.wp-caption {
    max-width: 100%;
}

.wp-caption-text {
    font-size: 0.9rem;
    color: #6b7280;
    text-align: center;
    padding: 0.5rem;
}

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

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

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

/* Search Results */
.search-results-title {
    text-align: center;
    margin-bottom: 2rem;
    color: #374151;
}

.search-results-title .search-query {
    color: #3b82f6;
    font-weight: 600;
}

/* 404 Page */
.error-404 {
    text-align: center;
    padding: 4rem 0;
}

.error-404 h1 {
    font-size: 6rem;
    color: #3b82f6;
    margin-bottom: 1rem;
}

.error-404 h2 {
    color: #374151;
    margin-bottom: 1rem;
}

.error-404 p {
    color: #6b7280;
    margin-bottom: 2rem;
}

/* Loading Animation */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Enhanced Thumbnail Navigation */
#pw-thumbs {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

#pw-thumbs::-webkit-scrollbar {
    height: 6px;
}

#pw-thumbs::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

#pw-thumbs::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

#pw-thumbs::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

#pw-thumbs button {
    transition: all 0.3s ease;
    position: relative;
    background-color: #f8fafc !important;
    border: 2px solid #e2e8f0 !important;
}

#pw-thumbs button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

#pw-thumbs button.active {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    background-color: #f8fafc !important;
}

#pw-thumbs button img {
    background-color: #f8fafc !important;
}

/* Enhanced Dots Navigation */
#pw-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 20;
    pointer-events: auto;
}

#pw-dots button {
    transition: all 0.3s ease;
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.4);
    pointer-events: auto;
}

#pw-dots button:hover {
    transform: scale(1.3);
    background-color: rgba(0, 0, 0, 0.6);
}

#pw-dots button.active {
    background-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
    transform: scale(1.2);
}

/* Enhanced Navigation Buttons */
#pw-prev-btn,
#pw-next-btn {
    transition: background-color 0.3s ease;
    backdrop-filter: blur(4px);
    position: absolute;
    z-index: 20;
    pointer-events: auto;
}

#pw-prev-btn:hover,
#pw-next-btn:hover {
    background-color: rgba(0, 0, 0, 0.8) !important;
    pointer-events: auto;
}

/* Fullscreen button improvements */
#pw-zoom-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 20;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
}

#pw-zoom-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
}

/* Single page gallery utilities (subset) */
.max-w-7xl {
    max-width: 80rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.gap-8 {
    gap: 2rem;
}

@media (min-width: 1024px) {
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:col-span-2 {
        grid-column: span 2 / span 2;
    }

    .lg\:col-span-1 {
        grid-column: span 1 / span 1;
    }
}

.rounded-lg {
    border-radius: 12px;
}

.shadow-sm {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.overflow-hidden {
    overflow: hidden;
}

.relative {
    position: relative;
}

.h-96 {
    height: 24rem;
}

@media (min-width: 768px) {
    .md\:h\[500px\] {
        height: 500px;
    }
}

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.object-cover {
    object-fit: contain;
    background-color: #111827;
}

.absolute {
    position: absolute;
}

.left-4 {
    left: 1rem;
}

.right-4 {
    right: 1rem;
}

.top-1\/2 {
    top: 50%;
}

.-translate-y-1\/2 {
    transform: translateY(-50%);
}

.bg-black {
    background-color: #000000;
}

.bg-opacity-50 {
    opacity: .5;
}

.hover\:bg-opacity-75:hover {
    opacity: .75;
}

.text-white {
    color: #ffffff;
}

.p-2 {
    padding: .5rem;
}

.rounded-full {
    border-radius: 9999px;
}

.bottom-4 {
    bottom: 1rem;
}

.left-1\/2 {
    left: 50%;
}

.transform {
    transform: translateZ(0);
}

.-translate-x-1\/2 {
    transform: translateX(-50%);
}

.space-x-2>*+* {
    margin-left: .5rem;
}

.p-4 {
    padding: 1rem;
}

.bg-gray-50 {
    background-color: #f8fafc;
}

.flex {
    display: flex;
}

.overflow-x-auto {
    overflow-x: auto;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.w-20 {
    width: 5rem;
}

.h-16 {
    height: 4rem;
}

.border-2 {
    border-width: 2px;
}

.border-blue-500 {
    border-color: #3b82f6;
}

.border-gray-200 {
    border-color: #e5e7eb;
}

.hover\:border-gray-300:hover {
    border-color: #d1d5db;
}

.bg-white {
    background-color: #ffffff;
}

.text-gray-900 {
    color: #111827;
}

.text-gray-600 {
    color: #4b5563;
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.font-bold {
    font-weight: 700;
}

.space-y-4>*+* {
    margin-top: 1rem;
}

.sticky {
    position: sticky;
}

.top-8 {
    top: 2rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-orange-500 {
    --tw-gradient-from: #f97316;
    --tw-gradient-to: rgba(249, 115, 22, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-orange-600 {
    --tw-gradient-to: #ea580c;
}

.hover\:from-orange-600:hover {
    --tw-gradient-from: #ea580c;
    --tw-gradient-to: rgba(234, 88, 12, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:to-orange-700:hover {
    --tw-gradient-to: #c2410c;
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.transition-all {
    transition: all .2s ease;
}

.hover\:scale-105:hover {
    transform: scale(1.05);
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.text-sm {
    font-size: .875rem;
    line-height: 1.25rem;
}

.border-t {
    border-top: 1px solid #e5e7eb;
}

.gap-6 {
    gap: 1.5rem;
}

.mt-12 {
    margin-top: 3rem;
}

/* Lightbox - Simple and Reliable */
.pw-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.9);
    display: none;
}

/* Lightbox backdrop - simple */
.pw-lightbox-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
}

/* Lightbox buttons with hover effects */
.pw-lightbox-close:hover,
#pw-lightbox-prev:hover,
#pw-lightbox-next:hover {
    background: rgba(0, 0, 0, 0.8) !important;
    transform: scale(1.1);
}

.pw-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
    z-index: 1000001;
    transition: all 0.3s ease;
}

#pw-lightbox-prev,
#pw-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 24px;
    cursor: pointer;
    z-index: 1000001;
    transition: all 0.3s ease;
}

#pw-lightbox-prev {
    left: 20px;
}

#pw-lightbox-next {
    right: 20px;
}

/* Tweak fullscreen trigger spacing */
#pw-zoom-btn {
    box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
    top: 16px;
    right: 16px;
}

/* Slider stage: center and contain images fully */
/* Slider Redesign - Modern & Responsive */

/* 1. Main Stage Container */
.pw-gallery-stage {
    position: relative;
    width: 100%;
    /* Mobile: 4:3 Aspect Ratio for better vertical space usage */
    aspect-ratio: 4/3;
    height: auto !important;
    /* Override fixed height */
    min-height: 300px;
    background: #f8fafc;
    border-radius: 16px;
    /* Increased roundness */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
    margin-bottom: 20px;
}

/* Desktop override for wider look */
@media (min-width: 768px) {
    .pw-gallery-stage {
        aspect-ratio: 16/9;
        /* Widescreen for desktop */
        max-height: 600px;
        /* Cap height on very large screens */
    }
}

/* 3. Navigation Arrows - Modern Floating orbs */
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.nav-arrow:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    color: #2563eb;
    /* Blue accent */
}

.nav-arrow svg {
    width: 24px;
    height: 24px;
    stroke-width: 2.5px;
}

.nav-prev {
    left: 16px;
}

.nav-next {
    right: 16px;
}

/* Mobile optimization for arrows */
@media (max-width: 768px) {
    .nav-arrow {
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.85);
        /* More opaque on mobile */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .nav-arrow svg {
        width: 20px;
        height: 20px;
    }

    .nav-prev {
        left: 12px;
    }

    .nav-next {
        right: 12px;
    }
}

/* 4. Fullscreen Button - Prominent Top Right */
.fullscreen-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    /* Soft square */
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.fullscreen-btn:hover {
    background: white;
    color: #2563eb;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 5. Image Counter (Optional: Clean Badge) */
.image-counter {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    pointer-events: none;
    z-index: 10;
}

/* 6. Thumbnails Strip - Scrollable & Clean */
.thumbnail-container {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    padding-bottom: 8px;
    /* Space for shadow/scroll */
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* Hide scrollbar visually but keep functionality */
    scrollbar-width: thin;
}

.thumbnail-container::-webkit-scrollbar {
    height: 4px;
}

.thumbnail-container::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.thumbnail-btn {
    flex: 0 0 70px;
    /* Fixed width */
    height: 70px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    /* Prepare for active state */
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.7;
    background: #f1f5f9;
}

.thumbnail-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.thumbnail-btn:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.thumbnail-btn.active {
    opacity: 1;
    border-color: #2563eb;
    /* Active Brand Color */
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
    transform: translateY(-2px);
}

.pw-gallery-stage #pw-active-image {
    max-width: 92%;
    max-height: 92%;
    height: auto;
    width: auto;
    object-fit: contain;
    background: transparent;
    display: block;
    /* Enhanced Image protection */
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    pointer-events: none !important;
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    user-drag: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-context-menu: none !important;
    -moz-context-menu: none !important;
    context-menu: none !important;
}

/* Smart protection for worksheet images only */
.grid-image,
.pw-gallery-stage img,
.pw-gallery-stage picture,
.pw-gallery-stage picture img,
#pw-active-image,
#pw-lightbox-image,
.pw-gallery-stage .grid-image {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    user-drag: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Disable text selection on image containers */
.grid-thumbnail,
.pw-gallery-stage,
.grid-item {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Smart context menu handling - only for worksheet images */
.grid-thumbnail img,
.pw-gallery-stage img,
.grid-image {
    /* Context menu is handled by JavaScript for better UX */
}


/* Loading indicator - removed */

/* Image loading state - removed opacity effect */
.pw-gallery-stage #pw-active-image.loading {
    /* No visual effects during loading */
}

@media (max-width: 768px) {
    .pw-gallery-stage {
        height: 420px;
        padding: 16px;
    }

    .pw-gallery-stage #pw-active-image {
        max-width: 94%;
        max-height: 94%;
    }

    /* Mobile download notice adjustments */
    .bg-blue-50 {
        margin: 0 -1rem 1.5rem -1rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .bg-blue-50 {
        margin-bottom: 1.5rem;
    }
}

/* Desktop adjustments */
@media (min-width: 1025px) {
    .bg-blue-50 {
        margin-bottom: 1.5rem;
    }
}

/* Desktop adjustments */
@media (min-width: 1025px) {
    .bg-blue-50 {
        margin-bottom: 1.5rem;
        max-width: 100%;
    }
}

/* Single Download Button Positioning */
@media (max-width: 1024px) {

    /* Mobile/Tablet: Show mobile elements, hide desktop elements */
    .single-post .download-button-mobile {
        display: block;
    }

    .single-post .download-button-desktop {
        display: none !important;
    }

    .single-post .tags-container {
        display: block;
        margin-top: 1.5rem;
    }

    .single-post .tags-container .flex.flex-wrap {
        gap: 0.5rem 0.75rem;
    }

    /* Show worksheet info on mobile/tablet */
    .single-post .worksheet-info-mobile {
        display: block;
    }
}

@media (min-width: 1025px) {

    /* Desktop: Hide mobile elements, show desktop elements */
    .single-post .download-button-mobile {
        display: none !important;
    }

    .single-post .tags-container {
        display: none;
    }

    .single-post .worksheet-info-mobile {
        display: none !important;
    }

    /* Desktop: Show desktop button in sidebar */
    .single-post .download-button-desktop {
        display: block;
    }

    /* Desktop: Show tags in sidebar */
    .single-post .lg\\:col-span-1 .tags-container {
        display: block !important;
    }

    .single-post .tags-desktop {
        display: block !important;
    }
}

/* Enhanced Download Now button */
.bg-gradient-to-r.from-orange-500.to-orange-600 {
    margin-top: 1rem;
}

/* Related Worksheets Masonry (CSS Columns) */
.worksheets-masonry {
    column-count: 2;
    column-gap: 16px;
}

@media (min-width: 768px) {
    .worksheets-masonry {
        column-count: 3;
    }
}

@media (min-width: 1024px) {
    .worksheets-masonry {
        column-count: 5;
    }
}

.masonry-item {
    display: inline-block;
    width: 100%;
    margin: 0 0 16px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
}

/* Load more button styling (shared) */
#related-load-more,
.load-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    background: #0ea5e9;
    color: #fff;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

#related-load-more:hover,
.load-more-btn:hover {
    background: #0284c7;
}

.load-more-container {
    text-align: center;
    margin-top: 20px;
}

/* Tag & Category Rich Content Section - SEO-friendly content below worksheets */
.tag-rich-content-section,
.category-rich-content-section {
    background: white;
    padding: 3rem 0;
    margin-top: 2rem;
    border-top: 1px solid #e5e7eb;
}

.tag-rich-content-wrapper,
.category-rich-content-wrapper {
    max-width: 100%;
    line-height: 1.7;
    color: #374151;
}

.tag-rich-content-wrapper h2,
.category-rich-content-wrapper h2 {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1f2937;
    margin-top: 2rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.tag-rich-content-wrapper h2:first-child,
.category-rich-content-wrapper h2:first-child {
    margin-top: 0;
}

.tag-rich-content-wrapper h3,
.category-rich-content-wrapper h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #374151;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.tag-rich-content-wrapper h4,
.category-rich-content-wrapper h4 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #4b5563;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.tag-rich-content-wrapper p,
.category-rich-content-wrapper p {
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.7;
}

.tag-rich-content-wrapper ul,
.tag-rich-content-wrapper ol,
.category-rich-content-wrapper ul,
.category-rich-content-wrapper ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.tag-rich-content-wrapper li,
.category-rich-content-wrapper li {
    margin-bottom: 0.5rem;
    line-height: 1.7;
}

.tag-rich-content-wrapper a,
.category-rich-content-wrapper a {
    color: #2563eb;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.tag-rich-content-wrapper a:hover,
.category-rich-content-wrapper a:hover {
    color: #1d4ed8;
}

.tag-rich-content-wrapper img,
.category-rich-content-wrapper img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.5rem 0;
}

.tag-rich-content-wrapper blockquote,
.category-rich-content-wrapper blockquote {
    border-left: 4px solid #3b82f6;
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: #6b7280;
}

.tag-rich-content-wrapper table,
.category-rich-content-wrapper table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.tag-rich-content-wrapper table th,
.tag-rich-content-wrapper table td,
.category-rich-content-wrapper table th,
.category-rich-content-wrapper table td {
    padding: 0.75rem;
    border: 1px solid #e5e7eb;
    text-align: left;
}

.tag-rich-content-wrapper table th,
.category-rich-content-wrapper table th {
    background-color: #f9fafb;
    font-weight: 600;
}

/* Mobile responsive for tag & category rich content */
@media (max-width: 768px) {

    .tag-rich-content-section,
    .category-rich-content-section {
        padding: 2rem 0;
        margin-top: 1.5rem;
    }

    .tag-rich-content-wrapper,
    .category-rich-content-wrapper {
        padding: 0 1rem;
    }

    .tag-rich-content-wrapper h2,
    .category-rich-content-wrapper h2 {
        font-size: 1.5rem;
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
    }

    .tag-rich-content-wrapper h3,
    .category-rich-content-wrapper h3 {
        font-size: 1.25rem;
        margin-top: 1.25rem;
        margin-bottom: 0.5rem;
    }

    .tag-rich-content-wrapper h4,
    .category-rich-content-wrapper h4 {
        font-size: 1.125rem;
        margin-top: 1rem;
        margin-bottom: 0.5rem;
    }

    .tag-rich-content-wrapper p,
    .category-rich-content-wrapper p {
        font-size: 0.9375rem;
        margin-bottom: 0.875rem;
    }

    .tag-rich-content-wrapper ul,
    .tag-rich-content-wrapper ol,
    .category-rich-content-wrapper ul,
    .category-rich-content-wrapper ol {
        padding-left: 1.25rem;
    }

    .tag-rich-content-wrapper img,
    .category-rich-content-wrapper img {
        margin: 1rem 0;
    }

    .tag-rich-content-wrapper blockquote,
    .category-rich-content-wrapper blockquote {
        padding-left: 1rem;
        margin: 1rem 0;
    }

    .tag-rich-content-wrapper table,
    .category-rich-content-wrapper table {
        font-size: 0.875rem;
        margin: 1rem 0;
    }

    .tag-rich-content-wrapper table th,
    .tag-rich-content-wrapper table td,
    .category-rich-content-wrapper table th,
    .category-rich-content-wrapper table td {
        padding: 0.5rem;
    }
}

/* Hub Panel Accordion Grid */
.hub-accordion-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 1024px) {
    .hub-accordion-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        align-items: start;
    }
}

/* Breadcrumb Design Enhancements */
.breadcrumbs,
.rank-math-breadcrumb {
    background: #f8f8f8;
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.95rem;
    color: #475569;
    /* Ensure Rank Math p behaves nicely inside */
}

/* Rank Math specific layout adjustment */
.rank-math-breadcrumb p {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    /* space between items */
}

/* Theme breadcrumbs direct layout */
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.breadcrumbs a,
.rank-math-breadcrumb a {
    color: #2563eb;
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumbs a:hover,
.rank-math-breadcrumb a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.breadcrumbs .separator,
.rank-math-breadcrumb .separator {
    color: #94a3b8;
    font-size: 0.8em;
    margin: 0 2px;
}

/* Mobile Pill Design */
@media screen and (max-width: 768px) {
    .breadcrumbs {
        padding: 12px;
        gap: 6px;
        font-size: 0.85rem;
    }

    .breadcrumbs a,
    .rank-math-breadcrumb a,
    .breadcrumbs span.current,
    .rank-math-breadcrumb .last {
        border: 1px solid #e2e8f0;
        padding: 4px 10px;
        border-radius: 16px;
        /* Pill shape */
        background: white;
        display: inline-block;
        line-height: 1.4;
    }

    .breadcrumbs span.current,
    .rank-math-breadcrumb .last {
        background: #f1f5f9;
        color: #64748b;
        border-color: #cbd5e1;
    }

    /* Try to hide default separators on mobile since we have pills */
    .breadcrumbs .separator {
        display: none;
    }

    /* Ensure the dynamic separator we add for "..." is also handled or we use a different visual approach */
    /* If hiding separators, we rely on gap */

    .breadcrumb-expander {
        border: 1px solid #e2e8f0;
        padding: 4px 10px;
        border-radius: 16px;
        background: white;
        display: inline-block;
    }
}

/* Breadcrumb Truncation Styles */
.breadcrumb-hidden {
    display: none !important;
}

.breadcrumb-visible-anim {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.hub-accordion-content {
    transition: max-height 0.3s ease-out;
    overflow: hidden;
}

/* Clean Chips Filter Styles & Mobile Toggle */
.hub-filter-container {
    width: 100%;
    margin-bottom: 2rem;
}

/* Mobile Toggle Button (Blue Gradient - Full Width) */
.hub-filter-toggle {
    display: flex;
    /* Always visible */
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    /* Full Width */
    max-width: 100%;
    /* Ensure no cap */
    height: 54px;
    /* Slightly taller for hero feel */
    background: linear-gradient(to right, #2563eb, #1d4ed8);
    /* Blue 600 -> Blue 700 */
    border: none;
    border-radius: 12px;
    /* Soft rounded corners, not pill, to fit row better but look modern */
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    margin: 0 0 1.5rem 0;
    /* No auto margin, full width */
}

.hub-filter-toggle:hover {
    filter: brightness(110%);
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.hub-filter-toggle.active {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    filter: brightness(90%);
}

.hub-filter-toggle svg {
    transition: transform 0.2s;
    stroke: currentColor;
}

.hub-filter-toggle.active svg {
    transform: rotate(180deg);
}

/* Filter Content Wrapper */
.hub-filter-content {
    width: 100%;
    display: none;
    /* Hidden by default */
    gap: 1.5rem;
    padding-top: 0.5rem;
    margin: 0 auto;
}

.hub-filter-content.open {
    display: grid;
    /* Grid Layout for Desktop */
    grid-template-columns: 1fr;
    /* Mobile default */
    align-items: start !important;
    /* FORCE: Prevent stretching */
    animation: slideDown 0.3s ease-out;
}

@media (min-width: 768px) {
    .hub-filter-content.open {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns on tablet */
    }
}

@media (min-width: 1024px) {
    .hub-filter-content.open {
        grid-template-columns: repeat(3, 1fr);
        /* 3 columns on desktop */
    }
}

/* Accordion Section - Card Style for Grid */
.hub-accordion-section {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    /* Card look */
    overflow: hidden;
    /* For rounded corners */
    height: fit-content;
    /* Ensure it only takes needed space */
    align-self: start;
    /* Double ensure no stretching */
}

/* For rounded corners */
}

.hub-accordion-section:first-child {
    border-top: 1px solid #e2e8f0;
    /* Restore border for card */
}

/* Accordion Trigger Button */
.hub-accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: #f8fafc;
    /* Slight contrast header */
    border: none;
    border-bottom: 1px solid transparent;
    /* Prepare for open state */
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
}

.hub-accordion-trigger[aria-expanded="true"] {
    background: #ffffff;
    border-bottom-color: #e2e8f0;
}

.hub-accordion-trigger .trigger-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
}

.hub-accordion-trigger .trigger-icon {
    color: #94a3b8;
    transition: transform 0.3s ease;
}

.hub-accordion-trigger[aria-expanded="true"] .trigger-icon {
    transform: rotate(180deg);
    color: #2563eb;
    /* Blue match */
}

/* Accordion Panel */
.hub-accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    opacity: 0;
    background: #ffffff;
}

.hub-accordion-panel.open {
    opacity: 1;
}

/* Chips Grid inside Accordion */
.hub-chips-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.5rem 0.5rem 1.5rem 0.5rem;
    /* Added top padding */
}

/* Chip Links */
.hub-chip-link {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #475569;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    min-height: 36px;
}

.hub-chip-link:hover {
    background-color: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .hub-filter-content {
        max-width: 100%;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   FIX: Post Content List Indentation
   ========================================= */
.entry-content ul,
.entry-content ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
    /* Ensure bullets are indented */
    margin-left: 0;
}

.entry-content ul {
    list-style: disc outside;
}

.entry-content ol {
    list-style: decimal outside;
}

.entry-content li {
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
}

/* Base reset for Rank Math if needed */
.rank-math-block ul {
    padding-left: 0;
    list-style: none;
}

/* =========================================
   FIX: Rank Math FAQ Accordion Styling
   ========================================= */
.rank-math-list-item {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 10px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.rank-math-question {
    padding: 15px 20px;
    margin: 0 !important;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    position: relative;
    background: #f9fafb;
    transition: background 0.2s, color 0.2s;
    padding-right: 45px;
    /* Space for arrow */
    display: flex;
    /* Flex to align vertical */
    align-items: center;
    justify-content: space-between;
    color: #1f2937;
}

.rank-math-question:hover {
    background: #f3f4f6;
    color: #2563eb;
}

/* Arrow Icon using CSS pseudo-element */
.rank-math-question::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid #6b7280;
    border-bottom: 2px solid #6b7280;
    transform: rotate(45deg);
    /* Arrow down by default */
    transition: transform 0.3s ease;
    flex-shrink: 0;
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -6px;
    /* center vertical */
}

/* Active State Arrow */
.rank-math-list-item.active .rank-math-question::after {
    transform: rotate(-135deg);
    /* Arrow up */
    border-color: #2563eb;
    margin-top: -2px;
}

.rank-math-answer {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    background: #ffffff;
    color: #4b5563;
    line-height: 1.6;
}

.rank-math-list-item.active .rank-math-answer {
    padding: 20px;
    max-height: 2000px;
    /* Arbitrary large number to allow content */
    opacity: 1;
    border-top: 1px solid #e5e7eb;
}

/* =========================================
   FIX: Worksheet Metadata Grid Layout
   ========================================= */
.worksheet-meta-grid {
    display: grid;
    grid-template-columns: minmax(80px, auto) 1fr;
    gap: 0.75rem 1rem;
    align-items: baseline;
    font-size: 0.95rem;
}

.worksheet-meta-row {
    display: contents;
    /* Allows children to participate in the grid */
}

.worksheet-meta-label {
    color: #4b5563;
    /* text-gray-600 */
    font-weight: 500;
    white-space: nowrap;
}

.worksheet-meta-value {
    font-weight: 500;
    text-align: right;
    color: #111827;
    /* text-gray-900 */
}

.worksheet-meta-value a {
    color: #2563eb;
    /* text-blue-600 */
    text-decoration: none;
    transition: color 0.15s;
}

.worksheet-meta-value a:hover {
    color: #1e40af;
    /* text-blue-800 */
    text-decoration: underline;
}

/* ==========================================================================
   MENU DESIGN V3 (CORRECTION & FLEXBOX)
   - Removes aggressive padding resets that collapsed text.
   - Enforces Flexbox single-row layout for Desktop.
   - Enforces fixed-height touch targets for Mobile.
   ========================================================================== */

/* 1. Global Reset (Strict Dot Removal Only) */
#primary-menu,
.nav-menu,
.menu-item {
    list-style: none !important;
    background-image: none !important;
}

.menu-item::before,
.menu-item::after {
    content: none !important;
    display: none !important;
}

/* 2. Desktop Layout (Flexbox Force) - Min-width 992px */
@media (min-width: 992px) {

    #primary-menu,
    .nav-menu {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        margin: 0;
        padding: 0;
        gap: 20px;
        /* Space between items */
    }

    #primary-menu>li,
    .nav-menu>li {
        display: inline-block;
        /* Fallback */
        margin: 0;
        padding: 0;
        /* Container padding resets */
    }

    #primary-menu>li>a,
    .nav-menu>li>a {
        display: flex !important;
        align-items: center !important;
        /* Vertically center icon & text */
        gap: 5px !important;
        /* Space between text and icon */
        flex-wrap: nowrap !important;
        /* Prevent wrapping */
        padding: 0 15px !important;
        line-height: normal;
        /* Height handled by flex and padding */
        height: 60px;
        /* Flex container height */
        white-space: nowrap !important;
        font-weight: 500;
        color: #FFFFFF !important;
        /* Force White */
        text-decoration: none;
        transition: color 0.3s;
    }

    #primary-menu>li>a:hover {
        color: #2563eb;
        background-color: #f8f9fa;
    }

    /* Dropdown */
    .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 250px !important;
        background: #fff;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        display: none;
        z-index: 1000;
        padding: 10px 0;
    }

    .menu-item-has-children:hover .sub-menu {
        display: block;
    }

    .sub-menu li a {
        padding: 10px 20px !important;
        display: block;
        color: #555;
        white-space: normal;
        /* Allow wrap in dropdown if strictly needed, or keep nowrap */
    }
}

/* 3. Mobile Layout (Strict Rows) - Max-width 991px */
@media (max-width: 991px) {

    #primary-menu,
    .nav-menu {
        display: block;
        padding: 0;
        margin: 0;
    }

    #primary-menu>li,
    .nav-menu>li {
        display: block;
        border-bottom: 1px solid #f0f0f0;
        margin: 0;
        padding: 0;
    }

    #primary-menu>li>a,
    .nav-menu>li>a {
        display: block;
        height: 50px;
        /* Fixed Height */
        line-height: 50px;
        /* Vertical Center */
        padding: 0 20px !important;
        font-size: 16px;
        font-weight: 500;
        color: #333;
        text-decoration: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Accordion - Hidden Submenus */
    .sub-menu {
        display: none;
        background-color: #f9f9f9;
        border-top: 1px solid #eee;
    }

    /* Open state controlled by JS */
    li.open>.sub-menu {
        display: block;
    }

    .sub-menu li a {
        padding-left: 35px !important;
        /* Indent */
        height: 45px;
        line-height: 45px;
        font-size: 15px;
        color: #666;
        border-bottom: 1px solid #eee;
    }
}

/* ==========================================================================
   SVG-ONLY MENU ARROWS (USER REQUEST)
   - Disables ALL CSS arrows (::after/::before).
   - Styles the injected <svg class="dropdown-icon">.
   - Ensures perfect alignment and no double arrows.
   ========================================================================== */

/* 1. KILL ALL CSS ARROW CONTENT (Nuclear) */
#primary-menu li::before,
#primary-menu li::after,
.nav-menu li::before,
.nav-menu li::after,
#primary-menu li a::before,
#primary-menu li a::after,
.nav-menu li a::before,
.nav-menu li a::after {
    content: none !important;
    display: none !important;
}

/* 2. Style the Injected SVG */
.dropdown-icon {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 6px !important;
    /* Strict Gap */
    width: 12px;
    height: 12px;
    flex-shrink: 0 !important;
    /* Prevent squishing */
    position: relative;
    top: 1px;
    /* Optical Center */
}

/* 3. Desktop Strict Layout */
@media (min-width: 992px) {

    #primary-menu>li>a,
    .nav-menu>li>a {
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        margin-right: 25px !important;
        padding: 0 !important;
        height: 60px;
        color: #FFFFFF !important;
        text-decoration: none;
    }

    /* Transparent Hover Settings */
    #primary-menu li:hover,
    #primary-menu li a:hover,
    .nav-menu li:hover,
    .nav-menu li a:hover {
        background: transparent !important;
        background-color: transparent !important;
    }

    /* Submenu Gap Seal & Style */
    .sub-menu {
        top: 100% !important;
        margin-top: -1px !important;
        /* 1px Overlap to seal gap */
        min-width: 240px !important;
        background: #FFFFFF !important;
        z-index: 9999 !important;
        padding: 10px 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
    }

    .sub-menu li a {
        color: #555 !important;
        padding: 10px 20px !important;
        border-bottom: 1px solid #f0f0f0;
        display: block;
        width: 100%;
    }

    .sub-menu li a:hover {
        background-color: #f9f9f9 !important;
        color: #000 !important;
        padding-left: 25px !important;
        /* Slight movement on hover */
        transition: padding 0.2s ease;
    }
}

/* --- presentation-slider.css --- */
.presentation-slider-wrapper {
    max-width: 1100px;
    margin: 0 auto 30px;
    position: relative;
    background: #f8fafc;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.presentation-stage {
    position: relative;
    width: 100%;
    /* A4 Portrait Ratio Default */
    aspect-ratio: 2480 / 3508;
    background: #fff;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}

@media (min-width: 769px) {
    .presentation-stage {
        height: 85vh;
        /* Limit height on desktop */
        max-height: 1200px;
        aspect-ratio: auto;
        /* Let height dictate width */
    }
}

.presentation-slide {
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.presentation-slide.active {
    display: flex;
}

.presentation-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Controls */
.slider-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    border-radius: 0 0 8px 8px;
    user-select: none;
}

.control-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: #4b5563;
    transition: all 0.2s;
    border-radius: 50%;
}

.control-btn:hover {
    background-color: #f3f4f6;
    color: #2563eb;
}

.slide-counter {
    font-family: monospace;
    font-size: 16px;
    color: #374151;
}

/* Fullscreen Floating Controls */
.fs-close-btn {
    display: none;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2147483650;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    padding: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.fs-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.fs-nav-btn {
    display: none;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2147483650;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    /* Semi transparent bg for contrast */
    border: none;
    border-radius: 50%;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.fs-nav-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-50%) scale(1.1);
}

.fs-prev {
    left: 20px;
}

.fs-next {
    right: 20px;
}

/* --- presentation-slider.css --- */
.presentation-slider-wrapper {
    max-width: 1100px;
    margin: 0 auto 30px;
    position: relative;
    background: #f8fafc;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.presentation-stage {
    position: relative;
    width: 100%;
    /* A4 Portrait Ratio Default */
    aspect-ratio: 2480 / 3508;
    background: #fff;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}

@media (min-width: 769px) {
    .presentation-stage {
        height: 85vh;
        /* Limit height on desktop */
        max-height: 1200px;
        aspect-ratio: auto;
        /* Let height dictate width */
    }
}

.presentation-slide {
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.presentation-slide.active {
    display: flex;
}

.presentation-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Overlay Navigation Arrows (Minimal & Transparent) */
.overlay-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    background: transparent;
    /* Transparent background */
    border: none;
    color: rgba(255, 255, 255, 0.9);
    /* White arrow */
    width: 56px;
    /* Larger hit area */
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    /* Shadow for visibility on light/dark images */
    transition: all 0.2s ease;
    opacity: 0.8;
}

.overlay-nav:hover {
    transform: translateY(-50%) scale(1.1);
    opacity: 1;
    color: #fff;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
}

.overlay-nav.prev {
    left: 16px;
}

.overlay-nav.next {
    right: 16px;
}

/* Mobile Touch Targets */
@media (max-width: 768px) {
    .overlay-nav {
        width: 44px;
        height: 44px;
        opacity: 0.6;
        /* Less distracting on mobile */
        background: rgba(255, 255, 255, 0.9);
    }

    .overlay-nav.prev {
        left: 10px;
    }

    .overlay-nav.next {
        right: 10px;
    }
}

/* Bottom Controls (Counter, Fullscreen Toggle) */
.slider-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    border-radius: 0 0 8px 8px;
    user-select: none;
}

.control-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: #4b5563;
    transition: all 0.2s;
    border-radius: 50%;
}

.control-btn:hover {
    background-color: #f3f4f6;
    color: #2563eb;
}

.slide-counter {
    font-family: monospace;
    font-size: 16px;
    color: #374151;
}

/* Fullscreen Close Button (Floating) */
.fs-close-btn {
    display: none;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2147483650;
    color: #fff;
    /* White icon for Dark BG */
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.fs-close-btn:hover {
    background: #fff;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    color: #d00;
}

body.fullscreen-active .fs-close-btn {
    display: block;
}


/* --- Final Polished Presentation Slider --- */

/* 1. Main Wrapper: Fit Screen perfectly */
.presentation-slider-wrapper {
    width: 100%;
    margin-bottom: 2rem;
    position: relative;
    display: flex;
    flex-direction: column;
    /* Calc: Viewport - Header(80px) - Thumbnails(120px) - Margins */
    height: calc(100vh - 180px);
    /* Fixed height to prevent scroll */
    min-height: 500px;
    /* Minimum reasonable height */
}

/* 2. Stage (Main Image Area) */
.presentation-stage {
    flex: 1;
    /* Take all remaining space */
    width: 100%;
    position: relative;
    background-color: #ffffff;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    display: flex;
    /* Centering Context */
    align-items: center;
    justify-content: center;
}

/* Ensure slides fill stage but contain image */
.presentation-slide {
    width: 100%;
    height: 100%;
    display: none;
    /* Hidden by default */
}

.presentation-slide.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.presentation-slide figure {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    /* Inner spacing removed */
    display: flex;
    align-items: center;
    justify-content: center;
}

.presentation-slide figure img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* CRITICAL: Never crop, show all */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    /* Subtle depth */
}

/* 3. Navigation Arrows (Circle Style) */
.overlay-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    color: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

.overlay-nav:hover {
    background-color: #fff;
    transform: translateY(-50%) scale(1.1);
    color: #2563eb;
}

.overlay-nav.prev {
    left: 20px;
}

.overlay-nav.next {
    right: 20px;
}

/* 4. Controls Bar (Counter) */
.slider-controls {
    flex-shrink: 0;
    /* Don't shrink */
    background: #fff;
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
}

/* 5. Thumbnails Strip (Compact) */
.slider-thumbnails {
    flex-shrink: 0;
    /* Keep size */
    height: 70px;
    /* Reduced to give more space to stage */
    /* Fixed container height */
    margin-top: 0;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    padding: 5px 10px;
    gap: 8px;
    display: flex;
    overflow-x: auto;
    align-items: center;
}

.thumb-item {
    flex-shrink: 0;
    width: 50px;
    /* Smaller width */
    height: 56px;
    /* Smaller height */
    border-radius: 4px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    background: #fff;
    transition: all 0.2s;
    opacity: 0.7;
}

.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px;
    /* Inner radius */
    display: block;
}

.thumb-item.active {
    border-color: #3b82f6;
    /* Blue Active Border */
    opacity: 1 !important;
    transform: translateY(-2px);
    box-shadow: 0 2px 4px -1px rgba(59, 130, 246, 0.4);
}

.thumb-item:hover {
    opacity: 1;
}

/* Scrollbar refinement */
.slider-thumbnails {
    scrollbar-width: none !important;
    /* Firefox */
    -ms-overflow-style: none !important;
    /* IE 10+ */
}

.slider-thumbnails::-webkit-scrollbar {
    display: none !important;
    /* Chrome/Safari */
    width: 0 !important;
    height: 0 !important;
}

/* Fullscreen Overlay Mode (Custom Lightbox) */
.presentation-slider-wrapper.is-fullscreen-overlay {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    max-height: none !important;
    max-width: none !important;
    background-color: rgba(0, 0, 0, 0.85) !important;
    /* Semi-transparent */
    padding: 40px;
    /* Space around stage */
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(5px);
    /* Nice effect if supported */
}

/* Make stage transparent in overlay mode */
.presentation-slider-wrapper.is-fullscreen-overlay .presentation-stage {
    background-color: transparent !important;
    border: none !important;
    flex: 1;
    overflow: visible;
    /* Allow buttons to pop out if needed */
}

/* Adjust Image Size in Overlay */
.presentation-slider-wrapper.is-fullscreen-overlay .presentation-stage img {
    max-height: 85vh;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
}

/* Overlay Navigation - Make them bigger and white */
.presentation-slider-wrapper.is-fullscreen-overlay .overlay-nav {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
    width: 60px;
    height: 60px;
}

.presentation-slider-wrapper.is-fullscreen-overlay .overlay-nav:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Hide Thumbnails & Controls in Overlay if desired, OR style them dark */
.presentation-slider-wrapper.is-fullscreen-overlay .slider-controls {
    background: transparent;
    border: none;
    color: #fff;
    position: absolute;
    top: 10px;
    left: 20px;
    padding: 0;
}

.presentation-slider-wrapper.is-fullscreen-overlay .slide-counter {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1.1rem;
}

/* Hide Thumbnails strip to focus on big image? Or keep it? 
   User said "fullscreen slider", usually implies just images. 
   Let's keep thumbs but dark style at bottom if space permits, or hide.
   Let's hide for "pure" look, or style dark. Let's style dark. */
.presentation-slider-wrapper.is-fullscreen-overlay .slider-thumbnails {
    background: transparent;
    border: none;
    justify-content: center;
    padding-bottom: 20px;
}

.presentation-slider-wrapper.is-fullscreen-overlay .thumb-item {
    background: #000;
    opacity: 0.5;
    border-color: #444;
}

.presentation-slider-wrapper.is-fullscreen-overlay .thumb-item.active {
    opacity: 1 !important;
    border-color: #fff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* The Toggle Button in Overlay Mode */
.presentation-slider-wrapper.is-fullscreen-overlay .pw-fullscreen-toggle {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    top: 20px;
    right: 20px;
}

.presentation-slider-wrapper.is-fullscreen-overlay .pw-fullscreen-toggle:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.slider-thumbnails::-webkit-scrollbar-track {
    background: transparent;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .presentation-slider-wrapper {
        height: auto;
        /* Let it flow on mobile? Or fixed? User said "doesn't scroll". */
        max-height: 85vh;
        /* Safe limit */
        min-height: 400px;
    }

    .slider-thumbnails {
        height: 80px;
        padding: 5px;
    }

    .thumb-item {
        width: 50px;
        height: 60px;
    }
}

/* Mobile UX "Money" Fix: Move Slider to TOP, Button BELOW it */
@media (max-width: 768px) {
    .worksheet-article {
        display: flex;
        flex-direction: column;
    }

    /* 1. Slider FIRST (Visual Confirmation) */
    .presentation-slider-wrapper {
        order: -2;
        margin-top: 0;
        margin-bottom: 15px;
    }

    /* 2. Download Button SECOND (Action) */
    .mobile-pdf-btn-wrapper {
        order: -1;
        margin-bottom: 20px;
    }

    /* Limit Slider Height strictly to fit everything in viewport (Title + Slider + Button) */
    /* ~35vh ensures space for Title (top) and Button (bottom) */
    .simple-image-container {
        max-height: 35vh !important;
        min-height: 250px;
        /* Safety min-height */
    }

    .main-worksheet-image {
        max-height: 35vh !important;
        object-fit: contain !important;
    }
}

@media (max-width: 768px) {
    .overlay-nav {
        width: 36px;
        height: 36px;
    }

    .overlay-nav.prev {
        left: 10px;
    }

    .overlay-nav.next {
        right: 10px;
    }

    .mobile-pdf-btn-wrapper {
        display: block;
        margin-top: 10px;
    }

    /* Fullscreen Overlay Mode (Custom Lightbox) */
    .presentation-slider-wrapper.is-fullscreen-overlay {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100vw !important;
        height: 100vh !important;
        max-height: none !important;
        max-width: none !important;
        background-color: rgba(0, 0, 0, 0.85) !important;
        /* Semi-transparent */
        padding: 40px;
        /* Space around stage */
        margin: 0 !important;
        border-radius: 0 !important;
        z-index: 999999;
        display: flex;
        flex-direction: column;
        backdrop-filter: blur(5px);
    }

    .presentation-slider-wrapper.is-fullscreen-overlay .presentation-stage {
        background-color: transparent !important;
        border: none !important;
        flex: 1;
        overflow: visible;
    }

    .presentation-slider-wrapper.is-fullscreen-overlay .presentation-stage img {
        max-height: 80vh;
        max-width: 85vw;
        /* Leave space for arrows on sides */
        width: auto;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    }

    /* FULLSCREEN MOBILE ARROWS - NUCLEAR OPTION */
    .presentation-slider-wrapper.is-fullscreen-overlay .overlay-nav,
    .presentation-slider-wrapper.is-fullscreen-overlay .overlay-nav:hover,
    .presentation-slider-wrapper.is-fullscreen-overlay .overlay-nav:focus,
    .presentation-slider-wrapper.is-fullscreen-overlay .overlay-nav:active {
        /* Positioning */
        position: fixed !important;
        /* Force fixed to viewport if needed, or absolute to container */
        position: absolute !important;
        top: 50% !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateY(-50%) !important;
        z-index: 9999999 !important;

        /* Appearance */
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        width: 60px !important;
        height: 60px !important;
        /* Square for perfect center */
        display: flex !important;
        justify-content: center;
        /* Center SVG */
        align-items: center;
        /* Center SVG */
        opacity: 1 !important;

        /* Reset */
        border-radius: 0 !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        -webkit-tap-highlight-color: transparent;
    }

    .presentation-slider-wrapper.is-fullscreen-overlay .overlay-nav.next {
        right: 0 !important;
        left: auto !important;
        bottom: auto !important;
        top: 50% !important;
    }

    .presentation-slider-wrapper.is-fullscreen-overlay .overlay-nav.prev {
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        top: 50% !important;
    }

    .presentation-slider-wrapper.is-fullscreen-overlay .overlay-nav svg {
        width: 48px !important;
        /* Large Icon */
        height: 48px !important;
        fill: none !important;
        color: #000 !important;
        /* Pure Black */
        stroke: #000 !important;
        stroke-width: 3px !important;
        filter: none !important;
        background: none !important;
        margin: 0 !important;
        display: block !important;
    }

    .presentation-slider-wrapper.is-fullscreen-overlay .overlay-nav:hover {
        background: transparent !important;
        transform: scale(1.1);
    }

    .presentation-slider-wrapper.is-fullscreen-overlay .slider-thumbnails {
        background: transparent;
        border: none;
        display: flex;
        justify-content: flex-start;
        /* Allow scrolling from start */
        overflow-x: auto;
        /* Enable horizontal scroll */
        width: 100%;
        padding: 10px;
        padding-bottom: 20px;
        gap: 10px;
        -webkit-overflow-scrolling: touch;
        /* Smooth scroll on iOS */
    }

    .presentation-slider-wrapper.is-fullscreen-overlay .thumb-item {
        background: rgba(0, 0, 0, 0.5);
        opacity: 0.6;
        border: 2px solid transparent;
        flex-shrink: 0;
        /* Don't squash items */
    }

    .presentation-slider-wrapper.is-fullscreen-overlay .thumb-item.active {
        opacity: 1 !important;
        border-color: #fff;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    }

    .presentation-slider-wrapper.is-fullscreen-overlay .pw-fullscreen-toggle {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        top: 20px;
        right: 20px;
    }

    .presentation-slider-wrapper.is-fullscreen-overlay .pw-fullscreen-toggle:hover {
        background: rgba(255, 255, 255, 0.3);
        color: #fff;
    }

    /* Utility: Hidden */
    .hidden {
        display: none !important;

        /* UX Toast Message */
        .pw-toast-message {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%) translateY(20px);
            background-color: rgba(33, 33, 33, 0.95);
            color: #fff;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            z-index: 2147483647;
            /* Max Z-Index */
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
        }

        .pw-toast-message.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        .pw-toast-message strong {
            color: #fdba74;
            /* Orange accent */
            font-weight: 700;
        }
    }

    /* Mobile Layout Optimizations */
    @media (max-width: 768px) {

        .entry-content ul,
        .entry-content ol {
            padding-left: 1.6rem !important;
            /* Increased indentation */
        }

        .entry-content li {
            margin-bottom: 0.5rem;
            font-size: 1.05rem;
            /* Larger text for mobile */
            line-height: 1.6;
        }
    }

    /* =========================================
   MOBILE ABOVE-THE-FOLD OPTIMIZATION
   ========================================= */
    @media (max-width: 768px) {

        /* 1. Header & Container Spacing Compression */
        /* Breadcrumb Container */
        .site-main>.bg-white>.max-w-7xl {
            padding-top: 0.5rem !important;
            padding-bottom: 0.25rem !important;
        }

        /* Title Header Container */
        .site-main>header {
            padding-top: 0 !important;
            padding-bottom: 0.5rem !important;
            margin-bottom: 0.5rem !important;
            /* Reduced from mb-6 */
        }

        /* 2. Breadcrumb Minimization */
        .breadcrumbs,
        .rank-math-breadcrumb,
        #breadcrumbs {
            font-size: 13px !important;
            /* Slightly larger for readability */
            line-height: 1.4 !important;
            color: #4b5563 !important;
            /* Darker gray */
            display: block !important;
            padding: 0 !important;
            margin-bottom: 8px !important;
            /* Space between breadcrumb and H1 */
            background: transparent !important;
            /* No pill bg */
            border: none !important;
        }

        .breadcrumbs::-webkit-scrollbar {
            display: none;
        }

        .breadcrumbs a,
        .breadcrumbs span,
        .rank-math-breadcrumb a,
        .rank-math-breadcrumb span {
            background: transparent !important;
            border: none !important;
            padding: 0 !important;
            margin: 0 !important;
            color: #2563eb !important;
            /* Link color blue */
            font-weight: 500 !important;
            white-space: normal !important;
            /* Allow wrapping like reference image */
        }

        .breadcrumbs .separator,
        .rank-math-breadcrumb .separator {
            margin: 0 4px !important;
            color: #9ca3af !important;
        }

        /* Show Current Post Title in Breadcrumb with distinct style */
        .breadcrumbs .current,
        .rank-math-breadcrumb .last {
            display: inline !important;
            color: #9ca3af !important;
            /* Lighter gray for current page */
            font-weight: 400 !important;
        }

        /* 3. Title H1 Minimization */
        h1.product-title,
        .entry-title {
            font-size: 1.5rem !important;
            /* Balanced size */
            line-height: 1.2 !important;
            margin-top: 0.5rem !important;
            /* Small top margin for separation */
            margin-bottom: 0.5rem !important;
            letter-spacing: -0.01em;
            font-weight: 700 !important;
            color: #111827 !important;
        }

        /* 4. Pull Slider Up */
        .presentation-slider-wrapper {
            margin-top: 0 !important;
            /* Ensure it's close to title */
        }

        /* 5. Fix Mobile List Indentation */
        .entry-content ul,
        .entry-content ol {
            padding-left: 1.1rem !important;
            /* Minimal indentation */
            margin-left: 0 !important;
        }
    }

    /* 
=============================================
ACCESSIBILITY FIXES & JS MIGRATED STYLES 
============================================= 
*/

    /* Fix: Darker Link Color for WCAG AA Contrast (#40e0d0 -> #008b8b) */
    a {
        color: #008b8b;
        /* DarkCyan */
    }

    a:hover {
        color: #006868;
    }

    /* Migrated from main.js (additionalCSS) */
    .site-header {
        transition: transform 0.3s ease;
    }

    .site-header.scroll-down {
        transform: translateY(-100%);
    }

    .site-header.scroll-up {
        transform: translateY(0);
    }

    .worksheet-card {
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.6s ease;
    }

    .worksheet-card.animated {
        opacity: 1;
        transform: translateY(0);
    }

    .search-form.focused {
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    }

    .search-loading {
        padding: 1rem;
        text-align: center;
        color: #6b7280;
    }

    .form-field.error {
        border-color: #ef4444 !important;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
    }

    .category-icon {
        transition: transform 0.3s ease;
    }

    .lazy {
        opacity: 0;
        transition: opacity 0.3s;
    }

    .lazy:not([src]) {
        background: #f3f4f6;
    }

    #back-to-top:hover {
        background: #2563eb !important;
        transform: translateY(-2px);
    }

    @media (max-width: 768px) {
        .main-navigation {
            display: none;
            background: white;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border-radius: 0 0 8px 8px;
        }

        .main-navigation ul {
            flex-direction: column;
            padding: 1rem 0;
        }

        .main-navigation li {
            margin: 0;
            width: 100%;
        }

        .main-navigation a {
            padding: 0.75rem 1.5rem;
            display: block;
        }

        .menu-toggle {
            display: block;
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            padding: 0.5rem;
        }
    }

    /* Fullscreen Overlay Mode (Custom Lightbox) - ROBUST MOBILE FIX */
    .presentation-slider-wrapper.is-fullscreen-overlay {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        /* Use dynamic viewport height if supported, fallback to 100% */
        height: 100dvh !important;
        max-height: none !important;
        max-width: none !important;
        background-color: rgba(0, 0, 0, 0.98) !important;
        /* Almost solid black */
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        z-index: 2147483647;
        /* Max Integer Z-Index */
        display: flex;
        flex-direction: column;
        overflow: hidden;
        /* Prevent body scroll bleed */
    }

    /* 1. Header Area (Close, Download) - Fixed Height */
    .presentation-slider-wrapper.is-fullscreen-overlay .absolute.top-4.right-4 {
        position: relative !important;
        /* Part of flex flow */
        top: auto !important;
        right: auto !important;
        width: 100%;
        padding: 10px 15px;
        display: flex;
        justify-content: flex-end;
        /* Align right */
        align-items: center;
        background: rgba(0, 0, 0, 0.3);
        flex-shrink: 0;
        /* Don't shrink */
        z-index: 20;
    }

    /* Force Download Button Display */
    .presentation-slider-wrapper.is-fullscreen-overlay .fs-download-btn {
        display: flex !important;
        margin-right: 15px;
        font-size: 0.8rem !important;
        /* Smaller on mobile FS */
        padding: 6px 12px !important;
        white-space: nowrap;
    }

    /* 2. Main Stage (Image) - Flexible Height */
    .presentation-slider-wrapper.is-fullscreen-overlay .presentation-stage {
        flex: 1 1 auto;
        /* Grow and Shrink */
        min-height: 0;
        /* CRITICAL for Flex Column Overflow */
        position: relative;
        width: 100%;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        overflow: hidden;
    }

    .presentation-slider-wrapper.is-fullscreen-overlay .presentation-slide {
        display: none !important;
        width: 100%;
        height: 100%;
    }

    .presentation-slider-wrapper.is-fullscreen-overlay .presentation-slide.active {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    /* Image Containment - The Magic Fix */
    .presentation-slider-wrapper.is-fullscreen-overlay .presentation-stage img {
        max-width: 100% !important;
        max-height: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        margin: auto;
        box-shadow: none !important;
        /* Padding to not touch edges/arrows */
        padding: 10px 40px !important;
        /* 40px side padding for arrows */
    }

    /* 3. Thumbnails - Fixed Bottom */
    .presentation-slider-wrapper.is-fullscreen-overlay .slider-thumbnails {
        flex-shrink: 0;
        /* Do NOT shrink */
        background: rgba(20, 20, 20, 0.9);
        border-top: 1px solid #333;
        padding: 10px;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
        /* Safe area */
        z-index: 20;
        overflow-x: auto;
        display: flex;
        gap: 8px;
    }

    /* ARROWS - Fixed positions relative to Stage */
    .presentation-slider-wrapper.is-fullscreen-overlay .overlay-nav {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 30;
        width: 44px !important;
        height: 44px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
    }

    .presentation-slider-wrapper.is-fullscreen-overlay .overlay-nav svg {
        width: 28px !important;
        height: 28px !important;
        color: white !important;
        /* White arrows on dark overlay */
        stroke: white !important;
    }

    .presentation-slider-wrapper.is-fullscreen-overlay .overlay-nav.prev {
        left: 10px !important;
        right: auto !important;
    }

    .presentation-slider-wrapper.is-fullscreen-overlay .overlay-nav.next {
        right: 10px !important;
        left: auto !important;
    }

    /* Mobile UX "Money" Fix: Ultimate Single Screen Layout */
    @media (max-width: 768px) {

        /* 1. Reset: Show Button Labels */
        .pw-fav-label,
        .pw-share-btn span,
        .pw-share-btn .font-medium,
        .pw-share-pinterest span,
        .pw-share-pinterest .text {
            display: inline-block !important;
            font-size: 0.85rem !important;
        }

        .pw-fav-toggle,
        .pw-share-btn,
        .pw-share-pinterest {
            width: auto !important;
            min-width: auto !important;
            padding: 8px 10px !important;
            height: 44px !important;
        }

        /* 2. Container Ordering - FORCE TOP WITH NEGATIVE ORDER */
        .worksheet-article {
            display: flex;
            flex-direction: column;
        }

        /* Order -10: Slider is Top Priority */
        .presentation-slider-wrapper {
            order: -10;
            margin-top: 0;
            margin-bottom: 8px;
        }

        /* Order -5: Social Actions below Slider */
        .action-buttons-wrapper {
            order: -5;
            margin-bottom: 8px;
            padding: 5px 0 !important;
            width: 100%;
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
            gap: 8px;
            overflow-x: auto;
        }

        /* Order -1: Download Button below Social */
        .mobile-pdf-btn-wrapper {
            order: -1;
            margin-bottom: 20px;
        }

        /* Remove positive orders for content */
        .worksheet-info-mobile,
        .tags-container,
        .entry-content {
            order: 0;
            /* Default */
        }
    }

    .action-buttons-wrapper button,
    .action-buttons-wrapper a {
        width: 100% !important;
        justify-content: center;
    }

    /* 3. Slider Height Constraint */
    .simple-image-container {
        max-height: 35vh !important;
        min-height: 220px;
    }

    .main-worksheet-image {
        max-height: 35vh !important;
        object-fit: contain !important;
    }

    /* Tweaks for Download Button */
    .download-Timer-btn {
        padding: 12px 16px;
        font-size: 1.1rem;
        width: 100%;
    }
}

```