/* Friends of Glenfrome — supplemental front-end styles */

/* ------------------------------------------------------------------
   Layout: remove the white gaps between full-width sections.
   Sections carry their own padding, so the root block-gap only
   creates stray white bands between coloured bands.
------------------------------------------------------------------- */
.wp-site-blocks > * + * {
	margin-block-start: 0 !important;
}

main.wp-block-group > * + * {
	margin-block-start: 0 !important;
}

.wp-block-post-content > section.wp-block-group {
	margin-block-start: 0 !important;
}

/* ------------------------------------------------------------------
   Fancy swoosh underline (matches the source site's .underline-3
   style-3). Add "fog-underline" in the heading block's Additional
   CSS class field.
------------------------------------------------------------------- */
.fog-underline {
	position: relative;
	z-index: 1;
	width: fit-content;
}

h1.fog-underline.has-text-align-center,
h2.fog-underline.has-text-align-center,
h3.fog-underline.has-text-align-center {
	margin-left: auto;
	margin-right: auto;
}

.fog-underline::after {
	content: "";
	position: absolute;
	z-index: -1;
	display: block;
	left: 50%;
	bottom: -0.12em;
	width: 105%;
	height: 0.3em;
	transform: translateX(-50%);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 205 9.37'%3E%3Cpath fill='%23FAB758' d='M202.47,9.37A1191.26,1191.26,0,0,0,1.79,7.48,1.67,1.67,0,0,1,0,5.92H0A1.76,1.76,0,0,1,1.63,4.21c67-5.71,133.83-5.43,200.8-.27A2.75,2.75,0,0,1,205,6.88h0A2.6,2.6,0,0,1,202.47,9.37Z'/%3E%3C/svg%3E");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: bottom;
}

/* ------------------------------------------------------------------
   Hero image: diagonal-stripe shape top-left and soft offset panel
   bottom-right, like the source hero.
------------------------------------------------------------------- */
.fog-hero-figure {
	position: relative;
	margin: 1.7rem 0 1.8rem;
}

.fog-hero-figure img {
	position: relative;
	z-index: 1;
	border-radius: 1rem;
}

.fog-hero-figure::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: -1.7rem;
	left: -1.5rem;
	width: 38%;
	height: 48%;
	background-image: repeating-linear-gradient(
		45deg,
		rgba(250, 183, 88, 0.85) 0,
		rgba(250, 183, 88, 0.85) 2px,
		transparent 2px,
		transparent 9px
	);
}

.fog-hero-figure::after {
	content: "";
	position: absolute;
	z-index: 0;
	bottom: -1.8rem;
	right: -0.9rem;
	width: 85%;
	height: 90%;
	border-radius: 1rem;
	background: var(--wp--preset--color--pale);
}

/* ------------------------------------------------------------------
   Cards
------------------------------------------------------------------- */
.fog-card img,
.fog-round-img img {
	border-radius: 1rem;
	object-fit: cover;
	width: 100%;
}

/* Equal-height cards: make the columns row stretch its children so every
   card's box (background/shadow/radius) fills the tallest sibling's height.
   Note: don't add display:flex/height:100% on .fog-card itself — doing so
   turns the card into its own flex formatting context and makes Chrome size
   it by content instead of stretching it, which defeats this rule. */
.wp-block-columns:has(> .fog-card) {
	align-items: stretch !important;
}

.fog-card {
	background: var(--wp--preset--color--base);
	border-radius: 1.25rem;
	box-shadow: 0 0.5rem 1.75rem rgba(68, 71, 86, 0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	overflow: hidden;
}

.fog-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 0.85rem 2.25rem rgba(68, 71, 86, 0.14);
}

/* Query Loop news grid: each post renders as a card */
.fog-news-grid .wp-block-post {
	background: var(--wp--preset--color--base);
	border-radius: 1.25rem;
	box-shadow: 0 0.5rem 1.75rem rgba(68, 71, 86, 0.08);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fog-news-grid .wp-block-post:hover {
	transform: translateY(-4px);
	box-shadow: 0 0.85rem 2.25rem rgba(68, 71, 86, 0.14);
}

.fog-news-grid .wp-block-post-featured-image img {
	border-radius: 0;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
}

.fog-news-grid .wp-block-post-title,
.fog-news-grid .wp-block-post-date,
.fog-news-grid .wp-block-post-excerpt,
.fog-news-grid .wp-block-read-more {
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

/* Card text: dark, readable titles; muted date; amber only for the action link */
.fog-news-grid .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.fog-news-grid .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary-dark);
}

.fog-news-grid .wp-block-post-date.has-primary-dark-color {
	color: #9095a5 !important;
}

.fog-news-grid .wp-block-read-more {
	display: inline-block;
	margin-bottom: 1.25rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary-dark);
}

/* ------------------------------------------------------------------
   Classic menus (Appearance → Menus) rendered by the fog/classic-menu
   block in the header and footer template parts.
------------------------------------------------------------------- */
.fog-menu {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
}

.fog-menu a {
	text-decoration: none;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.fog-menu:not(.fog-menu-footer) a:hover,
.fog-menu:not(.fog-menu-footer) .current-menu-item > a {
	color: var(--wp--preset--color--primary-dark);
}

/* Cart link in the header menu — hidden when the cart is empty */
.fog-cart-item.fog-cart-hidden {
	display: none;
}

.fog-cart-item .fog-cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.35rem;
	height: 1.35rem;
	margin-left: 0.4rem;
	padding: 0 0.3rem;
	border-radius: 50rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-size: 0.78rem;
	font-weight: 700;
	vertical-align: text-bottom;
}

/* Mobile header: keep the logo and Donate button on one row (space-between
   pushes them apart) and drop the menu onto its own full-width row below.
   display:contents promotes the menu and button to items of .fog-header-bar. */
@media (max-width: 781px) {
	/* Out-specify core's `body .is-layout-flex { display: flex }`. */
	.fog-header-bar > .fog-header-nav {
		display: contents;
	}

	.fog-header-bar .fog-menu {
		order: 2;
		flex-basis: 100%;
		gap: 1.25rem;
	}
}

/* Footer variant: white links on the amber band, pipe separators */
.fog-menu-footer {
	gap: 0;
}

.fog-menu-footer a {
	color: var(--wp--preset--color--base);
	font-size: 0.9rem;
}

.fog-menu-footer a:hover,
.fog-menu-footer .current-menu-item > a {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
}

.fog-menu-footer li + li::before {
	content: "|";
	color: rgba(255, 255, 255, 0.55);
	margin: 0 0.9rem;
}

/* Pill buttons keep their shape even when the theme resets radius */
.wp-block-button__link {
	border-radius: 50rem;
}

/* ------------------------------------------------------------------
   Anchored sections (Donate page tabs) — clear the sticky offset
------------------------------------------------------------------- */
.fog-anchor {
	scroll-margin-top: 2rem;
}

/* ------------------------------------------------------------------
   WooCommerce: bring shop/checkout/account in line with the theme
------------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wc-block-components-button {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border-radius: 50rem;
	font-family: var(--wp--preset--font-family--quicksand);
	font-weight: 700;
	padding: 0.85rem 1.75rem;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--base);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	border: 1px solid #e3e0d9;
	border-radius: 0.75rem;
	padding: 0.65rem 0.9rem;
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--quicksand);
}

.woocommerce-checkout #payment,
.woocommerce .woocommerce-checkout-review-order-table {
	background: var(--wp--preset--color--cream);
	border-radius: 1.25rem;
	border: none;
}

.woocommerce-checkout h3,
.woocommerce-account h2 {
	font-family: var(--wp--preset--font-family--quicksand);
}

/* Hide the Category/SKU meta row on product pages (Woo block template) */
.wp-block-woocommerce-product-meta,
.woocommerce div.product .product_meta {
	display: none;
}

/* Donation products: no Description/Additional information tabs needed */
.fog-hide-product-tabs .woocommerce-tabs,
.fog-hide-product-tabs .wc-tabs-wrapper {
	display: none;
}

/* Product page (custom-amount donations): centre and card-ify */
.woocommerce div.product p.price {
	color: var(--wp--preset--color--primary-dark);
	font-weight: 700;
}

.woocommerce div.product .woonp-price-suggest,
.woocommerce div.product input.woonp-input,
.woocommerce div.product .woonp input[type="number"],
.woocommerce div.product .woonp input[type="text"] {
	border: 1px solid #e3e0d9;
	border-radius: 0.75rem;
	padding: 0.65rem 0.9rem;
	font-size: 1.1rem;
	font-weight: 700;
	min-width: 8rem;
	font-family: var(--wp--preset--font-family--quicksand);
}

.woocommerce div.product table.variations select {
	border: 1px solid #e3e0d9;
	border-radius: 0.75rem;
	padding: 0.55rem 0.9rem;
	font-family: var(--wp--preset--font-family--quicksand);
}

/* Keep the footer against the bottom of the viewport on short pages (Contact,
   thank-you pages) instead of leaving it floating mid-screen. The template
   parts and <main> handle their own constrained layout, so making their
   wrapper a flex column is safe. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main {
	flex-grow: 1;
}

/* Contact (page id 52 on local and live): its single pale section is shorter
   than the viewport, so paint <main> pale too and the colour runs unbroken
   down to the footer. */
.page-id-52 main {
	background-color: var(--wp--preset--color--pale);
}

/* Extra breathing room between the "News and Stories" heading and the card
   grid on the homepage. The news archive keeps the template's own spacing. */
.home .fog-news-grid {
	padding-top: 20px;
}

/* Cart: one of each item, so the quantity column is noise. The hidden qty
   input Woo renders inside the cell still submits with the form. */
.woocommerce-cart table.cart th.product-quantity,
.woocommerce-cart table.cart td.product-quantity {
	display: none;
}

/* Gift Aid box at checkout */
.fog-gift-aid {
	background: var(--wp--preset--color--pale);
	border-radius: 1.25rem;
	padding: 1.75rem;
	margin-top: 1.5rem;
}

.fog-gift-aid .fog-gift-aid-logo {
	width: 140px;
	height: auto;
	margin-bottom: 0.75rem;
}

.fog-gift-aid .fog-gift-aid-explainer {
	font-weight: 600;
}

.fog-gift-aid .fog-gift-aid-declaration {
	font-size: 0.9rem;
}

.fog-gift-aid .fog-gift-aid-choice {
	display: block;
	font-weight: 700;
	margin: 0.35rem 0;
	cursor: pointer;
}

.fog-gift-aid .fog-gift-aid-choice input {
	margin-right: 0.5rem;
	accent-color: var(--wp--preset--color--primary);
}

.fog-gift-aid .fog-gift-aid-note {
	font-size: 0.85rem;
	margin-bottom: 0;
	opacity: 0.8;
}

/* Circular icon avatars used in CTA / contact blocks */
.fog-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}