/* ============================================
   PWSO Minimal Overrides
   Only essential bug-fixes. All aesthetic styling left to base template.
   ============================================ */

/* ===== Hide the WYFAO mascot figure (theme-icon.png) — user requested removed =====
   Replaces the icon (the small blue figure with leaves) with a simple gold
   accent line above section titles, and hides it completely from inline
   sub-title positions. */

/* 1) "upper-icon" block above section titles -> gold accent line */
.sec-title .upper-icon,
.sec-title.centered .upper-icon,
.sec-title.light .upper-icon,
.banner-carousel .content-box .links-box .theme-icon,
.fact-counter-six .upper-icon,
.about-section .upper-icon,
.about-style-three .upper-icon {
  background-image: none !important;
  width: 60px !important;
  height: 3px !important;
  background-color: #d2ae6d !important;
  margin: 0 0 18px !important;
  border-radius: 2px;
}
.sec-title.centered .upper-icon { margin: 0 auto 18px !important; }

/* 2) Inline figure icon next to sub-titles -> completely hidden */
.sec-title .sub-title .icon,
.sec-title.light .sub-title .icon {
  display: none !important;
}

/* 3) Bigger decorative figure background -> hidden */
[style*="big-theme-icon"] { background-image: none !important; }
.start-giving-section,
.causes-section-two {
  background-image: none !important;
}

/* ===== Logo sizing (otherwise SVG logo renders huge) ===== */
.main-header .logo-box .logo img,
.main-header .logo-box img {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  height: 80px !important;
  max-height: 80px !important;
  width: auto !important;
  display: block !important;
}
.main-header.fixed-header .logo-box .logo img,
.main-header.fixed-header img[src*="PWSO-logo"] {
  height: 55px !important;
  max-height: 55px !important;
}
@media (max-width: 992px) {
  .main-header .logo-box .logo img { height: 65px !important; max-height: 65px !important; }
}
@media (max-width: 768px) {
  .main-header .logo-box .logo img { height: 55px !important; max-height: 55px !important; }
}

/* ===== Header: compact single-row layout (logo+menu on same row) =====
   - header-style-two (homepage): translucent overlay above hero slider
   - header-style-one (inner pages): solid navy bg, sits above content normally */
.main-header .header-top {
  background: rgba(15, 25, 50, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 6px 0 !important;
}
.main-header .header-upper {
  background: rgba(15, 25, 50, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  padding: 8px 0 !important;
}
/* Inner pages — solid navy header (no transparency, since there's no hero behind it) */
.main-header.header-style-one .header-top {
  background: #14305a;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.main-header.header-style-one .header-upper {
  background: #1a3a6d;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Inner pages have no slider, so the page-wrapper content needs padding-top
   so the first section isn't hidden under the fixed header */
body:not(:has(.banner-section)):not(:has(.pwso-slider)) .page-wrapper > section:first-of-type,
body:not(:has(.banner-section)):not(:has(.pwso-slider)) .page-wrapper > div:first-of-type {
  padding-top: 30px;
}

/* ============ Scroll-to-top button (PWSO styled) ============
   Override the template's bare navy square with a polished circular button
   in PWSO gold + navy. Appears on scroll (handled by template's JS). */
.scroll-to-top {
  position: fixed !important;
  right: 22px !important;
  bottom: 22px !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background: #d2ae6d !important;
  color: #ffffff !important;
  font-size: 16px !important;
  line-height: 50px !important;
  text-align: center;
  z-index: 999 !important;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.85) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.30), 0 0 0 0 rgba(210,174,109,0.6) !important;
  margin-left: 0 !important;
  padding: 0 !important;
  display: none;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
  animation: pwsoScrollPulse 2.2s ease-in-out infinite;
}
.scroll-to-top:hover {
  background: #1a3a6d !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.40) !important;
  animation: none;
}
.scroll-to-top span,
.scroll-to-top .fa {
  font-size: 16px;
  line-height: 1;
}
@keyframes pwsoScrollPulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(0,0,0,0.30), 0 0 0 0 rgba(210,174,109,0.5); }
  50%      { box-shadow: 0 6px 18px rgba(0,0,0,0.30), 0 0 0 10px rgba(210,174,109,0); }
}
@media (max-width: 768px) {
  .scroll-to-top {
    right: 14px !important;
    bottom: 14px !important;
    width: 42px !important;
    height: 42px !important;
    line-height: 42px !important;
  }
}

/* ============ PWSO Organogram (org chart) ============ */
.pwso-organogram {
  max-width: 1100px;
  margin: 0 auto;
  font-family: 'PT Sans', Arial, sans-serif;
}
.pwso-organogram .org-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 0;
}
.pwso-organogram .org-row-3 { gap: 40px; }
.pwso-organogram .org-row-4,
.pwso-organogram .org-row-5 { gap: 20px; }
.pwso-organogram .org-line {
  width: 2px;
  height: 24px;
  background: #d2ae6d;
  margin: 0 auto;
}
.pwso-organogram .org-node {
  background: #ffffff;
  border: 2px solid #1a3a6d;
  color: #1a3a6d;
  padding: 14px 22px;
  border-radius: 6px;
  text-align: center;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  min-width: 140px;
}
.pwso-organogram .org-node small {
  display: block;
  font-weight: 400;
  font-size: 11px;
  color: #6c6d70;
  margin-top: 4px;
  letter-spacing: 0.5px;
}
.pwso-organogram .org-node strong {
  display: block;
  font-size: 14px;
  color: #1a3a6d;
}
.pwso-organogram .org-node-board {
  background: #1a3a6d;
  color: #fff;
  font-size: 16px;
  padding: 18px 36px;
  letter-spacing: 1px;
}
.pwso-organogram .org-node-ed {
  background: #d2ae6d;
  color: #fff;
  border-color: #d2ae6d;
  font-size: 15px;
  padding: 16px 32px;
  letter-spacing: 1px;
}
.pwso-organogram .org-node-deputy {
  background: #14305a;
  color: #fff;
  border-color: #14305a;
  padding: 14px 28px;
}
.pwso-organogram .org-node-audit,
.pwso-organogram .org-node-dept {
  background: #f0ece2;
}
.pwso-organogram .org-row-4 .org-node {
  flex: 1 1 180px;
  max-width: 220px;
}
.pwso-organogram .org-row-5 {
  align-items: flex-start;
  margin-top: 0;
}
.pwso-organogram .org-cluster {
  flex: 1 1 220px;
  max-width: 260px;
  background: #ffffff;
  border-top: 4px solid #d2ae6d;
  border-radius: 6px;
  padding: 18px 18px 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.pwso-organogram .org-cluster-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  color: #1a3a6d;
  font-size: 16px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
  text-align: center;
}
.pwso-organogram .org-cluster ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pwso-organogram .org-cluster li {
  font-size: 12.5px;
  color: #555;
  padding: 6px 0 6px 14px;
  position: relative;
  line-height: 1.45;
  border-bottom: 1px dashed #eee;
}
.pwso-organogram .org-cluster li:last-child { border-bottom: 0; }
.pwso-organogram .org-cluster li::before {
  content: '\25B8';
  position: absolute;
  left: 0;
  color: #d2ae6d;
  font-size: 10px;
  top: 8px;
}

@media (max-width: 768px) {
  .pwso-organogram .org-row { flex-direction: column; align-items: center; }
  .pwso-organogram .org-row-4 .org-node,
  .pwso-organogram .org-cluster { max-width: 100%; width: 100%; }
}

/* ============ Inner-page banner (title + breadcrumb) ============ */
.pwso-page-banner {
  position: relative;
  padding: 70px 0 60px;
  background:
    linear-gradient(135deg, rgba(26,58,109,0.92) 0%, rgba(20,48,90,0.92) 100%),
    radial-gradient(circle, rgba(255,255,255,0.06) 1.2px, transparent 1.2px) 0 0 / 28px 28px,
    radial-gradient(circle, rgba(255,255,255,0.04) 1.2px, transparent 1.2px) 14px 14px / 56px 56px;
  text-align: center;
  color: #fff;
  border-bottom: 3px solid #d2ae6d;
  overflow: hidden;
}
.pwso-page-banner h1 {
  margin: 0 0 18px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 44px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5px;
}
.pwso-page-banner h1::after {
  content: '';
  display: block;
  width: 70px;
  height: 3px;
  background: #d2ae6d;
  margin: 18px auto 0;
  border-radius: 2px;
}
.pwso-breadcrumb {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  gap: 10px;
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.pwso-breadcrumb li { color: #ffffff; }
.pwso-breadcrumb li + li::before {
  content: '/';
  color: #d2ae6d;
  margin-right: 10px;
}
.pwso-breadcrumb a {
  color: #d2ae6d;
  text-decoration: none;
  transition: color 0.2s ease;
}
.pwso-breadcrumb a:hover { color: #ffffff; }
@media (max-width: 768px) {
  .pwso-page-banner { padding: 50px 0 40px; }
  .pwso-page-banner h1 { font-size: 30px; }
  .pwso-breadcrumb { font-size: 11px; gap: 8px; }
}

/* Force logo + menu onto one row, vertically centered, no empty gap */
.main-header .header-upper .inner-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 30px;
  min-height: auto !important;
}
.main-header .header-upper .logo-box {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0 !important;
}
.main-header .header-upper .nav-outer {
  flex: 1 1 auto;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  margin: 0 !important;
}
.main-header .main-menu {
  margin: 0 !important;
  padding: 0 !important;
}
.main-header .main-menu .navigation {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}
.main-header .main-menu .navigation > li {
  margin: 0 !important;
  padding: 0 !important;
}
.main-header .main-menu .navigation > li > a {
  color: #ffffff !important;
  padding: 14px 16px !important;
  line-height: 1.2 !important;
}
.main-header .main-menu .navigation > li > a:hover,
.main-header .main-menu .navigation > li.current > a {
  color: #d2ae6d !important;
}

/* Active/hover underline — centered under each menu item, gold, slim */
.main-header .main-menu .navigation > li > a {
  position: relative;
}
.main-header .main-menu .navigation > li > a:before {
  position: absolute !important;
  content: '' !important;
  left: 50% !important;
  bottom: 6px !important;
  transform: translateX(-50%) !important;
  width: 0 !important;
  height: 2px !important;
  border: 0 !important;
  background: #d2ae6d !important;
  border-radius: 2px !important;
  transition: width 0.25s ease !important;
}
.main-header .main-menu .navigation > li:hover > a:before,
.main-header .main-menu .navigation > li.current > a:before {
  width: calc(100% - 32px) !important;
}

/* Push slider content down so the H2 isn't behind the menu */
.pwso-slide-content {
  padding-top: 80px !important;
}
@media (max-width: 992px) {
  .pwso-slide-content { padding-top: 60px !important; }
}
@media (max-width: 768px) {
  .pwso-slide-content { padding-top: 40px !important; }
}

/* ============ PWSO SIMPLE SLIDER ============
   Lightweight custom slider replacing owl-carousel.
   Edit slides directly in index.html (<div class="pwso-slide" data-bg="...">) */
.pwso-slider {
  position: relative;
  width: 100%;
  height: 560px;
  overflow: hidden;
  background: #2a3540;
}
.pwso-slides {
  position: relative;
  width: 100%;
  height: 100%;
}
.pwso-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pwso-slide.active { opacity: 1; z-index: 2; }
/* Dark gradient overlay for text readability */
.pwso-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.15) 40%,
    rgba(0,0,0,0.55) 100%);
}
.pwso-slide-content {
  position: relative;
  z-index: 3;
  text-align: center;
  color: #fff;
  max-width: 760px;
  padding: 0 30px;
  animation: pwsoFadeUp 1s ease;
}
@keyframes pwsoFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pwso-slide-content h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 54px;
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 22px;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,0.5);
}
.pwso-slide-content p {
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 32px;
  color: rgba(255,255,255,0.95);
}
.pwso-slide-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.pwso-btn {
  display: inline-block;
  padding: 13px 32px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.25s ease;
}
.pwso-btn-gold {
  background: #d2ae6d;
  color: #fff;
  border: 2px solid #d2ae6d;
}
.pwso-btn-gold:hover {
  background: #b8945a;
  border-color: #b8945a;
  color: #fff;
}
.pwso-btn-outline {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.7);
}
.pwso-btn-outline:hover {
  background: #fff;
  color: #1a3a6d;
  border-color: #fff;
}
/* Nav arrows */
.pwso-slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  z-index: 10;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.pwso-slider-nav:hover {
  background: #d2ae6d;
  border-color: #d2ae6d;
}
.pwso-prev { left: 25px; }
.pwso-next { right: 25px; }
/* Dots */
.pwso-slider-dots {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}
.pwso-slider-dots button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.25s ease;
}
.pwso-slider-dots button.active {
  background: #d2ae6d;
  width: 30px;
  border-radius: 6px;
}
/* Responsive */
@media (max-width: 992px) {
  .pwso-slider { height: 480px; }
  .pwso-slide-content h2 { font-size: 40px; }
  .pwso-slide-content p { font-size: 16px; }
}
@media (max-width: 768px) {
  .pwso-slider { height: 420px; }
  .pwso-slide-content h2 { font-size: 30px; margin-bottom: 16px; }
  .pwso-slide-content p { font-size: 14px; margin-bottom: 22px; }
  .pwso-slider-nav { width: 38px; height: 38px; font-size: 14px; }
  .pwso-prev { left: 12px; } .pwso-next { right: 12px; }
}
@media (max-width: 480px) {
  .pwso-slider { height: 380px; }
  .pwso-slide-content h2 { font-size: 24px; }
  .pwso-btn { padding: 10px 22px; font-size: 12px; }
}

/* ===== FIX: Remove blank gap between slider and Focus cards on mobile/tablet =====
   Only applies on the homepage (where the slider sits above featured-section-two). */
@media (max-width: 1023px) {
  body .pwso-slider ~ .featured-section-two,
  body .banner-section + .featured-section-two {
    padding-top: 0 !important;
  }
  body .pwso-slider ~ .featured-section-two .inner-container,
  body .banner-section + .featured-section-two .inner-container {
    margin-top: -30px !important;
  }
}

/* ===== INNER PAGES — fix featured-section-two when there's NO slider above =====
   The template's featured-section-two has margin-top:-30px on its inner-container
   so it overlaps the hero slider. On inner pages (after .pwso-page-banner) this
   negative margin pulls content up into the banner — breaking the layout.
   Reset it and give the inner container proper spacing. */
.pwso-page-banner + .page-wrapper .featured-section-two,
.pwso-page-banner ~ .page-wrapper .featured-section-two,
.pwso-page-banner + .featured-section-two,
.pwso-page-banner ~ .featured-section-two {
  padding-top: 60px !important;
  padding-bottom: 40px !important;
}
.pwso-page-banner + .page-wrapper .featured-section-two .inner-container,
.pwso-page-banner ~ .page-wrapper .featured-section-two .inner-container,
.pwso-page-banner + .featured-section-two .inner-container,
.pwso-page-banner ~ .featured-section-two .inner-container {
  margin-top: 0 !important;
  padding: 40px 40px !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.07);
  border-radius: 8px;
  background: #ffffff;
}

/* Reset any nested row that uses negative margin-top (inline style leftover) */
.pwso-page-banner ~ .page-wrapper .featured-section-two .row[style*="margin-top:-30px"],
.pwso-page-banner ~ .page-wrapper .featured-section-two .row[style*="margin-top: -30px"] {
  margin-top: 20px !important;
}

/* Inner-page sub-title: hide the generic "PWSO - Poor Women Support Organization"
   pre-heading on inner pages — it's redundant with the page banner title */
.pwso-page-banner ~ .page-wrapper .sec-title .sub-title {
  display: none;
}

/* Tighten sec-title heading spacing on inner pages */
.pwso-page-banner ~ .page-wrapper .sec-title h2 {
  margin-bottom: 20px;
}

/* ===== FIX: Force WOW.js animated elements to be visible =====
   (Prevents white/blank sections if the wow.js script is slow/blocked) */
.wow, [data-wow-delay], [data-wow-duration] {
  visibility: visible !important;
  opacity: 1 !important;
  animation-name: none !important;
  animation-duration: 0s !important;
}

/* ===== Geographic Coverage custom section (keep — replaces a generic section
   with PWSO-specific Afghanistan map) ===== */
.geo-coverage-section {
  position: relative;
  background: #1a3a6d;
  background-image: linear-gradient(135deg, #1a3a6d 0%, #14305a 100%);
  padding: 80px 0 90px;
  overflow: hidden;
}
.geo-bg-pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.08) 1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,0.05) 1.5px, transparent 1.5px);
  background-size: 35px 35px, 70px 70px;
  pointer-events: none;
  opacity: 0.6;
}
.geo-coverage-section .auto-container { position: relative; z-index: 2; }
.geo-header { text-align: center; margin-bottom: 30px; }
.geo-header .sub-title {
  color: #d2ae6d !important;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 13px;
  display: inline-block;
  margin-bottom: 15px;
}
.geo-header .sub-title .icon {
  display: inline-block;
  width: 30px; height: 2px;
  background: #d2ae6d;
  vertical-align: middle;
  margin-right: 8px;
}
.geo-header h2 {
  color: #fff;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 38px;
  margin-bottom: 18px;
}
.geo-header h2::after {
  content: '';
  display: block;
  width: 70px; height: 3px;
  background: #d2ae6d;
  margin: 18px auto 0;
}
.geo-subtitle {
  color: rgba(255,255,255,0.85);
  max-width: 720px;
  margin: 0 auto 40px;
  font-size: 16px;
}
.geo-subtitle strong { color: #d2ae6d; }
/* ============ INTERACTIVE AFGHANISTAN MAP (flat + clickable) ============
   3D tilt removed: it was causing inconsistent zoom and hit-testing issues.
   Dotted background is now a CSS layer separate from the SVG. */
.geo-map-wrap {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 25px 10px 50px;
}

/* Container holds the dotted background pattern as its own layer.
   The SVG sits on top — fully clean, no pattern baked in. */
.afg-map-container {
  position: relative;
  width: 100%;
  background-color: transparent;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.10) 1.4px, transparent 1.4px),
    radial-gradient(circle, rgba(255,255,255,0.05) 1.4px, transparent 1.4px);
  background-size: 30px 30px, 60px 60px;
  background-position: 0 0, 15px 15px;
  border-radius: 8px;
  min-height: 480px;
  overflow: hidden;
}

.afg-map-container svg {
  width: 100%;
  height: auto;
  display: block;
  /* Soft shadow for subtle depth without 3D rotation */
  filter: drop-shadow(0 14px 22px rgba(0,0,0,0.45));
}

.afg-map-loading,
.afg-map-error {
  text-align: center;
  color: rgba(255,255,255,0.7);
  padding: 80px 20px;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Safety: any decorative element (rect, circles, patterns) in the SVG must
   NOT intercept clicks. Only the province paths receive pointer events. */
.afg-map-svg rect,
.afg-map-svg circle,
.afg-map-svg pattern,
.afg-map-svg #afgMarkers,
.afg-map-svg #afgMarkers * {
  pointer-events: none !important;
}

/* All province paths: smooth transition, no transforms (keeps hit-testing accurate)
   The 3D depth feel comes from fill/stroke/filter changes only.
   We DO NOT use transform:translate/scale on individual paths because that
   makes provinces overlap each other and blocks clicks. */
.afg-map-svg #afgFeatures path {
  fill: rgba(255,255,255,0.10);
  stroke: rgba(255,255,255,0.55);
  stroke-width: 0.6;
  cursor: pointer;
  pointer-events: all;
  transition: fill 0.25s ease, stroke 0.2s ease, stroke-width 0.2s ease;
}

/* Hover state — depth via color + stroke only */
.afg-map-svg #afgFeatures path.is-hover,
.afg-map-svg #afgFeatures path:hover {
  fill: rgba(210,174,109,0.7);
  stroke: #ffffff;
  stroke-width: 1.8;
}

/* PWSO office provinces — always highlighted */
.afg-map-svg #afgFeatures path.is-pwso-office {
  fill: rgba(255,255,255,0.95);
  stroke: #d2ae6d;
  stroke-width: 1.6;
}

.afg-map-svg #afgFeatures path.is-pwso-office.is-hover,
.afg-map-svg #afgFeatures path.is-pwso-office:hover {
  fill: #ffffff;
  stroke: #d2ae6d;
  stroke-width: 2.2;
}

/* Active (clicked / zoomed-in) state */
.afg-map-svg #afgFeatures path.is-active {
  fill: #d2ae6d !important;
  stroke: #ffffff !important;
  stroke-width: 2 !important;
}

/* Smooth viewBox change for zoom effect */
.afg-map-svg {
  transition: all 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
}

/* Tooltip following the cursor */
.afg-map-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(15,30,55,0.95);
  color: #d2ae6d;
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 4px;
  border: 1px solid rgba(210,174,109,0.5);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 50;
  white-space: nowrap;
}
.afg-map-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Info panel — shows current province + PWSO office badge */
.afg-map-info {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(15,30,55,0.85);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  padding: 14px 18px;
  min-width: 220px;
  z-index: 20;
  backdrop-filter: blur(4px);
}
.afg-map-info-label {
  color: rgba(210,174,109,0.95);
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.afg-map-info-name {
  color: #ffffff;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}
.afg-map-info-badge {
  margin-top: 10px;
  padding: 5px 10px;
  background: rgba(210,174,109,0.2);
  border: 1px solid rgba(210,174,109,0.5);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #d2ae6d;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.afg-map-info-badge .dot {
  width: 8px; height: 8px;
  background: #d2ae6d;
  border-radius: 50%;
  box-shadow: 0 0 8px #d2ae6d;
  animation: afgPulse 1.5s ease-in-out infinite;
}
@keyframes afgPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.3); opacity: 0.6; }
}

/* Reset zoom button — large, obvious, pulsing when zoomed in */
.afg-map-reset {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #d2ae6d;
  color: #ffffff;
  border: 2px solid #ffffff;
  padding: 12px 22px;
  border-radius: 30px;
  cursor: pointer;
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  z-index: 100;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  animation: afgResetPulse 1.8s ease-in-out infinite;
}
.afg-map-reset::before {
  content: '\21BA';
  font-size: 18px;
  line-height: 1;
}
.afg-map-reset:hover {
  background: #b8945a;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 22px rgba(0,0,0,0.55);
  animation: none;
}
@keyframes afgResetPulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(0,0,0,0.45), 0 0 0 0 rgba(210,174,109,0.6); }
  50%      { box-shadow: 0 6px 18px rgba(0,0,0,0.45), 0 0 0 14px rgba(210,174,109,0); }
}

/* Hint shown when zoomed in: "Click anywhere or press ESC to reset" */
.afg-map-hint {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15,30,55,0.92);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 8px 18px;
  border-radius: 30px;
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  z-index: 30;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  animation: afgHintFadeIn 0.4s ease;
}
.afg-map-hint kbd {
  display: inline-block;
  padding: 2px 8px;
  background: #d2ae6d;
  color: #ffffff;
  border-radius: 3px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  margin: 0 3px;
}
@keyframes afgHintFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Responsive — reduce 3D tilt on smaller screens so map isn't squashed */
@media (max-width: 992px) {
}
@media (max-width: 768px) {
.afg-map-container { min-height: 320px; }
.afg-map-info {
    top: 10px; left: 10px;
    min-width: 180px;
    padding: 10px 14px;
  }
  .afg-map-info-name { font-size: 18px; }
  .afg-map-reset { top: 10px; right: 10px; padding: 7px 12px; font-size: 11px; }
}
@media (max-width: 480px) {
/* no tilt on phones — keeps usability */
.afg-map-info-name { font-size: 16px; }
  .afg-map-info-label { font-size: 9px; }
}
.geo-offices {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.geo-office {
  display: flex;
  align-items: center;
  gap: 18px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 18px 30px;
  border-radius: 6px;
}
.geo-office-icon {
  width: 56px; height: 56px;
  background: #ffffff;
  border-radius: 50%;
  border: 2px solid #d2ae6d;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.geo-office-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.geo-office-text h4 {
  color: #fff;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  margin: 0 0 4px;
}
.geo-office-text p {
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  margin: 0;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
@media (max-width: 768px) {
  .geo-coverage-section { padding: 60px 0 70px; }
  .geo-header h2 { font-size: 26px; }
  .geo-subtitle { font-size: 14px; padding: 0 20px; }
  .geo-offices { flex-direction: column; align-items: center; }
}

/* ===== Admin-managed detail pages (activities / jobs) ===== */
.pwso-detail{max-width:860px;margin:0 auto}
.pwso-detail-image{margin:0 0 24px}
.pwso-detail-image img{width:100%;height:auto;border-radius:10px;display:block}
.pwso-detail-meta{display:inline-block;background:#1b6e4f;color:#fff;border-radius:20px;padding:3px 14px;font-size:13px;margin-bottom:14px}
.pwso-detail-body{font-size:16px;line-height:1.8;color:#333}
.pwso-detail-body p{margin:0 0 16px}
.pwso-job-facts{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-wrap:wrap;gap:10px}
.pwso-job-facts li{background:#f3f6f5;border:1px solid #e1e7ef;border-radius:8px;padding:8px 14px;font-size:14px}