/* Drrb Alhimam brand override — colors + fonts per Brand Guidelines 2025 */

:root {
    /* PRIMARY (brand dark green #053B35) */
    --color-primary:#053B35;--bs-primary-rgb:5, 59, 53;--color-primary-:#053B35;--bs-primary--rgb:5, 59, 53;
    --color-primary-10:rgb(247.5, 249.12, 248.94);--bs-primary-10-rgb:248,249,249;
    --color-primary-25:rgb(242.5, 245.2, 244.9);--bs-primary-25-rgb:243,245,245;
    --color-primary-50:rgb(230, 235.4, 234.8);--bs-primary-50-rgb:230,235,235;
    --color-primary-100:rgb(205, 215.8, 214.6);--bs-primary-100-rgb:205,216,215;
    --color-primary-200:rgb(155, 176.6, 174.2);--bs-primary-200-rgb:155,177,174;
    --color-primary-300:rgb(105, 137.4, 133.8);--bs-primary-300-rgb:105,137,134;
    --color-primary-400:rgb(55, 98.2, 93.4);--bs-primary-400-rgb:55,98,93;
    --color-primary-500:#053B35;--bs-primary-500-rgb:5,59,53;
    --color-primary-600:rgb(4, 47.2, 42.4);--bs-primary-600-rgb:4,47,42;
    --color-primary-700:rgb(3, 35.4, 31.8);--bs-primary-700-rgb:3,35,32;
    --color-primary-800:rgb(2, 23.6, 21.2);--bs-primary-800-rgb:2,24,21;
    --color-primary-900:rgb(1, 11.8, 10.6);--bs-primary-900-rgb:1,12,11;
    --color-primary-950:rgb(0.5, 5.9, 5.3);--bs-primary-950-rgb:1,6,5;

    /* SECONDARY (brand green #095B4B) */
    --color-secondary:#095B4B;--bs-secondary-rgb:9, 91, 75;--color-secondary-:#095B4B;--bs-secondary--rgb:9, 91, 75;
    --color-secondary-10:rgb(247.62, 250.08, 249.6);--bs-secondary-10-rgb:248,250,250;
    --color-secondary-25:rgb(242.7, 246.8, 246);--bs-secondary-25-rgb:243,247,246;
    --color-secondary-50:rgb(230.4, 238.6, 237);--bs-secondary-50-rgb:230,239,237;
    --color-secondary-100:rgb(205.8, 222.2, 219);--bs-secondary-100-rgb:206,222,219;
    --color-secondary-200:rgb(156.6, 189.4, 183);--bs-secondary-200-rgb:157,189,183;
    --color-secondary-300:rgb(107.4, 156.6, 147);--bs-secondary-300-rgb:107,157,147;
    --color-secondary-400:rgb(58.2, 123.8, 111);--bs-secondary-400-rgb:58,124,111;
    --color-secondary-500:#095B4B;--bs-secondary-500-rgb:9,91,75;
    --color-secondary-600:rgb(7.2, 72.8, 60);--bs-secondary-600-rgb:7,73,60;
    --color-secondary-700:rgb(5.4, 54.6, 45);--bs-secondary-700-rgb:5,55,45;
    --color-secondary-800:rgb(3.6, 36.4, 30);--bs-secondary-800-rgb:4,36,30;
    --color-secondary-900:rgb(1.8, 18.2, 15);--bs-secondary-900-rgb:2,18,15;
    --color-secondary-950:rgb(0.9, 9.1, 7.5);--bs-secondary-950-rgb:1,9,8;

    /* Fonts — brand guide specifies "Microsoft New Tai Lue" (English) and "GE SS Two" (Arabic).
       Neither is a real embeddable/licensed web font available to us, so we substitute the
       closest free equivalents: Poppins (geometric rounded sans, matches the English sample)
       and Cairo (clean Gulf-style Arabic grotesque, matches the GE SS Two look). */
    --font-family-primary: 'Poppins', 'IBM Plex Sans Arabic', sans-serif;
    --font-family-secondary: 'Poppins', 'IBM Plex Sans Arabic', sans-serif;
    --font-family-tertiary: 'Poppins', 'IBM Plex Sans Arabic', sans-serif;
}

html[dir="rtl"] {
    --font-family-primary: 'Cairo', 'Poppins', sans-serif;
    --font-family-secondary: 'Cairo', 'Poppins', sans-serif;
    --font-family-tertiary: 'Cairo', 'Poppins', sans-serif;
}

/* The .btn-primary / .btn-secondary component classes initialize their own local
   --bs-btn-* custom properties to literal hex values baked in at build time — they do
   NOT read the global --bs-primary-rgb / --bs-secondary-rgb tokens above, so the :root
   override alone does not reach them. Re-declare those local tokens explicitly instead. */
.btn-primary {
    --bs-btn-color:#fff;--bs-btn-bg:#053B35;--bs-btn-border-color:#053B35;
    --bs-btn-hover-color:#fff;--bs-btn-hover-bg:rgb(4.25, 50.15, 45.05);--bs-btn-hover-border-color:rgb(4.25, 50.15, 45.05);
    --bs-btn-focus-shadow-rgb:55,98,93;
    --bs-btn-active-color:#fff;--bs-btn-active-bg:rgb(4, 47.2, 42.4);--bs-btn-active-border-color:rgb(4, 47.2, 42.4);
    --bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#053B35;--bs-btn-disabled-border-color:#053B35;
}
.btn-secondary {
    --bs-btn-color:#fff;--bs-btn-bg:#095B4B;--bs-btn-border-color:#095B4B;
    --bs-btn-hover-color:#fff;--bs-btn-hover-bg:rgb(7.65, 77.35, 63.75);--bs-btn-hover-border-color:rgb(7.65, 77.35, 63.75);
    --bs-btn-focus-shadow-rgb:58,124,111;
    --bs-btn-active-color:#fff;--bs-btn-active-bg:rgb(7.2, 72.8, 60);--bs-btn-active-border-color:rgb(7.2, 72.8, 60);
    --bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#095B4B;--bs-btn-disabled-border-color:#095B4B;
}

/* The header-fourteen nav pill is position:absolute (floats over a hero photo by design),
   so it takes no space in normal flow. Pages that open straight into plain text content
   (privacy/terms) or a hero without matching top padding (contact) have nothing
   reserving room for it, so the pill overlaps the page title.
   The pill's own top margin (and therefore its bottom edge) is NOT a single value —
   the theme changes it at its own breakpoints, independent of the 992px "lg" used
   elsewhere: 24px margin below 1024px, 56px from 1024–1440px, 64px above 1440px.
   Clearance has to step up at those same widths or the 1024–1440px range overlaps. */
.page-wrap {
    margin-top: 6rem !important;
}
@media (min-width: 992px) {
    .page-wrap {
        margin-top: 9rem !important;
    }
}
@media (min-width: 1024px) {
    .page-wrap {
        margin-top: 12rem !important;
    }
}

.contact-hero-outer {
    padding-top: 6rem !important;
}
@media (min-width: 992px) {
    .contact-hero-outer {
        padding-top: 9rem !important;
    }
}
@media (min-width: 1024px) {
    .contact-hero-outer {
        padding-top: 12rem !important;
    }
}

/* Floating header logo — smaller than the theme default on every size. */
.header-logo {
    max-width: 70px;
}
@media (min-width: 992px) {
    .header-logo {
        max-width: 90px;
    }
}

/* Arabic headings: the theme's h1-h4 use line-height:1.1 and negative letter-
   spacing, tuned for large Latin display type. On wrapped Arabic text this
   crowds the lines together (letters/diacritics from one line touching the
   next). Loosen both, scoped to RTL only so English typography is untouched. */
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
html[dir="rtl"] .h1, html[dir="rtl"] .h2, html[dir="rtl"] .h3, html[dir="rtl"] .h4, html[dir="rtl"] .h5, html[dir="rtl"] .h6 {
    line-height: 1.5 !important;
    letter-spacing: normal !important;
}

/* Hero CTA buttons (WhatsApp / Call): the template's "flex-wrap" utility class
   doesn't exist in this compiled CSS build (purged), so the row never actually
   wraps — on narrow phones the two pill buttons try to share one line and the
   long phone-number button overflows/clips past the screen edge. Stack them
   full-width on mobile and switch to a side-by-side row from the sm breakpoint. */
.hero-cta-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}
.hero-cta-group .btn {
    width: 100%;
}
@media (min-width: 576px) {
    .hero-cta-group {
        flex-direction: row;
        align-items: center;
        width: auto;
    }
    .hero-cta-group .btn {
        width: auto;
    }
}

/* Prevent any stray element from ever pushing the page wider than the viewport —
   with the floating nav pill spanning left:0/right:0, body overflow drags its
   right edge (and the mobile menu button inside it) past the visible screen. */
html {
    overflow-x: hidden;
}

/* The GDPR/cookie notice (uni-core's .uc-notification) ships with a fixed
   width:350px meant for desktop toasts; on narrow phones its content still
   forces the box wider than the viewport, causing horizontal overflow (see
   above) and clipped, unwrapped text. Give it an explicit responsive width. */
#uc-gdpr-notification {
    width: calc(100vw - 2rem) !important;
    max-width: 420px;
}
#uc-gdpr-notification .uc-notification-message {
    width: 100%;
    box-sizing: border-box;
}

/* Footer links use color:inherit and no hover rule of their own, so hovering
   them gives zero visual feedback. Give them a clear brand-colored hover state. */
.uc-footer .nav-y a,
.uc-footer .nav-x a {
    transition: color 150ms ease;
    white-space: nowrap;
}
.uc-footer .nav-y a:hover,
.uc-footer .nav-x a:hover {
    color: #0e7a63 !important;
    text-decoration: underline;
}
:where(.uc-dark) .uc-footer .nav-y a:hover,
:where(.uc-dark) .uc-footer .nav-x a:hover {
    color: rgb(58.2, 123.8, 111) !important;
}