/* ==========================================================================
   DOMOSAFE — LAYOUT (NAV + FOOTER + BASE)
   Scope: ONLY shared layout (all pages)
   - Tokens + base typography
   - Navbar + dropdown + brand logo animation
   - Buttons baseline
   - Footer + newsletter + social buttons
   - Small utilities (safe)
========================================================================== */

/* ==========================================================================
   🌈 TOKENS
========================================================================== */
:root {
    --ds-primary: #0a3d7e;
    --ds-primary-hover: #08366d;
    --ds-dark: #0a1525;
    --ds-text: #162438;
    --ds-muted: #6b7a8c;
    --ds-bg: #eef2f7;
    --ds-border: #d6dee8;
    --ds-transition: 0.3s ease;

    --ds-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --ds-shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.08);
    --ds-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.12);
    --ds-shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.18);

    --ds-navbar-height: 88px;
    --ds-navbar-height-scrolled: 72px;
}

/* ==========================================================================
   🧱 BASE
========================================================================== */
html {
    height: 100%;
}

body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial,
        sans-serif !important;
    background: var(--ds-bg);
    color: var(--ds-text);
    line-height: 1.6;
    padding-top: var(--ds-navbar-height);
}

/* Se vuoi footer sempre in basso */
main {
    min-height: 60vh;
}

/* Links baseline */
a {
    transition: color var(--ds-transition), transform var(--ds-transition);
}
a:hover {
    text-decoration: none;
}

/* ==========================================================================
   🧭 DOMOSAFE NAVBAR — ENTERPRISE / STABLE
   Scope: Navbar ONLY (safe to replace fully)
========================================================================== */

/* --------------------------------------------------------------------------
   NAVBAR CONTAINER
-------------------------------------------------------------------------- */
.ds-navbar.navbar {
    --nav-bg: rgba(255, 255, 255, 0.94);
    --nav-bg-scrolled: rgba(255, 255, 255, 0.98);

    min-height: 88px;
    padding: 4px 0;

    background: var(--nav-bg) !important;
    border-bottom: 1px solid var(--ds-border);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition: background 0.3s ease, box-shadow 0.3s ease, min-height 0.3s ease,
        padding 0.3s ease;

    z-index: 1030;
}

/* Scrolled state (JS adds .scrolled) */
.ds-navbar.navbar.scrolled {
    min-height: 72px;
    padding: 6px 0;
    background: var(--nav-bg-scrolled) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* --------------------------------------------------------------------------
   BRAND / LOGO (TEXT + TAGLINE SAFE)
-------------------------------------------------------------------------- */
.ds-navbar .navbar-brand {
    display: flex;
    align-items: center;
    padding: 0;
    margin-right: 1.5rem;
}

.ds-navbar .brand-logo {
    display: block;

    max-height: 82px; /* ✅ desktop sweet spot */
    width: auto;
    height: auto;

    object-fit: contain;

    filter: brightness(1.05) contrast(1.05)
        drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));

    transition: max-height 0.3s ease, filter 0.3s ease, transform 0.25s ease;
}

/* On scroll: reduce height, NEVER scale */
.ds-navbar.navbar.scrolled .brand-logo {
    max-height: 52px;
    filter: brightness(1.1) contrast(1.08)
        drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
}

/* Subtle hover */
.ds-navbar .navbar-brand:hover .brand-logo {
    transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   NAV LINKS
-------------------------------------------------------------------------- */
.ds-navbar .nav-link {
    position: relative;

    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ds-text) !important;

    padding: 8px 14px !important;
    border-radius: 6px;

    transition: color 0.25s ease, background-color 0.25s ease;
}

/* Hover */
.ds-navbar .nav-link:hover {
    color: var(--ds-primary) !important;
    background: rgba(10, 61, 126, 0.05);
}

/* Active */
.ds-navbar .nav-link.active,
.ds-navbar .nav-link[aria-current="page"] {
    color: var(--ds-primary) !important;
    font-weight: 700;
    background: rgba(10, 61, 126, 0.08);
}

/* Underline indicator */
.ds-navbar .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;

    width: 0;
    height: 2px;

    background: var(--ds-primary);
    border-radius: 2px;

    transition: width 0.3s ease, left 0.3s ease;
}

.ds-navbar .nav-link:hover::after,
.ds-navbar .nav-link.active::after {
    width: 100%;
    left: 0;
}

/* --------------------------------------------------------------------------
   TOGGLER (MOBILE)
-------------------------------------------------------------------------- */
.ds-navbar .navbar-toggler {
    border: none !important;
    box-shadow: none !important;

    padding: 6px 8px;
    border-radius: 6px;

    transition: background 0.25s ease;
}

.ds-navbar .navbar-toggler:hover {
    background: rgba(10, 61, 126, 0.08);
}

/* --------------------------------------------------------------------------
   DROPDOWN
-------------------------------------------------------------------------- */
.ds-navbar .dropdown-menu {
    padding: 0.6rem;
    margin-top: 10px;

    border-radius: 14px;
    border: 1px solid var(--ds-border);

    background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);

    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
}

/* Dropdown items */
.ds-navbar .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;

    font-weight: 500;
    font-size: 0.95rem;

    padding: 8px 12px;
    border-radius: 10px;

    transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.ds-navbar .dropdown-item:hover {
    background: rgba(10, 61, 126, 0.08);
    color: var(--ds-primary);
    transform: translateX(3px);
}

.ds-navbar .dropdown-item.text-danger:hover {
    background: rgba(220, 53, 69, 0.12);
    color: #dc3545;
}

/* Divider */
.ds-navbar .dropdown-divider {
    margin: 0.4rem 0;
    opacity: 0.15;
}

/* --------------------------------------------------------------------------
   ACCESSIBILITY / FOCUS
-------------------------------------------------------------------------- */
.ds-navbar a:focus-visible,
.ds-navbar button:focus-visible {
    outline: 3px solid rgba(10, 61, 126, 0.45);
    outline-offset: 2px;
    border-radius: 6px;
}

/* --------------------------------------------------------------------------
   MOBILE OPTIMIZATION
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .ds-navbar {
        min-height: 72px;
    }

    .ds-navbar .brand-logo {
        max-height: 54px; /* mobile readable */
    }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .ds-navbar *,
    .ds-navbar *::before,
    .ds-navbar *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   🎛️ BUTTONS — BASELINE (shared)
========================================================================== */
.btn {
    font-weight: 600;
    border-radius: 999px;
    transition: var(--ds-transition);
}

.btn-primary {
    background: var(--ds-primary);
    border-color: var(--ds-primary);
    color: #fff;
}

.btn-primary:hover {
    background: var(--ds-primary-hover);
    border-color: var(--ds-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

/* Optional: outline default in palette */
.btn-outline-primary {
    border-color: rgba(10, 61, 126, 0.45);
    color: var(--ds-primary);
}
.btn-outline-primary:hover {
    background: rgba(10, 61, 126, 0.08);
    border-color: rgba(10, 61, 126, 0.65);
    transform: translateY(-1px);
}

/* ==========================================================================
   🦶 FOOTER — Blue Steel (shared)
========================================================================== */
footer.bg-dark {
    position: relative;
    background: linear-gradient(180deg, #0a1525 0%, #081a32 100%) !important;
    color: #dfe4ea !important;
    padding-top: 4rem;
    padding-bottom: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

footer.bg-dark::before {
    content: "";
    position: absolute;
    bottom: -180px;
    left: 50%;
    width: 950px;
    height: 950px;
    transform: translateX(-50%);
    background: radial-gradient(
        circle at center,
        rgba(10, 61, 126, 0.22) 0%,
        transparent 70%
    );
    opacity: 0.45;
    pointer-events: none;
}

/* Titles */
footer h5,
footer h6 {
    color: #fff;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 700;
}

/* Text */
footer p,
footer small,
footer .text-secondary {
    color: #a8b4c5 !important;
    line-height: 1.6;
}

/* Links */
footer a {
    color: #cfd6e1 !important;
    text-decoration: none;
    transition: color 0.25s ease, transform 0.25s ease;
}
footer a:hover {
    color: #fff !important;
    transform: translateX(2px);
}

footer ul li {
    margin-bottom: 0.4rem;
}
footer hr {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Social buttons */
footer .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.35s ease;
}
footer .btn-outline-light:hover {
    background: var(--ds-primary);
    border-color: var(--ds-primary);
    box-shadow: 0 0 14px rgba(10, 61, 126, 0.55);
    transform: translateY(-2px);
}

#newsletter-section {
    scroll-margin-top: 120px; /* altezza navbar */
}

/* Newsletter form in footer */
footer .form-control {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}
footer .form-control::placeholder {
    color: rgba(255, 255, 255, 0.55);
}
footer .form-control:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--ds-primary);
    box-shadow: 0 0 0 3px rgba(10, 61, 126, 0.35);
    color: #fff;
}

/* Subscribe button in footer */
footer .btn-primary {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, #0a3d7e, #0a4d9a);
    border: none;
    border-radius: 999px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.3px;
    padding: 8px 14px;
    transition: all 0.4s ease;
}
footer .btn-primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 210, 90, 0.55),
        transparent
    );
    transition: all 0.7s ease;
}
footer .btn-primary:hover::before {
    left: 120%;
}
footer .btn-primary:hover {
    background: linear-gradient(90deg, #0a4d9a, #ffb84a);
    box-shadow: 0 0 22px rgba(255, 210, 90, 0.45);
    transform: translateY(-2px);
}

/* Footer alerts (if any appear inside newsletter partial) */
footer .alert {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e6ebf1;
    border-radius: 10px;
}
footer .alert-success {
    border-left: 3px solid #28a745;
}
footer .alert-danger {
    border-left: 3px solid #dc3545;
}
footer .alert-info {
    border-left: 3px solid #0dcaf0;
}

/* Turnstile alignment in footer */
footer .cf-turnstile {
    margin: 0.25rem 0;
}

/* Copyright bar */
footer .text-center {
    color: #9aa5b8;
    font-size: 0.9rem;
    letter-spacing: 0.3px;
}

/* ==========================================================================
   🧩 SAFE UTILITIES (shared, minimal)
========================================================================== */
.ds-link {
    color: var(--ds-primary);
    text-decoration: none;
}
.ds-link:hover {
    color: var(--ds-primary-hover);
}

/* ==========================================================================
   📱 RESPONSIVE
========================================================================== */
@media (max-width: 768px) {
    footer.bg-dark {
        text-align: center;
    }
    footer .btn-outline-light {
        margin: 0.25rem;
    }
    footer .form-control,
    footer .btn-primary {
        font-size: 0.85rem;
    }
}