/* ==========================================================================
   LOKI ANIMAL SHELTER
   Stylesheet for the static build.

   HOW THIS MAPS TO ELEMENTOR FREE
   -------------------------------
   Every layout in this file is built with Flexbox only. No CSS Grid.
   The structure follows a single repeating pattern:

     section.section            -> Elementor Container (full width)
       div.container            -> Elementor Container (boxed, 1180px)
         .eyebrow / h2 / p      -> Heading + Text Editor widgets
         .row                   -> Elementor Container, direction: row, wrap on
           .col                 -> Elementor Container, direction: column
             img                -> Image widget
             .btn               -> Button widget

   To rebuild in Elementor: recreate the containers, then paste these class
   names into the container's "CSS Classes" field so the styling carries over.
   Only the small pieces marked CUSTOM below need a Custom HTML widget.

   TABLE OF CONTENTS
   1.  Fonts
   2.  Design tokens
   3.  Reset and base
   4.  Layout helpers
   5.  Typography
   6.  Buttons
   7.  Header and navigation
   8.  Mobile action bar
   9.  Hero
   10. Trust bar and statistics
   11. Cards
   12. Media and galleries
   13. Split sections
   14. Rescue stories
   15. Donation module
   16. Accordion and forms
   17. Footer
   18. Utilities
   ========================================================================== */


/* 1. FONTS ================================================================
   Self-hosted, latin subset only, so the site makes zero external requests.
   In WordPress drop these files in the theme and keep the same @font-face. */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('../fonts/karla-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('../fonts/karla-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('../fonts/karla-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}


/* 2. DESIGN TOKENS =========================================================
   The whole palette lives here. Change a value and it updates site wide.
   In Elementor these map to Site Settings > Global Colors and Global Fonts. */

:root {
  /* Colour */
  --ink:        #141110;   /* deep warm black, primary dark surface */
  --ink-soft:   #231C18;   /* secondary dark surface */
  --bone:       #FAF6F0;   /* warm off white, primary light surface */
  --bone-deep:  #F0E8DD;   /* tinted light surface */
  --ember:      #C9381F;   /* reserved for donation actions */
  --ember-dark: #A62B14;
  --amber:      #E8A33D;   /* accents, figures, underlines */
  --pine:       #14584C;   /* trust only: secure payment, 80G, verified ticks */
  --text:       #2A211C;
  --text-muted: #6B5C52;
  --line:       rgba(20, 17, 16, 0.13);
  --line-light: rgba(250, 246, 240, 0.18);

  /* Type */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Spacing */
  --gutter: 24px;
  --section-y: 96px;
  --radius: 14px;
  --radius-lg: 22px;

  /* Effects */
  --shadow-sm: 0 2px 10px rgba(20, 17, 16, 0.07);
  --shadow-md: 0 14px 40px rgba(20, 17, 16, 0.13);
  --shadow-lg: 0 28px 70px rgba(20, 17, 16, 0.20);
}


/* 3. RESET AND BASE ======================================================== */

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

/* Do NOT put overflow-x: hidden on html and body together. When both carry it,
   overflow-y computes to auto on both and the root turns into a nested scroll
   box: the page then scrolls inside a panel with dead space around it and the
   sticky header stops sticking. There is no horizontal overflow to hide here,
   so neither element needs it. Sections that could bleed (the heroes) clip
   themselves with their own overflow: hidden. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
}

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

/* Ember-dark rather than ember: inline links are small text and need to
   clear 4.5:1 against the bone and white backgrounds. */
a { color: var(--ember-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

/* Visible focus for keyboard users on every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--amber); color: var(--ink); }

/* Clipped rather than parked at left: -9999px. An off screen element still
   counts towards the scrollable area and can create a phantom scrollbar. */
.skip-link {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link:focus {
  width: auto; height: auto; overflow: visible;
  clip: auto; clip-path: none;
  top: 0; left: 0; z-index: 999;
  background: var(--ink); color: var(--bone);
  padding: 12px 20px; border-radius: 0 0 8px 0; font-weight: 600;
}


/* 4. LAYOUT HELPERS ======================================================== */

.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: 800px; }

.section { padding: var(--section-y) 0; position: relative; }
.section--tight { padding: 64px 0; }
.section--dark  { background: var(--ink); color: var(--bone); }
.section--soft  { background: var(--bone-deep); }
.section--clay  { background: var(--ink-soft); color: var(--bone); }

.section--dark p, .section--clay p { color: rgba(250, 246, 240, 0.80); }
.section--dark .eyebrow, .section--clay .eyebrow { color: var(--amber); }

/* .row / .col are the Flexbox spine of every multi column layout */
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -14px;
}
.col { padding: 0 14px; flex: 1 1 0; min-width: 0; }

/* Use when a .row sits inside a text column rather than directly inside a
   .container. There is no container padding there for the negative gutter
   margins to bleed into, so without this the row pushes past the viewport. */
.row--flush { margin-left: 0; margin-right: 0; }
.row--flush > .col:first-child { padding-left: 0; }
.row--flush > .col:last-child { padding-right: 0; }

.col-2  { flex: 0 0 50%;     max-width: 50%; }
.col-3  { flex: 0 0 33.333%; max-width: 33.333%; }
.col-4  { flex: 0 0 25%;     max-width: 25%; }

.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.measure { max-width: 62ch; }
.center .measure { margin-left: auto; margin-right: auto; }


/* 5. TYPOGRAPHY ============================================================ */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  color: inherit;
}

h1, .h1 { font-size: clamp(2.4rem, 6vw, 4.1rem); }
h2, .h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3, .h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
h4, .h4 { font-size: 1.12rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lead { font-size: clamp(1.08rem, 1.7vw, 1.32rem); line-height: 1.6; color: var(--text-muted); }
.section--dark .lead, .section--clay .lead { color: rgba(250, 246, 240, 0.85); }

/* Small tracked label that opens most sections. Elementor: Heading widget. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ember-dark);
  margin: 0 0 18px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--amber); flex: none;
}



/* 6. BUTTONS ===============================================================
   Elementor: Button widget. Ember is used only for donation actions so that
   "orange red means give" is learned within the first scroll. */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body);
  font-size: 1rem; font-weight: 600; line-height: 1;
  padding: 17px 30px;
  border: 2px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, background-color .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
  min-height: 52px;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--donate {
  background: var(--ember); color: #fff; box-shadow: 0 8px 24px rgba(201, 56, 31, 0.32);
}
.btn--donate:hover { background: var(--ember-dark); color: #fff; box-shadow: 0 12px 30px rgba(201, 56, 31, 0.42); }

.btn--dark { background: var(--ink); color: var(--bone); }
.btn--dark:hover { background: var(--ink-soft); color: var(--bone); }

.btn--light { background: var(--bone); color: var(--ink); }
.btn--light:hover { background: #fff; color: var(--ink); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }

.btn--ghost-light { background: transparent; color: var(--bone); border-color: var(--line-light); }
.btn--ghost-light:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }

.btn--lg { font-size: 1.08rem; padding: 20px 38px; min-height: 60px; }
.btn--block { display: flex; width: 100%; }

.btn-group { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.center .btn-group { justify-content: center; }


/* 7. HEADER AND NAVIGATION =================================================
   Elementor: this is normally the theme header. In Kadence use the header
   builder, add the logo, a nav menu and one button, then apply .btn--donate. */

/* Solid background on purpose. A backdrop-filter here would create a
   containing block and trap the fixed position mobile drawer inside the
   header, so the drawer could not fill the screen. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--bone);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; min-height: 76px;
}

.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; color: var(--ink); }
.brand__mark { width: 44px; height: 44px; flex: none; border-radius: 11px; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.42rem; letter-spacing: 0.01em;
}
.brand__sub {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--text-muted); margin-top: 4px;
}

.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
  color: var(--text); text-decoration: none; font-size: 0.95rem; font-weight: 600;
  padding: 10px 13px; border-radius: 8px;
}
.nav a:hover { color: var(--ink); background: rgba(20, 17, 16, 0.05); }
.nav a[aria-current="page"] { color: var(--ember-dark); font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: 12px; }
.header-actions .btn { padding: 13px 24px; min-height: 46px; font-size: 0.95rem; }

.menu-toggle {
  display: none; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  background: transparent; border: 1px solid var(--line); border-radius: 11px; cursor: pointer;
}
.menu-toggle span {
  display: block; width: 20px; height: 2px; background: var(--ink); position: relative;
}
.menu-toggle span::before, .menu-toggle span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink);
}
.menu-toggle span::before { top: -6px; }
.menu-toggle span::after  { top: 6px; }

/* Mobile drawer */
.drawer {
  display: none;
  position: fixed; inset: 76px 0 0 0; z-index: 99;
  background: var(--bone);
  padding: 22px var(--gutter) 120px;
  overflow-y: auto;
}
.drawer.is-open { display: block; }
/* :not(.btn) so the Donate button inside the drawer keeps its own colours */
.drawer a:not(.btn) {
  display: block; padding: 15px 4px; font-size: 1.15rem; font-weight: 600;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line);
}
.drawer a[aria-current="page"] { color: var(--ember-dark); }
.drawer .btn { margin-top: 22px; }
body.drawer-open { overflow: hidden; }


/* 8. MOBILE ACTION BAR =====================================================
   CUSTOM: a fixed two button bar for phones. Most traffic arrives from
   Instagram on mobile, so Donate and the rescue helpline stay in reach.
   In Elementor this is a Custom HTML widget placed once in the footer. */

.mobile-bar { display: none; }

@media (max-width: 900px) {
  .mobile-bar {
    display: flex; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 98;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--bone);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(20, 17, 16, 0.08);
  }
  .mobile-bar .btn { flex: 1 1 0; padding: 15px 10px; min-height: 52px; font-size: 0.95rem; }
  body { padding-bottom: 84px; }
}


/* 9. HERO ==================================================================
   Split layout: message panel and photograph. On phones the photograph sits
   on top at a shorter crop so the headline and Donate button stay in view. */

.hero { background: var(--ink); color: var(--bone); overflow: hidden; }
.hero__inner { display: flex; flex-wrap: wrap; align-items: stretch; }

.hero__panel {
  flex: 1 1 500px;
  padding: clamp(44px, 6vw, 88px) clamp(24px, 5vw, 76px);
  display: flex; flex-direction: column; justify-content: center;
}
.hero__media { flex: 1 1 420px; position: relative; min-height: 320px; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }

.hero h1 { color: var(--bone); margin-bottom: 22px; }
.hero p { color: rgba(250, 246, 240, 0.82); }
.hero .lead { margin-bottom: 30px; max-width: 46ch; }

.hero__note {
  margin-top: 26px; font-size: 0.9rem; color: rgba(250, 246, 240, 0.62);
  display: flex; align-items: flex-start; gap: 9px;
}
.hero__note::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--amber); flex: none; margin-top: 8px;
}

/* Compact hero used on inner pages */
.page-hero { background: var(--ink); color: var(--bone); padding: clamp(60px, 8vw, 110px) 0 clamp(52px, 7vw, 96px); position: relative; overflow: hidden; }
.page-hero h1 { color: var(--bone); }
.page-hero p { color: rgba(250, 246, 240, 0.80); }
.page-hero__bg { position: absolute; inset: 0; opacity: 0.22; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.page-hero .container { position: relative; z-index: 1; }

.breadcrumb { font-size: 0.85rem; color: rgba(250, 246, 240, 0.6); margin-bottom: 18px; }
.breadcrumb a { color: rgba(250, 246, 240, 0.8); text-decoration: none; }
.breadcrumb a:hover { color: var(--amber); }


/* 10. TRUST BAR AND STATISTICS ============================================= */

/* Four facts under the hero. The value sits on its own line above its label,
   so a phrase never breaks across lines and the columns stay even at any width. */
.trust-bar { background: var(--ink-soft); color: var(--bone); padding: 30px 0; }
.trust-bar__row { display: flex; flex-wrap: wrap; margin: 0 -18px; }
.trust-item {
  flex: 1 1 200px; min-width: 0; margin: 0; padding: 10px 18px;
  display: flex; flex-direction: column; gap: 3px;
}
.trust-item__value {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.45rem; line-height: 1.15; color: var(--amber);
}
.trust-item__label { font-size: 0.95rem; line-height: 1.4; color: rgba(250, 246, 240, 0.80); }

/* Anchor links that jump down the Our Work page */
.jump-nav { background: var(--ink-soft); padding: 16px 0; }
.jump-nav__row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.jump-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--line-light);
  color: rgba(250, 246, 240, 0.88); text-decoration: none;
  font-size: 0.95rem; font-weight: 600;
}
.jump-nav a:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }

/* Counter blocks. Elementor: Counter widget, or Heading + Text Editor. */
.stat { text-align: center; padding: 10px 6px; }
.stat__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.3rem, 5vw, 3.5rem); line-height: 1;
  color: var(--ember); display: block; margin-bottom: 10px;
}
.section--dark .stat__num, .section--clay .stat__num { color: var(--amber); }
.stat__label { font-size: 0.93rem; color: var(--text-muted); line-height: 1.45; }
/* Inside a text column the figures have roughly half the width to play with,
   so they need a smaller ceiling or a value like Rs 5,000 spills out sideways. */
.row--flush .stat__num { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.row--flush .stat { padding: 10px 0; text-align: left; }
.section--dark .stat__label, .section--clay .stat__label { color: rgba(250, 246, 240, 0.72); }


/* 11. CARDS ================================================================
   Elementor: a Container per card, with an Image widget, Heading and Text. */

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; height: 100%; display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bone-deep); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 26px 26px 28px; flex: 1 1 auto; display: flex; flex-direction: column; }
.card__body h3 { margin-bottom: 10px; }
.card__body p { color: var(--text-muted); font-size: 0.97rem; }
.card__link {
  margin-top: auto; padding-top: 16px;
  font-weight: 600; font-size: 0.95rem; text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
}
.card__link::after { content: "\2192"; transition: transform .16s ease; }
.card__link:hover::after { transform: translateX(4px); }

.card--dark { background: var(--ink-soft); border-color: var(--line-light); color: var(--bone); }
.card--dark p { color: rgba(250, 246, 240, 0.74); }

/* Simple icon card with no photograph */
.icon-card { display: flex; gap: 16px; align-items: flex-start; padding: 22px 0; border-top: 1px solid var(--line); }
.section--dark .icon-card, .section--clay .icon-card { border-color: var(--line-light); }
.icon-card__mark {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  background: rgba(201, 56, 31, 0.12); color: var(--ember-dark);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
}
.section--dark .icon-card__mark, .section--clay .icon-card__mark { background: rgba(232, 163, 61, 0.14); color: var(--amber); }
.icon-card h3 { font-size: 1.1rem; margin-bottom: 6px; }
.icon-card p { font-size: 0.95rem; color: var(--text-muted); margin: 0; }
.section--dark .icon-card p, .section--clay .icon-card p { color: rgba(250, 246, 240, 0.78); }

/* Plain checked list */
.tick-list { list-style: none; margin: 0; padding: 0; }
.tick-list li {
  position: relative; padding: 9px 0 9px 32px; font-size: 1rem;
  border-bottom: 1px solid var(--line);
}
.section--dark .tick-list li, .section--clay .tick-list li { border-color: var(--line-light); }
.tick-list li::before {
  content: ""; position: absolute; left: 4px; top: 17px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--amber);
}
.tick-list li:last-child { border-bottom: 0; }


/* 12. MEDIA AND GALLERIES ==================================================
   Fixed aspect ratios keep card crops consistent across every page. */

.media { overflow: hidden; border-radius: var(--radius-lg); background: var(--bone-deep); }
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media--portrait  { aspect-ratio: 4 / 5; }
.media--wide      { aspect-ratio: 16 / 9; }

figure { margin: 0; }
figcaption { font-size: 0.86rem; color: var(--text-muted); margin-top: 11px; line-height: 1.5; }
.section--dark figcaption, .section--clay figcaption { color: rgba(250, 246, 240, 0.6); }

/* Gallery: Flexbox, not Grid, so Elementor's Gallery widget can replace it */
.gallery { display: flex; flex-wrap: wrap; margin: 0 -7px; }
.gallery__item { padding: 7px; flex: 0 0 25%; max-width: 25%; }
.gallery__item .media { aspect-ratio: 1 / 1; border-radius: var(--radius); }

/* Small round photo strip used for social proof. The max width keeps the
   circles wrapping into even rows of four rather than a ragged edge. */
.face-strip { display: flex; flex-wrap: wrap; gap: 10px; max-width: 402px; }
.face-strip .media { width: 88px; height: 88px; aspect-ratio: 1/1; border-radius: 50%; flex: none; }

.video-block { border-radius: var(--radius-lg); overflow: hidden; background: var(--ink-soft); }
.video-block video { width: 100%; display: block; max-height: 560px; object-fit: cover; }


/* 13. SPLIT SECTIONS ======================================================= */

.split { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.split__media { flex: 1 1 380px; min-width: 0; }
.split__body  { flex: 1 1 420px; min-width: 0; }
.split--reverse .split__media { order: 2; }

.split--tight { gap: 40px; }
/* Use when one column is much taller than the other, such as a form column,
   so the photograph aligns to the top instead of floating in the middle. */
.split--top { align-items: flex-start; }


/* 14. RESCUE STORIES =======================================================
   One repeatable block. To add story seven in Elementor, duplicate the
   container, swap the Image widget and edit the four beat texts. */

.story {
  display: flex; flex-wrap: wrap; gap: 44px; align-items: center;
  padding: 52px 0; border-top: 1px solid var(--line);
}
.story:first-of-type { border-top: 0; padding-top: 8px; }
.story__media { flex: 1 1 340px; min-width: 0; }
.story__media .media { aspect-ratio: 4 / 5; }
.story__body { flex: 1 1 440px; min-width: 0; }
.story--reverse .story__media { order: 2; }

.story__tag {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ember-dark); background: rgba(201, 56, 31, 0.11);
  padding: 7px 13px; border-radius: 999px; margin-bottom: 16px;
}
.story h3 { font-size: clamp(1.5rem, 3vw, 2.05rem); margin-bottom: 14px; }

/* The four beats: Found, Rescued, Treated, Today */
.beats { list-style: none; margin: 24px 0 0; padding: 0; }
.beats li { display: flex; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); }
.beats li:last-child { border-bottom: 1px solid var(--line); }
.beats__label {
  flex: none; width: 82px; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
  padding-top: 4px;
}
.beats__text { flex: 1 1 auto; font-size: 0.99rem; margin: 0; }
.beats li:last-child .beats__label { color: var(--ember-dark); }


/* 15. DONATION MODULE ======================================================
   CUSTOM: the amount chips are plain radio inputs styled with CSS, so there
   is no JavaScript and no fake payment interface. The button is a normal
   link to the LOKI Cashfree payment form.

   TO WIRE AMOUNTS TO CASHFREE: if your Cashfree form accepts a prefilled
   amount, add the parameter to each label's data-amount and switch the
   button href. Until then every chip leads to the same secure form. */

.donate-box {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(26px, 4vw, 40px); box-shadow: var(--shadow-md);
}
/* The box always sits on white, so reset any inherited dark section colours */
.donate-box, .donate-box p, .donate-box label { color: var(--text); }
.donate-box h2, .donate-box h3 { color: var(--ink); }
.donate-box .form-note, .donate-box__secure { color: var(--text-muted); }

.amounts { display: flex; flex-wrap: wrap; margin: 0 -6px 8px; }
.amounts__item { padding: 6px; flex: 0 0 33.333%; max-width: 33.333%; }
.amounts input { position: absolute; opacity: 0; pointer-events: none; }
.amounts label {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; height: 100%; min-height: 92px; padding: 14px 8px; cursor: pointer;
  border: 2px solid var(--line); border-radius: var(--radius);
  transition: border-color .16s ease, background .16s ease;
  text-align: center;
}
.amounts label:hover { border-color: var(--ember); }
.amounts input:checked + label { border-color: var(--ember); background: rgba(201, 56, 31, 0.06); }
.amounts input:focus-visible + label { outline: 3px solid var(--amber); outline-offset: 2px; }
.amounts__value { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--ink); line-height: 1; }
.amounts__hint { font-size: 0.79rem; color: var(--text-muted); line-height: 1.35; }

.donate-box__secure {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 16px; font-size: 0.86rem; color: var(--text-muted); text-align: center;
}

/* Impact line items on the donate page */
.impact-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.impact-row__amt { flex: none; width: 120px; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--ember); }
.impact-row__txt { flex: 1 1 260px; margin: 0; }

.bank-details { background: var(--bone-deep); border-radius: var(--radius); padding: 24px 26px; }
.bank-details dl { margin: 0; }
.bank-details div { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.bank-details div:last-child { border-bottom: 0; }
.bank-details dt { flex: none; width: 140px; font-size: 0.86rem; font-weight: 600; color: var(--text-muted); margin: 0; }
.bank-details dd { flex: 1 1 200px; margin: 0; font-size: 0.99rem; font-weight: 600; }


/* 15b. SPONSOR AN ITEM =====================================================
   A gift catalogue grid. Each card is one WooCommerce virtual product, so a
   supporter buys a specific thing instead of giving an abstract amount. This
   reliably lifts average gift size because the outcome is concrete.

   Elementor: either a Container per card (Image + Heading + Text + Button),
   or the native WooCommerce Products widget pointed at the "Sponsor an Item"
   product category, which keeps prices in sync automatically. */

.give-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; height: 100%; display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.give-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.give-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--bone-deep); }
.give-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* The price sits over the photograph so it reads before the description */
.give-card__price {
  position: absolute; left: 14px; bottom: 14px;
  background: var(--ink); color: var(--bone);
  font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; line-height: 1;
  padding: 10px 15px; border-radius: 999px;
}
.give-card__body { padding: 22px 22px 24px; flex: 1 1 auto; display: flex; flex-direction: column; }
.give-card__body h3 { font-size: 1.16rem; margin-bottom: 6px; }
.give-card__unit {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 12px;
}
.give-card__body p { font-size: 0.95rem; color: var(--text-muted); }
.give-card .btn { margin-top: auto; }

/* Small verified line, the only place the trust colour appears */
.secure-note {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.88rem; font-weight: 600; color: var(--pine);
}
.secure-note::before {
  content: ""; flex: none; width: 17px; height: 17px; border-radius: 50%;
  background: var(--pine) no-repeat center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M6.2 11.6 3 8.4l1.2-1.2 2 2 5.6-5.6L13 4.8z'/%3E%3C/svg%3E");
}
/* Lighter tint of the same green so it stays legible on dark surfaces */
.section--dark .secure-note, .section--clay .secure-note { color: #74C4AA; }
.section--dark .secure-note::before, .section--clay .secure-note::before { background-color: #74C4AA; }


/* 16. ACCORDION AND FORMS ==================================================
   The accordion uses native details and summary elements. That is keyboard
   accessible with no JavaScript and Elementor can replace it with its own
   Toggle widget without changing the design. */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-family: var(--font-display); font-size: 1.14rem; font-weight: 600; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-body); font-size: 1.5rem; font-weight: 400; color: var(--ember); line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq__answer { padding: 0 44px 24px 0; color: var(--text-muted); }
.faq__answer p:last-child { margin-bottom: 0; }

.form-row { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.form-field { padding: 8px; flex: 1 1 240px; min-width: 0; }
.form-field--full { flex: 0 0 100%; max-width: 100%; }
.form-field label { display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 7px; color: var(--text); }
.form-field .req { color: var(--ember-dark); }
.section--dark .form-field .req { color: var(--amber); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 14px 16px; font-size: 1rem; font-family: var(--font-body); color: var(--text);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.form-field textarea { min-height: 130px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--ember); outline: none; box-shadow: 0 0 0 3px rgba(201, 56, 31, 0.12);
}
.form-note { font-size: 0.86rem; color: var(--text-muted); margin-top: 14px; }

.contact-line { display: flex; gap: 15px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--line); }
.section--dark .contact-line { border-color: var(--line-light); }
.contact-line:last-child { border-bottom: 0; }
.contact-line__label { flex: none; width: 108px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); padding-top: 4px; }
.section--dark .contact-line__label { color: rgba(250, 246, 240, 0.55); }
.contact-line__value { flex: 1 1 200px; margin: 0; font-size: 1.04rem; }
.contact-line__value a { font-weight: 600; }

/* Emergency panel on the contact page */
/* Deeper ember so white text clears AA contrast on this panel */
.emergency {
  background: var(--ember-dark); color: #fff; border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px);
}
.emergency h2, .emergency h3 { color: #fff; }
.emergency p, .emergency .lead { color: rgba(255, 255, 255, 0.95); }
.emergency .eyebrow { color: #fff; }
.emergency .eyebrow::before { background: rgba(255, 255, 255, 0.75); }
.emergency .btn--light { color: var(--ember-dark); }
.emergency__num {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 5vw, 2.7rem);
  color: #fff; text-decoration: none; display: inline-block; margin: 6px 0 18px; letter-spacing: 0.01em;
}
.emergency__num:hover { color: #fff; text-decoration: underline; }


/* 17. FOOTER =============================================================== */

.site-footer { background: var(--ink); color: rgba(250, 246, 240, 0.72); padding: 76px 0 0; }
.site-footer h3 {
  color: var(--bone); font-family: var(--font-body); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 18px;
}
.site-footer a { color: rgba(250, 246, 240, 0.72); text-decoration: none; }
.site-footer a:hover { color: var(--amber); }
.site-footer .brand { color: var(--bone); }
.site-footer .brand__sub { color: rgba(250, 246, 240, 0.55); }
/* Footer column widths: one wide brand column, then three link columns */
.site-footer .row > .col { flex: 0 0 22%; max-width: 22%; }
.site-footer .row > .col--brand { flex: 0 0 34%; max-width: 34%; }
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: 11px; font-size: 0.96rem; }
.footer-bottom {
  margin-top: 56px; padding: 24px 0 30px; border-top: 1px solid var(--line-light);
  display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between;
  font-size: 0.86rem; color: rgba(250, 246, 240, 0.52);
}
.social-links { display: flex; gap: 10px; flex-wrap: wrap; }
.social-links a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border: 1px solid var(--line-light); border-radius: 999px; font-size: 0.9rem;
}
.social-links a:hover { background: rgba(250, 246, 240, 0.08); color: var(--bone); }


/* 18. UTILITIES ============================================================ */

.mt-2 { margin-top: 16px; } .mt-3 { margin-top: 26px; } .mt-4 { margin-top: 40px; }
.mb-3 { margin-bottom: 26px; } .mb-4 { margin-bottom: 40px; }


/* RESPONSIVE ===============================================================
   Breakpoints match Elementor's defaults: 1024 tablet, 767 mobile.
   900 is added for the header, which needs to collapse a little earlier. */

@media (max-width: 1024px) {
  :root { --section-y: 72px; }
  .col-4 { flex: 0 0 50%; max-width: 50%; }
  .col-2 { flex: 0 0 100%; max-width: 100%; }
  .site-footer .row > .col { flex: 0 0 33.333%; max-width: 33.333%; margin-bottom: 30px; }
  .site-footer .row > .col--brand { flex: 0 0 100%; max-width: 100%; }
  .gallery__item { flex: 0 0 33.333%; max-width: 33.333%; }
  .split { gap: 40px; }
  .story { gap: 34px; }
}

/* Tablet and below. Everything that is side by side on desktop stacks here,
   in one place, so a column never wraps into an accidental full width image. */
@media (max-width: 900px) {
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .header-actions .btn--donate { display: none; }   /* replaced by the mobile bar */
  .site-header__inner { min-height: 68px; }
  .drawer { top: 68px; }
  .brand__mark { width: 40px; height: 40px; }
  .brand__name { font-size: 1.3rem; }

  /* Hero: photograph first at a short crop, then the message and Donate */
  .hero__inner { flex-direction: column; }
  .hero__media { order: -1; flex: 1 1 auto; width: 100%; min-height: 0; aspect-ratio: 16 / 10; }
  .hero__media img { object-position: center 20%; }
  .hero__panel { flex: 1 1 auto; width: 100%; padding: 40px 28px 48px; }

  /* Split and story blocks stack, with a shorter crop so a portrait
     photograph does not take over the whole screen */
  .split, .story { flex-direction: column; gap: 30px; }
  .split--reverse .split__media, .story--reverse .story__media { order: -1; }
  .split__media, .split__body, .story__media, .story__body { flex: 1 1 auto; width: 100%; }
  .split__media .media--portrait, .story__media .media { aspect-ratio: 3 / 2; }
  .story { padding: 40px 0; }
  .face-strip { max-width: none; }
}

@media (max-width: 767px) {
  :root { --section-y: 58px; --gutter: 20px; }
  body { font-size: 16px; }

  .col, .col-2, .col-3, .col-4 { flex: 0 0 100%; max-width: 100%; }
  .row > .col + .col { margin-top: 22px; }
  .site-footer .row > .col,
  .site-footer .row > .col--brand { flex: 0 0 100%; max-width: 100%; margin-bottom: 24px; }

  /* Statistics stay two per row so the numbers keep their impact */
  .row--stats > .col { flex: 0 0 50%; max-width: 50%; margin-top: 26px; }

  .gallery__item { flex: 0 0 50%; max-width: 50%; }

  .hero__media { aspect-ratio: 5 / 4; }
  .hero__media img { object-position: center 18%; }
  .hero__panel { padding: 34px 20px 44px; }

  .split, .story { gap: 28px; }
  .split__media .media--portrait, .story__media .media { aspect-ratio: 4 / 5; }
  .story { padding: 38px 0; }

  .amounts__item { flex: 0 0 100%; max-width: 100%; }
  .amounts label { flex-direction: row; justify-content: space-between; min-height: 68px; text-align: left; padding: 14px 18px; }
  .amounts__hint { text-align: right; max-width: 55%; }

  .beats li { flex-direction: column; gap: 4px; }
  .beats__label { width: auto; padding-top: 0; }

  .impact-row__amt { width: 100%; }
  .bank-details dt { width: 100%; }
  .contact-line { flex-direction: column; gap: 4px; }
  .contact-line__label { width: auto; padding-top: 0; }

  .face-strip .media { width: 68px; height: 68px; }
  .btn { width: auto; }
  .btn-group .btn { flex: 1 1 100%; }
  /* Two facts per row rather than four stacked, so the strip stays compact */
  .trust-item { flex: 0 0 50%; max-width: 50%; padding: 9px 18px; }
  .trust-item__value { font-size: 1.2rem; }
  .trust-item__label { font-size: 0.86rem; }
  .footer-bottom { flex-direction: column; }
}

@media (max-width: 359px) {
  .row--stats > .col { flex: 0 0 100%; max-width: 100%; }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Print: keep it readable, drop the interface chrome */
@media print {
  .site-header, .mobile-bar, .drawer, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}


/* ==========================================================================
   19. MOBILE READABILITY PASS
   Added after a phone review of the live site. Three real problems:
   (a) Section labels (.eyebrow) were 12px with heavy tracking - too small.
   (b) Every source photo is portrait 3:4, but .hero__media and .card__media
       were landscape crop boxes, so heads were being cut off the top.
       The boxes are now portrait-leaning to match the actual photos.
   (c) .page-hero text sat over a background photo with no guaranteed scrim.
   ========================================================================== */

/* (a) Section labels */
.eyebrow { font-size: 0.84rem; letter-spacing: 0.13em; }

/* (b) Cards: portrait sources were losing the subject to a 4:3 crop */
.card__media { aspect-ratio: 4 / 5; }
.card__media img { object-position: center 16%; }

/* (c) Page hero: a fixed gradient scrim under the text, so legibility never
       depends on how bright the photo behind it happens to be. */
.page-hero__bg { opacity: 0.42; z-index: 0; }
.page-hero__bg img { object-position: center 26%; }
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,17,16,0.70) 0%, rgba(20,17,16,0.88) 100%);
  pointer-events: none;
}
.page-hero > .container { position: relative; z-index: 2; }
.page-hero h1, .page-hero p, .page-hero .lead { color: var(--bone); }
.page-hero .breadcrumb, .page-hero .breadcrumb a { color: rgba(250, 246, 240, 0.78); }

@media (max-width: 767px) {
  .eyebrow { font-size: 0.92rem; letter-spacing: 0.09em; gap: 8px; margin-bottom: 14px; }
  .eyebrow::before { width: 20px; }

  /* Hero photo is 1125x1500 (3:4). The old 5:4 box threw away 40% of a
     portrait frame, which is what cut the top of the head off. */
  .hero__media { aspect-ratio: 4 / 5; }
  .hero__media img { object-position: center 14%; }

  .card__media img { object-position: center 12%; }

  .page-hero { padding: 46px 0 42px; }
}


/* ==========================================================================
   20. HERO - OVERLAY VERSION
   Replaces the old split layout (photo block, then a separate dark text
   panel underneath) which read as two disconnected pieces on a phone.
   The photo is now full bleed with the message sitting on it.

   The scrim is deliberately clear through the upper-middle band: the subject
   and the puppy live there, and darkening that area is what kills this kind
   of photograph. All the weight is in the lower third, under the text.
   ========================================================================== */

.hero--overlay {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 640px;
  min-height: 86svh;
  background: var(--ink);
  overflow: hidden;
}

.hero--overlay .hero__photo { position: absolute; inset: 0; z-index: 0; }
.hero--overlay .hero__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 14%;
}

.hero--overlay .hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(20, 17, 16, 0.30) 0%,
    rgba(20, 17, 16, 0.04) 18%,
    rgba(20, 17, 16, 0.04) 46%,
    rgba(20, 17, 16, 0.42) 62%,
    rgba(20, 17, 16, 0.82) 76%,
    rgba(20, 17, 16, 0.96) 90%,
    rgba(20, 17, 16, 0.99) 100%
  );
}

.hero--overlay .hero__content {
  position: relative; z-index: 2;
  width: 100%;
  padding-bottom: clamp(40px, 5vw, 76px);
}

.hero--overlay .eyebrow { color: var(--amber); }
.hero--overlay h1 {
  color: var(--bone);
  max-width: 15ch;
  margin-bottom: 16px;
  text-shadow: 0 2px 24px rgba(20, 17, 16, 0.75), 0 1px 3px rgba(20, 17, 16, 0.45);
}
.hero--overlay .lead {
  color: rgba(250, 246, 240, 0.94);
  max-width: 40ch;
  margin-bottom: 28px;
  text-shadow: 0 2px 18px rgba(20, 17, 16, 0.80), 0 1px 3px rgba(20, 17, 16, 0.5);
}
.hero--overlay .hero__note { margin-top: 24px; color: rgba(250, 246, 240, 0.70); }

@media (max-width: 767px) {
  .hero--overlay {
    min-height: 620px;
    min-height: 92svh;
  }
  /* The sticky Donate bar sits over the bottom of the viewport, so the hero
     buttons need to clear it or they end up underneath. */
  .hero--overlay .hero__content { padding-bottom: 104px; }
  .hero--overlay .hero__photo img { object-position: center 8%; }
  .hero--overlay h1 { max-width: none; }
  .hero--overlay .lead { margin-bottom: 22px; }
  .hero--overlay .btn-group .btn { flex: 1 1 100%; }
  .hero--overlay .hero__note { margin-top: 18px; font-size: 0.84rem; }
}


/* ==========================================================================
   21. MOBILE DRAWER - REBUILT
   Problems this fixes:
   (a) The toggle picked up a magenta background from another plugin's focus
       state. Every state is now declared explicitly so nothing can leak in.
   (b) The old drawer was pinned to a hardcoded top: 76px, so it never lined
       up with the real header height and drifted once the page scrolled.
       It is now a full screen panel with its own header row.
   (c) There was no close affordance. The X sits exactly where the hamburger
       was, so it reads as the same button changing state.
   ========================================================================== */

/* (a) Lock down the toggle in every state */
.menu-toggle,
.menu-toggle:hover,
.menu-toggle:focus,
.menu-toggle:focus-visible,
.menu-toggle:active,
.drawer__close,
.drawer__close:hover,
.drawer__close:focus,
.drawer__close:focus-visible,
.drawer__close:active {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: none;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.menu-toggle:focus-visible,
.drawer__close:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

/* Hamburger turns into an X while the drawer is open */
.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after,
.drawer__close span,
.drawer__close span::before,
.drawer__close span::after {
  transition: transform .22s ease, opacity .16s ease, top .22s ease;
}
.menu-toggle[aria-expanded="true"] span { background: transparent; }
.menu-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* (c) The close button inside the drawer, drawn as a permanent X */
.drawer__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0; flex: none; cursor: pointer;
}
.drawer__close span {
  display: block; width: 20px; height: 2px; background: transparent; position: relative;
}
.drawer__close span::before,
.drawer__close span::after {
  content: ""; position: absolute; left: 0; top: 0;
  width: 20px; height: 2px; background: var(--ink);
}
.drawer__close span::before { transform: rotate(45deg); }
.drawer__close span::after  { transform: rotate(-45deg); }

/* (b) Full screen panel, so nothing depends on guessing the header height */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bone);
  padding: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex-direction: column;
}
.drawer.is-open { display: flex; }

.drawer__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; min-height: 76px; flex: none;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line);
}
.drawer__top .brand { min-height: 0; }

.drawer__nav { flex: 1 1 auto; padding: 8px var(--gutter) 0; }
.drawer .drawer__nav a:not(.btn) {
  display: block; padding: 17px 2px; font-size: 1.12rem; font-weight: 600;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line);
}
.drawer .drawer__nav a:last-child { border-bottom: 0; }

.drawer__foot {
  flex: none;
  padding: 20px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
.drawer__foot .btn { margin-top: 0; }

/* The sticky action bar would otherwise sit on top of the open drawer */
body.drawer-open .mobile-bar { display: none; }


/* ==========================================================================
   22. HERO BUTTON ROW
   Side by side instead of stacked, which returns roughly 70px of photo.
   Deliberately NOT 50/50: equal width would read as two equally important
   actions, and Donate is the point of the page. It gets ~1.35x the width.
   Also fixes the trust line being clipped by the sticky action bar.
   ========================================================================== */

.hero--overlay .btn-group {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 10px;
}

@media (max-width: 767px) {
  .hero--overlay .btn-group .btn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding: 15px 12px;
    font-size: 0.98rem;
    white-space: nowrap;
  }
  .hero--overlay .btn-group .btn--donate { flex: 1.35 1 0; }

  /* The sticky bar is taller than the old 104px allowance, which was
     cutting the last line of the trust note in half. */
  .hero--overlay .hero__content { padding-bottom: 132px; }
  .hero--overlay .hero__note {
    margin-top: 16px;
    font-size: 0.8rem;
    line-height: 1.45;
  }
}


/* ==========================================================================
   23. STICKY BAR - SCROLL TRIGGERED, DONATE WEIGHTED
   Reasoning:
   - The bar was competing with the hero's own Donate button, so the very
     first thing a visitor saw was the same ask twice. That is the part that
     reads as pestering, not the bar itself.
   - It now stays out of the way until the hero has been scrolled past, so
     the ask arrives after the reason for it, never before.
   - Both actions stay, but 2:1 in favour of Donate. A persistent bar with
     two equal buttons gives neither one full weight.
   - Fail safe: the bar is visible by default and JS hides it. If the script
     never runs, a visitor still sees both actions.
   ========================================================================== */

@media (max-width: 900px) {
  .mobile-bar {
    transition: transform .28s ease, opacity .2s ease;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  }
  .mobile-bar.is-stowed {
    transform: translateY(115%);
    opacity: 0;
    pointer-events: none;
  }
  .mobile-bar .btn { min-height: 48px; padding: 13px 10px; }
  .mobile-bar .btn--donate { flex: 2 1 0; }
  .mobile-bar .btn--ghost  { flex: 1 1 0; }
}

@media (max-width: 767px) {
  /* The bar is stowed while the hero is on screen, so the hero no longer
     needs to reserve room for it. That space goes back to the photograph. */
  .hero--overlay .hero__content { padding-bottom: 92px; }
}


/* ==========================================================================
   24. FOOTER LEGAL LINKS
   Cashfree requires the policy pages to be reachable from every page, and a
   hesitant donor looks for them before giving. Low key by design - present
   and findable, without competing with the real navigation above.
   ========================================================================== */

.footer-legal {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.footer-legal a {
  font-size: 0.88rem;
  text-decoration: none;
  opacity: 0.75;
}
.footer-legal a:hover { opacity: 1; }

@media (max-width: 767px) {
  .footer-legal { gap: 10px 18px; margin-top: 16px; }
  .footer-legal a { font-size: 0.9rem; }
}


/* ==========================================================================
   25. FOOTER - FIVE COLUMNS
   The policies moved out of the small print and into a named Legal column.
   A donor checking whether you are legitimate should not have to hunt in
   the copyright line for them. Widths rebalanced from 34 + 3x22 to
   28 + 4x18 so the brand column still leads.
   ========================================================================== */

.site-footer .row > .col { flex: 0 0 18%; max-width: 18%; }
.site-footer .row > .col--brand { flex: 0 0 28%; max-width: 28%; }

@media (max-width: 1024px) {
  .site-footer .row > .col { flex: 0 0 25%; max-width: 25%; margin-bottom: 30px; }
  .site-footer .row > .col--brand { flex: 0 0 100%; max-width: 100%; }
}

@media (max-width: 900px) {
  .site-footer .row > .col { flex: 0 0 50%; max-width: 50%; }
}

@media (max-width: 767px) {
  .site-footer .row > .col,
  .site-footer .row > .col--brand { flex: 0 0 100%; max-width: 100%; margin-bottom: 26px; }
}


/* ==========================================================================
   26. MONTHLY DONOR PORTAL
   Quiet and unhurried. This is the one place on the site that is not asking
   for anything, so nothing here uses the ember donate colour except the two
   sign in buttons, which are actions rather than appeals.
   ========================================================================== */

.portal-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(26px, 5vw, 42px);
  box-shadow: var(--shadow-md);
  max-width: 520px;
  margin: 0 auto;
}
.portal-card h2 { margin-bottom: 12px; }
.portal-card > p { color: var(--text-muted); }

.portal-label {
  display: block;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
  margin: 26px 0 10px;
}

.portal-phone-row {
  display: flex; align-items: stretch;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--bone);
}
.portal-prefix {
  display: flex; align-items: center; padding: 0 14px;
  font-weight: 700; color: var(--text-muted);
  border-right: 1px solid var(--line); background: var(--bone-deep);
}
.portal-phone-row input {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: transparent;
  padding: 16px 14px; font-size: 1.15rem; font-family: inherit; letter-spacing: 0.04em;
}
.portal-phone-row input:focus { outline: none; }
.portal-phone-row:focus-within { border-color: var(--ember); }

.portal-code-input {
  width: 100%;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bone);
  padding: 18px 14px;
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 700;
  text-align: center; letter-spacing: 0.4em; text-indent: 0.4em;
}
.portal-code-input:focus { outline: none; border-color: var(--ember); }

.portal-card .btn { margin-top: 22px; }

.portal-error {
  margin: 12px 0 0; font-size: 0.92rem; font-weight: 600;
  color: var(--ember-dark);
}
.portal-note { margin-top: 18px; font-size: 0.9rem; color: var(--text-muted); }
.portal-note--wide { margin-top: 34px; text-align: center; max-width: 46ch; margin-left: auto; margin-right: auto; }
.portal-muted { color: var(--text-muted); }

.portal-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--ember-dark);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---- signed in ---- */

.portal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; margin-bottom: 30px;
}
.portal-head h2 { margin-bottom: 6px; }

.portal-figures {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-bottom: 8px;
}
.portal-figure {
  flex: 1 1 160px;
  background: var(--bone-deep);
  border-radius: 14px;
  padding: 22px 24px;
}
.portal-figure__num {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.7rem, 5vw, 2.3rem); line-height: 1.1;
  color: var(--ink);
}
.portal-figure__label {
  display: block; margin-top: 6px;
  font-size: 0.86rem; color: var(--text-muted);
}

.portal-months {
  display: flex; gap: 10px;
  overflow-x: auto; padding-bottom: 6px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.portal-months::-webkit-scrollbar { height: 4px; }
.portal-months::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

.portal-month {
  flex: 0 0 auto; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 132px; text-align: left; cursor: pointer;
  padding: 14px 18px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  font: inherit; color: var(--ink);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.portal-month:hover { transform: translateY(-2px); }
.portal-month.is-active {
  background: var(--ink); border-color: var(--ink); color: var(--bone);
}
.portal-month__name { font-size: 0.9rem; font-weight: 600; }
.portal-month__amt {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
}
.portal-month.is-active .portal-month__amt { color: var(--amber); }

.portal-statement {
  margin-top: 28px;
  background: #fff;
  border: 1px solid var(--line); border-radius: 18px;
  padding: clamp(24px, 4vw, 36px);
  box-shadow: var(--shadow-md);
}
.portal-statement__top { border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 22px; }
.portal-amount {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.2rem, 7vw, 3rem); line-height: 1.05;
  margin: 6px 0 8px; color: var(--ink);
}
.portal-summary {
  font-size: 1.05rem; line-height: 1.6;
  padding: 18px 20px; margin-bottom: 4px;
  background: var(--bone-deep); border-radius: 12px;
}

.portal-lines { list-style: none; margin: 0; padding: 0; }
.portal-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.portal-line:last-child { border-bottom: 0; }
.portal-line__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.portal-line__cat { font-weight: 600; }
.portal-line__detail { font-size: 0.93rem; color: var(--text-muted); line-height: 1.5; }
.portal-line__amt {
  flex: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
}

.portal-empty {
  margin-top: 28px; padding: 26px;
  background: var(--bone-deep); border-radius: 14px;
  color: var(--text-muted);
}

@media (max-width: 767px) {
  .portal-head { flex-direction: column; gap: 10px; }
  .portal-figure { flex: 1 1 100%; padding: 18px 20px; }
  .portal-line { gap: 12px; }
  .portal-code-input { font-size: 1.7rem; letter-spacing: 0.3em; text-indent: 0.3em; }
}