@font-face {
  font-family: Archivo;
  src: url(assets/archivo.woff2) format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

:root { color-scheme: light; color: #5c5c5c; background: white; font: 14px/1.6 Archivo, Arial, sans-serif; }
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body { margin: 0; }
a { color: inherit; overflow-wrap: anywhere; text-underline-offset: .15em; }
a:hover { color: #252525; }
a:focus-visible, summary:focus-visible { outline: 2px solid #006fff; outline-offset: 4px; }
.skip { position: fixed; left: 1rem; top: -5rem; padding: .5rem; background: white; z-index: 5; }
.skip:focus { top: 1rem; }

.layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 700px);
  column-gap: 27px;
  max-width: 1200px;
  min-height: 100vh;
  margin-inline: auto;
  justify-content: center;
  padding: 70px 20px 60px;
}
.sidebar {
  align-self: start;
  position: sticky;
  top: 70px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  margin-left: -28px;
  background: linear-gradient(currentColor, currentColor) 9px 0 / calc(100% - 9px) 5px no-repeat;
  padding: 115px 17px 20px 9px;
}
nav ul { list-style: none; margin: 0; padding: 0; }
nav li + li { margin-top: 24px; }
nav li a { position: relative; font-weight: 700; font-size: 16px; line-height: 1.2; letter-spacing: -.01em; text-transform: uppercase; text-decoration: none; }
.sidebar nav li { position: relative; }
.sidebar nav li + li { margin-top: 32px; }
.sidebar nav a:focus-visible { outline-offset: -2px; }
.sidebar nav li a { display: block; text-transform: none; }
.sidebar nav li:has(a:is(:hover, [aria-current="page"]))::before {
  content: "";
  position: absolute;
  inset: -12px -9px;
  border-radius: 4px;
  background: #f3f3f3;
  pointer-events: none;
}
nav a:hover { text-decoration: underline; }
.sidebar nav a:is(:hover, [aria-current="page"]) { text-decoration: none; }
nav a[aria-current="page"] { color: #252525; }
.waste-heading { border-top: 5px solid; padding-top: 25px; }
.waste-heading h1 { margin-bottom: 16px; }
.section-links { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.waste-heading + .section { border-top: 1px solid #e6e6e6; }
#report-a-problem, #rubbish-collection, #bulky-waste { scroll-margin-top: 24px; }
.mobile-menu { display: none; }

main { min-width: 0; }
.section { border-top: 5px solid; padding-top: 25px; }
.section + .section { margin-top: 70px; }
h1, h2, h3, h4 { color: inherit; line-height: 1.2; }
h1, h2 { font-size: 40px; margin: 0 0 30px; }
h3 { font-size: 28px; margin: 38px 0 18px; }
h3::before { content: "—— "; }
.schedule h3::before { content: none; }
h4 { font-size: 16px; margin: 21px 0 5px; }
p { margin: 9px 0 16px; }
p.intro { font-size: 20px; line-height: 1.7; font-weight: 300; }
p.compact { font-size: 12px; line-height: 1.8; margin-block: 4px; }
figure { margin: 22px 0; }
figure img { display: block; max-width: 100%; height: auto; }
.schedule { margin-top: 40px; }

@media (max-width: 1199px) {
  .layout { grid-template-columns: 150px minmax(0, 500px); }
  nav li a { font-size: 12px; }
  h1, h2 { font-size: 29px; }
  h3 { font-size: 20px; }
}
@media (max-width: 809px) {
  .layout { display: block; max-width: 390px; padding: 0 20px 40px; }
  .sidebar { display: none; }
  .mobile-menu { display: block; margin: 0 auto 34px; }
  .mobile-menu summary { display: flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; margin: auto; padding: 8px 16px; border-radius: 0 0 20px 20px; background: #e6e6e6; cursor: pointer; font-weight: 700; }
  .menu-icon::before { content: "+"; }
  .mobile-menu[open] .menu-icon::before { content: "−"; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu nav { padding: 20px 10px 4px; }
  .mobile-menu nav li + li { margin-top: 12px; }
  .mobile-menu nav li a { display: block; width: fit-content; padding: 3px; }
  .section, .waste-heading { padding-top: 20px; }
  h3 { font-size: 18px; }
  p.intro { font-size: 17px; }
}

.parking-lookup { --parking-control-height: 48px; --parking-control-radius: 6px; margin-block: 36px; }
.parking-lookup label { display: block; font-size: 16px; font-weight: 300; margin-bottom: 12px; }
.parking-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.parking-lookup select {
  width: min(100%, 15rem);
  height: var(--parking-control-height);
  padding: 9px 42px 9px 12px;
  appearance: none;
  font: 700 18px/1.4 Archivo, Arial, sans-serif;
  color: inherit;
  background: white url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22m4%207%206%206%206-6%22%20fill%3D%22none%22%20stroke%3D%22%235c5c5c%22%20stroke-width%3D%222.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") right 13px center / 18px 18px no-repeat;
  border: 2px solid #b5b5b5;
  border-radius: var(--parking-control-radius);
}
.parking-lookup select:focus {
  outline: none;
  border-color: #5c5c5c;
  box-shadow: inset 0 0 0 1px #5c5c5c;
}
@media (forced-colors: active) {
  .parking-lookup select { appearance: auto; background-image: none; padding-right: 12px; }
  .parking-lookup select:focus { border-color: Highlight; }
}
#parking-result { margin: 0; font-weight: 300; font-size: 18px; }
.parking-bay {
  display: inline-flex;
  align-items: center;
  height: var(--parking-control-height);
  margin-inline-start: 6px;
  padding-inline: 16px;
  border-radius: var(--parking-control-radius);
  background: #5c5c5c;
  color: white;
  font-weight: 700;
  vertical-align: middle;
  white-space: nowrap;
}

.rtm-topic { margin-top: 36px; }
.rtm-topic h2, #get-involved h2, #identify-risks, #how-to-get-involved { font-size: clamp(20px, 3vw, 28px); margin: 32px 0 16px; scroll-margin-top: 24px; }

.section-links a {
  font-weight: 500;
  display: inline-block;
  padding: 8px 12px;
  border-radius: 4px;
  background: #f3f3f3;
  text-decoration: none;
}
.section-links a:hover,
.section-links a:focus-visible {
  background: #e8e8e8;
  color: #252525;
}