/* ------------------------------------------------------------------------
   WAHI Group – site overrides on top of the Gerow theme.
   ------------------------------------------------------------------------ */

/* 1. Transparent header sits over the dark hero / dark breadcrumb banner, but the
      theme keeps the navigation in its dark heading colour, which is unreadable
      there. Light it up while the header is transparent; the sticky (white) state
      keeps the theme's original dark text. */

header.transparent-header:not(.sticky-menu):not(.header-style-two) .navbar-wrap.main-menu .navigation > li > a,
header.transparent-header:not(.sticky-menu):not(.header-style-two) .navbar-wrap.main-menu .navigation li > a {
    color: #fff;
}

/* --tg-secondary-color is a dark navy, which is no better than the original on a
   dark hero, so the active/hover accent is the brand gold instead. */
header.transparent-header:not(.sticky-menu):not(.header-style-two) .navbar-wrap.main-menu .navigation > li.active > a,
header.transparent-header:not(.sticky-menu):not(.header-style-two) .navbar-wrap.main-menu .navigation > li > a:hover,
header.transparent-header:not(.sticky-menu):not(.header-style-two) .navbar-wrap.main-menu .navigation > li:hover > a {
    color: #c2a171;
}

header.transparent-header:not(.sticky-menu):not(.header-style-two) .header-action .header-search a,
header.transparent-header:not(.sticky-menu):not(.header-style-two) .header-action .header-search a i,
header.transparent-header:not(.sticky-menu):not(.header-style-two) .header-action .header-contact-two .icon i,
header.transparent-header:not(.sticky-menu):not(.header-style-two) .header-action .header-contact-two .content span,
header.transparent-header:not(.sticky-menu):not(.header-style-two) .header-action .header-contact-two .content a,
header.transparent-header:not(.sticky-menu):not(.header-style-two) .mobile-nav-toggler i,
header.transparent-header:not(.sticky-menu):not(.header-style-two) .language-switcher .dropdown-toggle,
header.transparent-header:not(.sticky-menu):not(.header-style-two) .language-switcher .dropdown-toggle span {
    color: #fff;
}

/* The off-canvas trigger is three bars drawn with background-color. */
header.transparent-header:not(.sticky-menu):not(.header-style-two) .offcanvas-menu .menu-tigger span {
    background-color: #fff;
}

/* header-style-two keeps its menu bar white, so the white "transparent" logo is
   unreadable there; fall back to the normal navy logo. */
header.transparent-header:not(.sticky-menu).header-style-two .logo img {
    content: normal;
}

/* Dropdown panels are light, so their own text must stay dark. */
header.transparent-header:not(.sticky-menu) .navigation li .sub-menu li a,
header.transparent-header:not(.sticky-menu) .language-switcher-list .language-item {
    color: var(--tg-heading-font-color, #14203a);
}

/* The slide-in mobile menu and the off-canvas side panel are both rendered INSIDE
   <header class="transparent-header">, and both sit on a white background. The rules
   above are now scoped to .navbar-wrap.main-menu (the desktop bar) so they can no
   longer bleed in; this block is the explicit guarantee, because the mobile menu also
   wraps its language switcher in a .navigation list. */
header.transparent-header .mobile-menu .navigation > li > a,
header.transparent-header .mobile-menu .navigation li > a,
header.transparent-header .mobile-menu .navigation li .sub-menu li a,
header.transparent-header .mobile-menu .navigation li .language-item,
header.transparent-header .mobile-menu .navigation li .language-item span,
header.transparent-header .extra-info .language-item,
header.transparent-header .extra-info .language-item span {
    color: var(--tg-heading-font-color, #14203a);
}

header.transparent-header .mobile-menu .navigation > li.active > a,
header.transparent-header .mobile-menu .navigation > li > a:hover,
header.transparent-header .mobile-menu .navigation li > a:hover {
    color: var(--tg-primary-color, #1b54b3);
}

/* 2. The hero photo is light in places; a gradient scrim keeps the header legible
      wherever the slide image happens to be bright. */
header.transparent-header:not(.sticky-menu)::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 160px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(10, 18, 36, 0.55) 0%, rgba(10, 18, 36, 0) 100%);
    z-index: -1;
}

header.transparent-header {
    isolation: isolate;
}

/* 3. Keep the logo readable on both header states. */
header.transparent-header:not(.sticky-menu):not(.header-style-two) .logo img {
    filter: brightness(0) invert(1);
}

/* ------------------------------------------------------------------------
   4. Small responsive corrections.
   ------------------------------------------------------------------------ */

/* Long section headings wrapped awkwardly on narrow screens. */
@media (max-width: 767.98px) {
    .section-title-two .title,
    .section-title .title {
        font-size: 28px;
        line-height: 1.25;
    }

    .banner-content-two .title,
    .banner-content .title {
        font-size: 34px;
        line-height: 1.15;
    }
}

/* Tables and wide blocks inside post content must not push the page sideways. */
.blog-details-content table,
.page-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
}

body {
    overflow-x: hidden;
}

/* 5. The footer-bottom row carries -15px gutters inside a .container that has no
      side padding, so it rendered 15px wider than the viewport on narrow screens.
      Restoring the container padding lines it back up. */
.footer-bottom.container,
.footer-bottom-two.container {
    padding-inline-start: 15px;
    padding-inline-end: 15px;
}

/* 6. Contact CTA: the phone number in the "Tel / WhatsApp" block was running into
      the vertical divider bar next to it. Let the block size itself to its content
      and reserve padding for the bar so the number and the bar keep a small gap. */
@media (min-width: 768px) {
    .cta-info-wrap {
        width: auto;
        padding-inline-end: 64px;
    }

    .cta-info-wrap::before {
        inset-inline-end: 50px;
    }
}

/* 7. Inner pages (header-style-two) show the top bar, so the header is taller than
      the theme's breadcrumb padding expects: the white menu bar then overlaps the
      breadcrumb heading. Give the breadcrumb enough top padding to clear it. */
@media (min-width: 992px) {
    body.body-header-style-1 .breadcrumb-bg {
        padding-top: 175px;
    }
}

@media (max-width: 991.98px) {
    body.body-header-style-1 .breadcrumb-bg {
        padding-top: 140px;
    }
}

/* 6. The CTA bar's vertical divider sits 50px from the right edge of its wrapper, and
      a phone number as long as "+255 714 629 700" ended ~11px short of it. Move the
      divider over so the number always has clear space around it. Both the logical and
      the physical property are set because the theme uses each at different breakpoints. */
.cta-info-wrap::before,
.cta-info-wrap:before {
    inset-inline-end: 26px;
    right: 26px;
}

.cta-info-wrap .content a {
    padding-inline-end: 6px;
}

@media (max-width: 1199.98px) {
    .cta-info-wrap::before,
    .cta-info-wrap:before {
        inset-inline-end: 20px;
        right: 20px;
    }
}

/* 7. The side-menu social icons inherit the body font size, so they rendered noticeably
      smaller than the theme's own demo. Match that size. */
.social-icon-right > a {
    font-size: 20px;
    line-height: 1;
}