/**
 * Hickory's At Home — site styles.
 *
 * Moved out of the Customizer's Additional CSS so it is version controlled.
 * Loaded by mu-plugins/hickorys-styles.php at wp_enqueue_scripts priority 999,
 * so it is the last enqueued stylesheet. Fonts live in fonts.css.
 */

 /* Global */
::selection {
  background-color: rgba(171, 35, 40, 0.4);
  color: #fff;
}

/* Header */
#ast-desktop-header {
    background: -webkit-gradient(linear, left top, left bottom, from(#222), to(transparent));
    background: -o-linear-gradient(#222, transparent);
    background: linear-gradient(#222, transparent);
}

/* Navigation hover underline.
   Anchored to the middle of the link rather than its bottom edge, so the bar
   tracks the text and is unaffected by the link's vertical padding or the
   header height. Tune the two custom properties to taste. */
.main-header-menu > .menu-item:not(.nav-book-now) > .menu-link,
.footer-bar-navigation .ast-nav-menu > .menu-item:not(.nav-book-now) > .menu-link {
	position: relative;
	--hah-underline-width: 40%;
	--hah-underline-drop: 0.75em;
}

.main-header-menu > .menu-item:not(.nav-book-now) > .menu-link::after,
.footer-bar-navigation .ast-nav-menu > .menu-item:not(.nav-book-now) > .menu-link::after {
	content: "";
	position: absolute;
	left: 50%;
	top: calc(50% + var(--hah-underline-drop));
	width: var(--hah-underline-width);
	height: 3px;
	background-color: currentColor;
	transform: translateX(-50%) scaleX(0);
	transition: transform 0.2s ease;
}

.main-header-menu > .menu-item:not(.nav-book-now):hover > .menu-link::after,
.main-header-menu > .menu-item:not(.nav-book-now) > .menu-link:focus-visible::after,
.footer-bar-navigation .ast-nav-menu > .menu-item:not(.nav-book-now):hover > .menu-link::after,
.footer-bar-navigation .ast-nav-menu > .menu-item:not(.nav-book-now) > .menu-link:focus-visible::after {
	transform: translateX(-50%) scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.main-header-menu > .menu-item:not(.nav-book-now) > .menu-link::after,
	.footer-bar-navigation .ast-nav-menu > .menu-item:not(.nav-book-now) > .menu-link::after {
		transition: none;
	}
}

/* Footer menu: recentre the bar on the text.
   Astra gives footer links `padding: 0 0.5em`, then strips the outer side on
   the first and last items so the menu sits flush with the container:
       li:first-child a { padding-left: 0 }
       li:last-child  a { padding-right: 0 }
   That makes those two link boxes asymmetric, and since the bar is centred on
   the box rather than the text, it drifts by half the missing padding. Shift it
   back by that 0.25em. The :not() guards stop both rules firing on a menu with
   a single item, which is flush on both sides and already centred. Astra only
   applies the padding above 769px, so the correction is scoped to match. */
@media (min-width: 769px) {
	.footer-bar-navigation .astra-footer-horizontal-menu > .menu-item:first-child:not(:last-child) > .menu-link::after {
		left: calc(50% - 0.25em);
	}

	.footer-bar-navigation .astra-footer-horizontal-menu > .menu-item:last-child:not(:first-child) > .menu-link::after {
		left: calc(50% + 0.25em);
	}
}

/* Header Navigation Book now */
.ast-desktop:not(:has(.ast-header-sticked)) .ast-primary-header-bar .main-header-menu > .menu-item {
	line-height: 30px;
}

.nav-book-now {
	background-color: #ab2328;
	-webkit-clip-path: polygon(100% 0, 95% 50%, 100% 100%, 0% 100%, 5% 50%, 0% 0%);
    clip-path: polygon(100% 0, 95% 50%, 100% 100%, 0% 100%, 5% 50%, 0% 0%);
	padding: 3px 16px;
}

/* Mobile menu */
.ast-theme-transparent-header [data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal {
	background: #3A3A3A;
}

[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg { 
	fill: #fff;
}

/* Heading decoration.
   The flourishes hang off the <span>, not the <h2>: the heading is alignfull,
   so offsets measured from it would land at the viewport edges. The span hugs
   the text, so anchoring to it keeps the SVGs beside the pill whatever the
   heading says. */
.bbq-boxes span {
	position: relative;
	background-color: #ab2328;
	border-radius: 2px;
	padding: 10px 50px;
	color: #fff;
}

.bbq-boxes span::before,
.bbq-boxes span::after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 144px;
	height: 68px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.bbq-boxes span::before {
	background-image: url(assets/bbq-boxes-before.svg);
	right: 100%;
	margin-right: 3px;
}

.bbq-boxes span::after {
	background-image: url(assets/bbq-boxes-after.svg);
	left: 100%;
	margin-left: 3px;
}

/* There isn't room for the flourishes once the pill nears the container edge,
   so drop them below Astra's tablet breakpoint (921px, matching
   astra_get_tablet_breakpoint and the order-received query further down).
   display: none rather than opacity, so they take up no space at all. */
@media (max-width: 921px) {
	.bbq-boxes span::before,
	.bbq-boxes span::after {
		display: none;
	}
}

header.entry-header .entry-title,
#moderncart-slide-out .moderncart-slide-out-header-title span {
	font-weight: 400;
}

/* Buttons */
.wp-block-button .wp-block-button__link {
	background-color: #AB2328;
	color: #fff;
}

.nav-book-now:hover,
.wp-block-button .wp-block-button__link:hover,
button#place_order:hover {
	filter: brightness(1.1)
}

.wp-block-button.hero-button .wp-block-button__link {
	-webkit-clip-path: polygon(100% 0, 95% 50%, 100% 100%, 0% 100%, 5% 50%, 0% 0%);
  clip-path: polygon(100% 0, 95% 50%, 100% 100%, 0% 100%, 5% 50%, 0% 0%);
}

/* Product Card */
.wc-block-product,
li.ast-article-single.product {
	border: 1px solid #ab2328;
	background-color: #FEF6F6
}

.wc-block-product .wp-block-post-title,
.wc-block-product .wp-block-woocommerce-product-summary,
.wc-block-product .wp-block-woocommerce-product-price,
.wc-block-product .add_to_cart_button,
.wc-block-product .added_to_cart
{
	margin-left: 20px;
	margin-right: 20px;
}

li.ast-article-single.product .astra-shop-summary-wrap {
	margin: 10px 20px;
}

.wc-block-product .add_to_cart_button,
.wc-block-product span:has(> .added_to_cart) {
	margin-bottom: 20px;
}

/* Remove the button's margin when "View basket" is showing */
.wc-block-product .add_to_cart_button:has(~ span:not([hidden]) > .added_to_cart) {
	margin-bottom: 0;
}

/* Product single - upsells and related */
.woocommerce-js ul.products li.product .ast-woo-product-category {
    display: none;
}

/* Floating mini cart */
#moderncart-floating-cart .moderncart-floating-cart-count {
	background-color: #AB2328;
	border: 1px solid #000
}

/* Accordions.
   Astra styles every <button> on the page, including the accordion toggle:
   `button:focus, button:hover { color: #fff }`. That outranks core's
   `color: inherit` on .wp-block-accordion-heading__toggle, so once the toggle
   is clicked it keeps focus and the text turns white. Reset every state first,
   then set the hover colour. */
.wp-block-accordion-heading__toggle,
.wp-block-accordion-heading__toggle:hover,
.wp-block-accordion-heading__toggle:focus,
.wp-block-accordion-heading__toggle:active {
	color: inherit;
}

.wp-block-accordion-item {
	border-bottom: 1px solid #000;
}

.wp-block-accordion-item .wp-block-paragraph:last-child {
	padding-bottom: 20px;
}

/* Checkout */
#customer_details h3:not(.elementor-widget-woocommerce-checkout-page h3) {
	background-color: #000;
	color: #fff;
	padding-left: 20px;
}

.woocommerce-checkout .form-row .input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row .select2-container .select2-selection {
	border: 1px solid #000;
}

.woocommerce-additional-fields {
    margin-top: 20px;
}

.woocommerce-page.woocommerce-checkout .woocommerce-order h2.woocommerce-order-details__title,
.woocommerce-page.woocommerce-checkout .woocommerce-order h2.woocommerce-column__title {
	background: #000;
	color: #fff;
}

.woocommerce-customer-details,
.woocommerce-order-details {
	background-color: #fff;
}

#order_review_heading {
	color: #fff;
	background-color: #000;
}

#order_review {
	background-color: #fff;
	border-width: 1px !important;
}

/* Order placed */
.woocommerce-order-received .woocommerce-order {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 40px;
	align-items: start;
}

.woocommerce-js .woocommerce table.shop_table {
    margin: 0;
}

.woocommerce-page.woocommerce-checkout .woocommerce-order ul.order_details {
    background: white;
    padding: 10px;
    border: 1px solid black;
}

/* Everything else (thank you message, overview, payment note) stays full width */
.woocommerce-order-received .woocommerce-order > * {
	grid-column: 1 / -1;
}

.woocommerce-order-received .woocommerce-order > .woocommerce-order-details {
	grid-column: 1;
	margin-top: 0;
}

.woocommerce-order-received .woocommerce-order > .woocommerce-customer-details {
	grid-column: 2;
	margin-top: 0;
}

/* Stack them on smaller screens */
@media (max-width: 921px) {
	.woocommerce-order-received .woocommerce-order > .woocommerce-order-details,
	.woocommerce-order-received .woocommerce-order > .woocommerce-customer-details {
		grid-column: 1 / -1;
	}
}