/* Athar brand overrides — loaded after style.css */

/* Constrain the Athar logo to header / sidebar dimensions
   (source logo is 3348×1093, must be sized down for the UI) */
.header-logo img {
    max-width: 170px;
    height: auto;
    display: block;
}

.sidebar__logo img {
    max-width: 170px;
    height: auto;
    display: block;
}

.footer-logo img {
    width: 100%;
    max-width: 180px;
    height: auto;
    display: block;
}

/* Slight letter-spacing nudge so navigation looks tidy with the new
   Athar wordmark above it */
.main-menu nav ul li a {
    letter-spacing: 0.01em;
}

/* Active page in the navbar — highlighted via JS adding .active to the
   matching <li>. Uses cyan accent and bottom underline so the current
   page is visually obvious without breaking the existing hover state. */
.main-menu nav ul li.active > a,
.main-menu nav ul li.active:hover > a {
    color: #00AEEF;
    position: relative;
}

.main-menu nav ul li.active > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    height: 2px;
    background: #00AEEF;
    border-radius: 2px;
}

/* Mobile menu (meanmenu) active state — same accent, simpler treatment */
.mean-nav ul li.active > a {
    color: #00AEEF;
    font-weight: 700;
}

/* Language toggle button in the header */
.header-lang {
    display: inline-flex;
    align-items: center;
    margin-right: 12px;
}

/* Header stays LTR even when the page is in RTL — logo stays on the
   left, lang toggle + Contact Us stay on the right, only the menu
   item text translates. (Per request: bs الـ pages تتحول.) */
html[dir="rtl"] .header-section {
    direction: ltr;
}

/* Inside the (LTR-locked) header, undo the global RTL button mirroring
   so the Contact Us arrow keeps pointing right and sits on the right
   side of the text — only the wrapped <span> text translates. */
html[dir="rtl"] .header-section .btn i,
html[dir="rtl"] .header-section .btn2 i {
    left: 5px;
    right: auto;
}

html[dir="rtl"] .header-section .btn span + i,
html[dir="rtl"] .header-section .btn2 span + i {
    margin-left: 4px;
    margin-right: 0;
}

html[dir="rtl"] .header-section .fa-arrow-right {
    transform: none;
}

.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border: 1px solid #0B1F3A;
    border-radius: 999px;
    background: transparent;
    color: #0B1F3A;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.lang-toggle:hover,
.lang-toggle:focus-visible {
    background: #0B1F3A;
    color: #ffffff;
    outline: none;
}

.lang-toggle i {
    font-size: 13px;
}

/* Home hero brand line (h1) — sits above the tagline h2. Visible but
   secondary in scale; carries the SEO weight for the company name. */
.hero-brand {
    font-size: clamp(16px, 1.6vw, 20px);
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #00AEEF;
    margin: 0 0 12px;
    text-transform: none;
}

/* Lang toggle inside the mobile sidebar (visible on small screens
   where the header lang-toggle is hidden via d-lg-block). */
.sidebar__lang {
    margin: 24px 0 32px;
}

.sidebar__lang .lang-toggle {
    width: 100%;
    justify-content: center;
}

/* Mirror small icons/arrows when the site flips to RTL */
html[dir="rtl"] .fa-arrow-right {
    transform: scaleX(-1);
}

/* RTL fixes for the template buttons.
   The original .btn i / .btn2 i uses `left: 5px` which is correct for
   LTR but wrong in RTL — it pushes the icon AWAY from the text instead
   of toward it. Mirror to `right: 5px` when the site is in RTL.
   Also fix .btn2's `margin-left` so the gap stays between the two
   buttons regardless of direction. */
html[dir="rtl"] .btn i,
html[dir="rtl"] .btn2 i {
    left: auto;
    right: 5px;
}

html[dir="rtl"] .btn2 {
    margin-left: 0;
    margin-right: 25px;
}

/* Arrow + text spacing inside CTAs — give the icon a touch more breathing
   room from the wrapped text span so it doesn't visually collide. */
.btn span + i,
.btn2 span + i,
.read-more span + i {
    margin-left: 4px;
}

html[dir="rtl"] .btn span + i,
html[dir="rtl"] .btn2 span + i,
html[dir="rtl"] .read-more span + i {
    margin-left: 0;
    margin-right: 4px;
}

/* Counter dividers — template uses border-right on every counter item
   except the last to draw vertical separators between (120+, 25+, 40+).
   In RTL the column order flips, so the border lands on the wrong edge
   and the dividers float outside the layout. Swap to border-left in RTL. */
html[dir="rtl"] .counter-wrap .col-xl-4:not(:last-child) .counter-item {
    border-right: 0;
    border-left: 1px solid #BDBDBD;
}

/* Skill bar percentage — template absolutely positions the % label at
   right: 0, which collides with the Arabic skill title in RTL. Flip
   it to the visual end of the line (left edge). */
html[dir="rtl"] .skill-bar-wrap .skill-item .skill-header .skill-percentage {
    right: auto;
    left: 0;
}

/* Skill progress fill — template fills from left: 0. In RTL the bar
   should grow from the right edge instead so it visually advances in
   the natural reading direction. */
html[dir="rtl"] .skill-bar-wrap .skill-item .bar-inner .progress-line {
    left: auto;
    right: 0;
}

/* Footer contact column — template puts margin-left: 25px on the text
   to create a gap between the (zero-width) icon and the value. In RTL
   that gap lands on the wrong side, so the phone / email / map icons
   overlap the Arabic text. Mirror to margin-right under RTL. */
html[dir="rtl"] .footer-widget-4 ul li .info-text {
    margin-left: 0;
    margin-right: 25px;
}

/* Address wraps to two lines in Arabic but the template forces
   line-height: 10px on .info-text, which collapses the wrapped lines
   into each other. Restore a readable line-height on the actual text. */
.footer-widget-4 ul li .info-text .label-name {
    line-height: 1.5;
}

/* Hide sections with placeholder template content not yet ready for
   Athar production. Easy to re-enable once real content arrives. */
.consuldal-project-section,
.consuldal-testimonial-section,
.consuldal-blog-section,
.consuldal-pricing-section {
    display: none;
}

/* Contact form status (success / error / loading) — bilingual messages
   set by athar-contact.js after the Web3Forms request resolves. */
.form-status {
    margin-top: 18px;
    padding: 14px 18px;
    border-radius: 4px;
    font-size: 15px;
    line-height: 1.6;
    border-width: 1px;
    border-style: solid;
}

.form-status[data-state="loading"] {
    color: #1368A7;
    background: rgba(19, 104, 167, 0.08);
    border-color: rgba(19, 104, 167, 0.25);
}

.form-status[data-state="success"] {
    color: #006838;
    background: rgba(0, 104, 56, 0.08);
    border-color: rgba(0, 104, 56, 0.25);
}

.form-status[data-state="error"] {
    color: #b00020;
    background: rgba(176, 0, 32, 0.06);
    border-color: rgba(176, 0, 32, 0.25);
}

/* Disabled submit button feedback */
#athar-contact-form button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Team member avatar placeholders — used until real headshots arrive.
   Navy background with the Athar wordmark centred. The DIV's own text
   (initials) is hidden via font-size:0 so the JS i18n can still
   translate it without affecting the visual. */
.single-team-02 .image-box .avatar-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, #0B1F3A 0%, #1335A7 100%);
    color: transparent;
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    position: relative;
    user-select: none;
}

.single-team-02 .image-box .avatar-placeholder::before {
    content: "Athar";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-family: 'Heebo', 'Segoe UI', sans-serif;
    font-size: clamp(44px, 5vw, 68px);
    font-weight: 700;
    letter-spacing: 0.04em;
    opacity: 0.92;
}