/* Saudi Cab Co — Services / Coverage / Corporate Accounts visual system (v1).
   Scoped by post ID (this theme's body_class() does not emit a page-{slug}
   class, so body.page-id-321/19/14 is the only reliable hook) rather than
   editing page.php, which is flagged as high-risk in this codebase.

   Signature element: the "journey line" — a dashed vertical path between a
   pickup dot (lime) and a drop-off dot (emerald-adjacent) — is the same
   motif already proven on the search widget's route fields. It is reused
   here at hero scale as pure background-image layers (no pseudo-elements),
   so it never fights the base .content-hero:after circle decoration that
   every content page already relies on. Palette stays inside the frozen
   SCC tokens (--brand/--brand-dark/--accent/--ink/--paper); only type
   weights and layout are new. DM Sans + Manrope are already referenced by
   scc.css but were never enqueued — functions.php now loads them, so this
   file is also what makes that existing CSS finally render as intended. */

body.page-id-321 .content-hero,
body.page-id-19 .content-hero,
body.page-id-14 .content-hero{
    background-color:#07271e;
    background-image:
        radial-gradient(circle,#83c934 0 5px,rgba(255,255,255,.92) 5px 8px,transparent 8px),
        radial-gradient(circle,#006b4d 0 5px,rgba(255,255,255,.92) 5px 8px,transparent 8px),
        repeating-linear-gradient(to bottom,rgba(255,255,255,.3) 0 6px,transparent 6px 15px),
        radial-gradient(130% 160% at 10% -20%,rgba(131,201,52,.16),transparent 55%),
        linear-gradient(155deg,#04140f 0%,#07271e 42%,#034c3b 78%,#045a41 100%);
    background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
    background-position:
        right 9% top calc(50% - 123px),
        right 9% top calc(50% + 107px),
        right 9% center,
        0 0,
        0 0;
    background-size:16px 16px,16px 16px,2px 230px,100% 100%,100% 100%;
}
@media(max-width:1300px){
    body.page-id-321 .content-hero,
    body.page-id-19 .content-hero,
    body.page-id-14 .content-hero{
        background-image:
            radial-gradient(130% 160% at 10% -20%,rgba(131,201,52,.16),transparent 55%),
            linear-gradient(155deg,#04140f 0%,#07271e 42%,#034c3b 78%,#045a41 100%);
        background-position:0 0,0 0;
        background-size:100% 100%,100% 100%;
    }
}

body.page-id-321 .content-hero .content-eyebrow,
body.page-id-19 .content-hero .content-eyebrow,
body.page-id-14 .content-hero .content-eyebrow{
    display:inline-block;
    padding:6px 14px;
    border-radius:99px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.18);
}

body.page-id-321 .content-hero h1,
body.page-id-19 .content-hero h1,
body.page-id-14 .content-hero h1{
    font-family:'Manrope',sans-serif;
    font-weight:800;
}
body.page-id-321 .content-panel h2,
body.page-id-19 .content-panel h2,
body.page-id-14 .content-panel h2,
body.page-id-321 .content-card span,
body.page-id-19 .content-card span,
body.page-id-14 .content-card span,
body.page-id-321 .faq-section h2,
body.page-id-19 .faq-section h2,
body.page-id-14 .faq-section h2,
body.page-id-321 .content-cta h2,
body.page-id-19 .content-cta h2,
body.page-id-14 .content-cta h2,
body.page-id-14 .corporate-apply__aside h2{
    font-family:'Manrope',sans-serif;
    font-weight:750;
    letter-spacing:-.03em;
}
body.page-id-321 .content-lede,
body.page-id-19 .content-lede,
body.page-id-14 .content-lede,
body.page-id-321 .content-panel p,
body.page-id-19 .content-panel p,
body.page-id-14 .content-panel p,
body.page-id-321 .content-card p,
body.page-id-19 .content-card p,
body.page-id-14 .content-card p{
    font-family:'DM Sans',sans-serif;
}

/* Section panels: the "01/02" numeral was floating, bare text with no
   visual weight — converted to a small brand badge. These sections are
   parallel benefits/features, not an ordered process, so the badge reads
   as a reference tag rather than implying a sequence. */
body.page-id-321 .content-panel,
body.page-id-19 .content-panel,
body.page-id-14 .content-panel{
    border-top:3px solid var(--brand,#006b4d);
    border-radius:10px;
    transition:transform .22s ease,box-shadow .22s ease;
}
body.page-id-321 .content-panel:hover,
body.page-id-19 .content-panel:hover,
body.page-id-14 .content-panel:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 45px rgba(8,40,29,.10);
}
body.page-id-321 .content-panel__number,
body.page-id-19 .content-panel__number,
body.page-id-14 .content-panel__number{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    margin:0 0 22px;
    border-radius:50%;
    background:linear-gradient(155deg,var(--brand-dark,#034c3b),var(--brand,#006b4d));
    color:#fff;
    font-size:12px;
    font-weight:800;
}
/* Coverage is literally a map of stops — the badge becomes a route pin
   instead of a numeral, which fits the content (places, not steps). */
body.page-id-19 .content-panel__number{
    width:16px;
    height:16px;
    margin:0 0 40px;
    background:var(--accent,#83c934);
    border:3px solid #fff;
    box-shadow:0 0 0 1px #d9e3de,0 0 0 6px rgba(131,201,52,.16);
    font-size:0;
    color:transparent;
}

/* Airport / vehicle / town lists inside panels — plain bulleted <li>
   restyled as compact tags so long lists (city names, vehicle classes)
   scan quickly instead of reading like a legal list. */
body.page-id-321 .content-panel ul,
body.page-id-19 .content-panel ul{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding-left:0;
    margin:20px 0 0;
}
body.page-id-321 .content-panel ul li,
body.page-id-19 .content-panel ul li{
    list-style:none;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 14px;
    border:1px solid var(--line,#dfe5e1);
    border-radius:99px;
    background:#fff;
    font-size:13px;
    font-weight:650;
    color:var(--ink,#101918);
    line-height:1.2;
}
body.page-id-321 .content-panel ul li::before,
body.page-id-19 .content-panel ul li::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--accent,#83c934);
    flex:none;
}

/* Card grid: service/coverage/account cross-links. A thin top accent
   cycling brand/accent/forest gives rhythm across a long grid without
   introducing new colours, and the arrow becomes a real icon chip. */
body.page-id-321 .content-card,
body.page-id-19 .content-card,
body.page-id-14 .content-card{
    border-top:3px solid var(--brand,#006b4d);
    border-radius:10px;
    transition:transform .22s ease,box-shadow .22s ease;
}
body.page-id-321 .content-card:nth-child(3n+2),
body.page-id-19 .content-card:nth-child(3n+2),
body.page-id-14 .content-card:nth-child(3n+2){
    border-top-color:var(--accent,#83c934);
}
body.page-id-321 .content-card:nth-child(3n+3),
body.page-id-19 .content-card:nth-child(3n+3),
body.page-id-14 .content-card:nth-child(3n+3){
    border-top-color:var(--brand-dark,#034c3b);
}
body.page-id-321 .content-card:hover,
body.page-id-19 .content-card:hover,
body.page-id-14 .content-card:hover{
    transform:translateY(-5px);
    box-shadow:0 22px 50px rgba(8,40,29,.12);
}
body.page-id-321 .content-card b,
body.page-id-19 .content-card b,
body.page-id-14 .content-card b{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border-radius:50%;
    background:rgba(0,107,77,.08);
    transition:background .22s ease,transform .22s ease;
}
body.page-id-321 .content-card:hover b,
body.page-id-19 .content-card:hover b,
body.page-id-14 .content-card:hover b{
    background:var(--brand,#006b4d);
    color:#fff;
    transform:translateX(3px);
}

/* Closing CTA: same deep tone as the hero (bookends the page) but no
   repeated motif — the journey line already had its moment up top. */
body.page-id-321 .content-cta,
body.page-id-19 .content-cta,
body.page-id-14 .content-cta{
    background:linear-gradient(155deg,#0b2019 0%,#13261f 55%,#0d2a20 100%);
}

/* Corporate accounts: widen the narrow entry-content column just for this
   page so the application form can run a real two-column layout, and
   style the wrapper markup added to template-parts/corporate-account-form.php
   (owned by this theme, not page.php — safe to restructure directly). */
body.page-id-14 .content-section .content-narrow.entry-content{
    max-width:1120px;
}
body.page-id-14 .corporate-apply{
    display:grid;
    grid-template-columns:minmax(300px,360px) 1fr;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 30px 80px rgba(8,40,29,.14);
}
body.page-id-14 .corporate-apply__aside{
    background:linear-gradient(155deg,#07271e,#006b4d 135%);
    color:#fff;
    padding:48px 40px;
}
body.page-id-14 .corporate-apply__aside .content-eyebrow{
    color:var(--accent,#83c934);
    padding:0;
    background:none;
    border:0;
}
body.page-id-14 .corporate-apply__aside h2{
    margin:8px 0 14px;
    font-size:clamp(24px,2.6vw,30px);
    line-height:1.12;
}
body.page-id-14 .corporate-apply__aside-lede{
    color:rgba(255,255,255,.78);
    line-height:1.6;
    margin:0 0 28px;
}
body.page-id-14 .corporate-apply__points{
    list-style:none;
    margin:0 0 26px;
    padding:0;
    display:grid;
    gap:18px;
}
body.page-id-14 .corporate-apply__points li{
    position:relative;
    padding-left:22px;
}
body.page-id-14 .corporate-apply__points li::before{
    content:"";
    position:absolute;
    left:0;
    top:6px;
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--accent,#83c934);
    box-shadow:0 0 0 4px rgba(131,201,52,.2);
}
body.page-id-14 .corporate-apply__points li b{
    display:block;
    font-family:'Manrope',sans-serif;
    font-size:15px;
    font-weight:750;
    margin-bottom:3px;
}
body.page-id-14 .corporate-apply__points li span{
    display:block;
    font-family:'DM Sans',sans-serif;
    font-size:13.5px;
    color:rgba(255,255,255,.72);
    line-height:1.5;
}
body.page-id-14 .corporate-apply__aside-note{
    margin:0;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.14);
    color:rgba(255,255,255,.6);
    font-size:12.5px;
    line-height:1.55;
}
body.page-id-14 .corporate-apply__card{
    background:#fff;
    padding:48px 44px;
}
body.page-id-14 .corporate-apply__card .contact-form{
    padding:0;
    border:0;
}
@media(max-width:900px){
    body.page-id-14 .corporate-apply{
        grid-template-columns:1fr;
        border-radius:10px;
    }
    body.page-id-14 .corporate-apply__aside,
    body.page-id-14 .corporate-apply__card{
        padding:32px 24px;
    }
}

@media(prefers-reduced-motion:reduce){
    body.page-id-321 .content-panel,
    body.page-id-19 .content-panel,
    body.page-id-14 .content-panel,
    body.page-id-321 .content-card,
    body.page-id-19 .content-card,
    body.page-id-14 .content-card,
    body.page-id-321 .content-card b,
    body.page-id-19 .content-card b,
    body.page-id-14 .content-card b{
        transition:none;
    }
    body.page-id-321 .content-panel:hover,
    body.page-id-19 .content-panel:hover,
    body.page-id-14 .content-panel:hover,
    body.page-id-321 .content-card:hover,
    body.page-id-19 .content-card:hover,
    body.page-id-14 .content-card:hover,
    body.page-id-321 .content-card:hover b,
    body.page-id-19 .content-card:hover b,
    body.page-id-14 .content-card:hover b{
        transform:none;
    }
}