/* ==========================================================
   PokeTeamOn M7.1 Human Correction R7
   Mobile navigation + warm-surface coherence
   ========================================================== */

:root {
    --m71-r7-page: #f3f0e1;
    --m71-r7-header: #f8f5ea;
    --m71-r7-panel: #f7f3e6;
    --m71-r7-section: #eeeadd;
    --m71-r7-footer: #ece8d9;
    --m71-r7-line: rgba(103, 92, 62, 0.18);
    --m71-r7-overlay: rgba(11, 23, 52, 0.22);
}

/*
 * The logo asset is already transparent. Make every wrapper around it
 * transparent too so no legacy white rectangle can appear on the warm header.
 */
.site-header .header-inner,
.site-header .brand,
.site-header .brand img {
    background: transparent !important;
    background-color: transparent !important;
}

/*
 * Replace the legacy cool gray/blue homepage band with a warm family tone.
 * Keep the cards themselves white.
 */
.section-muted {
    background: var(--m71-r7-section) !important;
}

.section-muted .feature-grid > article {
    background: #fff !important;
}

/* Harmonize footer with the same warm family. */
.site-footer {
    background: var(--m71-r7-footer) !important;
    border-top-color: var(--m71-r7-line) !important;
}

/* Mobile navigation control: no floating pure-white square. */
.mobile-menu summary {
    position: relative;
    z-index: 1002;
    background: var(--m71-r7-panel) !important;
    border-color: var(--m71-r7-line) !important;
    color: #0b1734 !important;
    box-shadow: 0 4px 14px rgba(11, 23, 52, 0.05);
}

/* The open menu receives an intentional backdrop layer. */
.mobile-menu[open]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999;
    background: var(--m71-r7-overlay);
    pointer-events: none;
}

/*
 * Warm drawer surface, stronger separation, and tighter link rhythm.
 * Existing routing / information architecture is untouched.
 */
.mobile-menu-panel {
    z-index: 1001 !important;
    background: var(--m71-r7-panel) !important;
    border-color: var(--m71-r7-line) !important;
    box-shadow:
        0 18px 44px rgba(11, 23, 52, 0.16),
        0 2px 8px rgba(11, 23, 52, 0.06) !important;
    overflow: hidden;
}

.mobile-menu-panel a {
    padding-top: 0.78rem !important;
    padding-bottom: 0.78rem !important;
    border-bottom: 1px solid rgba(103, 92, 62, 0.10);
}

.mobile-menu-panel a:last-child {
    border-bottom: 0;
}

.mobile-menu-panel a:hover,
.mobile-menu-panel a:focus-visible {
    background: rgba(255, 255, 255, 0.58) !important;
}

/*
 * The same summary button must visibly become a close control while open.
 * No JS is needed; native <details> continues to own the state.
 */
.mobile-menu[open] summary span {
    font-size: 0 !important;
    line-height: 1 !important;
}

.mobile-menu[open] summary span::before {
    content: "×";
    display: inline-block;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1;
    transform: translateY(-1px);
}

@media (max-width: 600px) {
    .site-header {
        background: rgba(248, 245, 234, 0.98) !important;
    }

    .mobile-menu-panel {
        background: var(--m71-r7-panel) !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .mobile-menu[open]::before {
        background: rgba(11, 23, 52, 0.16);
    }

    .site-header {
        background: var(--m71-r7-header) !important;
    }
}