/*
Theme Name: GRQuiz
Theme URI: https://www.grquiz.com/
Author: Syed
Author URI: https://www.grquiz.com/
Description: A modern English Grammar MCQ Quiz WordPress theme with Bootstrap 5. Perfect for grammar practice tests, quizzes, and educational content.
Version: 1.2.0
Text Domain: grquiz
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =============================================================================
   TABLE OF CONTENTS
   =============================================================================
   1.  CSS VARIABLES & RESET
   2.  BASE STYLES
   3.  NAVBAR STYLES
   4.  SECTION STYLES
   5.  QUIZ & TOPIC CARDS (Critical)
   6.  QUIZ & TOPIC CARDS (Non-Critical - from quiz-cards.css)
   7.  BLOG POST STYLES (from blog-content.css)
   8.  SINGLE POST STYLES (from blog-content.css)
   9.  DAILY QUIZ BOX (from footer-sidebar.css)
   10. SIDEBAR STYLES (from footer-sidebar.css)
   11. FOOTER STYLES (from footer-sidebar.css)
   12. PAGINATION (from pagination-alerts.css)
   13. ALERT MESSAGES (from pagination-alerts.css)
   14. TABLE OF CONTENTS (from pagination-alerts.css)
   15. QUIZ META PILLS (from pagination-alerts.css)
   16. GRAMMAR CONTENT & TABLES (from grammar-content.css)
   17. CARD HOVER EFFECTS (from custom.css)
   18. ANIMATIONS (from custom.css)
   19. CUSTOM SCROLLBAR (from custom.css)
   20. BACK TO TOP BUTTON (from custom.css)
   21. PAGE TITLE ALIGNMENT (from custom.css)
   22. SOCIAL SHARING STYLES (from custom.css)
   23. RESPONSIVE STYLES (from custom.css)
   24. ADMIN BAR FIX (from grquiz-enhancements.css)
   25. PRINT STYLES (from grquiz-enhancements.css)
   26. ACCESSIBILITY & UTILITIES
   ============================================================================= */

/* =============================================================================
   1. CSS VARIABLES & RESET
   ============================================================================= */

:root {
    --primary: #2563eb;
    --secondary: #f59e0b;
    --dark: #0f172a;
    --light: #f8fafc;
    --gray: #64748b;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =============================================================================
   2. BASE STYLES
   ============================================================================= */

body {
    font-family: 'Inter', sans-serif;
    background: #f8fafc;
    color: #0f172a;
    overflow-x: hidden;
    font-display: swap;
}

img {
    aspect-ratio: attr(width) / attr(height);
    max-width: 100%;
    height: auto;
}

/* =============================================================================
   3. NAVBAR STYLES
   ============================================================================= */

.navbar {
    background: rgba(15, 23, 42, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.navbar-brand {
    font-size: 1.8rem;
    font-weight: 900;
    padding: 0;
    display: flex;
    align-items: center;
}

.navbar-brand .custom-logo {
    max-height: 45px;
    width: auto;
    height: auto;
    display: block;
}

.navbar-brand span {
    color: var(--secondary);
}

.nav-link {
    color: #e2e8f0 !important;
    font-weight: 500;
    transition: .2s;
}

.nav-link:hover {
    color: var(--secondary) !important;
}

.nav-search {
    margin-left: 16px;
    max-width: 260px;
}

@media (max-width: 991px) {
    .nav-search {
        margin-left: 0;
        margin-top: 15px;
        width: 100%;
        max-width: 100%;
    }
    .nav-search .input-group {
        width: 100%;
    }
}

/* =============================================================================
   4. SECTION STYLES
   ============================================================================= */

.section-padding {
    padding: 60px 0;
}

.section-title {
    text-align: center;
    margin-bottom: 40px;
}

.section-title h2 {
    font-size: clamp(1.6rem, 4vw, 2.3rem);
    font-weight: 800;
    margin-bottom: 12px;
}

.section-title p {
    color: var(--gray);
    max-width: 700px;
    margin: auto;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -12px;
    margin-left: -12px;
}

[class*="col-"] {
    padding-right: 12px;
    padding-left: 12px;
}

/* =============================================================================
   5. QUIZ & TOPIC CARDS (Critical - Base)
   ============================================================================= */

.quiz-card,
.topic-card {
    background: white;
    border-radius: 20px;
    padding: 30px 22px;
    text-align: center;
    transition: transform 0.2s ease;
    height: 100%;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .04);
    position: relative;
    overflow: hidden;
    contain: layout style;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.quiz-card::before,
.topic-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.quiz-card:hover::before,
.topic-card:hover::before {
    transform: scaleX(1);
}

.quiz-card:hover,
.topic-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
}

.quiz-icon,
.topic-icon {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
    font-size: 2rem;
    transition: all 0.3s ease;
}

.quiz-card:hover .quiz-icon,
.topic-card:hover .topic-icon {
    background: linear-gradient(135deg, var(--primary), #3b82f6);
    color: white;
    transform: scale(1.05);
}

.quiz-card h5,
.topic-card h5 {
    font-weight: 700;
    margin-bottom: 12px;
    font-size: 1.2rem;
    color: var(--dark);
}

.quiz-card p,
.topic-card p {
    color: var(--gray);
}

/* Fade-in animation for cards (CLS-safe) */
.quiz-card,
.topic-card,
.blog-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}

.quiz-card.animated,
.topic-card.animated,
.blog-card.animated {
    opacity: 1;
    transform: translateY(0);
}

/* =============================================================================
   6. QUIZ & TOPIC CARDS (Non-Critical - from quiz-cards.css)
   ============================================================================= */

.quiz-card,
.topic-card {
    contain: layout style paint;
}

/* Responsive cards */
@media (max-width: 576px) {
    .quiz-card,
    .topic-card {
        padding: 25px 18px;
    }
    .quiz-icon,
    .topic-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
}

/* =============================================================================
   7. BLOG POST STYLES (from blog-content.css)
   ============================================================================= */

.blog-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .04);
    transition: all 0.3s ease;
    height: 100%;
    contain: layout style paint;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .1);
}

.blog-card .post-thumbnail {
    overflow: hidden;
}

.blog-card .post-thumbnail img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-card:hover .post-thumbnail img {
    transform: scale(1.05);
}

.blog-card .post-content {
    padding: 25px;
}

.blog-card .post-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.blog-card .post-title a {
    text-decoration: none;
    color: var(--dark);
    transition: color 0.3s ease;
}

.blog-card .post-title a:hover {
    color: var(--primary);
}

.blog-card .post-meta {
    font-size: 0.85rem;
    color: var(--gray);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.blog-card .post-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.blog-card .post-meta svg {
    width: 14px;
    height: 14px;
    display: inline-block;
}

.blog-card .post-excerpt {
    color: #475569;
    line-height: 1.6;
    margin-bottom: 20px;
}

.read-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: var(--primary);
    font-weight: 600;
    transition: gap 0.3s ease;
}

.read-more:hover {
    gap: 10px;
    color: var(--secondary);
}

.blog-card-link {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.blog-card-link:hover {
    transform: translateY(-5px);
}

.blog-card-link:hover .blog-card {
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
}

/* =============================================================================
   8. SINGLE POST STYLES (from blog-content.css)
   ============================================================================= */

.single-post-header {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: white;
    padding: 60px 0 40px;
    margin-bottom: 30px;
}

.single-post-header .post-title {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 800;
    margin-bottom: 20px;
}

.single-post-header .post-meta {
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.single-post-header .post-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.single-post-header .post-meta svg {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    color: #94a3b8;
}

.single-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #334155;
}

.single-content h2,
.single-content h3,
.single-content h4 {
    margin-top: 30px;
    margin-bottom: 20px;
    font-weight: 700;
}

.single-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 20px 0;
}

.single-content blockquote {
    border-left: 4px solid var(--primary);
    padding: 20px 30px;
    background: #f1f5f9;
    border-radius: 12px;
    margin: 25px 0;
    font-style: italic;
}

/* =============================================================================
   9. DAILY QUIZ BOX (from footer-sidebar.css)
   ============================================================================= */

.daily-box {
    background: linear-gradient(135deg, #1e3a8a, #2563eb);
    border-radius: 34px;
    padding: 70px 30px;
    color: white;
    text-align: center;
    will-change: transform;
}

.daily-box h2 {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 800;
}

.daily-box p {
    max-width: 700px;
    margin: 24px auto;
    opacity: .94;
}

@media (max-width: 768px) {
    .daily-box {
        padding: 50px 20px;
    }
}

/* =============================================================================
   10. SIDEBAR STYLES (from footer-sidebar.css)
   ============================================================================= */

.sidebar-widget {
    border: 1px solid #e2e8f0;
}

.widget-title {
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 20px;
}

.widget-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
}

.sidebar-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-widget ul li {
    margin-bottom: 12px;
}

.sidebar-widget ul li a {
    text-decoration: none;
    color: #475569;
    transition: color 0.3s ease;
    display: inline-block;
}

.sidebar-widget ul li a:hover {
    color: var(--primary);
    padding-left: 5px;
}

/* =============================================================================
   11. FOOTER STYLES (from footer-sidebar.css)
   ============================================================================= */

footer {
    background: #0f172a;
    color: #cbd5e1;
    padding: 70px 20px 30px;
}

.footer-social a {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1e293b;
    color: white;
    border-radius: 50%;
    margin: 0 7px;
    transition: .2s;
    text-decoration: none;
}

.footer-social a:hover {
    background: var(--secondary);
    color: #0f172a;
    transform: translateY(-3px);
}

.footer-widget {
    text-align: left;
}

/* =============================================================================
   12. PAGINATION (from pagination-alerts.css)
   ============================================================================= */

.pagination .page-link {
    color: var(--primary);
    border: none;
    margin: 0 5px;
    border-radius: 10px;
    padding: 8px 16px;
}

.pagination .page-link:hover {
    background: var(--primary);
    color: white;
}

.pagination .active .page-link {
    background: var(--primary);
    color: white;
}

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

.pagination-wrapper .page-item {
    display: inline-block;
}

.pagination-wrapper .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    background: white;
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}

.pagination-wrapper .page-link:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.pagination-wrapper .active .page-link {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.pagination-wrapper .disabled .page-link {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 576px) {
    .pagination-wrapper .page-link {
        min-width: 36px;
        height: 36px;
        padding: 0 10px;
        font-size: 0.85rem;
    }
}

/* =============================================================================
   13. ALERT MESSAGES (from pagination-alerts.css)
   ============================================================================= */

.alert-success {
    background-color: #d1fae5;
    border-color: #10b981;
    color: #065f46;
}

.alert-warning {
    background-color: #fef3c7;
    border-color: #f59e0b;
    color: #92400e;
}

.alert-danger {
    background-color: #fee2e2;
    border-color: #ef4444;
    color: #991b1b;
}

/* =============================================================================
   14. TABLE OF CONTENTS (from pagination-alerts.css)
   ============================================================================= */

.table-of-contents {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px 25px;
    margin: 30px 0;
}

.table-of-contents h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.2rem;
    color: #0f172a;
}

.table-of-contents ul {
    margin: 0;
    padding-left: 20px;
}

.table-of-contents li {
    margin-bottom: 8px;
}

.table-of-contents a {
    text-decoration: none;
    color: #2563eb;
    transition: color 0.3s ease;
}

.table-of-contents a:hover {
    color: #f59e0b;
    text-decoration: underline;
}

/* =============================================================================
   15. QUIZ META PILLS (from pagination-alerts.css)
   ============================================================================= */

.quiz-meta-pills {
    margin-bottom: 28px;
}

.quiz-meta-pills .pill {
    display: inline-block;
    background: #f1f5f9;
    border-radius: 40px;
    padding: 6px 16px;
    margin: 0 6px 8px;
    font-size: 0.8rem;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.quiz-meta-pills .pill i {
    margin-right: 6px;
    color: #2563eb;
    font-size: 0.8rem;
}

.quiz-meta-pills .pill-difficulty {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #92400e;
}

.quiz-meta-pills .pill-difficulty i {
    color: #f59e0b;
}

@media (max-width: 576px) {
    .quiz-meta-pills .pill {
        font-size: 0.7rem;
        padding: 4px 12px;
        margin: 0 4px 6px;
    }
}

/* =============================================================================
   16. GRAMMAR CONTENT & TABLES (from grammar-content.css)
   ============================================================================= */

/* Wider content for tables */
.single-post .container,
.single-page .container,
.page .container,
.single .container,
.postid .container {
    max-width: 100% !important;
    padding-left: 20px;
    padding-right: 20px;
}

@media (min-width: 992px) {
    .single-post .container,
    .single-page .container,
    .page .container,
    .single .container {
        max-width: 95% !important;
    }
}

@media (min-width: 1200px) {
    .single-post .container,
    .single-page .container,
    .page .container,
    .single .container {
        max-width: 1200px !important;
    }
}

@media (min-width: 1400px) {
    .single-post .container,
    .single-page .container,
    .page .container,
    .single .container {
        max-width: 1320px !important;
    }
}

/* Table styles - fixed width issue */
.entry-content table,
.single-content table,
.page-content table,
.wp-block-table {
    width: 100%;
    display: table;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.5rem 0;
    border-radius: 0.75rem;
    table-layout: auto;
}

@media (max-width: 768px) {
    .entry-content table,
    .single-content table,
    .page-content table,
    .wp-block-table {
        display: block;
        width: 100%;
    }
    .entry-content table td,
    .single-content table td,
    .page-content table td,
    .entry-content table th,
    .single-content table th,
    .page-content table th {
        white-space: nowrap;
    }
}

.entry-content table,
.single-content table,
.page-content table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.9rem;
    background: white;
}

.entry-content table th,
.single-content table th,
.page-content table th {
    background: var(--dark, #0f172a);
    color: white;
    padding: 0.75rem 1rem;
    font-weight: 600;
    border: 1px solid #334155;
}

.entry-content table td,
.single-content table td,
.page-content table td {
    padding: 0.75rem 1rem;
    border: 1px solid #e2e8f0;
    vertical-align: top;
}

.entry-content table tr:nth-child(even),
.single-content table tr:nth-child(even),
.page-content table tr:nth-child(even) {
    background-color: #f8fafc;
}

.table-wrapper {
    overflow-x: auto;
    margin: 1.5rem 0;
    border-radius: 0.75rem;
    width: 100%;
}

/* =============================================================================
   17. CARD HOVER EFFECTS (from custom.css)
   ============================================================================= */

.quiz-card,
.topic-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-card {
    transition: all 0.3s ease;
    background: #ffffff;
}

.hover-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
    border-color: #0d6efd !important;
}

.hover-card:hover .btn-outline-primary {
    background-color: #0d6efd;
    color: white;
}

/* =============================================================================
   18. ANIMATIONS (from custom.css)
   ============================================================================= */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
}

/* =============================================================================
   19. CUSTOM SCROLLBAR (from custom.css)
   ============================================================================= */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary);
}

/* =============================================================================
   20. BACK TO TOP BUTTON (from custom.css)
   ============================================================================= */

#backToTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--primary) !important;
    color: white !important;
    border: none;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 0;
    line-height: 1;
}

#backToTop:hover {
    background: var(--secondary) !important;
    transform: translateY(-3px);
}

#backToTop svg {
    width: 30px;
    height: 30px;
    display: block;
    margin: 0 auto;
    pointer-events: none;
}

/* =============================================================================
   21. PAGE TITLE ALIGNMENT (from custom.css)
   ============================================================================= */

.section-title,
.section-title h2,
.section-title p {
    text-align: center;
}

.page .section-title h2,
.page .entry-title,
.single-post .post-title,
.single .entry-title,
.single-quiz .quiz-header h1,
.single-topic .topic-header h1,
.archive .section-title h2,
.search .section-title h2,
.error-404 h2 {
    text-align: center;
}

/* =============================================================================
   22. SOCIAL SHARING STYLES (from custom.css)
   ============================================================================= */

.quiz-social-share {
    /* No animation here — element starts hidden (display:none) */
}

.quiz-social-share.is-visible {
    animation: fadeInUp 0.5s ease forwards;
}

.social-share-wrapper {
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    background: linear-gradient(135deg, #ffffff, #f8fafc);
}

.social-share-buttons {
    background: #f8fafc;
    padding: 20px 25px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
}

.share-label {
    display: inline-flex;
    align-items: center;
    color: #0f172a;
}

.share-label svg {
    width: 20px;
    height: 20px;
    color: #2563eb;
}

.btn-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
    gap: 10px;
    border: none;
    cursor: pointer;
}

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

.btn-facebook {
    background: #1877f2;
    color: white;
    border: none;
}
.btn-facebook:hover {
    background: #145dbf;
    color: white;
    transform: translateY(-2px);
}

.btn-twitter {
    background: #1da1f2;
    color: white;
    border: none;
}
.btn-twitter:hover {
    background: #1a8cd8;
    color: white;
    transform: translateY(-2px);
}

.btn-whatsapp {
    background: #25d366;
    color: white;
    border: none;
}
.btn-whatsapp:hover {
    background: #1da851;
    color: white;
    transform: translateY(-2px);
}

.btn-linkedin {
    background: #0077b5;
    color: white;
    border: none;
}
.btn-linkedin:hover {
    background: #006097;
    color: white;
    transform: translateY(-2px);
}

.btn-email {
    background: #6c757d;
    color: white;
    border: none;
}
.btn-email:hover {
    background: #5a6268;
    color: white;
    transform: translateY(-2px);
}

.btn-copy {
    background: #6c757d;
    color: white;
}
.btn-copy:hover {
    background: #5a6268;
    color: white;
    transform: translateY(-2px);
}

/* Custom message input */
.custom-message .input-group {
    max-width: 500px;
    margin: 0 auto;
}

.custom-message .form-control {
    border-radius: 50px 0 0 50px;
    border: 2px solid #e2e8f0;
    padding: 12px 20px;
}

.custom-message .form-control:focus {
    border-color: #2563eb;
    box-shadow: none;
}

.custom-message .btn-outline-primary {
    border-radius: 0 50px 50px 0;
    border: 2px solid #e2e8f0;
    border-left: none;
    padding: 0 20px;
}

/* Copy link toast notification */
.toast-container .toast {
    background: #0f172a;
    color: white;
    border-radius: 12px;
}

.toast-container .toast svg {
    width: 18px;
    height: 18px;
    color: #10b981;
}

/* Share score info */
.share-score-info {
    font-size: 0.9rem;
    border: 1px dashed #2563eb;
}

.share-score-info span:first-child {
    color: #2563eb;
    font-size: 1.1rem;
}

/* =============================================================================
   23. RESPONSIVE STYLES (from custom.css)
   ============================================================================= */

@media (max-width: 768px) {
    .single-content table td,
    .single-content table th,
    .page-content table td,
    .page-content table th {
        padding: 0.5rem;
        font-size: 0.75rem;
    }
    .wp-block-table::after {
        content: '← scroll →';
        display: block;
        text-align: center;
        font-size: 0.7rem;
        color: #64748b;
        margin-top: 5px;
    }
    .section-padding {
        padding: 40px 0;
    }
    .section-title h2 {
        font-size: 1.6rem;
    }
    .navbar-brand .custom-logo {
        max-height: 35px;
    }
    .single-post-header .post-title {
        font-size: 1.8rem;
    }
    .quiz-page-title {
        font-size: 1.8rem;
    }
    .quiz-page-excerpt {
        font-size: 1rem;
    }
    .btn-share {
        padding: 8px 18px;
        font-size: 0.85rem;
    }
    .share-buttons {
        gap: 8px;
    }
    .custom-quiz-cta {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    .custom-post-footer h3 {
        font-size: 1.3rem;
    }
    .btn-share span {
        display: none;
    }
    .btn-share {
        padding: 10px;
        justify-content: center;
    }
    .btn-share svg {
        margin: 0;
    }
}

@media (max-width: 576px) {
    .quiz-card,
    .topic-card {
        padding: 25px 18px;
    }
    .quiz-icon,
    .topic-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    .btn-share {
        padding: 8px 14px;
        font-size: 0.75rem;
    }
    .btn-share svg {
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 992px) {
    .section-title h2 {
        font-size: 2rem;
    }
    .daily-box h2 {
        font-size: 1.6rem;
    }
}

/* =============================================================================
   24. ADMIN BAR FIX (from grquiz-enhancements.css)
   ============================================================================= */

.admin-bar .navbar.sticky-top {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar .navbar.sticky-top {
        top: 46px;
    }
}

/* =============================================================================
   25. PRINT STYLES (from grquiz-enhancements.css)
   ============================================================================= */

@media print {
    .quiz-questions-seo {
        position: relative;
        width: auto;
        height: auto;
        padding: 20px;
        margin: 20px 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
        border: 1px solid #ddd;
        border-radius: 8px;
        background: white;
    }
    #posq-wrap,
    .quiz-meta-seo,
    .quiz-info,
    .more-related-quizzes,
    .hero-buttons,
    .navbar,
    footer {
        display: none !important;
    }
    .navbar,
    footer,
    .sidebar,
    .hero-buttons,
    .daily-box {
        display: none !important;
    }
    .quiz-card,
    .topic-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* =============================================================================
   26. ACCESSIBILITY & UTILITIES
   ============================================================================= */

/* Focus accessibility */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* SEO hidden content */
.seo-quiz-content,
.visually-hidden:not(:focus):not(:active) {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.seo-quiz-content * {
    margin: 0;
    padding: 0;
}

/* Quiz page header */
.quiz-page-header {
    text-align: center;
    margin-bottom: 2rem;
}

.quiz-page-title {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 800;
    margin-bottom: 0.75rem;
    color: var(--dark);
}

.quiz-page-excerpt {
    font-size: 1.1rem;
    color: var(--gray);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Quiz meta seo box */
.quiz-meta-seo {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
}

.quiz-meta-seo strong {
    color: var(--dark);
    font-weight: 600;
}

.quiz-meta-seo .badge {
    font-size: 0.75rem;
    padding: 0.35rem 0.75rem;
    border-radius: 50px;
}

@media (max-width: 768px) {
    .quiz-meta-seo .row {
        text-align: center;
    }
    .quiz-meta-seo .col-md-4 {
        margin-bottom: 12px;
    }
}

/* Homepage cards title color */
.front-page .quiz-card h3.h5,
.front-page .quiz-card h3,
.front-page .topic-card h3.h5,
.front-page .topic-card h3 {
    color: #0f172a;
}

/* Custom post footer */
.custom-post-footer {
    padding: 20px 0;
}

.custom-post-footer hr {
    border: none;
    border-top: 2px solid #e2e8f0;
}

.custom-post-footer h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #0f172a;
}

.custom-post-footer p {
    font-size: 1rem;
    line-height: 1.6;
    color: #334155;
    margin-bottom: 20px;
}

.custom-quiz-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #f59e0b;
    color: #0f172a;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.custom-quiz-cta:hover {
    background: #d97706;
    transform: translateY(-2px);
    color: #0f172a;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.custom-quiz-cta svg {
    width: 20px;
    height: 20px;
}

.read-next-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.read-next-list li {
    margin-bottom: 12px;
    padding-left: 0;
}

.read-next-list li a {
    text-decoration: none;
    color: #2563eb;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-block;
}

.read-next-list li a:hover {
    color: #f59e0b;
    transform: translateX(5px);
}

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