/*
 * Heart of Gold school page - MINIMAL stylesheet.
 *
 * READ THIS BEFORE ADDING ANYTHING HERE.
 *
 * Everything on the school page is a native Elementor widget, styled through Elementor's own
 * Style tab. Colour, typography, spacing, backgrounds and widths are all edited in wp-admin by
 * whoever maintains the site. That is deliberate: an earlier version styled the page from this
 * file, which meant every visual tweak was a code change and a deploy.
 *
 * So this file exists for exactly ONE reason, applied to TWO cases: shortcode output that
 * Elementor's Style tab physically cannot reach. That is a hard boundary, not a preference.
 *
 *   1. GiveWP's [give_goal] outputs GiveWP's own HTML.
 *   2. [hog_donors] outputs OUR own HTML - a list of <li> rows built in PHP. Elementor can
 *      style the Shortcode widget's wrapper and nothing inside it, same boundary.
 *
 * Case 2 is the only sanctioned addition. Anything else still belongs in Elementor.
 *
 * Rules of the road:
 *   - The thermometer CARD (background, radius, shadow, padding) is a native Elementor
 *     container. Do not style it here.
 *   - Only the markup INSIDE .give-goal-progress belongs in this file.
 *   - If you find yourself adding a font, a colour, or a margin for anything else, stop:
 *     it belongs in Elementor's Style tab instead.
 *
 * Give's markup, from give/templates/shortcode-goal.php:
 *
 *   <div class="give-goal-progress">
 *     <div class="raised">
 *       <span class="income">$0</span> of <span class="goal-text">$1,000</span> raised
 *     </div>
 *     <div class="progress-bar">
 *       <div class="give-progress-bar"><span style="width:N%;background:..."></span></div>
 *     </div>
 *   </div>
 *
 * Note .progress-bar is the OUTER track; .give-progress-bar sits inside it. The fill <span>
 * carries an INLINE width and gradient that Give builds from the shortcode's color attribute,
 * so its colour is set in PHP (Whip_HoG_Shortcodes::DEFAULT_BAR_COLOR), not here.
 */

@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');

.hog-goal .give-goal-progress {
	display: block;
	height: auto;
	overflow: visible;
	margin: 0;
}

.hog-goal .raised {
	display: block;
	font-family: 'Patrick Hand', cursive;
	font-size: 23px;
	line-height: 1.3;
	color: #444;
	margin: 0 0 14px;
	text-align: center;
}

.hog-goal .raised .income {
	color: #C7971C;
	font-size: 40px;
	display: inline-block;
	vertical-align: -2px;
	margin-right: 4px;
}

.hog-goal .raised .goal-text { color: #1a1a1a; }

.hog-goal .progress-bar {
	background: #efe7d2;
	border-radius: 40px;
	overflow: hidden;
	height: 16px;
	margin: 0;
	padding: 0;
	border: 0;
}

.hog-goal .give-progress-bar {
	height: 100%;
	background: none;
	border: 0;
	margin: 0;
	border-radius: 40px;
	overflow: hidden;
}

.hog-goal .give-progress-bar > span {
	display: block;
	height: 100%;
	border-radius: 40px;
}

/* The editor warning box from Whip_HoG_Shortcodes::missing_form_notice(). Admins only. */
.hog-admin-notice {
	padding: 12px;
	border: 1px dashed #d63638;
	color: #d63638;
	font-size: 14px;
}

/* ---------------------------------------------------------------------------
 * Heart of Gold donor list - Whip_HoG_Shortcodes::donors() / [hog_donors]
 *
 * Designed as a wall of small gold hearts, because that is literally what the
 * program is: a decorated paper heart per donor, displayed at the school. Patrick
 * Hand matches .hog-goal .raised and the program page's handwriting.
 *
 * Markup this styles (no classes to add in Elementor, it is all emitted by PHP):
 *
 *   div.hog-donors[data-columns]
 *     h2.hog-donors__title
 *     ul.hog-donors__list
 *       li.hog-donors__row[.hog-donors__row--anon]
 *         span.hog-donors__name
 *         span.hog-donors__meta
 *           span.hog-donors__amount
 *           span.hog-donors__date
 * ------------------------------------------------------------------------- */

/* Flex column with a gap, NOT margins on the children.
 *
 * The gap between the heading and the list used to be the h2's own margin-bottom, and
 * both Astra and Elementor set margins on headings hard enough to win that fight even
 * against h2.<class>. Owning the spacing on the CONTAINER sidesteps the argument: gap is
 * the parent's property, so no rule targeting h2 can collapse it. */
.hog-donors {
	margin: 0 0 28px;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 26px;
}

/* h2.<class> on purpose: both Astra and Elementor set a margin on bare h2 that
   outranks a single class selector, which collapsed the gap under the heading. */
/* Margin zeroed deliberately: spacing comes from .hog-donors' gap. Any theme rule that
   overrides this margin now changes nothing, which is the point. */
.hog-donors h2.hog-donors__title {
	font-family: 'Patrick Hand', cursive;
	font-size: clamp(28px, 3vw, 38px);
	font-weight: 400;
	line-height: 1.15;
	text-align: center;
	margin: 0;
	padding: 0;
}

/* Grid, not CSS columns: multi-column flowed rows in reading order down each
   column and split cards across the boundary. auto-fill keeps it responsive
   without a media query per breakpoint. */
.hog-donors__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 12px;
}

/* data-columns caps the count on wide screens; auto-fill still collapses it on
   narrow ones, so no media query is needed for the cap itself. */
.hog-donors[data-columns="1"] .hog-donors__list { grid-template-columns: minmax(0, 1fr); }
.hog-donors[data-columns="2"] .hog-donors__list { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.hog-donors[data-columns="4"] .hog-donors__list { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.hog-donors__row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"heart name"
		"heart meta";
	column-gap: 12px;
	align-items: center;
	padding: 13px 16px;
	background: #fff;
	/* Deep enough to hold its edge on a cream band as well as on white. */
	border: 1px solid #e6d8b4;
	border-radius: 14px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .06);
}

/* The heart. A glyph rather than an image: no asset to ship, no request, and it
   scales with the text. */
.hog-donors__row::before {
	content: "\2665";
	grid-area: heart;
	font-size: 25px;
	line-height: 1;
	color: #C7971C;
	align-self: center;
}

.hog-donors__name {
	grid-area: name;
	font-family: 'Patrick Hand', cursive;
	font-size: 21px;
	line-height: 1.25;
	color: #1a1a1a;
	/* Donor-entered names can be long and unbroken. */
	overflow-wrap: break-word;
}

.hog-donors__meta {
	grid-area: meta;
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-top: 1px;
}

.hog-donors__amount {
	font-family: 'Patrick Hand', cursive;
	font-size: 18px;
	/* NOT --gold #C7971C: that is 2.67:1 on a white card, well under WCAG AA, and gold on
	   white at 18px is genuinely hard to read. #8A6510 is the dark stop of the program
	   page's own goldtxt gradient - same family, 5.32:1. */
	color: #8A6510;
}

.hog-donors__date {
	font-size: 12px;
	/* 12px needs the full 4.5:1; #9a9a9a was 2.81:1. */
	color: #6b6b6b;
	white-space: nowrap;
}

/* Anonymous gifts are real gifts and keep their card and their heart - the school's
   count and total have to stay honest. Just a quieter name. */
.hog-donors__row--anon .hog-donors__name {
	/* Quieter than a real name, but still readable: #8a8a8a was only 3.45:1. */
	color: #6b6b6b;
	font-style: italic;
}

/* Decorative, so not held to the text contrast rule - but not invisible either. */
.hog-donors__row--anon::before {
	color: #c9b268;
}

/* Mobile cap. PHP tags the rows past the `mobile` attribute rather than putting a magic
 * number in here, so the two can never drift out of sync. 600px is where the grid is down
 * to one or two columns and a 17-gift school runs to about 1,400px of scrolling. */
@media (max-width: 600px) {
	.hog-donors__row--overflow {
		display: none;
	}
}

/* The remainder count differs by breakpoint, so both are rendered and one is shown. */
.hog-donors__more-narrow {
	display: none;
}

@media (max-width: 600px) {
	.hog-donors__more-wide {
		display: none;
	}

	.hog-donors__more-narrow {
		display: inline;
	}
}

/* Nothing to say on desktop when only the mobile list is capped. */
@media (min-width: 601px) {
	.hog-donors__more--narrow-only {
		display: none;
	}
}

/* Remainder line when the list is capped by the max attribute. */
/* Styled as a rotated pill, matching the program page's .kick badges ("Why this matters").
 * align-self is load-bearing: .hog-donors is a flex column, so without it the pill would
 * stretch to full width and read as a bar rather than a badge.
 * White on #8A6510 is 5.32:1, so it passes AA the same way the amounts do. */
.hog-donors__more {
	align-self: center;
	font-family: 'Patrick Hand', cursive;
	font-size: 19px;
	line-height: 1;
	color: #fff;
	background: #8A6510;
	padding: 10px 22px;
	border-radius: 30px;
	transform: rotate(-1.5deg);
	box-shadow: 0 6px 14px rgba(0, 0, 0, .14);
	margin: 0;
}

.hog-donors__empty {
	font-family: 'Patrick Hand', cursive;
	font-size: 21px;
	color: #6b6b6b;
	text-align: center;
	margin: 0;
}

@media (max-width: 480px) {
	.hog-donors__list,
	.hog-donors[data-columns="2"] .hog-donors__list,
	.hog-donors[data-columns="3"] .hog-donors__list,
	.hog-donors[data-columns="4"] .hog-donors__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------------
 * [hog_share] - append to whip-hog/assets/hog-school.css
 *
 * Goes in that file rather than its own stylesheet so it rides the existing
 * wp_head inline path and cannot be deferred by NitroPack. Colours match the
 * .hog3 vocabulary on the program page.
 * ------------------------------------------------------------------------ */

.hog-share {
	--hog-gold: #C7971C;
	--hog-ink: #161616;
	background: #FDF4DF;
	border-radius: 22px;
	padding: 40px 34px;
	box-sizing: border-box;   /* max-width below is the outer edge, so it lines up with the band */
	margin: 0 auto;
	width: 100%;
	/* 1040px is the .hog3 .wrap width the bands above use, so the card's edges line up with
	   their body copy. Note this only reaches 1040 because container 72847e9 is set to
	   align-items: stretch - with Elementor's default `center` a block child shrinks to its
	   content and the card sits narrower than the text above it. */
	max-width: 1040px;
}

.hog-share-inner {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 38px;
	align-items: center;
}

.hog-share-title {
	font-family: 'Patrick Hand', cursive;
	font-weight: 400;
	font-size: clamp(28px, 3.4vw, 40px);
	line-height: 1.1;
	margin: 0 0 8px;
	color: var(--hog-ink);
}

.hog-share-sub {
	font-size: 16.5px;
	line-height: 1.65;
	margin: 0 0 20px;
	max-width: 46ch;
	color: #3a3a3a;
}

/* Buttons ---------------------------------------------------------------- */

.hog-share-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.hog-share-btn {
	display: inline-block;
	padding: 12px 22px;
	border-radius: 40px;
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	color: #fff !important;
	background: var(--hog-ink);
	border: none;
	cursor: pointer;
	transition: transform .2s ease, filter .2s ease;
}

.hog-share-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.hog-share-btn:focus-visible { outline: 3px solid var(--hog-gold); outline-offset: 2px; }

/* Icon-only variant. The glyph is Font Awesome 5, already loaded sitewide by the header and
   footer social widgets - see the enqueue note in Whip_HoG_Share::share(). Fixed square so
   the five circles stay identical whatever the glyph's own width. */
.hog-share-btn--icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border-radius: 50%;
	font-size: 20px;
}

.hog-share-btn--icon i { line-height: 1; }

.hog-share-btn--facebook { background: #1877F2; }
.hog-share-btn--sms      { background: #6FBE33; }
.hog-share-btn--email    { background: #3AA0DC; }
.hog-share-btn--whatsapp { background: #25D366; }
.hog-share-btn--x-twitter{ background: #161616; }
.hog-share-btn--copy     { background: var(--hog-gold); }

/* Copy row --------------------------------------------------------------- */

.hog-share-copy {
	display: flex;
	gap: 10px;
	margin-top: 16px;
}

.hog-share-url {
	flex: 1 1 auto;
	min-width: 0;
	padding: 11px 16px;
	border: 2px solid #e2d7b8;
	border-radius: 40px;
	background: #fff;
	font-size: 14px;
	color: #444;
	text-overflow: ellipsis;
}

/* QR --------------------------------------------------------------------- */

.hog-share-qr {
	margin: 0;
	text-align: center;
}

.hog-share-qr-img {
	/* margin auto, not just the figure's text-align: this is a fixed-width block, so once the
	   caption beneath it got longer than 190px it stopped sitting over the middle of the text. */
	margin: 0 auto;
	width: 190px;
	height: 190px;
	padding: 10px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 12px 28px rgba(0, 0, 0, .10);
}

.hog-share-qr-img svg { display: block; width: 100%; height: 100%; }

.hog-share-qr figcaption {
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.5;
}

.hog-share-qr figcaption strong {
	display: block;
	font-family: 'Patrick Hand', cursive;
	font-weight: 400;
	font-size: 20px;
	color: var(--hog-ink);
}

.hog-share-qr-dl { color: #8A6510; text-decoration: underline; }

/* Narrow ----------------------------------------------------------------- */

@media (max-width: 860px) {
	.hog-share { padding: 32px 22px; border-radius: 18px; }
	.hog-share-inner { grid-template-columns: 1fr; gap: 28px; }
	.hog-share-qr { order: -1; }          /* QR first on a phone - it is the thing being shown */
	.hog-share-copy { flex-direction: column; }
	.hog-share-copy .hog-share-btn { width: 100%; }
}

/* Print ------------------------------------------------------------------ */

@media print {
	.hog-share-buttons,
	.hog-share-copy,
	.hog-share-qr-dl { display: none; }
	.hog-share { background: none; padding: 0; }
	.hog-share-qr-img { box-shadow: none; width: 260px; height: 260px; margin: 0 auto; }
}

/* ---------------------------------------------------------------------------
 * [hog_donate_button]
 *
 * This had no rules at all - the shortcode's docblock said the styling lived here
 * and it never did, so the CTA rendered as a plain gold text link and read as body
 * copy. Values are copied from .hog3 .btn3 on the program page so the two match.
 * ------------------------------------------------------------------------ */

.hog-donate-button-wrap { margin: 0; }

.hog-donate-button {
	display: inline-block;
	background: #a58d51;
	color: #fff !important;
	font-weight: 600;
	font-size: 17px;
	line-height: 1.2;
	padding: 16px 34px;
	border-radius: 17.119px;
	border-right: 2px solid #82600F;
	border-bottom: 2px solid #82600F;
	text-decoration: none;
	box-shadow: 0 0 30px 2px rgba(224, 163, 19, .30);
	transition: transform .25s, background .25s;
}

.hog-donate-button:hover { background: #8f7a3e; transform: translateY(-2px); }
.hog-donate-button:focus-visible { outline: 3px solid #C7971C; outline-offset: 3px; }

/* ---------------------------------------------------------------------------
 * Collapse a container whose only widget rendered nothing.
 *
 * [hog_donors] outputs an empty string until a school takes its first donation, but
 * the Elementor container holding it still paints its cream background and padding -
 * which showed as a bare stripe directly under the hero on every school with no
 * donations yet. Matching on shape rather than an element ID so it keeps working if
 * the template is rearranged; :only-child is what stops it touching the share block,
 * which has two widgets. :has() is supported everywhere this site's traffic comes from,
 * and a browser without it just sees today's stripe.
 * ------------------------------------------------------------------------ */

.e-con:has(> .e-con-inner > .elementor-widget-shortcode:only-child > .elementor-widget-container > .elementor-shortcode:empty) {
	display: none;
}