/* ================================================================
   Global vanilla CSS – mobile-first responsive overrides.
   Loaded on every page via <link> in <head>.
   ================================================================ */

/* ── 0. Base reset ───────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Smooth momentum scrolling on iOS */
body {
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

/* ── Safe area insets for iPhone notch / home bar ─────────── */
@supports (padding: env(safe-area-inset-left)) {
  #main-header {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
  #mobile-navigation {
    padding-bottom: max(2.5rem, env(safe-area-inset-bottom));
  }
}

/* ── 1. HEADER – tighter on small screens ────────────────── */
@media screen and (max-width: 480px) {
  #main-header {
    height: 68px !important;
    min-height: 68px;
  }
  main.pt-20 {
    padding-top: 68px !important;
  }
}

/* ── 2. HERO SECTION – mobile padding + CTA buttons ─────── */
@media screen and (max-width: 640px) {
  .hero-split-section {
    padding-top: 0 !important;
  }
  .hero-container {
    padding-top: 1.5rem !important;
    padding-bottom: 2rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  .hero-image-card {
    margin-top: 1rem;
  }
}

/* ── 3. MOBILE NAV DRAWER – full-width on tiny screens ───── */
@media screen and (max-width: 360px) {
  #mobile-navigation {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* ── 4. FOOTER – prevent column overflow on narrow phones ── */
@media screen and (max-width: 400px) {
  footer .grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 5. ACTIVITIES GALLERY – 1-col on tiny phones ──────── */
@media screen and (max-width: 420px) {
  .activities-gallery-grid {
    grid-template-columns: 1fr !important;
  }
  .activities-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 6. PROGRAMMES grid – 1-col on tiny phones ───────────── */
@media screen and (max-width: 420px) {
  #programmes .grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 7. SUPPORT SECTION – bank detail grid ──────────────── */
@media screen and (max-width: 480px) {
  #support .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
}

/* ── 8. SECTIONS – padding fix on mobile ─────────────────── */
@media screen and (max-width: 640px) {
  section.py-16,
  section.py-12 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
}

/* ── 9. Prevent any element from causing horizontal scroll ── */
table {
  max-width: 100%;
  overflow-x: auto;
  display: block;
}
pre, code {
  white-space: pre-wrap;
  word-break: break-word;
}

/* ================================================================
   GLOBAL BUTTON STYLES – Hero-style animated border on hover
   Apply .site-btn-primary or .site-btn-secondary to any button/link
   ================================================================ */

@property --site-btn-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.site-btn-primary,
.site-btn-secondary {
  position: relative;
  isolation: isolate;
  border: none !important;
  outline: none;
  border-radius: 4px !important;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.site-btn-primary {
  background-color: #B8860B !important;
  color: #fff !important;
}
.site-btn-primary:hover {
  background-color: #9a700a !important;
}

.site-btn-secondary {
  background-color: transparent !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.4) !important;
}
.site-btn-secondary:hover {
  background-color: rgba(255,255,255,0.06) !important;
  box-shadow: none !important;
}

/* Animated border via ::before */
.site-btn-primary::before,
.site-btn-secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.site-btn-primary::before {
  background: conic-gradient(
    from 0deg,
    #fde68a 0deg,
    #ffffff var(--site-btn-angle),
    transparent var(--site-btn-angle)
  );
}

.site-btn-secondary::before {
  background: conic-gradient(
    from 0deg,
    #f59e0b 0deg,
    #00e5ff var(--site-btn-angle),
    transparent var(--site-btn-angle)
  );
}

.site-btn-primary:hover::before,
.site-btn-secondary:hover::before {
  opacity: 1;
  animation: site-border-draw 1s ease-out forwards;
}

@keyframes site-border-draw {
  from { --site-btn-angle: 0deg; }
  to   { --site-btn-angle: 360deg; }
}

/* Dark-bg secondary (on dark sections like library amber panel) */
.site-btn-dark {
  position: relative;
  isolation: isolate;
  border: none !important;
  outline: none;
  border-radius: 4px !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background-color: #fff !important;
  color: #B8860B !important;
  font-weight: 600;
  transition: background-color 0.2s ease;
}
.site-btn-dark:hover {
  background-color: #f5f0e8 !important;
}
.site-btn-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    #B8860B 0deg,
    #f59e0b var(--site-btn-angle),
    transparent var(--site-btn-angle)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.site-btn-dark:hover::before {
  opacity: 1;
  animation: site-border-draw 1s ease-out forwards;
}

/* ================================================================
   BADGES / EYEBROW LABELS — one style site-wide
   Matches the home-page hero label: amber uppercase text with a
   gold underline, no pill / box.
   ================================================================ */
.hs-eyebrow {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  margin-top: 0;
  padding: 0 0 4px;
  border: 0;
  border-bottom: 2px solid #B8860B;
  border-radius: 0;
  background: none;
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9a700a;               /* readable on light backgrounds */
  overflow-wrap: anywhere;
}
@media (min-width: 640px) {
  .hs-eyebrow { font-size: 0.875rem; }
}
.hs-eyebrow--dark    { color: #fbbf24; }                       /* on navy / dark */
.hs-eyebrow--onamber { color: #fff; border-bottom-color: rgba(255,255,255,0.7); } /* on gold panels */
.hs-eyebrow--sm      { font-size: 0.6875rem; letter-spacing: 0.1em; }
.hs-eyebrow--tag     { font-size: 0.65rem; letter-spacing: 0.08em; padding-bottom: 2px; }
@media (min-width: 640px) {
  .hs-eyebrow--sm  { font-size: 0.6875rem; }
  .hs-eyebrow--tag { font-size: 0.65rem; }
}

/* ================================================================
   BUTTON refinements (shared by every .site-btn-*)
   ================================================================ */
.site-btn-primary,
.site-btn-secondary,
.site-btn-dark {
  gap: 0.5rem;
  line-height: 1.25;
  text-align: center;
  min-height: 44px;             /* comfortable touch target */
  -webkit-tap-highlight-color: transparent;
}
.site-btn-primary:focus-visible,
.site-btn-secondary:focus-visible,
.site-btn-dark:focus-visible {
  outline: 2px solid #fde68a;
  outline-offset: 2px;
}
.site-btn-primary:disabled { opacity: .7; cursor: not-allowed; }

/* ================================================================
   ANCHOR SCROLLING — account for the fixed header
   ================================================================ */
section[id], [id="bank-details"] { scroll-margin-top: 76px; }
@media screen and (max-width: 480px) {
  section[id], [id="bank-details"] { scroll-margin-top: 72px; }
}

/* ================================================================
   MOBILE RESPONSIVE LAYER (all pages)
   ================================================================ */
html, body { max-width: 100%; }
img, video, iframe, svg { max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, a, li, address { overflow-wrap: break-word; }

/* Tablet and below — two-column feature sections stack */
@media screen and (max-width: 900px) {
  .about-container,
  .core-obj-container {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .about-text { max-width: 100% !important; }
  .core-obj-blocks { flex-direction: column !important; }
}

/* Phones */
@media screen and (max-width: 640px) {
  .about-heading,
  .core-obj-heading { font-size: 1.65rem !important; }

  .badge-group,
  .core-obj-badges { gap: 1rem 1.25rem !important; }

  /* Hero / page-hero buttons and CTA rows fill the width */
  .site-btn-primary,
  .site-btn-secondary,
  .site-btn-dark { font-size: 0.875rem; }

  /* Gold CTA rows inside sections stack */
  section .flex-col.sm\:flex-row > a,
  section .flex-col.sm\:flex-row > button { width: 100%; }

  /* Contact quick-pill buttons: full-width stack so nothing overflows */
  .flex.flex-wrap.gap-3 > a.site-btn-secondary { flex: 1 1 100%; justify-content: flex-start; }

  /* Forms: stop iOS zoom on focus */
  input, select, textarea { font-size: 16px !important; }

  /* Reduce generous card padding */
  .p-8 { padding: 1.5rem !important; }
  .md\:p-10 { padding: 1.5rem !important; }

  footer .grid { gap: 2rem !important; }
}

/* Very small phones */
@media screen and (max-width: 380px) {
  .hs-eyebrow { letter-spacing: 0.06em; }
  .page-hero-h1 { font-size: 1.6rem !important; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Section-level "* { padding:0 }" resets would flatten the badge underline
   gap and button padding — re-assert them with higher specificity. */
.about-section .hs-eyebrow,
.core-obj-section .hs-eyebrow,
.activities-section .hs-eyebrow,
.founder-section .hs-eyebrow { padding: 0 0 4px; }
.about-section .hs-eyebrow--tag,
.activities-section .hs-eyebrow--tag { padding-bottom: 2px; }
.about-section .site-btn-primary,
.core-obj-section .site-btn-primary,
.activities-section .site-btn-primary,
.founder-section .site-btn-primary { padding: 0.7rem 1.75rem; }