/* page-services.css: the Services pages. Loaded by the layout on the overview (by its id) and linked from the body of each area page (the area pages have ids of their own).
   The cards, the grid, the chips, the illustration frame and the search box are in site.css (the design's stylesheet); this file adds only what the generated pages need.
   Logical properties only; no inline styles. */

/* the chip "new" (the rule is in site/services/model.js): the same pill as the place chip, filled, so it reads as a different thing without any new colour (amber is for alerts only) */
.chip.chip-new{background:var(--btn);border-color:var(--btn);color:var(--btn-fg)}

/* the line that explains the chip, shown only when a card on the page wears it */
.svc-legend{display:flex;align-items:center;gap:10px;margin:0 0 20px}
.svc-legend .chip{flex:none}

/* the link from an area's introduction to the area's own page */
.svc-more{margin:12px 0 0}
.svc-more a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700}
.svc-more .ic{width:18px;height:18px}

/* the row of links to the area pages: on the overview it is the way to browse without JavaScript (site.css hides .svc-index when the script runs, the chips take its place);
   on an area page it stays, with the current area marked */
.svc-nav{margin-bottom:20px}
.svc-nav .tabs{list-style:none}
.svc-nav .tab{text-decoration:none}
.svc-nav .tab[aria-current="page"]{background:var(--btn);border-color:var(--btn);color:var(--btn-fg)}
.svc-nav .tab[aria-current="page"]:hover{background:var(--btn-h)}

/* an area page has one section: its heading sits a little closer to the row above */
.svc-sec>.empty{margin-top:8px}