/*!
Theme Name:   Kadence Child
Theme URI:    https://setandsit.co.nz
Description:  Set & Sit child theme for Kadence. All custom CSS and PHP belongs here so future Kadence updates don't overwrite anything.
Author:       Set & Sit
Author URI:   https://setandsit.co.nz
Template:     kadence
Version:      1.0.0
License:      GNU General Public License v3.0 (or later)
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  kadence-child
*/

/* ─────────────────────────────────────────────
   Custom CSS for setandsit.co.nz lives below.
   Anything written here loads AFTER Kadence's
   own styles, so it overrides cleanly.
   ───────────────────────────────────────────── */

/* ═════════════════════════════════════════════
   HOW IT WORKS PAGE
   Scoped under .hiw-page wrapper so styles are
   isolated to this page. Sectioned by colour
   bands; numbered badges replace inline numbering.
   ═════════════════════════════════════════════ */

/* WordPress block layout injects margin-block-start/end on flow-layout
   children equal to the theme block-gap (Kadence sets it to 32px). Below
   we zero these on the specific hooks that fight our layout. */
.hiw-page .hiw-step,
.hiw-page .hiw-steps-band,
.hiw-page .hiw-twocol-band,
.hiw-page .hiw-faq-band,
.hiw-page .hiw-cta-band,
.hiw-page .hiw-hero {
	margin-block-start: 0;
	margin-block-end: 0;
}

.hiw-page {
	margin: 0;
	color: #5e3e41;            /* brand body text (burgundy) */
	/* Brand palette pulled from the site's Kadence Customizer settings:
	     #d5ccbd  brand tan (palette 6-9, body bg)
	     #5e3e41  brand burgundy (palette 3-4, body + accents)
	     #274b50  brand dark teal (palette 1/5, headings)
	   Variations below soften the band-to-band rhythm. */
	--hiw-cream:  #ebe1d0;     /* soft warm tan, lighter than the body bg */
	--hiw-tan:    #d5ccbd;     /* brand tan — matches site background */
	--hiw-dark:   #274b50;     /* brand dark teal */
	--hiw-accent: #5e3e41;     /* brand burgundy */
}

/* Hide Kadence's small page-title header above the hero — we already say
   "How it works" big and centered inside the hero band. */
body.page-id-535 .entry-header.page-title {
	display: none;
}

/* Strip default content padding so our bands are full-bleed */
.page-template-default .entry-content:has(.hiw-page) {
	padding: 0;
	max-width: none;
}

/* ── Hero ──────────────────────────────────── */
.hiw-page .hiw-hero {
	text-align: center;
	padding: clamp(60px, 10vw, 120px) 24px clamp(40px, 6vw, 80px);
	background: var(--hiw-cream);
}
.hiw-page .hiw-hero h1 {
	font-size: clamp(2.2rem, 6vw, 4rem);
	margin: 0 0 0.4em;
	line-height: 1.05;
	letter-spacing: -0.01em;
}
.hiw-page .hiw-hero .hiw-tagline {
	font-size: clamp(1rem, 1.5vw, 1.2rem);
	font-style: italic;
	margin: 0 auto;
	max-width: 640px;
	opacity: 0.75;
}

/* ── Steps band ───────────────────────────── */
.hiw-page .hiw-steps-band {
	padding: clamp(60px, 8vw, 100px) 24px;
	background: #ffffff;
}
/* WordPress wraps wp:group children in a .wp-block-group__inner-container,
   so we target either layer to make the 5 .hiw-step blocks the grid items. */
.hiw-page .hiw-steps,
.hiw-page .hiw-steps > .wp-block-group__inner-container {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(2rem, 4vw, 3rem) clamp(2rem, 3vw, 2.5rem);
}
/* If the wrapper IS there, the outer .hiw-steps just becomes a passthrough. */
.hiw-page .hiw-steps:has(> .wp-block-group__inner-container) {
	display: block;
}
.hiw-page .hiw-step .hiw-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px; height: 52px;
	border-radius: 50%;
	background: var(--hiw-accent);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 1.1rem;
	letter-spacing: 0.02em;
}
.hiw-page .hiw-step h3 {
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	margin: 0 0 0.4em;
	line-height: 1.2;
}
.hiw-page .hiw-step p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
	opacity: 0.85;
}

/* ── Two-column band: Included / Extra ───── */
.hiw-page .hiw-twocol-band {
	padding: clamp(60px, 8vw, 100px) 24px;
	background: var(--hiw-tan);
}
.hiw-page .hiw-twocol {
	max-width: 1100px;
	margin: 0 auto;
	gap: clamp(2rem, 5vw, 4rem);
}
/* wp:columns already lays out as flex; just give it the gap + width constraint. */
.hiw-page .hiw-twocol h2 {
	font-size: clamp(1.4rem, 2.5vw, 1.8rem);
	margin: 0 0 1rem;
}
.hiw-page .hiw-twocol ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.hiw-page .hiw-twocol li {
	padding: 0.6rem 0;
	border-bottom: 1px solid rgba(0,0,0,0.08);
	font-size: 0.95rem;
}
.hiw-page .hiw-twocol li:last-child { border-bottom: none; }

/* ── FAQ band ─────────────────────────────── */
.hiw-page .hiw-faq-band {
	padding: clamp(60px, 8vw, 100px) 24px;
	background: #ffffff;
}
.hiw-page .hiw-faq {
	max-width: 760px;
	margin: 0 auto;
}
.hiw-page .hiw-faq > h2 {
	text-align: center;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	margin: 0 0 2.5rem;
}
.hiw-page .hiw-faq h4 {
	font-size: 1.15rem;
	margin: 1.8rem 0 0.4em;
}
.hiw-page .hiw-faq h4:first-of-type { margin-top: 0; }
.hiw-page .hiw-faq p {
	margin: 0;
	opacity: 0.85;
	line-height: 1.6;
}

/* ── Closing CTA ──────────────────────────── */
.hiw-page .hiw-cta-band {
	padding: clamp(80px, 10vw, 120px) 24px;
	background: var(--hiw-dark);
	color: #fff;
	text-align: center;
}
.hiw-page .hiw-cta-band h2 {
	color: #fff;
	font-size: clamp(2rem, 5vw, 3rem);
	margin: 0 0 0.3em;
	letter-spacing: -0.01em;
}
.hiw-page .hiw-cta-band p {
	margin: 0 auto 2rem;
	max-width: 560px;
	opacity: 0.8;
}
.hiw-page .hiw-cta-band .wp-block-buttons {
	justify-content: center;
}
.hiw-page .hiw-cta-band .wp-block-button__link {
	background: var(--hiw-accent);   /* burgundy on dark teal — brand pairing */
	color: #fff;
	padding: 14px 30px;
	border: 1px solid var(--hiw-accent); /* match outline button so heights line up */
	border-radius: 0;                /* square corners to match home page CTA */
	font-size: 0.95rem;
	letter-spacing: 0.03em;
}
.hiw-page .hiw-cta-band .wp-block-button__link:hover {
	background: #4a3034;             /* slightly darker burgundy */
}
/* Secondary button: filled cream with dark teal text. Burgundy primary +
   cream secondary reads cleanly as "main action / alternate action" on
   the dark teal band; the previous translucent white outline was too faint. */
.hiw-page .hiw-cta-band .is-style-outline .wp-block-button__link {
	background: var(--hiw-cream);
	border: 1px solid var(--hiw-cream);
	color: var(--hiw-dark);
}
.hiw-page .hiw-cta-band .is-style-outline .wp-block-button__link:hover {
	background: #fff;
	border-color: #fff;
	color: var(--hiw-dark);
}

/* ═════════════════════════════════════════════
   SHOP + PRODUCT DETAIL + BOOKING PAGES
   Brand-align the WLR rentals plugin views to match the rest of the
   site. Hide the duplicate Kadence page-title, square button corners,
   force category badges to brand burgundy, tighten the Add to Order
   button, brand-tint the availability calendar.
   ═════════════════════════════════════════════ */

/* 1. Hide the small Kadence page-title above the WLR / Woo views and
      info pages (Contact / FAQs / Delivery) so the content's own
      heading carries the page. */
body.page-id-532 .entry-header.page-title,    /* Shop */
body.page-id-1616 .entry-header.page-title,   /* Make a booking */
body.page-id-6 .entry-header.page-title,      /* Cart */
body.page-id-7 .entry-header.page-title,      /* Checkout */
body:has(.hiw-page) .entry-header.page-title { /* any info page */
	display: none;
}

/* 1b. Constrain the booking-form panel-nav so the back/next buttons
       sit reasonably close together instead of being shoved against
       the page edges by the full-width container. */
.wlr-booking .wlr-panel-nav {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* 2. Square-corner all WLR plugin buttons to match the home page CTAs. */
.wlr-btn,
.wlr-btn-primary,
.wlr-btn-ghost,
.wlr-btn-book,
.wlr-detail-book-btn,
.wlr-resource-card .wlr-btn {
	border-radius: 0 !important;
}

/* 3. Calendar: when the user has picked a date, drop the persistent
      "today" highlight on the today cell so only the selected day reads
      as active. Uses :has() to scope the rule. */
.wlr-detail-availability-inline:has(.wlr-cal-selected) .wlr-cal-today:not(.wlr-cal-selected) {
	background: transparent !important;
	color: inherit !important;
}

/* 4. Plugin clamps all top-level WLR views to a 1100px centred column,
      which leaves big empty side gutters at desktop widths. Stretch the
      shop catalogue, the booking flow, and the product detail to the
      full content area so they line up with the SET & SIT logo. */
.wlr-catalogue,
.wlr-booking,
.wlr-my-bookings,
.wlr-item-detail {
	max-width: none !important;
	margin: 0 !important;
}

/* 4a. Override the plugin's lopsided 420px + 1fr split to a balanced
       50/50 layout. The plugin's rule lives behind an !important so
       we need a matching specificity here. */
#wlr-item-detail-app.wlr-item-detail .wlr-detail-layout-split {
	grid-template-columns: 1fr 1fr !important;
}

/* 4b. Tighten the "Add to Order" button. Plugin sets width:100% on the
       button which made it stretch the full right column. */
.wlr-detail-book-btn {
	width: auto !important;
	display: inline-flex;
	min-width: 240px;
	max-width: 360px;
	padding: 14px 32px;
}

/* ═════════════════════════════════════════════
   CHECKOUT / CART POLISH
   Brown brand outline on form inputs, cleaner order-review spacing,
   clearer totals hierarchy.
   ═════════════════════════════════════════════ */

/* Form inputs: dark burgundy border, square corners, white background.
   Targets WooCommerce checkout/account inputs and the country select. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select,
.woocommerce form .form-row .select2-container--default .select2-selection--single {
	border: 1px solid #5e3e41 !important;
	border-radius: 0 !important;
	background: transparent !important;     /* let the page beige show through */
	color: #5e3e41;
	padding: 10px 12px;
	min-height: 44px;
	box-sizing: border-box;
}
.woocommerce form .form-row textarea {
	min-height: 96px;
}

/* Focus state — slightly darker + subtle ring */
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-page form .form-row input.input-text:focus,
.woocommerce-page form .form-row textarea:focus,
.woocommerce-page form .form-row select:focus {
	outline: none !important;
	border-color: #4a3034 !important;
	box-shadow: 0 0 0 2px rgba(94, 62, 65, 0.18);
}

/* select2 (country dropdown) needs a deeper override */
.woocommerce form .form-row .select2-selection {
	min-height: 44px !important;
	display: flex;
	align-items: center;
}
.woocommerce form .form-row .select2-selection__rendered {
	line-height: 1.4 !important;
	color: #5e3e41 !important;
	padding-left: 0 !important;
}

/* Form labels — a touch more breathing room */
.woocommerce form .form-row label {
	margin-bottom: 6px;
	display: inline-block;
}

/* Order review table — tighter rows, larger product titles, clearer
   stack of date / items beneath. */
.woocommerce-checkout-review-order-table {
	border-collapse: separate;
	border-spacing: 0;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	padding: 14px 12px !important;
	vertical-align: top;
}
.woocommerce-checkout-review-order-table .cart_item td {
	border-bottom: 1px solid rgba(94, 62, 65, 0.12);
}
.woocommerce-checkout-review-order-table .product-name {
	line-height: 1.4;
}
.woocommerce-checkout-review-order-table .product-name strong {
	display: block;
	font-size: 1.05em;
	margin-bottom: 4px;
}
/* The custom item meta we add (Event date, Items, Add ons, Checkout fees)
   gets its own dl — make it readable. */
.woocommerce-checkout-review-order-table dl.variation,
.wc-block-components-product-details {
	margin: 6px 0 0 !important;
	font-size: 0.92em;
	line-height: 1.5;
}
.woocommerce-checkout-review-order-table dl.variation dt {
	font-weight: 600;
	color: #5e3e41;
	margin-right: 4px;
	display: inline;
}
.woocommerce-checkout-review-order-table dl.variation dd {
	margin: 0 0 2px;
	display: inline;
}
.woocommerce-checkout-review-order-table dl.variation dd::after {
	content: "";
	display: block;
}

/* Totals: make the grand total stand out, mute the subtotal */
.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td {
	padding: 12px !important;
}
.woocommerce-checkout-review-order-table tfoot .cart-subtotal th,
.woocommerce-checkout-review-order-table tfoot .cart-subtotal td {
	color: #806060;
	font-weight: 500;
}
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
	font-size: 1.1em;
	border-top: 2px solid #5e3e41;
	color: #2a221c;
}

/* Same treatment on the cart page summary table */
.woocommerce-cart-form .shop_table th,
.woocommerce-cart-form .shop_table td {
	padding: 14px 12px !important;
	vertical-align: top;
}
.woocommerce-cart-form .product-thumbnail img {
	width: 64px;
	height: auto;
	border-radius: 0;
}

/* ═════════════════════════════════════════════
   HOME PAGE — appended sections
   How-it-works mini, Trust strip, Featured products, Quiz CTA,
   Newsletter. All wrapped in .hiw-page so they inherit the band/
   typography from the How-it-Works page system, then layered with
   home-specific overrides below.
   ═════════════════════════════════════════════ */

.hiw-page.home-additions .home-section-header {
	text-align: center;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.hiw-page.home-additions .home-section-header h2 {
	font-size: clamp(1.8rem, 3.5vw, 2.6rem);
	margin: 0 0 0.4em;
}
.hiw-page.home-additions .home-section-header p {
	font-style: italic;
	opacity: 0.75;
	margin: 0;
}
.hiw-page.home-additions .home-section-link {
	text-align: center;
	margin-top: clamp(2rem, 4vw, 3rem);
	font-size: 0.95rem;
}
.hiw-page.home-additions .home-section-link a {
	color: var(--hiw-accent);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}
.hiw-page.home-additions .home-section-link a:hover {
	color: #4a3034;
}

/* Trust strip — 3 equal columns */
.hiw-page.home-additions .trust-strip-band {
	padding: clamp(50px, 7vw, 80px) 24px;
}
.hiw-page.home-additions .trust-strip {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	text-align: center;
}
@media (max-width: 768px) {
	.hiw-page.home-additions .trust-strip { grid-template-columns: 1fr; gap: 2rem; }
}
.hiw-page.home-additions .trust-strip-item h3 {
	font-size: 1.15rem;
	margin: 0 0 0.6em;
	letter-spacing: 0.02em;
}
.hiw-page.home-additions .trust-strip-item p {
	margin: 0;
	opacity: 0.85;
	font-size: 0.95rem;
	line-height: 1.55;
}

/* Featured products — 4-column grid */
.hiw-page.home-additions .featured-products-band {
	padding: clamp(60px, 8vw, 100px) 24px;
	background: #ffffff;
}
.hiw-page.home-additions .featured-products-grid {
	max-width: 1300px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1.2rem, 2vw, 2rem);
}
@media (max-width: 980px) {
	.hiw-page.home-additions .featured-products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
	.hiw-page.home-additions .featured-products-grid { grid-template-columns: 1fr; }
}
.hiw-page.home-additions .featured-product {
	display: block;
	text-decoration: none;
	color: inherit;
	transition: transform 200ms ease;
}
.hiw-page.home-additions .featured-product:hover {
	transform: translateY(-3px);
}
.hiw-page.home-additions .featured-product-img {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--hiw-tan);
	margin-bottom: 1rem;
}
.hiw-page.home-additions .featured-product-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 400ms ease;
}
.hiw-page.home-additions .featured-product:hover .featured-product-img img {
	transform: scale(1.04);
}
.hiw-page.home-additions .featured-product h3 {
	font-size: 1.1rem;
	margin: 0 0 0.3em;
	line-height: 1.3;
}
.hiw-page.home-additions .featured-product p {
	margin: 0;
	font-weight: 600;
	color: var(--hiw-accent);
}
.hiw-page.home-additions .featured-product p span {
	font-weight: 400;
	opacity: 0.7;
	font-size: 0.85em;
	margin-left: 4px;
}

/* Quiz CTA band — dark teal */
.hiw-page.home-additions .quiz-cta-band {
	text-align: center;
}
.hiw-page.home-additions .quiz-cta-band h2 {
	font-size: clamp(2rem, 4vw, 2.8rem);
	margin: 0 0 0.4em;
}
.hiw-page.home-additions .quiz-cta-band p {
	max-width: 560px;
	margin: 0 auto 2rem;
}
.hiw-page.home-additions .quiz-cta-button {
	display: inline-block;
	background: var(--hiw-accent);
	color: #fff;
	padding: 14px 32px;
	text-decoration: none;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 600;
	border: 1px solid var(--hiw-accent);
}
.hiw-page.home-additions .quiz-cta-button:hover {
	background: #4a3034;
	border-color: #4a3034;
	color: #fff;
}

/* Newsletter band — cream */
.hiw-page.home-additions .newsletter-band {
	padding: clamp(60px, 8vw, 90px) 24px;
	background: var(--hiw-cream);
	text-align: center;
}
.hiw-page.home-additions .newsletter-inner {
	max-width: 560px;
	margin: 0 auto;
}
.hiw-page.home-additions .newsletter-band h2 {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	margin: 0 0 0.5em;
}
.hiw-page.home-additions .newsletter-band > .newsletter-inner > p {
	margin: 0 0 1.5rem;
	opacity: 0.85;
}
.hiw-page.home-additions .newsletter-form {
	display: flex;
	max-width: 480px;
	margin: 0 auto;
}
.hiw-page.home-additions .newsletter-form input[type="email"] {
	flex: 1;
	border: 1px solid var(--hiw-accent);
	border-right: none;
	background: transparent;
	color: var(--hiw-accent);
	padding: 12px 14px;
	font-size: 0.95rem;
	border-radius: 0;
	min-height: 46px;
	box-sizing: border-box;
}
.hiw-page.home-additions .newsletter-form input[type="email"]::placeholder {
	color: rgba(94, 62, 65, 0.55);
}
.hiw-page.home-additions .newsletter-form input[type="email"]:focus {
	outline: none;
	border-color: #4a3034;
}
.hiw-page.home-additions .newsletter-form button {
	background: var(--hiw-accent);
	color: #fff;
	border: 1px solid var(--hiw-accent);
	padding: 0 24px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	border-radius: 0;
	min-height: 46px;
}
.hiw-page.home-additions .newsletter-form button:hover {
	background: #4a3034;
	border-color: #4a3034;
}
.hiw-page.home-additions .newsletter-hint {
	margin: 1rem 0 0;
	font-size: 0.8rem;
	opacity: 0.65;
}


/* Home gallery — shrink the placeholder lookbook images so they don't
   dominate the page. The originals are rendered very large via
   Kadence's row layout; cap each image to a reasonable height and let
   the aspect ratio crop nicely. */
body.home .wp-block-kadence-rowlayout figure img,
body.home .wp-block-kadence-image img {
	max-height: 380px;
	width: 100%;
	object-fit: cover;
}
@media (max-width: 768px) {
	body.home .wp-block-kadence-rowlayout figure img,
	body.home .wp-block-kadence-image img {
		max-height: 280px;
	}
}


/* Hide the default WooCommerce "Have a coupon?" link/form at the top
   of checkout — replaced by an inline Discount code row in the order
   summary just above Total. */
.woocommerce-form-coupon-toggle,
form.checkout_coupon {
	display: none !important;
}

/* Inline Discount code row (rendered by class-woocommerce.php
   render_discount_field, hooked to woocommerce_review_order_before_order_total). */
.setandsit-discount-row th {
	font-weight: 600;
	color: #5e3e41;
	vertical-align: top;
}
.setandsit-discount-wrap {
	display: flex;
	align-items: stretch;
}
.setandsit-discount-wrap input[type="text"] {
	flex: 1;
	border: 1px solid #5e3e41 !important;
	border-right: none !important;
	background: transparent !important;
	color: #5e3e41;
	padding: 8px 10px;
	font-size: 14px;
	border-radius: 0 !important;
	min-height: 40px;
	box-sizing: border-box;
}
.setandsit-discount-wrap input[type="text"]:focus {
	outline: none;
	border-color: #4a3034 !important;
}
.setandsit-discount-wrap button {
	background: #5e3e41;
	color: #fff;
	border: 1px solid #5e3e41;
	padding: 0 18px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	border-radius: 0;
	white-space: nowrap;
	min-height: 40px;
}
.setandsit-discount-wrap button:hover {
	background: #4a3034;
	border-color: #4a3034;
}
.setandsit-discount-wrap button:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}
.setandsit-discount-msg {
	margin-top: 6px;
	font-size: 0.85em;
	min-height: 1.2em;
}
.setandsit-discount-msg.success { color: #2d5040; }
.setandsit-discount-msg.error   { color: #b03030; }