/*
Theme Name: Boston-Muslim-Cemetery
Theme URI: http://bostonmuslimcemetery.org/
Description: A premium, sharia-compliant WordPress theme for the Boston Muslim Cemetery. Custom-built with Elementor support.
Version: 1.0.0
Author: NexVisible
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: boston-muslim-cemetery
*/

:root {
   --forest: #2C4A2E;
   --forest-md: #3D6640;
   --forest-lt: #5A8C5E;
   --forest-xl: #8FBF93;
   --forest-pale: #E8F0E9;
   --sand: #FBF7EE;
   --sand-md: #F5EFE0;
   --sand-dk: #E8DFC8;
   --gold: #B5813A;
   --gold-lt: #F0E4C8;
   --text: #1E2820;
   --text-md: #455448;
   --text-lt: #7A8C7C;
   --border: rgba(44, 74, 46, 0.13);
   --serif: 'Playfair Display', Georgia, serif;
   --sans: 'Jost', system-ui, sans-serif;
   --r: 6px;
   --rl: 14px;
}

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

html {
   scroll-behavior: smooth
}

body {
   font-family: var(--sans);
   font-size: 16px;
   line-height: 1.7;
   color: var(--text);
   background: var(--sand);
   -webkit-font-smoothing: antialiased;
   font-weight: 400
}

body.menu-open {
   overflow: hidden
}

.w {
   max-width: 1160px;
   margin: 0 auto;
   padding: 0 36px
}

section {
   padding: 88px 0
}

section.sm {
   padding: 60px 0
}

/* ── TYPE ── */
.eyebrow {
   font-size: 10.5px;
   letter-spacing: .18em;
   text-transform: uppercase;
   font-weight: 500;
   color: var(--forest-lt);
   display: block;
   margin-bottom: 10px
}

.divider {
   width: 36px;
   height: 2px;
   background: var(--forest-lt);
   margin: 18px 0
}

.sh {
   font-family: var(--serif);
   font-size: clamp(26px, 3.2vw, 42px);
   font-weight: 500;
   color: var(--forest);
   line-height: 1.12;
   margin-bottom: 16px
}

.sh em {
   font-style: italic;
   color: var(--forest-lt)
}

.bp {
   color: var(--text-md);
   font-size: 15.5px;
   line-height: 1.8;
   margin-bottom: 14px;
   font-weight: 400
}

/* ── BUTTONS ── */
.btn {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   padding: 11px 24px;
   border-radius: var(--r);
   font-family: var(--sans);
   font-size: 13.5px;
   font-weight: 500;
   cursor: pointer;
   text-decoration: none;
   transition: all .2s;
   border: none;
   letter-spacing: .02em
}

.btn-f {
   background: var(--forest);
   color: #fff
}

.btn-f:hover {
   background: var(--forest-md)
}

.btn-fo {
   background: transparent;
   color: var(--forest);
   border: 1.5px solid var(--forest)
}

.btn-fo:hover {
   background: var(--forest-pale)
}

.btn-g {
   background: var(--gold);
   color: #fff
}

.btn-g:hover {
   background: #9e6e30
}

.btn-ow {
   background: transparent;
   color: #fff;
   border: 1.5px solid rgba(255, 255, 255, .3)
}

.btn-ow:hover {
   background: rgba(255, 255, 255, .08)
}

/* ── TOPBAR ── */
.topbar {
   background: var(--forest);
   color: rgba(255, 255, 255, .65);
   font-size: 12.5px;
   padding: 8px 0
}

.topbar .w {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap
}

.topbar a {
   color: rgba(255, 255, 255, .7);
   text-decoration: none
}

.topbar a:hover {
   color: #fff
}

.tb-side {
   display: flex;
   gap: 18px;
   align-items: center
}

/* ── NAV ── */
nav {
   background: #fff;
   border-bottom: 1px solid var(--border);
   position: sticky;
   top: 0;
   z-index: 200;
   box-shadow: 0 1px 0 rgba(44, 74, 46, .06)
}

.admin-bar nav {
   top: 32px
}

@media (max-width: 782px) {
   .admin-bar nav {
      top: 46px
   }
}

.nav-in {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 70px;
   position: relative
}

.logo {
   display: flex;
   align-items: center;
   gap: 11px;
   text-decoration: none;
   flex-shrink: 0;
   position: relative;
   z-index: 210
}

.logo svg,
.logo img {
   width: 44px;
   height: 44px
}

.logo-t {
   line-height: 1.2
}

.logo-n {
   font-family: var(--serif);
   font-size: 16px;
   font-weight: 600;
   color: var(--forest);
   display: block
}

.logo-s {
   font-size: 9px;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--forest-lt);
   display: block
}

.nav-ul {
   display: flex;
   gap: 2px;
   align-items: center;
   list-style: none
}

.nav-ul a {
   font-size: 13.5px;
   font-weight: 400;
   color: var(--text-md);
   text-decoration: none;
   padding: 6px 12px;
   border-radius: var(--r);
   transition: all .15s;
   letter-spacing: .02em
}

.nav-ul a:hover {
   color: var(--forest);
   background: var(--forest-pale)
}

.nav-ul a.active,
.nav-ul li.current-menu-item a {
   color: var(--forest);
   font-weight: 500
}

.nav-donate,
.nav-ul li.nav-donate a {
   background: var(--forest) !important;
   color: #fff !important;
   padding: 7.5px 20px !important;
   border-radius: var(--r);
   display: inline-block;
   transition: all .15s
}

.nav-donate:hover,
.nav-ul li.nav-donate a:hover {
   background: var(--forest-md) !important;
   color: #fff !important
}

/* Hamburger Toggle Button */
.nav-toggle {
   display: none;
   flex-direction: column;
   justify-content: space-between;
   width: 24px;
   height: 18px;
   background: transparent;
   border: none;
   cursor: pointer;
   padding: 0;
   z-index: 210
}

.nav-toggle span {
   display: block;
   width: 100%;
   height: 2px;
   background-color: var(--forest);
   border-radius: 2px;
   transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1), opacity .3s ease
}

/* ── PAGE TABS (Used for preview switcher, we hide this in real WP or styling it fallback) ── */
.ptabs {
   display: none;
   flex-wrap: wrap;
   gap: 7px;
   padding: 14px 36px;
   background: var(--sand-md);
   border-bottom: 1px solid var(--border)
}

.ptabs strong {
   font-size: 10.5px;
   color: var(--text-lt);
   align-self: center;
   margin-right: 4px;
   letter-spacing: .06em;
   text-transform: uppercase
}

.ptab {
   padding: 5px 15px;
   border-radius: 40px;
   border: 1px solid var(--border);
   background: #fff;
   font-family: var(--sans);
   font-size: 12.5px;
   cursor: pointer;
   color: var(--text-md);
   transition: all .18s;
   font-weight: 400
}

.ptab.on {
   background: var(--forest);
   color: #fff;
   border-color: var(--forest);
   font-weight: 500
}

.ptab:hover:not(.on) {
   background: var(--forest-pale);
   color: var(--forest);
   border-color: var(--forest-lt)
}

/* ══════════════════════
   HOME HERO
══════════════════════ */
.hero {
   background: var(--forest);
   position: relative;
   overflow: hidden;
   padding: 96px 0 0
}

.hero-tex {
   position: absolute;
   inset: 0;
   background-image: repeating-linear-gradient(45deg, rgba(143, 191, 147, .04) 0, rgba(143, 191, 147, .04) 1px, transparent 0, transparent 50%);
   background-size: 18px 18px;
   pointer-events: none
}

.hero-inner {
   position: relative;
   z-index: 2;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 64px;
   align-items: end;
   padding-bottom: 72px
}

.hero-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: rgba(143, 191, 147, .14);
   border: 1px solid rgba(143, 191, 147, .28);
   color: #9ecda1;
   font-size: 10.5px;
   letter-spacing: .16em;
   text-transform: uppercase;
   padding: 5px 14px;
   border-radius: 40px;
   margin-bottom: 22px;
   font-weight: 500
}

.hero h1 {
   font-family: var(--serif);
   font-size: clamp(34px, 4.5vw, 58px);
   font-weight: 500;
   color: #fff;
   line-height: 1.08;
   margin-bottom: 20px
}

.hero h1 em {
   font-style: italic;
   color: #9ecda1
}

.hero-lead {
   color: rgba(255, 255, 255, .62);
   font-size: 16px;
   line-height: 1.78;
   margin-bottom: 32px;
   font-weight: 400;
   max-width: 440px
}

.hero-ctas {
   display: flex;
   gap: 10px;
   flex-wrap: wrap
}

.hero-verse {
   background: rgba(255, 255, 255, .06);
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: var(--rl);
   padding: 32px 28px;
   align-self: center
}

.hero-verse-label {
   font-size: 10px;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .35);
   margin-bottom: 16px;
   font-weight: 500
}

.hero-verse blockquote {
   font-family: var(--serif);
   font-size: 18px;
   font-style: italic;
   color: rgba(255, 255, 255, .88);
   line-height: 1.65
}

.hero-verse cite {
   display: block;
   margin-top: 14px;
   font-size: 11px;
   color: #9ecda1;
   font-style: normal;
   letter-spacing: .12em;
   text-transform: uppercase;
   font-weight: 500
}

.hero-bar {
   position: relative;
   z-index: 2;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   border-top: 1px solid rgba(255, 255, 255, .08)
}

.hb {
   padding: 22px 32px;
   text-align: center;
   border-right: 1px solid rgba(255, 255, 255, .08);
   background: rgba(0, 0, 0, .18)
}

.hb:last-child {
   border-right: none
}

.hb-n {
   font-family: var(--serif);
   font-size: 30px;
   color: #9ecda1;
   display: block;
   line-height: 1
}

.hb-l {
   font-size: 11px;
   color: rgba(255, 255, 255, .4);
   text-transform: uppercase;
   letter-spacing: .1em;
   margin-top: 4px
}

/* ── NAV CARDS ── */
.nav-cards-sec {
   background: var(--sand);
   padding: 72px 0
}

.nc-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
   margin-top: 40px
}

.nc {
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--rl);
   padding: 28px 24px;
   text-decoration: none;
   display: flex;
   flex-direction: column;
   gap: 12px;
   transition: all .2s;
   position: relative;
   overflow: hidden
}

.nc::before {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: var(--forest-lt);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .25s
}

.nc:hover {
   box-shadow: 0 4px 24px rgba(44, 74, 46, .1);
   transform: translateY(-2px);
   border-color: rgba(44, 74, 46, .2)
}

.nc:hover::before {
   transform: scaleX(1)
}

.nc-icon {
   width: 44px;
   height: 44px;
   background: var(--forest-pale);
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--forest-md)
}

.nc-icon svg,
.nc-icon img {
   max-width: 20px;
   max-height: 20px
}

.nc-label {
   font-size: 10px;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--forest-lt);
   font-weight: 500
}

.nc h3 {
   font-family: var(--serif);
   font-size: 19px;
   color: var(--forest);
   font-weight: 500;
   line-height: 1.2
}

.nc p {
   font-size: 13.5px;
   color: var(--text-md);
   line-height: 1.6;
   font-weight: 400;
   flex: 1
}

.nc-arrow {
   font-size: 18px;
   color: var(--forest-lt);
   margin-top: 4px;
   transition: transform .2s
}

.nc:hover .nc-arrow {
   transform: translateX(4px)
}

/* ── ABOUT / MISSION ── */
.about-sec {
   background: var(--forest-pale)
}

.two-col {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 72px;
   align-items: start
}

.quote-blk {
   background: var(--sand-md);
   border-left: 3px solid var(--gold);
   padding: 20px 24px;
   border-radius: 0 var(--r) var(--r) 0;
   margin: 22px 0
}

.quote-blk blockquote {
   font-family: var(--serif);
   font-size: 15.5px;
   font-style: italic;
   color: var(--forest);
   line-height: 1.65
}

.quote-blk cite {
   display: block;
   margin-top: 10px;
   font-size: 10.5px;
   color: var(--gold);
   font-style: normal;
   letter-spacing: .1em;
   text-transform: uppercase;
   font-weight: 500
}

.mission-duo {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px;
   margin-top: 4px
}

.mcard {
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--rl);
   padding: 26px
}

.mcard h3 {
   font-family: var(--serif);
   font-size: 18px;
   color: var(--forest);
   margin-bottom: 8px;
   font-weight: 500
}

.mcard p {
   font-size: 14px;
   color: var(--text-md);
   line-height: 1.7;
   font-weight: 400
}

.stat-row {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px;
   margin-bottom: 14px
}

.stat-c {
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--rl);
   padding: 18px 14px;
   text-align: center
}

.stat-n {
   font-family: var(--serif);
   font-size: 28px;
   color: var(--forest);
   font-weight: 600;
   display: block;
   line-height: 1
}

.stat-l {
   font-size: 11px;
   color: var(--text-lt);
   margin-top: 4px;
   font-weight: 400
}

/* ── RULES ── */
.rules-sec {
   background: var(--sand-md)
}

.rules-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
   margin-top: 32px
}

.rule {
   display: flex;
   gap: 12px;
   align-items: flex-start;
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--r);
   padding: 14px 16px
}

.rule-n {
   width: 26px;
   height: 26px;
   background: var(--forest-pale);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 11px;
   font-weight: 600;
   color: var(--forest);
   flex-shrink: 0
}

.rule p {
   font-size: 13.5px;
   color: var(--text-md);
   line-height: 1.55;
   font-weight: 400;
   padding-top: 2px
}

/* ── HOME CTA ── */
.home-cta {
   background: var(--forest);
   padding: 72px 0;
   text-align: center
}

.home-cta h2 {
   font-family: var(--serif);
   font-size: clamp(26px, 3vw, 38px);
   color: #fff;
   margin-bottom: 12px;
   font-weight: 500
}

.home-cta p {
   color: rgba(255, 255, 255, .6);
   font-size: 16px;
   margin-bottom: 30px;
   font-weight: 400
}

.cta-row {
   display: flex;
   gap: 10px;
   justify-content: center;
   flex-wrap: wrap
}

/* ══════════════════════
   PAGE HERO (inner pages)
══════════════════════ */
.page-hero {
   background: var(--forest);
   padding: 60px 0 50px;
   position: relative;
   overflow: hidden
}

.page-hero::after {
   content: '';
   position: absolute;
   inset: 0;
   background-image: repeating-linear-gradient(45deg, rgba(143, 191, 147, .04) 0, rgba(143, 191, 147, .04) 1px, transparent 0, transparent 50%);
   background-size: 18px 18px;
   pointer-events: none
}

.page-hero .w {
   position: relative;
   z-index: 2
}

.breadcrumb {
   font-size: 12px;
   color: rgba(255, 255, 255, .4);
   margin-bottom: 14px
}

.breadcrumb span {
   color: rgba(255, 255, 255, .75)
}

.page-hero h1 {
   font-family: var(--serif);
   font-size: clamp(30px, 4vw, 50px);
   color: #fff;
   font-weight: 500;
   margin-bottom: 10px
}

.page-hero p {
   color: rgba(255, 255, 255, .58);
   font-size: 16px;
   font-weight: 400;
   max-width: 520px
}

/* ══════════════════════
   SERVICES
══════════════════════ */
.info-pill {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: var(--forest-pale);
   border: 1px solid rgba(44, 74, 46, .18);
   border-radius: 40px;
   padding: 4px 13px;
   font-size: 12px;
   color: var(--forest-md);
   font-weight: 500
}

.proc-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 0;
   border: 1px solid var(--border);
   border-radius: var(--rl);
   overflow: hidden;
   margin-top: 36px
}

.proc {
   padding: 26px 22px;
   border-right: 1px solid var(--border);
   background: #fff
}

.proc:last-child {
   border-right: none
}

.proc-n {
   font-family: var(--serif);
   font-size: 38px;
   color: var(--forest-pale);
   font-weight: 600;
   line-height: 1;
   margin-bottom: 10px
}

.proc-t {
   font-size: 13.5px;
   font-weight: 500;
   color: var(--forest);
   margin-bottom: 7px
}

.proc-b {
   font-size: 12.5px;
   color: var(--text-md);
   line-height: 1.6;
   font-weight: 400
}

.proc-price {
   font-family: var(--serif);
   font-size: 21px;
   color: var(--forest-md);
   margin-top: 10px;
   font-weight: 500
}

.proc-sub {
   font-size: 11px;
   color: var(--text-lt);
   line-height: 1.5;
   margin-top: 4px;
   font-weight: 400
}

.charges-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 14px;
   margin-top: 28px
}

.cc {
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--rl);
   padding: 20px 22px
}

.cc h4 {
   font-size: 11px;
   color: var(--text-lt);
   text-transform: uppercase;
   letter-spacing: .08em;
   margin-bottom: 8px;
   font-weight: 500
}

.cc-amt {
   font-family: var(--serif);
   font-size: 26px;
   color: var(--forest);
   font-weight: 500
}

.cc-note {
   font-size: 11.5px;
   color: var(--text-lt);
   margin-top: 5px;
   font-weight: 400
}

.svc-contact {
   background: var(--forest-pale);
   border-radius: var(--rl);
   padding: 20px 24px;
   margin-top: 18px
}

.svc-contact h4 {
   font-size: 13px;
   font-weight: 500;
   color: var(--forest);
   margin-bottom: 9px
}

.sc-phones {
   display: flex;
   flex-wrap: wrap;
   gap: 7px 22px;
   font-size: 13.5px;
   color: var(--text-md);
   font-weight: 400
}

.partner-blk {
   background: var(--sand-md);
   border: 1px solid var(--border);
   border-radius: var(--rl);
   padding: 28px 30px;
   margin-top: 28px
}

.pbadge {
   display: inline-block;
   background: var(--gold-lt);
   color: var(--gold);
   font-size: 10px;
   font-weight: 500;
   padding: 3px 10px;
   border-radius: 40px;
   margin-bottom: 9px;
   letter-spacing: .04em
}

.partner-blk h3 {
   font-family: var(--serif);
   font-size: 21px;
   color: var(--forest);
   margin-bottom: 8px;
   font-weight: 500
}

.partner-blk p {
   font-size: 14px;
   color: var(--text-md);
   line-height: 1.72;
   font-weight: 400
}

.pcontacts {
   display: flex;
   flex-wrap: wrap;
   gap: 6px 22px;
   margin-top: 14px;
   font-size: 13px;
   color: var(--text-md);
   font-weight: 400
}

.pcontacts a {
   color: var(--forest-md);
   text-decoration: none
}

.pcontacts a:hover {
   text-decoration: underline
}

/* ══════════════════════
   FIND A GRAVE
══════════════════════ */
.search-panel {
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--rl);
   padding: 30px;
   box-shadow: 0 2px 12px rgba(44, 74, 46, .05)
}

.form-row {
   display: grid;
   grid-template-columns: 1fr 1fr auto;
   gap: 12px;
   align-items: end;
   margin-bottom: 20px
}

.fg {
   display: flex;
   flex-direction: column;
   gap: 6px
}

.fg label {
   font-size: 12px;
   font-weight: 500;
   color: var(--text-md);
   letter-spacing: .04em
}

.fi {
   padding: 10px 14px;
   border: 1px solid var(--border);
   border-radius: var(--r);
   font-family: var(--sans);
   font-size: 14px;
   color: var(--text);
   background: var(--sand);
   outline: none;
   transition: border-color .2s;
   font-weight: 400
}

.fi:focus {
   border-color: var(--forest-lt);
   background: #fff
}

.tbl-wrap {
   border: 1px solid var(--border);
   border-radius: var(--rl);
   overflow: hidden;
   overflow-x: auto
}

.gtbl {
   width: 100%;
   border-collapse: collapse;
   font-size: 13.5px
}

.gtbl th {
   text-align: left;
   padding: 10px 16px;
   background: var(--forest);
   color: rgba(255, 255, 255, .82);
   font-size: 11px;
   letter-spacing: .07em;
   text-transform: uppercase;
   font-weight: 500
}

.gtbl th:first-child {
   border-radius: 0
}

.gtbl th:last-child {
   border-radius: 0
}

.gtbl td {
   padding: 11px 16px;
   border-bottom: 1px solid var(--border);
   color: var(--text-md);
   font-weight: 400
}

.gtbl tr:last-child td {
   border-bottom: none
}

.gtbl tbody tr:hover td {
   background: var(--forest-pale)
}

.tbl-meta {
   font-size: 12px;
   color: var(--text-lt);
   margin-bottom: 9px;
   font-weight: 400
}

.grave-empty {
   text-align: center;
   padding: 44px 0;
   color: var(--text-lt);
   font-size: 14px
}

.cant-find {
   background: var(--sand-md);
   border: 1px solid var(--border);
   border-radius: var(--rl);
   padding: 28px 32px;
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 32px;
   align-items: center;
   margin-top: 28px
}

.cant-find h3 {
   font-family: var(--serif);
   font-size: 19px;
   color: var(--forest);
   margin-bottom: 6px;
   font-weight: 500
}

.cant-find p {
   font-size: 14px;
   color: var(--text-md);
   font-weight: 400
}

.cant-loc {
   text-align: right
}

.cant-loc p {
   font-family: var(--serif);
   font-size: 18px;
   color: var(--forest);
   font-weight: 500;
   line-height: 1.4
}

.cant-loc a {
   font-size: 12.5px;
   color: var(--forest-lt);
   text-decoration: none;
   display: inline-block;
   margin-top: 6px
}

.cant-loc a:hover {
   text-decoration: underline
}

/* ══════════════════════
   CONTACT
══════════════════════ */
.contact-cards-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 14px;
   margin-bottom: 44px
}

.ccard {
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--rl);
   padding: 22px;
   text-align: center
}

.ccard-icon {
   width: 44px;
   height: 44px;
   background: var(--forest-pale);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 11px;
   color: var(--forest-md)
}

.ccard-icon svg {
   width: 20px;
   height: 20px
}

.ccard h4 {
   font-size: 13.5px;
   font-weight: 500;
   color: var(--forest);
   margin-bottom: 5px
}

.ccard p {
   font-size: 12.5px;
   color: var(--text-md);
   line-height: 1.65;
   font-weight: 400
}

.ccard a {
   color: var(--forest-md);
   text-decoration: none
}

.ccard a:hover {
   text-decoration: underline
}

.contact-layout {
   display: grid;
   grid-template-columns: 1fr 400px;
   gap: 36px
}

.cform {
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--rl);
   padding: 34px
}

.cform h3 {
   font-family: var(--serif);
   font-size: 21px;
   color: var(--forest);
   margin-bottom: 4px;
   font-weight: 500
}

.cform .sub {
   font-size: 13.5px;
   color: var(--text-lt);
   margin-bottom: 26px;
   font-weight: 400
}

.form-stack {
   display: flex;
   flex-direction: column;
   gap: 12px
}

.form-2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px
}

.fif {
   width: 100%;
   padding: 11px 14px;
   border: 1px solid var(--border);
   border-radius: var(--r);
   font-family: var(--sans);
   font-size: 14px;
   color: var(--text);
   background: var(--sand);
   outline: none;
   transition: border-color .2s;
   font-weight: 400
}

.fif:focus {
   border-color: var(--forest-lt);
   background: #fff
}

textarea.fif {
   min-height: 116px;
   resize: vertical
}

.map-box {
   background: var(--forest-pale);
   border-radius: var(--rl);
   border: 1px solid var(--border);
   min-height: 220px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 24px;
   text-align: center;
   margin-bottom: 14px;
   overflow: hidden
}

.map-box p {
   font-size: 13px;
   color: var(--text-md);
   margin-top: 9px;
   font-weight: 400
}

.map-box a {
   font-size: 12.5px;
   color: var(--forest-md);
   margin-top: 5px;
   text-decoration: none
}

.map-box a:hover {
   text-decoration: underline
}

.emerg {
   background: var(--forest);
   border-radius: var(--rl);
   padding: 24px
}

.emerg h4 {
   font-family: var(--serif);
   font-size: 17px;
   color: #fff;
   margin-bottom: 7px;
   font-weight: 500
}

.emerg p {
   color: rgba(255, 255, 255, .55);
   font-size: 13.5px;
   margin-bottom: 14px;
   font-weight: 400
}

.emerg-links {
   display: flex;
   flex-direction: column;
   gap: 4px;
   margin-top: 10px
}

.emerg-links a {
   color: rgba(255, 255, 255, .5);
   font-size: 13px;
   text-decoration: none;
   text-align: center
}

/* ══════════════════════
   DONATE
══════════════════════ */
.donate-layout {
   display: grid;
   grid-template-columns: 1fr 350px;
   gap: 48px;
   align-items: start
}

.hadith {
   background: var(--forest-pale);
   border-left: 3px solid var(--forest-lt);
   padding: 20px 24px;
   border-radius: 0 var(--rl) var(--rl) 0;
   margin: 24px 0
}

.hadith blockquote {
   font-family: var(--serif);
   font-size: 16px;
   font-style: italic;
   color: var(--forest);
   line-height: 1.65
}

.hadith cite {
   display: block;
   margin-top: 10px;
   font-size: 10.5px;
   color: var(--forest-lt);
   font-style: normal;
   letter-spacing: .1em;
   text-transform: uppercase;
   font-weight: 500
}

.spot-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
   margin: 18px 0
}

.scard {
   background: #fff;
   border: 1.5px solid var(--border);
   border-radius: var(--r);
   padding: 16px;
   text-align: center;
   cursor: pointer;
   transition: all .18s
}

.scard:hover,
.scard.on {
   border-color: var(--forest-lt);
   background: var(--forest-pale)
}

.scard-amt {
   font-family: var(--serif);
   font-size: 21px;
   color: var(--forest);
   font-weight: 600
}

.scard-d {
   font-size: 12px;
   color: var(--text-lt);
   margin-top: 3px;
   font-weight: 400
}

.impact-ul {
   list-style: none;
   padding: 0;
   margin: 18px 0
}

.impact-ul li {
   display: flex;
   gap: 10px;
   align-items: flex-start;
   padding: 9px 0;
   border-bottom: 1px solid var(--border);
   font-size: 14px;
   color: var(--text-md);
   font-weight: 400
}

.impact-ul li:last-child {
   border-bottom: none
}

.impact-ul li::before {
   content: '✦';
   color: var(--forest-lt);
   font-size: 9px;
   margin-top: 6px;
   flex-shrink: 0
}

.give-box {
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--rl);
   padding: 26px;
   position: sticky;
   top: 88px
}

.give-box h3 {
   font-family: var(--serif);
   font-size: 20px;
   color: var(--forest);
   margin-bottom: 3px;
   font-weight: 500
}

.give-box .sub {
   font-size: 13px;
   color: var(--text-lt);
   margin-bottom: 16px;
   font-weight: 400
}

.freq-bar {
   display: flex;
   background: var(--sand-md);
   border-radius: var(--r);
   padding: 3px;
   gap: 3px;
   margin-bottom: 12px
}

.fbt {
   flex: 1;
   padding: 7px 0;
   text-align: center;
   border: none;
   background: transparent;
   font-family: var(--sans);
   font-size: 12.5px;
   cursor: pointer;
   color: var(--text-lt);
   border-radius: 4px;
   transition: all .18s
}

.fbt.on {
   background: #fff;
   color: var(--forest);
   font-weight: 500
}

.amt-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 6px;
   margin-bottom: 11px
}

.abt {
   padding: 9px 6px;
   border: 1.5px solid var(--border);
   border-radius: var(--r);
   background: #fff;
   cursor: pointer;
   text-align: center;
   font-family: var(--serif);
   font-size: 14.5px;
   color: var(--forest);
   transition: all .18s;
   font-weight: 500
}

.abt:hover,
.abt.on {
   border-color: var(--forest-lt);
   background: var(--forest-pale)
}

.abt.wide {
   grid-column: span 2;
   font-size: 13px
}

.custom-row {
   display: flex;
   align-items: center;
   border: 1px solid var(--border);
   border-radius: var(--r);
   overflow: hidden;
   margin-bottom: 12px;
   background: var(--sand)
}

.cpfx {
   padding: 0 12px;
   font-size: 15px;
   color: var(--text-lt);
   border-right: 1px solid var(--border);
   height: 42px;
   display: flex;
   align-items: center
}

.custom-row input {
   flex: 1;
   border: none;
   background: transparent;
   padding: 0 14px;
   font-size: 16px;
   font-family: var(--serif);
   color: var(--forest);
   outline: none;
   height: 42px;
   font-weight: 500
}

.give-fields {
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin-bottom: 12px
}

.stripe-note {
   display: flex;
   align-items: center;
   gap: 7px;
   font-size: 11px;
   color: var(--text-lt);
   margin-top: 9px;
   font-weight: 400
}

.other-give {
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--rl);
   padding: 20px;
   margin-top: 14px
}

.other-give h4 {
   font-size: 13.5px;
   font-weight: 500;
   color: var(--forest);
   margin-bottom: 9px
}

.og-list {
   display: flex;
   flex-direction: column;
   gap: 6px;
   font-size: 13px;
   color: var(--text-md);
   font-weight: 400
}

.og-list a {
   color: var(--forest-md);
   text-decoration: none
}

.og-list a:hover {
   text-decoration: underline
}

.prog-wrap {
   background: var(--sand-md);
   border: 1px solid var(--border);
   border-radius: var(--rl);
   padding: 22px;
   margin-top: 12px
}

.prog-track {
   background: var(--sand-dk);
   border-radius: 40px;
   height: 7px;
   overflow: hidden;
   margin: 8px 0
}

.prog-fill {
   background: var(--forest-lt);
   height: 100%;
   width: 42%;
   border-radius: 40px
}

/* ── FOOTER ── */
footer {
   background: var(--forest);
   color: rgba(255, 255, 255, .5);
   padding: 56px 0 0
}

.footer-grid {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1fr;
   gap: 48px;
   padding-bottom: 48px
}

.fb p {
   font-size: 13px;
   line-height: 1.7;
   margin: 13px 0;
   color: rgba(255, 255, 255, .45);
   max-width: 240px;
   font-weight: 400
}

.fc h4 {
   font-size: 10.5px;
   text-transform: uppercase;
   letter-spacing: .13em;
   color: rgba(255, 255, 255, .3);
   margin-bottom: 14px;
   font-weight: 500
}

.fc ul {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 9px
}

.fc a {
   color: rgba(255, 255, 255, .58);
   text-decoration: none;
   font-size: 13.5px;
   font-weight: 400;
   transition: color .15s
}

.fc a:hover {
   color: #fff
}

.footer-btm {
   border-top: 1px solid rgba(255, 255, 255, .08);
   padding: 18px 0;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   font-size: 12px
}

/* ── SVG ICON ── */
svg.ic {
   width: 20px;
   height: 20px;
   stroke: currentColor;
   stroke-width: 1.5;
   fill: none;
   stroke-linecap: round;
   stroke-linejoin: round
}

/* ── RESPONSIVE ── */
@media(max-width:960px) {

   .topbar {
      display: none
   }

   /* Mobile Navigation Drawer & Hamburger Style */
   .nav-toggle {
      display: flex
   }

   .nav-toggle.active span:nth-child(1) {
      transform: translateY(8px) rotate(45deg)
   }

   .nav-toggle.active span:nth-child(2) {
      opacity: 0
   }

   .nav-toggle.active span:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg)
   }

   .nav-menu-wrap {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background: #fff;
      opacity: 0;
      visibility: hidden;
      transform: translateX(-100%);
      transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1), opacity .35s cubic-bezier(0.4, 0, 0.2, 1), visibility .35s;
      z-index: 199;
      padding-top: 70px;
      overflow-y: auto
   }

   .admin-bar .nav-menu-wrap {
      top: 32px;
      height: calc(100vh - 32px)
   }

   .nav-menu-wrap.active {
      opacity: 1;
      visibility: visible;
      transform: translateX(0)
   }

   .nav-ul {
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      padding: 24px 32px
   }

   .nav-ul li {
      width: 100%
   }

   .nav-ul a {
      display: block;
      padding: 14px 20px;
      font-size: 16px;
      border-radius: var(--r);
      border-bottom: 1px solid rgba(44, 74, 46, 0.05);
      transition: all .2s;
      font-weight: 500
   }

   .nav-ul li.current-menu-item a,
   .nav-ul a.active {
      background: var(--forest-pale);
      color: var(--forest)
   }

   .nav-ul li:last-child a,
   .nav-ul a.nav-donate,
   .nav-ul li.nav-donate a {
      border-bottom: none
   }

   .nav-ul a.nav-donate,
   .nav-ul li.nav-donate a {
      margin-top: 16px;
      text-align: center;
      color: #fff !important;
      background: var(--forest) !important;
      display: block
   }

   .nav-ul a.nav-donate:hover,
   .nav-ul li.nav-donate a:hover {
      background: var(--forest-md) !important
   }

   .hero-inner,
   .two-col,
   .contact-layout,
   .donate-layout,
   .footer-grid {
      grid-template-columns: 1fr;
      gap: 32px
   }

   .nc-grid,
   .proc-grid,
   .charges-grid {
      grid-template-columns: 1fr 1fr
   }

   .proc {
      border-right: none;
      border-bottom: 1px solid var(--border)
   }

   .contact-cards-grid {
      grid-template-columns: 1fr 1fr
   }

   .rules-grid,
   .mission-duo,
   .spot-grid,
   .cant-find {
      grid-template-columns: 1fr
   }

   .cant-find {
      grid-template-columns: 1fr
   }

   .cant-loc {
      text-align: left
   }

   .hero-bar {
      grid-template-columns: repeat(3, 1fr)
   }

   .stat-row {
      grid-template-columns: repeat(3, 1fr)
   }
}

@media(max-width:620px) {

   .w,
   .ptabs {
      padding: 0 16px
   }

   .nc-grid,
   .charges-grid,
   .contact-cards-grid,
   .amt-grid,
   .form-2 {
      grid-template-columns: 1fr
   }

   .proc-grid {
      grid-template-columns: 1fr
   }

   .hero-bar {
      grid-template-columns: 1fr
   }

   section {
      padding: 56px 0
   }

   .form-row {
      grid-template-columns: 1fr
   }

   .rules-grid {
      grid-template-columns: 1fr
   }

   .charges-grid {
      grid-template-columns: 1fr 1fr
   }
}

@media (max-width: 782px) {
   .admin-bar .nav-menu-wrap {
      top: 46px;
      height: calc(100vh - 46px)
   }
}

/* ==========================================
GIVEWP FORM CUSTOM STYLING (MATCHING THEME)
========================================== */

/* Hide default GiveWP labels and header */
.givewp-layouts-multiStepForm .givewp-fields__label-text,
.givewp-fields-amount__input-label-container,
.givewp-layouts-form-header {
   display: none !important;
}

/* Amount Grid container */
.givewp-fields-amount__levels-container {
   display: grid !important;
   grid-template-columns: 1fr 1fr !important;
   gap: 6px !important;
   margin-bottom: 11px !important;
}

/* Level container */
.givewp-fields-amount__level-container {
   margin: 0 !important;
   width: 100% !important;
}

/* Amount Buttons */
.givewp-fields-amount__level {
   width: 100% !important;
   padding: 9px 6px !important;
   border: 1.5px solid var(--border) !important;
   border-radius: var(--r) !important;
   background: #fff !important;
   cursor: pointer !important;
   text-align: center !important;
   font-family: var(--serif) !important;
   font-size: 14.5px !important;
   color: var(--forest) !important;
   transition: all .18s !important;
   font-weight: 500 !important;
   box-shadow: none !important;
   height: auto !important;
   min-height: 42px !important;
}

/* Selected Amount Button */
.givewp-fields-amount__level:hover,
.givewp-fields-amount__level--selected {
   border-color: var(--forest-lt) !important;
   background: var(--forest-pale) !important;
}

/* Custom Amount Input container */
.givewp-fields-amount__input-container {
   display: flex !important;
   align-items: center !important;
   border: 1px solid var(--border) !important;
   border-radius: var(--r) !important;
   overflow: hidden !important;
   margin-bottom: 12px !important;
   background: var(--sand) !important;
}

/* Add $ Prefix using pseudo element */
.givewp-fields-amount__input-container::before {
   content: "$";
   padding: 0 12px;
   font-size: 15px;
   color: var(--text-lt);
   border-right: 1px solid var(--border);
   height: 42px;
   display: flex;
   align-items: center;
}

/* Custom Amount Input */
.givewp-fields-amount__input {
   flex: 1 !important;
   border: none !important;
   background: transparent !important;
   padding: 0 14px !important;
   font-size: 16px !important;
   font-family: var(--serif) !important;
   color: var(--forest) !important;
   outline: none !important;
   height: 42px !important;
   font-weight: 500 !important;
   box-shadow: none !important;
   margin: 0 !important;
}

/* Form Fields Layout */
.givewp-groups-name {
   display: flex !important;
   gap: 10px !important;
   margin-bottom: 8px !important;
   width: 100% !important;
}

.givewp-groups-name>div {
   flex: 1 !important;
   margin: 0 !important;
}

/* Text Inputs */
.givewp-fields input[type="text"],
.givewp-fields input[type="email"] {
   width: 100% !important;
   background: #fff !important;
   border: 1px solid var(--border) !important;
   border-radius: var(--r) !important;
   padding: 10px 14px !important;
   font-size: 13.5px !important;
   color: var(--text-md) !important;
   outline: none !important;
   font-family: var(--sans) !important;
   transition: all .2s !important;
   font-weight: 400 !important;
   margin-bottom: 8px !important;
   box-shadow: none !important;
}

.givewp-fields input[type="text"]:focus,
.givewp-fields input[type="email"]:focus {
   border-color: var(--forest-lt) !important;
   box-shadow: 0 0 0 2px rgba(143, 191, 147, 0.15) !important;
}

/* Next / Donate Button */
.givewp-donation-form__steps-button-next,
.givewp-donation-form__submit-button {
   display: flex !important;
   width: 100% !important;
   justify-content: center !important;
   align-items: center !important;
   background: var(--forest) !important;
   color: #fff !important;
   padding: 13px !important;
   border-radius: var(--r) !important;
   font-size: 15px !important;
   font-weight: 500 !important;
   font-family: var(--sans) !important;
   border: none !important;
   cursor: pointer !important;
   transition: all .2s !important;
   text-transform: none !important;
   letter-spacing: normal !important;
   box-shadow: none !important;
}

.givewp-donation-form__steps-button-next:hover,
.givewp-donation-form__submit-button:hover {
   background: var(--forest-md) !important;
}

/* Payment Details Notice */
.givewp-elements-paragraph {
   background: var(--sand-md) !important;
   border: 1px solid var(--border) !important;
   border-radius: var(--r) !important;
   padding: 13px !important;
   margin-bottom: 12px !important;
   font-size: 12px !important;
   color: var(--text-lt) !important;
   text-align: center !important;
   font-weight: 400 !important;
}

.givewp-elements-paragraph p {
   margin: 0 !important;
   color: inherit !important;
   font-size: inherit !important;
}

/* Clean up fieldset and section margins */
.givewp-layouts-section__fieldset,
.givewp-layouts-section {
   border: none !important;
   padding: 0 !important;
   margin: 0 !important;
   background: transparent !important;
}

.givewp-section-nodes {
   margin: 0 !important;
}