/* ==========================================================================
   7thCloud Theme (Classic Consulting)
   Goal: make it feel designed, not just "Bootstrap with blue buttons"
   ========================================================================== */

/*  NEW: Brand variables */
:root {
    --brand-navy: #0B1F3B;
    --brand-blue: #2563EB;
    --brand-blue-2: #1D4ED8;
    --brand-bg: #F5F7FA;
    --brand-surface: #FFFFFF;
    --brand-text: #111827;
    --brand-muted: #6B7280;
    --brand-border: #E5E7EB;
    --radius: 18px;
    /* richer shadows */
    --shadow-1: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-2: 0 12px 30px rgba(15, 23, 42, .10);
    --shadow-3: 0 18px 45px rgba(15, 23, 42, .14);
}

/*  NEW: Background that feels "premium" instead of flat */
html, body {
    height: 100%;
}

body {
    color: var(--brand-text);
    background: var(--brand-bg);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    letter-spacing: .1px;
}

    /*  NEW: subtle gradient + texture overlay */
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: -1;
        background: radial-gradient(900px 500px at 10% -10%, rgba(37, 99, 235, .12), transparent 60%), radial-gradient(800px 420px at 95% 0%, rgba(11, 31, 59, .10), transparent 60%), radial-gradient(700px 420px at 30% 110%, rgba(37, 99, 235, .08), transparent 55%), linear-gradient(180deg, #F9FAFB 0%, #F5F7FA 100%);
        /* ultra subtle texture */
        opacity: 1;
    }

/*  NEW: Headings feel "brand" and less generic */
h1, h2, h3, h4, h5, h6 {
    color: var(--brand-navy);
    letter-spacing: -.2px;
}

/*  NEW: nicer default paragraph tone */
p, li {
    color: #1F2937;
}

.text-muted {
    color: var(--brand-muted) !important;
}

/* Links */
a {
    color: var(--brand-blue);
    text-decoration: none;
}

    /*  Links: underline hover for normal links (feels clean + modern) */
    a:hover, a:focus {
        color: var(--brand-blue-2);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    /*  NEW: Do NOT underline buttons on hover */
    a.btn:hover,
    a.btn:focus {
        text-decoration: none !important;
    }

/*  NEW: Do NOT underline the brand/logo in the navbar */
.navbar-brand:hover,
.navbar-brand:focus {
    text-decoration: none !important;
}

/*  NEW: Make sure the navbar links keep their clean look */
.navbar .nav-link:hover,
.navbar .nav-link:focus {
    text-decoration: none !important; /* nav uses pill-hover background instead */
}


/* ==========================================================================
   Navbar: more "consulting site" feel
   ========================================================================== */

.navbar-brand:hover {
    opacity: 0.92;
}


.navbar {
    background: var(--brand-surface) !important;
}

header .navbar {
    border-bottom: 1px solid var(--brand-border) !important;
    box-shadow: var(--shadow-1);
    position: relative;
}

    /*  NEW: brand accent bar under navbar */
    header .navbar::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 4px;
        background: linear-gradient(90deg, rgba(37, 99, 235, 1) 0%, rgba(37, 99, 235, .55) 45%, rgba(37, 99, 235, 0) 100%);
    }

.navbar-brand {
    color: var(--brand-navy) !important;
}

.navbar .nav-link {
    color: #0F172A !important;
    font-weight: 600;
    padding: .5rem .75rem;
    border-radius: 12px;
}

    /*  NEW: pill hover */
    .navbar .nav-link:hover,
    .navbar .nav-link:focus {
        color: var(--brand-blue) !important;
        background: rgba(37, 99, 235, .08);
    }

/* ==========================================================================
   Buttons: richer + more "alive"
   ========================================================================== */

.btn {
    border-radius: 14px;
}

.btn-primary {
    background-color: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .22);
}

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: var(--brand-blue-2) !important;
        border-color: var(--brand-blue-2) !important;
        box-shadow: 0 14px 26px rgba(37, 99, 235, .26);
        transform: translateY(-1px);
        transition: transform .12s ease, box-shadow .12s ease;
    }

.btn-outline-secondary {
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
    background: rgba(255,255,255,.70);
}

    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus {
        background: #EEF2FF !important;
        border-color: #A5B4FC !important;
        transform: translateY(-1px);
        transition: transform .12s ease;
    }

/* ==========================================================================
   Main container spacing: makes it feel less cramped/template
   ========================================================================== */

main {
    min-height: 55vh;
}

/* ==========================================================================
   Cards: this is where "stale" usually comes from
   Make them feel premium and consistent.
   ========================================================================== */

.card {
    background: var(--brand-surface);
    border: 1px solid rgba(229, 231, 235, .9);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

    /*  NEW: accent strip on top of cards */
    .card::before {
        content: "";
        display: block;
        height: 4px;
        background: linear-gradient(90deg, rgba(37, 99, 235, .95), rgba(37, 99, 235, .20));
    }

    /*  NEW: hover lift (applies to all cards so you don’t have to add classes) */
    .card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-2);
        transition: transform .15s ease, box-shadow .15s ease;
    }

    /* If you have a card you *don't* want lifting, add class "no-lift" */
    .card.no-lift:hover {
        transform: none;
        box-shadow: var(--shadow-1);
    }

/* Bootstrap shadow-sm override to match theme */
.shadow-sm {
    box-shadow: var(--shadow-1) !important;
}

/* Rounded utility */
.rounded-4 {
    border-radius: var(--radius) !important;
}

/* ==========================================================================