/* ============================================================
   city.css — additions for the per-city coverage pages.
   Loads AFTER styles.css and reuses its tokens; nothing here
   overrides a hub-page rule.
   ============================================================ */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* breadcrumb ------------------------------------------------ */
.crumb{padding-block:.9rem;padding-top:calc(66px + .9rem)}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;
  font-family:var(--f-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sand)}
.crumb li+li::before{content:"/";margin-right:.5rem;opacity:.5}
.crumb a{color:var(--sand);text-decoration:none;border-bottom:1px solid transparent}
.crumb a:hover{color:var(--rust);border-bottom-color:var(--rust)}
.crumb [aria-current]{color:var(--ink)}

.city-hero{padding-top:0}
.city-hero .hero-in{padding-block:clamp(2.5rem,6vw,5rem)}
.city-hero h1 .l2{display:block;color:var(--rust-2)}

/* city context cards ---------------------------------------- */
.city-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  margin-top:clamp(1.5rem,3vw,2.5rem)}
@media (min-width:700px){.city-grid{grid-template-columns:1fr 1fr}}
.city-card{background:var(--bone);padding:clamp(1.4rem,2.5vw,2rem)}
.city-card p{margin:.7rem 0 0;font-size:.98rem;line-height:1.55;color:var(--ink-3);max-width:58ch}

/* FAQ -------------------------------------------------------- */
.faq{border-top:1px solid var(--line);margin-top:clamp(1.5rem,3vw,2.5rem)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{cursor:pointer;list-style:none;display:flex;align-items:flex-start;gap:1rem;
  padding:1.15rem 0;font-family:var(--f-display);font-size:clamp(1.15rem,2.2vw,1.5rem);
  line-height:1.25;color:var(--ink)}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{content:"+";margin-left:auto;font-family:var(--f-mono);font-size:1.1rem;
  color:var(--rust);flex:none;transition:transform .25s var(--ease)}
.faq-item[open] .faq-q::after{content:"\2212"}
.faq-q:hover{color:var(--rust)}
.faq-a{padding:0 0 1.35rem}
.faq-a p{margin:0;max-width:70ch;font-size:.98rem;line-height:1.6;color:var(--ink-3)}

/* city chips ------------------------------------------------- */
.city-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:clamp(1.25rem,3vw,2rem)}
.city-chip{display:inline-block;padding:.55rem .95rem;border:1px solid var(--line);
  background:var(--bone);text-decoration:none;color:var(--ink-2);
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.city-chip:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.city-chip-all{border-color:var(--rust);color:var(--rust)}
.city-chip-all:hover{background:var(--rust);color:var(--white);border-color:var(--rust)}

/* dark-section variants -------------------------------------- */
.dk .city-grid{background:var(--line-dk);border-color:var(--line-dk)}
.dk .city-card{background:var(--ink)}
.dk .city-card p{color:rgba(245,242,235,.72)}
.dk .faq{border-top-color:var(--line-dk)}
.dk .faq-item{border-bottom-color:var(--line-dk)}
.dk .faq-q{color:var(--bone)}
.dk .faq-a p{color:rgba(245,242,235,.72)}

@media (prefers-reduced-motion:reduce){.city-chip{transition:none}}

/* <ol class="proc"> on city pages — kill the list markers */
ol.proc{list-style:none;margin:0;padding:0}
ol.proc>li.proc-step{list-style:none}

/* small print under the city-chip wall */
.disclaimer{margin:clamp(1.25rem,2.5vw,2rem) 0 0;max-width:74ch;font-size:.85rem;
  line-height:1.55;color:var(--sand)}
.disclaimer a{color:var(--rust);text-decoration:none;border-bottom:1px solid rgba(176,82,42,.4)}
.disclaimer a:hover{border-bottom-color:var(--rust)}

/* region-grouped city wall on the hub page */
.city-regions{display:grid;gap:clamp(1.5rem,3vw,2.25rem);margin-top:clamp(1.5rem,3vw,2.5rem)}
@media (min-width:760px){.city-regions{grid-template-columns:1fr 1fr}}
@media (min-width:1160px){.city-regions{grid-template-columns:repeat(3,1fr)}}
.city-region{display:grid;gap:.75rem;align-content:start}
.city-region .city-chips{margin-top:0}

/* tender pack list (contract-route sections) */
.tender{margin-top:clamp(1.75rem,3vw,2.5rem);border:1px solid var(--line);
  padding:clamp(1.25rem,2.5vw,2rem);background:var(--bone)}
.tender h3{margin:0 0 1rem;font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.25rem,2.4vw,1.7rem)}
.tender-list{margin:0;padding-left:1.3rem;display:grid;gap:.6rem}
.tender-list li{font-size:.94rem;line-height:1.55;color:var(--ink-3)}
.tender-list li b{color:var(--ink);font-weight:600}
.dk .tender{border-color:var(--line-dk);background:rgba(245,242,235,.03)}
.dk .tender h3{color:var(--bone)}
.dk .tender-list li{color:rgba(245,242,235,.72)}
.dk .tender-list li b{color:var(--bone)}

/* four-column contract-route table needs a wider min */
.cap-scroll table.cap{min-width:720px}

/* .proc used on a LIGHT section (contract guides) */
.proc-light{counter-reset:step}
.proc-light .proc-step{background:var(--bone);border-top:1px solid var(--line);
  counter-increment:step;padding-left:3.25rem}
@media (min-width:900px){.proc-light .proc-step{border-top:1px solid var(--line);padding:1.9rem 1.4rem 1.9rem 3.25rem}}
.proc-light .proc-step::before{content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:clamp(1.4rem,2.5vw,1.9rem);
  font-family:var(--f-mono);font-size:.8rem;letter-spacing:.1em;color:var(--rust)}
@media (min-width:900px){.proc-light .proc-step::before{top:1.9rem}}
.proc-light .proc-step h3{color:var(--ink);font-size:1.1rem}
.proc-light .proc-step p{color:var(--ink-3);font-size:.95rem;max-width:74ch}
.proc-light .proc-step:last-child{border-bottom:1px solid var(--line)}

/* card headings inside the contracts guide grid */
.city-card h3 a:hover{color:var(--rust)}
.city-card .ulink{margin-top:.85rem;display:inline-block}