/* Landing pages (tools/build_abroad.py). Everything else comes from site.css,
   which is copied verbatim from the homepage, so these rules only cover the
   pieces the homepage doesn't have. */

/* hero */
.page-hero{padding:132px 0 56px;text-align:center}
.crumbs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;font-size:13px;color:var(--g800);margin-bottom:34px}
.crumbs a{color:var(--g800);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(0,0,0,.25)}
.crumbs a:hover{color:#000}
.crumbs span[aria-current]{color:#000}
.eyebrow{font-family:var(--wide);font-stretch:125%;font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#000;display:inline-block;background:var(--brand);border-radius:100px;padding:7px 14px;margin-bottom:22px}
.page-hero h1{display:flex;flex-direction:column;align-items:center;gap:.08em}
.page-hero h1 .cond{font-weight:400;font-size:clamp(46px,8.6vw,96px)}
.page-hero h1 .h-wide{font-size:clamp(40px,8.2vw,104px)}
.page-hero .lead{font-size:clamp(17px,2.1vw,21px);line-height:1.45;color:#2a2a2a;max-width:62ch;margin:30px auto 0}
.page-hero .stores{justify-content:center;margin-top:34px;padding:0}

/* generic light sections */
.block{padding:70px 0}
.sec-p{font-size:clamp(16px,2vw,19px);line-height:1.4;color:#2a2a2a;max-width:60ch;margin:22px 0 30px 26px}
.h-sm{font-family:var(--wide);font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:clamp(22px,3vw,30px);line-height:1;color:#000;margin-bottom:16px}

/* things people ask for */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-left:26px}
.chips li{background:#fff;border-radius:12px;padding:14px 18px;font-weight:600;font-size:16px;color:#000;transition:background .3s}
.chips li:hover{background:var(--brand)}

/* route cards (same surface + hover as the homepage's why-rows) */
.routes{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin-top:40px}
.route{display:flex;flex-direction:column;gap:10px;background:#fff;border-radius:16px;padding:22px 22px 24px;transition:background .3s,transform .3s var(--out)}
.route:hover{background:var(--brand);transform:translateY(-3px)}
.route .code{font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:44px;line-height:.9;color:#000}
.route .rt{font-weight:700;font-size:19px;color:#000}
.route .rt .to{font-weight:500;color:var(--g800)}
.route:hover .rt .to{color:#000}
.route .ri{font-size:14px;line-height:1.35;color:#3a3a3a}
.all{margin:26px 0 0 26px;font-weight:600}
.all a{text-decoration:underline;text-underline-offset:4px}

/* two short facts side by side */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.duo>div{background:#fff;border-radius:16px;padding:30px 28px}
.duo p{font-size:17px;line-height:1.45;color:#2a2a2a}
.duo .cities{font-family:var(--wide);font-weight:800;font-size:clamp(18px,2.4vw,24px);line-height:1.35;color:#000}

/* traveller card: heading left, pitch right */
.trav{min-height:0}
.trav .cour{align-items:center}
.trav p{margin:0 0 6px}

/* FAQ */
.qa{padding:70px 0}
.qa-list{display:grid;gap:10px;margin-top:40px}
.qa details{background:#fff;border-radius:14px;padding:0 24px;transition:background .3s}
.qa details[open]{background:#fff}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font-weight:700;font-size:clamp(16px,2vw,19px);color:#000}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--brand);display:grid;place-items:center;font-weight:600;font-size:20px;line-height:1}
.qa details[open] summary::after{content:"–"}
.qa details p{padding:0 0 22px;font-size:16px;line-height:1.5;color:#2a2a2a;max-width:70ch}

/* the closer reuses .control from the homepage */
.control .stores{justify-content:center;margin-top:40px;padding:0}

@media (max-width:860px){
  .duo{grid-template-columns:1fr}
  .page-hero{padding-top:118px}
}

/* Arabic: right-to-left, and Noto Kufi for every Arabic string (Archivo and
   Roboto Flex have no Arabic glyphs). Keep the Latin store labels as they are. */
[dir=rtl] body{font-family:var(--ar),Inter,system-ui,sans-serif}
[dir=rtl] .h-wide,[dir=rtl] .cond,[dir=rtl] .h-sm,[dir=rtl] .cov h3,[dir=rtl] .eyebrow{font-family:var(--ar),var(--wide);font-stretch:100%;font-variation-settings:normal;letter-spacing:0;text-transform:none}
[dir=rtl] .page-hero h1 .cond{font-weight:500;font-size:clamp(34px,6.4vw,72px)}
[dir=rtl] .page-hero h1 .h-wide{font-weight:700;font-size:clamp(36px,7.2vw,92px);line-height:1.25}
[dir=rtl] .sec-h{font-weight:700;line-height:1.25}
[dir=rtl] .cov h3{font-weight:700;line-height:1.35;font-size:clamp(32px,5.4vw,56px)}
[dir=rtl] .sec-h,[dir=rtl] .sec-p,[dir=rtl] .chips,[dir=rtl] .all{margin-left:0;margin-right:26px}
[dir=rtl] .route .code,[dir=rtl] .eyebrow{font-family:var(--wide);font-stretch:125%}
[dir=rtl] .store .l{text-align:right}
[dir=rtl] .cour li{text-align:right}
[dir=rtl] .footer,[dir=rtl] .disc{text-align:right}
[dir=rtl] .logo{direction:ltr}
[dir=rtl] .control .l1{line-height:1.35}
[dir=rtl] .control .l2{line-height:1.2;margin-top:.15em}
/* The nav pill pads the logo side (22px) and keeps the button side tight
   (4px). In RTL the logo is on the right, so mirror both. */
[dir=rtl] .nav{padding:4px 22px 4px 4px}
[dir=rtl] .get{padding:0 14px 0 16px}
@media (max-width:560px){
  [dir=rtl] .nav{padding-left:4px;padding-right:18px}
  [dir=rtl] .get{padding:0 10px 0 12px}
}