/* City of Fulton: base styles. Page layout lives inline in each page (from the design); this file has the
   shared rules, the responsive switches and the hover/focus states. */
body{margin:0;background:#f6f4ef;color:#1c2628;font-family:'Public Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#1e4a54;text-decoration:none;cursor:pointer}a:hover{color:#a8462a}
*{box-sizing:border-box}
input,textarea,button{font-family:inherit}
[hidden]{display:none!important}
.contents{display:contents}
.only-wide{display:contents}.only-narrow{display:none}
@media (max-width:1179px){.only-wide{display:none}.only-narrow{display:contents}}
:root{--qa-cols:4;--job-cols:260px minmax(0,1fr)}
@media (max-width:1179px){:root{--job-cols:minmax(0,1fr)}}
@media (max-width:999px){:root{--qa-cols:2}}
@media (max-width:559px){:root{--qa-cols:1}}
.photo-ph{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#e4ecec,#cfdcdc)}
.photo-ph span{font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:clamp(28px,4vw,40px);color:#1e4a54;opacity:.55;letter-spacing:.04em}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;padding:10px 16px;border-radius:8px;background:#14343b;color:#fff;font-weight:600}
.skip:focus{left:8px;color:#fff}
:focus-visible{outline:3px solid #e0a82e;outline-offset:2px}
main{scroll-margin-top:90px}
@media (max-width:640px){
  /* The design's 32px side padding, tightened on phones (page containers and the narrow centred block). */
  [style*="padding:0 32px"],[style*="padding: 0 32px"],
  [style*="max-width:1240px"][style*="px 32px"],[style*="max-width:720px"][style*="px 32px"]{padding-left:16px!important;padding-right:16px!important}
  header>div{gap:12px!important}
}

/* Phones and small tablets. The design's fixed-width columns don't fit, so they stack. */
@media (max-width:899px){
  /* Content pages: main column + 260-320px sidebar. Below this width the main column collapsed to nothing. */
  [style*="grid-template-columns:minmax(0,1fr) minmax(260px,320px)"]{grid-template-columns:minmax(0,1fr)!important;gap:40px!important}
}
@media (max-width:559px){
  /* Card grids whose minimum is wider than a small phone. */
  [style*="grid-template-columns:repeat(auto-fit,minmax(260px,1fr))"]{grid-template-columns:minmax(0,1fr)!important}
  [style*="grid-template-columns:repeat(auto-fit,minmax(200px,1fr))"],
  [style*="grid-template-columns:repeat(auto-fill,minmax(200px,1fr))"]{grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))!important}
  /* Photo + text card: photo goes on top. */
  [style*="grid-template-columns:minmax(120px,220px) minmax(0,1fr)"]{grid-template-columns:minmax(0,1fr)!important}
  [style*="grid-template-columns:minmax(120px,220px) minmax(0,1fr)"]>:first-child{aspect-ratio:16/9;max-height:220px}
  [style*="grid-template-columns:90px minmax(0,1fr)"]{grid-template-columns:64px minmax(0,1fr)!important;gap:16px!important}
  /* Document rows (title, category, PDF): the title gets its own line. */
  [style*="grid-template-columns:minmax(0,1fr) auto auto"]{grid-template-columns:minmax(0,1fr) auto!important;row-gap:6px!important}
  [style*="grid-template-columns:minmax(0,1fr) auto auto"]>:first-child{grid-column:1/-1}
  /* Page titles: the design's 40px minimum is too wide for long words on a 320px screen. */
  h1{overflow-wrap:break-word;hyphens:auto}
  [style*="font-size:clamp(40px,5.4vw,72px)"],[style*="font-size:clamp(40px,5.4vw,68px)"]{font-size:34px!important}
  [style*="font-size:clamp(44px,6vw,72px)"],[style*="font-size:clamp(52px,7vw,104px)"],[style*="font-size:clamp(52px,min(7vw"]{font-size:40px!important}
  /* Alert close button: a full-size tap target. */
  [role="alert"] button{min-width:44px;min-height:44px}
}

/* Hover and focus states from the design. */
.h1:hover{color:#e0a82e!important}
.h2:hover{background:rgba(255,255,255,.06)!important;color:#fff!important}
.h3:hover{background:#eab94f!important;color:#14343b!important}
.h4:hover{color:#14343b!important;border-bottom-color:rgba(28,38,40,.25)!important}
.h5:hover{color:#a8462a!important}
.h6:hover{background:#e0a82e!important;color:#0f2c33!important}
.h7:hover{background:rgba(255,255,255,.1)!important;color:#fff!important}
.h8:hover{background:#fff!important}
.h9:hover{background:#fff!important;color:#14343b!important}
.h10:hover{color:#f1d9c9!important}
.h11:hover{border-color:#14343b!important;color:#14343b!important}
.h12:hover{background:rgba(30,74,84,.05)!important}
.h13:hover{border-color:#1c2628!important;color:#1c2628!important}
.h14:hover{background:#f6f4ef!important;color:#1c2628!important}
.h15:hover{background:#e0a82e!important;border-color:#e0a82e!important;color:#14343b!important}
.h16:hover{background:#0f2c33!important}
.h17:hover{background:#e0a82e!important;color:#14343b!important}
.h18:hover{color:#fff!important}
.f19:focus{border-color:#1e4a54!important;box-shadow:0 0 0 3px rgba(30,74,84,.15)!important}
.h20:hover{border-color:#1c2628!important}
.h21:hover{background:rgba(30,74,84,.05)!important;color:#1c2628!important}
.h22:hover{background:rgba(30,74,84,.06)!important}
.h23:hover{background:#1e4a54!important}
.h24:hover{background:#eab94f!important}
.h25:hover{border-color:#1e4a54!important;color:#1c2628!important}
.h26:hover{color:#eab94f!important}