/**
 * Layout — Container, Section, Navigation, Footer
 * @package Brightn8_Safeguard
 */

/* === CONTAINER & SECTION === */
.bn8-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}
.bn8-section { padding: var(--section-pad) 0; }
.bn8-text-center { text-align: center; }

/* === SECTION LABEL === */
.bn8-section-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1rem;
    padding: 0.375rem 1rem;
    border: 1px solid var(--accent-glow);
    border-radius: 100px;
    background: rgba(37, 99, 235, 0.08);
}

/* === NAVIGATION === */
.bn8-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: rgba(0, 0, 0, 0.85);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: background var(--transition), border-color var(--transition);
}
[data-theme="light"] .bn8-nav {
    background: rgba(255, 255, 255, 0.92);
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

.bn8-nav__inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 72px; max-width: var(--container-max); margin: 0 auto;
    padding: 0 var(--container-pad);
}

/* Logo */
.bn8-nav__logo {
    display: flex; align-items: center; gap: 0.125rem; text-decoration: none;
    font-family: var(--font-heading); font-weight: 800; font-size: 1.375rem;
    color: var(--bn8-white); letter-spacing: -0.02em;
}
.bn8-nav__logo-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; background: var(--bn8-dark-blue); color: var(--bn8-white);
    font-family: var(--font-heading); font-weight: 900; font-size: 1.125rem;
    border-radius: 8px; margin-right: 0.5rem;
}
.bn8-nav__logo-text { color: var(--bn8-white); }
[data-theme="light"] .bn8-nav__logo-mark { background: var(--bn8-dark-blue); color: var(--bn8-white); }
[data-theme="light"] .bn8-nav__logo-text { color: #0F172A; }

/* Nav links */
.bn8-nav__links { display: flex; align-items: center; gap: 2rem; }
.bn8-nav__links a {
    font-size: 0.9rem; font-weight: 500; color: rgba(255, 255, 255, 0.65);
    text-decoration: none; transition: color var(--transition); position: relative;
}
.bn8-nav__links a:hover { color: var(--bn8-white); }
.bn8-nav__links a::after {
    content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px;
    background: var(--bn8-blue); border-radius: 1px; transition: width var(--transition);
}
.bn8-nav__links a:hover::after { width: 100%; }
.bn8-nav__links a.is-active { color: var(--bn8-white); }
.bn8-nav__links a.is-active::after { width: 100%; }
[data-theme="light"] .bn8-nav__links a { color: var(--bn8-gray-600); }
[data-theme="light"] .bn8-nav__links a:hover { color: var(--bn8-blue); }
[data-theme="light"] .bn8-nav__links a.is-active { color: var(--bn8-blue); }

/* Nav utilities */
.bn8-nav__utils { display: flex; align-items: center; gap: 1rem; }

/* Theme toggle */
.bn8-theme-toggle {
    display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    border-radius: 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6); font-size: 1.125rem; transition: all var(--transition); cursor: pointer;
}
.bn8-theme-toggle:hover { background: rgba(255, 255, 255, 0.12); color: var(--bn8-white); }
.bn8-theme-toggle .icon-moon { display: block; }
.bn8-theme-toggle .icon-sun { display: none; }
[data-theme="light"] .bn8-theme-toggle { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.08); color: var(--bn8-gray-600); }
[data-theme="light"] .bn8-theme-toggle:hover { background: rgba(0, 0, 0, 0.08); color: var(--bn8-blue); }
[data-theme="light"] .bn8-theme-toggle .icon-moon { display: none; }
[data-theme="light"] .bn8-theme-toggle .icon-sun { display: block; }

/* Mobile toggle */
.bn8-nav__mobile-toggle {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; padding: 8px; border-radius: 8px;
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); cursor: pointer;
}
.bn8-nav__mobile-toggle span {
    display: block; width: 100%; height: 2px; background: var(--bn8-white);
    border-radius: 2px; transition: all var(--transition);
}
.bn8-nav__mobile-toggle.is-active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.bn8-nav__mobile-toggle.is-active span:nth-child(2) { opacity: 0; }
.bn8-nav__mobile-toggle.is-active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
[data-theme="light"] .bn8-nav__mobile-toggle { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .bn8-nav__mobile-toggle span { background: #0F172A; }

/* Mobile nav */
.bn8-nav__mobile {
    display: none; position: absolute; top: 72px; left: 0; right: 0;
    background: var(--bn8-dark); border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 1rem var(--container-pad) 1.5rem;
}
.bn8-nav__mobile.is-open { display: block; }
.bn8-nav__mobile a {
    display: block; padding: 0.75rem 0; font-size: 1rem; font-weight: 500;
    color: rgba(255, 255, 255, 0.7); border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.bn8-nav__mobile a:last-of-type { border-bottom: none; }
.bn8-nav__mobile a:hover { color: var(--bn8-white); }
.bn8-nav__mobile .bn8-btn { width: 100%; margin-top: 1rem; }
[data-theme="light"] .bn8-nav__mobile { background: var(--bn8-white); border-bottom-color: rgba(0, 0, 0, 0.06); }
[data-theme="light"] .bn8-nav__mobile a { color: var(--bn8-gray-600); border-bottom-color: rgba(0, 0, 0, 0.06); }
[data-theme="light"] .bn8-nav__mobile a:hover { color: var(--bn8-blue); }

/* === FOOTER === */
.bn8-footer {
    background: var(--bn8-dark); color: rgba(255, 255, 255, 0.6);
    padding: 5rem 0 2rem; border-top: 1px solid rgba(255, 255, 255, 0.06);
}
[data-theme="light"] .bn8-footer { background: #0A0A0A; color: rgba(255, 255, 255, 0.7); }

.bn8-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 4rem; }

.bn8-footer__brand {
    font-family: var(--font-heading); font-size: 1.375rem; font-weight: 800;
    color: var(--bn8-white); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;
}
[data-theme="light"] .bn8-footer__brand { color: var(--bn8-white); }

.bn8-footer__brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; background: var(--bn8-blue); color: var(--bn8-white);
    font-weight: 900; font-size: 0.9375rem; border-radius: 7px;
}
.bn8-footer__desc { font-size: 0.9375rem; line-height: 1.7; color: rgba(255, 255, 255, 0.45); max-width: 320px; margin-bottom: 1.5rem; }

.bn8-footer h4 {
    color: var(--bn8-white); font-size: 0.875rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1.25rem;
}
[data-theme="light"] .bn8-footer h4 { color: var(--bn8-white); }

.bn8-footer__links li { margin-bottom: 0.625rem; }
.bn8-footer__links a { color: rgba(255, 255, 255, 0.45); font-size: 0.9375rem; transition: color var(--transition); }
.bn8-footer__links a:hover { color: var(--bn8-blue-light); }

.bn8-footer__contact p { color: rgba(255, 255, 255, 0.45); font-size: 0.9375rem; margin-bottom: 0.5rem; }
.bn8-footer__contact a { color: rgba(255, 255, 255, 0.45); }
.bn8-footer__contact a:hover { color: var(--bn8-blue-light); }

.bn8-footer__bottom {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.875rem; color: rgba(255, 255, 255, 0.35);
}
.bn8-footer__legal { display: flex; gap: 1.5rem; }
.bn8-footer__legal a { color: rgba(255, 255, 255, 0.35); font-size: 0.875rem; }
.bn8-footer__legal a:hover { color: rgba(255, 255, 255, 0.6); }