/*
 * YES Digital — Homepage Visual Polish v1.2
 * Focus: above-the-fold hierarchy and transition into services.
 * Requires Homepage Professional Redesign v1.1.
 * Presentation-only.
 */

/* =========================================================
   Global optical tuning
   ========================================================= */
[data-home-polish="professional-v12"] {
    --v12-navy: #071b33;
    --v12-navy-2: #0b2748;
    --v12-blue: #1769e0;
    --v12-gold: #c9972e;
    --v12-line: #dfe7ef;
    --v12-muted: #5f7185;
}

body:has([data-home-polish="professional-v12"]) {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* =========================================================
   1) Topbar — clearer, calmer, more institutional
   ========================================================= */
body:has([data-home-polish="professional-v12"]) .yes-ux-topbar {
    min-height: 34px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background:
        linear-gradient(90deg, #041723 0%, #062a43 52%, #082e4a 100%);
}

body:has([data-home-polish="professional-v12"]) .yes-ux-topbar,
body:has([data-home-polish="professional-v12"]) .yes-ux-topbar a,
body:has([data-home-polish="professional-v12"]) .yes-ux-topbar span {
    font-size: 12px;
    line-height: 1.55;
}

body:has([data-home-polish="professional-v12"]) .yes-ux-topbar .yes-container {
    min-height: 34px;
}

/* =========================================================
   2) Main header — stronger brand + navigation readability
   ========================================================= */
body:has([data-home-polish="professional-v12"]) .yes-ux-header {
    border-bottom: 1px solid rgba(214,224,234,.95);
    background: rgba(255,255,255,.975);
    box-shadow:
        0 1px 0 rgba(15,23,42,.02),
        0 9px 26px rgba(7,32,48,.055);
}

body:has([data-home-polish="professional-v12"]) .yes-ux-header__inner {
    min-height: 86px;
    gap: 18px;
}

body:has([data-home-polish="professional-v12"]) .yes-ux-brand {
    min-width: max-content;
    gap: 12px;
}

body:has([data-home-polish="professional-v12"]) .yes-ux-brand__mark {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 14px;
    box-shadow:
        0 1px 2px rgba(15,23,42,.05),
        0 9px 24px rgba(7,32,48,.10);
}

body:has([data-home-polish="professional-v12"]) .yes-ux-brand__copy {
    line-height: 1.35;
}

body:has([data-home-polish="professional-v12"]) .yes-ux-brand__copy > *:first-child {
    font-size: 13px;
    font-weight: 800;
    color: #0d2844;
}

body:has([data-home-polish="professional-v12"]) .yes-ux-brand__copy > *:last-child {
    margin-top: 3px;
    font-size: 10.5px;
    color: #738397;
}

body:has([data-home-polish="professional-v12"]) .yes-ux-nav {
    gap: 2px;
}

body:has([data-home-polish="professional-v12"]) .yes-ux-nav-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    border-radius: 12px;
    padding-inline: 12px;
    font-size: 13px !important;
    font-weight: 700;
    line-height: 1.4;
    color: #263d55;
}

body:has([data-home-polish="professional-v12"]) .yes-ux-nav-link:hover {
    background: #f1f6fa;
    color: #075d87;
}

body:has([data-home-polish="professional-v12"]) .yes-ux-nav-link[aria-current="page"],
body:has([data-home-polish="professional-v12"]) .yes-ux-nav-link.is-active {
    background: #eef7fc;
    color: #075d87;
}

body:has([data-home-polish="professional-v12"]) .yes-ux-header-btn,
body:has([data-home-polish="professional-v12"]) .yes-ux-icon-btn {
    min-height: 44px;
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 800;
}

/* =========================================================
   3) News ticker — less noise, stronger scanning
   ========================================================= */
[data-home-section="news_ticker"] {
    border-bottom: 1px solid #e4ebf2;
    background: #fbfdff;
    box-shadow: 0 7px 20px rgba(15,23,42,.035);
}

[data-home-section="news_ticker"] .yes-container {
    min-height: 50px !important;
    gap: 16px;
}

[data-home-section="news_ticker"] p,
[data-home-section="news_ticker"] a,
[data-home-section="news_ticker"] span {
    font-size: 12.5px;
    line-height: 1.65;
}

[data-home-section="news_ticker"] span[class*="rounded-full"] {
    min-height: 30px;
    padding-inline: 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(135deg, #061a30, #0b3b60);
    box-shadow: 0 5px 15px rgba(6,26,48,.10);
}

[data-home-section="news_ticker"] [class*="amber"],
[data-home-section="news_ticker"] [class*="yellow"] {
    color: var(--v12-gold);
}

/* =========================================================
   4) Hero — stronger hierarchy, larger CTA, tighter measure
   ========================================================= */
[data-home-section="hero"] > section,
[data-home-section="hero"] #yes-ux-hero {
    min-height: clamp(31rem, 62vh, 39rem);
}

[data-home-section="hero"] #yes-ux-hero {
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.05);
}

[data-home-section="hero"] #yes-ux-hero::before {
    opacity: .72;
}

[data-home-section="hero"] .yes-container {
    min-height: inherit;
    display: flex;
    align-items: center;
}

[data-home-section="hero"] h1 {
    max-width: 680px !important;
    margin-top: 16px;
    font-size: clamp(2.8rem, 4.4vw, 4.05rem) !important;
    line-height: 1.28 !important;
    letter-spacing: -.02em;
}

[data-home-section="hero"] h1 + p,
[data-home-section="hero"] p[class*="text-slate"] {
    max-width: 650px !important;
    margin-top: 14px;
    color: #d8e4ec !important;
    font-size: clamp(1rem, 1.25vw, 1.12rem) !important;
    line-height: 1.95 !important;
}

[data-home-section="hero"] span[class*="rounded-full"] {
    min-height: 32px;
    padding-inline: 12px;
    border-color: rgba(201,151,46,.55) !important;
    background: rgba(5,31,52,.58) !important;
    color: #f0ca6a !important;
    font-size: 11.5px !important;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
}

[data-home-section="hero"] a[class*="inline-flex"],
[data-home-section="hero"] button[class*="inline-flex"],
[data-home-section="hero"] .yes-ui-button {
    min-height: 48px !important;
    padding-inline: 20px !important;
    border-radius: 13px !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0;
}

[data-home-section="hero"] a[class*="bg-amber"],
[data-home-section="hero"] a[class*="bg-yellow"],
[data-home-section="hero"] button[class*="bg-amber"],
[data-home-section="hero"] button[class*="bg-yellow"] {
    background: #d69b2c !important;
    color: #101828 !important;
    box-shadow: 0 10px 24px rgba(201,151,46,.20);
}

[data-home-section="hero"] a[class*="border"],
[data-home-section="hero"] button[class*="border"] {
    border-color: rgba(255,255,255,.42) !important;
    background: rgba(5,25,43,.28);
    backdrop-filter: blur(8px);
}

[data-home-section="hero"] a[class*="inline-flex"]:hover,
[data-home-section="hero"] button[class*="inline-flex"]:hover {
    transform: translateY(-1px);
}

/* Optical dark overlay toward copy side without obscuring engineering image. */
html[dir="rtl"] [data-home-section="hero"] #yes-ux-hero {
    background-color: #061a30;
}
html[dir="rtl"] [data-home-section="hero"] #yes-ux-hero::after {
    opacity: .82;
}

/* =========================================================
   5) Bridge to Quick Services — remove the flat visual break
   ========================================================= */
[data-home-section="quick_services"] {
    position: relative;
    z-index: 6;
    border-top: 1px solid rgba(222,231,239,.85);
    background:
        radial-gradient(circle at 80% 0%, rgba(23,105,224,.045), transparent 23rem),
        linear-gradient(180deg, #f8fbfe 0%, #fff 76%);
}

[data-home-section="quick_services"]::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-start: 50%;
    width: min(1120px, calc(100% - 48px));
    height: 3px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(23,105,224,.72) 28%,
        rgba(201,151,46,.76) 52%,
        rgba(23,105,224,.72) 76%,
        transparent
    );
    opacity: .72;
}

html[dir="rtl"] [data-home-section="quick_services"]::before {
    transform: translateX(50%);
}

[data-home-section="quick_services"] > section.yes-container {
    padding-top: 42px !important;
}

[data-home-section="quick_services"] .yes-section-heading,
[data-home-section="quick_services"] [class*="section-heading"] {
    position: relative;
    max-width: 760px;
    padding-inline-start: 18px;
}

[data-home-section="quick_services"] .yes-section-heading::before,
[data-home-section="quick_services"] [class*="section-heading"]::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .3em;
    width: 4px;
    height: 2.2em;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--v12-blue), var(--v12-gold));
}

[data-home-section="quick_services"] .yes-section-heading h2,
[data-home-section="quick_services"] [class*="section-heading"] h2 {
    font-size: clamp(1.9rem, 2.6vw, 2.45rem) !important;
    color: #0b2748;
}

[data-home-section="quick_services"] .yes-section-heading p,
[data-home-section="quick_services"] [class*="section-heading"] p {
    margin-top: 8px;
    max-width: 680px;
    color: #66778a;
}

/* Make service cards feel like a gateway, not generic boxes. */
[data-home-section="quick_services"] a,
[data-home-section="quick_services"] .yes-panel {
    min-height: 154px !important;
    border-radius: 20px !important;
    border-color: #dee7ef !important;
    background: linear-gradient(145deg, #fff, #f9fcff) !important;
    box-shadow:
        0 1px 2px rgba(15,23,42,.025),
        0 11px 28px rgba(15,23,42,.045) !important;
}

[data-home-section="quick_services"] a:hover,
[data-home-section="quick_services"] .yes-panel:hover {
    transform: translateY(-3px);
    border-color: #bad3ec !important;
    box-shadow:
        0 4px 10px rgba(15,23,42,.035),
        0 18px 40px rgba(15,23,42,.075) !important;
}

/* =========================================================
   Responsive polish
   ========================================================= */
@media (max-width: 1279.98px) {
    body:has([data-home-polish="professional-v12"]) .yes-ux-nav-link {
        padding-inline: 9px;
        font-size: 12px !important;
    }

    [data-home-section="hero"] h1 {
        max-width: 620px !important;
        font-size: clamp(2.55rem, 4.4vw, 3.6rem) !important;
    }
}

@media (max-width: 1023.98px) {
    body:has([data-home-polish="professional-v12"]) .yes-ux-header__inner {
        min-height: 74px;
    }

    body:has([data-home-polish="professional-v12"]) .yes-ux-brand__mark {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    [data-home-section="hero"] > section,
    [data-home-section="hero"] #yes-ux-hero {
        min-height: 34rem;
    }
}

@media (max-width: 767.98px) {
    body:has([data-home-polish="professional-v12"]) .yes-ux-topbar {
        min-height: 32px;
    }

    body:has([data-home-polish="professional-v12"]) .yes-ux-topbar,
    body:has([data-home-polish="professional-v12"]) .yes-ux-topbar a,
    body:has([data-home-polish="professional-v12"]) .yes-ux-topbar span {
        font-size: 11px;
    }

    [data-home-section="hero"] > section,
    [data-home-section="hero"] #yes-ux-hero {
        min-height: 32rem;
    }

    [data-home-section="hero"] h1 {
        margin-top: 12px;
        font-size: clamp(2.05rem, 9vw, 2.9rem) !important;
        line-height: 1.32 !important;
    }

    [data-home-section="hero"] h1 + p,
    [data-home-section="hero"] p[class*="text-slate"] {
        font-size: .98rem !important;
        line-height: 1.85 !important;
    }

    [data-home-section="hero"] a[class*="inline-flex"],
    [data-home-section="hero"] button[class*="inline-flex"],
    [data-home-section="hero"] .yes-ui-button {
        width: 100%;
        justify-content: center;
        min-height: 48px !important;
    }

    [data-home-section="news_ticker"] .yes-container {
        min-height: 46px !important;
    }

    [data-home-section="quick_services"]::before {
        width: calc(100% - 32px);
    }

    [data-home-section="quick_services"] > section.yes-container {
        padding-top: 34px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-home-polish="professional-v12"] *,
    [data-home-polish="professional-v12"] *::before,
    [data-home-polish="professional-v12"] *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}