/* Branding styles — nav logo (full wordmark SVG)
 *
 * Used in both the top navbar and the footer-brand block. The full logo
 * has a wide aspect ratio (~6.9:1), so we control with height-based sizing
 * and let width auto-scale.
 */

.nav_logo_full {
    height: 38px;
    width: auto;
    display: block;
    transition: opacity 0.2s ease;
}
.nav_logo_full:hover {
    opacity: 0.8;
}

/* When inside a footer-brand block (existing pages with column layout),
 * the logo should be slightly larger and align left, not centered. */
.footer_brand .nav_logo_full {
    height: 44px;
    margin-bottom: 14px;
}

/* On narrow viewports, scale down a bit so the navbar doesn't crowd */
@media (max-width: 720px) {
    .nav_logo_full { height: 32px; }
    .footer_brand .nav_logo_full { height: 38px; }
}

/* ─── Social icons row ─────────────────────────────────────────────── */
/* Used in both my centered footers and the existing column-layout
 * footer-brand block. Default centered; left-aligned in column footers
 * via the .footer_brand override below.                                */

.social_icons {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    margin: 18px 0 14px;
    flex-wrap: wrap;
}
.social_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: rgba(220, 220, 220, 0.55);
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 50%;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, background 0.2s ease;
}
.social_icon:hover {
    color: #d4af37;
    border-color: rgba(212, 175, 55, 0.65);
    background: rgba(212, 175, 55, 0.06);
    transform: translateY(-2px);
}
.social_icon svg {
    width: 17px;
    height: 17px;
    display: block;
}

/* In the column-layout footer-brand block, social icons sit below the
 * brand description and align left rather than centred. */
.footer_brand .social_icons {
    justify-content: flex-start;
    margin-top: 16px;
}

/* ─── Mobile responsive: nav, footer, hero, forms ─────────────────────
 * Hides the centered nav_links on small screens and reveals the mobile_only
 * items inside the hamburger dropdown. Below ~720px the hamburger menu
 * becomes the primary navigation.
 */

/* mobile_only items and the hamburger button are hidden by default (desktop) */
.hamburger_dropdown_inner .mobile_only { display: none; }
.nav_hamburger { display: none; }

@media (max-width: 720px) {
    /* Collapse main nav into the hamburger */
    .nav_links > .nav_item { display: none; }

    /* Show the hamburger button */
    .nav_hamburger { display: flex; }

    /* Reveal the mobile-only nav links inside the hamburger */
    .hamburger_dropdown_inner .mobile_only { display: block; }
    .hamburger_dropdown_inner .mobile_nav_separator {
        height: 1px;
        background: rgba(255, 255, 255, 0.10);
        margin: 8px 4px;
    }

    /* Tighten the navbar padding on tiny screens */
    .navbar { padding: 12px 4%; }

    /* Make the Login / Sign-up button a bit smaller */
    .nav_right .btn_primary {
        padding: 6px 12px !important;
        font-size: 0.78rem;
    }
}

/* Smaller phones — extra-tight */
@media (max-width: 380px) {
    .nav_logo_full { height: 28px; }
    .navbar { padding: 10px 4%; }
}