/*
Theme Name: JMCL 2026
Theme URI: https://jmcl.org.np/
Author: Aarush Creation
Author URI: https://aarushcreation.com/
Description: Bilingual (Nepali/English) custom theme for Jaleshwor Multipurpose Co-operative Ltd., Birendranagar-3, Mulpani, Surkhet. Savings, credit, agriculture support, cooperative education and member welfare.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jmcl
Tags: cooperative, finance, bilingual, accessibility-ready, custom-theme
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Palette derived from the JMCL logo. Values marked "ink" are the
   text-safe variants: the brand hues below fail WCAG AA at body-text size,
   so decorative fills use the brand hue and any text/fill carrying small
   text uses the -ink variant. Verified ratios noted inline.
   ========================================================================== */
:root {
  /* Brand — decorative surfaces, borders, large type */
  --jm-dark:        #0B3A5B; /* 11.86:1 vs #fff */
  --jm-dark-2:      #072C46;
  --jm-dark-3:      #052236;
  --jm-primary:     #0F6CA8; /*  5.63:1 vs #fff */
  --jm-primary-600: #0C5A8D;
  --jm-primary-700: #074A76;
  --jm-accent:      #1FA35C; /*  3.26:1 vs #fff — decorative only */
  --jm-accent-ink:  #157F45; /*  5.06:1 vs #fff — text / filled buttons */
  --jm-cta:         #E53935; /*  4.23:1 vs #fff — decorative only */
  --jm-cta-ink:     #C62828; /*  5.62:1 vs #fff — text / filled buttons */
  --jm-cta-hover:   #A81E1E;
  --jm-heading:     #0B4F7C; /*  8.66:1 vs #fff */

  /* Neutrals */
  --jm-text:        #12171A;
  --jm-muted:       #50606B; /*  7.0:1 vs #fff */
  --jm-muted-soft:  #6B7A85;
  --jm-tint:        #F5FAFD;
  --jm-tint-2:      #EAF3F9;
  --jm-surface:     #FFFFFF;
  --jm-border:      #DEE7EE;
  --jm-border-strong:#C3D2DE;

  /* On-dark */
  --jm-on-dark:      #FFFFFF;
  --jm-on-dark-soft: rgba(255,255,255,.80);
  --jm-on-dark-mute: rgba(255,255,255,.62);
  --jm-on-dark-line: rgba(255,255,255,.16);
  --jm-on-dark-fill: rgba(255,255,255,.07);

  /* Status */
  --jm-success: #157F45;
  --jm-warning: #9A6206;
  --jm-danger:  #C62828;
  --jm-info:    #0C5A8D;

  /* Typography
     Poppins carries no Devanagari glyphs at all, so a Nepali heading set in
     Poppins was already falling back to Mukta silently, per browser, with
     whatever metrics that browser chose. Nepali pages now ask for Mukta
     explicitly (see body.jm-lang-ne below) so weight and rhythm are ours. */
  --jm-font-head: 'Poppins', 'Mukta', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --jm-font-body: 'Mukta', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --jm-fs-xs:   .8125rem;  /* 13 */
  --jm-fs-sm:   .875rem;   /* 14 */
  --jm-fs-base: 1.0625rem; /* 17 */
  --jm-fs-md:   1.125rem;  /* 18 */
  --jm-fs-lg:   1.25rem;   /* 20 */
  --jm-fs-xl:   1.5rem;    /* 24 */
  --jm-fs-h3:   clamp(1.25rem, 1.05rem + .8vw, 1.5rem);
  --jm-fs-h2:   clamp(1.6rem, 1.25rem + 1.6vw, 2.35rem);
  --jm-fs-h1:   clamp(2rem, 1.45rem + 2.6vw, 3.25rem);
  --jm-lh-body: 1.7;
  --jm-lh-head: 1.22;

  /* Spacing — 4pt rhythm */
  --jm-s1: .25rem;  --jm-s2: .5rem;   --jm-s3: .75rem;  --jm-s4: 1rem;
  --jm-s5: 1.25rem; --jm-s6: 1.5rem;  --jm-s8: 2rem;    --jm-s10: 2.5rem;
  --jm-s12: 3rem;   --jm-s16: 4rem;   --jm-s20: 5rem;
  --jm-section: clamp(3.25rem, 2rem + 5vw, 5.5rem);
  --jm-gutter: 1rem;
  --jm-maxw: 1200px;

  /* Shape */
  --jm-r-sm: 8px;  --jm-r: 12px;  --jm-r-lg: 16px;  --jm-r-xl: 22px;  --jm-r-pill: 999px;

  /* Elevation scale — consistent, never ad hoc */
  --jm-e1: 0 1px 2px rgba(11,58,91,.06), 0 1px 3px rgba(11,58,91,.05);
  --jm-e2: 0 2px 6px rgba(11,58,91,.06), 0 6px 16px rgba(11,58,91,.06);
  --jm-e3: 0 6px 14px rgba(11,58,91,.08), 0 18px 40px rgba(11,58,91,.08);
  --jm-e4: 0 18px 50px rgba(11,58,91,.16);

  /* Motion — one shared rhythm; exits ~65% of entrances */
  --jm-ease: cubic-bezier(.22,.61,.36,1);
  --jm-ease-out: cubic-bezier(.16,1,.3,1);
  --jm-t-fast: 140ms;
  --jm-t: 220ms;
  --jm-t-slow: 420ms;

  /* Layering scale */
  /* A scrim must sit BELOW the panel it dims. These were the wrong way round:
     the scrim covered the drawer, so every tap on a menu item landed on the
     scrim and closed the menu instead of following the link. */
  --jm-z-base: 1; --jm-z-sticky: 40; --jm-z-scrim: 80; --jm-z-drawer: 90;
  --jm-z-overlay: 95; --jm-z-modal: 100; --jm-z-toast: 120; --jm-z-skip: 1000;

  --jm-header-h: 0px; /* set by JS for sticky offsets */
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--jm-header-h) + 1rem); }
body {
  margin: 0;
  background: var(--jm-surface);
  color: var(--jm-text);
  font-family: var(--jm-font-body);
  font-size: var(--jm-fs-base);
  line-height: var(--jm-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* ---- Nepali pages: Mukta everywhere ----
   Devanagari stacks matras above and below the base line, so the tight heading
   leading that suits Poppins clips them. Nepali headings get more room. */
body.jm-lang-ne {
  --jm-font-head: 'Mukta', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --jm-font-body: 'Mukta', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --jm-lh-head: 1.38;
  --jm-lh-body: 1.75;
  font-feature-settings: "kern" 1;
}
/* Latin runs inside Nepali pages — phone numbers, PDF, EMI, email addresses —
   stay in Mukta too rather than switching face mid-sentence. Mukta's Latin is
   a complete set, so nothing falls through. */
body.jm-lang-ne .jm-num,
body.jm-lang-ne input,
body.jm-lang-ne select,
body.jm-lang-ne textarea { font-family: var(--jm-font-body); }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--jm-font-head);
  color: var(--jm-heading);
  line-height: var(--jm-lh-head);
  margin: 0 0 var(--jm-s4);
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: var(--jm-fs-h1); }
h2 { font-size: var(--jm-fs-h2); }
h3 { font-size: var(--jm-fs-h3); font-weight: 600; }
h4 { font-size: var(--jm-fs-lg); font-weight: 600; }
p { margin: 0 0 var(--jm-s4); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }
a { color: var(--jm-primary); text-decoration: none; transition: color var(--jm-t) var(--jm-ease); }
a:hover { color: var(--jm-primary-600); text-decoration: underline; }
img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
ul, ol { padding-inline-start: 1.25rem; }
hr { border: 0; border-top: 1px solid var(--jm-border); margin: var(--jm-s8) 0; }
table { border-collapse: collapse; width: 100%; }
figure { margin: 0; }
strong, b { font-weight: 700; }
small { font-size: var(--jm-fs-sm); }
::selection { background: var(--jm-primary); color: #fff; }

/* Long tokens (URLs, IDs, member numbers) reflow rather than overflow */
.jm-wrap-any { overflow-wrap: anywhere; }
/* Tabular figures everywhere numbers are compared */
.jm-num, td.jm-amount, .jm-stat__value, .jm-emi__value { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Focus — visible, 3:1, never removed */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--jm-cta-ink);
  outline-offset: 2px;
  border-radius: 3px;
}
.jm-on-dark :focus-visible, .jm-topbar :focus-visible, .jm-navbar :focus-visible, .jm-footer :focus-visible {
  outline-color: #FFD34D;
}

/* Screen-reader only */
.jm-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.jm-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: var(--jm-z-skip);
  background: var(--jm-cta-ink); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 var(--jm-r) 0; font-weight: 600;
}
.jm-skip-link:focus { left: 0; text-decoration: none; }

/* Reduced motion — render final state, never block content */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .jm-js .jm-reveal { opacity: 1 !important; transform: none !important; }
}