/*
Theme Name: Readarific Child
Description: Child theme for Twenty Twenty-Four. Adds a custom WooCommerce shop page replicating the design of readarific.com/products.
Template: twentytwentyfour
Version: 1.21.8
Author: NextTech Consultants
Text Domain: readarific-child
*/

/* ── Full-viewport layout ────────────────────────────────────────────────────
   Twenty Twenty-Four injects horizontal padding onto body / .wp-site-blocks via
   theme.json global styles.  Remove it so the nav header and footer span the
   full viewport width.  Each content area owns its own width constraint:
     • .woocommerce      — max-width 1280px + padding-inline (single-product.php)
     • .rfc-container    — max-width 1280px + padding-inline (shop archive)
     • .rfc-footer-inner — max-width 1280px, centred (footer)
   ──────────────────────────────────────────────────────────────────────────── */
body,
.wp-site-blocks {
	padding-inline: 0 !important;
}

/* ── Nav header: logo/title left, nav items + cart right ─────────────────────
   TT4 renders the header template part as plain block divs — there is no
   <header> element or wp-block-template-part class in the DOM.  The
   .rfc-site-header wrapper div is added in header.php around
   block_template_part('header') to give us a reliable CSS hook.
   ──────────────────────────────────────────────────────────────────────────── */

/* Push the right nav group (nav + cart icon) to the right edge of the header.
   Targets the is-content-justification-left group that is a direct child of
   the space-between flex row — avoids fragile WP-generated hash class names. */
.rfc-site-header .is-content-justification-space-between > .wp-block-group.is-content-justification-left {
	margin-left: auto;
}

/* Within the right group, also push the nav itself right so cart hugs it */
.rfc-site-header .wp-block-navigation {
	margin-left: auto;
}

/* Hide the account/person icon (absent in production nav) */
.rfc-site-header .wp-block-woocommerce-customer-account {
	display: none !important;
}

/* Font weights: site title 600, nav item links 500 */
.rfc-site-header .wp-block-site-title,
.rfc-site-header .wp-block-site-title a {
	font-weight: 600;
}
.rfc-site-header .wp-block-navigation a,
.rfc-site-header .wp-block-navigation-item__label {
	font-weight: 500 !important;
}

/* Footer: full-width element; inner content constrained via .rfc-footer-inner */
footer.wp-block-template-part {
	padding-inline: 0;
}

/* ── Site footer ──────────────────────────────────────────────────────────── */
.rfc-site-footer {
	border-top: 1px solid #e0e0e0;
	background: #f5f5f5;
	padding: 3rem 1.5rem;
}
.rfc-footer-inner {
	max-width: 1280px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: .75rem;
}
.rfc-footer-copyright {
	margin: 0;
	font-size: .875rem;
	color: #333;
}
.rfc-footer-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem 1.5rem;
}
.rfc-footer-nav a {
	font-size: .875rem;
	color: #333;
	text-decoration: underline;
}
.rfc-footer-nav a:hover { color: #133642; }

/* ── WooCommerce breadcrumb ───────────────────────────────────────────────── */
.woocommerce-breadcrumb {
	font-size: .875rem;
	color: #666;
	padding-block: .75rem 1.5rem;
	display: block;
}
/* When breadcrumb is inside the .woocommerce container it inherits the
   container's padding — override any extra padding-inline here. */
.woocommerce .woocommerce-breadcrumb {
	padding-inline: 0;
}
.woocommerce-breadcrumb a { color: #666; text-decoration: underline; }
.woocommerce-breadcrumb a:hover { color: #133642; }

/* ── Add to Cart button: loading spinner + added state ───────────────────── */
/*
 * WooCommerce's wc-add-to-cart.js adds .loading while the AJAX request is
 * in flight and .added after a successful add.  We override its default
 * opacity-0.25 + icon-font spinner with a cleaner inline border animation,
 * and nudge the "View Cart" state to signal success clearly.
 * Applies to shop-page cards (.rfc-btn) and the single-product button.
 */

/* Shared loading state */
.rfc-btn.loading,
.woocommerce .button.loading,
.woocommerce form.cart .loading {
	opacity: .8 !important;
	pointer-events: none;
	padding-right: inherit !important; /* reset WC's extra right-padding */
}

/* Inline border spinner via ::after */
.rfc-btn.loading::after,
.woocommerce .button.loading::after,
.woocommerce form.cart .loading::after {
	content: '' !important;
	display: inline-block !important;
	width: .75em !important;
	height: .75em !important;
	margin-left: .45em !important;
	vertical-align: middle !important;
	border: 2px solid currentColor !important;
	border-right-color: transparent !important;
	border-radius: 50% !important;
	animation: rfc-btn-spin .65s linear infinite !important;
	/* Reset WC's absolute-position icon placement */
	position: static !important;
	font-family: inherit !important;
	top: auto !important; right: auto !important;
	font-weight: inherit !important;
	background: none !important;
}

@keyframes rfc-btn-spin {
	to { transform: rotate( 360deg ); }
}

/* Added state — "View Cart" */
.rfc-btn.added,
.woocommerce .button.added,
.woocommerce form.cart .added {
	background-color: #133642 !important;
	color: #fff !important;
	border-color: #133642 !important;
}

/* ── Single product: quantity + Add to cart side by side ─────────────────── */
.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
}