/* City of Halliday v2 — civic design modeled on sgcityutah.gov */
@font-face{font-family:'Poppins';src:url('/assets/fonts/Poppins-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Poppins';src:url('/assets/fonts/Poppins-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Poppins';src:url('/assets/fonts/Poppins-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Poppins';src:url('/assets/fonts/Poppins-Light.ttf') format('truetype');font-weight:300;font-display:swap}
@font-face{font-family:'Roboto';src:url('/assets/fonts/Roboto-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Roboto';src:url('/assets/fonts/Roboto-Bold.ttf') format('truetype');font-weight:700;font-display:swap}

:root{
  --navy:#0b2b4c; --navy-deep:#07203a; --navy-line:#1d4670;
  --gold:#fdb714; --gold-dark:#b97e00;
  --ink:#15202e; --muted:#4c5c6e; --line:#d7dee6; --bg:#ffffff; --wash:#f2f5f8;
  --link:#0b5cc4;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{overflow-x:hidden;font:16px/1.65 'Roboto',system-ui,sans-serif;color:var(--ink);background:var(--bg)}
img{max-width:100%;display:block}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
h1,h2,h3,h4{font-family:'Poppins',sans-serif;line-height:1.2}
a{color:var(--link)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--gold);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#231a00;font-weight:700;
  padding:10px 18px;z-index:200}
.skip:focus{left:0}
.sp{flex:1}
.fine{font-size:13.5px;color:var(--muted)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Poppins',sans-serif;
  font-weight:600;font-size:15px;padding:12px 24px;border-radius:4px;text-decoration:none;border:none;
  cursor:pointer;transition:background .3s,color .3s,transform .15s}
.btn.gold{background:var(--gold);color:#231a00}
.btn.gold:hover{background:#ffc93e}
.btn.navy{background:var(--navy);color:#fff}
.btn.navy:hover{background:var(--navy-line)}
.btn.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.75)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold)}

/* utility bar + header */
/* phone tap targets — 40px minimum on anything you tap (measured 34px before) */
@media(max-width:1299px){
  .mainmenu a,.mainmenu button{min-height:44px;display:flex;align-items:center}
  .menu a{min-height:44px;display:flex;align-items:center}
  .mnav-toggle{min-height:46px}
}
@media(max-width:760px){
  /* 40px minimum on anything you tap - the legal row is excluded so it stays one line */
  .utility a{display:inline-block;padding:11px 4px}
  .fgrid nav a{display:flex;align-items:center;min-height:44px}
  .fbrand + p a,.fgrid > div p a{display:inline-block;padding:10px 0}
  /* card headline links: the whole line is the tap target, not just the words */
  .cbody h3 a{display:block;min-height:44px;display:flex;align-items:center}
  /* dropdown items inside the open phone menu */
  .menu a{min-height:44px;display:flex;align-items:center;padding:9px 12px}
  /* the legal row stacks on a phone anyway, so its links can take a real tap box */
  .fbase p.legal a{display:inline-block;padding:11px 2px}
}

.utility{background:var(--navy-deep);color:#c8d6e6;font-size:13.5px}
.ubar{flex-wrap:wrap}
@media(max-width:640px){.ubar>span:first-child,.ubar .usep{display:none}.ubar{justify-content:center;gap:16px}}
.ubar{display:flex;align-items:center;gap:10px;min-height:38px;flex-wrap:wrap;padding-top:4px;padding-bottom:4px}
.utility a{color:#fff;text-decoration:none;font-weight:500}
.utility a:hover{color:var(--gold)}
/* The dot between two utility items is decoration, not writing. Drawn here rather
   than sat in the page as a one-character text node. */
.usep{color:#59718c}
.usep::before{content:"\00b7"}
header{background:var(--navy);color:#fff;position:sticky;top:0;z-index:100;
  box-shadow:0 2px 10px rgba(0,0,0,.25)}
.hbar{display:flex;align-items:center;gap:12px;min-height:76px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.mark{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:6px;
  background:var(--gold);color:#231a00;font-family:Georgia,serif;font-size:26px;font-weight:700;flex:none}
.bname{display:flex;flex-direction:column;line-height:1.15}
.bname strong{font-family:'Poppins',sans-serif;font-size:18px;letter-spacing:.2px;white-space:nowrap}
.bname em{font-style:normal;font-size:12.5px;color:#b8cade;letter-spacing:2.4px;text-transform:uppercase}
nav[aria-label="Main navigation"]{margin-left:auto}
.mainmenu{display:flex;list-style:none;gap:2px;align-items:center}
.mainmenu>li{position:relative}
.mainmenu>li>a,.mainmenu>li>button{display:flex;align-items:center;gap:6px;background:none;border:none;
  color:#fff;font-family:'Poppins',sans-serif;font-weight:600;font-size:13.5px;padding:12px 8px;cursor:pointer;
  text-decoration:none;transition:color .3s;border-radius:4px;white-space:nowrap}
.mainmenu>li>a:hover,.mainmenu>li>button:hover{color:var(--gold)}
.mainmenu svg{width:14px;height:14px;transition:transform .3s}
.mainmenu li.open>button svg{transform:rotate(180deg)}
.menu{display:none;position:absolute;top:100%;left:0;min-width:264px;background:#fff;color:var(--ink);
  list-style:none;padding:8px;border-radius:0 0 6px 6px;box-shadow:0 12px 30px rgba(7,32,58,.28);
  border-top:3px solid var(--gold);z-index:120}
.mainmenu li.open>.menu{display:block}
.menu a{display:block;padding:9px 12px;text-decoration:none;color:var(--navy);font-weight:500;font-size:14.5px;
  border-radius:4px;transition:background .3s}
.menu a:hover{background:var(--wash);color:var(--navy-deep)}
.mnav-toggle{display:none}
.btn.pay{padding:10px 18px;font-size:14px;flex:none}

/* hero */
.hero{position:relative;min-height:560px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:var(--navy-deep)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,32,58,.62),rgba(7,32,58,.38) 55%,rgba(7,32,58,.72))}
.hero-watermark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(60px,10.5vw,150px);letter-spacing:.06em;
  color:rgba(255,255,255,.10);user-select:none;white-space:nowrap}
.hero-inner{position:relative;text-align:center;color:#fff;padding:96px 20px;max-width:900px}
.hero-kicker{font-family:'Poppins',sans-serif;font-weight:600;font-size:clamp(17px,2.4vw,26px);
  letter-spacing:.55em;text-transform:uppercase;margin-bottom:6px;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.hero-title{margin:0;font-family:'Poppins',sans-serif;font-weight:300;font-size:clamp(64px,10vw,124px);
  letter-spacing:.08em;text-transform:uppercase;line-height:1.02;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.hero-sub{margin-top:14px;font-size:clamp(15px,1.6vw,18.5px);color:#e6eef7;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* bands */
.band{padding:64px 0}
.band.white{background:var(--bg)}
.band.navy{background:var(--navy);color:#fff}
.band.gold{background:var(--gold);color:#231a00}
.events-cta{border-top:4px solid var(--gold)}
.events-cta-inner{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.events-cta-icon{width:56px;height:56px;color:var(--gold);flex:none}
.events-cta-text{flex:1;min-width:240px}
.events-cta-text h2{margin:0 0 6px}
.events-cta-text p{color:rgba(255,255,255,.85);max-width:62ch;margin:0}
.events-cta-btn{flex:none}
@media(max-width:640px){.events-cta-inner{gap:18px}.events-cta-btn{width:100%}}
.cal-wrap{display:grid;grid-template-columns:1fr;gap:44px;margin:36px 0 14px}
.cal{border:2px solid var(--navy);border-radius:16px;overflow:hidden;max-width:100%;background:#fff;box-shadow:0 12px 34px rgba(7,32,58,.12)}
.cal-title{background:var(--navy);color:#fff;font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(24px,3.2vw,34px);padding:20px;text-align:center;letter-spacing:.6px}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));max-width:100%}
.cal-dow{background:#0e3357;color:#fff;font-weight:800;font-size:16px;text-transform:uppercase;letter-spacing:1px;text-align:center;padding:16px 0;border-right:1px solid rgba(255,255,255,.14)}
.cal-dow:last-child{border-right:none}
.cal-day{min-height:132px;min-width:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 12px;display:flex;flex-direction:column;gap:8px}
.cal-ev{overflow-wrap:anywhere;word-break:break-word}
.cal-day:nth-child(7n){border-right:none}
.cal-num{font-size:22px;color:#33475b;font-weight:800;font-family:'Poppins',sans-serif}
.cal-empty{background:#f6f8fb}
.cal-day.has-ev{background:#fff6db}
.cal-day.has-ev .cal-num{color:var(--navy)}
.cal-day.is-today{outline:4px solid var(--gold);outline-offset:-4px;background:#fffdf3}
.cal-ev{background:var(--gold);color:#231a00;font-size:15px;font-weight:800;line-height:1.3;padding:8px 11px;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.18)}
@media(max-width:640px){.cal-day{min-height:72px;padding:4px 3px;gap:3px}.cal-num{font-size:13px}.cal-ev{font-size:9.5px;padding:3px 4px;line-height:1.15;border-radius:5px}.cal-dow{font-size:9.5px;padding:8px 1px;letter-spacing:.2px}.cal-title{font-size:20px;padding:12px}.cal{border-radius:10px}}
.ev-list{list-style:none;display:grid;gap:20px;padding:0;margin:20px 0}
.ev-list li{border:2px solid var(--line);border-left:10px solid var(--gold);border-radius:12px;padding:22px 26px;background:#fff}
.ev-list li p{margin:0}
.ev-list li p:nth-child(1){color:var(--navy);font-weight:800;font-family:'Poppins',sans-serif;font-size:17px}
.ev-list li p:nth-child(2){color:#8a6a00;font-weight:800;font-size:16px}
.ev-list li p:nth-child(3){font-size:26px;font-weight:800;margin-top:5px;color:#12222f;line-height:1.15}
.ev-list li p:nth-child(4){color:#465b6d;font-size:16px;font-weight:600}
.ev-list li p:nth-child(5){margin-top:10px;font-size:17px;line-height:1.55}
.band h2{font-size:clamp(26px,3.4vw,38px);font-weight:700;letter-spacing:.4px}
.band.navy h2,.band.navy h3{color:#fff}
.bandhead{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:32px}
.band.white .bandhead h2{color:var(--navy)}

/* quick icon grid */
.quick h2{text-align:center;margin-bottom:36px;text-transform:uppercase;letter-spacing:1.5px}
.quickgrid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.quickgrid li{border-left:1px solid var(--navy-line);display:flex}
.quickgrid li:first-child{border-left:none}
.quickgrid li:nth-child(5){border-left:none}
.quickgrid li:nth-child(n+5){border-top:1px solid var(--navy-line)}
.quickgrid a{flex:1;display:flex;flex-direction:column;align-items:center;gap:12px;color:#fff;
  text-decoration:none;text-align:center;font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;
  line-height:1.35;padding:26px 12px;transition:color .3s,transform .3s}
.quickgrid svg{width:44px;height:44px;color:var(--gold)}
.quickgrid a:hover{color:var(--gold);transform:translateY(-3px)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;
  flex-direction:column;box-shadow:0 3px 10px rgba(7,32,58,.08);transition:transform .3s,box-shadow .3s}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(7,32,58,.16)}
.card img{aspect-ratio:16/9;object-fit:cover;width:100%}
.cbody{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px}
.cdate{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-weight:500}
.card h3{font-size:19px;color:var(--navy)}
.card h3 a{color:inherit;text-decoration:none}
.card h3 a:hover{color:var(--link);text-decoration:underline}
.card p{font-size:14.5px;color:var(--muted)}

/* government band */
.govgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.govband .lead{font-size:17.5px;color:#dbe6f2;margin:16px 0 20px}
.linkrows{list-style:none;margin:0 0 26px;display:flex;flex-direction:column}
.linkrows a{display:block;padding:13px 2px;color:#fff;text-decoration:none;font-family:'Poppins',sans-serif;
  font-weight:600;font-size:16px;border-bottom:1px solid var(--navy-line);transition:color .3s,padding-left .3s}
.linkrows li:first-child a{border-top:1px solid var(--navy-line)}
.linkrows a:hover{color:var(--gold);padding-left:8px}
.govphoto{margin:0}
.govphoto img{border-radius:6px;box-shadow:0 14px 34px rgba(0,0,0,.35)}
.govphoto figcaption{font-size:13.5px;color:#b8cade;margin-top:10px}
.govphoto figcaption a{color:var(--gold)}

/* event band */
.evgrid{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.eventband h2{color:#231a00;margin-bottom:6px}
.eventband p{font-size:16.5px;max-width:720px}

/* interior pages */
.pageband{background:#0a2643;color:#fff;padding:44px 0 40px;
  border-bottom:4px solid var(--gold)}
.crumb{font-size:13.5px;color:#b8cade;text-transform:uppercase;letter-spacing:1.6px;font-weight:500;margin-bottom:10px}
.crumb a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.crumb a:hover{color:var(--gold)}
.pageband h1{font-size:clamp(30px,4.4vw,46px);font-weight:700;letter-spacing:.3px}
.pagegrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;padding:52px 24px 72px}
.pagegrid.solo{grid-template-columns:minmax(0,1fr);max-width:860px}
@media(max-width:820px){.pagegrid{grid-template-columns:1fr;gap:32px;padding:32px 18px 52px}.side{order:2}}
.content{min-width:0}
.side{min-width:0}
.hbar{flex-wrap:wrap;gap:8px}
html{overflow-x:hidden}
.pagephoto img{border-radius:6px;margin-bottom:28px;max-height:380px;width:100%;object-fit:cover}
.content h2{color:var(--navy);font-size:25px;margin:34px 0 12px}
.content h3{color:var(--navy);font-size:20px;margin:26px 0 10px}
.content h4{color:var(--navy);font-size:17px;margin:22px 0 8px}
.content p{margin:0 0 14px;max-width:70ch}
.content ul,.content ol{margin:0 0 16px 22px}
.content li{margin-bottom:8px}
.content a{font-weight:500}
/* A link inside a sentence must be tellable from the words around it by more than
   color alone, so links in body copy carry an underline. Buttons, nav and cards
   are not body copy and keep theirs off. */
.content p a:not(.btn),.content li a:not(.btn){text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.content p a:not(.btn):hover,.content li a:not(.btn):hover{text-decoration-thickness:2px}
.content table{width:100%;border-collapse:collapse;margin:18px 0 24px;font-size:15px}
.content th{font-family:'Poppins',sans-serif;text-align:left;background:var(--wash);color:var(--navy);
  padding:10px 14px;border:1px solid var(--line);font-size:13.5px;text-transform:uppercase;letter-spacing:.6px}
.content td{padding:10px 14px;border:1px solid var(--line)}
.content strong{color:var(--navy)}
.side{display:flex;flex-direction:column;gap:22px}
.sidecard{background:var(--wash);border:1px solid var(--line);border-radius:6px;padding:24px}
.sidecard.gold-edge{border-top:4px solid var(--gold)}
.sidecard h2{color:var(--navy);font-size:18px;margin-bottom:12px;text-transform:uppercase;letter-spacing:1px}
.sidecard p{font-size:14.5px;color:var(--muted);margin-bottom:12px}
.qlist{list-style:none}
.qlist a{display:block;padding:9px 0;color:var(--navy);font-weight:600;font-family:'Poppins',sans-serif;
  font-size:14.5px;text-decoration:none;border-bottom:1px solid var(--line)}
.qlist li:last-child a{border-bottom:none}
.qlist a:hover{color:var(--link)}

/* forms (Netlify) */
.content form{max-width:560px;margin:8px 0 20px}
.content label{display:block;font-family:'Poppins',sans-serif;font-weight:600;font-size:14.5px;
  color:var(--navy);margin:16px 0 6px}
.content input,.content textarea,.content select{width:100%;padding:11px 13px;border:1px solid #a9b7c6;
  border-radius:4px;font:15px 'Roboto',sans-serif;color:var(--ink);background:#fff}
.content input:focus,.content textarea:focus,.content select:focus{border-color:var(--navy)}
.content form .btn{margin-top:20px}

/* footer */
footer{background:var(--navy-deep);color:#c8d6e6;font-size:14.5px}
.fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px;padding:56px 24px 36px}
.fbrand{display:flex;align-items:center;gap:10px;color:#fff;font-family:'Poppins',sans-serif;
  font-size:17px;margin-bottom:14px}
.fbrand .mark{width:36px;height:36px;font-size:20px}
footer h2{font-size:14px;color:var(--gold);text-transform:uppercase;letter-spacing:1.6px;margin-bottom:14px;
  font-family:'Poppins',sans-serif}
footer ul{list-style:none}
footer ul a{display:block;color:#e2ebf4;text-decoration:none;padding:5px 0;transition:color .3s}
footer ul a:hover{color:var(--gold)}
footer p{margin-bottom:12px}
footer a{color:#fff}
.fbase{border-top:1px solid var(--navy-line);padding-top:22px;padding-bottom:30px;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap}
.fbase p{margin:0;font-size:13.5px}
.fbase p.legal{font-size:12.5px;white-space:nowrap;flex-wrap:nowrap;display:flex;gap:7px;align-items:center}
@media(max-width:1239px){.fbase p.legal{white-space:normal;flex-wrap:wrap}}
.fbase a{color:#c8d6e6}
.fbase a:hover{color:var(--gold)}

/* responsive */
@media(max-width:1020px){
  .quickgrid{grid-template-columns:repeat(2,1fr)}
  .quickgrid li{border-left:none;border-top:1px solid var(--navy-line)}
  .quickgrid li:nth-child(-n+2){border-top:none}
  .quickgrid li:nth-child(even){border-left:1px solid var(--navy-line)}
  .cards{grid-template-columns:1fr 1fr}
  .govgrid{grid-template-columns:1fr}
  .pagegrid{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:1299px){
  .hbar{flex-wrap:wrap;padding-top:10px;padding-bottom:10px;gap:10px}
  .btn.pay{order:2;margin-left:auto}
  nav[aria-label="Main navigation"]{order:3;width:100%;margin-left:0}
  .mnav-toggle{display:inline-flex;align-items:center;gap:8px;background:var(--navy-deep);border:1px solid var(--navy-line);
    color:#fff;font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;padding:10px 16px;border-radius:4px;
    cursor:pointer;width:100%;justify-content:center}
  .mnav-toggle svg{width:18px;height:18px}
  .mainmenu{display:none;flex-direction:column;align-items:stretch;background:var(--navy-deep);
    border-radius:6px;margin:8px 0 4px;padding:6px}
  .mainmenu.open{display:flex}
  .mainmenu>li>a,.mainmenu>li>button{width:100%;justify-content:space-between;padding:13px 14px;font-size:15px}
  .menu{position:static;box-shadow:none;border-radius:4px;margin:0 6px 8px}
}
@media(max-width:760px){
  .hbar{flex-wrap:wrap;padding-top:10px;padding-bottom:10px;gap:10px}
  .btn.pay{order:2;margin-left:auto}
  nav[aria-label="Main navigation"]{order:3;width:100%;margin-left:0}
  .mnav-toggle{display:inline-flex;align-items:center;gap:8px;background:var(--navy-deep);border:1px solid var(--navy-line);
    color:#fff;font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;padding:10px 16px;border-radius:4px;
    cursor:pointer;width:100%;justify-content:center}
  .mnav-toggle svg{width:18px;height:18px}
  .mainmenu{display:none;flex-direction:column;align-items:stretch;background:var(--navy-deep);
    border-radius:6px;margin:8px 0 4px;padding:6px}
  .mainmenu.open{display:flex}
  .mainmenu>li>a,.mainmenu>li>button{width:100%;justify-content:space-between;padding:13px 14px}
  .menu{position:static;box-shadow:none;border-radius:4px;margin:0 6px 8px}
  .cards{grid-template-columns:1fr}
  .hero{min-height:480px}
  .fgrid{grid-template-columns:1fr;gap:26px;padding-top:40px}
  .band{padding:48px 0}
}

.scan-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.scan-card{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:1px solid var(--line);
  border-radius:12px;padding:16px 18px;text-decoration:none;background:#fff;transition:.18s}
.scan-card:hover{border-color:var(--link);box-shadow:0 6px 18px rgba(0,0,0,.07)}
.scan-card strong{font-family:'Poppins',system-ui,sans-serif;font-size:16px;color:var(--ink);flex:0 0 auto}
.scan-card span{color:var(--muted);font-size:14.5px;flex:1 1 240px;min-width:0}
.scan-card em{font-style:normal;font-weight:700;font-size:12px;letter-spacing:.06em;
  border:1px solid var(--link);color:var(--link);border-radius:999px;padding:4px 12px;flex:0 0 auto}