/* ============================================================
   NEST, Nepali Society of Thunder Bay
   Global Stylesheet
   UPDATED: 2026-08-07
   Colour palette derived from the NEST logo (Nepali flag colours)
   ============================================================
   HOW THIS FILE IS ORGANISED (read this before editing)

   1. DESIGN TOKENS. Everything visual is driven by CSS custom properties
      ("design tokens") declared in the :root block immediately below. No rule
      further down hard-codes a brand colour, they all say var(--red),
      var(--navy), var(--gold) and so on.
      => To change a colour everywhere, change it ONCE in :root. Do not search
         and replace hex values through the file.

   2. THE BRAND COLOURS live in that first :root block and come from the NEST
      badge and the Nepali flag. They are not arbitrary:
        --red     #B31B1B   Nepali flag crimson. Links, primary buttons, accents.
        --navy    #1A2744   header, footer, all headings.
        --gold    #C8960C   the badge rim. Focus rings and highlights.
        --green   #2D6A4F   used sparingly for "safe / confirmed" states.
        --cream   #FAF7F2   the warm alternate section background.
      Treat these as the organisation's identity, not as taste.

   3. THERE IS NO DARK THEME on this site, and no theme toggle. One palette.

   4. TWO STYLESHEETS, IN THIS ORDER, on every page:
        css/style.css   this file. The whole design system.
        css/pages.css   later passes, loaded AFTER this file, so on a tie it
                        wins: density and mobile tuning, the checkbox/radio
                        alignment fix, the real logo emblem, the homepage
                        social panel, the land acknowledgement.
      If a rule here seems to have no effect, check pages.css before debugging.

   5. FILE MAP, in source order (each banner below is one of these):
        :root ................ design tokens
        RESET & BASE ......... box-sizing, body, links, images
        TYPOGRAPHY ........... h1-h6, p, .lead
        LAYOUT UTILITIES ..... .container, .section, .grid-*, .mt-*, .text-*
        COMPONENTS ........... header/nav, hero, buttons, cards, page hero,
                               section titles, social banner, announcement,
                               stats, values, event cards, board cards,
                               checklists, forms, legal pages, membership,
                               payment box, CTA, quote, alerts, accordion,
                               tabs, footer, mobile nav, back to top
        RESPONSIVE ........... breakpoints
        PRINT ................ @media print
        2026 ACCESSIBILITY PASS ... skip link, focus rings, .visually-hidden,
                               field labels, accordion button reset, small
                               screens, reduced motion
        ACCESSIBILITY CONTRAST FIX - 2026-08-07 ... one dated override. Read the
                               note above it before deleting anything.

   6. BREAKPOINTS used across the two files: 1024px, 900px, 768px, 480px,
      420px, 360px. 768px is the important one: that is where the desktop menu
      is swapped for the hamburger and the mobile panel. There is no framework
      and no build step, so there is nothing to recompile. Save and re-upload.

   7. The only external assets the site loads are the Google Fonts stylesheet
      (Merriweather + Inter) and, on the home page only, the Facebook page
      plugin iframe. No CSS framework, no CDN JavaScript.
   ============================================================ */

/* ============================================================
   DESIGN TOKENS (the source of truth for the palette)
   Change a colour here and it changes everywhere on the site.
   ============================================================ */
:root {
  --red:       #B31B1B;
  --red-dark:  #8C1414;
  --red-light: #F5E6E6;
  --navy:      #1A2744;
  --navy-mid:  #253562;
  --navy-light:#E8ECF5;
  --gold:      #C8960C;
  --gold-light:#FDF3D0;
  --green:     #2D6A4F;
  --cream:     #FAF7F2;
  --white:     #FFFFFF;
  --gray-100:  #F4F4F4;
  --gray-200:  #E8E8E8;
  --gray-400:  #9E9E9E;
  --gray-700:  #444444;
  --gray-900:  #1A1A1A;
  --shadow-sm: 0 2px 8px rgba(26,39,68,0.08);
  --shadow-md: 0 4px 20px rgba(26,39,68,0.14);
  --shadow-lg: 0 8px 40px rgba(26,39,68,0.18);
  --radius:    8px;
  --radius-lg: 16px;
  --transition: 0.2s ease;
}

/* ============================================================
   RESET & BASE
   A deliberately tiny reset. Note that ul has its bullets removed globally,
   which is why several components draw their own markers (.checklist .check,
   .bullets, .resource-list) instead of relying on list-style.
   ============================================================ */
/* ---------- RESET & BASE ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--gray-900);
  background: var(--white);
  line-height: 1.65;
}

img { max-width: 100%; display: block; }
a { color: var(--red); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--red-dark); }
ul { list-style: none; }

/* ============================================================
   TYPOGRAPHY
   Two families only: Merriweather (serif) for every heading, Inter (sans) for
   body text. Both come from the Google Fonts link in each page's <head>. To
   swap a font you must change it in BOTH places: the <head> link on all 20
   pages, and the font-family rules here.
   Heading sizes use clamp() so they scale with the viewport without extra
   breakpoints. Headings are always --navy, which is what makes the site feel
   calm rather than shouty. The Nepali (Devanagari) text in the logo and the
   value cards falls back to the system font, that is intentional.
   ============================================================ */
/* ---------- TYPOGRAPHY ---------- */
h1,h2,h3,h4,h5,h6 {
  font-family: 'Merriweather', 'Georgia', serif;
  line-height: 1.25;
  color: var(--navy);
}
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.7rem); }
h4 { font-size: 1.15rem; }
p  { margin-bottom: 1rem; }
.lead { font-size: 1.15rem; color: var(--gray-700); }

/* ============================================================
   LAYOUT UTILITIES
   .container         full-width wrapper, capped at 1180px
   .container--narrow reading column, capped at 780px (prose, forms, legal)
   .section           standard vertical rhythm. .section--sm is the tight one.
   .section--cream / --navy / --red   the alternating background bands
   .grid-2/3/4        card grids. They collapse in the RESPONSIVE block below.
   .mt-* / .mb-*      spacing helpers used inline in the HTML.
   .text-center, .text-white, .flex-center, .flex-between   small helpers.
   Other utilities live in the accessibility pass at the bottom of this file:
   .skip-link, .visually-hidden, .field-label.
   NOTE: pages.css re-declares .section padding to a tighter value and then
   again for phones. If your spacing change here seems ignored, that is why.
   ============================================================ */
/* ---------- LAYOUT UTILITIES ---------- */
.container { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }
.container--narrow { max-width: 780px; margin: 0 auto; padding: 0 1.5rem; }
.section { padding: 5rem 0; }
.section--sm { padding: 3rem 0; }
.section--cream { background: var(--cream); }
.section--navy { background: var(--navy); color: var(--white); }
.section--navy h2, .section--navy h3 { color: var(--white); }
.section--red { background: var(--red); color: var(--white); }
.section--red h2 { color: var(--white); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.text-center { text-align: center; }
.text-white { color: var(--white); }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-4 { margin-bottom: 2rem; }

/* ============================================================
   COMPONENTS start here.
   Everything below is a named block of UI keyed off a class used in the HTML:
   header/nav, hero, buttons, cards, page hero, section titles, social banner,
   announcement strip, stats, values, event cards, board cards, checklists,
   forms, legal pages, membership tiers, payment box, CTA, quote, alerts,
   accordion, tabs, footer, mobile nav, back to top.
   Search the class name to find every page that uses it before changing it.
   ============================================================ */
/* ---------- HEADER / NAV ---------- */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--navy);
  box-shadow: var(--shadow-md);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; gap: 2rem;
}

.site-logo {
  display: flex; align-items: center; gap: 0.75rem;
  font-family: 'Merriweather', serif;
  font-size: 1.25rem; font-weight: 700;
  color: var(--white);
  text-decoration: none;
  flex-shrink: 0;
}
.site-logo:hover { color: var(--gold); }

.logo-emblem {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--red);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 900; color: var(--white);
  font-family: 'Merriweather', serif;
  border: 2px solid var(--gold);
  flex-shrink: 0;
}

.logo-text { display: flex; flex-direction: column; line-height: 1.1; }
/* NEST wordmark: Yatra One, the house title face for all Nepali-facing work.
   Single weight only (400), so never ask for bold here or the browser fakes
   it and the letterforms thicken unevenly. The serif fallbacks keep the
   header readable in the moment before the web font arrives. */
.logo-text .name { font-family: 'Yatra One', 'Merriweather', Georgia, serif; font-weight: 400; font-size: 1.35rem; letter-spacing: 0.01em; color: var(--white); }
.logo-text .tagline { font-size: 0.65rem; color: var(--gold); letter-spacing: 0.08em; font-family: sans-serif; font-weight: 400; }

.main-nav { display: flex; align-items: center; gap: 0.25rem; }
.main-nav a {
  color: rgba(255,255,255,0.85);
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  transition: all var(--transition);
}
.main-nav a:hover, .main-nav a.active {
  color: var(--white);
  background: rgba(255,255,255,0.12);
}

.nav-cta {
  background: var(--red) !important;
  color: var(--white) !important;
  border-radius: var(--radius) !important;
  padding: 0.5rem 1.1rem !important;
  font-weight: 600 !important;
}
.nav-cta:hover { background: var(--red-dark) !important; }

.hamburger {
  display: none;
  background: none; border: none; cursor: pointer;
  flex-direction: column; gap: 5px; padding: 4px;
}
.hamburger span {
  display: block; width: 24px; height: 2px;
  background: var(--white); border-radius: 2px;
  transition: all var(--transition);
}

/* ---------- HERO ---------- */
.hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 60%, #2a3d7a 100%);
  color: var(--white);
  padding: 6rem 0 5rem;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 3rem; align-items: center;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(200,150,12,0.2); border: 1px solid rgba(200,150,12,0.4);
  color: var(--gold); border-radius: 100px;
  padding: 0.35rem 1rem; font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.hero h1 { color: var(--white); margin-bottom: 1.25rem; }
.hero h1 em { color: var(--gold); font-style: normal; }
.hero .lead { color: rgba(255,255,255,0.85); font-size: 1.1rem; margin-bottom: 2rem; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-lg);
  padding: 2rem;
  backdrop-filter: blur(10px);
}
.hero-card h3 { color: var(--gold); margin-bottom: 1rem; font-size: 1.1rem; }
.hero-card ul { display: flex; flex-direction: column; gap: 0.75rem; }
.hero-card ul li {
  display: flex; align-items: flex-start; gap: 0.75rem;
  color: rgba(255,255,255,0.9); font-size: 0.95rem;
}
.hero-card ul li .icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 0.1rem; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600; font-size: 0.95rem;
  cursor: pointer; border: 2px solid transparent;
  transition: all var(--transition); text-decoration: none;
}
.btn-primary { background: var(--red); color: var(--white); }
.btn-primary:hover { background: var(--red-dark); color: var(--white); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-secondary { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.5); }
.btn-secondary:hover { background: rgba(255,255,255,0.1); color: var(--white); border-color: var(--white); }
.btn-outline { background: transparent; color: var(--red); border-color: var(--red); }
.btn-outline:hover { background: var(--red); color: var(--white); }
.btn-gold { background: var(--gold); color: var(--white); }
.btn-gold:hover { background: #a37a0a; color: var(--white); }
.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--navy-mid); color: var(--white); }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.85rem; }
.btn-lg { padding: 1rem 2rem; font-size: 1.05rem; }

/* ---------- CARDS ---------- */
.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 2rem;
  border: 1px solid var(--gray-200);
  transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.card h3 { margin-bottom: 0.5rem; }
.card h4 { margin-bottom: 0.5rem; color: var(--navy); }
.card p { color: var(--gray-700); margin-bottom: 0; }

.card--red-top { border-top: 4px solid var(--red); }
.card--navy-top { border-top: 4px solid var(--navy); }
.card--gold-top { border-top: 4px solid var(--gold); }

/* ---------- PAGE HERO (inner pages) ---------- */
.page-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  color: var(--white);
  padding: 4rem 0 3rem;
  text-align: center;
}
.page-hero h1 { color: var(--white); margin-bottom: 0.75rem; }
.page-hero p { color: rgba(255,255,255,0.85); font-size: 1.1rem; }
.breadcrumb {
  display: flex; align-items: center; justify-content: center;
  gap: 0.5rem; font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 1rem;
}
.breadcrumb a { color: var(--gold); }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb span { color: rgba(255,255,255,0.4); }

/* ---------- SECTION TITLES ---------- */
.section-title { text-align: center; margin-bottom: 3rem; }
.section-title h2 { margin-bottom: 0.75rem; }
.section-title p { color: var(--gray-700); max-width: 640px; margin: 0 auto; font-size: 1.05rem; }
.section-title .subtitle {
  display: inline-block; color: var(--red);
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 0.5rem;
}

/* ---------- SOCIAL BANNER ---------- */
.social-banner {
  background: var(--navy-light);
  border-bottom: 3px solid var(--red);
  padding: 0.75rem 0;
}
.social-banner-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 1.5rem; flex-wrap: wrap;
  font-size: 0.88rem; color: var(--navy);
}
.social-banner a {
  display: flex; align-items: center; gap: 0.4rem;
  color: var(--navy); font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
  border: 1px solid transparent;
  transition: all var(--transition);
}
.social-banner a:hover { background: var(--white); border-color: var(--navy); }
.social-banner .ig { color: #E1306C; }
.social-banner .fb { color: #1877F2; }
.social-banner .email { color: var(--navy); }

/* ---------- ANNOUNCEMENT STRIPE ---------- */
.announcement {
  background: var(--red);
  color: var(--white);
  text-align: center;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
}
.announcement a { color: var(--gold); font-weight: 700; }
.announcement a:hover { color: var(--white); }

/* ---------- STATS BAR ---------- */
.stats-bar { padding: 3rem 0; background: var(--cream); }
.stats-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 2rem; text-align: center;
}
.stat-item h3 { font-size: 2.5rem; color: var(--red); margin-bottom: 0.25rem; }
.stat-item p { color: var(--gray-700); font-size: 0.9rem; margin: 0; }

/* ---------- VALUES SECTION ---------- */
.values-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
.value-card {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
  border-bottom: 4px solid var(--red);
}
.value-card .val-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.value-card h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.value-card .nepali { color: var(--gray-400); font-size: 0.85rem; font-style: italic; margin-bottom: 0.5rem; display: block; }
.value-card p { font-size: 0.9rem; color: var(--gray-700); margin: 0; }

/* ---------- EVENT CARDS ---------- */
.event-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}
.event-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.event-card-header {
  background: var(--navy);
  color: var(--white);
  padding: 1.25rem 1.5rem;
  display: flex; align-items: center; gap: 1rem;
}
.event-date-badge {
  background: var(--red);
  border-radius: var(--radius);
  padding: 0.4rem 0.75rem;
  text-align: center; min-width: 56px;
}
.event-date-badge .month { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.85; }
.event-date-badge .day { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.event-card-header h3 { font-size: 1rem; color: var(--white); margin: 0; }
.event-card-header p { font-size: 0.8rem; color: rgba(255,255,255,0.7); margin: 0; }
.event-card-body { padding: 1.25rem 1.5rem; }
.event-card-body p { color: var(--gray-700); font-size: 0.9rem; margin-bottom: 0.75rem; }

/* ---------- BOARD CARDS ---------- */
.board-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
.board-card { text-align: center; }
.board-avatar {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--navy-light);
  margin: 0 auto 0.75rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; font-weight: 700; color: var(--navy);
  border: 3px solid var(--red);
  font-family: 'Merriweather', serif;
}
.board-card h4 { font-size: 0.95rem; margin-bottom: 0.2rem; color: var(--navy); }
.board-card .role { font-size: 0.8rem; color: var(--red); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- CHECKLIST / RESOURCES ---------- */
.checklist { display: flex; flex-direction: column; gap: 0.6rem; }
.checklist li {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--gray-200);
  font-size: 0.95rem;
}
.checklist li:last-child { border-bottom: none; }
.checklist li .check { color: var(--green); font-size: 1rem; flex-shrink: 0; margin-top: 0.1rem; }

.resource-table {
  width: 100%; border-collapse: collapse;
  font-size: 0.9rem; background: var(--white);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.resource-table th {
  background: var(--navy); color: var(--white);
  padding: 0.85rem 1rem; text-align: left;
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em;
}
.resource-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--gray-200); }
.resource-table tr:last-child td { border-bottom: none; }
.resource-table tr:hover td { background: var(--cream); }
.resource-table a { font-weight: 500; }

/* ============================================================
   FORMS
   Used by the five Web3Forms forms (contact, membership, volunteer, sponsorship,
   BBQ RSVP). Layout only, no behaviour.
   .form-group input { width:100% } is the base rule, and it used to stretch
   checkboxes and radios across the row. THE FIX IS IN pages.css, under the
   "FORM FIX (pass 3)" banner, which restores natural sizing for
   input[type=checkbox] and input[type=radio] and lays out .checkbox-item as a
   flex row. Do not re-broaden the width rule here without checking that.
   .form-group input:focus sets outline:none, so a visible keyboard focus ring
   is restored at matching specificity in the accessibility pass at the bottom
   of this file. Both halves must stay.
   ============================================================ */
/* ---------- FORMS ---------- */
.form-page { padding: 3rem 0; }
.form-wrap {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 2.5rem;
  border: 1px solid var(--gray-200);
}
.form-wrap h2 { margin-bottom: 0.5rem; }
.form-intro {
  background: var(--navy-light);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.75rem;
  font-size: 0.92rem; color: var(--gray-700);
}
.form-wrap .notice {
  background: var(--red-light);
  border-left: 4px solid var(--red);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.75rem;
  font-size: 0.9rem;
}
.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block; margin-bottom: 0.4rem;
  font-size: 0.9rem; font-weight: 600; color: var(--navy);
}
.form-group .required-star { color: var(--red); }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: 0.95rem; font-family: inherit;
  color: var(--gray-900);
  background: var(--white);
  transition: border-color var(--transition);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(26,39,68,0.1);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-group .hint { font-size: 0.8rem; color: var(--gray-400); margin-top: 0.3rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.checkbox-group { display: flex; flex-direction: column; gap: 0.5rem; }
.checkbox-item { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; }
.checkbox-item input[type="checkbox"] { margin-top: 0.2rem; flex-shrink: 0; accent-color: var(--red); }
.form-consent {
  background: var(--gold-light);
  border: 1.5px solid var(--gold);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-top: 1.5rem;
}
.form-consent label { font-size: 0.88rem; color: var(--gray-700); font-weight: 400; }
.form-submit { margin-top: 1.5rem; }
.form-submit .btn { width: 100%; justify-content: center; }

/* ---------- WAIVER / LEGAL PAGES ---------- */
.legal-page { padding: 4rem 0; }
.legal-page h1 { margin-bottom: 0.5rem; }
.legal-meta { color: var(--gray-400); font-size: 0.85rem; margin-bottom: 2.5rem; }
.legal-section { margin-bottom: 2.5rem; }
.legal-section h2 { font-size: 1.25rem; color: var(--navy); border-bottom: 2px solid var(--gray-200); padding-bottom: 0.5rem; margin-bottom: 1rem; }
.legal-section h3 { font-size: 1.05rem; color: var(--red); margin: 1rem 0 0.5rem; }
.legal-section ul, .legal-section ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.legal-section ul li, .legal-section ol li { margin-bottom: 0.4rem; font-size: 0.95rem; }
.legal-section ul { list-style: disc; }
.legal-section ol { list-style: decimal; }
.legal-notice {
  background: var(--red-light);
  border-left: 4px solid var(--red);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
  font-weight: 600;
}
.legal-notice.info {
  background: var(--navy-light);
  border-left-color: var(--navy);
}

/* ---------- MEMBERSHIP TIERS ---------- */
.membership-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; max-width: 800px; margin: 0 auto; }
.membership-card {
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  text-align: center;
  position: relative;
}
.membership-card.annual {
  background: var(--navy-light);
  border: 2px solid var(--navy);
}
.membership-card.lifetime {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  color: var(--white);
  border: 2px solid var(--gold);
}
.membership-card.lifetime h3 { color: var(--gold); }
.membership-card.lifetime p { color: rgba(255,255,255,0.85); }
.membership-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: var(--white);
  font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.75rem;
  border-radius: 100px; text-transform: uppercase; letter-spacing: 0.05em;
}
.price { font-size: 3rem; font-weight: 700; color: var(--red); line-height: 1; margin: 0.75rem 0; }
.membership-card.lifetime .price { color: var(--gold); }
.price small { font-size: 1rem; font-weight: 400; }
.benefit-list { text-align: left; margin-top: 1.25rem; }
.benefit-list li {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.4rem 0; font-size: 0.9rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.membership-card.lifetime .benefit-list li { border-bottom-color: rgba(255,255,255,0.1); }
.benefit-list li .check { color: var(--green); font-size: 0.9rem; flex-shrink: 0; }
.membership-card.lifetime .benefit-list li .check { color: var(--gold); }

/* ---------- PAYMENT BOX ---------- */
.payment-box {
  background: var(--cream);
  border: 2px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 2rem;
  max-width: 600px; margin: 2rem auto;
  text-align: center;
}
.payment-box h3 { color: var(--navy); margin-bottom: 0.75rem; }
.payment-box .amount { font-size: 1.75rem; font-weight: 700; color: var(--red); }
.payment-box .interac { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.1rem; font-weight: 600; color: var(--navy); margin: 0.5rem 0; }
.payment-box code { background: var(--navy-light); padding: 0.2rem 0.6rem; border-radius: 4px; font-family: monospace; font-size: 0.95rem; }
.payment-box .note { font-size: 0.85rem; color: var(--gray-400); margin-top: 0.5rem; }

/* ---------- CTA SECTION ---------- */
.cta-section {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
  color: var(--white); text-align: center; padding: 5rem 0;
}
.cta-section h2 { color: var(--white); margin-bottom: 1rem; }
.cta-section p { color: rgba(255,255,255,0.9); font-size: 1.1rem; max-width: 580px; margin: 0 auto 2rem; }

/* ---------- CHAUTARI QUOTE ---------- */
.chautari-quote {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 3rem;
  text-align: center;
  border: 2px solid var(--gold);
  position: relative;
}
.chautari-quote::before {
  content: '"';
  font-size: 8rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.15;
  position: absolute;
  top: -1rem; left: 1.5rem;
  font-family: 'Merriweather', serif;
}
.chautari-quote blockquote { font-size: 1.3rem; font-style: italic; color: var(--navy); font-family: 'Merriweather', serif; margin-bottom: 0.75rem; position: relative; z-index: 1; }
.chautari-quote cite { color: var(--gray-400); font-size: 0.9rem; }

/* ---------- ALERT / NOTICE BOXES ---------- */
.alert { border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1rem; font-size: 0.92rem; }
.alert-warning { background: #FFF8E1; border-left: 4px solid var(--gold); color: #5a4000; }
.alert-info { background: var(--navy-light); border-left: 4px solid var(--navy); color: var(--navy); }
.alert-danger { background: var(--red-light); border-left: 4px solid var(--red); color: var(--red-dark); }
.alert-success { background: #E8F5E9; border-left: 4px solid var(--green); color: #1b5e20; }

/* ============================================================
   ACCORDION (the FAQ, and any other expand/collapse list)
   The header is a real <button class="accordion-header"> with aria-expanded
   and aria-controls; the panel is a <div class="accordion-body"> with
   role="region" and aria-labelledby. The open state is a class on the parent
   .accordion-item, added by js/main.js.
   The .arrow glyph is aria-hidden decoration. Do not make the arrow the only
   signal of state: aria-expanded is what assistive tech reads.
   The button reset needed for this lives in the accessibility pass near the
   bottom of this file, not here.
   ============================================================ */
/* ---------- ACCORDION ---------- */
.accordion { border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; }
.accordion-item { border-bottom: 1px solid var(--gray-200); }
.accordion-item:last-child { border-bottom: none; }
.accordion-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.25rem 1.5rem; cursor: pointer;
  background: var(--white); user-select: none;
  font-weight: 600; color: var(--navy);
  transition: background var(--transition);
}
.accordion-header:hover { background: var(--cream); }
.accordion-header .arrow { transition: transform var(--transition); font-size: 0.8rem; }
.accordion-item.open .accordion-header .arrow { transform: rotate(180deg); }
.accordion-body { padding: 0 1.5rem 1.25rem; display: none; font-size: 0.95rem; color: var(--gray-700); }
.accordion-item.open .accordion-body { display: block; }

/* ---------- TABS ---------- */
.tab-nav { display: flex; gap: 0.5rem; border-bottom: 2px solid var(--gray-200); margin-bottom: 2rem; overflow-x: auto; }
.tab-btn {
  background: none; border: none; cursor: pointer;
  padding: 0.75rem 1.25rem; font-size: 0.9rem; font-weight: 600;
  color: var(--gray-400); border-bottom: 2px solid transparent;
  margin-bottom: -2px; white-space: nowrap;
  transition: all var(--transition);
}
.tab-btn.active { color: var(--red); border-bottom-color: var(--red); }
.tab-btn:hover { color: var(--navy); }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ---------- FOOTER ---------- */
.site-footer { background: var(--navy); color: rgba(255,255,255,0.8); }
.footer-main { padding: 4rem 0 2rem; }
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
}
.footer-brand .site-logo { margin-bottom: 1rem; }
.footer-brand p { font-size: 0.88rem; color: rgba(255,255,255,0.65); line-height: 1.7; }
.footer-social { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--white); font-size: 0.85rem;
  transition: background var(--transition);
}
.footer-social a:hover { background: var(--red); }
.footer-col h4 { color: var(--gold); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; font-family: sans-serif; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-col ul li a { color: rgba(255,255,255,0.7); font-size: 0.88rem; transition: color var(--transition); }
.footer-col ul li a:hover { color: var(--white); }
.footer-contact-item { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.88rem; color: rgba(255,255,255,0.7); margin-bottom: 0.75rem; }
.footer-contact-item .icon { flex-shrink: 0; margin-top: 0.1rem; color: var(--gold); }
.footer-contact-item a { color: rgba(255,255,255,0.7); }
.footer-contact-item a:hover { color: var(--white); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 1.5rem 0;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
}
.footer-bottom p { font-size: 0.8rem; color: rgba(255,255,255,0.5); margin: 0; }
.footer-bottom nav { display: flex; gap: 1.5rem; }
.footer-bottom nav a { font-size: 0.8rem; color: rgba(255,255,255,0.5); }
.footer-bottom nav a:hover { color: var(--white); }
.footer-flags { display: flex; gap: 0.5rem; font-size: 1.1rem; }

/* ---------- MOBILE NAV ---------- */
.mobile-nav {
  display: none;
  position: fixed; inset: 0; z-index: 999;
  background: var(--navy);
  flex-direction: column; padding: 2rem;
  overflow-y: auto;
}
.mobile-nav.open { display: flex; }
.mobile-nav-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.mobile-nav-close { background: none; border: none; color: var(--white); font-size: 1.5rem; cursor: pointer; }
.mobile-nav ul { display: flex; flex-direction: column; gap: 0.5rem; }
.mobile-nav ul li a {
  display: block; padding: 0.85rem 1rem;
  color: rgba(255,255,255,0.85); font-size: 1.05rem; font-weight: 500;
  border-radius: var(--radius);
  transition: all var(--transition);
}
.mobile-nav ul li a:hover { background: rgba(255,255,255,0.1); color: var(--white); }
.mobile-nav .nav-cta { background: var(--red) !important; color: var(--white) !important; }

/* ---------- BACK TO TOP ---------- */
#back-to-top {
  position: fixed; bottom: 2rem; right: 2rem;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--red); color: var(--white); border: none;
  display: none; align-items: center; justify-content: center;
  font-size: 1.1rem; cursor: pointer;
  box-shadow: var(--shadow-md); z-index: 500;
  transition: all var(--transition);
}
#back-to-top.visible { display: flex; }
#back-to-top:hover { background: var(--red-dark); transform: translateY(-2px); }

/* ============================================================
   BREAKPOINTS / RESPONSIVE
   1024px and below : four-up grids drop to two-up (stats, board, footer).
   768px and below  : THE MAIN ONE. The desktop .main-nav is hidden, the
                      .hamburger appears, and the .mobile-nav panel takes over
                      (js/main.js adds .open to it). Every two-column grid
                      collapses to one column here too.
                      Note the three lines that set .main-nav display twice in
                      a row: the last one wins, .main-nav ends up display:none.
                      It is redundant, not a bug, but do not "tidy" it without
                      testing the phone menu.
   480px and below  : board and four-up grids go to one column.
   More phone tuning lives in css/pages.css (768px, 480px, 420px) and in the
   accessibility block below (420px, 360px). Tested down to 360px wide.
   ============================================================ */
/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .grid-4, .stats-grid, .board-grid { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 768px) {
  .main-nav, .hamburger { display: flex; }
  .main-nav { display: none; }
  .hamburger { display: flex; }
  .hero-inner, .grid-2, .grid-3, .values-grid, .membership-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .board-grid { grid-template-columns: repeat(2,1fr); }
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.5rem; }
  .section { padding: 3.5rem 0; }
  .hero { padding: 4rem 0 3rem; }
  .hero-actions { flex-direction: column; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 480px) {
  .board-grid, .grid-4 { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .tab-nav { flex-direction: column; }
}

/* ============================================================
   PRINT
   The only print rules on the site (css/pages.css has none). Hides the chrome
   (header, footer,
   back-to-top, mobile menu) and prints link destinations after link text so a
   paper copy is still usable. Useful for the newcomer guide and the resource
   directory, which people do print and carry.
   ============================================================ */
/* ---------- PRINT ---------- */
@media print {
  .site-header, .site-footer, #back-to-top, .mobile-nav { display: none; }
  body { font-size: 12pt; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* ==========================================================================
   2026 ACCESSIBILITY PASS. Colours and layout conventions unchanged.
   --------------------------------------------------------------------------
   Everything below this line was added to make the site usable by keyboard and
   with a screen reader. None of it is decorative and none of it is safe to
   delete "because nothing looks different". What is here:
     .skip-link            parked off screen until focused, then jumps to <main>
     :focus-visible rules  the gold ring that shows where the keyboard is
     .visually-hidden      text for screen readers only (the "(required)" spans)
     .field-label          a heading for a checkbox or radio group, because a
                           plain <span> is not a <legend>
     .accordion-header     button resets, since the FAQ headers became real
                           <button> elements rather than <div>s
     360-420px passes      small phone tuning
     reduced motion        honours the OS setting
     form focus ring       restores a visible ring that .form-group input:focus
                           had removed with outline:none
   The dated CONTRAST FIX at the very bottom of this file is part of the same
   pass. Read the note above it before touching it.
   ========================================================================== */

/* Skip link, hidden until it takes keyboard focus. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1200;
  background: var(--navy);
  color: var(--white);
  padding: 0.85rem 1.25rem;
  border-radius: 0 0 var(--radius) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* Visible focus for every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 3px;
}
.site-header a:focus-visible,
.mobile-nav a:focus-visible,
.site-footer a:focus-visible,
.social-banner a:focus-visible,
.announcement a:focus-visible {
  outline-color: var(--gold);
}
main:focus { outline: none; }

/* Text for screen readers only. */
.visually-hidden {
  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;
}

/* Heading for a group of checkboxes or radios. Matches the label styling. */
.form-group .field-label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--navy);
  margin-bottom: 0.4rem;
}

/* The accordion header is a real button now, so reset the browser defaults. */
.accordion-header {
  width: 100%;
  border: none;
  font-family: inherit;
  font-size: 1rem;
  text-align: left;
  line-height: 1.5;
  gap: 1rem;
}
.accordion-header .arrow { flex: none; }

/* Small screens, tested down to 360px wide. */
@media (max-width: 420px) {
  .container { padding-left: 1rem; padding-right: 1rem; }
  .stats-grid { grid-template-columns: 1fr; }
  .hero-actions .btn,
  .cta-section .btn { width: 100%; }
  .form-row { grid-template-columns: 1fr; }
  .accordion-header { padding: 1rem; }
  .accordion-body { padding: 0 1rem 1rem; }
  #back-to-top { bottom: 1rem; right: 1rem; }
  .social-banner-inner { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
  .footer-bottom nav { flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
}

@media (max-width: 360px) {
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.3rem; }
  .logo-text .tagline { display: none; }
}

/* ============================================================
   REDUCED MOTION
   Honours the operating-system "reduce motion" setting. js/main.js reads the
   same media query and switches its scrolling from 'smooth' to 'auto'.
   Keep the two in step.
   ============================================================ */
/* Respect a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  #back-to-top:hover { transform: none; }
}

/* Form controls set outline:none on :focus, so restore a visible ring for
   keyboard users at matching specificity. */
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}


/* ============================================================
   ACCESSIBILITY CONTRAST FIX - 2026-08-07     DO NOT DELETE LIGHTLY
   ------------------------------------------------------------
   WHAT IT FIXES
   The token --gray-400 was #9E9E9E. It carries small grey TEXT all over the
   site: form hints (.hint), .legal-meta, .tab-btn, .value-card .nepali,
   .payment-box .note, .chautari-quote cite, .fb-fallback, and the inline small
   print written straight into the HTML (for example the "exact date, time and
   venue are confirmed on Instagram" line under the BBQ RSVP form). At #9E9E9E
   all of that failed WCAG 2.1 AA, which requires 4.5:1 for normal-size text.

   MEASURED CONTRAST RATIOS (text colour vs background)
     vs #FFFFFF (white)      #9E9E9E = 2.68:1  FAIL  ->  #6F6F6F = 5.06:1  PASS
     vs #FAF7F2 (cream)      #9E9E9E = 2.51:1  FAIL  ->  #6F6F6F = 4.70:1  PASS
     vs #F4F4F4 (gray-100)   #9E9E9E = 2.45:1  FAIL  ->  #6F6F6F = 4.57:1  PASS
   Neutral grey, no hue added, so nothing looks tinted.

   THIS ONE LINE IS THE FIX. It re-declares a single token, later in the file
   than the original :root block, so the cascade picks it up. It changes no
   brand colour: --red, --navy, --gold, --green and --cream are untouched.
   All borders and dividers use --gray-200, which is also untouched, so nothing
   about the layout or the box outlines moved.

   DELETING THIS LINE REINTRODUCES A SITE-WIDE WCAG 2.1 AA FAILURE
   (success criterion 1.4.3 Contrast Minimum) on every page that shows small
   grey text, which is most of them. Membership, sponsors, events, the legal
   pages and the newcomer guide are the worst affected, because that is where
   the fine print carries information people actually need.
   If you want a different grey, keep it at 4.5:1 or better against #FFFFFF,
   #FAF7F2 and #F4F4F4 before you ship it.
   ============================================================ */
:root { --gray-400: #6F6F6F; }
/* ============================================================ */