/**
 * Plugin Compatibility CSS
 *
 * Fixes layout conflicts between Tokutei theme and plugins
 * - tokutei-grammar
 * - tokutei-exams
 * - tokutei-vocabulary
 *
 * @package Tokutei
 * @since 1.3.4
 */

/* ============================================================================
   CRITICAL FIX: Prevent plugin containers from being hidden by sticky header
   ============================================================================ */

/**
 * Grammar Plugin (.nptn-spa-app)
 * Plugin uses full-page SPA template with get_header()
 */
.nptn-page .nptn-spa-app,
.nptn-page .nptn-spa-container {
    margin-top: 0 !important;
    padding-top: 20px !important;
}

/**
 * Exams Plugin (if using similar structure)
 */
.tokutei-exams-page .exams-container,
.tokutei-exams-spa-app {
    margin-top: 0 !important;
    padding-top: 20px !important;
}

/**
 * Vocabulary Plugin (if using similar structure)
 */
.tokutei-vocabulary-page .vocabulary-container,
.tokutei-vocabulary-spa-app {
    margin-top: 0 !important;
    padding-top: 20px !important;
}

/* ============================================================================
   FIX: Site content positioning with sticky header
   ============================================================================ */

/**
 * Main content wrapper should not have negative margins
 * that cause overlap with sticky header
 */
#content.site-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative;
}

/**
 * For admin users with admin bar (32px height on desktop)
 * Push everything down slightly
 */
body.admin-bar:not(.wp-admin) #content.site-content {
    /* Already handled by functions.php CSS */
}

/* ============================================================================
   FIX: Plugin page wrappers
   ============================================================================ */

/**
 * Ensure plugin SPA containers don't overlap with theme elements
 */
.nptn-spa-app,
.tokutei-exams-spa-app,
.tokutei-vocabulary-spa-app {
    position: relative !important;
    z-index: 1 !important;
    clear: both !important;
}

/**
 * Plugin inner containers
 */
.nptn-spa-container,
.tokutei-exams-container,
.tokutei-vocabulary-container {
    position: relative !important;
    margin-top: 0 !important;
    padding-top: 20px !important;
}

/* ============================================================================
   FIX: Header positioning consistency
   ============================================================================ */

/**
 * Ensure header stays sticky on all page types
 * (Including plugin pages)
 */
.site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
}

/**
 * Admin bar adjustment for logged-in admins
 */
body.admin-bar .site-header {
    top: 32px !important; /* WordPress admin bar height */
}

@media screen and (max-width: 782px) {
    body.admin-bar .site-header {
        top: 46px !important; /* Mobile admin bar height */
    }
}

/* ============================================================================
   FIX: Page container spacing
   ============================================================================ */

/**
 * #page wrapper should not interfere with plugin layouts
 */
#page.site {
    position: relative;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/**
 * For pages with breadcrumbs, ensure proper spacing
 */
#page.site.has-breadcrumbs {
    /* Breadcrumbs handle their own spacing */
}

/* ============================================================================
   MOBILE RESPONSIVE FIXES
   ============================================================================ */

@media (max-width: 768px) {
    /**
     * On mobile, ensure plugin containers don't get cut off
     */
    .nptn-spa-container,
    .tokutei-exams-container,
    .tokutei-vocabulary-container {
        padding-top: 15px !important;
    }

    /**
     * Mobile breadcrumbs spacing
     */
    .breadcrumbs {
        margin-bottom: 15px !important;
    }
}

/* ============================================================================
   VOCABULARY PAGE SPECIFIC FIXES
   ============================================================================ */

/**
 * If vocabulary page shows "Template không tồn tại" but displays correctly,
 * it means the layout is actually working. This is just a placeholder message.
 * The proper template will be created if needed.
 */
.tokutei-vocabulary-page .no-template-message {
    display: none !important;
}

/* ============================================================================
   DEBUGGING HELPERS (Remove in production)
   ============================================================================ */

/**
 * Uncomment these to visually debug layout issues
 */
/*
.site-header {
    outline: 3px solid red !important;
}

.breadcrumbs {
    outline: 3px solid blue !important;
}

.nptn-spa-app,
.tokutei-exams-spa-app,
.tokutei-vocabulary-spa-app {
    outline: 3px solid green !important;
}

#content.site-content {
    outline: 3px solid orange !important;
}
*/

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    /**
     * Remove sticky positioning for print
     */
    .site-header {
        position: static !important;
    }

    /**
     * Ensure content is visible
     */
    .nptn-spa-app,
    .tokutei-exams-spa-app,
    .tokutei-vocabulary-spa-app {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}