/* debug.css - Debug text overlay and media query indicator */

/* Debug text overlay */
.debug-text {
    position: fixed;
    bottom: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 1);
    color: var(--accent-primary);
    padding: 10px;
    font: 0.9rem 'Open Sans', Arial, sans-serif;
    z-index: 11000;
    border-radius: 5px;
    cursor: pointer;
    max-width: 90%;
}

.debug-text[data-minimized="true"] {
    height: 15px;
    line-height: 15px;
    padding: 0 10px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
}

/* Media query indicator */
body::before {
    content: "Default (No Media Query)";
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font: 0.8rem 'Montserrat', sans-serif;
    padding: 0.5rem;
    border-radius: 4px;
    z-index: 9999;
    opacity: 0.8;
}

/* Media Queries */
@media (orientation: portrait) and (max-width: 767px) {
    body::before {
        content: "Media Query 1: Portrait Phone (≤ 767px)";
    }
}

@media (orientation: landscape) and (max-width: 767px) {
    body::before {
        content: "Media Query 2: Small Landscape (≤ 767px)";
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    body::before {
        content: "Media Query 3: Tablets and Medium Screens (768px - 1023px)";
    }
}

@media (orientation: landscape) and (min-width: 768px) and (max-width: 1023px) {
    body::before {
        content: "Media Query 4: Tablet Landscape (768px - 1023px)";
    }
}

@media (min-width: 1024px) {
    body::before {
        content: "Media Query 5: Larger Screens (≥ 1024px)";
    }
}