/**
 * Legacy Content Protection CSS
 * 
 * This file protects legacy page content from Tailwind CSS resets and base styles.
 * It ensures that legacy content containers maintain their original styling
 * while allowing the new header/footer components to use Tailwind CSS.
 */

/* Prevent Tailwind base styles from affecting legacy content containers */
.content-constrain {
    /* Reset any Tailwind resets that might affect this container */
    all: revert;
    /* Ensure proper box model */
    box-sizing: border-box;
    /* Protect font settings */
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/* Protect legacy content within content-constrain */
.content-constrain * {
    /* Prevent Tailwind from resetting margins/padding on legacy elements */
    margin: revert;
    padding: revert;
}

/* Protect specific legacy elements from Tailwind resets */
.content-constrain h1,
.content-constrain h2,
.content-constrain h3,
.content-constrain h4,
.content-constrain h5,
.content-constrain h6 {
    margin: revert;
    padding: revert;
    font-weight: revert;
    line-height: revert;
    font-size: revert;
    color: revert;
}

.content-constrain p {
    margin: revert;
    padding: revert;
    line-height: revert;
}

.content-constrain ul,
.content-constrain ol {
    margin: revert;
    padding: revert;
    list-style: revert;
}

.content-constrain li {
    margin: revert;
    padding: revert;
    list-style: revert;
}

.content-constrain a {
    color: revert;
    text-decoration: revert;
}

.content-constrain img {
    max-width: revert;
    height: revert;
    display: revert;
}

.content-constrain table {
    border-collapse: revert;
    border-spacing: revert;
    width: revert;
}

.content-constrain th,
.content-constrain td {
    padding: revert;
    border: revert;
    text-align: revert;
}

/* Protect legacy header image */
.header-image {
    all: revert;
    position: revert;
    width: revert;
    height: revert;
    background: revert;
    background-size: revert;
    background-position: revert;
    background-repeat: revert;
}

/* Protect legacy footer containers */
#footer-container,
.colofonBackgroundContainer,
.colofonBackground {
    all: revert;
    margin: revert;
    padding: revert;
    font-family: revert;
    font-size: revert;
    line-height: revert;
    color: revert;
}

/* Ensure modern header/footer don't interfere with legacy content */
.cob-modern-header {
    /* Isolate modern header from legacy content */
    position: relative;
    z-index: 50;
    contain: layout style paint;
}

.cob-modern-footer {
    /* Isolate modern footer from legacy content */
    position: relative;
    z-index: 10;
    contain: layout style paint;
}

/* Prevent Tailwind utility classes from affecting legacy content */
.content-constrain [class*='tw-'] {
    /* Only apply Tailwind classes if explicitly added to legacy content */
    /* This prevents accidental application */
}

/* Protect legacy forms */
.content-constrain form,
.content-constrain input,
.content-constrain textarea,
.content-constrain select,
.content-constrain button {
    font-family: revert;
    font-size: revert;
    line-height: revert;
    margin: revert;
    padding: revert;
    border: revert;
    background: revert;
    color: revert;
}

/* Protect legacy widgets and sidebars */
.content-constrain .widget,
.content-constrain .widget-title,
.content-constrain .sidebar {
    all: revert;
    margin: revert;
    padding: revert;
    font-family: revert;
    font-size: revert;
    line-height: revert;
}

/* Ensure body classes don't interfere with legacy content when Tailwind is loaded */
body:not(.has-tailwind) .content-constrain {
    /* Additional protection when Tailwind is not explicitly enabled */
}

/* Protect legacy admin bar */
#super-admin-bar {
    all: revert;
    position: fixed !important;
    bottom: 12px !important;
    right: 12px !important;
    z-index: 10000 !important;
    padding: 12px !important;
    background-color: #86a319 !important;
    color: white !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Additional protection for common legacy class names */
.content-constrain .entry-content,
.content-constrain .post-content,
.content-constrain .page-content {
    all: revert;
    font-family: revert;
    font-size: revert;
    line-height: revert;
    color: revert;
}

/* Hide old navigation and footer when new Blade components are present */
body:has(.cob-modern-header) .navigation-background,
body:has(.cob-modern-header) .navigation,
body:has(.cob-modern-header) .green-line-menu,
body:has(.cob-modern-header) .search-container-low-res {
    display: none !important;
}

/* Hide old footer when new Blade footer is present */
body:has(.cob-modern-footer)
    #footer-container:not(.colofonBackgroundContainer) {
    display: none !important;
}

/* Fallback for browsers that don't support :has() - use class-based approach */
body.has-modern-header .navigation-background,
body.has-modern-header .navigation,
body.has-modern-header .green-line-menu,
body.has-modern-header .search-container-low-res {
    display: none !important;
}

body.has-modern-footer #footer-container:not(.colofonBackgroundContainer) {
    display: none !important;
}

/* Override old navigation styles from main.css when new navbar is present */
/* This ensures old CSS doesn't interfere with new components */
body.has-modern-header .navigation,
body.has-modern-header .navigation *,
body.has-modern-header .navigation__wrapper,
body.has-modern-header .navigation__main,
body.has-modern-header .navigation-background {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Ensure new header/footer are not affected by old navigation styles */
/* Use CSS containment to isolate new components from legacy styles */
.cob-modern-header,
.cob-modern-footer {
    /* Isolate from legacy styles */
    contain: layout style paint;
    /* Ensure proper stacking context */
    position: relative;
    z-index: 50;
    /* Prevent old CSS from affecting these containers */
    box-sizing: border-box;
}

/* Prevent old navigation CSS from affecting new components */
body.has-modern-header .cob-modern-header,
body.has-modern-footer .cob-modern-footer {
    /* Override any old navigation styles that might leak through */
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* Media query protection - ensure responsive behavior is preserved */
@media screen and (max-width: 768px) {
    .content-constrain {
        all: revert;
    }
}