/*
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)
   7.  BLOG POST STYLES
   8.  SINGLE POST STYLES
   9.  DAILY QUIZ BOX
   10. SIDEBAR STYLES
   11. FOOTER STYLES
   12. PAGINATION
   13. ALERT MESSAGES
   14. TABLE OF CONTENTS
   15. QUIZ META PILLS
   16. GRAMMAR CONTENT & TABLES
   17. CARD HOVER EFFECTS
   18. ANIMATIONS
   19. CUSTOM SCROLLBAR
   20. BACK TO TOP BUTTON
   21. PAGE TITLE ALIGNMENT
   22. SOCIAL SHARING STYLES
   23. RESPONSIVE STYLES
   24. ADMIN BAR FIX
   25. PRINT STYLES
   26. ACCESSIBILITY & UTILITIES
   27. ADDITIONAL FIXES & ENHANCEMENTS
   ============================================================================= */

/* =============================================================================
   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)
   ============================================================================= */

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

/* Additional heading styles for quiz cards */
.quiz-card h3,
.topic-card h3 {
    font-weight: 700;
    margin-bottom: 12px;
    font-size: 1.2rem;
    color: var(--dark);
}

.quiz-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: #0f172a;
}

/* SVG icon sizing for quiz/topic cards */
.quiz-icon svg,
.topic-icon svg {
    width: 40px;
    height: 40px;
    display: block;
}

/* 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;
    }
    .quiz-icon svg,
    .topic-icon svg {
        width: 30px;
        height: 30px;
    }
}

/* =============================================================================
   7. BLOG POST STYLES
   ============================================================================= */

.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
   ============================================================================= */

.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
   ============================================================================= */

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

.daily-box .badge svg {
    width: 14px;
    height: 14px;
    display: inline-block;
    vertical-align: middle;
}

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

/* =============================================================================
   10. SIDEBAR STYLES
   ============================================================================= */

.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
   ============================================================================= */

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
   ============================================================================= */

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

/* Pagination SVG icon alignment */
.pagination-wrapper .page-link svg,
.pagination-wrapper .page-numbers svg {
    width: 14px;
    height: 14px;
    display: block;
}

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

/* =============================================================================
   13. ALERT MESSAGES
   ============================================================================= */

.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
   ============================================================================= */

.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
   ============================================================================= */

.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
   ============================================================================= */

/* 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
   ============================================================================= */

.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
   ============================================================================= */

@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
   ============================================================================= */

::-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
   ============================================================================= */

#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
   ============================================================================= */

.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
   ============================================================================= */

.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
   ============================================================================= */

@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
   ============================================================================= */

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

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

/* =============================================================================
   25. PRINT STYLES
   ============================================================================= */

@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);
}

/* SVG icon alignment helper */
svg.bi {
    vertical-align: middle;
}

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

/* =============================================================================
   27. ADDITIONAL FIXES & ENHANCEMENTS
   ============================================================================= */

/* Topic content width control for better readability */
.single-topic .topic-content {
    max-width: 100%;
}

@media (min-width: 1200px) {
    .single-topic .topic-content {
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Contact page icon sizing */
.contact-info-item .contact-icon svg {
    width: 24px;
    height: 24px;
}

/* Search results icon sizing */
.search-result-item .quiz-icon svg {
    width: 50px;
    height: 50px;
}

@media (max-width: 576px) {
    .search-result-item .quiz-icon svg {
        width: 40px;
        height: 40px;
    }
}