/* =====================================================================
   Brand identity additions — derived from the official company profile
   (BOH Profile.pdf, Q3 2025). The primary gold already matched the site's
   existing --skin-color almost exactly (#e2b723 vs #e0b824 in the
   profile), so it stays untouched. This file adds only the color-level
   identity: the secondary slate blue-grey and the charcoal text tone —
   no new shapes or heading treatments.
   ===================================================================== */

:root {
    --boh-gold: #e0b824;
    --boh-gold-2: #e6c354;
    --boh-slate: #8aa5b2;
    /* Batch 5A: darkened from #5c7a8a to clear WCAG AA 4.5:1 for normal text
       on this theme's light surfaces (measured 4.30:1 on cream #faf8f3 and
       4.02:1 on the alt light-gray #eef1f2 before this change — both below
       4.5:1 despite this variable's own now-corrected comment below). Same
       hue/saturation, just darker — kept off dark surfaces (see brand.css's
       separate --text-on-dark-muted in future.css) since this token is only
       ever used as text-on-light in this theme. */
    --boh-slate-dark: #506a77;
    --boh-charcoal: #2c373e;
    --boh-charcoal-dark: #1e262b;

    /* ---- Semantic corporate palette --------------------------------
       Not new colors — every value below is one of the five above (or a
       direct tint/shade of the same hue). Introduced so the site's dark
       "editorial" surfaces read as Bin Omairah's own steel blue-grey
       rather than a generic near-black tech-site background. Deliberately
       maps the "deep" surface to --boh-charcoal (L≈21%), not
       --boh-charcoal-dark (L≈14%, kept only for the footer's own darker
       band) — the near-black complaint was really about how dark the
       chapter/hero backgrounds read, not the hex value being literally
       #000. */
    --boh-primary-deep: var(--boh-charcoal);       /* strong sections, hero overlay, nav */
    --boh-primary-mid: var(--boh-slate-dark);      /* secondary surfaces, metadata, borders */
    --boh-primary-soft: var(--boh-slate);          /* pale alternate sections */
    --boh-primary: var(--boh-slate-dark);          /* default brand blue-grey reference */

    --boh-surface: #faf8f3;                        /* warm off-white reading surface (existing site cream) */
    --boh-surface-alt: #eef1f2;                    /* pale blue-grey alternate section, tint of --boh-slate */

    --boh-text: var(--boh-charcoal);               /* headings on light surfaces */
    --boh-text-muted: var(--boh-slate-dark);       /* secondary/body text on light surfaces */
    --boh-border: rgba(44, 55, 62, 0.14);          /* hairline dividers on light surfaces, tint of --boh-charcoal */

    --boh-accent: var(--boh-gold);
    --boh-accent-soft: var(--boh-gold-2);
}

/* ---- Body text tone -------------------------------------------------- */
body {
    color: var(--boh-charcoal);
}

/* ---- Header: fixed/scrolled bar and footer ----------------------------
   Both used a generic near-black (#1a1a1a / #0e0e0e) with no tie to the
   brand at all. Swapped for the official charcoal so the header and
   footer read as part of the same identity as the rest of the site. */
.header-style-3 .is-fixed.color-fill .main-bar {
    background: var(--boh-charcoal);
}
.footer-dark .footer-top {
    background-color: var(--boh-charcoal);
}
.footer-dark .footer-bottom {
    background-color: var(--boh-charcoal-dark);
}

/* ---- Dark section background (e.g. "Our Featured Projects") -----------
   Replaces the theme's plain .bg-black (#000) with the brand charcoal. */
.bg-brand-charcoal {
    background-color: var(--boh-charcoal) !important;
}

/* ---- Slate blue-grey utilities ---------------------------------------- */
.site-bg-slate {
    background-color: var(--boh-slate) !important;
}
.site-text-slate {
    color: var(--boh-slate) !important;
}

/* ---- Slate stat cards (Facts & Figures style from the profile) -------- */
.stat-card-slate {
    background: var(--boh-slate);
    color: #fff;
    border-radius: 8px;
    padding: 20px 14px;
    text-align: center;
}
.stat-card-slate b {
    display: block;
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--boh-gold);
}
.stat-card-slate span {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.95;
}

/* ---- Soft background texture for light sections ------------------------
   A faint wave/blob shape echoing the watermark used across the profile's
   white pages and back cover. Self-contained inline SVG, no extra request. */
.bg-brand-texture {
    position: relative;
    overflow: hidden;
}
.bg-brand-texture::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3Cpath d='M550 0C420 120 620 220 500 340C400 440 620 520 560 600H800V0Z' fill='%238aa5b2' fill-opacity='0.06'/%3E%3Ccircle cx='680' cy='120' r='160' fill='%23e0b824' fill-opacity='0.04'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 60% auto;
    z-index: 0;
}
[dir="rtl"] .bg-brand-texture::after {
    background-position: right top;
    transform: scaleX(-1);
}
.bg-brand-texture > * {
    position: relative;
    z-index: 1;
}

/* ---- Milestones timeline -----------------------------------------------
   Replaces the old "zoomtimeline" plugin, whose JS file never made it into
   the migrated assets (only its CSS did) — the page rendered with 15 real
   milestone records in the DOM but nothing visible on screen. Pure CSS, no
   plugin dependency, so it can't silently break the same way again.
   Uses logical (inset-inline-*) properties throughout instead of left/
   right, so it mirrors correctly for RTL automatically — no [dir="rtl"]
   overrides needed. */
.milestones-timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 0;
}
.milestones-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 50%;
    width: 3px;
    background: var(--boh-gold);
    transform: translateX(-50%);
}
.milestone-item {
    position: relative;
    width: 50%;
    padding-inline: 40px;
    padding-bottom: 50px;
    box-sizing: border-box;
}
.milestone-item:nth-child(odd) {
    inset-inline-start: 0;
    text-align: end;
}
.milestone-item:nth-child(even) {
    inset-inline-start: 50%;
    text-align: start;
}
.milestone-year {
    position: absolute;
    top: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--boh-gold);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--boh-slate);
    z-index: 1;
}
.milestone-item:nth-child(odd) .milestone-year {
    inset-inline-end: -32px;
}
.milestone-item:nth-child(even) .milestone-year {
    inset-inline-start: -32px;
}
.milestone-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 20px 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.milestone-card img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 12px;
}
.milestone-card h3 {
    color: var(--boh-charcoal);
    font-size: 1.05rem;
    margin: 0 0 8px;
    text-transform: uppercase;
}
.milestone-card p {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
}
@media (max-width: 767px) {
    .milestones-timeline::before {
        inset-inline-start: 24px;
    }
    .milestone-item,
    .milestone-item:nth-child(odd),
    .milestone-item:nth-child(even) {
        width: 100%;
        inset-inline-start: 0;
        text-align: start;
        padding-inline: 64px 0;
        padding-bottom: 40px;
    }
    .milestone-item:nth-child(odd) .milestone-year,
    .milestone-item:nth-child(even) .milestone-year {
        inset-inline-start: 0;
        inset-inline-end: auto;
        width: 48px;
        height: 48px;
        font-size: 0.75rem;
    }
}

/* ---- News cards ---------------------------------------------------------
   Shared by the homepage "Our News" section and the news archive so both
   look and behave the same: a gold day/month badge over the image, a
   short excerpt, and a hover lift instead of the theme's flat grey box. */
.news-card {
    background: #fff;
    box-shadow: 0 2px 14px rgba(44, 55, 62, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(44, 55, 62, 0.16);
}
.news-card .news-card-media {
    position: relative;
    overflow: hidden;
}
.news-card .news-card-media img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.news-card:hover .news-card-media img {
    transform: scale(1.06);
}
.news-card.news-card-featured .news-card-media img {
    height: 360px;
}
.news-card .news-card-date {
    position: absolute;
    top: 16px;
    inset-inline-start: 16px;
    background: var(--boh-charcoal);
    color: #fff;
    text-align: center;
    padding: 8px 14px;
    line-height: 1.2;
    z-index: 1;
}
.news-card .news-card-date strong {
    display: block;
    color: var(--boh-gold);
    font-size: 1.15rem;
    font-weight: 800;
}
.news-card .news-card-date span {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.9;
}
.news-card .news-card-body {
    padding: 22px 24px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.news-card .news-card-title {
    margin: 0 0 10px;
    font-size: 1.05rem;
    text-transform: uppercase;
    line-height: 1.4;
}
.news-card .news-card-title a {
    color: var(--boh-charcoal);
}
.news-card .news-card-title a:hover {
    color: var(--boh-gold);
}
.news-card.news-card-featured .news-card-title {
    font-size: 1.4rem;
}
.news-card .news-card-excerpt {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 0 0 16px;
    flex: 1;
}
.news-card .news-card-more {
    color: var(--boh-gold);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.news-card .news-card-more i {
    margin-inline-start: 4px;
    transition: transform 0.2s ease;
}
.news-card:hover .news-card-more i {
    transform: translateX(3px);
}
[dir="rtl"] .news-card:hover .news-card-more i {
    transform: translateX(-3px);
}

/* Non-clickable tag badges on the news detail page — the old markup
   linked tags to "#" (no tag archive page exists yet), which read as a
   broken link. Styled as plain labels until a real tag page is built. */
.news-tag-badge {
    display: inline-block;
    background: var(--boh-slate);
    color: #fff;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 5px 12px;
    margin: 0 6px 6px 0;
    border-radius: 3px;
}

/* ---- Custom "binomairah" icon font ------------------------------------
   Its glyphs are drawn with far less internal padding than the theme's
   default icon fonts, so at the same font-size they read as oversized
   inside the wt-icon-box-* circles. Scale down for the same visual
   balance the theme's own icons have. */
.wt-icon-box-lg i[class*="binicon-"] {
    font-size: 42px;
}
.wt-icon-box-md i[class*="binicon-"] {
    font-size: 32px;
}
.wt-icon-box-sm i[class*="binicon-"] {
    font-size: 22px;
}

/* ---- Homepage About Us: merged text + stats + image panel -------------
   The intro paragraph, CTA, and facts used to live in separate stacked
   blocks with mismatched heights against the image, leaving dead space.
   Now the stats sit inline with the text, in the same column as the
   copy, and the whole row is vertically centered against the image so
   it reads as one panel instead of three disconnected pieces. */
.about-merged-row .wt-separator-outer.m-l0 {
    margin-inline-start: 0;
}
.about-media img {
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(44, 55, 62, 0.12);
}
.about-stat-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 10px;
}
.about-stat-inline .stat-item {
    padding-top: 12px;
    border-top: 3px solid var(--boh-gold);
    min-width: 100px;
}
.about-stat-inline .stat-item b {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--boh-charcoal);
    line-height: 1.2;
}
.about-stat-inline .stat-item span {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #777;
}

/* ---- Quality & Safety certification badges -----------------------------
   The company holds three real ISO certifications (confirmed against the
   "How We Work" page content) that were never surfaced visually anywhere
   on the site. Reused on both the dedicated Quality & Safety page and the
   homepage teaser strip. */
.quality-badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 10px 0 20px;
}
.quality-badge {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-top: 4px solid var(--boh-gold);
    border-radius: 6px;
    padding: 24px 20px;
    text-align: center;
}
.quality-badge .std {
    display: block;
    font-family: inherit;
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--boh-charcoal);
}
.quality-badge .label {
    display: block;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--boh-slate-dark);
    margin: 6px 0 10px;
    font-weight: 700;
}
.quality-badge p {
    font-size: 0.86rem;
    color: #666;
    margin: 0;
    line-height: 1.6;
}
@media (max-width: 767px) {
    .quality-badges {
        grid-template-columns: 1fr;
    }
}

/* Compact homepage teaser variant — smaller, inline, no card shadow so it
   reads as a trust strip rather than a full section. */
.quality-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
}
.quality-strip .chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-inline-start: 3px solid var(--boh-gold);
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--boh-charcoal);
}
.quality-strip .chip i {
    color: var(--boh-slate);
}

/* ---- "What You Can Count On" value bullet points ------------------------
   Used on the Philosophy/Values page in place of a plain browser bullet,
   so the list reads as a set of commitments rather than generic text. */
.value-points {
    list-style: none;
    margin: 0 0 6px;
    padding: 0;
}
.value-points li {
    position: relative;
    padding-inline-start: 22px;
    margin-bottom: 8px;
    font-size: 0.92rem;
    color: #585858;
    line-height: 1.6;
}
.value-points li::before {
    content: "\f00c";
    font-family: "FontAwesome";
    position: absolute;
    inset-inline-start: 0;
    top: 2px;
    color: var(--boh-gold);
    font-size: 0.8rem;
}

/* ---- Philosophy page: identity sequence --------------------------------
   Philosophy, Vision, Mission and Values read as one line of thought
   (each builds on the one before), so they're presented as a numbered
   sequence with hairline dividers rather than four identical boxes. */
.identity-sequence {
    margin-top: 10px;
}
.identity-step {
    border-inline-start: 1px solid rgba(255, 255, 255, 0.16);
    padding-inline-start: 26px;
}
.identity-step:first-child {
    border-inline-start: none;
}
.identity-step-num {
    display: block;
    font-family: inherit;
    font-weight: 800;
    font-size: 2.1rem;
    color: transparent;
    -webkit-text-stroke: 1px var(--boh-gold);
}
.identity-step-text {
    color: #c9d3d8;
    font-size: 0.9rem;
    line-height: 1.75;
    margin: 0;
}
@media (max-width: 991px) {
    .identity-step {
        border-inline-start: none;
        padding-inline-start: 0;
    }
}

/* ---- Philosophy page: values as a spacious reading list ----------------
   Replaces a 2-per-row grid of boxed cards (which read as one dense
   block) with a single column of wide rows, generous vertical rhythm,
   and a hairline divider between entries. */
.value-row-list {
    margin-top: 10px;
}
.value-row {
    display: flex;
    gap: 28px;
    padding: 34px 0;
    border-bottom: 1px solid #ececec;
}
.value-row:first-child {
    padding-top: 10px;
}
.value-row:last-child {
    border-bottom: none;
}
.value-row-icon {
    flex-shrink: 0;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--boh-charcoal);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}
.value-row-icon img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}
.value-row-body {
    flex: 1;
    min-width: 0;
}
@media (max-width: 575px) {
    .value-row {
        flex-direction: column;
        gap: 16px;
    }
}

/* ---- Contact page -------------------------------------------------------
   Headquarters details, the message form, branch listings and the map
   used to share one flat white box each with no visual priority. Gives
   the form (the page's one real action) a distinct highlighted card,
   turns the HQ block into a compact info strip instead of four more
   boxes, and gives branch cards and the map consistent framing. */
.contact-info-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 30px;
}
.contact-info-strip .info-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 6px;
    padding: 14px 18px;
    flex: 1 1 220px;
}
.contact-info-strip .info-chip i {
    color: var(--boh-gold);
    font-size: 1.2rem;
    flex-shrink: 0;
}
.contact-info-strip .info-chip span {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--boh-slate-dark);
    font-weight: 700;
}
.contact-info-strip .info-chip strong {
    display: block;
    font-size: 0.9rem;
    color: var(--boh-charcoal);
    font-weight: 600;
}

.contact-form-card {
    background: #fff;
    border: 1px solid #ececec;
    border-top: 4px solid var(--boh-gold);
    border-radius: 6px;
    padding: 34px 32px;
    box-shadow: 0 4px 20px rgba(44, 55, 62, 0.06);
}
.contact-form-card .alert-brand {
    background: color-mix(in srgb, var(--boh-gold) 12%, #fff);
    border: 1px solid var(--boh-gold);
    color: var(--boh-charcoal);
    border-radius: 4px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-weight: 600;
}

.branch-card {
    background: #fff;
    border: 1px solid #ececec;
    border-inline-start: 3px solid var(--boh-gold);
    border-radius: 6px;
}

.map-frame {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(44, 55, 62, 0.12);
}
.map-frame .google-map iframe {
    height: 420px;
}