/*
 * Gianna — Sept 17 feedback components.
 *
 * Served as a real stylesheet, NOT as an inline wp_head <style>. WP Rocket's Remove Unused CSS
 * empties every inline style block on this site (verified 2026-09-22: <style id="..."></style>
 * with the contents gone, on the plain URL, with the used-css table empty and Kinsta's cache
 * purged). Inline CSS is therefore not a delivery mechanism here. Enqueued and excluded from
 * optimisation in gianna-sept17-components.php.
 */
/* ---- 6-card hover-reveal grid ------------------------------------ */
.gianna-hovercard-grid > .e-con,
.gianna-hovercard {
	flex: 1 1 calc(33.333% - 14px);
	max-width: calc(33.333% - 14px);
	min-width: 0;
}
.gianna-hovercard {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	isolation: isolate;
}
/* Kept light: the title plate now carries the contrast, so this only stops the photo
   from running bright right up to the plate's edge. */
.gianna-hovercard::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient( 180deg, rgba(0,0,0,.06) 40%, rgba(0,0,0,.42) 100% );
	transition: background .3s ease;
}
.gianna-hovercard > * { position: relative; z-index: 1; }

/* ---- the title plate --------------------------------------------- */
.gianna-hovercard .gianna-hovercard__title {
	margin: 0;
	padding: 12px 16px;
	border-radius: 8px;
	/* Flat, not backdrop-filter: a backdrop-filter that fails to composite (headless,
	   software rendering, older Safari) can take the element's own background down with
	   it, which is exactly the legibility this plate exists to guarantee. */
	background: rgba(0,0,0,.62);
}
.gianna-hovercard .gianna-hovercard__title h1,
.gianna-hovercard .gianna-hovercard__title h2,
.gianna-hovercard .gianna-hovercard__title h3,
.gianna-hovercard .gianna-hovercard__title h4 {
	margin: 0;
	color: #FFFFFF;
	text-shadow: none;
}

/* ---- the reveal panel, centred on both axes ----------------------- */
.gianna-hovercard .gianna-hovercard__panel {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(100% - 36px);
	max-width: calc(100% - 36px);
	max-height: calc(100% - 36px);
	z-index: 2;
	overflow: auto;
	padding: 16px 18px;
	border-radius: 8px;
	background: rgba(255,255,255,.96);
	color: #3D3D3D;
	opacity: 0;
	transform: translate(-50%, calc(-50% + 8px));
	pointer-events: none;
	transition: opacity .3s ease, transform .3s ease;
}
.gianna-hovercard:hover .gianna-hovercard__panel,
.gianna-hovercard:focus-within .gianna-hovercard__panel {
	opacity: 1;
	transform: translate(-50%, -50%);
	pointer-events: auto;
}
.gianna-hovercard:hover::after,
.gianna-hovercard:focus-within::after {
	background: linear-gradient( 180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.62) 100% );
}
.gianna-hovercard .gianna-hovercard__panel ul {
	margin: 0;
	padding-left: 20px;
}
.gianna-hovercard .gianna-hovercard__panel p:last-child { margin-bottom: 0; }
.gianna-hovercard .gianna-hovercard__btn .elementor-button {
	background-color: #0075C9;
	color: #FFFFFF;
}

@media (max-width: 1024px) {
	.gianna-hovercard-grid > .e-con,
	.gianna-hovercard { flex-basis: calc(50% - 10px); max-width: calc(50% - 10px); }
}

/* No hover on touch: lay the panel out in normal flow, TITLE FIRST. */
@media (hover: none), (max-width: 767px) {
	.gianna-hovercard-grid > .e-con,
	.gianna-hovercard {
		flex-basis: 100%;
		max-width: 100%;
		min-height: 0;
	}
	.gianna-hovercard { flex-direction: column; }
	.gianna-hovercard .gianna-hovercard__title { order: -1; margin-bottom: 12px; }
	.gianna-hovercard .gianna-hovercard__panel {
		position: static;
		width: auto;
		max-width: 100%;
		max-height: none;
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
	.gianna-hovercard::after {
		background: linear-gradient( 180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.62) 100% );
	}
}

/* ---- pull-quote treatment ---------------------------------------- */
/* Anna, 23 Sept: "remove the dark blue background behind all of the quotes so it's just the lighter
 * backsplash box with the quote inside". The band behind each quote is gone (Elementor), so the
 * bubble now stands on the page ground: a light tint of Pantone 3005 with ink text (14.7:1). */
.gianna-quote .elementor-widget-container {
	position: relative;
	padding: 26px 28px 22px 58px;
	border-radius: 12px;
	background: #E1EEF8;
}
.gianna-quote .elementor-widget-container,
.gianna-quote .elementor-widget-container p,
.gianna-quote .elementor-widget-container em { color: #1A1A1A !important; }
.gianna-quote .elementor-widget-container::before {
	content: "\201C";
	position: absolute;
	left: 16px;
	top: 2px;
	font-size: 64px;
	line-height: 1;
	color: #0075C9;
	opacity: .55;
	font-family: Georgia, "Times New Roman", serif;
}
.gianna-quote .elementor-widget-container::after {
	content: "";
	position: absolute;
	left: 46px;
	bottom: -14px;
	width: 0;
	height: 0;
	border: 14px solid transparent;
	border-top-color: #E1EEF8;
	border-bottom: 0;
}

/* ---- "such as" list spacing (her "add space here" note) ----------- */
ul.gianna-spaced-list { margin-top: 14px; }

/* ---- shop pagination -----------------------------------------------------
 * Anna, Market Sales Page screenshot: "vertical bullet point page lists are showing up in some
 * places -- please change to [numbered boxes]". The theme was rendering WooCommerce's paginator
 * as a plain bulleted <ul>, one page number per line.
 */
.woocommerce-pagination ul.page-numbers,
nav.woocommerce-pagination ul,
.ast-pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
	border: 0;
}
.woocommerce-pagination ul.page-numbers li,
nav.woocommerce-pagination ul li {
	list-style: none;
	margin: 0;
	border: 0;
	display: block;
}
.woocommerce-pagination ul.page-numbers li::marker,
nav.woocommerce-pagination ul li::marker { content: none; }

.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span,
nav.woocommerce-pagination .page-numbers a,
nav.woocommerce-pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid #A7BCD7;
	border-radius: 6px;
	background: #FFFFFF;
	color: #0075C9;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.woocommerce-pagination .page-numbers a:hover,
nav.woocommerce-pagination .page-numbers a:hover {
	background: #FCF7FC;
	border-color: #0075C9;
}
.woocommerce-pagination .page-numbers .current,
nav.woocommerce-pagination .page-numbers .current {
	background: #0075C9;
	border-color: #0075C9;
	color: #FFFFFF;
}
.woocommerce-pagination .page-numbers .dots,
nav.woocommerce-pagination .page-numbers .dots {
	border-color: transparent;
	background: transparent;
	color: #3D3D3D;
}

/* ---- Featured Products sidebar ------------------------------------------ */
.astra-woo-shop-sidebar .wp-block-woocommerce-handpicked-products ul.wc-block-grid__products,
.widget_block .wp-block-woocommerce-handpicked-products ul.wc-block-grid__products {
	list-style: none;
	padding-left: 0;
}


/* ---- from gianna-commerce-chrome.php: commerce chrome — shop UI kept off non-shop pages ----------------------------- */
/*
 * 2026-09-23: this block was broken by the 22 Sept migration itself. The regex that lifted
 * the CSS out of gianna-commerce-chrome.php copied the PHP string concatenation verbatim,
 * which is not CSS, so the browser dropped the rule and the cart total, account icon and
 * floating cart came back on every page. Written out by hand now.
 *
 * Non-commerce pages: the header keeps ONLY the basket icon.
 */
body:not(.gc-commerce) .ast-woo-header-cart-info-wrap,
body:not(.gc-commerce) .ast-header-account,
body:not(.gc-commerce) .ast-header-account-wrap {
	display: none !important;
}
/* The Modern Cart floating bubble is off everywhere, commerce pages included (JM, 2026-09-23). */
#moderncart-floating-cart,
.moderncart-floating-cart {
	display: none !important;
}

/* ---- from gianna-footer-divider.php: footer centre-column dotted rule ----------------------------- */
/* Anna, 23 Sept: "Take out the line separating 'Catholic Social Services' and our social media
 * buttons and centre the buttons underneath the two columns." The dotted rule above is removed. */
.site-footer-primary-section-2 [data-section="section-fb-social-icons-1"] {
	padding-top: 14px;
	margin-top: 14px;
	justify-content: center;
}
.site-footer-primary-section-2 .ast-footer-social-1-wrap { width: 100%; text-align: center; }
.site-footer-primary-section-2 .footer-social-inner-wrap { justify-content: center; }

/* "divide the column of 8 into columns of 4": two columns, filled top-to-bottom like her example. */
.site-footer #menu-secondary-menu {
	display: grid;
	grid-template-rows: repeat(4, auto);
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	justify-content: center;
	column-gap: 48px;
	row-gap: 2px;
}
.site-footer #menu-secondary-menu li { text-align: left; }

/* "Change the blurb font to be the same as the website menu font, and adjust the logo and the blurb
 * to be centred with the website menu." / "could the hyperlink to CSS in the blurb be underlined". */
.site-primary-footer-inner-wrap { align-items: center; }
.site-footer-section-3 .widget_block p {
	font-family: inherit;
	font-style: normal;
	font-weight: 400;
	font-size: inherit;
	line-height: inherit;
}
.site-footer-section-3 .widget_block p strong,
.site-footer-section-3 .widget_block p em { font-weight: inherit; font-style: normal; }
.site-footer-section-3 .widget_block a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 921px) {
	.site-footer #menu-secondary-menu { column-gap: 32px; }
}


/* ---- from gianna-contrast-fixes.php: WCAG contrast fixes ----------------------------- */
/* Restored 2026-09-23. The 22 Sept migration copied printf's "%s" placeholder here instead of the
 * CSS, so "Powered by Sojourn Digital" went dark grey on the blue footer (visible in Anna's own
 * 23 Sept screenshot) and shop category labels went back to 55% opacity. */
.woocommerce ul.products li.product .ast-woo-product-category,
.woocommerce-page ul.products li.product .ast-woo-product-category{opacity:1;}
.footer-widget-area .ast-builder-html-element,
.footer-widget-area .ast-builder-html-element p,
.site-footer .ast-builder-html-element,
.site-footer .ast-builder-html-element p{color:var(--ast-global-color-5);}
.footer-widget-area .ast-builder-html-element a,
.footer-widget-area .ast-builder-html-element a:visited,
.site-footer .ast-builder-html-element a,
.site-footer .ast-builder-html-element a:visited{color:#70d0ec;}
.footer-widget-area .ast-builder-html-element a:hover,
.footer-widget-area .ast-builder-html-element a:focus,
.site-footer .ast-builder-html-element a:hover,
.site-footer .ast-builder-html-element a:focus{color:var(--ast-global-color-5);}


/* ---- from gianna-brand-guard.php: third-party palette/typeface overrides ----------------------------- */
:root {
	--pc-primary:   #0075C9;
	--pc-secondary: #005A9C;
	--pc-accent:    #DD9CDF;
	--pc-danger:    #E2885A;
	--pc-text:      #3D3D3D;
	--pc-muted:     #A7BCD7;
	--pc-bg:        #FFFFFF;
}
.power-coupons-list,
.power-coupons-list .power-coupons-apply-coupon-btn,
.power-coupons-list .power-coupons-coupon-status {
	font-family: 'Lato', sans-serif;
}
.power-coupons-list .power-coupons-coupon-status { fill: #3D3D3D; }
.site .skip-link { font-family: 'Lato', sans-serif; }

/* ---- social icon buttons -------------------------------------------------
 * Inline SVG, not Font Awesome. The FA route resolved correctly in every computed value —
 * content f16d, family "Font Awesome 5 Brands", weight 400, face reported loaded — and still
 * painted blank circles in a real browser, with no readable @font-face for that family in any
 * same-origin sheet. SVG has no font dependency and nothing for RUCSS to prune.
 */
.gianna-home-social,
.gianna-market-social {
	display: flex;
	align-items: center;
	gap: 12px;
}
.gianna-home-social { justify-content: flex-start; }
.gianna-home-social .gianna-soc,
.gianna-market-social .gianna-soc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.gianna-home-social .gianna-soc { background: #FFFFFF; color: #0075C9; }
.gianna-home-social .gianna-soc:hover,
.gianna-home-social .gianna-soc:focus { background: #70D0EC; color: #0075C9; }
.gianna-market-social .gianna-soc { background: #0075C9; color: #FFFFFF; }
.gianna-market-social .gianna-soc:hover,
.gianna-market-social .gianna-soc:focus { background: #005A9C; color: #FFFFFF; }

@media (max-width: 767px) {
	.gianna-home-social { justify-content: center; }
}

/* ---- donation page: $50 / $100 / $500 quick-pick (Anna, 23 Sept) ------------------------
 * The Square variation swatch is hidden; the typed amount is what's charged. */
body.gianna-donation form.variations_form table.variations,
body.gianna-donation form.variations_form .reset_variations { display: none !important; }
.gianna-donation-presets { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.gianna-donation-presets button {
	min-width: 88px; padding: 10px 18px; border: 2px solid #0075C9; border-radius: 6px;
	background: #fff; color: #0075C9; font-weight: 700; font-size: 16px; line-height: 1.2; cursor: pointer;
}
.gianna-donation-presets button:hover,
.gianna-donation-presets button:focus-visible { background: #005A9C; border-color: #005A9C; color: #fff; }
.gianna-donation-presets button[aria-pressed="true"] { background: #0075C9; color: #fff; }

/* ---- Home: "Run by Gianna Moms" card (Anna, 23 Sept) ---------------------------------------
 * "when you scroll over the picture, have a brief description of the Market pop up". The card
 * matches its two neighbours; the description covers the card on hover or keyboard focus, and on
 * touch screens (no hover) it simply shows under the title. Panel is Pantone 3005, white text 4.8:1. */
.gianna-momscard { position: relative; overflow: hidden; }
.gianna-momscard .gianna-momscard__pop {
	position: absolute; inset: 0; z-index: 3; margin: 0 !important; width: 100% !important;
	display: flex; align-items: center; justify-content: center;
	padding: 28px; background: #0075C9; border-radius: 8px;
	opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;
}
.gianna-momscard .gianna-momscard__pop .elementor-widget-container,
.gianna-momscard .gianna-momscard__pop p { color: #fff; font-size: 16px; line-height: 1.55; margin: 0; text-align: center; }
@media (hover: hover) {
	.gianna-momscard:hover .gianna-momscard__pop,
	.gianna-momscard:focus-within .gianna-momscard__pop { opacity: 1; visibility: visible; }
}
@media (hover: none) {
	.gianna-momscard .gianna-momscard__pop {
		position: static; opacity: 1; visibility: visible; background: none; padding: 8px 0 0; width: 60% !important;
		justify-content: flex-start;
	}
	.gianna-momscard .gianna-momscard__pop .elementor-widget-container,
	.gianna-momscard .gianna-momscard__pop p { color: #3D3D3D; text-align: left; font-size: 15px; }
}