/* =========================
   Global / Theme
   ========================= */

:root {
    /* Adjust to your brand navy if needed */
    --primary-navy: #061a2a;

    /*
      BIGGER NAVBAR / LOGO
      Desktop: very large so the text inside logo.jpg is readable.
      Mobile: still large, but constrained so it doesn't crowd the toggler.
    */
    --navbar-padding-y: 0.55rem;

    --navbar-logo-height: 112px;          /* <-- desktop BIG */
    --navbar-logo-height-mobile: 78px;    /* <-- mobile BIG */
    --navbar-logo-height-xs: 64px;        /* extra-small phones */
}

.bg-primary-navy {
    background-color: #081439 !important;
}

/* =========================
   Navbar / Brand Logo
   ========================= */

.site-navbar {
    padding-top: var(--navbar-padding-y);
    padding-bottom: var(--navbar-padding-y);

    /* 3D shadow: soft outer shadow with a subtle darker band to suggest depth */
    box-shadow: 0 10px 25px rgba(8, 20, 57, 0.15), 0 2px 6px rgba(8, 20, 57, 0.08);

    /* Slight uplift so page content sits under the navbar shadow visually */
    position: sticky; /* ensure sticky behavior on supporting browsers */
    top: 0;
    z-index: 1030; /* above page content, below modals */
}

/* Ensure the header has enough vertical room for the big logo */
.site-navbar .container {
    min-height: calc(var(--navbar-logo-height) + (var(--navbar-padding-y) * 2));
    align-items: center;
}

/* Brand anchor: keep logo vertically centered */
.site-navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}

/* Logo sizing */
.navbar-logo {
    height: var(--navbar-logo-height);
    width: auto;
    display: block;

    /* Allow it to be wide enough for the full text inside the image */
    max-width: 760px;

    /* Ensures the whole logo fits without cropping */
    object-fit: contain;

    /* Optional: subtle lift so the logo stays readable on dark backgrounds */
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.38));
}

/* Keep nav links vertically centered with the taller header */
.site-navbar .navbar-collapse {
    align-items: center;
}

/* =========================
   Responsive adjustments
   ========================= */

/* Bootstrap lg breakpoint is 992px */
@media (max-width: 991.98px) {
    .navbar-logo {
        height: var(--navbar-logo-height-mobile);
        max-width: 78vw; /* prevent overflow on smaller widths */
    }

    .site-navbar .container {
        min-height: calc(var(--navbar-logo-height-mobile) + (var(--navbar-padding-y) * 2));
    }
}

/* Extra small phones */
@media (max-width: 420px) {
    .navbar-logo {
        height: var(--navbar-logo-height-xs);
        max-width: 74vw;
    }

    .site-navbar .container {
        min-height: calc(var(--navbar-logo-height-xs) + (var(--navbar-padding-y) * 2));
    }
}

/* 3D card styling used across templates */
.custom-card {
    border: 0;
    border-radius: 1rem;
    /* layered shadows for a stronger 3D effect */
    box-shadow: 0 18px 50px rgba(8,20,57,0.12),
                0 6px 18px rgba(8,20,57,0.08),
                inset 0 -2px 8px rgba(255,255,255,0.02);
    transition: transform 180ms ease, box-shadow 180ms ease;
    background-clip: padding-box;
    background-color: #ffffff;
}
.custom-card .card-header {
    background-color: transparent;
    border-bottom: 0;
    padding-right: 1rem; /* give space so right-aligned title sits comfortably */
}
.custom-card .card-header h2,
.custom-card .card-header h3,
.custom-card .card-header h5 {
    margin: 0;
}
/* right align the title within the header */
.custom-card .card-header .card-title-right {
    margin-left: auto;
    text-align: right;
}
.custom-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 70px rgba(8,20,57,0.16), 0 10px 30px rgba(8,20,57,0.12);
}

/* Make card bodies preserve spacing used everywhere */
.custom-card .card-body {
    padding: 1.25rem;
}

/* Ensure dark backgrounds get the correct text contrast */
.custom-card.bg-dark {
    color: #fff;
}

.gradient-title {
    background: linear-gradient(90deg, #0b3c5d, #1e5f8a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}