.theme-page-shell {
    background-color: var(--bg-deep, #01061D);
    padding-top: 20px;
}

/* ============================================================
   Shared footer layout — consistent spacing on every page
   ============================================================ */
footer.site-footer#footer {
    padding: clamp(32px, 5vw, 60px) 0 clamp(20px, 3vw, 28px);
    position: relative;
    overflow: hidden;
}

footer.site-footer#footer .container {
    position: relative;
    z-index: 2;
}

footer.site-footer#footer .footer-desc-text {
    margin-bottom: clamp(24px, 4vw, 40px);
}

footer.site-footer#footer .footer-nav-row {
    margin-bottom: clamp(24px, 4vw, 40px) !important;
}

footer.site-footer#footer .footer-social-block {
    margin-bottom: clamp(12px, 2vw, 20px);
}

/* ============================================================
   Shared, theme-independent UI components.
   Extracted verbatim from per-page inline <style> blocks so the
   rendered result is unchanged.

   NOTE: Color theme variables (:root) and other drifted components
   (nav, footer, lang-switcher) intentionally remain inline per page,
   because their values differ from page to page and unifying them
   would change appearance. See chat history for the analysis.

   Link order: include this file in <head> BEFORE the page's inline
   <style> so per-page responsive overrides (e.g. .hamburger-btn
   display at <=1023px) still win.
   ============================================================ */

/* ── Mobile Hamburger Toggle ── */
.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: var(--tap-min);
    height: var(--tap-min);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    gap: 6px;
    z-index: 1100;
    order: 3;
    flex-shrink: 0;
    border-radius: 8px;
    transition: background 0.2s;
}

.hamburger-btn:hover { background: rgba(255, 255, 255, 0.08); }

.hamburger-btn:focus-visible {
    outline: 2px solid var(--accent-blue, #FFA629);
    outline-offset: 2px;
}

/* Each row = dot + line */
.hamburger-btn span {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 28px;
    height: auto;
    background: transparent;
    flex-direction: row-reverse;  /* dot on the right (RTL start) */
    transition: all 0.3s ease;
    transform-origin: center;
}

/* The dot */
.hamburger-btn span::before {
    content: '';
    width: 5px;
    height: 5px;
    background: #FFA629;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

/* The line */
.hamburger-btn span::after {
    content: '';
    width: 17px;   /* 28px total - 5px dot - 6px gap */
    height: 2px;
    background: #FFA629;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* X (close) state */
.hamburger-btn.is-open span::before {
    opacity: 0;   /* hide dots when open */
}

.hamburger-btn.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger-btn.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger-btn.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
