/*
Theme Name:   Charifund Child
Theme URL:    https://wowtheme7.com/charifund-child/
Description:  Charity WordPress Theme
Author:       wowtheme7
Author URL:   https://wowtheme7.com/
Template:     charifund
Version:      2.1
License:      GNU General Public License v2 or later
License URL:  http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  charifundchildtheme
*/

/* =========================================================
   Custom styles
   ========================================================= */

/* ---------------------------------------------------------
   Preloader — show the site logo, STATIC (no spin) and clean.
   The parent theme forces .preloader-icon-img into a spinning
   (flipY) 100px coloured circle, meant for the default icon.
   For a real logo we want it still, uncropped, no background.
   --------------------------------------------------------- */
.preloader .preloader-icon-img {
	width: auto;
	min-width: 0;
	height: auto;
	max-width: 220px;
	max-height: 90px;
	border-radius: 0;
	background: transparent;
	object-fit: contain;
	-webkit-animation: none !important;
	animation: none !important;
}

/* ---------------------------------------------------------
   Page: Programme d'assistance au Ramadan (page-id-11689)
   --------------------------------------------------------- */

/* [1] Remove the theme hero/title banner on this page only */
.page-id-11689 .common-banner {
	display: none !important;
}

/* [2] Make the side image column stay pinned (sticky) while the
       text column scrolls next to it.
       NOTE: the theme puts `overflow:hidden` on #page, which turns it into a
       scroll container and disables position:sticky. On this page we relax it
       to `overflow-x:clip` — still no horizontal scrollbar, but no scroll
       container, so sticky can anchor to the viewport. */
body.page-id-11689 #page {
	overflow-x: clip;
	overflow-y: visible;
}
.elementor-page-11689 .elementor-element-104ac4c > .e-con-inner {
	align-items: flex-start;
}
.elementor-page-11689 .elementor-element-64ef3cc {
	position: -webkit-sticky !important;
	position: sticky !important;
	top: 110px;
	align-self: flex-start !important;
}

/* Sticky effect only makes sense on wider screens; release it on
   mobile/tablet where the columns stack vertically. */
@media (max-width: 1024px) {
	.elementor-page-11689 .elementor-element-64ef3cc {
		position: static !important;
		top: auto;
	}
}

/* ---------------------------------------------------------
   Blog — hero image, no comments, refined right sidebar
   (image path is relative to this stylesheet so it survives
   a domain / sub-directory move)
   --------------------------------------------------------- */

/* [1] Hero background for the blog index + single posts + Blog Grid page (1316) */
.blog .common-banner .banner-bg,
.single-post .common-banner .banner-bg,
.page-id-1316 .common-banner .banner-bg {
	background-image:
		linear-gradient(rgba(9, 31, 27, .12), rgba(9, 31, 27, .22)),
		url("../../uploads/2026/07/blog-hero-2.webp");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* About Us page (780) — its own hero image */
.page-id-780 .common-banner .banner-bg {
	background-image:
		linear-gradient(rgba(9, 31, 27, .12), rgba(9, 31, 27, .22)),
		url("../../uploads/2026/07/about-hero.webp");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* Causes page (1185) — its own hero image */
.page-id-1185 .common-banner .banner-bg {
	background-image:
		linear-gradient(rgba(9, 31, 27, .12), rgba(9, 31, 27, .22)),
		url("../../uploads/2026/07/causes-hero.webp");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* The theme prints a GLOBAL banner <img> (breadcrumb_shape_image) inside
   .banner-bg that sits ON TOP of the background above. Hide it on these
   pages so our own hero image is the one that shows. */
.blog .common-banner .banner-bg > img,
.single-post .common-banner .banner-bg > img,
.page-id-1316 .common-banner .banner-bg > img,
.page-id-780 .common-banner .banner-bg > img,
.page-id-1185 .common-banner .banner-bg > img {
	display: none !important;
}

/* Lighten the theme's two extra banner overlays (::before diagonal gradient
   and ::after flat wash) on the hero pages so the photo shows through, and
   give the title a soft shadow so it stays readable on a lighter overlay. */
.blog .common-banner::before,
.single-post .common-banner::before,
.page-id-1316 .common-banner::before,
.page-id-780 .common-banner::before,
.page-id-1185 .common-banner::before {
	opacity: .35;
}
.blog .common-banner::after,
.single-post .common-banner::after,
.page-id-1316 .common-banner::after,
.page-id-780 .common-banner::after,
.page-id-1185 .common-banner::after {
	background: transparent !important;
}
.blog .common-banner__content .title-animation,
.single-post .common-banner__content .title-animation,
.page-id-1316 .common-banner__content .title-animation,
.page-id-780 .common-banner__content .title-animation,
.page-id-1185 .common-banner__content .title-animation,
.blog .common-banner__content .sub-title,
.single-post .common-banner__content .sub-title,
.page-id-1316 .common-banner__content .sub-title,
.page-id-780 .common-banner__content .sub-title,
.page-id-1185 .common-banner__content .sub-title {
	text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}

/* [2] Remove the comment section on single posts */
.single-post #comments {
	display: none !important;
}

/* [3] Refined right sidebar (blog index + single posts) */
.blog .widget-area .widget,
.single-post .widget-area .widget {
	background: #ffffff;
	border: 1px solid #e9eef0;
	border-radius: 14px;
	padding: 26px 24px;
	margin-bottom: 26px;
	box-shadow: 0 8px 30px rgba(16, 60, 59, .06);
}
.blog .widget-area .widget :is(h2, h3, h4, .wp-block-heading),
.single-post .widget-area .widget :is(h2, h3, h4, .wp-block-heading) {
	font-size: 19px;
	font-weight: 700;
	color: #0e3c3b;
	margin: 0 0 18px;
	padding-bottom: 12px;
	position: relative;
}
.blog .widget-area .widget :is(h2, h3, h4, .wp-block-heading)::after,
.single-post .widget-area .widget :is(h2, h3, h4, .wp-block-heading)::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 42px;
	height: 3px;
	border-radius: 3px;
	background: #107b7a;
}
.blog .widget-area .widget ul,
.single-post .widget-area .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.blog .widget-area .widget ul li,
.single-post .widget-area .widget ul li {
	padding: 9px 0;
	border-bottom: 1px dashed #e9eef0;
}
.blog .widget-area .widget ul li:last-child,
.single-post .widget-area .widget ul li:last-child {
	border-bottom: 0;
}
.blog .widget-area .widget ul li a,
.single-post .widget-area .widget ul li a {
	color: #3f5453;
	transition: color .2s, padding-left .2s;
}
.blog .widget-area .widget ul li a:hover,
.single-post .widget-area .widget ul li a:hover {
	color: #107b7a;
	padding-left: 5px;
}

/* Search widget polish */
.widget-area .wp-block-search__inside-wrapper {
	border: 1px solid #e9eef0;
	border-radius: 10px;
	overflow: hidden;
	padding: 4px;
}
.widget-area .wp-block-search__input {
	border: 0;
	padding: 10px 14px;
	background: transparent;
}
.widget-area .wp-block-search__button {
	background: #107b7a;
	color: #fff;
	border: 0;
	margin: 0;
	padding: 0 20px;
	border-radius: 8px;
	cursor: pointer;
}

/* =========================================================
   Campaign cards (Donation Slider) — uniform height + campaign image
   ========================================================= */
.cause__slider .swiper-slide { height: auto; }
.cause__slider .swiper-wrapper { align-items: stretch; }
.cause__slider-inner,
.cause__slider-single {
	height: 100%;
	display: flex;
	flex-direction: column;
}
/* campaign image — uniform crop */
.cause__slider-single .thumb {
	margin-bottom: 18px;
}
.cause__slider-single .thumb img {
	width: 100%;
	height: 235px;
	object-fit: cover;
	border-radius: 12px;
}
/* push the donate CTA to the bottom so cards line up */
.cause__slider-single .cause__slider-cta {
	margin-top: auto;
}
/* short description: clamp to keep card heights consistent */
.cause__slider-single .content p {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* =========================================================
   Campaign page — single GiveWP form (content + sticky donate sidebar)
   ========================================================= */
/* Remove the theme hero banner (title lives in the content instead) */
.single-give_forms .common-banner { display: none !important; }

.single-give_forms .mawadda-campaign {
	/* top margin between the header/nav and the campaign content */
	padding: 75px 0 90px;
}
/* the theme's #page has overflow:hidden which disables position:sticky */
body.single-give_forms #page {
	overflow-x: clip;
	overflow-y: visible;
}
.single-give_forms .mawadda-campaign__row {
	align-items: flex-start;
}
.single-give_forms .mawadda-campaign__image {
	border-radius: 16px;
	overflow: hidden;
	margin-bottom: 26px;
}
.single-give_forms .mawadda-campaign__image img {
	width: 100%;
	height: 340px;            /* smaller, banner-style crop */
	object-fit: cover;
	display: block;
}
.single-give_forms .mawadda-campaign__title {
	font-size: 30px;
	line-height: 1.25;
	color: #0e3c3b;
	margin: 0 0 18px;
}
.single-give_forms .mawadda-campaign__desc {
	font-size: 16px;
	line-height: 1.9;
	color: #3f5453;
}
.single-give_forms .mawadda-campaign__desc p {
	margin: 0 0 18px;
}

/* Sticky donation sidebar */
.single-give_forms .mawadda-campaign__aside {
	position: -webkit-sticky;
	position: sticky;
	top: 100px;
	align-self: flex-start;
}
.single-give_forms .mawadda-campaign__donate {
	background: #ffffff;
	border: 1px solid #e6ebec;
	border-radius: 18px;
	padding: 12px;
	box-shadow: 0 14px 44px rgba(16, 60, 59, .09);
}
/* let the GiveWP form fill the card cleanly */
.single-give_forms .mawadda-campaign__donate iframe {
	width: 100% !important;
	min-width: 100% !important;
	border-radius: 12px;
}
/* GiveWP wraps the embedded form in .root-data-givewp-embed with a huge
   100px top/bottom padding — remove it so the form sits tight in the card */
.single-give_forms .mawadda-campaign__donate .root-data-givewp-embed {
	padding: 0 !important;
}

/* Tablet / mobile: stack, release sticky, smaller image */
@media (max-width: 991px) {
	.single-give_forms .mawadda-campaign { padding: 34px 0 60px; }
	.single-give_forms .mawadda-campaign__image { margin-bottom: 20px; }
	.single-give_forms .mawadda-campaign__image img { height: 240px; }
	.single-give_forms .mawadda-campaign__title { font-size: 24px; }
	.single-give_forms .mawadda-campaign__aside {
		position: static;
		top: auto;
		margin-top: 30px;
	}
}

/* =========================================================
   Sticky header (added on scroll as `.sticky-header`).
   The default state felt cramped (logo squashed to almost no height),
   janky (expensive drop-shadow filter repainting on every scroll frame)
   and unpolished vs. the top state. Give it vertical breathing room,
   a clearly sized & centred logo, a cheap composited shadow, and a
   quicker, smoother slide-in.
   ========================================================= */
.sticky-header.header-secondary .main-header__menu-box,
.sticky-header.header-tertiary .main-header__menu-box {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}
.sticky-header .main-header__menu-box .navbar {
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
.sticky-header .navbar-logo img {
	height: 48px !important;   /* enlarged so the padding-0 sticky bar stays prominent */
	max-width: none !important;
}
/* drop-shadow() filter is costly to repaint while scrolling → use a
   GPU-composited box-shadow instead, and make the entry animation snappy */
.sticky-header {
	-webkit-filter: none !important;
	        filter: none !important;
	-webkit-box-shadow: 0 4px 19px rgba(0, 0, 0, .07) !important;
	        box-shadow: 0 4px 19px rgba(0, 0, 0, .07) !important;
	-webkit-animation-duration: .3s !important;
	        animation-duration: .3s !important;
	-webkit-animation-timing-function: ease-out !important;
	        animation-timing-function: ease-out !important;
	will-change: transform;
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
}

/* =========================================================
   Home image gallery (cause-slider "style3" → .gallery):
   the icon now opens the full image in a lightbox — show it's clickable.
   ========================================================= */
/* Nav: keep a consistent ~52px side margin in EVERY state (top + sticky) and
   on every screen width. The theme's 1800px container collapses to edge-to-edge
   on narrower viewports; force full width with fixed 52px side padding instead. */
.header-secondary .container {
	max-width: 100% !important;
	padding-left: 52px !important;
	padding-right: 52px !important;
}
/* The sticky header is position:fixed at top:0 → for logged-in users it slides
   UNDER the WordPress admin bar and the logo gets clipped. Offset it by the
   admin-bar height so it matches the clean initial state. (Visitors have no
   admin bar, so this rule never affects them.) */
.admin-bar .sticky-header { top: 32px !important; }
@media screen and (max-width: 782px) {
	.admin-bar .sticky-header { top: 46px !important; }
}

a.mawadda-gallery-item {
	cursor: zoom-in;
}

/* Image lightbox: kill the blue spinning preloader that hangs over already
   loaded (cached) images — Elementor's lightbox uses Swiper's
   `.swiper-lazy-preloader`; Magnific uses `.mfp-preloader`. Hide both. */
.elementor-lightbox .swiper-lazy-preloader,
.mfp-wrap .mfp-preloader,
.mfp-wrap .mfp-preloader::before,
.mfp-wrap .mfp-preloader::after {
	display: none !important;
}
/* …and force the lazy-loaded lightbox image to full opacity so a cached image
   shows immediately instead of sitting dim behind a translucent layer (which
   otherwise only clears after a second click). */
.elementor-lightbox .swiper-slide img,
.elementor-lightbox .swiper-zoom-container img,
.elementor-lightbox img.swiper-lazy {
	opacity: 1 !important;
	visibility: visible !important;
}

/* CTA section image: remove the torn-paper mask so the photo shows full,
   with straight edges. */
.cta-section .cta-section__center .cta-img {
	-webkit-mask-image: none !important;
	        mask-image: none !important;
}

/* Hide the decorative spade/sprade shape graphics (footer_sprade, spade-2,
   sprade-base) — user asked to stop showing them. */
.sprade,
.sprade-shape,
.difference-three__thumb-inner .spade,
.difference-two .spade {
	display: none !important;
}

/* Remove the decorative grid.png (wp-image-129) from every page. */
img.wp-image-129,
.elementor-widget-image:has(img.wp-image-129) {
	display: none !important;
}

/* Highlighted-word underline (.bottom-line, e.g. "Déplacées") — the theme draws
   it as a hand-drawn SVG stroke in yellow (#FBAD17); recolour to brand teal. */
.bottom-line {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='196' height='15' viewBox='0 0 196 15' fill='none'%3E %3Cpath d='M1 13C42.1844 2.92057 142.978 -3.87406 195 9.2668' stroke='%2310787b' stroke-width='4'/%3E %3C/svg%3E") !important;
}

/* =========================================================
   Newsletter (Contact Form 7) response message — the default is a plain
   blue-bordered grey line; turn it into a clean pill on the dark footer.
   ========================================================= */
/* The form is a flex ROW (input + button). CF7 injects the response message and
   the ajax spinner as direct children → they land IN the row and squash the
   input/button. Let the row wrap and force those two onto their own full line. */
.footer-two__newsletter-form .wpcf7-form {
	-ms-flex-wrap: wrap !important;
	    flex-wrap: wrap !important;
}
/* keep the input + button SIDE BY SIDE on the first line: the input flexes from
   a 0 basis so the fixed-width button always fits next to it (the message then
   wraps to its own full line). */
.footer-two__newsletter-form .wpcf7-form > .input-icon {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 0px;
	    flex: 1 1 0 !important;
	min-width: 0 !important;
}
.footer-two__newsletter-form .wpcf7-form > .btn--primary {
	-ms-flex: 0 0 auto !important;
	    flex: 0 0 auto !important;
}
.footer-two__newsletter-form .wpcf7-response-output {
	-webkit-box-flex: 0 !important;
	-ms-flex: 0 0 100% !important;
	    flex: 0 0 100% !important;
	width: 100% !important;
	margin: 18px 0 0 !important;
	padding: 13px 20px !important;
	border: 0 !important;
	border-radius: 12px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
	background: rgba(255, 255, 255, .12);
	color: #ffffff;
}
.footer-two__newsletter-form .wpcf7-spinner {
	-ms-flex: 0 0 100% !important;
	    flex: 0 0 100% !important;
	margin: 12px 0 0 !important;
}
/* keep the email input's rounded shape even when CF7 marks it invalid */
.footer-two__newsletter-form .wpcf7-form-control.wpcf7-not-valid {
	border: 2px solid #e74c3c !important;
}
/* success (mail sent) — brand teal box with a check */
.footer-two__newsletter-form .wpcf7-form.sent .wpcf7-response-output {
	background: #10787b !important;
	color: #ffffff;
}
.footer-two__newsletter-form .wpcf7-form.sent .wpcf7-response-output::before {
	content: "\2713\00a0";
	font-weight: 700;
}
/* errors / validation / failure — red box */
.footer-two__newsletter-form .wpcf7-form.invalid .wpcf7-response-output,
.footer-two__newsletter-form .wpcf7-form.unaccepted .wpcf7-response-output,
.footer-two__newsletter-form .wpcf7-form.failed .wpcf7-response-output,
.footer-two__newsletter-form .wpcf7-form.spam .wpcf7-response-output {
	background: #c0392b !important;
	color: #ffffff;
}
/* hide the inline field tip ("L'adresse e-mail … n'est pas valide") — the main
   red response message already tells the user to check the field. */
.footer-two__newsletter-form .wpcf7-not-valid-tip {
	display: none !important;
}

/* =========================================================
   Contact form (CF7 #815) — same treatment: clean response box + tidy field tips
   ========================================================= */
.contact__form .wpcf7-response-output {
	margin: 22px 0 0 !important;
	padding: 14px 20px !important;
	border: 0 !important;
	border-radius: 12px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
	background: #eef6f6;
	color: #10787b;
}
.contact__form .wpcf7-form.sent .wpcf7-response-output {
	background: #10787b !important;
	color: #ffffff;
}
.contact__form .wpcf7-form.sent .wpcf7-response-output::before {
	content: "\2713\00a0";
	font-weight: 700;
}
.contact__form .wpcf7-form.invalid .wpcf7-response-output,
.contact__form .wpcf7-form.unaccepted .wpcf7-response-output,
.contact__form .wpcf7-form.failed .wpcf7-response-output,
.contact__form .wpcf7-form.spam .wpcf7-response-output {
	background: #c0392b !important;
	color: #ffffff;
}
/* per-field validation tip — clean small red text (kept: it points to the
   specific field on this multi-field form) */
.contact__form .wpcf7-not-valid-tip {
	display: block;
	color: #c0392b;
	font-size: 13px;
	font-weight: 600;
	margin-top: 7px;
}
.contact__form .wpcf7-form-control.wpcf7-not-valid {
	border-color: #e74c3c !important;
}

/* Hide the floating GREEN DECORATIVE blob (spade-green-two.png — an absolutely
   positioned Elementor image widget). This is NOT the back-to-top button, which
   the user wants to keep, so the back-to-top is intentionally left visible. */
img.wp-image-2814,
.elementor-widget-image:has(img.wp-image-2814) {
	display: none !important;
}

/* Mobile menu: remove the dark (rgba(0,0,0,.9)) backdrop that slides in before
   the panel — keep the element transparent so tapping outside still closes it,
   but no dimming layer. */
.mobile-menu__backdrop {
	background-color: transparent !important;
}

/* =========================================================
   Responsive (mobile & tablet) fixes
   ========================================================= */
@media (max-width: 991px) {
	/* Nav: the 52px side padding is far too wide on small screens and
	   squeezed the logo/hamburger — use a comfortable 16px instead. */
	.header-secondary .container {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* Footer logo was rendering ~350px wide (nearly full screen) — cap it. */
	.footer-two__widget-logo img,
	.footer-two__widget-logo a img {
		max-width: 190px !important;
		width: auto !important;
		height: auto !important;
	}

	/* Gallery slider images are 600px tall by default — too tall on small
	   screens; keep them uniform but shorter. */
	.cause-two .cause-two__slider-single img {
		height: 440px !important;
	}
}
@media (max-width: 575px) {
	.cause-two .cause-two__slider-single img {
		height: 340px !important;
	}
}

/* About page — "Notre mission / vision / valeurs" tab buttons
   (.difference-two__tab-btns). On phones they wrapped 2 + 1 with the third
   stretched full width. Lay them out as 3 equal buttons on one row. */
@media (max-width: 767px) {
	.difference-two__tab-btns {
		-ms-flex-wrap: nowrap !important;
		    flex-wrap: nowrap !important;
		gap: 8px !important;
	}
	.difference-two__tab-btn {
		-webkit-box-flex: 1;
		-ms-flex: 1 1 0px;
		    flex: 1 1 0;
		min-width: 0 !important;
		padding: 11px 4px !important;
		font-size: 12px !important;
		line-height: 1.2 !important;
		text-align: center !important;
		white-space: nowrap !important;
	}
}