/* Hayat Toolkit — restyle for older Elementor content (pages and own-layout products that still use
   core/third-party widgets). Loaded only on those (body.hx-legacy), never inside the hx- sections.
   Their per-element colours come from the old theme (WoodMart) and often clash, so the key rules win
   with !important. Sections with a photo background (.hx-on-photo, set by the build) get white text
   over a dark green wash. */

body.hx-legacy { --hl-forest: #013b31; --hl-green: #04684d; --hl-leaf: #88c97c; --hl-mint: #eef6eb; --hl-ink: #10221c; --hl-muted: #546760; --hl-line: #dbe6dc; }

/* ---------- type ---------- */
body.hx-legacy .elementor :is(.elementor-heading-title, .elementor-widget-text-editor :is(h1, h2, h3, h4, h5), .elementor-image-box-title, .elementor-icon-box-title):not(.hx *) {
	font-family: "Literata", Georgia, serif !important; font-weight: 600 !important; letter-spacing: -.01em; color: var(--hl-forest) !important; line-height: 1.2;
}
body.hx-legacy .elementor :is(.elementor-widget-text-editor, .elementor-image-box-description, .elementor-icon-box-description, .elementor-icon-list-text, .elementor-tab-content, .elementor-accordion .elementor-tab-content):not(.hx *) {
	font-family: "Figtree", system-ui, sans-serif !important; color: var(--hl-ink) !important;
}
body.hx-legacy .elementor .elementor-widget-text-editor:not(.hx *) { font-size: 17px; line-height: 1.65; }
body.hx-legacy .elementor .elementor-widget-text-editor:not(.hx *) :is(p, li, span, strong, b, em) { color: inherit !important; font-family: inherit !important; }
body.hx-legacy .elementor .elementor-widget-text-editor:not(.hx *) a { color: var(--hl-green) !important; font-weight: 600; text-underline-offset: 3px; }
body.hx-legacy .elementor .elementor-widget-text-editor:not(.hx *) ul, body.hx-legacy .elementor .elementor-widget-text-editor:not(.hx *) ol { padding-left: 1.3em; }
body.hx-legacy .elementor .elementor-widget-text-editor:not(.hx *) li { margin: .25em 0; }

/* icon lists: leaf ticks, ink text */
body.hx-legacy .elementor .elementor-icon-list-icon:not(.hx *) i, body.hx-legacy .elementor .elementor-icon-list-icon:not(.hx *) svg { color: var(--hl-green) !important; fill: var(--hl-green) !important; }
body.hx-legacy .elementor .elementor-widget-icon:not(.hx *) .elementor-icon { color: var(--hl-green) !important; fill: var(--hl-green) !important; }
body.hx-legacy .elementor .elementor-widget-icon:not(.hx *) .elementor-icon svg { fill: var(--hl-green) !important; }

/* images and image boxes */
body.hx-legacy .elementor .elementor-widget-image:not(.hx *) img { border-radius: 14px; }
body.hx-legacy .elementor .elementor-widget-image-box:not(.hx *) .elementor-image-box-img img[src$=".svg"] { width: 56px !important; height: auto !important; }
body.hx-legacy .elementor .elementor-widget-image-box:not(.hx *) .elementor-image-box-img { width: auto !important; max-width: 120px; }
body.hx-legacy .elementor .elementor-divider-separator { border-color: var(--hl-line) !important; }

/* containers: old borders in the new hairline tone */
body.hx-legacy .elementor .e-con:not(.hx *) { border-color: var(--hl-line) !important; }

/* ---------- buttons (Elementor, WPForms, GiveWP, SkyDonate quick donate) ---------- */
body.hx-legacy .elementor :is(.elementor-button, .wpforms-submit, button.wpforms-page-button):not(.hx *),
body.hx-legacy :is(.give-btn, .givewp-donation-form-modal__open, .give-donor-dashboard-button, button.give-submit, input.give-submit):not(.hx *) {
	background: var(--hl-green) !important; background-image: none !important; color: #fff !important; border: 0 !important; border-radius: 999px !important;
	font-family: "Figtree", system-ui, sans-serif !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important;
	padding: 14px 26px !important; min-height: 48px; line-height: 1.2 !important; transition: background .15s;
}
body.hx-legacy .elementor :is(.elementor-button, .wpforms-submit):not(.hx *):hover,
body.hx-legacy :is(.give-btn, .givewp-donation-form-modal__open, button.give-submit):not(.hx *):hover { background: var(--hl-forest) !important; color: #fff !important; }
body.hx-legacy .elementor .elementor-button .elementor-button-icon :is(i, svg) { color: inherit !important; fill: currentColor !important; }

/* ---------- forms (WPForms contact / donation form) ---------- */
body.hx-legacy .wpforms-container .wpforms-field-label { font-family: "Figtree", system-ui, sans-serif; font-weight: 600 !important; color: var(--hl-ink) !important; }
body.hx-legacy .wpforms-container :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea) {
	border: 1.5px solid var(--hl-line) !important; border-radius: 12px !important; background: #fff !important; font-family: "Figtree", system-ui, sans-serif !important; font-size: 16px !important; color: var(--hl-ink) !important; box-shadow: none !important;
}
body.hx-legacy .wpforms-container :is(input, select):not([type="checkbox"]):not([type="radio"]):not([type="submit"]) { min-height: 48px; }
body.hx-legacy .wpforms-container :is(input, select, textarea):focus { border-color: var(--hl-green) !important; outline: 3px solid rgba(136, 201, 124, .45) !important; outline-offset: 1px; }

/* ---------- sections with a photo background: white text over a dark wash ---------- */
body.hx-legacy .elementor .e-con.hx-on-photo { position: relative; isolation: isolate; }
body.hx-legacy .elementor .e-con.hx-on-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(1, 59, 49, .88) 0%, rgba(1, 59, 49, .6) 55%, rgba(1, 59, 49, .35) 100%); pointer-events: none; }
body.hx-legacy .elementor .e-con.hx-on-photo :is(.elementor-heading-title, .elementor-widget-text-editor, .elementor-widget-text-editor *, .elementor-icon-list-text, .elementor-image-box-title, .elementor-image-box-description) { color: #fff !important; }
body.hx-legacy .elementor .e-con.hx-on-photo .elementor-button { background: var(--hl-leaf) !important; color: var(--hl-forest) !important; }
body.hx-legacy .elementor .e-con.hx-on-photo .elementor-button:hover { background: #fff !important; }

/* ---------- legal pages: one readable column ---------- */
body.hx-legacy .elementor .e-con.hx-prose { --content-width: 760px; }
body.hx-legacy .elementor .e-con.hx-prose > .e-con-inner, body.hx-legacy .elementor .e-con.hx-prose.e-con-full { max-width: 808px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
body.hx-legacy .elementor .e-con.hx-prose .elementor-widget-text-editor :is(h2, h3) { margin: 1.6em 0 .5em; }
body.hx-legacy .elementor .e-con.hx-prose .elementor-widget-text-editor h2 { font-size: 28px !important; }
body.hx-legacy .elementor .e-con.hx-prose .elementor-widget-text-editor h3 { font-size: 22px !important; }

/* ---------- GiveWP campaign widgets + receipt + donor dashboard ---------- */
body.hx-legacy :is(.givewp-campaign-stats-block, .givewp-campaign-goal, .givewp-campaign-donations-block, .givewp-campaign-donors-block) { font-family: "Figtree", system-ui, sans-serif !important; }
body.hx-legacy :is(.givewp-campaign-stats-block, .givewp-campaign-donations-block, .givewp-campaign-donors-block) :is(h2, h3, p) { color: var(--hl-ink); }
body.hx-legacy .givewp-campaign-goal__progress-bar-progress { background: var(--hl-green) !important; }
body.hx-legacy :is(.give-receipt-wrap, #give_donation_receipt, .give-donor-dashboard) { font-family: "Figtree", system-ui, sans-serif; color: var(--hl-ink); }
body.hx-legacy #give_donation_receipt th { color: var(--hl-forest); }

/* ---------- SkyDonate quick donate (Ramadan): controls sized like the site's ---------- */
body.hx-legacy [class*="elementor-widget-skyweb_quick_donation"] :is(select, input) { min-height: 46px; padding: 0 12px; border: 1.5px solid var(--hl-line); border-radius: 12px; background: #fff; font-family: "Figtree", system-ui, sans-serif; font-size: 15px; color: var(--hl-ink); }
body.hx-legacy [class*="elementor-widget-skyweb_quick_donation"] button { border-radius: 999px !important; background: var(--hl-green) !important; }

/* ---------- spacing: older full-width sections keep a gutter on phones ---------- */
@media (max-width: 767px) {
	body.hx-legacy .elementor .e-con.e-parent:not(.hx *) { --padding-left: 16px; --padding-right: 16px; }
	body.hx-legacy .elementor .elementor-widget-text-editor:not(.hx *) { font-size: 16px; }
}

/* Ramadan's quick-donate row: the serif heading beside SkyDonate's selects needs less room */
body.hx-legacy .elementor .e-con:has([class*="elementor-widget-skyweb_quick_donation"]) .elementor-heading-title { font-size: 24px !important; line-height: 1.15 !important; }
body.hx-legacy .elementor .e-con:has(> .elementor-widget-heading + .e-con [class*="elementor-widget-skyweb_quick_donation"]) > .elementor-widget-heading { flex: 0 0 auto; margin-right: 16px; }

/* The section right under the page head: older layouts pulled it up (negative margin) over the old title band */
body.hx-legacy .elementor .e-con.e-parent:has(.hx-w-pagehead) + .e-con { margin-top: 0 !important; }
body.hx-legacy .elementor .e-con.e-parent:has(.hx-w-pagehead) + .e-con:not(.hx-on-photo) { padding-top: 48px; }

/* Older full-width sections without a photo: keep content inside the site width */
@media (min-width: 768px) {
	body.hx-legacy .elementor .e-con.e-parent.e-con-full:not(.hx-on-photo):not(:has(.hx)) { --padding-left: max(32px, calc((100% - 1240px) / 2)); --padding-right: max(32px, calc((100% - 1240px) / 2)); }
}

/* Sections / cards on a dark solid background: white text */
body.hx-legacy .elementor .e-con.hx-on-dark :is(.elementor-heading-title, .elementor-widget-text-editor, .elementor-widget-text-editor *, .elementor-icon-list-text, .elementor-image-box-title, .elementor-image-box-description) { color: #fff !important; }
body.hx-legacy .elementor .e-con.hx-on-dark .elementor-widget-text-editor:first-child { color: var(--hl-leaf) !important; }
body.hx-legacy .elementor .e-con.hx-on-dark .elementor-button { background: var(--hl-leaf) !important; color: var(--hl-forest) !important; }

/* 2.9.3: Qurbani status table scrolls sideways on phones instead of being cut off */
.qurbani-table-container, .qurbani-table-wrapper { max-width: 100%; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
.qurbani-table-wrapper .qurbani-status-table { min-width: 560px; }