/**
 * Appeal pages: the Give bar that follows the scroll (inc/give-sticky.php,
 * assets/js/give-sticky.js). Loaded only on program and country pages whose
 * hero card renders with the bar on. Colours: theme.json tokens only.
 *
 * - 782px and up: the panel is a bar fixed at the bottom of the screen (the
 *   form is the shared Give card, laid out in one row, two below 1280px).
 * - Under 782px, and on screens 500px tall or less (landscape phones): a slim
 *   bar button; the panel is a bottom sheet while open.
 *
 * The wide queries start at 781.02px / 500.02px, not 782px / 501px, so a
 * fractional viewport (browser zoom: 781.5px) is never in neither layout; they
 * are the exact complement of the phone query (and give-sticky.js matchMedia).
 *
 * Fixed positioning only (no layout shift). Hidden = slid below the screen and
 * `visibility: hidden` (out of the tab order); give-sticky.js adds .is-shown.
 *
 * Quick Donate (.ab-give-sticky--tab, general pages; the end of this file): a
 * tab at the bottom centre; .is-expanded opens the bar under it (wide screens).
 * Phones: the tab opens the same bottom sheet.
 */

/* Room at the foot of the page, so the bar never covers the end of the footer.
   Only once give-sticky.js has set the bar up (.ab-give-sticky-ready): without
   the script there is no bar, so no empty strip under the footer. The script
   sets --ab-give-sticky-h to the bar's measured height (it differs by screen
   width and by appeal). */
body.has-ab-give-sticky.ab-give-sticky-ready {
	padding-bottom: var( --ab-give-sticky-h, calc( 68px + env( safe-area-inset-bottom, 0px ) ) );
}

@media ( min-width: 781.02px ) and ( max-width: 1279px ) and ( min-height: 500.02px ) {
	body.has-ab-give-sticky.ab-give-sticky-ready {
		padding-bottom: var( --ab-give-sticky-h, calc( 120px + env( safe-area-inset-bottom, 0px ) ) );
	}
}

.ab-give-sticky[hidden],
.ab-give-sticky [hidden] {
	display: none !important;
}

.ab-give-sticky__bar,
.ab-give-sticky__panel {
	box-sizing: border-box;
	font-family: var( --wp--preset--font-family--sans );
}

/* Out of view until shown; never while the basket drawer is open. (The Quick
   Donate tab slides as a whole: see the end of this file.) */
.ab-give-sticky__bar,
.ab-give-sticky:not( .ab-give-sticky--tab ):not( .is-open ) .ab-give-sticky__panel {
	transform: translateY( calc( 100% + 16px ) );
	visibility: hidden;
	transition: transform 0.25s ease, visibility 0s linear 0.25s;
}

.ab-give-sticky.is-shown .ab-give-sticky__bar,
.ab-give-sticky.is-shown:not( .ab-give-sticky--tab ):not( .is-open ) .ab-give-sticky__panel {
	transform: none;
	visibility: visible;
	transition: transform 0.25s ease, visibility 0s;
}

body.ab-mc-open .ab-give-sticky.is-shown .ab-give-sticky__bar,
body.ab-mc-open .ab-give-sticky.is-shown:not( .ab-give-sticky--tab ):not( .is-open ) .ab-give-sticky__panel {
	transform: translateY( calc( 100% + 16px ) );
	visibility: hidden;
}

/* ---------------------------------------------------------------------------
 * 782px and up: one row at the bottom of the screen.
 * ------------------------------------------------------------------------- */
@media ( min-width: 781.02px ) and ( min-height: 500.02px ) {
	.ab-give-sticky__bar,
	.ab-give-sticky__backdrop,
	.ab-give-sticky__close {
		display: none !important;
	}

	.ab-give-sticky__panel {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 990;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 20px;
		padding: 10px max( 24px, calc( ( 100% - var( --wp--style--global--wide-size, 1200px ) ) / 2 ) ) calc( 10px + env( safe-area-inset-bottom, 0px ) );
		background: var( --wp--preset--color--ab-white );
		border-top: 1px solid var( --wp--preset--color--ab-line );
		box-shadow: 0 -8px 24px color-mix( in srgb, var( --wp--preset--color--ab-navy ) 10%, transparent );
	}

	.ab-give-sticky__head {
		flex: 0 1 auto;
		min-width: 0;
	}

	.ab-give-sticky__title {
		max-width: 260px;
		margin: 0;
		overflow: hidden;
		font: 600 1.0625rem/1.3 var( --wp--preset--font-family--serif );
		color: var( --wp--preset--color--ab-navy );
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.ab-hero-donate.ab-give-card--sticky {
		flex: none;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: 12px;
		width: auto;
		min-width: 0;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.ab-give-card--sticky .ab-hero-donate__freq {
		flex: none;
	}

	.ab-give-card--sticky .ab-hero-donate__freq-opt {
		padding: 9px 12px;
		font-size: 14px;
		white-space: nowrap;
	}

	.ab-give-card--sticky .ab-hero-donate__amounts {
		flex: none;
		flex-direction: row;
		align-items: center;
		min-width: 0;
	}

	/* The legend, the hint and the trust line: for screen readers only. */
	.ab-give-card--sticky .ab-hero-donate__label,
	.ab-give-card--sticky .ab-hero-donate__hint,
	.ab-give-card--sticky .ab-give-card__big-label {
		position: absolute;
		width: 1px;
		height: 1px;
		min-height: 0;
		margin: 0;
		padding: 0;
		overflow: hidden;
		clip-path: inset( 50% );
		border: 0;
		white-space: nowrap;
	}

	.ab-give-card--sticky .ab-hero-donate__trust {
		display: none;
	}

	.ab-give-card--sticky .ab-hero-donate__grid {
		display: flex;
		align-items: center;
		gap: 6px;
	}

	.ab-give-card--sticky .ab-hero-donate__amt,
	.ab-give-card--sticky .ab-give-card__big {
		flex: none;
		flex-direction: row;
		align-items: center;
		min-width: 52px;
		min-height: 44px;
		padding: 0 10px;
		font-size: 15px;
		white-space: nowrap;
	}

	.ab-give-card--sticky .ab-hero-donate__other-wrap {
		flex: 0 0 124px;
	}

	.ab-give-card--sticky .ab-hero-donate__other {
		min-height: 44px;
		padding-top: 0;
		padding-bottom: 0;
	}

	.ab-give-card--sticky .ab-hero-donate__zakat {
		flex: none;
		align-items: center;
		padding: 8px 10px;
		font-size: 14px;
		white-space: nowrap;
	}

	.ab-give-card--sticky .ab-hero-donate__zakat-box {
		margin-top: 0;
	}

	.ab-give-card--sticky .ab-hero-donate__zakat-text small {
		display: none;
	}

	.ab-give-card--sticky .ab-hero-donate__submit {
		flex: none;
		width: auto;
		min-width: 140px;
		min-height: 44px;
		padding: 0 22px;
		font-size: 16px;
		white-space: nowrap;
	}

	/* A refused amount: the reason shows just above the bar, from the Other
	   field's left edge (give-sticky.js sets --ab-give-sticky-err-left; with
	   both sides set and max-width reached, `left` wins). */
	.ab-give-card--sticky .ab-give-card__error:not( :empty ) {
		position: absolute;
		left: var( --ab-give-sticky-err-left, auto );
		right: max( 24px, calc( ( 100% - var( --wp--style--global--wide-size, 1200px ) ) / 2 ) );
		bottom: calc( 100% + 8px );
		max-width: 420px;
		margin: 0;
		box-shadow: var( --wp--preset--shadow--raised );
	}
}

/* Up to 1279px: two rows. The name, Give Once / Monthly, Zakat and the button
   on the first; the amounts and Other under them. */
@media ( min-width: 781.02px ) and ( max-width: 1279px ) and ( min-height: 500.02px ) {
	.ab-give-sticky__panel {
		align-items: flex-start;
		justify-content: flex-start;
		gap: 16px;
	}

	.ab-give-sticky__head {
		flex: 0 1 200px;
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	.ab-give-sticky__title {
		display: -webkit-box;
		max-width: none;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		white-space: normal;
	}

	.ab-hero-donate.ab-give-card--sticky {
		flex: 1 1 auto;
		flex-wrap: wrap;
		row-gap: 8px;
	}

	.ab-give-card--sticky .ab-hero-donate__freq {
		order: 1;
	}

	.ab-give-card--sticky .ab-hero-donate__zakat {
		order: 2;
	}

	.ab-give-card--sticky .ab-hero-donate__submit {
		order: 3;
		margin-left: auto;
	}

	.ab-give-card--sticky .ab-hero-donate__amounts {
		flex: 1 0 100%;
		order: 4;
	}
}

/* ---------------------------------------------------------------------------
 * Phones: the bar is one button; the panel is a bottom sheet while open.
 * ------------------------------------------------------------------------- */
@media ( max-width: 781px ), ( max-height: 500px ) {
	.ab-give-sticky__bar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 990;
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		margin: 0;
		padding: 10px max( 16px, env( safe-area-inset-right, 0px ) ) calc( 10px + env( safe-area-inset-bottom, 0px ) ) max( 16px, env( safe-area-inset-left, 0px ) );
		background: var( --wp--preset--color--ab-white );
		border: 0;
		border-top: 1px solid var( --wp--preset--color--ab-line );
		border-radius: 0;
		box-shadow: 0 -8px 24px color-mix( in srgb, var( --wp--preset--color--ab-navy ) 10%, transparent );
		color: var( --wp--preset--color--ab-ink );
		text-align: left;
		cursor: pointer;
	}

	.ab-give-sticky__bar:focus-visible {
		outline: 3px solid var( --wp--preset--color--ab-navy );
		outline-offset: -3px;
	}

	.ab-give-sticky__bar-name {
		display: -webkit-box;
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		font: 600 15px/1.25 var( --wp--preset--font-family--sans );
		color: var( --wp--preset--color--ab-navy );
	}

	.ab-give-sticky__bar-cta {
		flex: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.3em;
		min-width: 104px;
		min-height: 44px;
		padding: 0 18px;
		white-space: nowrap;
		border-radius: 4px;
		background: var( --wp--custom--action--bright );
		color: var( --wp--preset--color--ab-white );
		font: 600 16px/1 var( --wp--preset--font-family--sans );
	}

	.ab-give-sticky__bar:hover .ab-give-sticky__bar-cta {
		background: var( --wp--preset--color--ab-orange-600 );
	}

	/* Closed: the sheet is not there at all. */
	.ab-give-sticky:not( .is-open ) .ab-give-sticky__panel {
		display: none;
	}

	.ab-give-sticky__backdrop {
		position: fixed;
		inset: 0;
		z-index: 995;
		background: color-mix( in srgb, var( --wp--preset--color--ab-navy ) 55%, transparent );
	}

	.ab-give-sticky.is-open .ab-give-sticky__panel {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 996;
		max-height: calc( 100% - 40px );
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 8px max( 16px, env( safe-area-inset-right, 0px ) ) calc( 16px + env( safe-area-inset-bottom, 0px ) ) max( 16px, env( safe-area-inset-left, 0px ) );
		background: var( --wp--preset--color--ab-white );
		border-radius: 16px 16px 0 0;
		box-shadow: var( --wp--preset--shadow--raised );
		animation: ab-give-sheet-in 0.25s ease;
	}

	/* The sheet scrolls under its title and close button, which stay at the
	   top (a landscape phone shows only part of the sheet at a time). */
	.ab-give-sticky__head {
		position: sticky;
		top: -8px;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin: -8px calc( -1 * max( 16px, env( safe-area-inset-right, 0px ) ) ) 4px calc( -1 * max( 16px, env( safe-area-inset-left, 0px ) ) );
		padding: 8px max( 16px, env( safe-area-inset-right, 0px ) ) 4px max( 16px, env( safe-area-inset-left, 0px ) );
		background: var( --wp--preset--color--ab-white );
	}

	.ab-give-sticky__title {
		margin: 0;
		font: 600 1.25rem/1.3 var( --wp--preset--font-family--serif );
		color: var( --wp--preset--color--ab-navy );
	}

	.ab-give-sticky__close {
		flex: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-right: -10px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: none;
		color: var( --wp--preset--color--ab-ink );
		cursor: pointer;
	}

	.ab-give-sticky__close:hover {
		background: var( --wp--custom--neutral--100 );
	}

	.ab-give-sticky__close:focus-visible {
		outline: 2px solid var( --wp--preset--color--ab-navy );
		outline-offset: 0;
	}

	.ab-hero-donate.ab-give-card--sticky {
		width: 100%;
		padding: 0;
		border: 0;
		box-shadow: none;
	}

	/* The page stays put under the open sheet; the cart button steps aside. */
	html.ab-give-sheet-open {
		overflow: hidden;
	}

	html.ab-give-sheet-open .ab-mc__launcher--float {
		visibility: hidden;
	}
}

@keyframes ab-give-sheet-in {
	from {
		transform: translateY( 100% );
	}
	to {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * Quick Donate: how the tab and the bar move. The tab itself (and its room at
 * the foot of the page) is in quick-donate-tab.css, printed inline.
 * ------------------------------------------------------------------------- */
/* Wide screens: the tab and the bar slide as one, from the foot of the
   screen. Closed (shown): only the tab shows above the edge. Open
   (.is-expanded): the bar under it too. */
@media ( min-width: 781.02px ) and ( min-height: 500.02px ) {
	.ab-give-sticky--tab {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 990;
		display: flex;
		flex-direction: column;
		align-items: center;
		pointer-events: none;
		transform: translateY( calc( 100% + 16px ) );
		visibility: hidden;
		transition: transform 0.25s ease, visibility 0s linear 0.25s;
	}

	.ab-give-sticky--tab.is-shown {
		transform: translateY( calc( 100% - var( --ab-qd-tab-h ) ) );
		visibility: visible;
		transition: transform 0.25s ease, visibility 0s;
	}

	.ab-give-sticky--tab.is-shown.is-expanded {
		transform: none;
	}

	body.ab-mc-open .ab-give-sticky--tab.is-shown {
		transform: translateY( calc( 100% + 16px ) );
		visibility: hidden;
	}

	/* The open tab sits on the bar: no safe-area padding there. */
	.ab-give-sticky--tab.is-expanded .ab-give-sticky__tab {
		height: 44px;
		padding-bottom: 0;
	}

	.ab-give-sticky--tab .ab-give-sticky__panel {
		position: relative;
		right: auto;
		bottom: auto;
		left: auto;
		width: 100%;
		visibility: hidden;
		pointer-events: auto;
		transition: visibility 0s linear 0.25s;
	}

	.ab-give-sticky--tab.is-shown.is-expanded .ab-give-sticky__panel {
		visibility: visible;
		transition: visibility 0s;
	}

	body.ab-mc-open .ab-give-sticky--tab.is-shown.is-expanded .ab-give-sticky__panel {
		visibility: hidden;
	}
}

/* Phones: the tab alone, fixed at the bottom centre; it opens the sheet. */
@media ( max-width: 781px ), ( max-height: 500px ) {
	.ab-give-sticky--tab .ab-give-sticky__tab {
		position: fixed;
		bottom: 0;
		left: 50%;
		z-index: 990;
		transform: translate( -50%, calc( 100% + 16px ) );
		visibility: hidden;
		transition: transform 0.25s ease, visibility 0s linear 0.25s;
	}

	.ab-give-sticky--tab.is-shown .ab-give-sticky__tab {
		transform: translate( -50%, 0 );
		visibility: visible;
		transition: transform 0.25s ease, visibility 0s;
	}

	body.ab-mc-open .ab-give-sticky--tab.is-shown .ab-give-sticky__tab {
		transform: translate( -50%, calc( 100% + 16px ) );
		visibility: hidden;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.ab-give-sticky__bar,
	.ab-give-sticky__panel,
	.ab-give-sticky.is-shown .ab-give-sticky__bar,
	.ab-give-sticky.is-shown:not( .is-open ) .ab-give-sticky__panel,
	.ab-give-sticky--tab,
	.ab-give-sticky--tab.is-shown,
	.ab-give-sticky--tab .ab-give-sticky__tab,
	.ab-give-sticky--tab.is-shown .ab-give-sticky__tab,
	.ab-give-sticky__tab-icon {
		transition: none;
	}

	.ab-give-sticky.is-open .ab-give-sticky__panel {
		animation: none;
	}
}