/* ============================================================================
   Tamboli Samaj — Shared Brand System
   ----------------------------------------------------------------------------
   Loaded by ALL hosts (main website, student portal, admin panel) so the
   organisation reads as one institution everywhere.

   Design direction: a traditional Indian community organisation with the
   gravity of a university — deep forest green, antique gold, cream paper,
   serif headings, and generous rules. Deliberately NOT a modern SaaS look:
   no gradient blobs, no glassmorphism, no pill buttons, no neon accents.

   Colour values live here and nowhere else. Each host stylesheet maps its own
   legacy variables onto these tokens.
   ========================================================================== */

:root {
  /* ── Core palette ─────────────────────────────────────────────────── */
  --brand-green:        #14532D;   /* primary institutional green */
  --brand-green-deep:   #0E3B21;   /* masthead / footer ground */
  --brand-green-mid:    #1D6B3B;   /* hover, secondary surfaces */
  --brand-green-soft:   #EAF1EC;   /* tinted panel background */
  --brand-green-line:   #C9D8CE;   /* border on tinted panels */

  --brand-gold:         #B8912F;   /* antique gold accent */
  --brand-gold-deep:    #8E6D1C;   /* gold text on light ground */
  --brand-gold-light:   #D6B25C;   /* gold on dark ground */
  --brand-gold-soft:    #F4EDDC;   /* gold tinted background */

  --brand-cream:        #F7F4EC;   /* page ground */
  --brand-paper:        #FFFDF7;   /* card / panel ground */
  --brand-ink:          #1C2A22;   /* body text */
  --brand-ink-soft:     #3A4A41;   /* secondary text */
  --brand-muted:        #64766D;   /* meta / caption text */
  --brand-line:         #DCE5DC;   /* hairline rule */

  /* ── Legacy aliases ─────────────────────────────────────────────────
     Older stylesheets referenced these names. Keeping the aliases means
     those files continue to work while the palette is unified. */
  --site-green:         var(--brand-green);
  --site-green-deep:    var(--brand-green-deep);
  --site-green-mid:     var(--brand-green-mid);
  --site-gold:          var(--brand-gold);
  --site-gold-light:    var(--brand-gold-light);
  --site-gold-dark:     var(--brand-gold-deep);
  --site-cream:         var(--brand-cream);
  --site-ink:           var(--brand-ink);
  --site-muted:         var(--brand-muted);
  --site-line:          var(--brand-line);

  /* ── Typography ───────────────────────────────────────────────────────
     Two scripts, two matched pairs.

     Latin        Source Serif 4  (editorial)  + Source Sans 3  (interface)
     Devanagari   Noto Serif Devanagari       + Noto Sans Devanagari

     Source Serif and Source Sans were drawn as a family; the Noto faces come
     from the same superfamily lineage. Latin and Devanagari therefore sit
     together without a seam, in either role.

     Serif carries the reading voice: headings and body copy. Sans carries
     the interface voice: navigation, buttons, labels, meta. */
  --font-serif:    'Source Serif 4', 'Noto Serif Devanagari', Georgia, 'Times New Roman', serif;
  --font-serif-de: 'Noto Serif Devanagari', 'Source Serif 4', Georgia, serif;
  --font-sans:     'Source Sans 3', 'Noto Sans Devanagari', system-ui, -apple-system, sans-serif;
  --font-sans-de:  'Noto Sans Devanagari', 'Source Sans 3', system-ui, sans-serif;

  /* ── Type scale ───────────────────────────────────────────────────────
     A 1.320 step, so every level is unmistakably different from the one
     below it. The steps below 1rem are for meta and label text only. */
  --fs-2xs:  0.6875rem;  /*  11px — legal, eyebrow, table meta      */
  --fs-xs:   0.75rem;    /*  12px — captions, meta, badges         */
  --fs-sm:   0.8125rem;  /*  13px — dense UI, table cells           */
  --fs-base: 0.9375rem;  /*  15px — small body, nav, buttons        */
  --fs-md:   1.0625rem;  /*  17px — body copy                       */
  --fs-lg:   1.25rem;    /*  20px — lede, card titles               */
  --fs-xl:   1.5rem;     /*  24px — sub-headings                    */
  --fs-2xl:  2rem;       /*  32px — section heads                   */
  --fs-3xl:  2.625rem;   /*  42px — page titles                     */
  --fs-4xl:  3.375rem;   /*  54px — hero display                    */

  /* Line height by content length: tight for short lines, open for prose. */
  --lh-tight:  1.18;   /* display, headings                        */
  --lh-snug:   1.35;   /* titles, nav, buttons                     */
  --lh-copy:   1.7;    /* body prose                                */
  --lh-loose:  1.8;    /* long-form, Devanagari, light-on-dark     */

  /* ── Measure ──────────────────────────────────────────────────────────
     68ch is the comfortable reading width for this body size. */
  --measure: 68ch;
  --measure-wide: 78ch;

  /* ── Spacing ──────────────────────────────────────────────────────────
     A 1-4-9 rhythm: 4px micro, 16px component, 36px macro. Every gap in
     the system is a multiple of one of these three. */
  --sp-1:  0.25rem;   /*   4px — icon padding, inline gaps        */
  --sp-2:  0.5rem;    /*   8px — tight gaps, label to control      */
  --sp-3:  0.75rem;   /*  12px — inside small components          */
  --sp-4:  1rem;      /*  16px — component padding, card gaps      */
  --sp-5:  1.5rem;    /*  24px — between related blocks            */
  --sp-6:  2rem;      /*  32px — panel padding                     */
  --sp-7:  2.25rem;   /*  36px — section rhythm (the 9 unit)       */
  --sp-8:  3rem;      /*  48px — band padding                      */
  --sp-9:  4rem;      /*  64px — major section break               */
  --sp-10: 5.5rem;    /*  88px — hero band                         */

  /* ── Proportion ────────────────────────────────────────────────────── */
  --brand-radius:    2px;
  --brand-radius-lg: 3px;
  --brand-rule:      1px solid var(--brand-line);
  --brand-rule-gold: 1px solid var(--brand-gold);

  /* The masthead band. One height for the emblem, the wordmark and every
     nav link, so they share an optical line. */
  --masthead-h: 4.75rem;

  /* ── Elevation — restrained. Traditional institutions rely on rules and
        rules of hierarchy rather than drop shadows. */
  --brand-shadow:    0 1px 2px rgba(20, 83, 45, 0.06);
  --brand-shadow-lg: 0 4px 16px rgba(20, 83, 45, 0.10);
}

/* ============================================================================
   Base typography
   ----------------------------------------------------------------------------
   The shared default is the interface voice: sans. The student portal and the
   admin panel are operator tools, and a form or a data table reads better in
   a grotesque than in a serif.

   The public website opts into the editorial voice in its own stylesheet
   (body.site-body), because that surface is read, not operated.
   ========================================================================== */

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-copy);
  color: var(--brand-ink);
  background-color: var(--brand-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: lining-nums;
}

/* Prose is the reading surface: cap the measure, keep the leading open. */
p {
  max-width: var(--measure);
  margin-bottom: var(--sp-5);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--brand-ink);
  letter-spacing: -0.011em;
  text-wrap: balance;
}

/* Devanagari runs slightly larger optically than Latin at the same size, so
   it gets a little more size and a looser leading. The family is NOT
   switched here: the font stacks already list the Devanagari face after the
   Latin one, so the browser picks the right face per character. Overriding
   the family would force Latin text in a Devanagari cut. */
/* :lang(hi) also matches every descendant of <html lang="hi">. An em-based
   increase there compounds at each nesting level and blows up nav and cards. */
[lang="hi"]:not(html) {
  line-height: var(--lh-loose);
  letter-spacing: 0;
}

/* Interface chrome: navigation, buttons, labels, tables. */
.btn, .nav-link, .form-label, .form-control, .form-select,
.badge, .table, .card-title, .breadcrumb, .dropdown-item,
input, select, textarea, button {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
}

/* iOS Safari zooms the viewport when a field under 16px is focused, which
   breaks the layout and leaves the user pinching back out. Every form
   control goes to 16px on narrow screens. The type selector has to win, so
   the size is set here rather than on a utility class. */
@media (max-width: 639.98px) {
  input, select, textarea,
  .form-control, .form-select, .form-control:focus, .form-select:focus {
    font-size: 1rem;
  }
}

/* Opt-in class for prose blocks that must not be capped. */
.text-wide { max-width: none; }
.text-measure { max-width: var(--measure); }

/* ============================================================================
   Bootstrap component overrides
   ----------------------------------------------------------------------------
   Bootstrap ships a blue accent. These overrides move the handful of
   components that appear on every host onto the institutional palette, so no
   screen mixes Bootstrap blue with the brand green.
   ========================================================================== */

.form-check-input:checked {
  background-color: var(--brand-green);
  border-color: var(--brand-green);
}

.form-check-input:focus,
.form-check-input:focus-visible {
  border-color: var(--brand-green);
  box-shadow: 0 0 0 0.25rem rgba(20, 83, 45, 0.18);
}

.form-switch .form-check-input:checked {
  background-color: var(--brand-green);
  border-color: var(--brand-green);
}

.btn-primary {
  --bs-btn-bg: var(--brand-green);
  --bs-btn-border-color: var(--brand-green);
  --bs-btn-hover-bg: var(--brand-green-deep);
  --bs-btn-hover-border-color: var(--brand-green-deep);
  --bs-btn-active-bg: var(--brand-green-deep);
  --bs-btn-active-border-color: var(--brand-green-deep);
  --bs-btn-disabled-bg: var(--brand-muted);
  --bs-btn-disabled-border-color: var(--brand-muted);
  --bs-btn-focus-shadow-rgb: 20, 83, 45;
}

.btn-outline-primary {
  --bs-btn-color: var(--brand-green);
  --bs-btn-border-color: var(--brand-green);
  --bs-btn-hover-bg: var(--brand-green);
  --bs-btn-hover-border-color: var(--brand-green);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--brand-green-deep);
  --bs-btn-active-border-color: var(--brand-green-deep);
  --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: 20, 83, 45;
}

.btn-success {
  --bs-btn-bg: var(--brand-green-mid);
  --bs-btn-border-color: var(--brand-green-mid);
  --bs-btn-hover-bg: var(--brand-green);
  --bs-btn-hover-border-color: var(--brand-green);
  --bs-btn-active-bg: var(--brand-green);
  --bs-btn-active-border-color: var(--brand-green);
  --bs-btn-focus-shadow-rgb: 29, 107, 59;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-green);
  box-shadow: 0 0 0 0.2rem rgba(20, 83, 45, 0.15);
}

.form-control,
.form-select {
  border-color: var(--brand-line);
  color: var(--brand-ink);
}

.form-control:focus,
.form-select:focus {
  color: var(--brand-ink);
}

.progress-bar {
  background-color: var(--brand-green);
}

.badge.text-bg-primary,
.badge.bg-primary {
  background-color: var(--brand-green) !important;
  color: #fff;
}

.text-primary {
  color: var(--brand-green) !important;
}

a {
  color: var(--brand-green);
}

a:hover {
  color: var(--brand-green-deep);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--brand-green-deep);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

h1, .h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); }
h2, .h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem); }
h3, .h3 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem); }
h4, .h4 { font-size: 1.2rem; }

/* Eyebrow / kicker label — a small, letterspaced, uppercase rule above a
   heading. This is the single strongest signal of an institutional site. */
.brand-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-gold-deep);
  margin-bottom: 0.5rem;
  display: block;
}

.brand-eyebrow--light {
  color: var(--brand-gold-light);
}

/* A short centred rule with a diamond, used to close a section. */
.brand-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 1.5rem 0;
  color: var(--brand-gold);
}

.brand-rule::before,
.brand-rule::after {
  content: '';
  height: 1px;
  width: clamp(3rem, 8vw, 6rem);
  background: linear-gradient(to right, transparent, var(--brand-gold));
}

.brand-rule::after {
  background: linear-gradient(to left, transparent, var(--brand-gold));
}

.brand-rule__mark {
  font-size: 0.6rem;
  line-height: 1;
}

.brand-rule--start {
  justify-content: flex-start;
}

.brand-rule--start::before { display: none; }

/* ============================================================================
   Buttons — square-ish, ruled, never pill-shaped
   ========================================================================== */

.brand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.72rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--brand-radius);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.brand-btn--primary {
  background: var(--brand-green);
  color: #fff;
  border-color: var(--brand-green);
}

.brand-btn--primary:hover,
.brand-btn--primary:focus-visible {
  background: var(--brand-green-deep);
  border-color: var(--brand-green-deep);
  color: #fff;
}

.brand-btn--gold {
  background: var(--brand-gold);
  color: var(--brand-green-deep);
  border-color: var(--brand-gold);
}

.brand-btn--gold:hover,
.brand-btn--gold:focus-visible {
  background: var(--brand-gold-light);
  border-color: var(--brand-gold-light);
  color: var(--brand-green-deep);
}

.brand-btn--outline {
  background: transparent;
  color: var(--brand-green);
  border-color: var(--brand-green);
}

.brand-btn--outline:hover,
.brand-btn--outline:focus-visible {
  background: var(--brand-green);
  color: #fff;
}

.brand-btn--outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

.brand-btn--outline-light:hover,
.brand-btn--outline-light:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--brand-gold-light);
  color: #fff;
}

.brand-btn--sm {
  font-size: 0.72rem;
  padding: 0.5rem 1rem;
}

/* ============================================================================
   Panels — ruled cards, not floating glass
   ========================================================================== */

.brand-panel {
  background: var(--brand-paper);
  border: var(--brand-rule);
  border-radius: var(--brand-radius);
  padding: 1.75rem;
}

/* Equal-height cards in a row opt in with Bootstrap's `h-100`. The base
   panel must not set a height: several panels stacked in one column would
   each resolve to the full column height and stretch the page. */

.brand-panel--tinted {
  background: var(--brand-green-soft);
  border-color: var(--brand-green-line);
}

.brand-panel--gold {
  background: var(--brand-gold-soft);
  border-color: rgba(184, 145, 47, 0.4);
}

/* A panel with a vertical gold rule on the left edge. */
.brand-panel--ruled {
  border-left: 3px solid var(--brand-gold);
}

.brand-panel__title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--brand-green-deep);
  margin-bottom: 0.5rem;
}

.brand-panel__meta {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-muted);
}

/* ============================================================================
   Tables — ruled, ledger-like
   ========================================================================== */

.brand-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.brand-table th {
  text-align: left;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-mold-deep, var(--brand-green-deep));
  padding: 0.75rem 1rem;
  border-bottom: 2px solid var(--brand-green);
  background: var(--brand-green-soft);
}

.brand-table td {
  padding: 0.85rem 1rem;
  border-bottom: var(--brand-rule);
  color: var(--brand-ink-soft);
  vertical-align: top;
}

.brand-table tr:last-child td {
  border-bottom: none;
}

/* ============================================================================
   Utility
   ========================================================================== */

.brand-shell {
  max-width: 1140px;
}

.brand-measure {
  max-width: 68ch;
}

.brand-muted {
  color: var(--brand-muted);
}

.brand-gold {
  color: var(--brand-gold-deep);
}

.brand-link {
  color: var(--brand-green);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--brand-gold);
  transition: color 0.2s ease;
}

.brand-link:hover {
  color: var(--brand-green-deep);
  text-decoration-color: var(--brand-green-deep);
}

/* Visible focus for keyboard users on every interactive element. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}

@media print {
  .brand-no-print {
    display: none !important;
  }
}