/*
 * assets/css/layout.css
 * ─────────────────────────────────────────────────────────────────────────────
 * Structural layout: navigation, footer, page containers, section wrappers.
 * Uses only CSS variables defined in theme-*.css – no raw colour values here.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Container ───────────────────────────────────────────────────────────── */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

/* ── Section base ────────────────────────────────────────────────────────── */

section {
    padding: 100px 40px;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h2 {
    margin-bottom: 15px;
}

.section-header p {
    color: var(--color-text-light);
    max-width: 600px;
    margin: 0 auto;
}

/* ── Navigation ──────────────────────────────────────────────────────────── */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition);
}

.nav.scrolled {
    background-color: var(--color-white);
    box-shadow: var(--shadow-soft);
    padding: 15px 40px;
}

/* ── Nav over a photo hero ───────────────────────────────────────────────────
   When a background image is set on the hero, the nav sits over a dark photo.
   We switch all nav text and controls to white so they remain readable.
   Once the user scrolls and .scrolled kicks in (white background), we revert
   everything back to normal colours automatically.
   ─────────────────────────────────────────────────────────────────────────── */

[data-hero-bg="1"] .nav:not(.scrolled) .nav-logo {
    color: #fff;
}

[data-hero-bg="1"] .nav:not(.scrolled) .nav-links a {
    color: rgba(255, 255, 255, 0.90);
}

[data-hero-bg="1"] .nav:not(.scrolled) .nav-links a::after {
    background-color: rgba(255, 255, 255, 0.7);
}

[data-hero-bg="1"] .nav:not(.scrolled) .nav-toggle span {
    background-color: #fff;
}

/* Mobile drawer is white – restore normal text colour inside it
   regardless of hero background, so links are always readable. */
[data-hero-bg="1"] .nav:not(.scrolled) .nav-links.active a {
    color: var(--color-text);
}

[data-hero-bg="1"] .nav:not(.scrolled) .nav-links.active a::after {
    background-color: var(--color-primary);
}

.nav-logo {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--color-primary);
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.nav-logo img {
    display: block;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.nav-links {
    display: flex;
    gap: 40px;
}

.nav-links a {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--color-text);
    position: relative;
    padding: 5px 0;
    transition: var(--transition);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--color-primary);
    transition: var(--transition);
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 5px;
}

.nav-toggle span {
    width: 25px;
    height: 2px;
    background-color: var(--color-text);
    transition: var(--transition);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.footer {
    background-color: var(--color-text);
    color: var(--color-white);
    padding: 60px 40px 30px;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-logo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--color-secondary);
}

.footer-socials {
    display: flex;
    gap: 20px;
}

.footer-socials a {
    width: 45px;
    height: 45px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.footer-socials a:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.footer-socials svg {
    width: 20px;
    height: 20px;
    fill: var(--color-white);
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
}

/* ── Scroll-to-top button ────────────────────────────────────────────────── */

.scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 999;
}

.scroll-top.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-top:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-3px);
}

.scroll-top svg {
    width: 24px;
    height: 24px;
    stroke: var(--color-white);
}

/* ── Responsive layout ───────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .container { padding: 0 25px; }

    section { padding: 60px 25px; }

    .nav { padding: 15px 25px; }
    .nav.scrolled { padding: 12px 25px; }
    .nav-toggle { display: flex; }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        height: 100vh;
        background-color: var(--color-white);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
        transition: var(--transition);
        box-shadow: -5px 0 20px rgba(0,0,0,0.1);
    }

    .nav-links.active { right: 0; }

    .footer-content {
        flex-direction: column;
        gap: 25px;
        text-align: center;
    }
}