/* ==========================================================================
   UG (Zambia Union of Government and Allied Workers) — Shared Page Styles
   DROP-IN VERSION: just add <link rel="stylesheet" href="ug-style.css">
   to any existing page. No HTML/class changes required — these rules
   target the markup patterns your pages already use.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  --ug-green-900:#0f3d24;
  --ug-green-800:#14532d;
  --ug-green-700:#166534;
  --ug-green-600:#15803d;
  --ug-green-500:#22c55e;
  --ug-green-50:#f0fdf4;

  --ug-gold:#d4a017;
  --ug-gold-light:#f2c94c;

  --ug-ink:#1f2937;
  --ug-ink-soft:#4b5563;
  --ug-line:#e6e9ec;
  --ug-bg:#f4f6f5;
  --ug-white:#ffffff;

  --ug-radius:16px;
  --ug-shadow:0 10px 30px -12px rgba(15, 61, 36, 0.18);
  --ug-shadow-sm:0 2px 8px rgba(15, 61, 36, 0.08);

  --ug-glass-bg:rgba(255, 255, 255, 0.55);
  --ug-glass-border:rgba(255, 255, 255, 0.6);
  --ug-glass-blur:18px;
}

/* ---------- Callout box (optional — wrap a key statement in this) ----------
   <div class="ug-callout">Your highlighted text here.</div> */
.ug-callout{
  margin:24px 0;
  padding:16px 20px;
  border-radius:10px;
  border:1px solid rgba(21, 128, 61, 0.25);
  border-left:4px solid var(--ug-green-600, #15803d);
  background-color:rgba(240, 253, 244, 0.55);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:var(--ug-green-900, #0f3d24);
  font-size:0.95rem;
}

/* ---------- Base page background ---------- */
body{
  margin:0;
  min-height:100vh;
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  color:var(--ug-ink, #1f2937);
  background-color:var(--ug-bg, #f4f6f5) !important;
  background-image:
    radial-gradient(1200px 500px at 15% -10%, rgba(21, 128, 61, 0.16), transparent 60%),
    radial-gradient(900px 500px at 100% 10%, rgba(212, 160, 23, 0.14), transparent 55%),
    radial-gradient(700px 400px at 50% 100%, rgba(21, 128, 61, 0.10), transparent 60%);
  background-repeat:no-repeat;
  background-attachment:fixed;
}

/* ---------- The content card ----------
   Matches your standard wrapper:
   class="max-w-3xl mx-auto bg-white p-8 mt-10 rounded-xl shadow" */
body div[class*="max-w-3xl"]{
  position:relative;
  overflow:hidden;
  max-width:860px;
  margin:48px auto 60px;
  padding:44px 48px 40px;
  border:1px solid var(--ug-glass-border, rgba(255, 255, 255, 0.6));
  border-radius:var(--ug-radius, 16px);
  background-color:var(--ug-glass-bg, rgba(255, 255, 255, 0.55)) !important;
  -webkit-backdrop-filter:blur(var(--ug-glass-blur, 18px)) saturate(160%);
  backdrop-filter:blur(var(--ug-glass-blur, 18px)) saturate(160%);
  box-shadow:var(--ug-shadow, 0 10px 30px -12px rgba(15, 61, 36, 0.18));
}

/* colored top strip + glow blob for the card */
body div[class*="max-w-3xl"]::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:6px;
  background-image:linear-gradient(90deg, var(--ug-green-600, #15803d), var(--ug-gold, #d4a017));
}
body div[class*="max-w-3xl"]::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:-60px;
  right:-60px;
  width:220px;
  height:220px;
  border-radius:50%;
  background-image:radial-gradient(circle, rgba(34, 197, 94, 0.35), transparent 70%);
  pointer-events:none;
}

/* ---------- Heading ----------
   Matches: class="text-3xl font-bold text-green-700 mb-4" */
body div[class*="max-w-3xl"] h1{
  margin:0 0 22px !important;
  font-family:'Poppins', sans-serif;
  font-weight:800 !important;
  font-size:2.1rem !important;
  line-height:1.2;
  color:var(--ug-green-800, #14532d) !important;
}
body div[class*="max-w-3xl"] h2{
  margin:32px 0 12px;
  font-family:'Poppins', sans-serif;
  font-weight:700;
  font-size:1.25rem;
  color:var(--ug-green-800, #14532d);
}

/* ---------- Body copy ----------
   Matches: class="text-gray-700 mb-6" */
body div[class*="max-w-3xl"] p{
  color:var(--ug-ink-soft, #4b5563) !important;
  font-size:1.02rem;
  line-height:1.8;
  margin:0 0 18px;
}
body div[class*="max-w-3xl"] p strong{
  color:var(--ug-ink, #1f2937);
}

/* ---------- Images (single or in a grid gallery) ---------- */
body div[class*="max-w-3xl"] img{
  display:block;
  width:100%;
  height:260px;
  border-radius:12px !important;
  object-fit:cover;
  box-shadow:var(--ug-shadow-sm, 0 2px 8px rgba(15, 61, 36, 0.08));
  transition:transform 0.35s ease, box-shadow 0.35s ease;
  margin:20px 0;
}
body div[class*="max-w-3xl"] img:hover{
  transform:translateY(-4px) scale(1.015);
  box-shadow:0 14px 28px -10px rgba(15, 61, 36, 0.3);
}
/* a lone full-width image (h-auto style) gets a taller natural crop */
body div[class*="max-w-3xl"] img[class*="h-auto"]{
  height:360px;
}

/* gallery wrapper grid: class="grid grid-cols-1 sm:grid-cols-2 gap-4 my-6" */
body div[class*="max-w-3xl"] div[class*="grid"]{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:16px;
  margin:28px 0;
}
body div[class*="max-w-3xl"] div[class*="grid"] img{
  margin:0;
}

@media (max-width:640px){
  body div[class*="max-w-3xl"]{
    padding:32px 24px;
  }
  body div[class*="max-w-3xl"] h1{
    font-size:1.6rem !important;
  }
  body div[class*="max-w-3xl"] div[class*="grid"]{
    grid-template-columns:1fr !important;
  }
}

/* ---------- Back link / buttons ----------
   Matches: class="... bg-green-600 text-white px-6 py-3 rounded-lg" */
body div[class*="max-w-3xl"] a[class*="bg-green"]{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:34px;
  padding:12px 22px !important;
  border:1px solid rgba(255, 255, 255, 0.4);
  border-radius:10px !important;
  background-color:rgba(21, 128, 61, 0.85) !important;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:var(--ug-white, #ffffff) !important;
  font-weight:600;
  font-size:0.95rem;
  text-decoration:none !important;
  box-shadow:var(--ug-shadow-sm, 0 2px 8px rgba(15, 61, 36, 0.08));
  transition:background-color 0.2s ease, transform 0.2s ease;
}
body div[class*="max-w-3xl"] a[class*="bg-green"]:hover{
  background-color:var(--ug-green-700, #166534) !important;
  transform:translateX(-2px);
}