/* ================================================
   GLOBAL BASE STYLES — Union Township
   These are the ground rules for the entire site.
   All elements inherit these unless explicitly
   overridden by a more specific rule.
   ================================================ */

/* --- Hyperlinks --- */
a { color: #1e3a8a; text-decoration: underline; }

.site-footer a,
.site-footer a:hover,
.site-footer a:visited {
  color: #ffffff;
}

.hero a,
.page-hero a {
  color: #ffffff;
}

.hero h1, .hero h2, .hero h3, .hero p, .hero span,
.page-hero h1, .page-hero h2, .page-hero h3,
.page-hero p, .page-hero span {
  color: #ffffff;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:visited {
  color: #ffffff !important;
}

a:hover { color: #3b82f6; text-decoration: underline; }
a:visited { color: #1e3a5a; }
a:focus { outline: 2px solid #f59e0b; outline-offset: 2px; }

/* CMS floating edit button — white pencil on maroon (SVG fill; overrides global `a` / :visited for currentColor) */
#ut-cms-edit-float {
  color: #ffffff !important;
  text-decoration: none !important;
}
#ut-cms-edit-float svg,
#ut-cms-edit-float svg path {
  fill: #ffffff !important;
}

/* --- Headings --- */
h1, h2, h3, h4, h5, h6 {
  color: #1a3a5c;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  line-height: 1.2;
}

/* --- Body Text --- */
body {
  color: #1f2937;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
}

/* --- Paragraphs --- */
p { margin-bottom: 1rem; color: #374151; }

/* --- Lists --- */
ul, ol { padding-left: 1.5rem; margin-bottom: 1rem; color: #374151; }
li { margin-bottom: 0.25rem; }

/* --- Strong / Bold --- */
strong { color: #1a3a5c; font-weight: 600; }

/* --- Focus Ring (ADA / WCAG 2.1 AA) --- */
:focus-visible { outline: 2px solid #f59e0b; outline-offset: 2px; }

/* --- End Global Base Styles --- */


/* Union Township – shared design system. Tailwind via CDN. */

:root {
    --primary-blue: #1e3a8a;
    --secondary-blue: #3b82f6;
    --accent-red: #dc2626;
    --text-dark: #1f2937;
    --text-gray: #6b7280;
    --bg-light: #f8fafc;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
}

.hero-section {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.8) 0%, rgba(59, 130, 246, 0.8) 100%),
                url('../images/stonewall.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: white;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

/* Homepage hero: legible text over dark gradient (overrides global h1/p colors) */
.hero-section .hero-content #hero-heading {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    opacity: 1 !important;
}
.hero-section .hero-content > p {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    opacity: 1 !important;
}

/* ═══════════════════════════════════════
   PHASE 6C — HOMEPAGE HERO COMPACT ONLY
   Scoped to .hero-compact so interior .page-hero is unchanged.
   Goal: seal ~90–120px, hero ~18–32px vertical padding, H1 ~28–40px.
   ═══════════════════════════════════════ */
.hero-section.hero-compact {
    min-height: 0 !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}
@media (min-width: 768px) {
    .hero-section.hero-compact {
        padding-top: 24px !important;
        padding-bottom: 28px !important;
    }
}
.hero-section.hero-compact .hero-logo {
    max-width: 200px !important;
    margin-bottom: 12px !important;
}
@media (min-width: 768px) {
    .hero-section.hero-compact .hero-logo {
        max-width: 230px !important;
    }
}
.hero-section.hero-compact #hero-heading,
.hero-section.hero-compact .hero-content h1 {
    font-size: 1.75rem !important;  /* ~28px */
    margin-bottom: 8px !important;
}
@media (min-width: 768px) {
    .hero-section.hero-compact #hero-heading,
    .hero-section.hero-compact .hero-content h1 {
        font-size: 2.25rem !important;  /* ~36px */
    }
}
.hero-section.hero-compact .hero-content p.text-2xl {
    font-size: 1.125rem !important;
    margin-bottom: 4px !important;
}
@media (min-width: 768px) {
    .hero-section.hero-compact .hero-content p.text-2xl {
        font-size: 1.35rem !important;
    }
}
.hero-section.hero-compact .hero-content p.text-xl {
    font-size: 0.95rem !important;
    margin-bottom: 0 !important;
}
@media (min-width: 768px) {
    .hero-section.hero-compact .hero-content p.text-xl {
        font-size: 1.05rem !important;
    }
}

.card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
    position: relative;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.card:focus-within {
    outline: 2px solid var(--secondary-blue);
    outline-offset: 2px;
}

.meeting-card {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-left: 4px solid var(--secondary-blue);
}

.section-title {
    font-family: 'Playfair Display', serif;
    color: var(--primary-blue);
    font-weight: 700;
    margin-bottom: 1rem;
}

.quick-links-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .quick-links-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .quick-links-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .quick-links-grid {
        grid-template-columns: 1fr;
    }
}

.icon-large {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--secondary-blue);
}

.navigation {
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 50;
}

/* Reserve nav height while JSON loads — prevents layout blink between pages */
#site-nav {
    min-height: 4rem;
}

#site-nav:not(.nav-ready) {
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav-link {
    color: var(--text-dark);
    text-decoration: none;
    padding: 12px 16px;
    display: block;
    transition: all 0.3s ease;
    font-weight: 500;
}

.nav-link:hover {
    color: var(--secondary-blue);
    background: var(--bg-light);
}

.nav-link:focus {
    color: var(--secondary-blue);
    background: var(--bg-light);
    outline: 2px solid var(--secondary-blue);
    outline-offset: 2px;
}

.btn-primary {
    background: var(--primary-blue);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    font-weight: 600;
    border: 2px solid var(--primary-blue);
}

.btn-primary:hover {
    background: var(--secondary-blue);
    border-color: var(--secondary-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.btn-primary:focus {
    outline: 2px solid var(--secondary-blue);
    outline-offset: 2px;
}

.btn-secondary {
    background: white;
    color: var(--primary-blue);
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    font-weight: 600;
    border: 2px solid var(--primary-blue);
}

.btn-secondary:hover {
    background: var(--primary-blue);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.4);
}

.btn-secondary:focus {
    outline: 2px solid var(--secondary-blue);
    outline-offset: 2px;
}

.footer {
    background: var(--primary-blue);
    color: white;
    overflow: visible;
}

/* Phase 6C/7/7B/7D: footer — left-aligned, no overlap/ghosting, tight list spacing */
.footer .grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 2.5rem;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: visible;
}
.footer .grid > div {
    min-width: 220px;
    flex: 1 1 220px;
    max-width: 100%;
    overflow: visible;
    text-align: left;
}
/* Site Links + Policies: left-justified, tight vertical spacing (one gap method only) */
.footer nav ul,
.footer .grid > div ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
    padding-left: 0;
    overflow: visible;
    max-height: none;
}
.footer nav ul li,
.footer .grid > div ul li {
    margin: 0;
    padding: 0;
}
.footer nav ul li + li,
.footer .grid > div ul li + li {
    margin-top: 6px;
}
.footer nav a,
.footer .grid > div ul a {
    display: inline-block;
    line-height: 1.35;
    margin: 0;
    padding: 0;
    white-space: normal;
}

/* Phase 7E: Site Links column only — remove extra vertical gaps (middle column) */
.footer .grid > div:nth-child(2),
.footer .grid > div:nth-child(2) * {
    text-align: left;
}
.footer .grid > div:nth-child(2) ul,
.footer .grid > div:nth-child(2) ol {
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer .grid > div:nth-child(2) li {
    margin: 0;
    padding: 0;
    line-height: 1.25 !important;
}
.footer .grid > div:nth-child(2) li + li {
    margin-top: 6px !important;
}
.footer .grid > div:nth-child(2) a {
    display: inline-block;
    margin: 0;
    padding: 0;
    line-height: 1.25;
}
.footer .grid > div:nth-child(2) p {
    margin: 0;
    padding: 0;
}

.footer a:focus {
    outline: 2px solid var(--secondary-blue);
    outline-offset: 2px;
}

.skip-link {
    position: fixed;
    top: 0;
    left: 6px;
    transform: translateY(-100%);
    background: var(--primary-blue);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 0 0 8px 8px;
    z-index: 1000;
}

.skip-link:focus {
    transform: translateY(0);
    outline: 2px solid var(--secondary-blue);
    outline-offset: 2px;
}

.contact-section {
    background: linear-gradient(135deg, var(--bg-light) 0%, #ffffff 100%);
}

/* All interactive focus visible – WCAG; do not use outline:none */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex="0"]:focus {
    outline: 2px solid var(--secondary-blue);
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ═══════════════════════════════════════
   PHASE 2/3/4 — NAVIGATION (Fix 1 + Phase 4)
   Brand: "Union Township Berks County" on all pages. Brand = home link; 7 nav items (no Home).
   ═══════════════════════════════════════ */
.nav-brand,
.site-title,
header .brand,
header a.logo,
header .nav-brand {
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}

/* Phase 4: Brand link looks like text, not a hyperlink */
a.nav-brand,
.nav-brand a {
    color: inherit;
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
}
a.nav-brand:hover,
.nav-brand a:hover {
    text-decoration: none;
    opacity: 0.85;
}

/* Phase 4: Vertical delimiter between brand and first nav item */
a.nav-brand::after,
.nav-brand::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 22px;
    background-color: #1a3a5c;
    opacity: 0.35;
    margin-left: 18px;
    vertical-align: middle;
}

nav a,
nav li a,
.nav-links a,
header nav a,
.nav-link {
    font-size: 0.875rem !important;
    white-space: nowrap !important;
    padding: 0.6rem 0.75rem !important;
    letter-spacing: 0;
    line-height: 1;
}

/* Nav link styling does not apply to brand (brand uses a.nav-brand rules above) */
header nav a.nav-brand {
    padding: 0.6rem 0 !important;
}

header,
nav,
.navbar,
.nav-container,
.navigation {
    min-height: 60px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap !important;
    width: 100%;
}

.navigation .max-w-7xl {
    width: 100%;
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap !important;
    align-items: stretch;
    box-sizing: border-box;
}

.navigation .max-w-7xl > .flex {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.nav-links,
nav ul {
    display: flex;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 1024px) {
    #main-nav-list {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        gap: 0;
        list-style: none;
        margin: 0;
        padding: 0;
    }
}

/* ═══════════════════════════════════════
   PHASE 2/3 — INTERIOR PAGE HERO (Fix 2)
   ═══════════════════════════════════════ */
.page-hero {
    background: linear-gradient(135deg, #1a3a5c 0%, #0f2340 100%);
    border-bottom: 4px solid #c9a84c;
    min-height: 160px;
    max-height: 180px;
    display: flex;
    align-items: center;
    width: 100%;
}

.page-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.page-hero-logo {
    /* Phase 8B: 60–80px so ornate seal reads clearly; do not exceed 80px */
    height: 72px;
    width: auto;
    max-height: 80px;
    min-height: 60px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}

.page-hero-title,
.page-hero-text h1 {
    color: #ffffff;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 6px 0;
    line-height: 1.1;
}

.breadcrumb,
.page-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

.breadcrumb a,
.page-breadcrumb a {
    color: #c9a84c;
    text-decoration: none;
}

.breadcrumb a:hover,
.page-breadcrumb a:hover { text-decoration: underline; }

.breadcrumb-separator,
.breadcrumb-current,
.page-breadcrumb .sep { color: #c9a84c; }

.page-breadcrumb .current,
.breadcrumb-current { color: #e2e8f0; }

@media (max-width: 768px) {
    .page-hero { min-height: 110px; max-height: 130px; }
    /* Phase 8B: minimum 60px for interior seal detail (was 44px) */
    .page-hero-logo { height: 60px; max-height: 80px; min-height: 60px; }
    .page-hero-title,
    .page-hero-text h1 { font-size: 1.4rem; }
    .page-hero-inner { padding: 0 20px; gap: 14px; }
}

/* ═══════════════════════════════════════
   PHASE 2 — INTERIOR PAGE CONTENT (Fix 3)
   ═══════════════════════════════════════ */
body.interior-page {
    background-color: #f1f5f9;
}

.page-content,
body.interior-page main,
.content-area {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 40px 72px;
    background: #ffffff;
}

.content-section {
    margin-bottom: 44px;
    padding-bottom: 44px;
    border-bottom: 1px solid #e2e8f0;
}
.content-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.page-content h2,
body.interior-page main h2 {
    color: #1a3a5c;
    font-size: 1.55rem;
    font-weight: 700;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 3px solid #c9a84c;
    display: inline-block;
}

.page-content h3,
body.interior-page main h3 {
    color: #1a3a5c;
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 24px;
    margin-bottom: 10px;
}

.page-content p,
body.interior-page main p {
    color: #374151;
    font-size: 1rem;
    line-height: 1.8;
    margin-top: 0;
    margin-bottom: 0.15em;
}

.ql-editor p {
    margin-top: 0;
    margin-bottom: 0.15em;
}


.info-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 5px solid #1a3a5c;
    border-radius: 6px;
    padding: 22px 26px;
    margin-bottom: 22px;
}
.info-card h3 {
    color: #1a3a5c;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.15rem;
    font-weight: 700;
}
.info-card p,
.info-card li {
    color: #374151;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 6px;
}

.accent-card {
  background-color: #fffbeb;
  border-left: 4px solid #f59e0b;
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 0.95rem;
}
.data-table th {
    background: #1a3a5c;
    color: #ffffff;
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
}
.data-table td {
    padding: 11px 16px;
    border-bottom: 1px solid #e2e8f0;
    color: #374151;
}
.data-table tr:nth-child(even) td { background: #f8fafc; }
.data-table tr:hover td { background: #eff6ff; }

.pdf-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1a3a5c;
    color: #ffffff !important;
    padding: 10px 18px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    margin: 4px 6px 4px 0;
    transition: background 0.2s, color 0.2s;
}
.pdf-btn:hover {
    background: #c9a84c;
    color: #1a3a5c !important;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 28px;
}
@media (max-width: 768px) {
    .contact-grid { grid-template-columns: 1fr; }
}

.map-container {
    width: 100%;
    margin-top: 16px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

/* Phase 7C: bulletproof contact map (OSM embed + fallback buttons) */
.contact-map-frame {
    width: 100%;
    height: 380px;
    border: 0;
    border-radius: 12px;
    display: block;
}
.contact-map-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}
.contact-map-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    white-space: nowrap;
}
@media (max-width: 768px) {
    .contact-map-frame { height: 320px; }
    .contact-map-actions .btn { width: 100%; }
}

/* Phase 7G — hard override footer link spacing */
.footer nav ul,
.footer nav ul li,
.footer nav ul a,
.footer .grid ul,
.footer .grid ul li,
.footer .grid ul a {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
    text-align: left !important;
}

.footer nav ul,
.footer .grid ul {
    list-style: none !important;
}

/* KILL "space-y-*" style gaps (Tailwind pattern) */
.footer nav ul > :not([hidden]) ~ :not([hidden]),
.footer .grid ul > :not([hidden]) ~ :not([hidden]) {
    margin-top: 6px !important;   /* tight, consistent spacing */
}

/* Make sure the Site Links column is left-anchored */
.footer nav {
    text-align: left !important;
}

/* === Phase 7H / Phase 8D: Ghosted topic placard backgrounds === */
#township-topics a.topic-card {
  position: relative;
  overflow: hidden;
}

/* Background image layer */
#township-topics a.topic-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.45;
  filter: grayscale(50%) contrast(1.10);
  transform: scale(1.04);
  transition: opacity .28s ease, filter .28s ease, transform .28s ease;
  pointer-events: none;
  z-index: 0;
}

/* White wash overlay — lighter so image shows through */
#township-topics a.topic-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.68),
    rgba(255,255,255,0.52));
  pointer-events: none;
  z-index: 1;
}

/* Text stays on top */
#township-topics a.topic-card > * {
  position: relative;
  z-index: 2;
}

/* Hover/focus: image becomes clearly visible, type bolder */
#township-topics a.topic-card:hover::before,
#township-topics a.topic-card:focus-visible::before {
  opacity: 0.70;
  filter: grayscale(15%) contrast(1.15);
  transform: scale(1.01);
}

#township-topics a.topic-card:hover,
#township-topics a.topic-card:focus-visible {
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  #township-topics a.topic-card::before { transition: none; }
}

/* Phase 8D: per-tile backgrounds — ../images/ resolves from /css/styles.css (same files as directive) */
#township-topics a.topic-current-news::before {
  background-image: url("../images/stonewall.png") !important;
}
#township-topics a.topic-services-resources::before {
  background-image: url("../images/permitslic.jpeg") !important;
}
#township-topics a.topic-roads::before {
  background-image: url("../images/Roadwork.jpeg") !important;
}
#township-topics a.topic-ms4::before {
  background-image: url("../images/codeenforce.jpeg") !important;
}
#township-topics a.topic-emergency-alerts::before {
  background-image: url("../images/ambulanceservice.jpeg") !important;
}
#township-topics a.topic-utma::before {
  background-image: url("../images/waterworks.jpeg") !important;
}
#township-topics a.topic-taxes::before {
  background-image: url("../images/taxes.jpeg") !important;
}
#township-topics a.topic-recycling-trash::before {
  background-image: url("../images/wastemanagement.png") !important;
}
#township-topics a.topic-newsletter::before {
  background-image: url("../images/topic-newsletter.jpg") !important;
}
#township-topics a.topic-lanternfly::before {
  background-image: url("../images/topic-lanternfly.jpg") !important;
}
#township-topics a.topic-prepare-emergency::before {
  background-image: url("../images/topic-prepare-emergency.jpg") !important;
}
#township-topics a.topic-jobs::before {
  background-image: url("../images/stonewall.png") !important;
}

/* Phase 10: homepage site search (navy / gold accents) */
.home-site-search .site-search-form input {
  background: #f8fafc;
}
.home-site-search .site-search-form button {
  box-shadow: 0 2px 0 rgba(180, 130, 40, 0.35);
}

/* === Phase 8E: Ghosted Quick Links & Resources backgrounds === */

/* Position context for each tile */
#quick-links-resources .quick-quarry,
#quick-links-resources .quick-voting,
#quick-links-resources .quick-codebook,
#quick-links-resources .quick-berks,
#quick-links-resources .quick-pa-state,
#quick-links-resources .quick-pa-guide,
#quick-links-resources .quick-fema,
#quick-links-resources .quick-solidwaste {
  position: relative;
  overflow: hidden;
}

/* Background image layer */
#quick-links-resources .quick-quarry::before,
#quick-links-resources .quick-voting::before,
#quick-links-resources .quick-codebook::before,
#quick-links-resources .quick-berks::before,
#quick-links-resources .quick-pa-state::before,
#quick-links-resources .quick-pa-guide::before,
#quick-links-resources .quick-fema::before,
#quick-links-resources .quick-solidwaste::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.45;
  filter: grayscale(50%) contrast(1.10);
  transform: scale(1.04);
  transition: opacity .28s ease, filter .28s ease, transform .28s ease;
  pointer-events: none;
  z-index: 0;
}

/* White wash overlay — lets image show through while text stays readable */
#quick-links-resources .quick-quarry::after,
#quick-links-resources .quick-voting::after,
#quick-links-resources .quick-codebook::after,
#quick-links-resources .quick-berks::after,
#quick-links-resources .quick-pa-state::after,
#quick-links-resources .quick-pa-guide::after,
#quick-links-resources .quick-fema::after,
#quick-links-resources .quick-solidwaste::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.68),
    rgba(255,255,255,0.52));
  pointer-events: none;
  z-index: 1;
}

/* Keep all card content (icon, title, link) above overlays */
#quick-links-resources .quick-quarry > *,
#quick-links-resources .quick-voting > *,
#quick-links-resources .quick-codebook > *,
#quick-links-resources .quick-berks > *,
#quick-links-resources .quick-pa-state > *,
#quick-links-resources .quick-pa-guide > *,
#quick-links-resources .quick-fema > *,
#quick-links-resources .quick-solidwaste > * {
  position: relative;
  z-index: 2;
}

/* Hover / focus: image gets clearer, type bolder */
#quick-links-resources .quick-quarry:hover::before,
#quick-links-resources .quick-voting:hover::before,
#quick-links-resources .quick-codebook:hover::before,
#quick-links-resources .quick-berks:hover::before,
#quick-links-resources .quick-pa-state:hover::before,
#quick-links-resources .quick-pa-guide:hover::before,
#quick-links-resources .quick-fema:hover::before,
#quick-links-resources .quick-solidwaste:hover::before,
#quick-links-resources .quick-quarry:focus-visible::before,
#quick-links-resources .quick-voting:focus-visible::before,
#quick-links-resources .quick-codebook:focus-visible::before,
#quick-links-resources .quick-berks:focus-visible::before,
#quick-links-resources .quick-pa-state:focus-visible::before,
#quick-links-resources .quick-pa-guide:focus-visible::before,
#quick-links-resources .quick-fema:focus-visible::before,
#quick-links-resources .quick-solidwaste:focus-visible::before {
  opacity: 0.70;
  filter: grayscale(15%) contrast(1.15);
  transform: scale(1.01);
}

#quick-links-resources .quick-quarry:hover,
#quick-links-resources .quick-voting:hover,
#quick-links-resources .quick-codebook:hover,
#quick-links-resources .quick-berks:hover,
#quick-links-resources .quick-pa-state:hover,
#quick-links-resources .quick-pa-guide:hover,
#quick-links-resources .quick-fema:hover,
#quick-links-resources .quick-solidwaste:hover {
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  #quick-links-resources [class*="quick-"]::before {
    transition: none;
  }
}

/* Per-tile image bindings (../images/ from /css/styles.css) */
#quick-links-resources .quick-quarry::before {
  background-image: url("../images/quick-quarry.jpg") !important;
}
#quick-links-resources .quick-voting::before {
  background-image: url("../images/quick-voting.jpg") !important;
}
#quick-links-resources .quick-codebook::before {
  background-image: url("../images/quick-codebook.jpg") !important;
}
#quick-links-resources .quick-berks::before {
  background-image: url("../images/quick-berks.jpg") !important;
}
#quick-links-resources .quick-pa-state::before {
  background-image: url("../images/quick-pa-state.jpg") !important;
}
#quick-links-resources .quick-pa-guide::before {
  background-image: url("../images/quick-pa-guide.jpg") !important;
}
#quick-links-resources .quick-fema::before {
  background-image: url("../images/quick-fema.jpg") !important;
}
#quick-links-resources .quick-solidwaste::before {
  background-image: url("../images/quick-solidwaste.jpg") !important;
}

/* ============================================
   Phase 9C: Navigation Dropdown Fix
   Tailwind v2 CDN does not support lg:group-hover
   or lg:group-focus-within — native CSS override.
   styles.css loads AFTER Tailwind CDN so our
   !important wins over Tailwind's hidden class.
   ============================================ */

@media (min-width: 1024px) {

  /* Reveal dropdown on hover or keyboard focus */
  .navigation .group:hover > .absolute,
  .navigation .group:focus-within > .absolute,
  .navigation .group:hover > .nav-dropdown-panel,
  .navigation .group:focus-within > .nav-dropdown-panel {
    display: block !important;
  }

  /* Set dropdown min-width — arbitrary Tailwind values
     require JIT, not available in CDN build */
  .navigation .group > .absolute,
  .navigation .group > .nav-dropdown-panel {
    min-width: 13rem;
  }

  /* Government dropdown is wider */
  .navigation .group:first-child > .absolute,
  .navigation .group:first-child > .nav-dropdown-panel {
    min-width: 15rem;
  }

  /* Flush under parent label — no gap or horizontal offset */
  .navigation .group > .nav-dropdown-panel {
    left: 0 !important;
    right: auto !important;
    top: 100% !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 200 !important;
  }

}

/* Keep dropdowns hidden on mobile/tablet */
@media (max-width: 1023px) {
  .navigation .group > .absolute,
  .navigation .group > .nav-dropdown-panel {
    display: none !important;
  }
}

/* Dropdown parent toggle (button) matches link appearance */
.navigation button.nav-dropdown-toggle {
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}

.navigation a.nav-overview-link {
  font-weight: 600;
  border-bottom: 1px solid #e5e7eb;
}
.navigation a.nav-overview-link:hover {
  background: #f1f5f9 !important;
}
/* ================================================
   CMS EDITOR OVERRIDES
   Forces Quill visual editor to match live site
   appearance so what staff sees while editing is
   exactly what visitors see on the live page.
   ================================================ */

.ql-editor a { color: #1e3a8a !important; text-decoration: underline !important; }
.ql-editor a:hover { color: #3b82f6 !important; }
.ql-editor h1, .ql-editor h2, .ql-editor h3,
.ql-editor h4, .ql-editor h5, .ql-editor h6 { color: #1a3a5c !important; font-family: 'Playfair Display', serif !important; }
.ql-editor p { color: #374151 !important; margin-bottom: 1rem !important; }
.ql-editor strong { color: #1a3a5c !important; font-weight: 600 !important; }
.ql-editor ul, .ql-editor ol { padding-left: 1.5rem !important; color: #374151 !important; }

/* --- End CMS Editor Overrides --- */
/* CMS nav overrides — must come after styles.css globals */
header.bg-blue-900 a,
header.bg-blue-900 a:hover,
header.bg-blue-900 a:visited,
header.bg-blue-900 a:focus {
  color: #ffffff !important;
  text-decoration: none;
}

header.bg-blue-900 a:hover {
  text-decoration: underline;
}


/* Site announcements — full-width top banner (above nav + hero) */
#site-announcement {
  display: none;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  z-index: 70;
  position: relative;
}
#site-announcement.ut-ann-has-content {
  display: block;
  min-height: 3.25rem;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.12);
  border-bottom: 2px solid #1e3a8a;
  background: #f59e0b;
}
#site-announcement.hidden,
#site-announcement[hidden] {
  display: none !important;
}
#site-announcement.ut-ann-tone-notice { background: #f59e0b; }
#site-announcement.ut-ann-tone-alert { background: #fbbf24; }
#site-announcement.ut-ann-tone-emergency { background: #b91c1c; border-bottom-color: #7f1d1d; }
#site-announcement.ut-ann-tone-closure { background: #d1d5db; border-bottom-color: #374151; }

.ut-ann-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  min-height: 3.25rem;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #111827;
  box-sizing: border-box;
}
@media (min-width: 640px) {
  #site-announcement.ut-ann-has-content {
    min-height: 4rem;
  }
  .ut-ann-bar-inner {
    min-height: 4rem;
    padding: 1rem 1.5rem;
    font-size: 1.0625rem;
  }
}
@media (min-width: 1024px) {
  #site-announcement.ut-ann-has-content {
    min-height: 4.5rem;
  }
  .ut-ann-bar-inner {
    min-height: 4.5rem;
    padding: 1.125rem 2rem;
  }
}

.ut-ann-viewport {
  flex: 1 1 auto;
  width: 100%;
  max-width: 72rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ut-ann-slide {
  display: none;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  color: #111827;
  background: transparent;
  padding: 0.125rem 0;
}
.ut-ann-slide.is-active {
  display: flex;
}
.ut-ann-msg {
  font-weight: 600;
  letter-spacing: 0.01em;
}
.ut-ann-link {
  color: #111827 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}
.ut-ann-link:hover {
  color: #1e3a8a !important;
}
.ut-ann-nav {
  flex: 0 0 auto;
  background: rgba(17, 24, 39, 0.1);
  border: 1px solid rgba(17, 24, 39, 0.35);
  color: #111827;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 6px;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.ut-ann-nav:hover,
.ut-ann-nav:focus {
  background: rgba(17, 24, 39, 0.18);
  outline: 2px solid #1e3a8a;
  outline-offset: 2px;
}
#site-announcement.ut-ann-tone-emergency .ut-ann-bar-inner,
#site-announcement.ut-ann-tone-emergency .ut-ann-slide,
#site-announcement.ut-ann-tone-emergency .ut-ann-link {
  color: #ffffff !important;
}
#site-announcement.ut-ann-tone-emergency .ut-ann-link:hover {
  color: #fef3c7 !important;
}
#site-announcement.ut-ann-tone-emergency .ut-ann-nav {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}
.ut-ann-notice,
.ut-ann-alert,
.ut-ann-emergency,
.ut-ann-closure {
  background: transparent;
}