/**
 * TCF Exam Plugin - CSS Namespace Wrapper
 * This file provides CSS isolation to prevent conflicts with theme/plugin styles
 * Version: 1.0.0
 */

/*
 * All plugin styles are scoped under .tcf-plugin-wrapper
 * This prevents conflicts with other WordPress themes and plugins
 *
 * Exception: CSS Variables (:root) and body-level styles are kept global
 * as they need to work at document level
 */

/* Keep CSS variables at root level for proper cascade */
:root {
    --tcf-primary: #1e5799;
    --tcf-secondary: #2989d8;
    --tcf-success: #28a745;
    --tcf-warning: #ffc107;
    --tcf-danger: #dc3545;
    --tcf-light: #f8f9fa;
    --tcf-dark: #343a40;
    --tcf-border: #dee2e6;
}

/* Body-level styles that need to be applied globally for the test page */
body.tcf-plugin-wrapper.tcf-exam-body {
    background-color: #f8f9fa;
    margin: 0;
    min-height: 100vh;
    padding-top: 60px;
    overflow-x: hidden;
}

body.tcf-plugin-wrapper.tcf-exam-body.has-theme-header {
    padding-top: 120px;
}

@media (max-width: 768px) {
    body.tcf-plugin-wrapper.tcf-exam-body {
        padding-top: 90px;
        padding-bottom: 60px;
    }

    body.tcf-plugin-wrapper.tcf-exam-body.has-theme-header {
        padding-top: 100px;
    }
}

/*
 * Namespace Wrapper: All plugin styles are now scoped
 * This prevents conflicts with other CSS in WordPress
 */
.tcf-plugin-wrapper {
    /* Box model reset for plugin content */
    box-sizing: border-box;
}

.tcf-plugin-wrapper *,
.tcf-plugin-wrapper *::before,
.tcf-plugin-wrapper *::after {
    box-sizing: border-box;
}

/* Reset potential theme interference for the exam interface */
.tcf-plugin-wrapper #tcf-test-screen *:not(i):not(.fa):not(.fas):not(.far):not(.fab) {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Prevent theme styles from breaking button layouts */
.tcf-plugin-wrapper button,
.tcf-plugin-wrapper .btn {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Ensure proper z-index stacking for plugin elements */
.tcf-plugin-wrapper .tcf-theme-header-container {
    position: fixed;
    z-index: 1030;
}

.tcf-plugin-wrapper .bottom-navigation {
    z-index: 1040;
}

.tcf-plugin-wrapper .mobile-nav-grid-wrapper {
    z-index: 1025;
}

/* Print styles should work globally */
@media print {
    body.tcf-plugin-wrapper .tcf-header,
    body.tcf-plugin-wrapper .tcf-navigation,
    body.tcf-plugin-wrapper .bottom-navigation,
    body.tcf-plugin-wrapper .mobile-sidebar-toggle,
    body.tcf-plugin-wrapper .btn,
    body.tcf-plugin-wrapper .timer-section,
    body.tcf-plugin-wrapper audio,
    body.tcf-plugin-wrapper .review-audio,
    body.tcf-plugin-wrapper #restart-test,
    body.tcf-plugin-wrapper #print-results {
        display: none !important;
    }
}

/* Accessibility: Focus states should be visible */
.tcf-plugin-wrapper *:focus {
    outline: 2px solid var(--tcf-primary);
    outline-offset: 2px;
}

.tcf-plugin-wrapper button:focus,
.tcf-plugin-wrapper a:focus {
    outline-offset: 3px;
}

/* Ensure Bootstrap classes work within the plugin wrapper */
.tcf-plugin-wrapper .container,
.tcf-plugin-wrapper .row,
.tcf-plugin-wrapper .col,
.tcf-plugin-wrapper [class*="col-"] {
    /* Bootstrap grid should work normally */
    max-width: 100%;
}

/* Prevent theme from overriding display properties of show/hide utilities */
.tcf-plugin-wrapper .d-none {
    display: none !important;
}

.tcf-plugin-wrapper .d-block {
    display: block !important;
}

.tcf-plugin-wrapper .d-flex {
    display: flex !important;
}

.tcf-plugin-wrapper .d-grid {
    display: grid !important;
}

/* Mobile responsive utilities */
@media (max-width: 767px) {
    .tcf-plugin-wrapper .d-md-none {
        display: none !important;
    }

    .tcf-plugin-wrapper .d-md-block {
        display: block !important;
    }
}

@media (min-width: 768px) {
    .tcf-plugin-wrapper .d-md-none {
        display: none !important;
    }

    .tcf-plugin-wrapper .d-md-block {
        display: block !important;
    }
}

/* Mobile and tablet - hide d-lg-block elements */
@media (max-width: 991px) {
    .tcf-plugin-wrapper .d-lg-block {
        display: none !important;
    }

    .tcf-plugin-wrapper .d-lg-none {
        display: block !important;
    }
}

/* Desktop - show d-lg-block elements */
@media (min-width: 992px) {
    .tcf-plugin-wrapper .d-lg-none {
        display: none !important;
    }

    .tcf-plugin-wrapper .d-lg-block {
        display: block !important;
    }
}

/* Theme Header isolation - prevent theme styles from breaking the header */
.tcf-plugin-wrapper .tcf-theme-header-container * {
    max-width: 100%;
    box-sizing: border-box;
}

/* Ensure WordPress admin bar doesn't interfere */
body.tcf-plugin-wrapper.tcf-exam-body.admin-bar .tcf-theme-header-container {
    top: 32px;
}

body.tcf-plugin-wrapper.tcf-exam-body.admin-bar {
    padding-top: 152px; /* 120px header + 32px admin bar */
}

@media (max-width: 782px) {
    body.tcf-plugin-wrapper.tcf-exam-body.admin-bar .tcf-theme-header-container {
        top: 46px;
    }

    body.tcf-plugin-wrapper.tcf-exam-body.admin-bar {
        padding-top: 146px; /* 100px header + 46px admin bar */
    }
}

/* Theme mode print: hide theme structural elements, show only exam content */
@media print {
    body.tcf-plugin-wrapper.tcf-exam-body header,
    body.tcf-plugin-wrapper.tcf-exam-body footer,
    body.tcf-plugin-wrapper.tcf-exam-body aside,
    body.tcf-plugin-wrapper.tcf-exam-body #wpadminbar {
        display: none !important;
    }

    body.tcf-plugin-wrapper.tcf-exam-body .tcf-exam-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}