/* Penny Appeal South Asia — design-system support styles
   Scope: (1) Donate Now nav CTA, (2) WPForms styled to the approved system,
   (3) minimum 44px touch targets. Tokens match the approved design exactly. */

:root{
  --pas-orange:#E97C24; --pas-orange-dark:#D06B12;
  --pas-brown:#432E1A; --pas-brown-2:#382513;
  --pas-charcoal:#231F20; --pas-charcoal-soft:#2E2925;
  --pas-cream:#FAF6F0; --pas-peach:#FCEFE0; --pas-peach-card:#F9ECDD;
  --pas-border:#E8DCCB; --pas-text-body:#6B6360; --pas-text-soft:#8C8480;
}

/* ---------- 1. Donate Now as the approved CTA inside the nav ---------- */
.xpro-elementor-horizontal-navbar-nav li.pas-menu-cta > a.xpro-elementor-nav-link{
  background:var(--pas-orange);
  color:#fff !important;
  border-radius:6px;
  padding:13px 24px !important;
  font-weight:600;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  transition:background .25s ease;
}
.xpro-elementor-horizontal-navbar-nav li.pas-menu-cta > a.xpro-elementor-nav-link:hover{
  background:var(--pas-orange-dark);
  color:#fff !important;
}

/* ---------- 2. WPForms — match the approved form system ---------- */
.wpforms-container .wpforms-form{ font-family:'Figtree',sans-serif; }
.wpforms-container .wpforms-form .wpforms-field{ padding:0 0 18px 0; }
.wpforms-container .wpforms-form .wpforms-field-label{
  font-family:'Figtree',sans-serif;
  font-size:13px;
  font-weight:600;
  color:var(--pas-charcoal);
  margin-bottom:6px;
}
.wpforms-container .wpforms-form .wpforms-field-sublabel{
  font-size:12px; color:var(--pas-text-soft); font-weight:400;
}
.wpforms-container .wpforms-form input[type=text],
.wpforms-container .wpforms-form input[type=email],
.wpforms-container .wpforms-form input[type=tel],
.wpforms-container .wpforms-form input[type=number],
.wpforms-container .wpforms-form select,
.wpforms-container .wpforms-form textarea{
  width:100%;
  min-height:46px;
  padding:11px 14px;
  border:1.5px solid var(--pas-border);
  border-radius:6px;
  background:#fff;
  font-family:'Figtree',sans-serif;
  font-size:14px;
  color:var(--pas-charcoal);
  box-shadow:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.wpforms-container .wpforms-form textarea{ min-height:132px; resize:vertical; }
.wpforms-container .wpforms-form input:focus,
.wpforms-container .wpforms-form select:focus,
.wpforms-container .wpforms-form textarea:focus{
  outline:none;
  border-color:var(--pas-orange);
  box-shadow:0 0 0 3px rgba(233,124,36,.15);
}
.wpforms-container .wpforms-form input::placeholder,
.wpforms-container .wpforms-form textarea::placeholder{ color:#B4ADA8; }

/* Error state */
.wpforms-container .wpforms-form .wpforms-error{
  border-color:#C0392B !important;
  box-shadow:0 0 0 3px rgba(192,57,43,.12);
}
.wpforms-container .wpforms-form label.wpforms-error{
  border:none !important; box-shadow:none !important;
  color:#C0392B; font-size:12.5px; font-weight:500; margin-top:6px; display:block;
}

/* Submit button */
.wpforms-container .wpforms-form button[type=submit].wpforms-submit{
  background:var(--pas-orange);
  color:#fff;
  border:none;
  border-radius:6px;
  padding:15px 30px;
  min-height:48px;
  font-family:'Figtree',sans-serif;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:background .25s ease, transform .15s ease;
}
.wpforms-container .wpforms-form button[type=submit].wpforms-submit:hover{
  background:var(--pas-orange-dark); transform:translateY(-1px);
}
.wpforms-container .wpforms-form button[type=submit].wpforms-submit:focus-visible{
  outline:3px solid rgba(233,124,36,.45); outline-offset:2px;
}

/* Confirmation message */
.wpforms-confirmation-container-full{
  background:var(--pas-peach-card) !important;
  border:1px solid var(--pas-border) !important;
  border-radius:8px;
  color:var(--pas-charcoal);
  font-family:'Figtree',sans-serif;
}

/* ---------- 3. Accessible touch targets ---------- */
@media (max-width:1024px){
  .xpro-elementor-nav-link,
  .xpro-elementor-button,
  .pas-zakat__tab,
  .pas-zakat__cta{ min-height:44px; }
}

/* Placeholder slots must never be mistaken for finished imagery */
.pas-photo-slot{ outline:1px dashed rgba(206,127,60,.45); outline-offset:-6px; }


/* ---------- WPForms button: driven by WPForms custom properties ---------- */
div.wpforms-container-full, .wpforms-container{
  --wpforms-button-background-color:#E97C24;
  --wpforms-button-background-color-alt:#E97C24;
  --wpforms-button-text-color:#FFFFFF;
  --wpforms-button-border-color:#E97C24;
  --wpforms-button-border-radius:6px;
  --wpforms-button-size-height:48px;
  --wpforms-button-size-font-size:15px;
  --wpforms-field-border-color:#E8DCCB;
  --wpforms-field-border-radius:6px;
  --wpforms-field-text-color:#231F20;
  --wpforms-label-color:#231F20;
  --wpforms-label-sublabel-color:#8C8480;
  --wpforms-label-error-color:#C0392B;
  --wpforms-field-size-input-height:46px;
}
div.wpforms-container-full button[type=submit],
div.wpforms-container-full input[type=submit],
.wpforms-container button[type=submit].wpforms-submit{
  background:#E97C24 !important; color:#fff !important; border:none !important;
  border-radius:6px !important; padding:15px 30px !important; min-height:48px;
  font-family:'Figtree',sans-serif !important; font-size:15px !important; font-weight:600 !important;
  cursor:pointer; transition:background .25s ease, transform .15s ease;
}
div.wpforms-container-full button[type=submit]:hover,
.wpforms-container button[type=submit].wpforms-submit:hover{
  background:#D06B12 !important; transform:translateY(-1px);
}


/* ---------- pas-offcanvas-overflow-fix ----------
   Xpro's off-canvas mobile menu panel sits beyond the right edge while closed
   and was extending document scrollWidth at <=1024px, producing horizontal
   overflow on every page. Clip it at the document level and keep the closed
   panel out of the layout box. */
html, body{ overflow-x: hidden; max-width: 100%; }
@supports (overflow-x: clip){ html, body{ overflow-x: clip; } }
@media (max-width:1024px){
  .xpro-elementor-horizontal-navbar-wrapper{ position: fixed; }
  .xpro-elementor-horizontal-navbar-wrapper,
  .xpro-elementor-horizontal-navbar,
  .xpro-elementor-horizontal-menu-close{ max-width: 100vw; }
}


/* ---------- pas-touch-target-fix ----------
   Xpro renders the mobile menu toggler and its close button at 40px.
   Raise the hit area to the 44px accessibility minimum without changing
   the icon size or any visual treatment. */
.xpro-elementor-horizontal-menu-toggler,
.xpro-elementor-horizontal-menu-close{
  min-width:44px; min-height:44px;
  display:inline-flex; align-items:center; justify-content:center;
}


/* ---------- pas-button-parity ----------
   Mirrors the approved local .btn spec that Elementor/Xpro controls
   cannot express: the 1px hover lift and the outline-variant hover fills. */
.xpro-elementor-button{
  min-height:48px;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  transition:background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.xpro-elementor-button:hover{ transform:translateY(-1px); }
/* Solid orange -> dark orange */
.xpro-elementor-button[style*='233, 124, 36']:hover,
.pas-btn-primary:hover{ background:#D06B12 !important; border-color:#D06B12 !important; color:#fff !important; }
/* Outline variants fill on hover, matching local */
.pas-btn-outline-dark:hover{ background:#231F20 !important; color:#fff !important; }
.pas-btn-outline-orange:hover{ background:#E97C24 !important; color:#fff !important; }
.pas-btn-outline-white:hover{ background:#fff !important; color:#231F20 !important; }
/* Nav CTA keeps the same uppercase treatment as site buttons */
.xpro-elementor-horizontal-navbar-nav li.pas-menu-cta > a.xpro-elementor-nav-link{
  font-family:'Poppins',sans-serif; font-size:11.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; border-radius:5px;
}

/* ---------- pas-button-box-parity ----------
   Xpro applies typography to .xpro-button-text but keeps its own padding and
   border width on the anchor. Align both to the approved local .btn box. */
.xpro-elementor-button{ padding:16px 30px !important; border-width:1.5px !important; border-style:solid !important; }

/* ---------- pas-photo-parity ----------
   Photo containers replacing the former placeholders: cover-crop and keep
   the rounded corners of the approved local image treatment. */
.pas-photo{ background-size:cover !important; background-position:center center !important;
  background-repeat:no-repeat !important; border-radius:10px; overflow:hidden; }
.pas-photo::before{ content:''; display:block; }
/* Home hero: full-bleed photograph with the left-to-right scrim */
.pas-hero-photo{ background-size:cover !important; background-position:center right !important; }
@media (max-width:767px){ .pas-hero-photo{ background-position:center center !important; } }
/* Placeholder outline no longer applies to real photography */
.pas-photo{ outline:none !important; }

/* ---------- pas-no-underline ----------
   Astra underlines content-area links. The approved local build sets
   a{text-decoration:none} globally, so buttons and nav must not be underlined. */
.xpro-elementor-button,
.xpro-elementor-button:hover,
.xpro-elementor-button:focus,
.xpro-elementor-button .xpro-elementor-button-inner,
.xpro-elementor-button .xpro-button-text,
.pas-zakat__cta,
.pas-zakat__cta:hover,
.xpro-elementor-nav-link,
.xpro-elementor-nav-link:hover,
.wpforms-submit,
.elementor-widget-image a,
.pas-footer a,
.pas-footer a:hover{
  text-decoration:none !important;
}

/* ---------- pas-no-underline-content ----------
   The approved local build sets a{text-decoration:none} site-wide, including
   the inline 'Learn More' style links. Match that inside Elementor content. */
.elementor a,
.elementor a:hover,
.elementor-widget-text-editor a,
.elementor-widget-text-editor a:hover,
.elementor-widget-icon-list a,
.elementor-widget-heading a{
  text-decoration:none !important;
}
/* Keep an accessible affordance on inline links without a permanent rule */
.elementor-widget-text-editor a:focus-visible{ outline:2px solid #D06B12; outline-offset:2px; }

/* ---------- pas-hero-scrim ----------
   Elementor does not emit its background-overlay element here, so the hero
   scrim is reproduced exactly as the approved local .hero--photo::after. */
.pas-hero-photo{ position:relative; }
.pas-hero-photo::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(35,23,13,.94) 0%,
    rgba(35,23,13,.86) 30%,
    rgba(35,23,13,.58) 58%,
    rgba(35,23,13,.30) 100%);
}
.pas-hero-photo > *{ position:relative; z-index:1; }
/* Tablet: diagonal scrim (local ≤1024 rule) */
@media (max-width:1024px){
  .pas-hero-photo::after{
    background:linear-gradient(115deg, rgba(35,23,13,.95) 0%, rgba(35,23,13,.84) 45%, rgba(35,23,13,.55) 100%);
  }
}
/* Mobile: vertical scrim (local ≤767 rule) */
@media (max-width:767px){
  .pas-hero-photo::after{
    background:linear-gradient(180deg, rgba(35,23,13,.82) 0%, rgba(35,23,13,.88) 45%, rgba(35,23,13,.95) 100%);
  }
}

/* ---------- pas-gi-hero ----------
   Get Involved hero photograph with a left-to-right scrim so the white
   heading and body copy stay legible over the image. Mirrors the home
   hero treatment; brown remains the fallback beneath. */
.pas-gi-hero{ position:relative; background-size:cover !important; background-position:center center !important; }
.pas-gi-hero::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  /* Deepened slightly when the hero gained a second body paragraph, which
     reaches lower into the frame where the photograph is brighter. */
  background:linear-gradient(90deg,
    rgba(35,23,13,.95) 0%,
    rgba(35,23,13,.90) 32%,
    rgba(35,23,13,.70) 62%,
    rgba(35,23,13,.46) 100%);
}
.pas-gi-hero > *{ position:relative; z-index:1; }
@media (max-width:1024px){
  .pas-gi-hero::after{ background:linear-gradient(115deg, rgba(35,23,13,.94) 0%, rgba(35,23,13,.84) 45%, rgba(35,23,13,.58) 100%); }
}
@media (max-width:767px){
  .pas-gi-hero::after{ background:linear-gradient(180deg, rgba(35,23,13,.82) 0%, rgba(35,23,13,.88) 45%, rgba(35,23,13,.95) 100%); }
}

/* ---------- pas-nav-active ----------
   Local .primary-nav: current page and hover get the orange text plus a
   2px orange underline; every item reserves the same 2px so nothing shifts. */
.xpro-elementor-horizontal-navbar-nav > li > a.xpro-elementor-nav-link{
  border-bottom:2px solid transparent;
  padding-bottom:5px;
  transition:color 180ms ease, border-color 180ms ease;
}
.xpro-elementor-horizontal-navbar-nav > li > a.xpro-elementor-nav-link:hover,
.xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a.xpro-elementor-nav-link,
.xpro-elementor-horizontal-navbar-nav > li.current_page_item > a.xpro-elementor-nav-link,
.xpro-elementor-horizontal-navbar-nav > li.current-menu-ancestor > a.xpro-elementor-nav-link,
.xpro-elementor-horizontal-navbar-nav > li.current_page_parent > a.xpro-elementor-nav-link{
  color:#E97C24 !important;
  border-bottom-color:#E97C24;
}
/* The Donate CTA is a button, not a nav link - no underline on it */
.xpro-elementor-horizontal-navbar-nav > li.pas-menu-cta > a.xpro-elementor-nav-link,
.xpro-elementor-horizontal-navbar-nav > li.pas-menu-cta > a.xpro-elementor-nav-link:hover{
  border-bottom-color:transparent !important;
  color:#fff !important;
  padding-bottom:13px;
}

/* ---------- pas-rg-hero ----------
   Religious Giving hero: full-bleed Donate.jpeg with a left-to-right scrim
   so the white heading and body copy stay legible. Deep brown remains the
   fallback beneath the photograph. */
.pas-rg-hero{ position:relative; background-size:cover !important; background-position:center center !important; }
.pas-rg-hero::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(56,37,19,.94) 0%,
    rgba(56,37,19,.86) 32%,
    rgba(56,37,19,.60) 62%,
    rgba(56,37,19,.40) 100%);
}
.pas-rg-hero > *{ position:relative; z-index:1; }
@media (max-width:1024px){
  .pas-rg-hero::after{ background:linear-gradient(115deg, rgba(56,37,19,.95) 0%, rgba(56,37,19,.86) 45%, rgba(56,37,19,.60) 100%); }
}
@media (max-width:767px){
  .pas-rg-hero::after{ background:linear-gradient(180deg, rgba(56,37,19,.84) 0%, rgba(56,37,19,.90) 45%, rgba(56,37,19,.96) 100%); }
}

/* ---------- pas-ct-hero ----------
   Contact hero: full-bleed photograph with a left-to-right scrim so the
   white heading and body copy stay legible. Brown remains the fallback. */
.pas-ct-hero{ position:relative; background-size:cover !important; background-position:center center !important; }
.pas-ct-hero::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(56,37,19,.94) 0%,
    rgba(56,37,19,.86) 32%,
    rgba(56,37,19,.62) 62%,
    rgba(56,37,19,.42) 100%);
}
.pas-ct-hero > *{ position:relative; z-index:1; }
@media (max-width:1024px){
  .pas-ct-hero::after{ background:linear-gradient(115deg, rgba(56,37,19,.95) 0%, rgba(56,37,19,.86) 45%, rgba(56,37,19,.62) 100%); }
}
@media (max-width:767px){
  .pas-ct-hero::after{ background:linear-gradient(180deg, rgba(56,37,19,.84) 0%, rgba(56,37,19,.90) 45%, rgba(56,37,19,.96) 100%); }
}

/* ---------- pas-restoring-dignity ----------
   Homepage "Restoring Dignity And Hope": give the Mission / Vision / Beliefs
   copy a defined editorial panel instead of three loose paragraphs, so the
   section reads as one focused unit. The panel earns its structure without
   spending more vertical space than the loose version did: hairline rules
   replace the gaps, and the leading inside the panel is tighter than the
   intro paragraph's. Colours are the existing PAS tokens. */

/* Scoped to .elementor-10 (Home). Elementor element ids are unique only
   within a page: c0051/c0058/c0061/c0064/c0065/w0055 also exist on Who We Are,
   Get Involved, Donate, What We Do and Religious Giving, where these rules
   were painting an unintended panel. */
.elementor-10 .elementor-element.elementor-element-c0065{
  background-color:#FAF6F0 !important;
  border:1px solid #E8DCCB !important;
  border-radius:14px !important;
  padding:0 28px !important;
  gap:0 !important;
  margin-top:4px;
}

/* Each block, separated by a hairline rather than a gap. */
.elementor-10 .elementor-element.elementor-element-c0058,
.elementor-10 .elementor-element.elementor-element-c0061,
.elementor-10 .elementor-element.elementor-element-c0064{
  padding:16px 0 !important;
  gap:4px !important;
}
.elementor-10 .elementor-element.elementor-element-c0061,
.elementor-10 .elementor-element.elementor-element-c0064{
  border-top:1px solid #EDE3D5;
}

/* Block headings: tighter, deliberate, charcoal. */
.elementor-10 .elementor-element-c0065 .elementor-heading-title{
  color:#231F20;
  letter-spacing:-0.005em;
  line-height:1.3;
}

/* Block body copy: tighter leading than the intro paragraph. */
.elementor-10 .elementor-element-c0065 .elementor-widget-text-editor{
  line-height:1.62;
  color:#6B6360;
}
.elementor-10 .elementor-element-c0065 .elementor-widget-text-editor p:last-child{ margin-bottom:0; }

/* The intro paragraph carries a trailing ~23px margin-bottom from the base
   stylesheet. It sat inside the widget box and stacked on top of the column
   gap, the panel's margin and the panel's own top padding, which read as a
   large blank gap before "Our Mission". Only the trailing margin is removed;
   the gap, panel and padding are untouched. */
.elementor-10 .elementor-element.elementor-element-w0055 p:last-child{ margin-bottom:0; }

/* Photograph: a soft lift so it sits with the panel rather than beside it. */
.elementor-10 .elementor-element.elementor-element-c0051{
  box-shadow:0 18px 40px -26px rgba(35,23,13,.42);
}

@media (max-width:767px){
  .elementor-10 .elementor-element.elementor-element-c0065{ padding:0 20px !important; }
  .elementor-10 .elementor-element.elementor-element-c0058,
  .elementor-10 .elementor-element.elementor-element-c0061,
  .elementor-10 .elementor-element.elementor-element-c0064{ padding:15px 0 !important; }
}

/* ---------- pas-dignity-links ----------
   "Every Person Deserves Dignity" cards.
   1. Link colour matches the Join the Movement cards (#046BD2).
      Elementor's text_color styles the widget, not the <a> inside it, so the
      anchor colour has to be set here.
   2. Paragraphs carry a ~21.6px trailing margin from the base stylesheet;
      clearing it keeps the internal rhythm at the container's 14px gap.
   3. The link widget takes the leftover vertical space, so every Learn More
      link sits on the card's baseline and they line up across each row. */
.elementor-element-c0226 .elementor-widget-text-editor a{ color:#046BD2; text-decoration:none; }
.elementor-element-c0226 .elementor-widget-text-editor a:hover{ color:#034E96; }
.elementor-element-c0226 .elementor-widget-text-editor p:last-child{ margin-bottom:0; }
.elementor-element-c0226 .elementor-element-w0906,
.elementor-element-c0226 .elementor-element-w0907,
.elementor-element-c0226 .elementor-element-w0908,
.elementor-element-c0226 .elementor-element-w0909,
.elementor-element-c0226 .elementor-element-w0910,
.elementor-element-c0226 .elementor-element-w0911{ margin-top:auto; }


/* ---------- pas-nav-dropdown ----------
   'What We Do' submenu panel. Xpro paints the white on each <a> and leaves the
   <ul> transparent, so the panel itself has no corners to round and the gaps
   between links read as hairlines. Xpro exposes no border/radius control for
   the submenu, so the panel treatment is set here; colours, type, padding,
   width and shadow all remain Xpro widget settings. Scoped to the header
   menu widget so no other menu is affected. */
/* Desktop only: below 1025px Xpro swaps the dropdown for an off-canvas
   accordion, where a white rounded panel with overflow:hidden would clip the
   expanding submenu. The drawer keeps Xpro's own responsive styling. */
@media (min-width:1025px){
  .elementor-element-pashd07 ul.xpro-elementor-dropdown-menu{
    background:#FFFFFF !important;
    border:1px solid #EDE3D5 !important;
    border-radius:12px !important;
    overflow:hidden !important;
    padding:8px 0 !important;
  }
  .elementor-element-pashd07 ul.xpro-elementor-dropdown-menu > li > a{
    background-color:transparent !important;
    border:0 !important;
  }
}


/* ---------- pas-nav-baseline ----------
   Xpro renders top-level links with two different classes: plain items get
   .xpro-elementor-nav-link (padding 20px 0 5px, 2px bottom border) while items
   with a submenu get .dropdown-toggle (padding 20px 0, 1px border), and the
   chevron makes its flex line resolve 2px shorter. Together those put the
   'What We Do' and 'Religious Giving' labels 6.5px above the rest of the bar.
   Xpro exposes no control for the dropdown-toggle variant, so both are matched
   here: identical padding, identical border, and one shared box height
   (20 top + 14.5 line + 5 bottom + 2 border = 41.5px) so every label sits on
   the same baseline. Desktop only - below 1025px the bar becomes the drawer. */
@media (min-width:1025px){
  .elementor-element-pashd07 .xpro-elementor-horizontal-navbar-nav > li > a{
    min-height:41.5px;
    align-items:center;
  }
  .elementor-element-pashd07 .xpro-elementor-horizontal-navbar-nav > li > a.dropdown-toggle{
    padding-bottom:5px;
    border-bottom-width:2px;
  }
  /* The chevron sits in the same flex line as the label; its 14px line-height
     against the label's 14.5px shifted the line by 1px. Matched so the label
     and the chevron share one line box. */
  .elementor-element-pashd07 .xpro-elementor-horizontal-navbar-nav > li > a.dropdown-toggle > .xpro-dropdown-menu-toggle{
    line-height:14.5px;
  }
}


/* ---------- pas-wd-anchors ----------
   What We Do programme sections are anchor targets for the page's own
   programme nav and the header dropdown. scroll-margin-top keeps the heading
   clear of the fixed header when an anchor is followed; smooth behaviour is
   set on the root so in-page jumps glide rather than snap. */
html{ scroll-behavior:smooth; }
#where-most-needed,#feed-our-world,#education-first,#thirst-relief,
#orphan-widow-support,#emergency-relief,#livelihoods-economic-recovery,
#muslim-marriage-support{ scroll-margin-top:96px; }
@media (max-width:767px){
  #where-most-needed,#feed-our-world,#education-first,#thirst-relief,
  #orphan-widow-support,#emergency-relief,#livelihoods-economic-recovery,
  #muslim-marriage-support{ scroll-margin-top:78px; }
}

/* ---------- pas-rg-anchors ----------
   Religious Giving carries three in-page anchor targets that the header
   dropdown links to. Same offset as the What We Do anchors so the heading
   clears the fixed header; smooth scrolling is already set on the root above. */
#zakat,#sadaqah,#fitraana{ scroll-margin-top:96px; }
@media (max-width:767px){
  #zakat,#sadaqah,#fitraana{ scroll-margin-top:78px; }
}

/* ---------- pas-rg-photo-cards ----------
   Sadaqah Jariyah and "Who Receives Your Fitrana" cards: white caption text
   sits on a photograph. A flat
   overlay dark enough for 14.5px body copy buried the image, so the scrim is
   weighted to the bottom where the text actually sits - the photograph stays
   readable at the top and the caption clears AA. Scoped to page 13. */
.elementor-13 .elementor-element-rga08::before,
.elementor-13 .elementor-element-rga09::before,
.elementor-13 .elementor-element-rnr1::before,
.elementor-13 .elementor-element-rnr2::before,
.elementor-13 .elementor-element-rnr3::before{
  background-color:transparent !important;
  background-image:linear-gradient(180deg,
    rgba(35,31,32,.14) 0%,
    rgba(35,31,32,.34) 40%,
    rgba(35,31,32,.74) 70%,
    rgba(35,31,32,.90) 100%) !important;
  opacity:1 !important;
}

/* ---------- pas-design-system ----------
   Site-wide polish layer. Elements are tagged by pas-ui.js (cards, image
   frames, reveal targets) because Elementor emits per-element ids rather than
   shared classes, so there is nothing stable to hook in CSS alone.
   Every motion rule here is switched off under prefers-reduced-motion. */
:root{
  --pas-orange:#E97C24; --pas-orange-dark:#C9640F; --pas-charcoal:#231F20;
  --pas-radius-card:10px; --pas-radius-media:12px;
  --pas-ease:cubic-bezier(.22,.61,.36,1);
  --pas-shadow-rest:0 1px 2px rgba(35,31,32,.04), 0 10px 26px -18px rgba(35,31,32,.20);
  --pas-shadow-hover:0 2px 4px rgba(35,31,32,.05), 0 16px 36px -18px rgba(35,31,32,.30);
}

/* Cards: a very light resting shadow, a slightly deeper one on hover.
   Elementor's own per-card hover transform (translateY(-3px)) has higher
   specificity and still wins, so cards lift once, not twice. */
.pas-card{ box-shadow:var(--pas-shadow-rest); transition:box-shadow .3s var(--pas-ease), transform .3s var(--pas-ease), border-color .3s var(--pas-ease); }
.pas-card:hover{ box-shadow:var(--pas-shadow-hover); }
.pas-card:not(.pas-card--lifted):hover{ transform:translateY(-5px); }

/* Media frames: contain the image so a gentle zoom stays inside the radius. */
.pas-media{ overflow:hidden; border-radius:var(--pas-radius-media); }
.pas-media img{ display:block; transition:transform .35s var(--pas-ease); will-change:transform; }
.pas-media:hover img{ transform:scale(1.03); }

/* Scroll reveal: fade plus a short rise. Staggered per sibling by pas-ui.js. */
.pas-reveal{ opacity:0; transform:translateY(25px); }
.pas-ready .pas-reveal{ transition:opacity .7s var(--pas-ease), transform .7s var(--pas-ease); transition-delay:var(--pas-delay,0ms); }
.pas-reveal.is-in{ opacity:1; transform:none; }

/* Buttons: consistent lift and shadow on hover across widget types. */
.xpro-elementor-button, a.elementor-button{ transition:background-color .25s var(--pas-ease), color .25s var(--pas-ease), border-color .25s var(--pas-ease), transform .25s var(--pas-ease), box-shadow .25s var(--pas-ease); }
.xpro-elementor-button:hover, a.elementor-button:hover{ transform:translateY(-2px); box-shadow:0 10px 22px -12px rgba(35,31,32,.45); }

/* Keyboard focus: a visible brand-coloured ring everywhere. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
.xpro-elementor-button:focus-visible, .elementor-button:focus-visible{
  outline:2px solid var(--pas-orange) !important; outline-offset:3px; border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  .pas-reveal{ opacity:1 !important; transform:none !important; }
  .pas-ready .pas-reveal{ transition:none !important; }
  .pas-card, .pas-media img, .xpro-elementor-button, a.elementor-button{ transition:none !important; }
  .pas-card:hover, .pas-card:not(.pas-card--lifted):hover{ transform:none !important; }
  .pas-media:hover img{ transform:none !important; }
  .xpro-elementor-button:hover, a.elementor-button:hover{ transform:none !important; }
}

/* ---------- pas-hero-entrance ----------
   The hero is the one place the page animates on load rather than on scroll.
   Eyebrow, heading, description and CTA rise in sequence, tagged by pas-ui.js.
   Nothing is hidden before the script runs, so a JS failure simply means no
   animation, never an empty hero. Disabled under prefers-reduced-motion. */
.pas-hero-in{ opacity:0; transform:translateY(18px); }
.pas-ready .pas-hero-in{
  transition:opacity .75s var(--pas-ease), transform .75s var(--pas-ease);
  transition-delay:var(--pas-delay,0ms);
}
.pas-hero-in.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .pas-hero-in{ opacity:1 !important; transform:none !important; }
  .pas-ready .pas-hero-in{ transition:none !important; }
}

/* ---------- pas-footer-polish ----------
   Measured against the footer's real background (#382513):
     legal row  white @45%  = 4.15:1 at 13px  -> fails AA, raised to 72% (8.0:1)
     nav links  white @62%  = 6.49:1          -> already fine, hover to full white
     headings   #E9B27A     = 7.71:1          -> unchanged
   Link rows also gained vertical padding: they measured 23-25px tall, which is
   a small target for a pointer and far too small for a thumb. */
.elementor-element-pasft17 .elementor-widget-text-editor,
.elementor-element-pasft17 .elementor-widget-text-editor p,
.elementor-element-pasft17 .elementor-icon-list-text,
.elementor-element-pasft17 a .elementor-icon-list-text{
  color:rgba(255,255,255,.72) !important;
}
.elementor-element-pasft21 .elementor-icon-list-item > a{
  /* The 34px desktop minimum was padding every row out to 34px against 21.6px
     of text, which read as excessive spacing. Desktop rows now size to their
     content and the gaps come from the widgets' own space_between; the 44px
     touch minimum below 1025px is kept. */
  display:flex; align-items:flex-start;
  transition:color .22s var(--pas-ease), transform .22s var(--pas-ease);
}
/* One consistent alignment column for every footer icon, and a single source
   for the icon-to-text gap (Elementor otherwise adds its own 5px as well). */
.elementor-element-pasft21 .elementor-icon-list-icon{
  width:19px; min-width:19px; padding-right:0 !important;
  display:flex; justify-content:flex-start; align-items:center;
  min-height:21.6px;
}
/* Elementor keeps a 5px left padding on the text that resists overriding, so
   the remaining 4px of the 9px icon-to-text gap is added on the icon side. */
.elementor-element-pasft21 .elementor-icon-list-icon{ margin-right:4px; }
/* Wrapped contact lines align with the text above, not under the icon. */
.elementor-element-pasft21 .elementor-icon-list-item{ align-items:flex-start; }
.elementor-element-pasft21 .elementor-icon-list-item > a:hover .elementor-icon-list-text{
  color:#FFFFFF !important;
}
.elementor-element-pasft21 .elementor-icon-list-item > a:hover{ transform:translateX(2px); }
/* A hairline lifts the legal row off the columns above it. */
.elementor-element-pasft17{ border-top:1px solid rgba(255,255,255,.12); }
@media (max-width:1024px){
  .elementor-element-pasft21 .elementor-icon-list-item > a{ min-height:44px; }
}
@media (prefers-reduced-motion: reduce){
  .elementor-element-pasft21 .elementor-icon-list-item > a{ transition:none !important; }
  .elementor-element-pasft21 .elementor-icon-list-item > a:hover{ transform:none !important; }
}

/* ---------- pas-dignity-cards ----------
   "Every Person Deserves Dignity" programme cards on the home page.
   The photograph bleeds to the card edges via negative margins, so the frame
   is rounded on its top corners only and clips the hover zoom. The generic
   .pas-media treatment (all four corners) is overridden here.
   Scoped to .elementor-10 because Elementor ids repeat across pages. */
.elementor-10 .elementor-element-c0226 .elementor-widget-image{
  overflow:hidden;
  border-radius:10px 10px 0 0;
  line-height:0;
  /* Elementor caps widgets at max-width:100% of the card's content box, which
     would hold the photo 26px short of each card edge; the negative margins
     need the widget free to stretch the full card width. */
  /* The card's 26px side padding is cancelled by the widget's negative margins,
     so the frame spans calc(100% + 52px) of the card's content box. Elementor
     caps container children at max-width:100%, which has to be lifted here. */
  max-width:none !important;
  width:calc(100% + 52px) !important;
  align-self:stretch;
}
.elementor-10 .elementor-element-c0226 .elementor-widget-image img{
  display:block; width:100%;
  /* A true 16:9 at every breakpoint. The widget's pixel heights remain as a
     fallback should this stylesheet ever fail to load. */
  aspect-ratio:16 / 9;
  height:auto !important;
  object-fit:cover;
  transition:transform .4s var(--pas-ease);
}
.elementor-10 .elementor-element-c0226 > .e-con:hover .elementor-widget-image img{
  transform:scale(1.04);
}
/* A whisper of warmth over the photo on hover, never enough to dull it. */
.elementor-10 .elementor-element-c0226 .elementor-widget-image::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(233,124,36,0) 40%, rgba(35,31,32,.14) 100%);
  opacity:0; transition:opacity .4s var(--pas-ease);
}
.elementor-10 .elementor-element-c0226 .elementor-widget-image{ position:relative; }
.elementor-10 .elementor-element-c0226 > .e-con:hover .elementor-widget-image::after{ opacity:1; }

/* Card lift and shadow. The card itself stays still apart from the rise. */
.elementor-10 .elementor-element-c0226 > .e-con{
  overflow:hidden;
  transition:transform .3s var(--pas-ease), box-shadow .3s var(--pas-ease), border-color .3s var(--pas-ease);
}
.elementor-10 .elementor-element-c0226 > .e-con:hover{
  transform:translateY(-4px);
  box-shadow:0 2px 4px rgba(35,31,32,.05), 0 18px 38px -20px rgba(35,31,32,.32);
}
/* Learn More warms to brand orange as the card is hovered. */
.elementor-10 .elementor-element-c0226 > .e-con:hover .elementor-widget-text-editor a{
  color:#E97C24 !important;
}

@media (prefers-reduced-motion: reduce){
  .elementor-10 .elementor-element-c0226 .elementor-widget-image img,
  .elementor-10 .elementor-element-c0226 > .e-con,
  .elementor-10 .elementor-element-c0226 .elementor-widget-image::after{ transition:none !important; }
  .elementor-10 .elementor-element-c0226 > .e-con:hover{ transform:none !important; }
  .elementor-10 .elementor-element-c0226 > .e-con:hover .elementor-widget-image img{ transform:none !important; }
}

/* ---------- pas-logo-ratio ----------
   The logo is 1600x278 (5.7554:1). WordPress's generated sizes round their
   heights to whole pixels (768x133 is 5.7744:1), so whichever srcset candidate
   the browser picks would render the mark fractionally squashed. Pin the box to
   the source ratio and let the image sit inside it untouched. */
.elementor-element-pashd04 img,
.elementor-element-pasft02 img{
  aspect-ratio:1600 / 278;
  height:auto;
  object-fit:contain;
}

/* ---------- pas-gi-commit ----------
   Get Involved -> "Our commitment to volunteers". Scoped by the section's own
   element id, which exists only on this page (and its review copy). */

/* Desktop only: the photograph fills the column so both columns end level.
   Once the columns stack, a percentage height has no definite parent to
   resolve against and the image grows to absurd heights, so below 1025px
   it gets an explicit height instead. */
@media (min-width:1025px){
  .elementor-element-giE00 .elementor-element-cmR,
  .elementor-element-giE00 .elementor-element-cmImg,
  .elementor-element-giE00 .elementor-element-cmImg > .elementor-widget-container,
  .elementor-element-giE00 .elementor-element-cmImg figure{ height:100%; }
  .elementor-element-giE00 .elementor-element-cmImg img{ height:100%; min-height:460px; }
}
.elementor-element-giE00 .elementor-element-cmImg img{
  display:block; width:100%;
  object-fit:cover; object-position:center;
  border-radius:14px;
}
@media (max-width:1024px){
  .elementor-element-giE00 .elementor-element-cmImg img{ height:360px; }
}
@media (max-width:767px){
  .elementor-element-giE00 .elementor-element-cmImg img{ height:240px; }
}
/* Trailing paragraph margins would add dead space under every block. */
.elementor-element-giE00 .elementor-widget-text-editor p:last-child{ margin-bottom:0; }
/* Each check keeps a fixed 18px column, otherwise the icon shrinks to fit the
   longest line and the four bullet texts stop aligning with one another. */
.elementor-element-giE00 .elementor-element-cmList .elementor-widget-icon{
  flex:0 0 18px; width:18px; max-width:18px;
}
.elementor-element-giE00 .elementor-element-cmList .elementor-widget-icon .elementor-icon{ line-height:1; }
/* The icon sits on the first line of its heading rather than floating beside it. */
.elementor-element-giE00 .elementor-element-cmList img{ margin-top:1px; }
/* Supporting strip: the thicker left edge carries the brand orange. */
.elementor-element-giE00 .elementor-element-cmStrip{ border-left-color:#E97C24 !important; }

/* ---------- pas-gi-hero-benefits ----------
   Get Involved: hero + "What are the benefits of volunteering?" only.
   Scoped by those two section ids, which exist on this page alone. */

/* Trailing paragraph margins add dead space under the hero copy and each card. */
.elementor-element-c0009 .elementor-widget-text-editor p:last-child,
.elementor-element-giF00 .elementor-widget-text-editor p:last-child{ margin-bottom:0; }

/* Pale-orange icon tile: fixed square so all five match exactly. */
.elementor-element-giF00 [class*="elementor-element-bnBx"]{
  flex:0 0 46px; width:46px; height:46px;
}
.elementor-element-giF00 [class*="elementor-element-bnBx"] .elementor-widget-image{ line-height:0; }
.elementor-element-giF00 [class*="elementor-element-bnBx"] img{ display:block; width:22px; height:22px; }

/* Restrained hover: a warmer border and a small lift. These cards are not
   links, so the cursor must stay default and the lift stays subtle. This also
   overrides the site-wide .pas-card hover, which lifts further. */
.elementor-element-giF00 [class*="elementor-element-bnK"]{
  transition:border-color .25s var(--pas-ease), box-shadow .25s var(--pas-ease), transform .25s var(--pas-ease);
}
.elementor-element-giF00 [class*="elementor-element-bnK"]:hover{
  border-color:#E0A56A !important;
  transform:translateY(-3px);
  box-shadow:0 1px 2px rgba(35,31,32,.04), 0 12px 26px -16px rgba(35,31,32,.22);
}
.elementor-element-giF00 [class*="elementor-element-bnK"],
.elementor-element-giF00 [class*="elementor-element-bnK"] *{ cursor:default; }

@media (prefers-reduced-motion: reduce){
  .elementor-element-giF00 [class*="elementor-element-bnK"]{ transition:none !important; }
  .elementor-element-giF00 [class*="elementor-element-bnK"]:hover{ transform:none !important; }
}

@media (max-width:767px){
  .elementor-element-giF00 [class*="elementor-element-bnBx"]{ flex:0 0 42px; width:42px; height:42px; padding:10px; }
  .elementor-element-giF00 [class*="elementor-element-bnBx"] img{ width:20px; height:20px; }
}

/* ---------- pas-social ----------
   Footer "Connect With Us" icon links. Sized to a 44x44 touch target with a
   visible keyboard focus ring; the marks are inline SVG so they do not depend
   on an icon font being enqueued. */
.pas-social{ display:flex; flex-wrap:wrap; gap:12px; }
.pas-social__link{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; min-width:44px; min-height:44px;
  border-radius:10px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  color:#E97C24;
  text-decoration:none;
  transition:background-color .25s var(--pas-ease), color .25s var(--pas-ease), border-color .25s var(--pas-ease), transform .25s var(--pas-ease);
}
.pas-social__link svg{ width:19px; height:19px; display:block; fill:currentColor; }
/* Charcoal on orange, not white: white-on-orange measures 2.85:1, below the
   3:1 WCAG minimum for meaningful non-text content. */
.pas-social__link:hover,
.pas-social__link:focus-visible{
  background:#E97C24; border-color:#E97C24; color:#231F20;
}
.pas-social__link:hover{ transform:translateY(-2px); }
.pas-social__link:focus-visible{ outline:2px solid #E97C24; outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  .pas-social__link{ transition:none; }
  .pas-social__link:hover{ transform:none; }
}

/* ---------- pas-donate-hero ----------
   Donate hero. The subject (a woman carrying a child) sits left of centre, so
   the scrim is weighted to the far left where the copy sits and eases off
   quickly, keeping both faces visible rather than washed out. */
.pas-donate-hero{ position:relative; background-size:cover !important; background-position:center center !important; }
.pas-donate-hero::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  /* Donate.jpeg (a coin-jar photo, medium-to-bright throughout, no dark
     region of its own) measured well under 4.5:1 with a flat 0.35 overlay,
     so the brand's left-weighted warm veil is kept but tuned lighter than
     the previous portrait photo's gradient - verified against the actual
     glyph rects of the H1 and both paragraphs (worst-pixel 7.55:1 / 6.14:1
     / 5.66:1 at these stops). */
  background:linear-gradient(90deg,
    rgba(35,23,13,.88) 0%,
    rgba(35,23,13,.82) 28%,
    rgba(35,23,13,.63) 56%,
    rgba(35,23,13,.36) 80%,
    rgba(35,23,13,.25) 100%);
}
.pas-donate-hero > *{ position:relative; z-index:1; }
/* Below the tablet breakpoint the columns stack over the photo, so the veil
   becomes vertical and a little deeper to hold contrast across the width. */
@media (max-width:1024px){
  .pas-donate-hero::after{
    background:linear-gradient(180deg,
      rgba(35,23,13,.66) 0%,
      rgba(35,23,13,.74) 55%,
      rgba(35,23,13,.82) 100%);
  }
}
/* At mobile widths the hero's content-driven height forces a much heavier
   crop than tablet/desktop (only ~22% of Donate.jpeg's width stays visible).
   Center-center cut the leading "D" off the jar's DONATE label; measured
   the label's real position and 45% keeps the whole word and more of the
   coins in frame. */
@media (max-width:767px){
  .pas-donate-hero{ background-position:45% center !important; }
}
/* Trailing paragraph margins would add dead space under the hero copy. */
.pas-donate-hero .elementor-widget-text-editor p:last-child,
.elementor-element-dnIntro .elementor-widget-text-editor p:last-child{ margin-bottom:0; }

/* ---------- pas-social-contact ----------
   "Follow Our Work" card on Contact Us. White marks on the card's dark
   background, warming to brand orange on hover and keyboard focus. Inline SVG
   so the icons do not depend on an icon font being enqueued. */
.pas-social-contact{ display:flex; flex-wrap:wrap; gap:10px; }
.pas-social-contact__link{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; min-width:40px; min-height:40px;
  border-radius:9px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  color:#FFFFFF; text-decoration:none;
  transition:background-color .25s var(--pas-ease), color .25s var(--pas-ease), border-color .25s var(--pas-ease), transform .25s var(--pas-ease);
}
.pas-social-contact__link svg{ width:18px; height:18px; display:block; fill:currentColor; }
.pas-social-contact__link:hover,
.pas-social-contact__link:focus-visible{
  color:#E97C24; border-color:#E97C24; background:rgba(233,124,36,.12);
}
.pas-social-contact__link:hover{ transform:translateY(-2px); }
.pas-social-contact__link:focus-visible{ outline:2px solid #E97C24; outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  .pas-social-contact__link{ transition:none; }
  .pas-social-contact__link:hover{ transform:none; }
}

/* ---------- pas-dz ----------
   Donate page opening section: content left, photograph right.
   The hiding rule is gated behind .pas-dz-ready, added by the section's own
   script, so the copy is never stranded invisible if that script fails. */
.pas-dz-ready .pas-dz-item{ opacity:0; transform:translateY(22px); }
.pas-dz-ready .pas-dz-item.is-shown{
  opacity:1; transform:none;
  transition:opacity .75s var(--pas-ease), transform .75s var(--pas-ease);
  transition-delay:var(--pas-d,0ms);
}
/* Ivory frame around the photograph, with the zoom clipped to its corners. */
.pas-dz-frame{
  overflow:hidden;
  box-shadow:0 1px 2px rgba(35,31,32,.04), 0 18px 40px -24px rgba(35,31,32,.28);
}
.pas-dz-frame img{
  display:block; width:100%;
  object-fit:cover; object-position:center;
  transition:transform .4s var(--pas-ease);
  will-change:transform;
}
.pas-dz-frame:hover img{ transform:scale(1.03); }
/* Trailing paragraph margins would unbalance the two columns. */
.elementor-element-dzIntro .elementor-widget-text-editor p:last-child{ margin-bottom:0; }
@media (prefers-reduced-motion: reduce){
  .pas-dz-ready .pas-dz-item{ opacity:1; transform:none; }
  .pas-dz-ready .pas-dz-item.is-shown{ transition:none; }
  .pas-dz-frame img{ transition:none; }
  .pas-dz-frame:hover img{ transform:none; }
}

/* ---------- pas-why ----------
   "Why Donate to Penny Appeal South Asia?" block on the Donate page.
   Entrance is gated behind .pas-why-ready, added by the block's own script, so
   the cards are never stranded invisible if that script fails to run. */
.pas-why-ready .pas-why-item{ opacity:0; transform:translateY(20px); }
.pas-why-ready .pas-why-item.is-shown{
  opacity:1; transform:none;
  transition:opacity .7s var(--pas-ease), transform .7s var(--pas-ease);
  transition-delay:var(--pas-d,0ms);
}
/* Hover lift. Declaring a transform transition here also makes the site-wide
   card script mark these as already-lifted, so it will not add a second,
   larger lift of its own. */
.pas-why-card{
  transition:transform .28s var(--pas-ease), box-shadow .28s var(--pas-ease), border-color .28s var(--pas-ease);
}
.pas-why-card:hover{
  transform:translateY(-4px);
  border-color:#E0A56A;
  box-shadow:0 1px 2px rgba(35,31,32,.04), 0 14px 30px -18px rgba(35,31,32,.24);
}
/* Once revealed, the entrance transition must not fight the hover transform. */
.pas-why-ready .pas-why-item.is-shown.pas-why-card{
  transition:opacity .7s var(--pas-ease), transform .28s var(--pas-ease), box-shadow .28s var(--pas-ease), border-color .28s var(--pas-ease);
}
@media (prefers-reduced-motion: reduce){
  .pas-why-ready .pas-why-item{ opacity:1; transform:none; }
  .pas-why-ready .pas-why-item.is-shown{ transition:none; }
  .pas-why-card{ transition:none; }
  .pas-why-card:hover{ transform:none; }
}

/* Donate button in the opening section: a small lift on hover. */
.pas-dz-btn .xpro-elementor-button,
a.pas-dz-btn, .pas-dz-btn > a{
  transition:transform .25s var(--pas-ease), box-shadow .25s var(--pas-ease), background-color .25s var(--pas-ease);
}
.pas-dz-btn .xpro-elementor-button:hover,
a.pas-dz-btn:hover, .pas-dz-btn > a:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px -12px rgba(35,31,32,.45);
}
@media (prefers-reduced-motion: reduce){
  .pas-dz-btn .xpro-elementor-button, a.pas-dz-btn, .pas-dz-btn > a{ transition:none; }
  .pas-dz-btn .xpro-elementor-button:hover, a.pas-dz-btn:hover, .pas-dz-btn > a:hover{ transform:none; }
}

/* ---------- Ways to Donate: bank transfer card, support panel, copy buttons ---------- */

/* Scroll reveal, scoped to this section so it never depends on the global layer. */
.pas-wtd-ready .pas-wtd-item{ opacity:0; transform:translateY(22px); }
.pas-wtd-ready .pas-wtd-item.is-shown{
  opacity:1; transform:none;
  transition:opacity .75s var(--pas-ease), transform .75s var(--pas-ease);
  transition-delay:var(--pas-d,0ms);
}
@media (prefers-reduced-motion: reduce){
  .pas-wtd-ready .pas-wtd-item,
  .pas-wtd-ready .pas-wtd-item.is-shown{ opacity:1; transform:none; transition:none; }
}

/* White bank-details card: hairline border, soft shadow, generous radius. */
.pas-wtd-card{
  border:1px solid rgba(35,31,32,.09);
  box-shadow:0 1px 2px rgba(35,31,32,.04), 0 18px 40px -26px rgba(35,31,32,.30);
}

/* Dark support panel, matched to the card's silhouette. */
.pas-wtd-panel{
  box-shadow:0 1px 2px rgba(35,31,32,.06), 0 18px 40px -26px rgba(35,31,32,.45);
}

/* Label / value pairs. Flex only - no grid. */
.pas-bank{ display:flex; flex-wrap:wrap; column-gap:28px; margin:0; padding:0; }
.pas-bank__row{
  flex:1 1 100%; min-width:0;
  padding:14px 0;
  border-top:1px solid rgba(35,31,32,.08);
}
.pas-bank__row--half{ flex:1 1 calc(50% - 14px); }
.pas-bank__row:first-child{ border-top:0; padding-top:0; }
.pas-bank__label{
  display:block;
  font-family:"Figtree","Helvetica Neue",Arial,sans-serif;
  font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:#7A6F69; margin:0 0 5px;
}
.pas-bank__value{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-family:"Figtree","Helvetica Neue",Arial,sans-serif;
  font-size:16px; font-weight:600; line-height:1.45; color:#231F20;
  margin:0; overflow-wrap:anywhere;
}
.pas-bank__num{ font-variant-numeric:tabular-nums; letter-spacing:.02em; }

/* Copy control: lightweight, orange-accented, keyboard reachable. */
.pas-copy{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid rgba(233,124,36,.38);
  background:rgba(233,124,36,.08);
  color:#A85109;
  border-radius:8px;
  padding:4px 9px;
  font-family:"Figtree","Helvetica Neue",Arial,sans-serif;
  font-size:11.5px; font-weight:700; letter-spacing:.04em; line-height:1.2;
  cursor:pointer; -webkit-appearance:none; appearance:none;
  transition:background-color .22s var(--pas-ease), border-color .22s var(--pas-ease), transform .22s var(--pas-ease);
}
.pas-copy i{ font-size:11px; }
.pas-copy:hover{ background:rgba(233,124,36,.16); border-color:rgba(233,124,36,.60); transform:translateY(-1px); }
.pas-copy:focus-visible{ outline:2px solid #A85109; outline-offset:2px; }
.pas-copy.is-done{ background:rgba(35,31,32,.07); border-color:rgba(35,31,32,.20); color:#231F20; }
@media (prefers-reduced-motion: reduce){
  .pas-copy{ transition:none; }
  .pas-copy:hover{ transform:none; }
}

/* Contact Us button: charcoal on orange for a readable 5.7:1. */
.pas-wtd-btn .xpro-elementor-button,
a.pas-wtd-btn, .pas-wtd-btn > a{
  transition:transform .25s var(--pas-ease), box-shadow .25s var(--pas-ease), background-color .25s var(--pas-ease);
}
.pas-wtd-btn .xpro-elementor-button:hover,
a.pas-wtd-btn:hover, .pas-wtd-btn > a:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px -12px rgba(0,0,0,.6);
}
@media (prefers-reduced-motion: reduce){
  .pas-wtd-btn .xpro-elementor-button, a.pas-wtd-btn, .pas-wtd-btn > a{ transition:none; }
  .pas-wtd-btn .xpro-elementor-button:hover, a.pas-wtd-btn:hover, .pas-wtd-btn > a:hover{ transform:none; }
}

/* Keep the two columns level on desktop; the CTA sits at the panel foot. */

/* Below ~1180px the paired fields would wrap mid-value, so give each its own line. */
@media (max-width: 1180px){
  .pas-bank{ column-gap:0; }
  .pas-bank__row--half{ flex-basis:100%; }
}
/* ---------- pas-bank fix block: theme paragraph margins inflate every row ---------- */
/* Astra's paragraph margin added ~34px to each label/value pair. */
.elementor-element-wtdRows .pas-bank p.pas-bank__value{ margin:0; }
.elementor-element-wtdCardLead .elementor-widget-container p{ margin-bottom:0; }
/* The label inherited a 23.6px line-height meant for body copy. */
.pas-bank__label{ line-height:1.35; }
/* ---------- pas-dform: bank-transfer donation details form ---------- */
.pas-df-card{
  border:1px solid rgba(35,31,32,.09);
  box-shadow:0 1px 2px rgba(35,31,32,.04), 0 18px 40px -26px rgba(35,31,32,.30);
}
.pas-df-ready .pas-df-item{ opacity:0; transform:translateY(22px); }
.pas-df-ready .pas-df-item.is-shown{
  opacity:1; transform:none;
  transition:opacity .75s var(--pas-ease), transform .75s var(--pas-ease);
  transition-delay:var(--pas-d,0ms);
}
@media (prefers-reduced-motion: reduce){
  .pas-df-ready .pas-df-item,
  .pas-df-ready .pas-df-item.is-shown{ opacity:1; transform:none; transition:none; }
}

/* Two columns on desktop. The anti-spam honeypots WPForms injects are
   position:absolute, so they stay out of the flex flow and the pairs land
   as intended. Flex only - no grid. */
.pas-dform .wpforms-field-container{ display:flex; flex-wrap:wrap; column-gap:22px; }
.pas-dform .wpforms-field{ flex:1 1 100%; min-width:0; }
.pas-dform .wpforms-field.pas-half{ flex:1 1 calc(50% - 11px); }
@media (max-width:767px){
  .pas-dform .wpforms-field-container{ column-gap:0; }
  .pas-dform .wpforms-field.pas-half{ flex-basis:100%; }
}

/* The shared input styling predates any date input: the Pro Date/Time field is
   not available on this licence, so this one is a text field upgraded in JS. */
.pas-dform .wpforms-form input[type=date]{
  width:100%; min-height:46px; padding:11px 14px;
  border:1.5px solid var(--pas-border); border-radius:6px; background:#fff;
  font-family:'Figtree',sans-serif; font-size:14px; color:var(--pas-charcoal);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.pas-dform .wpforms-form input[type=date]:focus{
  outline:none; border-color:var(--pas-orange);
  box-shadow:0 0 0 3px rgba(233,124,36,.15);
}

/* Required marker, dark enough to read against white. */
.pas-dform .wpforms-required-label{ font-weight:700; margin-left:2px; }

.pas-dform .wpforms-field-description{
  font-family:'Figtree',sans-serif; font-size:12.5px; color:#7A6F69;
  line-height:1.6; margin-top:6px;
}

/* Submit: the brief asks for a lift plus a soft shadow. */
.pas-dform .wpforms-form button[type=submit].wpforms-submit{
  transition:background .25s var(--pas-ease), transform .25s var(--pas-ease), box-shadow .25s var(--pas-ease);
}
.pas-dform .wpforms-form button[type=submit].wpforms-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px -12px rgba(35,31,32,.5);
}
@media (prefers-reduced-motion: reduce){
  .pas-dform .wpforms-form button[type=submit].wpforms-submit{ transition:none; }
  .pas-dform .wpforms-form button[type=submit].wpforms-submit:hover{ transform:none; }
}
/* ---------- pas-dform error-state fix ----------
   WPForms 2.0 modern markup renders the message as <em class="wpforms-error">,
   not <label>, so the shared input error rule leaked a red glow onto the text
   while the invalid input itself was left unmarked. */
.pas-dform .wpforms-form em.wpforms-error{
  border:none !important;
  box-shadow:none !important;
  font-style:normal;
  font-family:'Figtree',sans-serif;
  font-size:12.5px;
  font-weight:500;
  margin-top:6px;
  display:block;
}
.pas-dform .wpforms-form input.wpforms-error,
.pas-dform .wpforms-form select.wpforms-error,
.pas-dform .wpforms-form textarea.wpforms-error{
  border-color:#C0392B !important;
  box-shadow:0 0 0 3px rgba(192,57,43,.12) !important;
}
/* WPForms' own modern sheet marks the invalid input via
   div.wpforms-container-full .wpforms-form .wpforms-field input.wpforms-error,
   so the wrapper class is included here to clear it decisively. */
.pas-dform .wpforms-form .wpforms-field.wpforms-has-error input.wpforms-error,
.pas-dform .wpforms-form .wpforms-field.wpforms-has-error select.wpforms-error,
.pas-dform .wpforms-form .wpforms-field.wpforms-has-error textarea.wpforms-error{
  border-color:#C0392B !important;
  box-shadow:0 0 0 3px rgba(192,57,43,.12) !important;
  outline-color:#C0392B;
}
/* ---------- pas-emergency-btn-mobile ----------
   Homepage "Emergency Appeal" section, mobile only. The xpro-button widget's
   padding control isn't responsive-aware (padding_mobile is silently ignored),
   so the tighter mobile padding is applied here instead. Desktop's 30px h /
   16px v padding and 11.5px font are left completely untouched; the mobile
   font-size reduction is set natively via typography_font_size_mobile on the
   widgets, which the site's own control framework does honour. Together this
   keeps both buttons on one line, matching the single-line pill look used on
   desktop, instead of the boxy 2-line wrap the plain 2-column width produced. */
@media (max-width:767px){
  .elementor-element-w0041 .xpro-elementor-button,
  .elementor-element-w0042 .xpro-elementor-button{
    padding:13px 12px !important;
  }
}
/* ---------- pas-gib ----------
   Get Involved: "Join Hands. Create Change." volunteer intro band.
   One soft, brand-coloured blob behind the photo - the section's only
   decorative element, kept faint enough to read as texture, not shape. */
.pas-gib{ position:relative; overflow:hidden; }
.pas-gib::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  top:-120px; right:-140px; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(233,124,36,.10) 0%, rgba(233,124,36,.04) 55%, rgba(233,124,36,0) 78%);
}
.pas-gib .elementor-element{ position:relative; z-index:1; }

/* Photograph: rounded, softly lifted off the page, gently colour-graded
   rather than left as a flat crop. A true 3:2 (the file's own ratio) reads
   more like an editorial print than the previous fixed-height strip; the
   widget's own pixel heights remain as a fallback should this sheet fail. */
.elementor-element-giB05{
  box-shadow:0 2px 4px rgba(35,31,32,.05), 0 24px 48px -28px rgba(35,31,32,.30);
  border-radius:22px;
}
.elementor-element-giB05 img{
  aspect-ratio:3 / 2;
  height:auto !important;
  object-fit:cover;
  filter:brightness(1.04) saturate(1.07);
  transition:transform .5s var(--pas-ease);
}
.elementor-element-giB05:hover img{ transform:scale(1.035); }
@media (prefers-reduced-motion: reduce){
  .elementor-element-giB05 img{ transition:none; }
  .elementor-element-giB05:hover img{ transform:none; }
}

/* Trailing paragraph margin would add dead space under the copy. */
.elementor-element-heroP2 .elementor-widget-container p:last-child{ margin-bottom:0; }

/* Scroll reveal: image settles in first, copy follows - scoped to this
   section only, independent of the global reveal layer. */
.pas-gib-ready .pas-gib-item{ opacity:0; transform:translateY(20px); }
.pas-gib-ready .pas-gib-item.is-shown{
  opacity:1; transform:none;
  transition:opacity .7s var(--pas-ease), transform .7s var(--pas-ease);
  transition-delay:var(--pas-d,0ms);
}
@media (prefers-reduced-motion: reduce){
  .pas-gib-ready .pas-gib-item,
  .pas-gib-ready .pas-gib-item.is-shown{ opacity:1; transform:none; transition:none; }
}
/* ---------- pas-cm-photo ----------
   "Our commitment to volunteers" (Get Involved). Photo only: radius,
   dimensions, object-fit and stretch-to-column-height are all untouched -
   the brief explicitly asked to keep those. Just a soft lift off the page
   and a very light, natural colour grade to match the other premium photo
   treatments on this page (pas-gib), scaled back since this one is meant
   to read as barely-there. */
.elementor-element-cmImg{
  box-shadow:0 2px 4px rgba(35,31,32,.05), 0 22px 44px -26px rgba(35,31,32,.28);
}
.elementor-element-cmImg img{
  filter:brightness(1.03) saturate(1.04);
}