/*
 * Design refinements layered on top of style.css.
 * Kept separate so future tweaks don't require hunting through the vendor theme file.
 */

/* ---- Font family ----
   Montserrat was already being imported by style.css but never actually
   applied anywhere, so the whole site was rendering in the browser's
   generic fallback (Arial/Helvetica). This applies it site-wide. */
body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #4a4a4a;
    text-align: left;
    font-size: 16px;
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6,
.heading-main, .navbar-nav .nav-link {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.navbar-nav .nav-link {
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ---- Headings ---- */
.heading-main {
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.heading-main span {
    letter-spacing: 0.04em;
}

/* ---- Body copy ----
   No separate "p { color }" rule here on purpose: a blanket one previously
   also caught <p><i class="icofont-..."></i></p> icon wrappers used on dark
   backgrounds (counters, hero slider) and forced their icons to dark gray.
   Plain paragraphs already pick up body's color via normal inheritance,
   which correctly leaves anything with its own themed color untouched. */
p {
    line-height: 1.75;
}

/* ---- Links ---- */
a:hover {
    color: var(--primary-color);
}

/* ---- Buttons: slightly larger, clearer touch target ---- */
.btn-theme {
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ---- Page banner: a branded gradient scrim over the photo so text is
   legible regardless of the underlying image, plus more visual depth. ---- */
.breadcrumbs-page {
    background-image: linear-gradient(135deg, rgba(35, 33, 53, 0.85), rgba(35, 33, 53, 0.55)), url(/assets/images/banner_slider.jpg);
}

/* Per-page icon badge shown above the H1 in the banner -- gives each page a
   distinct, on-topic visual identity (see includes/seo-data.php "icon"). */
.page-banner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 8px 20px rgba(254, 135, 4, 0.35);
}

.page-banner-icon i {
    color: #fff;
    font-size: 1.75rem;
}

/* ---- Tracking popup ---- */
#tracking_popup .close {
    position: absolute;
    opacity: 1;
    color: var(--primary-color);
    top: 8px;
    right: 15px;
    z-index: 99;
    text-shadow: none;
    font-size: 1.5rem;
    font-weight: 700;
}

#tracking_popup .close:hover {
    transform: rotate(360deg);
}

#tracking_popup .tracking-form .input-group {
    flex-wrap: nowrap;
}

#tracking_popup .tracking-form .form-control {
    height: auto;
    padding: 0.75rem 1rem;
}

#tracking_popup .tracking-form .btn-theme {
    border-radius: 0 70px 70px 0;
    white-space: nowrap;
}

@media (max-width: 480px) {
    #tracking_popup .tracking-form .input-group {
        flex-wrap: wrap;
    }
    #tracking_popup .tracking-form .form-control {
        border-radius: 70px;
        margin-bottom: 0.75rem;
    }
    #tracking_popup .tracking-form .btn-theme {
        border-radius: 70px;
        width: 100%;
        justify-content: center;
    }
}