/*
 * Site customisations layered on top of the base template.
 *
 * Kept in its own file so the template's original stylesheets stay untouched.
 * Colours reuse the theme variables declared in style.css.
 */

/* ---------- Brand logo ---------- */

/*
 * The real logo is 839x297 (ratio 2.8) where the template's was 153x35
 * (ratio 4.4), and the template set no size on .navbar-brand img - it just
 * rendered at natural size. Pin the height and let the width follow so the
 * header keeps its original proportions instead of being pushed open.
 *
 * .header-con has no fixed height: it is 15px/14px of padding around its
 * tallest child, which is the 55px .contact-btn (84px total). Rendering the
 * logo larger than 55px would make IT the tallest child and grow the header,
 * so the brand is capped at the button height and the image is scaled up
 * inside it - overflowing the 55px box symmetrically instead of expanding it.
 * Bump `--logo-scale` to enlarge the artwork; the header stays 84px.
 */
.header-con .navbar-light .navbar-brand {
    --logo-scale: 1.5;

    height: 55px;
    display: flex;
    align-items: center;
    /* Let the scaled-up artwork spill past the 55px box without being clipped. */
    overflow: visible;
}

.header-con .navbar-light .navbar-brand figure {
    /* The wrapping <figure> must not add height of its own. */
    display: flex;
    align-items: center;
    line-height: 0;
}

.header-con .navbar-light .navbar-brand .site-logo {
    height: 55px;
    width: auto;
    display: block;
    /*
     * transform scales the rendered pixels without affecting layout, so the
     * logo reads larger while still occupying a 55px-tall slot. Anchored left
     * so it grows away from the nav rather than into it.
     */
    transform: scale(var(--logo-scale));
    transform-origin: left center;
}

/*
 * Below the lg breakpoint the nav collapses behind the burger and the brand
 * shares its row with the toggle, so the runway for a scaled logo shrinks.
 */
@media (max-width: 991px) {
    .header-con .navbar-light .navbar-brand {
        --logo-scale: 1.25;
    }
}

@media (max-width: 575px) {
    .header-con .navbar-light .navbar-brand {
        --logo-scale: 1;

        height: 44px;
    }

    .header-con .navbar-light .navbar-brand .site-logo {
        height: 44px;
    }
}

/* ---------- Homepage "About Us" illustration ---------- */

/*
 * Scale the illustration down. The "25+ Years" badge is absolutely positioned
 * against .about-img-con, so the container is shrunk to fit the image (rather
 * than scaling the <img> alone) - otherwise the badge stays pinned to the
 * full-width container and drifts away from the artwork.
 */
.about-us-con .about-img-con {
    width: 58%;
}

.about-us-con .about-img-con figure {
    margin-bottom: 0;
}

.about-us-con .about-img-con figure img {
    width: 100%;
    height: auto;
    display: block;
}

/* ---------- Homepage hero ---------- */

/*
 * Replaces the template's grey 1860x1001 placeholder with the real banner
 * photo. The gradient keeps the white headline and body copy legible over the
 * image; `background-position` favours the upper area so the subject stays in
 * frame as the viewport narrows.
 */
.home-outer-wrapper {
    background-image: linear-gradient(
            to right,
            rgba(7, 41, 92, 0.85) 0%,
            rgba(7, 41, 92, 0.55) 45%,
            rgba(7, 41, 92, 0.25) 100%
        ),
        url(../images/gadazidvebi24-banner-hero.jpg) !important;
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center, center 30%;
}

.topbar-con {
    float: left;
    background-color: var(--accent--color);
    font-family: "Gadazidvebi24 Small", sans-serif;
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 1533px;
    margin: 0 auto;
    padding: 11px 30px;
}

.topbar-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 28px;
}

.topbar-list--social {
    gap: 20px;
}

.topbar-list li,
.topbar-list li a {
    font-size: 15px;
    line-height: 22px;
    font-weight: 400;
    color: var(--light--blue--color);
    display: inline-flex;
    align-items: center;
}

.topbar-list li a:hover,
.topbar-list li a:focus-visible {
    color: var(--primary--color);
}

/* Leading icon on the text items */
.topbar-list li i {
    margin-right: 9px;
    font-size: 14px;
    color: var(--primary--color);
}

/* Social icons: no label, so drop the text gap and add a hit area */
.topbar-list--social li a[aria-label] i {
    margin-right: 0;
    font-size: 14px;
    color: var(--secondary--color);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.12);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.topbar-list--social li a[aria-label]:hover i,
.topbar-list--social li a[aria-label]:focus-visible i {
    background-color: var(--primary--color);
    color: var(--accent--color);
}

/* Divider between the address and the social icons */
.topbar-location {
    position: relative;
    padding-right: 28px;
}

.topbar-location::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 18px;
    background-color: rgba(255, 255, 255, 0.2);
}

/*
 * Base type for the bar. Declared before the media queries below so the
 * responsive font-size steps in them actually win — when this sat at the end
 * of the file it silently overrode the 14px rule at max-width:1199px.
 */
.topbar-list li,
.topbar-list li a {
    font-size: clamp(16px, 0.95vw, 19px);
    line-height: 1.5;
}

/* ---------- Responsive ---------- */

@media (max-width: 1199px) {
    .topbar-list {
        gap: 20px;
    }

    .topbar-list li,
    .topbar-list li a {
        font-size: 14px;
    }
}

/* The address duplicates the footer on smaller screens - drop it first */
@media (max-width: 991px) {
    .topbar-location {
        display: none;
    }
}

@media (max-width: 767px) {
    .topbar-hours {
        display: none;
    }

    .topbar-inner {
        justify-content: center;
        gap: 10px 24px;
        padding: 10px 20px;
    }
}

@media (max-width: 575px) {
    .topbar-inner {
        flex-direction: column;
        gap: 8px;
    }

    .topbar-list {
        justify-content: center;
        gap: 8px 18px;
    }
}