/*
Theme Name: Wild Omen
Description: Child block theme of Twenty Twenty-Five for Wild Omen. Colours and type were measured from the old Divi site. No page builder, no JavaScript layout: header, menu and checkout are plain WordPress and WooCommerce blocks.
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: wildomen
*/

/* Header: the logo and menu are laid out with CSS only, so nothing moves after load. */
.wo-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #fff;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.admin-bar .wo-header { top: var(--wp-admin--admin-bar--height, 32px); }
.wo-header .wp-block-navigation { text-transform: uppercase; font-weight: 600; letter-spacing: 0.02em; }
.wo-header .wp-block-navigation a { color: rgba(0, 0, 0, 0.6); }
.wo-header .wp-block-navigation a:hover,
.wo-header .wp-block-navigation a[aria-current="page"] { color: rgba(0, 0, 0, 0.9); }

/* Footer */
.wo-footer a { color: #fff; }

/* Keep product and checkout pages readable at the old site's width. */
.woocommerce-page main .wp-block-post-title { margin-bottom: 24px; }

/* Hero on the home page */
.wo-hero .wp-block-cover__inner-container { max-width: 1080px; }
.wo-hero h1 { letter-spacing: 2px; text-transform: uppercase; color: #fff; }

/* A little breathing room under the sticky header. */
main.wp-block-group { padding-top: 24px; }

/* Home: no gap under the header so the carousel sits flush, as on the old site. */
.home main.wp-block-group { padding-top: 0; }
.home main > .wp-block-group, .home .wp-block-post-content { margin-block-start: 0; }

/* Full-width carousel. Height is fixed by CSS, so nothing shifts while images load. */
.wo-carousel { position: relative; width: 100%; height: clamp(320px, calc(100svh - 80px), 1150px); background: #a8681f; overflow: hidden; }
.wo-carousel__track { position: relative; height: 100%; }
/* Crossfade: slides are stacked; only the active one is visible. visibility keeps hidden slides' links out of the tab order. */
.wo-carousel__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.9s ease, visibility 0s linear 0.9s; }
.wo-carousel__slide.is-active { opacity: 1; visibility: visible; z-index: 1; transition: opacity 0.9s ease, visibility 0s; }
.wo-carousel__slide a { display: block; height: 100%; }
.wo-carousel__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wo-carousel__tint { position: absolute; inset: 0; background: rgba(168, 104, 31, 0.2); pointer-events: none; }
.wo-carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 48px; height: 64px; border: 0; background: transparent; color: #fff; font-size: 56px; line-height: 1; cursor: pointer; opacity: 0.7; text-shadow: 0 0 6px rgba(0, 0, 0, 0.4); }
.wo-carousel__arrow:hover, .wo-carousel__arrow:focus-visible { opacity: 1; }
.wo-carousel__prev { left: 8px; }
.wo-carousel__next { right: 8px; }
.wo-carousel__dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; display: flex; justify-content: center; gap: 8px; }
.wo-carousel__dot { width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.45); cursor: pointer; }
.wo-carousel__dot[aria-current="true"] { background: #fff; }
@media (max-width: 600px) { .wo-carousel__arrow { display: none; } .wo-carousel { height: clamp(260px, 60svh, 420px); } }
@media (prefers-reduced-motion: reduce) { .wo-carousel__slide, .wo-carousel__slide.is-active { transition: none; } }

/* Newsletter band on the home page */
.wo-newsletter h2 { color: #fff; font-weight: 500; }

/* No white gap between the page content and the footer. */
footer.wp-block-template-part, .wp-site-blocks > footer { margin-block-start: 0; }
.wp-site-blocks > * + footer, .wp-site-blocks > .wo-footer { margin-top: 0; }

/* Buttons: outlined brown, as on the old site (measured: 2px border, 3px radius, 20px/500 text, 6px 20px padding).
   !important is needed because WooCommerce's block buttons set their own colours inline. */
:is(.wp-element-button, .wp-block-button__link, .wc-block-components-button:not(.is-link), .wc-block-components-checkout-place-order-button) {
	background-color: transparent !important;
	color: #a8681f !important;
	border: 2px solid #a8681f !important;
	border-radius: 3px !important;
	font-size: 20px;
	font-weight: 500;
	line-height: 34px;
	padding: 6px 20px;
	text-decoration: none;
	transition: all 0.3s;
}
:is(.wp-element-button, .wp-block-button__link, .wc-block-components-button:not(.is-link), .wc-block-components-checkout-place-order-button):is(:hover, :focus-visible) {
	background-color: rgba(0, 0, 0, 0.05) !important;
	border-color: transparent !important;
	color: #a8681f !important;
}
/* The old site turns the add-to-cart text blue on hover. */
button.single_add_to_cart_button.single_add_to_cart_button:is(:hover, :focus-visible),
.wp-block-woocommerce-add-to-cart-form .wp-element-button.wp-element-button:is(:hover, :focus-visible) { color: #2ea3f2 !important; }
:is(.wp-element-button, .wp-block-button__link, .wc-block-components-button)[disabled], .wc-block-components-button--loading { opacity: 0.5; }

/* Winter Food: section headings in normal weight (page id 10969, same on live and staging). */
.page-id-10969 .wp-block-post-content :is(h1, h2, h3, h4, h5, h6) { font-weight: 400; }

/* Space above the footer: 2rem on every page. The home page keeps the black newsletter band flush against it, as on the old site. */
.wo-footer { margin-top: 2rem; }
.home .wo-footer { margin-top: 0; }

/* Images pasted into page content (for example the Winter Food page, converted from Divi) carry a fixed width/height.
   Let them shrink to the screen and keep their proportions, so nothing overflows on phones. */
.wp-block-post-content img { max-width: 100%; height: auto; }
.wp-block-post-content p:has(> img), .wp-block-post-content figure { max-width: 100%; }