/* Visual language from the public.html mockup. */
/* Cairo (SIL OFL), self-hosted variable font from assets/fonts. */
@font-face { font-family:"Cairo"; font-style:normal; font-weight:200 1000; font-display:swap; src:url("fonts/cairo-arabic-variable.woff2") format("woff2"); unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEFF; }
@font-face { font-family:"Cairo"; font-style:normal; font-weight:200 1000; font-display:swap; src:url("fonts/cairo-latin-variable.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  /* Theme tokens. Defaults here; the admin console (Settings → Theme templates) overrides them per municipality through /theme.css?m=<slug>.
     Keep the names and defaults in sync with services/api/src/Theme.php. */
  --navy:#082d3b; --navy-2:#0c3f4f; --teal:#087b78; --teal-dark:#066663; --mint:#e4f4ee; --coral:#df6c51; --sun:#f0bd5b;
  --header-top:#fbfbf9; --header-bottom:#f1f4f1; --hero-start:#082d3b; --hero-end:#0c6e6b; --footer-start:#082d3b; --footer-end:#0a3a48;
  --paper:#f5f8f5; --surface:#ffffff; --line:#dce8e2; --field-border:var(--field-border); --ink:#15363d; --muted:#61767a;
  --news-announcement:#087b78; --news-service-update:#5d77a8; --news-event:#df6c51; --news-urgent:#a23b3b;
  --step-1:#e4f4ee; --step-2:#fff2df; --step-3:#e9edf8;
  --danger:#b3423f; --danger-soft:#fbe9e8; --warn:#8f5f14; --warn-soft:#fff1d6; --info:#267293; --info-soft:#e1f2fb; --done:#2e7d52; --done-soft:#e1f5e8;
}
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Cairo","Segoe UI",Tahoma,Arial,sans-serif; line-height:1.8; }
a { color:inherit; }
:focus-visible { outline:3px solid var(--sun); outline-offset:3px; border-radius:6px; }
.container { width:min(1160px, calc(100% - 36px)); margin:auto; }
.container.narrow { width:min(520px, calc(100% - 32px)); }
.container.medium { width:min(720px, calc(100% - 32px)); }
.muted { color:var(--muted); }
.small { font-size:.82rem; }

/* Header: light civic line-art. ::before drifts soft color washes; ::after holds the self-drawing town (assets/skyline.svg).
   With WebGL, town3d.js adds canvas.town3d (a 3D town filling the header) and .has-3d, which turns ::after into a fade that keeps the menu legible. */
.topbar { position:relative; overflow:hidden; padding:18px 0 calc(var(--town-enabled, 1) * 150px + (1 - var(--town-enabled, 1)) * (var(--town-line-height, 110) * 1px - 26px)); color:var(--ink); background:
  radial-gradient(color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1.5px) 0 0 / 18px 18px,
  linear-gradient(180deg, var(--header-top), var(--header-bottom)); border-bottom:1px solid var(--line); }
.topbar::before { content:""; position:absolute; inset:-80% -30%; pointer-events:none; background:
  radial-gradient(ellipse 28% 40% at 70% 45%, color-mix(in srgb, var(--teal) 10%, transparent), transparent 70%),
  radial-gradient(ellipse 24% 36% at 32% 55%, color-mix(in srgb, var(--sun) 14%, transparent), transparent 70%),
  radial-gradient(ellipse 20% 30% at 50% 30%, color-mix(in srgb, var(--info) 8%, transparent), transparent 70%);
  animation:wash 28s ease-in-out infinite alternate; }
.topbar::after { content:""; position:absolute; inset:auto 0 0; height:calc(var(--town-line-height, 110) * 1px + 2px); pointer-events:none; opacity:var(--town-line-opacity, 1);
  background:var(--skyline-image, url("skyline.svg")) center bottom / auto calc(var(--town-line-height, 110) * 1px) var(--skyline-repeat, repeat-x); }
.topbar canvas.town3d { position:absolute; inset:0; z-index:0; width:100%; height:100%; opacity:var(--town-opacity, 1); pointer-events:none; animation:fade 1s ease both; }
.topbar.has-3d::before { z-index:1; }
.topbar.has-3d::after { inset:0; z-index:1; height:auto; opacity:1; background:linear-gradient(180deg, color-mix(in srgb, var(--header-top) calc(var(--town-fade, .9) * 100%), transparent), color-mix(in srgb, var(--header-top) calc(var(--town-fade, .9) * 61%), transparent) 30%, transparent 55%); }
.topbar.has-3d .nav { z-index:2; }
/* --town-* variables (Settings → 3D header) arrive through /theme.css; town3d.js reads the rest.
   --town-enabled (Header style) is 1 for the 3D town, 0 for the line-art skyline. In line-art mode the header height follows
   --town-line-height (110 → the original 84px padding), and --skyline-image is /skyline.svg drawn with the skyline settings. */
@keyframes fade { from { opacity:0; } }
@keyframes wash { 50% { transform:translate3d(6%, 4%, 0) rotate(4deg); } to { transform:translate3d(-5%, 2%, 0) rotate(-3deg); } }
@keyframes rise { from { opacity:0; transform:translateY(-6px); } }
.nav { position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; animation:rise .7s cubic-bezier(.2,.7,.2,1) both; }
.brand { display:flex; align-items:center; gap:12px; color:var(--navy); font-weight:900; text-decoration:none; }
.brand-text { display:grid; line-height:1.25; }
.brand-text small { color:var(--muted); font-size:.72rem; font-weight:600; }
.mark { display:grid; width:42px; height:42px; place-items:center; border-radius:13px; color:#fff; background:linear-gradient(145deg, color-mix(in srgb, var(--teal), #fff 6%), var(--navy)); box-shadow:0 8px 18px -8px color-mix(in srgb, var(--navy) 55%, transparent); transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.brand:hover .mark { transform:translateY(-2px) rotate(-4deg); }
.mark svg { width:22px; height:22px; }
.nav-links { display:flex; gap:6px; margin-inline-end:auto; padding:4px; border:1px solid color-mix(in srgb, var(--line) 90%, transparent); border-radius:12px; background:color-mix(in srgb, var(--surface) 60%, transparent); backdrop-filter:blur(6px); font-size:.86rem; font-weight:700; }
.nav-links a { position:relative; padding:4px 12px; border-radius:8px; color:var(--muted); text-decoration:none; transition:color .2s, background .2s; }
.nav-links a::after { content:""; position:absolute; inset-inline:12px; bottom:2px; height:2px; border-radius:2px; background:var(--teal); transform:scaleX(0); transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.nav-links a:hover { color:var(--teal); background:color-mix(in srgb, var(--teal) 6%, transparent); }
.nav-links a:hover::after { transform:scaleX(1); }
.account { display:flex; align-items:center; gap:14px; font-size:.84rem; }
.account-link { color:var(--teal); font-weight:800; text-decoration:none; }
.account-link:hover { text-decoration:underline; text-underline-offset:5px; }
.inline { display:inline; margin:0; }
.text-button { padding:0; border:0; color:var(--muted); background:none; font:inherit; cursor:pointer; }
.text-button:hover { color:var(--danger); }
.login { padding:8px 16px; border-radius:10px; color:#fff; background:var(--navy); font-weight:800; text-decoration:none; box-shadow:0 6px 14px -8px color-mix(in srgb, var(--navy) 60%, transparent); transition:transform .2s, box-shadow .2s, background .2s; }
.login:hover { background:var(--navy-2); transform:translateY(-1px); box-shadow:0 10px 18px -10px color-mix(in srgb, var(--navy) 70%, transparent); }
.flash { padding:12px 0; color:var(--done); background:var(--done-soft); border-bottom:1px solid color-mix(in srgb, var(--done) 22%, var(--done-soft)); font-weight:700; font-size:.9rem; }
.flash.stale { color:var(--warn); background:var(--warn-soft); border-bottom-color:color-mix(in srgb, var(--warn) 22%, var(--warn-soft)); }
.pager { display:flex; justify-content:center; align-items:center; gap:16px; margin-top:28px; color:var(--muted); font-weight:700; }

/* Hero */
.hero { padding:36px 0 40px; color:#fff; background:linear-gradient(125deg, var(--hero-start), var(--hero-end)); }
.hero.compact { padding:24px 0 28px; }
.hero p { max-width:640px; margin-bottom:0; color:rgba(255,255,255,.8); font-size:1.02rem; }
.hero .eyebrow { color:var(--sun); }
.crumbs a { text-decoration:none; }
.crumbs a:hover { text-decoration:underline; }
.eyebrow { margin:0 0 10px; color:var(--coral); font-size:.78rem; font-weight:900; }
h1, h2, h3 { margin:0 0 12px; line-height:1.3; letter-spacing:-.03em; text-wrap:balance; }
h1 { font-size:clamp(2rem, 5vw, 3.6rem); }
.hero.compact h1 { font-size:clamp(1.7rem, 4vw, 2.6rem); }
h2 { font-size:clamp(1.4rem, 3vw, 2.1rem); }
.panel h2 { font-size:1.2rem; }
h3 { font-size:1.1rem; }
p { color:var(--muted); }

/* Sections */
section { padding:56px 0; }
section.band { background:var(--surface); }
.section-head { margin-bottom:26px; }
.section-head.row { display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:12px; }
.updated { margin:22px 0 0; color:var(--muted); font-size:.8rem; }

/* Cards */
.cards { display:grid; grid-template-columns:repeat(3, 1fr); gap:15px; }
.card { display:flex; flex-direction:column; padding:22px; border:1px solid var(--line); border-radius:15px; background:var(--surface); text-decoration:none; transition:transform .2s, box-shadow .2s; }
a.card:hover { transform:translateY(-3px); box-shadow:0 16px 32px color-mix(in srgb, var(--navy) 10%, transparent); }
.card p { margin:0 0 14px; font-size:.88rem; }
.card .en { font-size:.8rem; }
.icon { display:grid; width:43px; height:43px; place-items:center; margin-bottom:14px; border-radius:12px; color:var(--teal); background:var(--mint); font-size:1.3rem; }
.tag { align-self:flex-start; margin-bottom:8px; padding:2px 8px; border-radius:6px; color:var(--teal); background:var(--mint); font-size:.7rem; font-weight:800; }
.tag.light { margin-inline-end:8px; color:var(--navy); background:var(--sun); }
.meta-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; font-size:.78rem; }
.link { color:var(--teal); font-size:.84rem; font-weight:900; text-decoration:none; }
.link:hover { text-decoration:underline; }

/* Municipality tiles (views/home.php + partials/municipality_card.php) */
section.tight { padding:32px 0; }
section.tight + section.tight { padding-top:0; }
.tight .section-head { margin-bottom:14px; }
.tight .section-head .eyebrow { margin-bottom:4px; }
.muni-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:10px; }
.muni { display:flex; align-items:center; gap:12px; min-width:0; padding:10px 12px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:var(--surface); text-decoration:none; transition:border-color .2s, box-shadow .2s, transform .2s; }
.muni:hover, .muni:focus-visible { border-color:var(--teal); box-shadow:0 8px 20px color-mix(in srgb, var(--navy) 9%, transparent); transform:translateY(-1px); }
.muni[hidden] { display:none; }
.muni-logo { display:grid; flex:none; width:40px; height:40px; place-items:center; overflow:hidden; border-radius:10px; color:var(--teal); background:var(--mint); font-size:1.1rem; font-weight:900; }
.muni-logo.has-logo { padding:3px; border:1px solid var(--line); background:var(--surface); }
.muni-logo.has-logo img { display:block; width:100%; height:100%; object-fit:contain; }
.muni-text { display:flex; flex:1; flex-direction:column; min-width:0; line-height:1.3; }
.muni-name { display:flex; align-items:center; gap:6px; min-width:0; }
.muni-name strong { overflow:hidden; font-size:.95rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.muni-name .tag { flex:none; margin:0; padding:1px 6px; }
.muni .en { overflow:hidden; color:var(--muted); font-size:.76rem; text-align:end; text-overflow:ellipsis; white-space:nowrap; }
.muni-go { flex:none; color:var(--muted); font-weight:900; transition:transform .2s, color .2s; }
.muni:hover .muni-go, .muni:focus-visible .muni-go { color:var(--teal); transform:translateX(-3px); }
.muni-search { width:min(240px, 100%); padding:8px 12px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:var(--surface); font:inherit; font-size:.88rem; }
.muni-search:focus { border-color:var(--teal); outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--teal) 15%, transparent); }
.muni-empty { margin:6px 0 0; color:var(--muted); font-size:.88rem; }
.muni-index { display:flex; flex-wrap:wrap; gap:4px; margin:0 0 14px; }
.muni-index a { display:grid; min-width:28px; height:28px; place-items:center; padding:0 6px; border:1px solid var(--line); border-radius:7px; color:var(--teal); background:var(--surface); font-size:.85rem; font-weight:800; text-decoration:none; }
.muni-index a:hover, .muni-index a:focus-visible { border-color:var(--teal); color:#fff; background:var(--teal); }
.muni-groups { display:grid; gap:12px; }
.muni-group { display:grid; grid-template-columns:34px 1fr; gap:10px; align-items:start; scroll-margin-top:16px; }
.muni-group[hidden] { display:none; }
.muni-letter { display:grid; width:34px; height:34px; place-items:center; margin:13px 0 0; border-radius:9px; color:var(--navy); background:var(--sun); font-size:1rem; font-weight:900; line-height:1; }
@media (max-width:520px) {
  .muni-group { grid-template-columns:1fr; gap:6px; }
  .muni-letter { width:auto; height:auto; margin:0; padding:0 0 4px; border-bottom:1px solid var(--line); border-radius:0; place-items:start; background:none; }
}

.news-card { padding:0; overflow:hidden; }
.news-cover { display:flex; min-height:88px; align-items:end; padding:14px 18px; color:#fff; background:linear-gradient(135deg, var(--news-announcement), color-mix(in srgb, var(--news-announcement), #fff 25%)); }
.news-cover.service_update { background:linear-gradient(135deg, var(--news-service-update), color-mix(in srgb, var(--news-service-update), #fff 25%)); }
.news-cover.event { background:linear-gradient(135deg, var(--news-event), color-mix(in srgb, var(--news-event), #fff 25%)); }
.news-cover.urgent { background:linear-gradient(135deg, var(--news-urgent), color-mix(in srgb, var(--news-urgent), #fff 25%)); }
.news-body { display:flex; flex:1; flex-direction:column; padding:16px 18px 20px; }
.news-body time { color:var(--coral); font-size:.74rem; font-weight:800; }
.news-body h3 { margin:4px 0 6px; }
.news-body .link { margin-top:auto; }

.filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.filter { padding:6px 14px; border:1px solid var(--line); border-radius:20px; color:var(--muted); background:var(--surface); font-size:.8rem; font-weight:800; text-decoration:none; }
.filter:hover, .filter.active { border-color:var(--teal); color:#fff; background:var(--teal); }

.steps { display:grid; grid-template-columns:repeat(3, 1fr); gap:15px; margin:0; padding:0; list-style:none; counter-reset:step; }
.steps li { padding:24px; border-radius:15px; background:var(--step-1); counter-increment:step; }
.steps li:nth-child(2) { background:var(--step-2); }
.steps li:nth-child(3) { background:var(--step-3); }
.steps li::before { content:counter(step); display:block; margin-bottom:10px; color:var(--coral); font-size:1.4rem; font-weight:900; }
.steps p { margin:0; }

.notice { padding:24px 28px; border-inline-start:5px solid var(--coral); border-radius:13px; background:var(--surface); }
.notice p { margin:0 0 6px; }

/* Panels & layout */
.split { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr); gap:20px; align-items:start; }
.split > aside.about { order:0; }
.panel { padding:26px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.doc-required { margin-bottom:18px; }
.doc-required ul { margin:12px 0 0; padding-inline-start:20px; }
.doc-required li { padding:6px 0; border-bottom:1px solid var(--line); }
.doc-required li:last-child { border-bottom:0; }
.doc-required li small { display:block; color:var(--muted); font-size:.78rem; }
.prose { max-width:760px; }
.prose p { color:var(--ink); }
.prose .lead { font-size:1.08rem; font-weight:600; }
.facts { display:grid; margin:16px 0 0; }
.facts div { display:grid; grid-template-columns:minmax(110px, 38%) 1fr; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.facts div:last-child { border-bottom:0; }
.facts dt { color:var(--muted); font-size:.82rem; }
.facts dd { margin:0; font-size:.9rem; font-weight:600; overflow-wrap:anywhere; }

/* Forms */
.form { display:grid; gap:16px; }
.form h1 { font-size:1.7rem; margin-bottom:0; }
.form p { margin:0; }
.field { display:grid; gap:6px; }
.field label { font-size:.88rem; font-weight:800; }
.field input:not([type=checkbox]), .field select, .field textarea { width:100%; padding:10px 12px; border:1px solid var(--field-border); border-radius:10px; color:var(--ink); background:var(--surface); font:inherit; font-size:.95rem; }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--teal); outline:3px solid color-mix(in srgb, var(--teal) 18%, transparent); outline-offset:0; }
/* LTR fields (phone, email) show their placeholder right-aligned; typed text stays LTR. */
.field input[dir="ltr"]:placeholder-shown { direction:rtl; text-align:right; }
/* Searchable select (assets/site.js). */
.combo { position:relative; }
.combo-list { position:absolute; z-index:20; top:calc(100% + 4px); inset-inline:0; max-height:240px; overflow-y:auto; margin:0; padding:4px; list-style:none; border:1px solid var(--field-border); border-radius:10px; background:var(--surface); box-shadow:0 10px 24px color-mix(in srgb, var(--navy) 12%, transparent); }
.combo-list li { padding:8px 12px; border-radius:8px; cursor:pointer; }
.combo-list li:hover, .combo-list li[aria-selected="true"] { background:var(--mint); color:var(--teal); }
.combo-list .combo-empty { color:var(--muted); cursor:default; }
.combo-list .combo-empty:hover { background:none; color:var(--muted); }
.field .help { color:var(--muted); font-size:.78rem; }
.field .error { color:var(--danger); font-size:.8rem; font-weight:700; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color:var(--danger); }
.field-row { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; align-items:start; }
.field-row.two { grid-template-columns:repeat(2, 1fr); }
.field.check label { display:flex; align-items:start; gap:10px; font-weight:600; }
.field.check input { margin-top:7px; accent-color:var(--teal); }
.req { color:var(--danger); }
.otp { font-family:Consolas,"Courier New",monospace; font-size:1.6rem !important; letter-spacing:.5em; text-align:center; }
.form-error { padding:10px 14px; border-radius:10px; color:var(--danger) !important; background:var(--danger-soft); font-size:.88rem; font-weight:700; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:9px 20px; border:1px solid var(--teal); border-radius:10px; color:var(--teal); background:var(--surface); font:inherit; font-size:.9rem; font-weight:800; text-decoration:none; cursor:pointer; }
.button.primary { color:#fff; background:var(--teal); }
.button.primary:hover { background:var(--teal-dark); border-color:var(--teal-dark); }
.auth { padding:56px 0 80px; }
.contact { font-weight:800; color:var(--ink); }

/* Requests */
.request-list { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.request-list a { display:grid; grid-template-columns:1fr auto auto; gap:12px 20px; align-items:center; padding:18px 20px; border:1px solid var(--line); border-radius:14px; background:var(--surface); text-decoration:none; }
.request-list a:hover { border-color:var(--teal); }
.req-main strong { display:block; }
.req-main span { font-size:.82rem; }
.ref { font-family:Consolas,"Courier New",monospace; letter-spacing:.04em; }
.badge { padding:4px 10px; border-radius:7px; font-size:.76rem; font-weight:800; white-space:nowrap; }
.badge.pending { color:var(--warn); background:var(--warn-soft); }
.badge.progress { color:var(--info); background:var(--info-soft); }
.badge.warn { color:#fff; background:var(--coral); }
.badge.done { color:var(--done); background:var(--done-soft); }
.badge.danger { color:var(--danger); background:var(--danger-soft); }
.status-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.status-head h2 { margin:0; }

.timeline { margin:10px 0 0; padding:0; list-style:none; }
.timeline li { position:relative; padding:0 26px 22px 0; border-inline-start:2px solid var(--line); margin-inline-start:6px; }
.timeline li:last-child { padding-bottom:4px; border-color:transparent; }
.timeline li::before { content:""; position:absolute; inset-inline-start:-8px; top:6px; width:14px; height:14px; border:2px solid var(--line); border-radius:50%; background:var(--surface); }
.timeline li.current::before { border-color:var(--teal); background:var(--teal); }
.timeline strong { display:block; }
.timeline time { color:var(--muted); font-size:.8rem; }
.timeline p { margin:6px 0 0; padding:8px 12px; border-radius:9px; color:var(--ink); background:var(--paper); font-size:.88rem; }

/* Footer: navy counterpart of the header, with the sun ring from the mockup hero. */
html { scroll-behavior:smooth; }
.site-footer { position:relative; overflow:hidden; margin-top:40px; color:rgba(255,255,255,.72); background:linear-gradient(160deg, var(--footer-start), var(--footer-end)); font-size:.86rem; }
.site-footer::before { content:""; position:absolute; inset-inline-start:-160px; top:-260px; width:460px; height:460px; border:1px solid color-mix(in srgb, var(--sun) 25%, transparent); border-radius:50%; box-shadow:0 0 0 30px color-mix(in srgb, var(--sun) 5%, transparent), 0 0 0 80px color-mix(in srgb, var(--sun) 3%, transparent); pointer-events:none; }
.site-footer::after { content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg, var(--teal), var(--sun), var(--coral)); }
.footer-grid { position:relative; display:grid; grid-template-columns:1.5fr repeat(3, 1fr); gap:40px; padding:56px 0 40px; }
.footer-brand .brand { color:#fff; margin-bottom:14px; }
.footer-brand .brand-text small { color:rgba(255,255,255,.55); }
.footer-brand .mark { color:var(--navy); background:var(--sun); box-shadow:0 8px 18px -8px rgba(0,0,0,.5); }
.footer-brand p { max-width:330px; margin:0 0 20px; color:rgba(255,255,255,.62); font-size:.86rem; }
.footer-cta { display:inline-flex; align-items:center; min-height:42px; padding:8px 18px; border-radius:10px; color:var(--navy); background:var(--sun); font-weight:900; text-decoration:none; box-shadow:0 8px 18px -10px color-mix(in srgb, var(--sun) 70%, transparent); transition:transform .2s, box-shadow .2s; }
.footer-cta:hover { transform:translateY(-2px); box-shadow:0 12px 22px -10px color-mix(in srgb, var(--sun) 80%, transparent); }
.footer-title { position:relative; margin:0 0 18px; padding-bottom:10px; color:#fff; font-size:.92rem; font-weight:900; letter-spacing:0; }
.footer-title::after { content:""; position:absolute; inset-inline-start:0; bottom:0; width:24px; height:2px; border-radius:2px; background:var(--sun); }
.footer-col ul { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.footer-col a { display:inline-block; color:rgba(255,255,255,.68); text-decoration:none; transition:color .2s, transform .2s; }
.footer-col a:hover { color:var(--sun); transform:translateX(-3px); }
.footer-steps { display:grid; gap:12px; margin:0; padding:0; list-style:none; counter-reset:fstep; }
.footer-steps li { display:flex; align-items:center; gap:10px; counter-increment:fstep; }
.footer-steps li::before { content:counter(fstep); display:grid; flex:none; width:26px; height:26px; place-items:center; border:1px solid color-mix(in srgb, var(--sun) 45%, transparent); border-radius:50%; color:var(--sun); font-size:.76rem; font-weight:900; }
.footer-bottom { position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:18px 0 22px; border-top:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.5); font-size:.76rem; }
.to-top { display:inline-flex; align-items:center; gap:8px; padding:5px 12px; border:1px solid rgba(255,255,255,.2); border-radius:9px; color:rgba(255,255,255,.7); text-decoration:none; transition:color .2s, border-color .2s; }
.to-top:hover { color:var(--sun); border-color:var(--sun); }

@media (max-width:900px) {
  .cards { grid-template-columns:repeat(2, 1fr); }
  .split { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:repeat(3, 1fr); gap:32px; }
  .footer-brand { grid-column:1 / -1; }
}
@media (max-width:640px) {
  .container { width:calc(100% - 32px); }
  .cards, .steps, .field-row { grid-template-columns:1fr; }
  .field-row.two { grid-template-columns:repeat(2, 1fr); gap:12px; }
  section { padding:40px 0; }
  .hero { padding:28px 0 32px; }
  .topbar { padding-bottom:calc(var(--town-enabled, 1) * 116px + (1 - var(--town-enabled, 1)) * (var(--town-line-height, 110) * .73px - 16px)); }
  .topbar::after { height:calc(var(--town-line-height, 110) * .73px + 2px); background-size:auto calc(var(--town-line-height, 110) * .73px); }
  .nav-links { order:3; width:100%; }
  .panel { padding:20px; }
  .facts div { grid-template-columns:1fr; gap:2px; }
  .request-list a { grid-template-columns:1fr auto; }
  .req-dates { grid-column:1 / -1; grid-row:2; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:28px 20px; padding:44px 0 32px; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .card, .muni, .muni-go { transition:none; } .topbar::before, .nav, .topbar canvas.town3d { animation:none; } .mark, .login, .nav-links a::after, .footer-cta, .footer-col a, .to-top { transition:none; } }

/* Documents (views/document.php + assets/documents.js). Same markup as the admin builder's preview. */
section.tight-top { padding-top:0; }
.list-title { margin-top:36px; font-size:1.3rem; }
.doc-form { gap:22px; }
.doc-section { display:grid; gap:14px; padding:0; }
.doc-section + .doc-section { padding-top:22px; border-top:1px solid var(--line); }
.doc-section[hidden], .doc-field[hidden], .doc-step-off { display:none !important; }
.doc-section-title { margin:0; font-size:1.25rem; }
.doc-section-desc { margin:0; }
.doc-section.has-error > .error { margin:0; color:var(--danger); font-size:.85rem; font-weight:700; }
.doc-fields { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
.doc-field { grid-column:1 / -1; align-content:start; }
.doc-field.half { grid-column:auto; }
.doc-label { font-size:.88rem; font-weight:800; }
.doc-heading h3 { margin:6px 0 0; font-size:1.05rem; }
.doc-paragraph p { margin:0; white-space:pre-line; }
.doc-choices { display:grid; gap:4px; }
.doc-check { display:flex; align-items:flex-start; gap:10px; font-size:.92rem; font-weight:600; }
.field .doc-check input, .doc-check input { width:auto; margin-top:7px; padding:0; accent-color:var(--teal); }
.doc-kept { padding:8px 12px; border-radius:10px; background:var(--done-soft); }
.field input[type=file] { padding:8px; background:var(--paper); }
.doc-entries { display:grid; gap:14px; }
.doc-entry { display:grid; gap:14px; padding:16px; border:1px dashed var(--field-border, var(--line)); border-radius:14px; background:color-mix(in srgb, var(--paper) 60%, var(--surface)); }
.doc-entry-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.doc-add, .doc-remove, .doc-nav button { min-height:40px; padding:6px 16px; border:1px solid var(--teal); border-radius:10px; color:var(--teal); background:var(--surface); font:inherit; font-size:.88rem; font-weight:800; cursor:pointer; }
.doc-add { justify-self:start; }
.doc-add:disabled { opacity:.5; cursor:default; }
.doc-remove { min-height:32px; padding:2px 12px; border-color:var(--line); color:var(--danger); font-size:.8rem; }
.doc-remove[hidden] { display:none; }
.doc-signature { display:grid; gap:8px; justify-items:start; }
.doc-signature canvas { width:100%; max-width:520px; aspect-ratio:3 / 1; border:2px dashed var(--line); border-radius:12px; background:var(--surface); touch-action:none; cursor:crosshair; }
.doc-signature.signed canvas { border-style:solid; border-color:var(--teal); }
.doc-steps { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; counter-reset:dstep; }
.doc-steps li { counter-increment:dstep; display:flex; align-items:center; gap:8px; padding:4px 14px 4px 6px; border-radius:999px; color:var(--muted); background:var(--paper); font-size:.8rem; font-weight:800; }
.doc-steps li::before { content:counter(dstep); display:inline-grid; width:24px; height:24px; place-items:center; border-radius:50%; background:var(--surface); font-size:.75rem; }
.doc-steps li.current { color:#fff; background:var(--teal); }
.doc-steps li.current::before { color:var(--teal); }
.doc-steps li.done { color:var(--done); background:var(--done-soft); }
.doc-nav { display:flex; gap:10px; }
.doc-nav .doc-next { margin-inline-start:auto; color:#fff; background:var(--teal); }
.doc-nav button[hidden] { display:none; }
.doc-final { display:grid; gap:16px; }
.doc-final .button { justify-self:start; }
.answers-title { margin:18px 0 6px; font-size:1rem; }
.facts.entry { margin-top:8px; padding:8px 12px; border:1px dashed var(--line); border-radius:10px; }
@media (max-width: 720px) {
  .doc-fields { grid-template-columns:1fr; }
}

/* Municipality branding (admin console → Municipality → Public page). Only theme tokens, so every template works. */
.mark.has-logo, .footer-brand .mark.has-logo { padding:4px; background:var(--surface); box-shadow:0 6px 16px -8px color-mix(in srgb, var(--navy) 45%, transparent); }
.mark.has-logo img, .icon.has-logo img { display:block; width:100%; height:100%; object-fit:contain; }
.icon.has-logo { width:54px; height:54px; padding:4px; background:var(--surface); border:1px solid var(--line); }

/* Layout "Services by category" */
.service-group + .service-group { margin-top:30px; }
.service-group-title { display:flex; align-items:center; gap:10px; margin:0 0 14px; font-size:1.05rem; }
.service-group-title .icon { width:32px; height:32px; margin:0; border-radius:9px; font-size:1rem; }
.service-group-title .muted { font-size:.8rem; font-weight:600; }

/* Layout "News first": the latest story is shown large */
.cards.news-featured { grid-template-columns:2fr 1fr; }
.cards.news-featured > .news-card:first-child { grid-row:span 2; }
.cards.news-featured > .news-card:first-child .news-cover { min-height:200px; font-size:1.1rem; }
.cards.news-featured > .news-card:first-child h3 { font-size:1.35rem; }

/* Contact section */
.contact-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:15px; margin:0; }
.contact-item { padding:18px 20px; border:1px solid var(--line); border-inline-start:4px solid var(--teal); border-radius:13px; background:var(--surface); }
.contact-item dt { margin-bottom:4px; color:var(--muted); font-size:.76rem; font-weight:800; }
.contact-item dd { margin:0; color:var(--ink); font-weight:700; overflow-wrap:anywhere; }
.contact-item a { color:var(--teal); text-decoration:none; }
.footer-contact li { color:rgba(255,255,255,.68); }

@media (max-width:900px) {
  .cards.news-featured { grid-template-columns:1fr 1fr; }
  .cards.news-featured > .news-card:first-child { grid-column:1 / -1; grid-row:auto; }
  .contact-grid { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:640px) {
  .cards.news-featured, .contact-grid { grid-template-columns:1fr; }
}

/* Notice bar above the header (set by the municipality in /manage → Header). */
.notice-bar { color:var(--navy); background:var(--sun); font-size:.88rem; font-weight:800; }
.notice-bar .container { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 14px; padding:7px 0; text-align:center; }
.notice-bar a { color:var(--navy); text-underline-offset:3px; }