/* ═══════════════════════════════════════
   prc-city-portal-v2.css
   Overlay styles for redesigned city pages
   Loaded AFTER prc-city-portal.css
   ═══════════════════════════════════════ */

/* ── Hide topic strip on city pages ── */
.prc-city-page #prc-topic-strip{display:none!important}

/* ── Hero centered ── */
.prc-city-hero{text-align:center;border-radius:0 0 22px 22px}
.prc-city-hero-inner{display:flex!important;flex-direction:column;align-items:center;grid-template-columns:none!important}
.prc-city-subtitle{max-width:620px;margin-left:auto;margin-right:auto}
.prc-city-hero-stat{display:none}
.prc-city-stats{justify-content:center}

/* ── Search form in hero ── */
.prc-city-hero .search-box{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);box-shadow:0 16px 40px rgba(0,0,0,.2);max-width:720px;margin:12px auto 0;border-radius:16px}
.prc-city-hero .search-box-inner{background:transparent;padding:16px 20px 18px}
.prc-city-hero .sp-badge{color:rgba(255,255,255,.25);font-size:6px;top:6px;left:14px;letter-spacing:.5px}
.prc-city-hero .sf-col label{color:rgba(255,255,255,.6);font-size:12px;padding-top:4px}
.prc-city-hero .sf-col input:not([type=submit]),.prc-city-hero .sf-col select{background:#fff!important;border-color:rgba(255,255,255,.3)!important;color:#0f172a!important;height:44px;min-width:160px;font-size:14px;border-radius:10px}
.prc-city-hero .sf-col input::placeholder{color:#94a3b8}
.prc-city-hero .sf-col select option{background:#fff;color:#0f172a}
.prc-city-hero .search-box .sf-submit,.prc-city-hero .sf-submit,.prc-city-page .prc-city-hero input[type=submit].sf-submit{background:linear-gradient(135deg,#058bb3,#0ea5e9)!important;box-shadow:0 4px 14px rgba(5,139,179,.45)!important;height:44px!important;font-size:15px!important;padding:0 32px!important;border-radius:10px!important;margin-top:20px!important;width:100%!important}
.prc-city-hero .sf-submit:hover{background:linear-gradient(135deg,#0ea5e9,#38bdf8)!important}
.prc-city-hero .search-fields{gap:12px;padding-top:8px}

/* ── Jump-link strip ── */
.prc-city-jump-strip{background:#fff;border-bottom:1px solid #e2e8f0;overflow-x:auto;-webkit-overflow-scrolling:touch;position:sticky;top:58px;z-index:90;box-shadow:0 2px 6px rgba(0,0,0,.04)}
.prc-city-jump-strip::-webkit-scrollbar{display:none}
.prc-city-jump-inner{display:flex;align-items:center;gap:2px;padding:6px 16px;min-width:max-content;max-width:1280px;margin:0 auto}
.prc-city-jl{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:600;color:#475569;text-decoration:none!important;white-space:nowrap;transition:all .15s}
.prc-city-jl:hover{background:#f0f7ff;color:#1d4ed8}
.prc-city-jl.active{background:#eff6ff;color:#1d4ed8;font-weight:700}
.prc-city-jl i{font-size:13px}

/* ── Jump link icon colors ── */
.prc-city-jl[href='#about'] i{color:#0284c7}
.prc-city-jl[href='#law-enforcement'] i{color:#1d4ed8}
.prc-city-jl[href='#courts'] i{color:#6d28d9}
.prc-city-jl[href='#property'] i{color:#15803d}
.prc-city-jl[href='#vital'] i{color:#be185d}
.prc-city-jl[href='#business'] i{color:#b45309}
.prc-city-jl[href='#economy'] i{color:#0d9488}
.prc-city-jl[href='#elections'] i{color:#4338ca}
.prc-city-jl[href='#transparency'] i{color:#a16207}
.prc-city-jl[href='#resources'] i{color:#059669}
.prc-city-jl[href='#faq'] i{color:#d97706}
.prc-city-jl[href='#nearby'] i{color:#6366f1}

/* ── Colored icon badges (reuse county colors) ── */
.prc-ic--sky{background:#e0f2fe;color:#0284c7}
.prc-ic--blue{background:#dbeafe;color:#1d4ed8}
.prc-ic--red{background:#fee2e2;color:#b91c1c}
.prc-ic--purple{background:#ede9fe;color:#6d28d9}
.prc-ic--green{background:#dcfce7;color:#15803d}
.prc-ic--pink{background:#fce7f3;color:#be185d}
.prc-ic--amber{background:#fef3c7;color:#b45309}
.prc-ic--indigo{background:#e0e7ff;color:#4338ca}
.prc-ic--teal{background:#ccfbf1;color:#0d9488}
.prc-ic--yellow{background:#fef9c3;color:#a16207}
.prc-ic--orange{background:#ffedd5;color:#c2410c}
.prc-ic--slate{background:#f1f5f9;color:#334155}

/* ── Override card title to use icon badge instead of inline ── */
.prc-city-page .prc-card-title i{width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;vertical-align:middle;margin-right:8px}

/* ── Content formatting for profile sections ── */
.prc-city-page .prc-profile-section .prc-card{border-radius:16px;border:1px solid #dbe5ef;box-shadow:0 16px 38px rgba(5,16,30,.08);overflow:hidden;margin-bottom:16px}
.prc-city-page .prc-profile-section .prc-card-title{display:flex;align-items:center;gap:10px;padding:24px 24px 0;font-size:20px;font-weight:700;color:#102338;margin:0}
.prc-city-page .prc-profile-section .prc-card p{padding:14px 24px 24px;font-size:15px;color:#334155;line-height:1.7;margin:0}

/* ── Read more collapse ── */
.prc-city-collapse{max-height:260px;overflow:hidden;position:relative;transition:max-height .3s ease}
.prc-city-collapse.expanded{max-height:none}
.prc-city-collapse::after{content:'';position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(transparent,#fff);pointer-events:none;transition:opacity .2s}
.prc-city-collapse.expanded::after{opacity:0}
.prc-city-readmore{display:inline-flex;align-items:center;gap:5px;padding:6px 16px;border:1px solid #dbe5ef;border-radius:999px;background:#fff;color:#475569;font-size:12px;font-weight:600;cursor:pointer;margin:8px 0 0 24px;transition:all .15s}
.prc-city-readmore:hover{background:#f0f7ff;color:#1d4ed8;border-color:#93c5fd}
.prc-city-readmore.open{border-color:#93c5fd;color:#1d4ed8}

/* ── Nearby cities grid (upgraded) ── */
.prc-city-page .prc-city-chip-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-top:14px}
.prc-city-page .prc-city-chip{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;background:#f8fafc;border:1px solid #e2e8f0;text-decoration:none!important;transition:all .18s;color:#1e293b;font-size:13px;font-weight:500}
.prc-city-page .prc-city-chip:hover{background:#eff6ff;border-color:#93c5fd;transform:translateY(-1px);box-shadow:0 4px 12px rgba(15,23,42,.06)}
.prc-city-page .prc-city-chip i{color:#6366f1;font-size:12px}

/* ── Remove gap above footer stamp ── */
.prc-city-page .prc-page-reviewed-stamp{margin-top:0!important}
.prc-city-page .prc-city-section:last-child .prc-card{margin-bottom:0}

/* ── Responsive ── */
@media(max-width:768px){
  .prc-city-hero{padding:28px 16px 24px}
  .prc-city-title{font-size:26px!important}
  .prc-city-shell{padding:0 16px 0!important}
  .prc-city-jump-inner{padding:4px 12px}
  .prc-city-page .prc-city-chip-wrap{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

/* ── Tighten bottom gap on city pages ── */
.prc-city-page .prc-city-shell{padding-bottom:0!important}
.prc-city-page .prc-city-profile{margin-bottom:0}
.prc-city-page .prc-profile-section:last-child{margin-bottom:0;padding-bottom:0}
.prc-city-page .prc-qs-section{margin-bottom:0}
.prc-city-page .prc-nearby-section:last-child{margin-bottom:0}

/* ── Remove main-wrap bottom margin gap ── */
.prc-city-page .main-wrap{margin-bottom:0!important}
/* === APPEND to prc-city-portal-v2.css === */

/* ── Hide topic strip on city pages ── */
.prc-city-page #prc-topic-strip{display:none!important}

/* ── Tighten breadcrumb → title gap ── */
.prc-city-page .breadcrumb{margin-bottom:0!important;padding:8px 24px!important}
.prc-city-page .section-label{display:none!important}
.prc-city-page .section-title{margin-top:0;margin-bottom:4px;padding-top:0}
.prc-city-page .section-sub{margin-bottom:16px;font-size:13px;color:#64748b}

/* ── Restyle links-group headers as white cards with colored icons ── */
.prc-city-page .links-group{margin-bottom:16px;border-radius:16px;overflow:hidden;border:1px solid #dbe5ef;box-shadow:0 8px 24px rgba(5,16,30,.06)}
.prc-city-page .links-group-title{background:#fff!important;color:#0f172a!important;font-size:16px;font-weight:700;padding:18px 22px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #eef2f7}
.prc-city-page .links-group-title i{width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.prc-city-page .links-group:nth-of-type(1) .links-group-title i{background:#e0f2fe;color:#0284c7}
.prc-city-page .links-group:nth-of-type(2) .links-group-title i{background:#dbeafe;color:#1d4ed8}
.prc-city-page .links-group:nth-of-type(3) .links-group-title i{background:#dcfce7;color:#15803d}

/* ── Restyle resource link grid items ── */
.prc-city-page .links-grid{border:none!important;border-radius:0!important;gap:0!important}
.prc-city-page .link-item{border-bottom:1px solid #f1f5f9;padding:14px 22px;transition:background .15s}
.prc-city-page .link-item:hover{background:#f8fafc}
.prc-city-page .link-item a{color:#1d4ed8;font-weight:600}

/* ── Profile section cards ── */
.prc-city-page .prc-profile-section{background:#fff;border-radius:16px;border:1px solid #dbe5ef;box-shadow:0 8px 24px rgba(5,16,30,.06);padding:0;margin-bottom:16px;overflow:hidden;scroll-margin-top:120px}
.prc-city-page .prc-profile-section h2,.prc-city-page .prc-profile-section h3{display:flex;align-items:center;gap:10px;padding:22px 24px 0;font-size:18px;font-weight:700;color:#0f172a;margin:0}
.prc-city-page .prc-profile-section h2 i,.prc-city-page .prc-profile-section h3 i{width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.prc-city-page .prc-profile-text{padding:14px 24px 20px;font-size:15px;color:#334155;line-height:1.75}

/* ── FAQ section restyle ── */
.prc-city-page .prc-qs-section{border-radius:16px!important;border:1px solid #dbe5ef!important;box-shadow:0 8px 24px rgba(5,16,30,.06);overflow:hidden;scroll-margin-top:120px}
.prc-city-page .prc-qs-section-hdr{background:#fff!important;border-bottom:1px solid #eef2f7;padding:20px 24px!important}
.prc-city-page .prc-qs-section-hdr i{width:36px;height:36px;border-radius:10px;background:#fef3c7;color:#b45309!important;display:inline-flex;align-items:center;justify-content:center;font-size:16px}
.prc-city-page .prc-qs-section-hdr h2{color:#0f172a!important;font-size:18px!important}

/* ── Nearby cities section restyle ── */
.prc-city-page .prc-nearby-section{scroll-margin-top:120px}

/* ── Hero search form white fields + blue button (reinforce) ── */
.prc-city-page .hero .search-box{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.13)!important;box-shadow:0 16px 40px rgba(0,0,0,.2)!important;max-width:720px!important;margin:12px auto 0!important;border-radius:16px!important}
.prc-city-page .hero .search-box-inner{background:transparent!important;padding:16px 20px 18px!important}
.prc-city-page .hero .sp-badge{color:rgba(255,255,255,.25)!important;font-size:6px!important}
.prc-city-page .hero .sf-col label{color:rgba(255,255,255,.6)!important}
.prc-city-page .hero .sf-col input:not([type=submit]),.prc-city-page .hero .sf-col select{background:#fff!important;color:#0f172a!important;height:44px!important;border-radius:10px!important}
.prc-city-page .hero .sf-submit,.prc-city-page .hero input[type=submit]{background:linear-gradient(135deg,#058bb3,#0ea5e9)!important;height:44px!important;border-radius:10px!important;font-size:15px!important;box-shadow:0 4px 14px rgba(5,139,179,.45)!important}

/* ── main-wrap tighter ── */
.prc-city-page .main-wrap{margin-top:0!important;padding-top:20px!important}
/* === Gov card + About card formatting === */

/* ── Gov body container ── */
.prc-city-page .prc-gov-body{padding:20px 24px 16px}

/* ── Key facts strip ── */
.prc-gov-facts{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid #eef2f7}
.prc-gov-fact{display:flex;align-items:center;gap:10px;padding:10px 16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;flex:1;min-width:160px}
.prc-gov-fact-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.prc-gov-fact-text{display:flex;flex-direction:column;gap:1px}
.prc-gov-fact-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#64748b}
.prc-gov-fact-value{font-size:15px;font-weight:800;color:#0f172a}

/* ── Gov content paragraphs ── */
.prc-gov-content{font-size:15px;color:#334155;line-height:1.75}
.prc-gov-content p{margin:0 0 14px;padding:0}
.prc-gov-content p:last-child{margin-bottom:0}

/* ── Collapse inside gov body ── */
.prc-gov-body .prc-city-collapse{max-height:200px;overflow:hidden;position:relative;transition:max-height .3s ease}
.prc-gov-body .prc-city-collapse.expanded{max-height:none}
.prc-gov-body .prc-city-collapse::after{content:'';position:absolute;bottom:0;left:0;right:0;height:50px;background:linear-gradient(transparent,#fff);pointer-events:none;transition:opacity .2s}
.prc-gov-body .prc-city-collapse.expanded::after{opacity:0}
.prc-gov-body .prc-city-readmore{margin:8px 0 0}

/* ── Responsive ── */
@media(max-width:640px){
  .prc-gov-facts{flex-direction:column}
  .prc-gov-fact{min-width:100%}
  .prc-gov-body{padding:16px 16px 12px}
}
/* === Modern FAQ Accordion + Accessibility === */

/* ── Skip nav (screen reader / keyboard) ── */
.prc-skip-nav{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
  z-index:9999;background:#0077b6;color:#fff;padding:12px 20px;font-size:14px;font-weight:600;
  border-radius:0 0 8px 0;text-decoration:none;
}
.prc-skip-nav:focus{
  position:fixed;left:0;top:0;width:auto;height:auto;overflow:visible;
  outline:3px solid #fbbf24;outline-offset:2px;
}

/* ── FAQ Card (shared county + city) ── */
.prc-faq-card2{
  background:#fff;border-radius:14px;border:1px solid #e2e8f0;
  overflow:hidden;margin-top:24px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.prc-faq-card2 .prc-rcard-hdr{
  background:linear-gradient(135deg,#f8fafc,#eef2f7);
  padding:18px 24px;display:flex;align-items:center;gap:12px;
  border-bottom:1px solid #e2e8f0;
}
.prc-faq-card2 .prc-rcard-hdr i{color:#0077b6;font-size:20px;}
.prc-faq-card2 .prc-rcard-hdr h2{
  font-size:18px;font-weight:800;color:#0f172a;margin:0;
}

/* ── Details/Summary accordion items ── */
.prc-faq2{
  border-bottom:1px solid #f0f3f7;
}
.prc-faq2:last-child{border-bottom:none;}

.prc-faq2-q{
  display:flex;align-items:flex-start;gap:12px;
  padding:18px 24px;cursor:pointer;
  font-size:15px;font-weight:600;color:#1e293b;line-height:1.55;
  list-style:none;user-select:none;
  transition:background .15s,color .15s;
}
.prc-faq2-q::-webkit-details-marker{display:none;}
.prc-faq2-q::marker{display:none;content:"";}
.prc-faq2-q:hover{background:#f0f7ff;color:#0077b6;}
.prc-faq2-q:focus-visible{
  outline:3px solid #0077b6;outline-offset:-3px;border-radius:4px;
}

.prc-faq2-chev{
  flex-shrink:0;margin-top:3px;font-size:12px;color:#94a3b8;
  transition:transform .25s ease, color .25s;
}
details[open] > .prc-faq2-q .prc-faq2-chev{
  transform:rotate(90deg);color:#0077b6;
}
details[open] > .prc-faq2-q{
  background:#f0f7ff;color:#0077b6;border-bottom:1px solid #dbeafe;
}

.prc-faq2-num{
  min-width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg,#0a1628,#0077b6);color:#fff;
  font-size:11px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-top:0;
}

.prc-faq2-a{
  padding:0 24px 20px 60px;
  font-size:14px;color:#374151;line-height:1.8;
  border-left:3px solid #0077b6;margin-left:24px;
  animation:prcFaqFadeIn .2s ease;
}
@keyframes prcFaqFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* ── Responsive ── */
@media(max-width:600px){
  .prc-faq2-q{padding:14px 16px;font-size:14px;gap:10px;}
  .prc-faq2-a{padding:0 16px 16px 44px;margin-left:16px;font-size:13px;}
  .prc-faq-card2 .prc-rcard-hdr{padding:14px 16px;}
}

/* ── Focus visible for all interactive elements ── */
.prc-faq2-q:focus-visible,
.prc-city-readmore:focus-visible,
.rc-toggle:focus-visible,
.prc-jl:focus-visible,
.prc-city-jl:focus-visible{
  outline:3px solid #0077b6;outline-offset:2px;border-radius:4px;
}

/* ── Screen reader only class ── */
.prc-sr-only{
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}