/* ═══════════════════════════════════════════════════════════════
   Audiogarden OS — Header & Footer (v10.5.37)
   Replaces Elementor Pro Theme Builder header/footer.
   Brand: white header (#fff, 1px #1f1f1f rule) matching the live site, dark footer.
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ── */
:root {
    /* v10.5.49: measured off the live Elementor header so replacing it changes
       nothing a visitor can see: white ground, a full-strength 1px rule underneath,
       #1f1f1f text, and an 80px bar carrying a 73px logo. */
    --agos-header-bg: #ffffff;
    --agos-header-text: #1f1f1f;
    --agos-header-text-muted: #5b5b5b;
    --agos-header-border: #1f1f1f;
    --agos-header-wash: rgba(31, 31, 31, 0.06);
    --agos-header-accent: #2563eb;
    --agos-header-accent-hover: #1d4ed8;
    --agos-header-height: 80px;
    --agos-footer-bg: #0f172a;
    --agos-footer-text: #cbd5e1;
    --agos-footer-heading: #f8fafc;
    /* v10.5.49: Figtree first — the live header sets its nav in it, and the Elementor
       kit still loads the face after the Theme Builder header is gone. The system stack
       stays behind it so nothing breaks if that ever stops being true. */
    --agos-font: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ═══ HEADER ═══ */
.agos-site-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: var(--agos-header-bg);
    border-bottom: 1px solid var(--agos-header-border);
    font-family: var(--agos-font);
}

/* WP admin bar offset */
.admin-bar .agos-site-header {
    top: 32px;
}
@media (max-width: 782px) {
    .admin-bar .agos-site-header { top: 46px; }
}

.agos-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: var(--agos-header-height);
    display: flex;
    align-items: center;
    gap: 24px;
}

/* ── Logo ── */
.agos-header-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--agos-header-text);
    flex-shrink: 0;
}
.agos-header-logo:hover {
    opacity: 0.9;
}
.agos-logo-img {
    height: 73px;
    width: auto;
    object-fit: contain;
}

/* ── Desktop Navigation ── */
.agos-header-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}
.agos-header-nav-link {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    font-size: 16px;
    font-weight: 400;
    color: var(--agos-header-text);
    text-decoration: none;
    border-radius: 8px;
    transition: color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.agos-header-nav-link:hover {
    color: var(--agos-header-text);
    background: var(--agos-header-wash);
}
.agos-header-nav-link--active {
    color: var(--agos-header-text);
    position: relative;
}
.agos-header-nav-link--active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 16px;
    right: 16px;
    height: 2px;
    background: var(--agos-header-accent);
    border-radius: 2px;
}

/* ── Header Actions (right side) ── */
.agos-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Language switcher in header — dark variant */
.agos-header-lang {
    background: var(--agos-header-wash) !important;
    border-radius: 8px;
    padding: 3px;
}
.agos-header-lang .ag-ls-btn {
    color: var(--agos-header-text-muted);
    background: transparent;
    border: none;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: var(--agos-font);
}
.agos-header-lang .ag-ls-btn:hover {
    color: var(--agos-header-text);
    background: var(--agos-header-wash);
}
.agos-header-lang .ag-ls-btn--active {
    background: var(--agos-header-accent) !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
}

/* ── Client Portal Button ── */
.agos-header-portal-btn {
    display: inline-flex;
    align-items: center;
    padding: 9px 22px;
    font-size: 13px;
    font-weight: 600;
    color: var(--agos-header-text);
    background: transparent;
    border: 1px solid var(--agos-header-border);
    border-radius: 3px;
    text-decoration: none;
    transition: all 0.25s ease;
    white-space: nowrap;
    font-family: var(--agos-font);
    letter-spacing: 0.01em;
}
.agos-header-portal-btn:hover {
    background: var(--agos-header-accent);
    border-color: var(--agos-header-accent);
    color: #fff;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.3);
}

/* ── Hamburger (mobile only) ── */
.agos-header-hamburger {
    display: none !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s;
}
.agos-header-hamburger:hover {
    background: var(--agos-header-wash);
}
.agos-header-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--agos-header-text);
    border-radius: 1px;
    transition: all 0.25s ease;
}
.agos-header-hamburger[aria-expanded="true"] span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.agos-header-hamburger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.agos-header-hamburger[aria-expanded="true"] span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ── Mobile Navigation Overlay ── */
.agos-mobile-nav {
    display: none;
    position: fixed;
    top: var(--agos-header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--agos-header-bg);
    z-index: 9998;
    padding: 24px;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.admin-bar .agos-mobile-nav {
    top: calc(var(--agos-header-height) + 32px);
}
@media (max-width: 782px) {
    .admin-bar .agos-mobile-nav { top: calc(var(--agos-header-height) + 46px); }
}
.agos-mobile-nav.agos-mobile-nav--open {
    display: block;
    opacity: 1;
    transform: translateY(0);
}
.agos-mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.agos-mobile-nav-link {
    display: block;
    padding: 14px 16px;
    font-size: 16px;
    font-weight: 500;
    color: var(--agos-header-text-muted);
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.15s;
}
.agos-mobile-nav-link:hover,
.agos-mobile-nav-link:active {
    color: var(--agos-header-text);
    background: rgba(255, 255, 255, 0.06);
}
.agos-mobile-nav-link--portal {
    margin-top: 12px;
    color: var(--agos-header-accent);
    font-weight: 600;
    border: 1.5px solid var(--agos-header-accent);
    text-align: center;
    border-radius: 10px;
}
.agos-mobile-nav-lang {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}

/* ═══ FOOTER ═══ */
.agos-site-footer {
    background: var(--agos-footer-bg);
    color: var(--agos-footer-text);
    font-family: var(--agos-font);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 0;
}
.agos-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px 32px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
}

/* Footer Logo & Description */
.agos-footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--agos-footer-heading);
    margin-bottom: 12px;
}
.agos-footer-brand-text {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    display: block;
    margin-bottom: 12px;
}
.agos-footer-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--agos-footer-text);
    margin: 0;
    max-width: 360px;
}

/* Footer Columns */
.agos-footer-heading {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--agos-footer-heading);
    margin: 0 0 16px;
}
.agos-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.agos-footer-links li {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.5;
}
.agos-footer-links a {
    color: var(--agos-footer-text);
    text-decoration: none;
    transition: color 0.15s;
}
.agos-footer-links a:hover {
    color: #fff;
}
.agos-footer-contact li {
    color: var(--agos-footer-text);
}

/* Footer Bottom */
.agos-footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.agos-footer-copy {
    font-size: 13px;
    color: var(--agos-header-text-muted);
}
.agos-footer-legal {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}
.agos-footer-legal a {
    color: var(--agos-header-text-muted);
    text-decoration: none;
    transition: color 0.15s;
}
.agos-footer-legal a:hover {
    color: #fff;
}
.agos-footer-dot {
    color: var(--agos-header-text-muted);
    opacity: 0.5;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 960px) {
    .agos-header-nav {
        display: none;
    }
    .agos-header-portal-btn {
        display: none;
    }
    .agos-header-hamburger {
        display: flex !important;
    }
    .agos-header-inner {
        gap: 12px;
    }
    .agos-footer-inner {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 32px 24px 24px;
    }
    .agos-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .agos-header-inner {
        padding: 0 16px;
        height: 60px;
    }
    .agos-logo-img { height: 42px; }
    .agos-footer-logo-img { height: 34px; }
    .agos-mobile-nav { padding: 16px; }
    .agos-footer-inner { padding: 24px 16px 16px; }
    .agos-footer-bottom { padding: 16px; }
    :root { --agos-header-height: 60px; }
}

/* ═══ Prevent Elementor/Hello theme default header/footer ═══ */
.site-header,
.site-footer,
.hfe-header,
.hfe-footer {
    display: none !important;
}

/* Hide standalone legal footer bar (LegalPages renders one outside our footer) */
body > .agos-footer-legal {
    display: none !important;
}

/* Hide WP page title (Hello Elementor renders it, live site doesn't show it) */
.page .entry-title,
.page .page-title,
.page .entry-header,
body.page .site-main > .page-header,
body.page .site-main > article > .entry-header {
    display: none !important;
}

/* Body padding for sticky header */
body:not(.agos-portal-body) {
    padding-top: 0;
}

/* Ensure footer sticks to bottom on short pages */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.site-main,
main {
    flex: 1;
}

/* ── Full-width layout for all pages ── */
body.page .site-main .entry-content,
body.page .site-main > article,
body.page .site-main {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}