/* =========================================================
   SP Pool Thailand — layout
   Floating glass navigation, footer, floating contact buttons.
   ========================================================= */

/* ---------- NAV ---------- */
.nav {
    position: fixed; top: 14px; left: 50%; z-index: 50; transform: translateX(-50%);
    width: min(1200px, calc(100% - 24px));
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 10px 8px 20px; border-radius: 999px;
    background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
    box-shadow: 0 8px 30px rgba(6, 40, 70, .12);
    transition: top .3s, background .3s, box-shadow .3s;
}
.nav.scrolled { top: 8px; background: rgba(255, 255, 255, .92); box-shadow: 0 10px 40px rgba(6, 40, 70, .18); }
.nav-logo img { height: 40px; width: auto; }

.nav-menu { display: flex; gap: 2px; list-style: none; }
.nav-menu a {
    display: block; padding: 9px 14px; border-radius: 999px;
    font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none;
    transition: background .2s, color .2s;
}
.nav-menu a:hover, .nav-menu a.active { background: rgba(81, 165, 242, .14); color: var(--brand-blue); }
.nav-cta { padding: 11px 20px; font-size: 15px; }

.nav-toggle {
    display: none; width: 44px; height: 44px; place-items: center;
    border: 0; border-radius: 50%; background: var(--brand-blue); cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    display: block; position: relative; width: 18px; height: 2px; border-radius: 2px; background: #fff;
    transition: transform .25s, background .25s;
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav.open .nav-toggle span { background: transparent; }
.nav.open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav.open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 960px) {
    .nav-cta { display: none; }
    .nav-toggle { display: grid; }
    .nav-menu {
        position: absolute; top: calc(100% + 10px); left: 0; right: 0;
        flex-direction: column; padding: 10px; border-radius: 24px;
        background: rgba(255, 255, 255, .97); box-shadow: 0 20px 50px rgba(6, 40, 70, .2);
        opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden;
        transition: opacity .25s, transform .25s, visibility .25s;
    }
    .nav.open .nav-menu { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
    .nav-menu a { padding: 14px 18px; font-size: 17px; }
}

/* ---------- FOOTER ---------- */
.site-footer { position: relative; padding: 56px 0 28px; background: var(--sand); color: var(--ink); }
.site-footer .wave-top { height: 60px; top: 0; transform: translateY(-99%); fill: var(--sand); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.footer-inner img { height: 44px; width: auto; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer-nav a { font-size: 15px; font-weight: 500; text-decoration: none; }
.footer-nav a:hover { color: var(--brand-blue); }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #fff; transition: transform .2s; }
.footer-social a:hover { transform: translateY(-3px); }
.footer-social svg { width: 20px; height: 20px; }
.footer-social .fb { background: #1877f2; }
.footer-social .ln { background: var(--line-green); }
.footer-social .yt { background: #ff0000; }
.copyright { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(11, 42, 69, .12); text-align: center; font-size: 14px; color: rgba(11, 42, 69, .75); }

@media (max-width: 720px) {
    .footer-inner { flex-direction: column; text-align: center; }
    .footer-nav { justify-content: center; }
}

/* ---------- FLOATING CONTACT ---------- */
.fab { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 10px; }
.fab a {
    width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; color: #fff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .22); transition: transform .2s;
}
.fab a:hover { transform: scale(1.08); }
.fab svg { width: 28px; height: 28px; }
.fab-line { background: var(--line-green); }
.fab-tel { background: var(--brand-blue); }
.fab-tel svg { width: 22px; height: 22px; }