/* Jobs abroad (jobs host, web build slice 2). Ported from design/mockups/web-final/jobs-abroad.html onto daylight.css.
   Scoped to [data-ab-origin], the wrapper the page's template puts around the body. Colours are tokens, so dark follows. */

[data-ab-origin] .hero.stage{padding:40px 0 56px}
[data-ab-origin] .hero .grid{display:grid;grid-template-columns:6fr 5fr;gap:36px;align-items:center}
[data-ab-origin] .hero .grid>*{min-width:0}
[data-ab-origin] .hero h1{max-width:18em}
[data-ab-origin] .hero .lede{margin-top:18px}
[data-ab-origin] .ab-cta{margin:24px 0 0;display:flex;flex-wrap:wrap;gap:10px}
[data-ab-origin] .hero.stage .btn.ghost{color:#fff;box-shadow:inset 0 0 0 1.5px #fff}

/* the trust box: first thing under the buttons, on a light card so it reads on the cobalt */
[data-ab-origin] .ab-trust{margin:26px 0 0;max-width:640px;background:var(--base);color:var(--ink);border:2px solid #111827;box-shadow:6px 6px 0 #111827;padding:16px 20px;font-size:.95rem}
[data-ab-origin] .ab-trust b{display:block;margin-bottom:4px;font:800 1.15rem var(--f-d);font-stretch:66%;text-transform:uppercase}

/* origin chips ("I live in"): the current origin is lime and not a link, the rest are links; 44px tap targets */
[data-ab-origin] .oc{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:26px}
[data-ab-origin] .oc .chip{display:inline-flex;align-items:center;min-height:44px;background:transparent;color:#fff;border-color:#fff}
[data-ab-origin] .oc .chip.on{background:var(--lime);color:#111827;border-color:var(--lime)}
[data-ab-origin] .oc a.chip:hover{background:var(--lime);color:#111827}

/* route sketch */
[data-ab-origin] .ab-map svg{width:100%;height:auto;display:block}
[data-ab-origin] .ab-map .arc{fill:none;stroke:var(--lime);stroke-width:3;stroke-dasharray:2 9;stroke-linecap:round;animation:abflow 1.6s linear infinite}
[data-ab-origin] .ab-map .arc.hot{stroke-width:4.5}
@keyframes abflow{to{stroke-dashoffset:-22}}
[data-ab-origin] .ab-map .city{fill:var(--lime);stroke:#111827;stroke-width:3}
[data-ab-origin] .ab-map .origin{fill:var(--coral);stroke:#111827;stroke-width:3}
[data-ab-origin] .ab-map text{font:600 15px var(--f-m);letter-spacing:.08em;fill:#fff;text-transform:uppercase}
[data-ab-origin] .ab-map text.k{fill:var(--lime)}
[data-ab-origin] .ab-map p{text-align:right;margin-top:6px}

/* sections */
[data-ab-origin] .sec{padding:72px 0}
[data-ab-origin] .sec.tight{padding:44px 0}
[data-ab-origin] .sec.alt{background:var(--lav)}
[data-ab-origin] .head{margin-bottom:40px}
[data-ab-origin] .head h2{font-size:clamp(2.2rem,4vw,4.2rem)}
[data-ab-origin] .head .sub{margin-top:14px;max-width:46em;color:var(--ink2)}
[data-ab-origin] .ab-fine{margin:14px 0 0;font-size:.88rem;color:var(--ink2);max-width:60em}
[data-ab-origin] .ab-fine a{color:var(--cobalt);font-weight:600}
[data-ab-origin] .ab-none{max-width:46em;color:var(--ink2)}

/* destinations (hub) and the origin list (index) */
[data-ab-origin] .routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:20px}
[data-ab-origin] .route{background:var(--base);border:1.5px solid var(--rule);box-shadow:var(--shadow);padding:22px 24px;display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink);transition:transform .2s}
[data-ab-origin] .route:hover{transform:translate(-3px,-3px)}
[data-ab-origin] .route .rn{font:800 clamp(2rem,3vw,2.8rem)/.95 var(--f-d);font-stretch:66%;text-transform:uppercase;margin-top:4px}
[data-ab-origin] .route .big-num{font-size:clamp(3rem,4vw,4.4rem);color:var(--cobalt);margin-top:10px}
[data-ab-origin] .route .tag{margin-top:6px}
[data-ab-origin] .route em{font:700 .75rem var(--f-m);font-style:normal;letter-spacing:.09em;text-transform:uppercase;color:var(--cobalt);margin-top:auto;padding-top:14px}

/* how it works */
[data-ab-origin] .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
[data-ab-origin] .steps .card h3{margin:6px 0 10px}

/* roles on a destination page, and the origin index */
[data-ab-origin] .ab-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
[data-ab-origin] .ab-grid a{display:flex;flex-direction:column;gap:4px;background:var(--base);border:1.5px solid var(--rule);padding:18px 20px;text-decoration:none;color:var(--ink);min-height:44px;transition:transform .2s,box-shadow .2s}
[data-ab-origin] .ab-grid a:hover{transform:translateY(-4px);box-shadow:0 6px 0 var(--cobalt)}
[data-ab-origin] .ab-grid b{font:800 1.5rem/1 var(--f-d);font-stretch:66%;text-transform:uppercase}
[data-ab-origin] .ab-grid span{font-size:.92rem;color:var(--ink2)}
[data-ab-origin] .ab-grid em{font:700 .75rem var(--f-m);font-style:normal;letter-spacing:.09em;text-transform:uppercase;color:var(--cobalt);margin-top:8px}

/* licensed sponsors */
[data-ab-origin] .ab-table{border:1.5px solid var(--rule);background:var(--base)}
[data-ab-origin] .ab-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 22px;border-top:1px solid var(--soft)}
[data-ab-origin] .ab-row:first-child{border-top:0}
[data-ab-origin] .ab-row a{text-decoration:none;color:var(--ink);display:inline-block;padding:10px 0}
[data-ab-origin] .ab-row a:hover{color:var(--cobalt)}
[data-ab-origin] .ab-row b{font-size:1.1rem}
[data-ab-origin] .ab-row span{color:var(--ink2);font-size:.95rem}
[data-ab-origin] .ab-tag{font:600 .62rem var(--f-m)!important;letter-spacing:.06em;text-transform:uppercase;background:var(--lime);color:#111827!important;padding:4px 8px;white-space:nowrap}

/* the video */
[data-ab-origin] .ab-video{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:28px;align-items:start}
[data-ab-origin] .ab-video video{width:100%;aspect-ratio:9/16;background:#111827;border:2px solid #111827;box-shadow:8px 8px 0 var(--cobalt);display:block}

/* the app row */
[data-ab-origin] .ab-appband{padding-top:20px}
[data-ab-origin] .ab-lock{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;background:var(--lime);color:#111827;border:2px solid #111827;box-shadow:8px 8px 0 #111827;padding:26px}
[data-ab-origin] .ab-lock p{margin-top:8px;max-width:40em}
[data-ab-origin] .ab-lock .btn{background:#111827;color:var(--lime)}

/* questions */
[data-ab-origin] .faq{display:grid;max-width:900px;border:1.5px solid var(--rule);background:var(--base)}
[data-ab-origin] .faq details{border-bottom:1px solid var(--soft)}
[data-ab-origin] .faq details:last-child{border:0}
[data-ab-origin] .faq summary{cursor:pointer;list-style:none;padding:20px 24px;min-height:44px;font:800 1.5rem/1.1 var(--f-d);font-stretch:66%;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;gap:16px}
[data-ab-origin] .faq summary::-webkit-details-marker{display:none}
[data-ab-origin] .faq summary::after{content:"+";font-size:1.6rem;color:var(--cobalt)}
[data-ab-origin] .faq details[open] summary::after{content:"\2212"}
[data-ab-origin] .faq details p{padding:0 24px 22px;font-size:1.02rem;line-height:1.55;max-width:46em}

@media(max-width:1000px){
  [data-ab-origin] .hero .grid,[data-ab-origin] .steps,[data-ab-origin] .ab-video,[data-ab-origin] .ab-lock{grid-template-columns:minmax(0,1fr)}
  [data-ab-origin] .ab-video video{max-width:320px}
}
@media(max-width:700px){
  [data-ab-origin] .sec{padding:48px 0}
  [data-ab-origin] .hero.stage{padding:28px 0 40px}
  [data-ab-origin] .hero h1{font-size:clamp(2rem,9vw,2.8rem)}
  [data-ab-origin] .ab-cta .btn{flex:1 1 100%;justify-content:center}
  [data-ab-origin] .ab-trust{box-shadow:4px 4px 0 #111827;padding:14px 16px}
  [data-ab-origin] .routes,[data-ab-origin] .ab-grid{grid-template-columns:minmax(0,1fr)}
  [data-ab-origin] .ab-row{grid-template-columns:minmax(0,1fr) auto;padding:14px 16px}
  [data-ab-origin] .ab-tag{grid-column:1 / -1;justify-self:start}
  [data-ab-origin] .faq summary{padding:16px 16px;font-size:1.25rem}
  [data-ab-origin] .faq details p{padding:0 16px 18px}
  [data-ab-origin] .ab-lock{padding:20px 18px;box-shadow:5px 5px 0 #111827}
  [data-ab-origin] .ab-lock .btn{justify-content:center}
  [data-ab-origin] .ab-fine a{display:inline-block;padding:10px 0}
  [data-ab-origin] .ab-map{display:none}
}

/* Philippines: the top notice on destination pages and the guide's red-flag list (docs/PHILIPPINES_ABROAD_PROPOSAL.md) */
[data-ab-origin] .ab-notice{margin:14px 0 0;max-width:60em;background:var(--base);color:var(--ink);border:1.5px solid var(--rule);border-left:6px solid var(--coral);padding:14px 18px;font-size:.95rem}
[data-ab-origin] .ab-notice b{display:block;margin-bottom:2px}
[data-ab-origin] .ab-notice a{color:var(--cobalt);font-weight:600}
[data-ab-origin] .ab-flags{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:52em}
[data-ab-origin] .ab-flags li{background:var(--base);border:1.5px solid var(--rule);border-left:6px solid var(--coral);padding:14px 18px}
[data-ab-origin] .ab-cta .btn{min-height:44px}