/* =====================================================================
   Inner pages, brought onto the home page's theme.

   The home page is the reference. Its stylesheet (newtheme/css/style.css)
   is scoped to .sidco-nt so that it cannot restyle the rest of the site,
   which is exactly what makes the inner pages look like a different
   product: they are still on the old theme (main.css) with Montserrat,
   Playfair Display, #033a8a and 30px pill buttons.

   This file bridges the two. It changes no markup and no content - it
   re-points the old theme at the design's tokens and restyles the
   handful of components the inner pages actually use, so both halves of
   the site read as one theme.

   Scope: every component rule sits under .site-inner, which
   layouts/app.blade.php puts on <main>. The home page clears it
   (@section('main_class')), so nothing here can reach the design's own
   markup and the two stylesheets never fight.

   The design's tokens themselves (--blue, --saffron, --display, ...) are
   declared on a bare :root in style.css, so they are readable here.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Palette

   main.css is largely token-driven - var(--theme) and friends account
   for around 470 declarations - so re-pointing these six names at the
   design's palette re-colours most of the old theme in one step.
   style.css loads before this file, and main.css before that, so these
   win.
   --------------------------------------------------------------------- */
:root {
  --theme:      #0754A5;   /* was #033a8a - design --blue    */
  --theme-2:    #6FBE44;   /* was #7bbd39 - design --green   */
  --theme-3:    #FF781F;   /* was #ea6b13 - design --saffron */
  --header:     #152A3B;   /* was #202426 - design --heading */
  --text:       #5E6872;   /* was #727475 - design --ink-muted */
  --border:     #D4D9DE;   /* was #ebebeb - design --line    */
  --bg:         #F4F5F6;   /* was #f8f8f8 - design --paper-alt */
  ---box-shadow: 0 4px 16px rgba(7, 84, 165, .08);   /* design --shadow-sm */
}

/* The Partners and Benefits modules carry their own --ptn-* token block.
   It loads from the page body, after this file, so it would win anyway -
   the values were changed at the source instead, in
   resources/views/frontend/shared/_module_styles.blade.php. */


/* ---------------------------------------------------------------------
   2. Typography

   Mukta for body copy and Tiro Devanagari Hindi for headings, at the
   design's sizes. The old theme sets headings at weight 700; the design
   sets 400 and lets the serif carry the weight.
   --------------------------------------------------------------------- */
.site-inner {
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink);
}

.site-inner h1,
.site-inner h2,
.site-inner h3,
.site-inner h4,
.site-inner h5,
.site-inner h6 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.005em;
  color: var(--heading);
  text-wrap: balance;
}

.site-inner h1 { font-size: clamp(34px, 5vw, 52px); }
.site-inner h2 { font-size: clamp(28px, 3.4vw, 42px); }
.site-inner h3 { font-size: 26px; }
.site-inner h4 { font-size: 20px; }
.site-inner h5 { font-size: 17px; }
.site-inner h6 { font-size: 15px; }

/* The font has to reach everything, and main.css names "Montserrat" and
   "Playfair Display" from selectors as deep as five classes, so a plain
   `.site-inner p` loses. The :not() guards below do two jobs at once:
   they keep Font Awesome's icon font intact (it sets font-family on .fa,
   .fas, .far, .fal and .fab, with no !important), and because :not()
   carries the specificity of its argument, they give these two rules the
   weight to clear main.css's deepest chains without !important - which
   matters, because Bootstrap's own !important utilities (.text-white and
   friends) still have to win where a page asks for them. */
.site-inner *:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not([class*="fa-"]) {
  font-family: var(--body);
}

.site-inner h1:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not([class*="fa-"]),
.site-inner h2:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not([class*="fa-"]),
.site-inner h3:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not([class*="fa-"]),
.site-inner h4:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not([class*="fa-"]),
.site-inner h5:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not([class*="fa-"]),
.site-inner h6:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not([class*="fa-"]) {
  font-family: var(--display);
}

/* The eyebrows and small print the design sets in its mono face. These
   carry the same guards as the rule above so that they outweigh it -
   without them the blanket body-font rule, at six :not() classes,
   would put Mukta back on every eyebrow. */
.site-inner .sub-title:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not([class*="fa-"]),
.site-inner .breadcrumb-sub-title h5:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not([class*="fa-"]),
.site-inner .table thead th:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not([class*="fa-"]),
.site-inner .ptn-info__label:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not([class*="fa-"]),
.site-inner .ptn-breadcrumb__eyebrow:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not([class*="fa-"]),
.site-inner .ptn-crumbs li:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not([class*="fa-"]),
.site-inner .ptn-crumbs li a:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not([class*="fa-"]),
.site-inner .ptn-stat__label:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not([class*="fa-"]),
.site-inner .ptn-scheme__meta:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not([class*="fa-"]),
.site-inner .cuases-tab-header .nav .nav-link:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not([class*="fa-"]),
.site-inner .cuases-tab-header .nav .nav-link span:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not([class*="fa-"]),
.site-inner .causes-section .center:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not([class*="fa-"]) { font-family: var(--mono); }

.site-inner p { font-size: 17px; line-height: 1.68; }

/* A default, not an override: :where() contributes no specificity, so this
   sets the link colour only where nothing else has an opinion. Written as
   `.site-inner a` it weighed (0,1,1) and quietly repainted the text of every
   component that is an <a> - the CTA buttons on the blue bands turned dark
   blue on blue, and the breadcrumb links lost their white. */
:where(.site-inner) a { color: var(--blue); }
:where(.site-inner) a:hover { color: var(--saffron); }

/* The old theme's link-coloured helpers. */
.site-inner .text-secondary { color: var(--ink-muted) !important; }


/* ---------------------------------------------------------------------
   3. Buttons

   .theme-btn is the site's only button class (44 uses). main.css gives
   it a 30px radius, 500 weight, a 170px minimum width and a sliding
   ::before fill. The design's .btn is a 40px pill at 600 with a blue to
   sky gradient, so .theme-btn is made to match it.
   --------------------------------------------------------------------- */
.site-inner .theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-width: 0;
  padding: .82rem 1.6rem;
  border: 1.5px solid transparent;
  border-radius: 40px;
  font-family: var(--body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.68;
  letter-spacing: .01em;
  text-transform: none;
  background: linear-gradient(135deg, #0754A5, #00AEEF);
  box-shadow: 0 9px 22px rgba(7, 84, 165, .18);
  color: #fff;
  transition: background .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease;
}

/* The sliding fill belongs to the old look and fights the gradient. */
.site-inner .theme-btn::before,
.site-inner .theme-btn::after { display: none; }

.site-inner .theme-btn:hover {
  background: linear-gradient(135deg, #06478C, #009BD6);
  color: #fff;
  transform: translateY(-1px);
}

.site-inner .theme-btn i { margin-left: 0; }

/* A button sitting on a dark band reads as the outline variant. */
.site-inner .breadcrumb-wrapper .theme-btn,
.site-inner [class*="bg-cover"] .theme-btn.theme-btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, .7);
  box-shadow: none;
}

/* Bootstrap's own .btn is used in a few places; give it the same shape. */
.site-inner .btn {
  font-family: var(--body);
  font-weight: 600;
  border-radius: 40px;
  padding: .7rem 1.4rem;
}

.site-inner .btn-primary {
  background: linear-gradient(135deg, #0754A5, #00AEEF);
  border-color: transparent;
}

.site-inner .btn-primary:hover {
  background: linear-gradient(135deg, #06478C, #009BD6);
  border-color: transparent;
}

.site-inner .btn-outline-primary {
  border: 1.5px solid var(--blue);
  color: var(--blue);
  background: transparent;
}

.site-inner .btn-outline-primary:hover {
  background: var(--blue-100);
  border-color: var(--sky);
  color: var(--blue);
}


/* ---------------------------------------------------------------------
   4. Section headings

   .section-title .sub-title is the old theme's eyebrow: a capitalised
   bold line with a Font Awesome heart in front. The design's equivalent
   is .label - uppercase mono, wide tracking, and a saffron-to-green
   dash instead of an icon.
   --------------------------------------------------------------------- */
.site-inner .section-title .sub-title,
.site-inner .sub-title {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1rem;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue);
}

.site-inner .section-title .sub-title::before,
.site-inner .sub-title::before {
  content: "";
  width: 28px;
  height: 2px;
  flex: none;
  background: linear-gradient(90deg, #FF781F 0 48%, #6FBE44 48%);
}

/* The heart icon is the old eyebrow's marker; the dash replaces it. */
.site-inner .section-title .sub-title i,
.site-inner .sub-title i { display: none; }

.site-inner .section-title .sub-title.color-2,
.site-inner .section-title .sub-title.color-3 { color: var(--blue) !important; }

.site-inner .section-title h2 { font-size: clamp(28px, 3.4vw, 42px); }
.site-inner .section-title h2 span { color: var(--saffron); }
.site-inner .section-title p { margin-top: 1rem; color: var(--ink); }


/* ---------------------------------------------------------------------
   5. Page hero (breadcrumb band)

   Every inner page opens with .breadcrumb-wrapper over a background
   image, tinted by main.css with a flat var(--header) overlay. The
   design's hero is a blue wash with the mono eyebrow above the title,
   so the band is rebuilt in those terms.
   --------------------------------------------------------------------- */
.site-inner .breadcrumb-wrapper {
  border-bottom: 1px solid var(--line);
}

.site-inner .breadcrumb-wrapper::before {
  background:
    linear-gradient(100deg, rgba(4, 40, 84, .93) 0%,
                            rgba(7, 84, 165, .84) 48%,
                            rgba(0, 174, 239, .62) 100%);
}

.site-inner .breadcrumb-wrapper .page-heading { position: relative; z-index: 2; }

.site-inner .breadcrumb-sub-title h5 {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .88);
  margin-bottom: .9rem;
  line-height: 1.6;
}

.site-inner .breadcrumb-sub-title h1 {
  color: #fff;
  font-size: clamp(34px, 5vw, 52px);
}

.site-inner .breadcrumb-wrapper .breadcrumb-items li,
.site-inner .breadcrumb-wrapper .breadcrumb-items li a {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}


/* ---------------------------------------------------------------------
   6. Section rhythm and surfaces
   --------------------------------------------------------------------- */
.site-inner .section-padding { padding-block: var(--sec-y); }
.site-inner .section-bg      { background: var(--paper-alt); }

.site-inner .bg-theme        { background: var(--blue) !important; }
.site-inner .bg-theme-2      { background: var(--green) !important; }
.site-inner .bg-theme-3      { background: var(--saffron) !important; }
.site-inner .text-theme      { color: var(--blue) !important; }

/* The design's card, given to the blocks that really are cards - the three
   that the frontend actually uses. Form rows are deliberately not in this
   list: .single-personal-info and .newsletter-items each wrap a label and
   its input, so a border there drew a second box around every field. */
.site-inner .card,
.site-inner .single-contact-card,
.site-inner .contact-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

/* ---- Contact cards -------------------------------------------------

   These invert on hover: main.css fills them with var(--header), a near
   black, and turns the city, the phone, the e-mail and the address white.
   Two things had to be fixed.

   The colour: near black is not in this palette, so the fill is the
   design's blue instead. It is a flat colour rather than the gradient the
   buttons use, because a gradient is a background-image and cannot be
   animated between two values - painting one here made the colour snap
   while the lift and the shadow eased, which read as slow and broken. A
   solid background-color interpolates, so the whole card now moves on one
   short curve.

   (The first attempt put the gradient on a ::before at z-index:-1. A
   negative z-index child paints behind its parent's own background, so the
   card's white simply covered it - worth recording, because it looks
   correct in the stylesheet.) */
.site-inner .single-contact-card,
.site-inner .contact-card {
  align-items: stretch;
  padding: 14px;
  gap: 18px;
  background-color: var(--paper);
  box-shadow: 0 10px 28px rgba(16, 42, 67, .10);
  transition: background-color .18s ease,
              border-color .18s ease,
              transform .18s cubic-bezier(.2, .7, .3, 1),
              box-shadow .18s cubic-bezier(.2, .7, .3, 1);
}

.site-inner .single-contact-card:hover,
.site-inner .contact-card:hover {
  background-color: var(--blue);
  border-color: var(--blue);
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(7, 84, 165, .30);
}

/* The photo was a fixed 140px square in a column that stretches to the
   card's full height, so every card had a band of empty space under the
   image. It now fills the column. */
.site-inner .contact-card .top-part {
  flex: none;
  align-self: stretch;
}

.site-inner .contact-card .top-part img,
.site-inner .contact-card img {
  width: 100%;
  height: 100%;
  min-height: 130px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* Everything sitting on the blue. main.css paints these icons saffron with
   !important on hover, which is why they stayed orange on the blue panel. */
.site-inner .single-contact-card:hover h3,
.site-inner .single-contact-card:hover h4,
.site-inner .single-contact-card:hover h5,
.site-inner .single-contact-card:hover h6,
.site-inner .single-contact-card:hover p,
.site-inner .single-contact-card:hover span,
.site-inner .single-contact-card:hover .contact-items,
.site-inner .single-contact-card:hover .contact-items .content {
  color: #fff;
}

.site-inner .contact-page-wrap .single-contact-card:hover .contact-items a,
.site-inner .single-contact-card:hover .contact-items a { color: #fff; }

.site-inner .contact-page-wrap .single-contact-card:hover .contact-items .icon,
.site-inner .single-contact-card:hover .bottom-part .icon,
.site-inner .single-contact-card:hover .top-part .icon,
.site-inner .single-contact-card:hover .icon {
  color: #fff !important;
  background: none !important;
}

.site-inner .single-contact-card:hover .contact-items a:hover {
  color: #fff;
  text-decoration: underline;
}

.site-inner .single-contact-card:hover img {
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
}

.site-inner img { border-radius: var(--r-md); }
.site-inner .rounded-circle { border-radius: 50% !important; }


/* ---------------------------------------------------------------------
   7. Forms

   The design ships no form, so these are built from its tokens: the
   --line border, the 6px radius, Mukta at the body size, and the
   saffron focus ring the design uses for :focus-visible.
   --------------------------------------------------------------------- */
.site-inner .form-control,
.site-inner .form-select,
.site-inner .give-input,
.site-inner select,
.site-inner textarea,
.site-inner input[type="text"],
.site-inner input[type="email"],
.site-inner input[type="tel"],
.site-inner input[type="number"],
.site-inner input[type="password"],
.site-inner input[type="date"] {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: .7rem 1rem;
  box-shadow: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.site-inner .form-control:focus,
.site-inner .form-select:focus,
.site-inner select:focus,
.site-inner textarea:focus,
.site-inner input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(7, 84, 165, .12);
  outline: none;
}

.site-inner .form-control::placeholder,
.site-inner textarea::placeholder { color: var(--ink-faint); }

.site-inner label,
.site-inner .form-label {
  font-family: var(--body);
  font-weight: 600;
  color: var(--heading);
  margin-bottom: .4rem;
}

.site-inner .error,
.site-inner .invalid-feedback,
.site-inner .text-danger {
  font-family: var(--body);
  font-size: 14px;
  color: #C0392B;
}

/* The donation page's preset amount chips. */
.site-inner .amount-btn {
  font-family: var(--body);
  font-weight: 600;
  border-radius: 40px;
  border: 1.5px solid var(--line-strong);
  color: var(--heading);
  background: transparent;
}

.site-inner .amount-btn:hover,
.site-inner .amount-btn.active {
  border-color: var(--blue);
  background: var(--blue-100);
  color: var(--blue);
}


/* ---------------------------------------------------------------------
   8. Tables, lists and small print
   --------------------------------------------------------------------- */
.site-inner table { font-family: var(--body); }

.site-inner .table > :not(caption) > * > * {
  border-bottom-color: var(--line);
  padding: .8rem .9rem;
}

.site-inner .table thead th {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--paper-alt);
}

.site-inner .ptn-info__label {
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.site-inner .ptn-info__value {
  font-family: var(--body);
  color: var(--heading);
}


/* ---------------------------------------------------------------------
   9. Where the old theme out-specifies the bridge

   main.css reaches some of these components through a longer selector
   chain than .site-inner .<class>, so those rules win on specificity no
   matter what this file says above. Each block below mirrors the exact
   legacy chain with .site-inner in front, which puts the bridge one
   class ahead of it. The comment on each names the rule it answers, so
   the reason it is written this way is not a mystery later.

   Found by walking the live pages and, for every declaration in this
   file, computing which rule actually wins on each matching element -
   not by guesswork. Anything still beaten after this is beaten on
   purpose; see the note at the end.
   --------------------------------------------------------------------- */

/* answers .breadcrumb-wrapper .page-heading .breadcrumb-sub-title h5 */
.site-inner .breadcrumb-wrapper .page-heading .breadcrumb-sub-title h5 {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .88);
  margin-bottom: .9rem;
}

/* answers .breadcrumb-wrapper .page-heading .breadcrumb-sub-title h1 */
.site-inner .breadcrumb-wrapper .page-heading .breadcrumb-sub-title h1 {
  font-family: var(--display);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.005em;
  color: #fff;
}

/* answers .cta-banner-wrapper-3 .newsletter-items .form-clt .theme-btn */
.site-inner .cta-banner-wrapper-3 .newsletter-items .form-clt .theme-btn {
  min-width: 0;
  padding: .82rem 1.6rem;
  border-radius: 40px;
  background: linear-gradient(135deg, #0754A5, #00AEEF);
  box-shadow: 0 9px 22px rgba(7, 84, 165, .18);
  color: #fff;
}

.site-inner .cta-banner-wrapper-3 .newsletter-items .form-clt .theme-btn:hover {
  background: linear-gradient(135deg, #06478C, #009BD6);
}

/* answers .cta-banner-wrapper-3 .newsletter-items .form-clt input */
.site-inner .cta-banner-wrapper-3 .newsletter-items .form-clt input {
  font-family: var(--body);
  font-size: 16px;
  color: var(--ink);
  padding: .9rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 40px;
}

/* The donation page's amount chips are reached through a seven-class
   chain (.hero-1.style-hero-3 .hero-form .donate-amount .amount-btn...),
   which no reasonable selector here can outweigh, so these are the one
   place the bridge asserts itself. */
.site-inner .amount-btn {
  font-family: var(--body) !important;
  font-weight: 600 !important;
  border-radius: 40px !important;
}

/* --- Donation page ---------------------------------------------------
   answers .hero-1.style-hero-3 .hero-form .donate-now .theme-btn, which
   squares the corners and paints the button flat saffron. */
.site-inner .hero-1.style-hero-3 .hero-form .donate-now .theme-btn {
  border-radius: 40px;
  text-transform: none;
  background: linear-gradient(135deg, #0754A5, #00AEEF);
  color: #fff;
}

/* answers .hero-1.style-hero-3 .hero-form .donate-amount .amount-btn -
   the preset amount chips. --theme and --white are re-pointed above, so
   the active chip is already the design's blue; only its shape and
   weight are left. */
.site-inner .hero-1.style-hero-3 .hero-form .donate-amount .amount-btn {
  border-radius: 40px;
  border: 1.5px solid var(--line-strong);
  font-weight: 600;
  color: var(--heading);
}

.site-inner .hero-1.style-hero-3 .hero-form .donate-amount .amount-btn.active {
  border-color: var(--blue);
  color: #fff;
}

.site-inner .hero-1.style-hero-3 .hero-form .donate-amount .theme-btn {
  padding: .82rem 1.6rem;
}

/* --- Donation / CSR give form ---------------------------------------
   answers .causes-details-wrapper .details-content .give-form
   .give-purchase-form-wrap ..., which is five classes deep. */
.site-inner .causes-details-wrapper .details-content .give-form .give-purchase-form-wrap .single-personal-info input,
.site-inner .causes-details-wrapper .details-content .give-form .give-purchase-form-wrap .single-personal-info select,
.site-inner .causes-details-wrapper .details-content .give-form .give-purchase-form-wrap .single-personal-info textarea {
  padding: .8rem 1rem;
  line-height: 1.6;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
}

.site-inner .causes-details-wrapper .details-content .give-form .give-purchase-form-wrap .single-personal-info label,
.site-inner .causes-details-wrapper .details-content .give-form .give-purchase-form-wrap .donate-total-amount .give-donation-label {
  color: var(--heading);
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  margin-bottom: .45rem;
}

.site-inner .causes-details-wrapper .details-content .give-form .give-purchase-form-wrap .donate-total-amount .theme-btn {
  border-radius: 40px;
  font-weight: 600;
  line-height: 1.68;
  padding: .95rem 1.8rem;
  background: var(--saffron);
  box-shadow: 0 9px 15px rgba(255, 120, 31, .2);
}

/* --- Contact page ---------------------------------------------------
   answers .main-contact-form-items .form-clt input / textarea, which
   strip the border entirely. */
.site-inner .main-contact-form-items .form-clt input,
.site-inner .main-contact-form-items .form-clt textarea {
  padding: .9rem 1.2rem;
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.site-inner .main-contact-form-items .form-clt textarea { padding-bottom: 130px; }

/* answers .contact-page-wrap .contact-items a */
.site-inner .contact-page-wrap .contact-items a {
  color: var(--blue);
  font-size: 16px;
}

/* --- Programs tab strip ---------------------------------------------
   .event-tab-header already reads --bg and --theme, both re-pointed
   above; only the pill radius is the old theme's. */
.site-inner .event-tab-header .nav .nav-link { border-radius: 40px; }

/* --- Media page (/organization) --------------------------------------
   The page is four category blocks - Photos, Videos, Print Media,
   Electronic Media - and picking one swaps them for that gallery. So the
   blocks are the whole page, and main.css gave them a flat grey panel, a
   10px radius, a caption sitting underneath and a solid saffron active
   state.

   Rebuilt as the design's own picture card: the cover fills the card and
   the label sits over it in the blue gradient the design uses for its
   figure captions, on the paper surface with the hairline border and the
   soft shadow. Hover lifts the card and eases the cover in behind the
   label, the way the design's cards behave. */
.site-inner .causes-section .cuases-tab-header { margin: 0; }

.site-inner .cuases-tab-header .nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
}

.site-inner .cuases-tab-header .nav .nav-item { width: auto; }

.site-inner .cuases-tab-header .nav .nav-link {
  position: relative;
  display: block;
  height: 300px;
  padding: 0;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.site-inner .cuases-tab-header .nav .nav-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
  transition: transform .5s ease;
}

/* The label, over the cover. */
.site-inner .cuases-tab-header .nav .nav-link span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: block;
  padding: 1.6rem 1.1rem 1.05rem;
  background: linear-gradient(to top, rgba(7, 84, 165, .94), rgba(7, 84, 165, .60) 46%, rgba(7, 84, 165, 0));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .15em;
  text-align: left;
}

.site-inner .cuases-tab-header .nav .nav-link:hover {
  border-color: var(--blue);
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(7, 84, 165, .26);
}

.site-inner .cuases-tab-header .nav .nav-link:hover img { transform: scale(1.06); }

.site-inner .cuases-tab-header .nav .nav-link.active {
  border-color: var(--blue);
  box-shadow: 0 18px 38px rgba(7, 84, 165, .24);
}

/* main.css hangs a little pointer off the active block. */
.site-inner .cuases-tab-header .nav .nav-link.active::after {
  border-top-color: var(--blue);
}

@media (max-width: 1080px) {
  .site-inner .cuases-tab-header .nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .site-inner .cuases-tab-header .nav .nav-link { height: 250px; }
}

@media (max-width: 560px) {
  .site-inner .cuases-tab-header .nav { grid-template-columns: 1fr; gap: 16px; }
  .site-inner .cuases-tab-header .nav .nav-link { height: 190px; }
  .site-inner .cuases-tab-header .nav .nav-link span { font-size: 12px; letter-spacing: .12em; }
}


/* The media grid itself - photos, press cuttings and clips. Every tile is
   the same shape so the grid reads as a grid; the image lifts under a
   blue wash on hover, which is the card behaviour the design uses. */
.site-inner .gallery-wrapper { row-gap: 26px; }

.site-inner .gallery-wrapper .gallery-image > a.img-popup {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

.site-inner .gallery-wrapper img.img-fluid {
  height: 230px;
  width: 100%;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  display: block;
  transition: transform .5s ease;
}

.site-inner .gallery-wrapper .gallery-image > a.img-popup::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 84, 165, 0) 40%, rgba(7, 84, 165, .55));
  opacity: 0;
  transition: opacity .25s ease;
}

.site-inner .gallery-wrapper .gallery-image > a.img-popup:hover {
  border-color: var(--blue);
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(7, 84, 165, .24);
}

.site-inner .gallery-wrapper .gallery-image > a.img-popup:hover img { transform: scale(1.07); }
.site-inner .gallery-wrapper .gallery-image > a.img-popup:hover::after { opacity: 1; }

/* Print media carries an empty .gallery-content under each cutting; left
   to itself it adds a stray gap between the rows. */
.site-inner .gallery-wrapper .gallery-content:empty { display: none; }


/* Videos sit in their own flex wrapper (.gallery-wrappper, three p's, as
   main.css spells it) and are <video> posters rather than images. Same
   tile, plus a play badge so they read as clips. */
.site-inner .gallery-wrappper { gap: 26px; align-items: stretch; }

.site-inner .gallery-wrappper .gallery-image {
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

.site-inner .gallery-wrappper .gallery-image:hover {
  border-color: var(--blue);
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(7, 84, 165, .24);
}

.site-inner .gallery-wrappper .gallery-image video,
.site-inner .gallery-wrappper .gallery-image .videoTag {
  height: 230px;
  width: 100%;
  object-fit: cover;
  display: block;
  background-color: #0B2545;
}

/* A play triangle, drawn rather than set in an icon font so it cannot
   turn into a missing-glyph box. */
.site-inner .gallery-wrappper .gallery-image::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
  margin-left: 4px;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
}

.site-inner .gallery-wrappper.gallery.popup .gallery-image::before {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(7, 84, 165, .28);
  opacity: 1;
  visibility: visible;
  transition: background-color .25s ease;
}

.site-inner .gallery-wrappper.gallery.popup .gallery-image:hover::before {
  background: rgba(7, 84, 165, .48);
}


/* "No Data Available!" was a bare centred paragraph. */
.site-inner .causes-section .center {
  width: 100%;
  margin: 0;
  padding: 54px 24px;
  text-align: center;
  background: var(--paper-alt);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  color: var(--ink-muted);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.site-inner .causes-section .text-center { margin-top: 38px; }

/* --- CSR enquiry panel (/csr) ----------------------------------------
   main.css fills this form with a flat var(--theme-2). That token is now
   the design's green, and the design uses green as an accent - the header's
   top rule, the dash in front of a label - never as a field of colour this
   large, so re-pointing the token made the panel louder, not better.

   It is rebuilt as the panel the home page uses for the Green Card details:
   a barely-there blue-white wash, a hairline border, a 20px radius and the
   soft blue shadow. Everything inside it then reads on the same terms as
   the rest of the site. */
.site-inner .csr-form .give-form {
  padding: clamp(22px, 3vw, 34px);
  background: linear-gradient(145deg, #FFFFFF, #F5FBFF);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 14px 38px rgba(7, 84, 165, .10);
}

.site-inner .csr-form .give-form h3 {
  font-size: clamp(24px, 2.4vw, 30px);
  color: var(--heading);
}

.site-inner .csr-form .give-form label {
  color: var(--heading);
  font-weight: 600;
}

.site-inner .csr-form .give-form .give-input,
.site-inner .csr-form .give-form .give-textarea,
.site-inner .csr-form .give-form input,
.site-inner .csr-form .give-form textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: .75rem 1rem;
}

.site-inner .csr-form .give-form .give-input:focus,
.site-inner .csr-form .give-form .give-textarea:focus,
.site-inner .csr-form .give-form input:focus,
.site-inner .csr-form .give-form textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(7, 84, 165, .12);
  outline: none;
}

.site-inner .csr-form .give-form .give-textarea,
.site-inner .csr-form .give-form textarea { min-height: 130px; resize: vertical; }

/* The submit row sat hard against the right edge with a heavy drop shadow
   that only read as heavy because it was on green. */
.site-inner .csr-form .give-form .theme-btn {
  min-width: 150px;
  box-shadow: 0 9px 22px rgba(7, 84, 165, .18);
}

.site-inner .csr-form .give-form .btn-one,
.site-inner .csr-form .give-form .text-end { margin-top: 1.4rem; }

/* --- Green Card plan cards (/green-card-benefits, /green-card-plan) ---
   These are left on their own shape - the asymmetric 30px/10px corners
   main.css gives them, with the header's top corners cut to match. They
   were briefly pulled into the generic .card rule above, which set an 18px
   radius on the card while the header kept its 30px corner; the two curves
   no longer lined up and the card's white background showed through as a
   crescent above the green. The only thing corrected here is the 30px of
   padding main.css leaves above the header at desktop, which is the rest
   of that white band. */
.site-inner .greencard-application-wrapper .event-card-items {
  padding-top: 0;
}

/* --- Signed-in member pages (profile, dashboard, change password) -----
   The side panel is built in a pale green that predates this palette:
   #f9fff3 on a #dbeacd border, with #dbeacd again behind the current item
   and the avatar. Restated in the design's own surface, line and blue. */
.site-inner .asside-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.site-inner .asside-panel ul { padding: 14px; }

.site-inner .asside-panel ul li a {
  border-radius: 10px;
  color: var(--heading);
  font-weight: 500;
  gap: .2rem;
  transition: background-color .18s ease, color .18s ease;
}

.site-inner .asside-panel ul li a:hover,
.site-inner .asside-panel ul li.current > a {
  background: var(--blue-100);
  color: var(--blue);
}

.site-inner .asside-panel ul li a i { width: 22px; text-align: center; }

.site-inner .immediate-available-switch {
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 18px 16px;
}

.site-inner .immediate-available-switch .profileAvtar img {
  background: var(--blue-100);
  border: 1px solid var(--line);
  border-radius: 50%;
  object-fit: cover;
}

.site-inner .pro-detail h5 {
  font-size: 17px;
  margin-bottom: .1rem;
}

.site-inner .pro-detail p {
  color: var(--ink-muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

/* The mobile "Open Sidebar" bar. */
.site-inner .dashboard-menu {
  background: var(--blue);
  border-radius: 40px;
  font-family: var(--body);
}

/* The detail rows: main.css marks each label up as an <h6>, which the
   heading rule above then sets in the display serif - a serif label beside
   a sans value reads as a mistake. Labels go back to the body face.

   The same :not() guards as that rule, for the same reason: without them
   the blanket heading rule outweighs this one and the serif comes back. */
.site-inner .card-body .row > [class*="col-sm-3"] h6:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not([class*="fa-"]),
.site-inner .card-body .row > [class*="col-md-3"] h6:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not([class*="fa-"]) {
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--heading);
}

.site-inner .card-body .row > [class*="col-sm-9"],
.site-inner .card-body .row > [class*="col-md-9"] {
  color: var(--ink-muted);
}

.site-inner .card-body hr {
  border: 0;
  border-top: 1px solid var(--line);
  opacity: 1;
  margin: .9rem 0;
}

.site-inner .card-body > h3 { margin-bottom: 1.2rem; }

/* Deliberately NOT overridden: Bootstrap's .text-white and friends carry
   !important and are on headings that sit over a dark band, so they must
   keep winning. The bridge sets a heading colour for the normal case and
   lets those utilities take it back where a page asks for white. */