/* Wrabec License Offices redesign concept — "civic clarity"
   white paper · matured violet · open/closed status system
   IBM Plex Sans (display+body) · IBM Plex Mono (hours, fees) */

:root {
  --paper: #FBFBFD;
  --panel: #F3F2F7;
  --ink: #1F2430;
  --muted: #5A6072;
  --faint: #8B90A0;
  --line: #E3E2EB;
  --violet: #4B2E83;
  --violet-deep: #3A2366;
  --violet-wash: #EEEAF6;
  --go: #1F7A4D;
  --go-wash: #E7F3EC;
  --stop: #B3392E;
  --stop-wash: #F9ECEA;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16.5px; line-height: 1.6; }
a { color: var(--violet); }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.wrap { width: min(1060px, 100% - 48px); margin: 0 auto; }
@media (max-width: 520px) { .wrap { width: calc(100% - 32px); } }

/* concept ribbon */
.ribbon { background: #1F2430; color: #C9CCD6; font-size: 12px; text-align: center; padding: 7px 16px; letter-spacing: .04em; }
.ribbon a { color: #fff; }

/* header */
header.site { background: var(--violet); color: #fff; }
header.site .wrap { display: flex; align-items: center; gap: 24px; padding: 18px 0; flex-wrap: wrap; }
.wordmark { text-decoration: none; color: #fff; line-height: 1.1; display: flex; align-items: center; gap: 12px; }
.wordmark .mo { width: 38px; height: 38px; flex: none; }
.wordmark .wm-name { font-weight: 700; font-size: 20px; letter-spacing: .01em; display: block; }
.wordmark .wm-sub { font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: #C9BCE8; font-weight: 600; display: block; }
nav.main { margin-left: auto; display: flex; gap: 22px; align-items: center; }
nav.main a { color: #E8E2F5; text-decoration: none; font-size: 14.5px; font-weight: 600; }
nav.main a:hover, nav.main a[aria-current="page"] { color: #fff; text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 720px) { nav.main .navlink { display: none; } }

.btn { display: inline-block; background: var(--violet); color: #fff !important; text-decoration: none; font-weight: 700; font-size: 15px; padding: 12px 22px; border-radius: 6px; border: 0; cursor: pointer; }
.btn:hover { background: var(--violet-deep); }
.btn.on-violet { background: #fff; color: var(--violet) !important; }
.btn.on-violet:hover { background: var(--violet-wash); }
.btn.big { font-size: 16.5px; padding: 14px 26px; }

/* hero */
.hero { background: var(--violet); color: #fff; padding: clamp(40px, 7vh, 80px) 0 clamp(48px, 8vh, 88px); }
.hero h1 { font-weight: 700; font-size: clamp(32px, 5vw, 52px); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 14px; max-width: 24ch; text-wrap: balance; }
.hero .lede { font-size: 18px; color: #D9D0EE; max-width: 56ch; margin: 0 0 26px; }
.hero .lede strong { color: #fff; }

/* status chips */
.chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; border-radius: 99px; padding: 4px 12px; }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.chip.open { background: var(--go-wash); color: var(--go); }
.chip.closed { background: var(--stop-wash); color: var(--stop); }

/* location cards */
section.locations { padding: clamp(44px, 7vh, 80px) 0; }
h2.sec { font-weight: 700; font-size: clamp(24px, 3.2vw, 34px); letter-spacing: -0.01em; margin: 0 0 8px; }
.sec-sub { color: var(--muted); margin: 0 0 30px; max-width: 62ch; }
.locs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.loc { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 10px; }
.loc h3 { font-size: 19px; font-weight: 700; margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.loc .addr { color: var(--muted); font-size: 14.5px; margin: 0; }
.loc .hours { font-family: var(--mono); font-size: 13px; color: var(--ink); margin: 0; }
.loc .hours .k { color: var(--faint); }
.loc .row { display: flex; gap: 14px; margin-top: auto; padding-top: 8px; font-size: 14.5px; font-weight: 600; flex-wrap: wrap; }
.loc .row a { text-decoration: none; }
.loc .row a:hover { text-decoration: underline; }

/* info strip */
.strip { background: var(--panel); border-block: 1px solid var(--line); padding: clamp(40px, 6vh, 64px) 0; }
.strip .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; }
.strip h3 { font-size: 17px; margin: 0 0 8px; }
.strip p, .strip li { color: var(--muted); font-size: 15px; }
.strip ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

/* location page */
.locpage { padding: clamp(40px, 7vh, 72px) 0; }
.locpage .head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 18px; margin-bottom: 6px; }
.locpage h1 { font-weight: 700; font-size: clamp(30px, 4.6vw, 46px); letter-spacing: -0.015em; margin: 0; }
.locpage .operated { color: var(--muted); font-size: 14.5px; margin: 0 0 30px; }
.locgrid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; }
@media (max-width: 820px) { .locgrid { grid-template-columns: 1fr; } }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 24px; }
.panel + .panel { margin-top: 18px; }
.panel h2 { font-size: 18px; margin: 0 0 12px; }
.hours-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 14px; }
.hours-table td { padding: 7px 0; border-bottom: 1px solid var(--panel); }
.hours-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.hours-table tr.today td { font-weight: 700; color: var(--violet); }
.svc { columns: 2; column-gap: 28px; margin: 0; padding-left: 20px; font-size: 15px; color: var(--ink); }
.svc li { margin-bottom: 7px; break-inside: avoid; }
@media (max-width: 560px) { .svc { columns: 1; } }
.bring { margin: 0; padding-left: 20px; color: var(--muted); font-size: 15px; display: flex; flex-direction: column; gap: 7px; }
.bring strong { color: var(--ink); }
.callout { background: var(--violet-wash); border: 1px solid #DCD2F0; border-radius: 10px; padding: 18px 20px; font-size: 15px; }
.callout strong { color: var(--violet-deep); }

/* footer */
footer.site { background: #1F2430; color: #B7BBC7; font-size: 14px; margin-top: clamp(44px, 7vh, 80px); }
footer.site .wrap { padding: 40px 0 48px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
footer.site h4 { color: #fff; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 12px; }
footer.site a { color: #E0E2E9; text-decoration: none; }
footer.site a:hover { text-decoration: underline; }
footer.site ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
footer.site .legal { grid-column: 1 / -1; border-top: 1px solid #363C4A; padding-top: 16px; font-size: 12.5px; color: #8B90A0; max-width: 90ch; }
@media (max-width: 720px) { footer.site .wrap { grid-template-columns: 1fr; } }