/* ============================================================================
   ISKCON Kirtan Ministry — INNER-PAGE UNIFICATION LAYER  (pages-unify.css)
   ----------------------------------------------------------------------------
   Loads AFTER pages.css (.ikm-page-*), pages2.css (.ikm-p2-*) and
   pages3.css (.ikm-p3-*) and normalises all three page families to ONE
   design system. Override-only: the three source files are untouched
   (drop this file / its enqueue line for instant rollback).
   Landing pages (/ and /whnf2026/) use other class families — unaffected.

   THE UNIFIED SYSTEM
   ------------------
   Palette (AA-safe pairings)
     Primary        Divine Blue  #1E4DB7   (7.5:1 on white — fills w/ white text)
     Primary hover  Deep Blue    #163A8F
     Text navy      #0b2a4d   Ink #1f2937   Muted #4b5563
     Accent         Saffron Gold #F5A623   (7.1:1 vs navy; used for kickers,
                    underlines, hairline borders — never a text-on-white fill)
     Pink           removed from fills/gradients (hairline-only budget: none used)
     Surfaces       #ffffff cards, #f6f8fc section tint, hairline #e5eaf2

   Layout
     Content max-width  1140px   (narrow variant 800px on every family)
     Spacing scale      24 / 40 / 64
     Section rhythm     64px top+bottom desktop, 40px <=980px
     First-content offset after hero = 64px (40px <=980px) on ALL pages

   Hero — identical computed geometry on all 14 inner pages
     display:flex column, justify-content:center, box-sizing:border-box
     min-height 360px desktop / 340px <=980px  -> computed hero height is
     EXACTLY 360px (340px) everywhere: worst-case content (Donate: kicker
     33.5 + H1 53 + rule 20 + sub 16+92 = ~214.5px + 128px padding = 342.5px)
     stays under min-height, so flex centering equalises every page.
     Padding 64px 20px (48px 20px <=980; <=600 responsive.css applies its own
     uniform 56/16/44 — min-height still governs, equality preserved)
     Kicker 13px/600/3px tracking, Saffron Gold
     H1 44px/700/1.2 (34px <=980, 28px <=560), white
     Title rule 84x4px solid Saffron Gold
     Sub 18px/1.7, max-width 680px, margin-top 16px (16px font <=560)

   Headings   H2 32px/700 + 76x4 gold rule (26px <=980) | H3 20px/600
   Body       17px/1.8, paragraph gap 16px
   Cards      radius 16px | border 1px #e5eaf2 | shadow 0 8px 24px
              rgba(11,42,77,.08) | padding 32px (26px 22px <=980)
   Buttons    16px/600, line-height 1.5, padding 13px 30px, border 0,
              radius 999px, fill #1E4DB7, hover #163A8F
              -> computed height 24+13+13 = 50px for EVERY button in a row
   ========================================================================== */

/* ---------- 1. Token overrides (collapse 3 palettes into one) ----------
   Re-declaring the custom properties later in the cascade recolours every
   var()-based rule in all three families: saffron/pink gradients collapse
   to solid Saffron Gold; burnt-orange button fills become Divine Blue.  */
:root {
  --ikm-page-blue: #1E4DB7;   --ikm-p2-blue: #1E4DB7;   --ikm-p3-blue: #1E4DB7;
  --ikm-page-blue-deep: #0b2a4d; --ikm-p2-blue-deep: #0b2a4d; --ikm-p3-blue-deep: #0b2a4d;
  --ikm-page-saffron: #F5A623; --ikm-p2-saffron: #F5A623; --ikm-p3-saffron: #F5A623;
  --ikm-page-saffron-btn: #1E4DB7; --ikm-p2-saffron-btn: #1E4DB7; --ikm-p3-saffron-btn: #1E4DB7;
  --ikm-page-gold: #F5A623;   --ikm-p2-gold: #F5A623;   --ikm-p3-gold: #F5A623;
  --ikm-page-pink: #F5A623;   --ikm-p2-pink: #F5A623;   --ikm-p3-pink: #F5A623;
  --ikm-page-line: #e5eaf2;   --ikm-p2-line: #e5eaf2;   --ikm-p3-line: #e5eaf2;
}

/* ---------- 2. Layout: one content width, one section rhythm ---------- */
.ikm-page-wrap, .ikm-p2-wrap, .ikm-p3-wrap { max-width: 1140px; }
.ikm-page-wrap--narrow, .ikm-p2-wrap--narrow, .ikm-p3-wrap--narrow { max-width: 800px; }
.ikm-page-section, .ikm-p2-section, .ikm-p3-section { padding: 64px 0; }
.ikm-page-section--tint, .ikm-p2-section--tint,
.ikm-p3-section--tint, .ikm-p3-section--sky {
  background: linear-gradient(180deg, #f6f8fc, #ffffff);
}

/* ---------- 3. Hero: identical computed geometry on every page ---------- */
.ikm-page-hero, .ikm-p2-hero, .ikm-p3-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  min-height: 360px;
  padding: 64px 20px;
  text-align: center;
}
.ikm-page-hero h1, .ikm-p2-hero h1, .ikm-p3-hero h1 {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.2;
}
.ikm-page-hero h1::after, .ikm-p2-hero h1::after, .ikm-p3-hero h1::after {
  width: 84px; height: 4px;
  margin: 16px auto 0;
  background: #F5A623;
}
.ikm-page-hero-kicker, .ikm-p2-hero-kicker, .ikm-p3-hero-kicker {
  color: #F5A623;
  margin: 0 0 14px;
}
/* Sub defined for ALL families (pages3 never had one) */
.ikm-page-hero-sub, .ikm-p2-hero-sub, .ikm-p3-hero-sub {
  max-width: 680px;
  margin: 16px auto 0;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.94);
}

/* ---------- 4. One heading scale ---------- */
.ikm-page-h2, .ikm-p2-h2, .ikm-p3-h2 { font-size: 32px; margin: 0 0 12px; }
.ikm-page-h2::after, .ikm-p2-h2::after, .ikm-p3-h2::after { background: #F5A623; }
.ikm-page-h3, .ikm-p2-h3, .ikm-p3-h3 { font-size: 20px; font-weight: 600; }
.ikm-page-lead, .ikm-p2-lead { max-width: 720px; font-size: 18px; line-height: 1.75; }

/* ---------- 5. One body-copy rhythm ---------- */
.ikm-p2-prose p, .ikm-p3-prose p, .ikm-page-doc p {
  font-size: 17px;
  line-height: 1.8;
  margin: 0 0 16px;
}
.ikm-p2-prose p:last-child, .ikm-p3-prose p:last-child,
.ikm-page-doc p:last-child { margin-bottom: 0; }

/* ---------- 6. One card spec ---------- */
.ikm-page-card, .ikm-page-form-card, .ikm-page-pillar, .ikm-page-doc,
.ikm-p2-card, .ikm-p2-member, .ikm-p2-feature, .ikm-p3-card {
  background: #fff;
  border: 1px solid #e5eaf2;      /* border shorthand also clears p3 border-image */
  border-image: none;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(11, 42, 77, 0.08);
}
.ikm-page-card, .ikm-p2-card, .ikm-p3-card,
.ikm-page-form-card, .ikm-page-pillar { padding: 32px; }
/* Members/features keep flush photos (own padding); doc keeps 44/48. */

/* ---------- 7. One button spec (equal 50px computed height in any row) ---- */
.ikm-page-btn, .ikm-p2-btn, .ikm-page-form-card input[type="submit"] {
  background: #1E4DB7;
  color: #fff !important;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  padding: 13px 30px;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(30, 77, 183, 0.28);
}
.ikm-page-btn:hover, .ikm-p2-btn:hover,
.ikm-page-form-card input[type="submit"]:hover {
  background: #163A8F;
  transform: translateY(-2px);
}
.ikm-page-btn:focus-visible, .ikm-p2-btn:focus-visible,
.ikm-page-form-card input[type="submit"]:focus-visible {
  outline: 3px solid rgba(245, 166, 35, 0.85);
  outline-offset: 2px;
}

/* ---------- 8. Recolour hardcoded burnt-orange / pink leftovers ---------- */
.ikm-page-note a:hover, .ikm-page-info-card a:hover,
.ikm-p2-member a:hover, .ikm-p3-link-row a:hover,
.ikm-p3-prose a:hover { color: #163A8F; }
.ikm-page-social a:hover { background: #163A8F; }
.ikm-page-ic { background: #1E4DB7; }              /* was saffron→pink gradient */
.ikm-p2-role { background: #1E4DB7; }              /* was orange→pink gradient  */
.ikm-p3-link-tag { background: #1E4DB7; }          /* was orange→#be185d        */
.ikm-p2-mantra {
  background: linear-gradient(135deg, #0b2a4d, #1E4DB7);  /* was orange/pink glows */
}
.ikm-p2-tl-item::before,
.ikm-p2-tl-item:nth-child(2n)::before,
.ikm-p2-tl-item:nth-child(3n)::before {
  border-color: #F5A623;
  box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.18);
}
.ikm-page-form-card input:focus, .ikm-page-form-card textarea:focus {
  border-color: #1E4DB7;
  box-shadow: 0 0 0 3px rgba(30, 77, 183, 0.16);
}

/* ---------- 9. Responsive ladder (re-declared: this file loads after the
   family files, so their media rules would otherwise lose the cascade) ---- */
@media (max-width: 980px) {
  .ikm-page-hero, .ikm-p2-hero, .ikm-p3-hero { min-height: 340px; padding: 48px 20px; }
  .ikm-page-hero h1, .ikm-p2-hero h1, .ikm-p3-hero h1 { font-size: 34px; }
  .ikm-page-h2, .ikm-p2-h2, .ikm-p3-h2 { font-size: 26px; }
  .ikm-page-section, .ikm-p2-section, .ikm-p3-section { padding: 40px 0; }
  .ikm-page-card, .ikm-p2-card, .ikm-p3-card,
  .ikm-page-form-card, .ikm-page-pillar { padding: 26px 22px; }
  .ikm-page-doc { padding: 28px 22px; }
}
@media (max-width: 560px) {
  .ikm-page-hero h1, .ikm-p2-hero h1, .ikm-p3-hero h1 { font-size: 28px; }
  .ikm-page-hero-sub, .ikm-p2-hero-sub, .ikm-p3-hero-sub { font-size: 16px; }
}