/* ==========================================================================
   Eelam Brand Overrides
   Brand colors from logo:
     Orange  #F5A623  (logo mark + "innovations" wordmark)
     Black   #111111  (EELAM wordmark)
   ========================================================================== */

/* ── 1. Brand colours ──────────────────────────────────────────────────── */
:root {
    --theme-color:       #F5A623;   /* brand orange (logo mark)              */
    --theme-color-dark:  #D4880A;
    --theme-color-light: #FDE8B8;
    --brand-black:       #111111;

    /* theme-color2 is used as bg AND text. Set it to brand orange so
       bg-theme2 sections become warm amber instead of green.             */
    --theme-color2:      #F5A623;

    /* theme-color3 is only ever used as a section background.
       Replace the mint (#ecf8f8) with a warm neutral light grey.         */
    --theme-color3:      #F5F2ED;

    /* ── Neutrals: replace the original teal-dark palette with brand black ── */
    /* Original template was a teal company (#063232). Eelam is black-based.   */
    --dark-color:        #111111;   /* was #063232 dark teal */
    --dark-color2:       #1A1A1A;   /* was #053131 darker teal */
    --dark-color3:       #242424;   /* was #114f4f teal */
    --gray-color:        #555555;   /* was #5a7779 teal-grey */
    --gray-color2:       #888888;   /* was #90b4b6 teal-grey */
    --light-color:       #F8F6F2;   /* was #edfbfb mint */
    --light-color2:      #F8F6F2;   /* was #f4f8ec pale green */

    /* Semi-transparent overlays — remove the teal tint, use neutral black  */
    --bs-bg-color1:      rgba(17, 17, 17, 0.40);   /* was rgba(6,50,50,.4) */
    --bs-bg-color3:      rgba(8, 8, 8, 0.70);      /* was rgba(2,27,27,.7) */
    --bs-bg-color4:      rgba(248, 246, 242, 0.20);/* was rgba(236,248,248,.2) */
    --bs-bg-color7:      rgba(8, 8, 8, 0.10);      /* was rgba(6,50,50,.1) */
    --bs-bg-color8:      rgba(8, 8, 8, 0.80);      /* was rgba(6,50,50,.8) */
    --bs-bg-color13:     rgba(8, 8, 8, 0.70);      /* was rgba(6,50,50,.7) */

    /* Borders — remove teal tint */
    --bs-border-color5:  rgba(0, 0, 0, 0.10);      /* was rgba(0,67,70,.1) */
    --bs-border-color6:  rgba(0, 0, 0, 0.15);      /* was rgba(6,50,50,.15) */
    --bs-border-color7:  rgba(0, 0, 0, 0.10);      /* was rgba(6,50,50,.1) */
    --bs-border-color10: rgba(0, 0, 0, 0.10);      /* was rgba(6,50,50,.1) */
    --bs-border-color12: rgba(0, 0, 0, 0.20);      /* was rgba(6,50,50,.2) */
}

/* text-theme2 uses --theme-color2 but needs better contrast on LIGHT
   backgrounds (#F5A623 is only 1.8:1 on #F5F2ED – fails even for headings).
   Override it to a deeper amber that passes AA on both dark and light.   */
.text-theme2 { color: #C47500 !important; }

/* ── 2. Body text contrast fix — targeted to white/light sections only ── */
/* Original #5a7779 is 3.7:1 on white (fails AA).
   We only fix it where the background is actually white/light. */
.bg-white .text,
.bg-white .sec-text,
.bg-white p:not(.price):not(.billing-cycle):not(.plan),
.bg-theme3 .text,
.bg-theme3 .sec-text,
.bg-theme3 p:not(.price):not(.billing-cycle):not(.plan) {
    color: #3d5052;
}

/* ── 3. Focus-visible — keyboard nav only, never on mouse click ─────── */
:focus          { outline: none; }
:focus-visible  {
    outline: 3px solid var(--theme-color) !important;
    outline-offset: 3px !important;
    border-radius: 3px;
}

/* Input ring stays on focus regardless (users expect it) */
input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.30) !important;
    border-color: var(--theme-color) !important;
}

/* ── 4. NProgress bar — brand orange ───────────────────────────────── */
#nprogress .bar { background: var(--theme-color) !important; }
#nprogress .peg { box-shadow: 0 0 10px var(--theme-color), 0 0 5px var(--theme-color) !important; }

/* ── 5. Preloader close button reset ───────────────────────────────── */
button.preloader-close {
    cursor: pointer;
    background: none;
    border: 2px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    font-size: 14px;
    padding: 4px 10px;
    border-radius: 4px;
    transition: border-color 0.2s, background 0.2s;
}
button.preloader-close:hover,
button.preloader-close:focus-visible {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
}

/* ── 6. Micro-animation: button press ──────────────────────────────── */
.theme-btn {
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.25s ease !important;
    will-change: transform;
}
.theme-btn:active {
    transform: scale(0.97) translateY(1px) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

/* ── 7. Sticky CTA bar — all screen sizes (§6) ─────────────────────── */
body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }

.sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    background: rgba(8, 8, 8, 0.96);
    border-top: 1px solid #242424;
    padding: 10px 24px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 10px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
}

.sb-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.sb-brand {
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.sb-brand span { color: #F5A623; }

.sb-tagline {
    font-size: 12px;
    color: #444;
    display: none;
    white-space: nowrap;
}

.sb-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sb-call {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #242424;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid #2E2E2E;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s, transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}

.sb-call:hover { background: #2E2E2E; color: #fff; }
.sb-call:active { transform: scale(0.96); }

.sb-quote {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #F5A623;
    color: #080808;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: 8px;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s, transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}

.sb-quote:hover { background: #D4891A; color: #080808; }
.sb-quote:active { transform: scale(0.96); }

@media (min-width: 640px) {
    .sb-tagline { display: block; }
    .sticky-bar { padding: 10px 48px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}

@media (max-width: 400px) {
    .sb-brand { display: none; }
}

/* ── 8. Canonical brand design tokens (§3) ─────────────────────────── */
:root {
    --or:    #F5A623;
    --or-dk: #D4891A;
    --or-dp: #A86310;
    --or-pl: #FFF4E0;
    --or-mu: rgba(245, 166, 35, 0.10);

    --bk:  #080808;
    --dk:  #111111;
    --dk2: #1A1A1A;
    --dk3: #242424;
    --dk4: #2E2E2E;
    --mid: #555555;
    --mu:  #888888;
    --bd:  #E4E4E4;
    --sf:  #F8F6F2;
    --wh:  #FFFFFF;

    --ok:     #1A7A4A;
    --er:     #C0392B;
    --ok-bg:  #E6F4EA;
    --er-bg:  #FDECEA;

    --r4:  4px;
    --r8:  8px;
    --r14: 14px;
    --r22: 22px;
    --rp:  100px;

    --sh:  0 4px 20px rgba(0, 0, 0, 0.07);
    --shl: 0 12px 40px rgba(0, 0, 0, 0.12);

    --nh:         60px;
    --inner-max:  1100px;
}

/* ── 9. Brand typography (§4) ──────────────────────────────────────── */
h1, h2, h3, h4, h5, h6, .sec-title, .title {
    font-family: 'Syne', sans-serif;
}

body, p, .text, .sec-text, input, select, textarea {
    font-family: 'DM Sans', sans-serif;
}

code, pre, .price, .dom-in {
    font-family: 'DM Mono', monospace;
}

/* ── 10. Material Symbols base class (§4) ───────────────────────────── */
.icon {
    font-family: 'Material Symbols Outlined';
    font-size: inherit;
    line-height: 1;
    vertical-align: middle;
    user-select: none;
    font-style: normal;
    display: inline-flex;
    align-items: center;
}

/* ── 11. Brand CSS background patterns ─────────────────────────────── */

/* Shared setup — all patterns use ::before so they never block content */
.pat-dots,
.pat-grid,
.pat-stripe,
.pat-mesh,
.pat-orange-grid,
.pat-nodes {
    position: relative;
    isolation: isolate;
}

.pat-dots::before,
.pat-grid::before,
.pat-stripe::before,
.pat-mesh::before,
.pat-orange-grid::before,
.pat-nodes::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Children need to sit above the pattern */
.pat-dots > *,
.pat-grid > *,
.pat-stripe > *,
.pat-mesh > *,
.pat-orange-grid > *,
.pat-nodes > * {
    position: relative;
    z-index: 1;
}

/* 1. Dot Grid — subtle dot lattice, works on light & dark */
.pat-dots::before {
    background-image: radial-gradient(circle, rgba(245,166,35,0.18) 1.5px, transparent 1.5px);
    background-size: 28px 28px;
}

/* 2. Technical Grid — thin construction lines, light sections */
.pat-grid::before {
    background-image:
        linear-gradient(rgba(245,166,35,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245,166,35,0.07) 1px, transparent 1px);
    background-size: 44px 44px;
}

/* 3. Diagonal Stripe — 45° hairlines */
.pat-stripe::before {
    background-image: repeating-linear-gradient(
        -45deg,
        transparent 0px,
        transparent 13px,
        rgba(245,166,35,0.07) 13px,
        rgba(245,166,35,0.07) 14px
    );
}

/* 4. Radial Mesh — soft glowing corners, hero/dark sections */
.pat-mesh::before {
    background-image:
        radial-gradient(ellipse at 0% 0%,   rgba(245,166,35,0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 100% 100%, rgba(245,166,35,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 0%,  rgba(245,166,35,0.05) 0%, transparent 40%);
}

/* 5. Orange Grid — heavier grid for dark backgrounds */
.pat-orange-grid::before {
    background-image:
        linear-gradient(rgba(245,166,35,0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245,166,35,0.14) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* 6. Node Network — dots at grid intersections with faint connecting grid */
.pat-nodes::before {
    background-image:
        radial-gradient(circle at 0px 0px,    rgba(245,166,35,0.20) 2px, transparent 2px),
        radial-gradient(circle at 60px 60px,  rgba(245,166,35,0.16) 2px, transparent 2px),
        radial-gradient(circle at 60px 0px,   rgba(245,166,35,0.14) 2px, transparent 2px),
        radial-gradient(circle at 0px 60px,   rgba(245,166,35,0.14) 2px, transparent 2px),
        radial-gradient(circle at 30px 30px,  rgba(245,166,35,0.08) 1.5px, transparent 1.5px),
        linear-gradient(rgba(245,166,35,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245,166,35,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* ── 12. Section dividers (§5) ──────────────────────────────────────── */
hr.rule {
    border: none;
    height: 2px;
    margin: 0;
    background: linear-gradient(90deg, transparent 0%, #F5A623 30%, #F5A623 70%, transparent 100%);
    opacity: 0.6;
}

hr.rule.rev {
    background: linear-gradient(90deg, #F5A623 0%, #F5A623 40%, transparent 100%);
    opacity: 0.5;
}

hr.rule.thick {
    height: 3px;
    opacity: 0.8;
}

/* ── 13. Suppress Bentol decorative shape images ────────────────────── */
/* These positioned PNG shapes are replaced by CSS brand patterns above   */
img[src*="bentol/assets/images/shapes/star"],
img[src*="bentol/assets/images/banner/shape"],
img[src*="bentol/assets/images/service/shape"],
img[src*="bentol/assets/images/service/box-shape"],
img[src*="bentol/assets/images/choose/shape"],
img[src*="bentol/assets/images/contact/shape"],
img[src*="bentol/assets/images/testimonial/shape"],
img[src*="bentol/assets/images/about/shape"],
img[src*="bentol/assets/images/mission/shape"],
img[src*="bentol/assets/images/counter/shape"],
img[src*="bentol/assets/images/newslatter/shape"],
img[src*="bentol/assets/images/team/shape"] {
    display: none !important;
}

/* ── 14. Marquee separator ──────────────────────────────────────────── */
.m-sep {
    display: inline-block;
    color: #F5A623;
    font-size: 10px;
    line-height: 1;
    vertical-align: middle;
    margin: 0 4px;
    user-select: none;
}