/* ==========================================================================
   SVIRA Foundation — shared stylesheet
   Version 0.2 · October 2026
   Location on server: public_html/assets/css/style.css
   Load on every page, after the Google Fonts link:
   <link rel="stylesheet" href="/assets/css/style.css">
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Fonts (self-hosted, in public_html/assets/fonts/)
   Cormorant Garamond and DM Sans still load from Google Fonts for now.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Allerta Stencil";
  src: url("../fonts/allerta-stencil-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* One variable font file covers every weight from 400 (Regular) to 700 (Bold) */
@font-face {
  font-family: "Anek Devanagari";
  src: url("../fonts/anek-devanagari-variable.woff2") format("woff2-variations"),
       url("../fonts/anek-devanagari-variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}


/* --------------------------------------------------------------------------
   2. Design tokens — change a value here and the whole site follows
   -------------------------------------------------------------------------- */

:root {
  /* Brand colours, in order of priority */
  --svira-navy:        #1E3A5F;  /* header, footer, brand foundation */
  --svira-blue:        #1565C0;  /* primary buttons, links, focus */
  --svira-orange:      #F57C00;  /* donate, highlights, brand name */
  --svira-green:       #2E7D32;  /* programs, impact, success */

  /* Supporting shades (added for readability) */
  --svira-navy-deep:   #12233A;  /* text on orange backgrounds */
  --svira-orange-dark: #A84E00;  /* orange used as text on light backgrounds */
  --svira-blue-dark:   #0D47A1;  /* hover for blue, text on blue tint */
  --svira-green-dark:  #1B5E20;  /* text on green tint */

  /* Tints for cards, tags and notice boxes */
  --svira-navy-tint:   #E8EEF6;
  --svira-blue-tint:   #E8F0FB;
  --svira-orange-tint: #FEF1E2;
  --svira-green-tint:  #E8F2E9;

  /* Neutrals */
  --svira-bg:          #FAF7F0;  /* warm page background */
  --svira-surface:     #FFFFFF;  /* cards and panels */
  --svira-text:        #243247;
  --svira-muted:       #5A6678;
  --svira-border:      #D8E0EA;

  /* Typefaces */
  --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-brand:   "Allerta Stencil", "Courier New", monospace;
  --font-deva:    "Anek Devanagari", "Nirmala UI", "Mangal", sans-serif;

  /* Type scale (scales smoothly between phone and desktop) */
  --text-sm:   0.875rem;                          /* 14px */
  --text-base: 1rem;                              /* 16px */
  --text-lg:   1.125rem;                          /* 18px */
  --text-h3:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-h2:   clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --text-h1:   clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  --leading:   1.65;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Shape: one radius everywhere, a pill for tags. No shadows. */
  --radius:      8px;
  --radius-pill: 999px;
  --border-width: 1px;

  --content-width: 1120px;
}


/* --------------------------------------------------------------------------
   3. Marathi and Hindi pages
   Applies automatically to <html lang="mr"> and <html lang="hi">.
   -------------------------------------------------------------------------- */

:lang(mr),
:lang(hi) {
  --font-heading: var(--font-deva);
  --font-body:    var(--font-deva);
  --leading:      1.8;   /* Devanagari needs room above and below the line */
}

/* Devanagari letters look smaller than Latin at the same size */
:lang(mr) body,
:lang(hi) body { font-size: 1.0625rem; }

:lang(mr) h1, :lang(mr) h2, :lang(mr) h3,
:lang(hi) h1, :lang(hi) h2, :lang(hi) h3 {
  font-weight: 700;
  line-height: 1.35;
}


/* --------------------------------------------------------------------------
   4. Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading);
  color: var(--svira-text);
  background: var(--svira-bg);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--svira-navy);
  line-height: 1.2;
  font-weight: 600;
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }

p { margin: 0 0 var(--space-4); max-width: 70ch; }

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

a {
  color: var(--svira-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--svira-blue-dark); }

:focus-visible {
  outline: 3px solid var(--svira-orange);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  background: var(--svira-surface);
  color: var(--svira-navy);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  z-index: 100;
}
.skip-link:focus { top: var(--space-4); }

.container {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.section { padding: var(--space-16) 0; }
.section-alt { background: var(--svira-surface); }


/* --------------------------------------------------------------------------
   5. Header and navigation
   -------------------------------------------------------------------------- */

.site-header {
  background: var(--svira-navy);
  border-bottom: 3px solid var(--svira-orange);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

/* Brand name: orange Allerta Stencil, never smaller than 24px
   (orange on navy only meets the contrast standard at large sizes) */
.brand {
  font-family: var(--font-brand);
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  letter-spacing: 1.5px;
  color: var(--svira-orange);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  line-height: 1;
}
.brand:hover { color: var(--svira-orange); }
.brand img { width: 44px; height: 44px; }

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-6);
}

.site-nav a {
  color: #FFFFFF;
  text-decoration: none;
  font-size: var(--text-sm);
  padding: var(--space-1) 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: #FFFFFF;
  border-bottom-color: var(--svira-orange);
}

.lang-switch {
  display: flex;
  gap: var(--space-1);
  font-family: var(--font-deva);
}
.lang-switch a {
  color: #FFFFFF;
  text-decoration: none;
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-2);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius);
}
.lang-switch a[aria-current="true"] { border-color: var(--svira-orange); }


/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;                     /* comfortable touch target */
  padding: var(--space-2) var(--space-6);
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-primary { background: var(--svira-blue); color: #FFFFFF; }
.btn-primary:hover { background: var(--svira-blue-dark); color: #FFFFFF; }

/* Donate: bright orange with deep navy text (white on orange is unreadable) */
.btn-donate { background: var(--svira-orange); color: var(--svira-navy-deep); }
.btn-donate:hover { background: #E06F00; color: var(--svira-navy-deep); }

.btn-outline { background: transparent; color: var(--svira-blue); border-color: var(--svira-blue); }
.btn-outline:hover { background: var(--svira-blue-tint); color: var(--svira-blue-dark); }

.btn-on-dark { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }
.btn-on-dark:hover { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }


/* --------------------------------------------------------------------------
   7. Cards, tags and notices
   -------------------------------------------------------------------------- */

.card {
  background: var(--svira-surface);
  border: var(--border-width) solid var(--svira-border);
  border-radius: var(--radius);
  padding: var(--space-6);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
}

.tag {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--svira-navy-tint);
  color: var(--svira-navy);
}
.tag-green  { background: var(--svira-green-tint);  color: var(--svira-green-dark); }
.tag-blue   { background: var(--svira-blue-tint);   color: var(--svira-blue-dark); }
.tag-orange { background: var(--svira-orange-tint); color: var(--svira-orange-dark); }

.notice {
  border-left: 4px solid var(--svira-orange);
  background: var(--svira-orange-tint);
  padding: var(--space-4);
  border-radius: 0;                     /* single-sided border stays square */
}
.notice-info    { border-left-color: var(--svira-blue);  background: var(--svira-blue-tint); }
.notice-success { border-left-color: var(--svira-green); background: var(--svira-green-tint); }


/* --------------------------------------------------------------------------
   8. Forms
   -------------------------------------------------------------------------- */

label {
  display: block;
  font-weight: 500;
  margin-bottom: var(--space-2);
}

input, select, textarea {
  width: 100%;
  font: inherit;
  color: var(--svira-text);
  background: var(--svira-surface);
  border: var(--border-width) solid var(--svira-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  min-height: 44px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--svira-blue);
  outline-offset: 1px;
  border-color: var(--svira-blue);
}

.field-error { color: #B3261E; font-size: var(--text-sm); margin-top: var(--space-1); }


/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--svira-navy);
  color: #FFFFFF;
  border-top: 3px solid var(--svira-orange);
  padding: var(--space-12) 0 var(--space-8);
  font-size: var(--text-sm);
}
.site-footer a { color: #FFFFFF; }
.site-footer a:hover { color: var(--svira-orange); }
.site-footer .brand { font-size: 1.5rem; }


/* --------------------------------------------------------------------------
   10. Accessibility and motion
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 720px) {
  .section { padding: var(--space-12) 0; }
  .container { padding: 0 var(--space-4); }
}

/* --------------------------------------------------------------------------
   11. Logo before the brand name, on every page that uses .brand
   -------------------------------------------------------------------------- */
.brand::before {
  content: "";
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: #FFFFFF url("../img/svira-logo.webp") center / 38px 38px no-repeat;
}
.site-footer .brand::before {
  width: 36px;
  height: 36px;
  background-size: 30px 30px;
}