/* =============================================================================
   AMAR KHULNA — citizen.css  v1.4.1 (Phase 2 Design Enhancement)
   District-service semantic colours and citizen-services layout.
   Overrides tone classes from main.css for richer visual identity.
   All original class names and shortcode markup preserved.
   ============================================================================= */

/* Semantic colour tokens — derived from AmarKhulna.com brand + logo */
:root {
  --ak-health:     #126670;   /* teal  — hospitals, doctors, diagnostics */
  --ak-education:  #1562a8;   /* blue  — schools, colleges, universities */
  --ak-donor:      #b51f39;   /* rose  — blood donors */
  --ak-market:     #8f530e;   /* orange — market, groceries, honey */
  --ak-civic:      #6240a0;   /* purple — public services, civic */
  --ak-nature:     #0d6638;   /* green — agriculture, tourism, environment */
  --ak-emergency:  #c4181d;   /* pure red — fire, police, ambulance */
}

/* ── Tone icon-box overrides (richer, higher-contrast, WCAG AA) ──────────── */
/* These intentionally override the .tone-* values in main.css               */
.tone-green  { background: #ddf0e3; color: var(--ak-nature); }
.tone-blue   { background: #ddeaf9; color: var(--ak-education); }
.tone-rose   { background: #fce2e7; color: var(--ak-donor); }
.tone-orange { background: #fde8cf; color: var(--ak-market); }
.tone-purple { background: #ece0f8; color: var(--ak-civic); }
.tone-teal   { background: #d9f0ee; color: var(--ak-health); }
.tone-pink   { background: #f8dff2; color: #a82880; }

/* Category-card hover tints (per-tone) */
.ak-category-tone-green:hover  { background: #d3ecdb; }
.ak-category-tone-blue:hover   { background: #d6e5f8; }
.ak-category-tone-rose:hover   { background: #fad7de; }
.ak-category-tone-orange:hover { background: #fcdfc3; }
.ak-category-tone-purple:hover { background: #e4d6f6; }
.ak-category-tone-teal:hover   { background: #ceebe9; }
.ak-category-tone-pink:hover   { background: #f4d5ec; }

/* Fallback hover for category cards without an explicit tone class */
.ak-category-card:hover { background: #f3f8f3; }

/* ── Category card padding ──────────────────────────────────────────────────── */
.ak-category-card { padding: 10px 4px; border-radius: 14px; }

/* ── Feature card overrides ────────────────────────────────────────────────── */
.ak-market-card {
  background: linear-gradient(128deg, #fdf6e8, #f9f0df);
  border-color: #ead8ae;
}
.ak-market-card .ak-eyebrow { color: var(--ak-market); }

.ak-education-card {
  background: linear-gradient(128deg, #edf3fc, #eef5fb);
  border-color: #d8e5f3;
}
.ak-education-card .ak-eyebrow { color: var(--ak-education); }

/* ── Area section gradient ─────────────────────────────────────────────────── */
.ak-area-section {
  background: linear-gradient(122deg, #eef6ee, #f7f9ee);
  border-color: #dae8da;
}

/* ── Priority section accent ───────────────────────────────────────────────── */
.ak-priority-section .ak-eyebrow { color: var(--ak-donor); }

/* ── CTA gradient ──────────────────────────────────────────────────────────── */
.ak-cta { background: linear-gradient(115deg, #064e32, #0e7c50); }

/* ── Taxonomy / archive page hero tints ────────────────────────────────────── */
.ak-section-tone-teal   .ak-page-hero { background: #e8f5f4; }
.ak-section-tone-blue   .ak-page-hero { background: #edf3fb; }
.ak-section-tone-rose   .ak-page-hero { background: #fbeff3; }
.ak-section-tone-purple .ak-page-hero { background: #f2eef9; }
.ak-section-tone-orange .ak-page-hero { background: #fbf3e8; }
.ak-section-tone-pink   .ak-page-hero { background: #f9eef6; }

/* ── Filter grid override (adaptive 4-column when 4 fields exist) ──────────── */
.ak-filter-top:has(.ak-field:nth-child(4)) { grid-template-columns: 1.8fr 1.3fr 1.2fr 1fr; }

/* ── Profile collections ────────────────────────────────────────────────────── */
.ak-profile-collection {
  margin-top: 38px; padding: 28px;
  border-radius: 22px;
}
.collection-teal {
  background: #eef7f6;
  border: 1.5px solid #cfe8e6;
}
.collection-rose {
  background: #fdf3f5;
  border: 1.5px solid #f0d8df;
}
.collection-teal .ak-eyebrow { color: var(--ak-health); }
.collection-rose .ak-eyebrow { color: var(--ak-donor); }

/* ── Citizen services preview panel ────────────────────────────────────────── */
.ak-citizen-preview {
  padding: 28px; margin-top: 38px;
  border: 1.5px solid #dde3ef; border-radius: 22px;
  background: linear-gradient(112deg, #f2f4fb, #f8f9fc);
}
.ak-citizen-preview .ak-eyebrow { color: var(--ak-civic); }
.ak-citizen-intro { font-size: 13px; color: #5b6878; max-width: 780px; }
.ak-citizen-preview .ak-section-heading { margin-bottom: 16px; }
.ak-citizen-preview .ak-section-heading h2 { font-size: 26px; }
.ak-citizen-preview .ak-help-footnote { margin-top: 16px; font-size: 12px; color: #566174; }

/* ── Full citizen-services page ─────────────────────────────────────────────── */
.ak-content.ak-citizen-page { max-width: none; width: 100%; padding: 36px; }
.ak-citizen-page .ak-citizen-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }

/* Preserve plugin-generated class names exactly */
.ak-entry-content .ak-citizen-card a.ak-citizen-call,
.ak-entry-content .ak-citizen-card a.ak-citizen-action {
  color: var(--ak-citizen-accent, var(--brand));
  text-decoration: none;
}
.ak-citizen-call, .ak-citizen-action { flex-wrap: wrap; gap: 8px 12px; }
.ak-citizen-call strong { font-size: clamp(1.2rem, 4vw, 1.65rem); white-space: normal; word-break: break-word; }
.ak-citizen-call > span { white-space: normal; }
.ak-citizen-source { min-width: 0; }
.ak-entry-content .ak-citizen-source a { color: #496558; }

/* ── Responsive overrides ─────────────────────────────────────────────────── */
@media (min-width: 992px) and (max-width: 1250px) {
  .ak-header-inner { gap: 12px; }
  .primary-menu a { padding: 9px 6px; }
  .ak-header-actions .ak-add-link { padding: 9px 10px; }
  .brand-name { font-size: 27px; }
}

@media (max-width: 1000px) {
  .ak-citizen-page .ak-citizen-grid,
  .ak-citizen-preview .ak-citizen-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 991px) {
  .ak-filter-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .ak-profile-collection,
  .ak-citizen-preview {
    padding: 18px 15px; margin-top: 28px; border-radius: 16px;
  }
  .ak-citizen-preview .ak-section-heading {
    align-items: flex-start; flex-direction: column; gap: 8px;
  }
  .ak-citizen-preview .ak-section-heading h2 { font-size: 22px; }
  .ak-profile-collection .ak-listing-grid { grid-template-columns: 1fr; }
  .ak-filter-top > .ak-field:first-child { grid-column: 1 / -1; }
  .ak-category-card { padding: 5px 2px; }
  .ak-citizen-intro { font-size: 12px; }
  .ak-section-heading .ak-eyebrow { font-size: 11px; }
  .ak-profile-collection .ak-section-heading h2 { font-size: 22px; }
}

@media (max-width: 600px) {
  .ak-content.ak-citizen-page { padding: 18px 15px; }
  .ak-citizen-page .ak-citizen-grid,
  .ak-citizen-preview .ak-citizen-grid { grid-template-columns: 1fr; }
  .ak-citizen-call strong { font-size: clamp(1.2rem, 4.5vw, 1.5rem); white-space: normal; word-break: break-word; }
}

/* ── Kind Chips (Phase 5 Quick Kind Filter) ────────────────────────────────── */
.ak-kind-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed #d5e4dc;
}
.ak-kind-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid #cde0d5;
  background: #fff;
  color: #173e31;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: all .15s ease;
}
.ak-kind-chip:hover {
  background: #eef6f2;
  border-color: #075d3a;
  color: #075d3a;
}
.ak-kind-chip.is-active {
  background: #075d3a;
  border-color: #075d3a;
  color: #fff;
  box-shadow: 0 2px 6px rgba(7,93,58,.2);
}

/* ── Phase 6: Advanced Filter Toggles, Active Tags & Live Search ───────────── */
.ak-filter-toggles-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0 16px;
}
.ak-toggle-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid #d5e4dc;
  background: #f8fbf9;
  color: #173e31;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: all .15s ease;
}
.ak-toggle-pill input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #075d3a;
  cursor: pointer;
}
.ak-toggle-pill:hover {
  background: #eef6f2;
  border-color: #075d3a;
}
.ak-toggle-pill.is-active {
  background: #e7f5ee;
  border-color: #075d3a;
  color: #075d3a;
}
.ak-toggle-badge {
  font-size: 14px;
  line-height: 1;
}

/* Active Filters Tags Bar */
.ak-active-filters-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-top: 14px;
  background: #f4faf6;
  border-radius: 8px;
  border-left: 3px solid #075d3a;
}
.ak-active-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #075d3a;
}
.ak-active-tag-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ak-active-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #cde0d5;
  color: #1a4d3b;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: all .15s ease;
}
.ak-active-tag:hover {
  background: #fde8e8;
  border-color: #f87171;
  color: #dc2626;
}
.ak-tag-x {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.ak-reset-all-link {
  font-size: 12px;
  color: #c5221f;
  text-decoration: underline;
  margin-left: 4px;
}
.ak-reset-all-link:hover {
  color: #991b1b;
}

/* Live Search Loading Indicator */
.ak-search-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  margin-bottom: 16px;
  background: #eef6f2;
  border-radius: 8px;
  color: #075d3a;
  font-size: 14px;
  font-weight: 600;
}
.ak-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid #cde0d5;
  border-top-color: #075d3a;
  border-radius: 50%;
  animation: ak-spin .7s linear infinite;
}
@keyframes ak-spin {
  to { transform: rotate(360deg); }
}

.ak-location-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.ak-loc-label {
  flex: 1 1 160px;
  min-width: 0;
  display: flex;
  align-items: center;
  position: relative;
  background: #fff;
  border: 1px solid #d5e4dc;
  border-radius: 6px;
  padding: 0 8px;
  box-sizing: border-box;
}
.ak-loc-label select {
  width: 100%;
  border: none;
  background: transparent;
  padding: 8px 4px;
  font-size: 13.5px;
  color: #173e31;
  outline: none;
}
.ak-loc-label select:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.ak-filter-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ak-sort-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ak-sort-select {
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid #d5e4dc;
  font-size: 13px;
  background: #fff;
  color: #173e31;
}

@media (max-width: 767px) {
  .ak-filter-bottom {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
  }
  .ak-location-fields {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .ak-loc-label {
    flex: 1 1 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .ak-filter-actions {
    gap: 8px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .ak-filter-actions .ak-sort-label {
    flex: 1 1 100% !important;
    width: 100% !important;
    margin: 0;
    box-sizing: border-box;
  }
  .ak-filter-actions .ak-sort-label select,
  .ak-sort-select {
    width: 100% !important;
    min-height: 44px;
    font-size: 13px;
    box-sizing: border-box;
  }
  .ak-filter-actions .ak-button,
  .ak-filter-actions .ak-btn-nearby {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    font-size: 12.5px;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
  }
  .ak-filter-actions .ak-clear-filter {
    width: 100%;
    text-align: center;
    display: block;
    padding: 6px 10px;
    font-size: 12px;
    margin-top: 2px;
    box-sizing: border-box;
  }
  .ak-kind-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 8px;
    margin-inline: -4px;
    padding-inline: 4px;
  }
  .ak-kind-chip {
    flex-shrink: 0;
    font-size: 12.5px;
    padding: 6px 12px;
    white-space: nowrap;
  }
}

@media (max-width: 380px) {
  .ak-filter-actions .ak-button,
  .ak-filter-actions .ak-btn-nearby {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* ==========================================================================
   Phase 4 - Leaflet & OpenStreetMap Styles
   ========================================================================== */
.ak-location-map-section {
  background: #fff;
  border: 1px solid #d5e4dc;
  border-radius: 12px;
  overflow: hidden;
  margin: 1.5rem 0 2rem;
  box-shadow: 0 4px 12px rgba(7, 93, 58, 0.05);
}
.ak-map-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 18px;
  background: #f8faf9;
  border-bottom: 1px solid #e5ede8;
}
.ak-map-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #075d3a;
}
.ak-map-header-title h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #173e31;
}
.ak-map-provider {
  font-size: 0.8rem;
  color: #64748b;
  background: #edf3f0;
  padding: 3px 8px;
  border-radius: 4px;
}
.ak-service-map {
  width: 100%;
  height: clamp(240px, 45vh, 380px);
  background: #e2e8f0;
  position: relative;
  z-index: 1;
}
.ak-map-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 2rem;
  text-align: center;
  color: #475569;
}
.ak-map-fallback a {
  color: #075d3a;
  font-weight: 600;
  text-decoration: underline;
}

/* ==========================================================================
   Phase 4 & 5 - Badges, Alerts, Cooldown & Deadlines
   ========================================================================== */
.ak-coverage-alert {
  display: flex;
  gap: 16px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 5px solid #d97706;
  border-radius: 8px;
  padding: 16px;
  margin: 1.5rem 0;
  align-items: flex-start;
}
.ak-coverage-icon {
  color: #d97706;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
.ak-coverage-body h4 {
  margin: 0 0 6px 0;
  color: #92400e;
  font-size: 1.05rem;
  font-weight: 700;
}
.ak-coverage-body p {
  margin: 0 0 10px 0;
  color: #78350f;
  font-size: 0.95rem;
  line-height: 1.5;
}
.ak-badge-ready {
  background: #ecfdf5 !important;
  color: #065f46 !important;
  border: 1px solid #a7f3d0 !important;
  font-weight: 600;
}
.ak-badge-resting {
  background: #fff7ed !important;
  color: #9a3412 !important;
  border: 1px solid #fed7aa !important;
  font-weight: 600;
}
.ak-badge-active {
  background: #eff6ff !important;
  color: #1e40af !important;
  border: 1px solid #bfdbfe !important;
  font-weight: 600;
}
.ak-badge-expired {
  background: #fef2f2 !important;
  color: #991b1b !important;
  border: 1px solid #fecaca !important;
  font-weight: 600;
}

/* ==========================================================================
   Phase 5 - Emergency Directory Shortcode UI
   ========================================================================== */
.ak-emergency-directory-wrap {
  margin: 2rem 0;
}
.ak-emergency-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1.5rem;
}
.ak-em-pill {
  padding: 8px 16px;
  background: #f1f5f9;
  color: #334155;
  border-radius: 9999px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.2s ease;
}
.ak-em-pill:hover,
.ak-em-pill.is-active {
  background: #dc2626;
  color: #ffffff;
}
.ak-emergency-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}
.ak-emergency-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ak-emergency-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}
.ak-emergency-card.ak-tone-red {
  border-top: 4px solid #dc2626;
}
.ak-emergency-card.ak-tone-blue {
  border-top: 4px solid #2563eb;
}
.ak-emergency-card.ak-tone-green {
  border-top: 4px solid #059669;
}
.ak-emergency-card.ak-tone-orange {
  border-top: 4px solid #ea580c;
}
.ak-em-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  margin-bottom: 8px;
}
.ak-em-category {
  font-weight: 700;
  text-transform: uppercase;
  color: #475569;
}
.ak-em-area {
  color: #64748b;
}
.ak-em-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: #0f172a;
  line-height: 1.35;
}
.ak-em-address {
  font-size: 0.875rem;
  color: #64748b;
  margin: 0 0 14px 0;
  line-height: 1.4;
}
.ak-em-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: auto;
}
.ak-btn-emergency-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #dc2626;
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  flex: 1;
  justify-content: center;
  transition: background-color 0.2s ease;
}
.ak-btn-emergency-call:hover {
  background: #b91c1c;
}
.ak-em-call-icon {
  font-size: 1.2rem;
}
.ak-em-call-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
}
.ak-em-call-text strong {
  font-size: 1.05rem;
  letter-spacing: 0.5px;
}
.ak-em-call-text small {
  font-size: 0.75rem;
  opacity: 0.9;
}
.ak-em-disclaimer {
  margin-top: 1.5rem;
  padding: 12px 16px;
  background: #fef2f2;
  border-radius: 8px;
  border: 1px solid #fee2e2;
  color: #991b1b;
  font-size: 0.95rem;
  text-align: center;
}

/* ==========================================================================
   Phase 5 & 6 - Header Notification Badge & Skip Link Accessibility
   ========================================================================== */
.ak-notif-button {
  position: relative;
}
.ak-notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #dc2626;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  border-radius: 9999px;
  text-align: center;
  padding: 0 4px;
  box-shadow: 0 0 0 2px #ffffff;
}
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: #075d3a;
  color: #ffffff;
  padding: 0.75rem 1.25rem;
  z-index: 99999;
  border-radius: 0 0 6px 6px;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 0;
}

/* ==========================================================================
   District-Wide Ecosystem Feature Styling (Education, B2B, Jobs, Housing)
   ========================================================================== */
.ak-ecosystem-box {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.ak-admission-box {
  background: #eff6ff;
  border-color: #bfdbfe;
  border-left: 4px solid #2563eb;
}
.ak-b2b-box {
  background: #fffbeb;
  border-color: #fde68a;
  border-left: 4px solid #d97706;
}
.ak-job-box {
  background: #f0fdf4;
  border-color: #bbf7d0;
  border-left: 4px solid #16a34a;
}
.ak-eco-box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}
.ak-eco-box-header strong {
  font-size: 1.05rem;
  color: #1e293b;
}
.ak-eco-box-desc {
  margin: 0;
  color: #334155;
  font-size: 0.95rem;
  line-height: 1.6;
}
.ak-housing-disclaimer {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  line-height: 1.5;
}
.ak-housing-disclaimer svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.ak-sort-label select {
  cursor: pointer;
}

/* =============================================================================
   Government Services Portal & Directory Styling
   ============================================================================= */
.ak-government-portal-wrap {
  margin: 1.5rem 0 3rem;
}
.ak-gov-hero {
  text-align: center;
  padding: 2.25rem 1.5rem;
  background: linear-gradient(135deg, #064e32 0%, #075d3a 60%, #0d7348 100%);
  color: #ffffff;
  border-radius: 16px;
  margin-bottom: 1.75rem;
  box-shadow: 0 10px 25px -5px rgba(6, 78, 50, 0.25);
}
.ak-gov-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(4px);
  color: #f0fdf4;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.ak-gov-hero h1 {
  font-size: clamp(1.6rem, 3.5vw, 2.3rem);
  color: #ffffff;
  margin: 0 0 10px 0;
  line-height: 1.3;
}
.ak-gov-lead {
  font-size: 1rem;
  color: #dcfce7;
  max-width: 820px;
  margin: 0 auto;
  line-height: 1.65;
}

/* Security & Anti-Phishing Alert Banner */
.ak-gov-security-alert {
  display: flex;
  gap: 16px;
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  border-left: 5px solid #d97706;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.75rem;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.08);
}
.ak-security-icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}
.ak-security-body h3 {
  margin: 0 0 6px 0;
  color: #92400e;
  font-size: 1.1rem;
}
.ak-security-body p {
  margin: 0 0 8px 0;
  color: #78350f;
  font-size: 0.92rem;
  line-height: 1.55;
}
.ak-security-bullets {
  margin: 0;
  padding-left: 20px;
  color: #78350f;
  font-size: 0.88rem;
  line-height: 1.6;
}
.ak-security-bullets code {
  background: #fef3c7;
  padding: 2px 6px;
  border-radius: 4px;
  color: #b45309;
  font-weight: 700;
}

/* Civic Helplines Bar */
.ak-gov-helplines-strip {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.03);
}
.ak-helpline-strip-header h4 {
  margin: 0 0 12px 0;
  color: #0f172a;
  font-size: 1.05rem;
}
.ak-helpline-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ak-helpline-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 30px;
  padding: 6px 14px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.ak-helpline-chip:hover {
  background: #f1f5f9;
  border-color: var(--chip-accent, #16a34a);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}
.ak-chip-num {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--chip-accent, #16a34a);
}
.ak-chip-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: #334155;
}

/* Filter & Search Bar */
.ak-gov-filter-container {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.5rem;
  margin-bottom: 2.25rem;
}
.ak-gov-search-box {
  position: relative;
  margin-bottom: 1rem;
}
.ak-gov-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.15rem;
  color: #64748b;
  pointer-events: none;
}
.ak-gov-search-input {
  width: 100%;
  padding: 12px 16px 12px 44px;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  font-size: 1rem;
  background: #ffffff;
  color: #0f172a;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ak-gov-search-input:focus {
  border-color: #075d3a;
  box-shadow: 0 0 0 3px rgba(7, 93, 58, 0.15);
}
.ak-gov-tabs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ak-gov-tab-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ak-gov-tab-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.ak-gov-tab-btn.is-active {
  background: #075d3a;
  color: #ffffff;
  border-color: #075d3a;
  box-shadow: 0 4px 8px rgba(7, 93, 58, 0.2);
}

/* Process 3 Steps */
.ak-gov-process-steps {
  margin-bottom: 2.5rem;
}
.ak-process-heading h3 {
  font-size: 1.3rem;
  color: #075d3a;
  margin: 0 0 1rem 0;
  text-align: center;
}
.ak-process-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
}
.ak-process-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.25rem;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.ak-step-badge {
  display: inline-block;
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  padding: 2px 8px;
  font-weight: 800;
  font-size: 0.85rem;
  margin-bottom: 8px;
}
.ak-process-card h4 {
  font-size: 1.05rem;
  color: #0f172a;
  margin: 0 0 6px 0;
}
.ak-process-card p {
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.55;
  margin: 0;
}

/* Citizen Guides Section */
.ak-gov-guides-section,
.ak-gov-offices-section {
  margin-bottom: 3rem;
}
.ak-section-title-bar {
  margin-bottom: 1.5rem;
}
.ak-section-title-bar h2 {
  font-size: 1.5rem;
  color: #075d3a;
  margin: 0 0 6px 0;
}
.ak-section-title-bar p {
  color: #64748b;
  margin: 0;
  font-size: 0.95rem;
}
.ak-gov-guides-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 20px;
}
.ak-gov-guide-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-top: 4px solid #16a34a;
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ak-gov-guide-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.ak-gov-guide-card.ak-tone-blue { border-top-color: #2563eb; }
.ak-gov-guide-card.ak-tone-teal { border-top-color: #0d9488; }
.ak-gov-guide-card.ak-tone-orange { border-top-color: #d97706; }
.ak-gov-guide-card.ak-tone-purple { border-top-color: #9333ea; }

.ak-head-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.ak-authority-pill {
  font-size: 0.78rem;
  font-weight: 700;
  color: #475569;
  background: #f1f5f9;
  padding: 3px 8px;
  border-radius: 4px;
}
.ak-verified-pill {
  font-size: 0.75rem;
  color: #166534;
  font-weight: 600;
  background: #f0fdf4;
  padding: 2px 6px;
  border-radius: 4px;
}
.ak-gov-guide-card h3 {
  font-size: 1.22rem;
  color: #0f172a;
  margin: 6px 0 4px;
  line-height: 1.4;
}
.ak-gov-guide-card .ak-guide-subtitle {
  font-size: 0.88rem;
  color: #64748b;
  margin: 0 0 14px;
}
.ak-check-bullet {
  color: #16a34a;
  font-weight: 800;
}
.ak-fact-col strong {
  color: #1e293b;
}

/* Government Offices Directory Grid */
.ak-gov-offices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 20px;
}
.ak-gov-office-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ak-gov-office-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.07);
}
.ak-office-cat {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #166534;
  background: #f0fdf4;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
}
.ak-office-title {
  font-size: 1.18rem;
  color: #0f172a;
  margin: 0 0 6px 0;
  line-height: 1.4;
}
.ak-office-summary {
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.5;
  margin: 0 0 12px 0;
}
.ak-office-meta-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
  font-size: 0.86rem;
  color: #64748b;
  background: #f8fafc;
  padding: 8px 12px;
  border-radius: 6px;
}
.ak-office-services-list {
  margin-bottom: 14px;
}
.ak-office-services-list strong {
  display: block;
  font-size: 0.88rem;
  color: #1e293b;
  margin-bottom: 6px;
}
.ak-office-services-list ul {
  margin: 0;
  padding-left: 16px;
  font-size: 0.85rem;
  color: #475569;
  line-height: 1.55;
}
.ak-office-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed #e2e8f0;
}
.ak-btn-office-call {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f0fdf4;
  color: #166534 !important;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}
.ak-btn-office-call:hover {
  background: #dcfce7;
}
.ak-btn-office-portal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #075d3a;
  color: #ffffff !important;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}
.ak-btn-office-portal:hover {
  background: #05442a;
}
.ak-office-foot {
  margin-top: 10px;
  font-size: 0.75rem;
  color: #94a3b8;
}

@media (max-width: 640px) {
  .ak-gov-hero { padding: 1.5rem 1rem; }
  .ak-gov-security-alert { flex-direction: column; gap: 8px; }
  .ak-gov-tabs-row { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
  .ak-gov-tab-btn { flex-shrink: 0; }
}





@media (max-width: 480px) {
  .ak-coverage-alert {
    flex-direction: column;
    gap: 10px;
    padding: 14px;
  }
  .ak-event-card {
    flex-direction: column;
    gap: 10px;
  }
  .ak-citizen-preview .ak-citizen-head-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }
}