/*
Theme Name: Caminia
Theme URI: https://caminia-usa.com
Author: Caminia LLC
Description: Custom block theme for Caminia — nano-encapsulated turmeric supplements. Navy / gold / teal, Quicksand + Helvetica.
Version: 1.1.8
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Text Domain: caminia
*/

/* ============================================================
   Chrome — the parts theme.json can't express.
   Tokens (colors, fonts, radii, shadows) live in theme.json and
   are available as --wp--preset--* custom properties.
   ============================================================ */

/* WP 7.1 does not emit border-radius presets into the global
   stylesheet (everything else emits fine), so define them here —
   without this every var(--wp--preset--border-radius--*) in the
   theme silently resolves to 0 (square corners). */
:root {
	--wp--preset--border-radius--sm: 0.625rem;
	--wp--preset--border-radius--md: 1rem;
	--wp--preset--border-radius--lg: 1.5rem;
}

/* ---- Header ---- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	min-height: 88px;
	background: rgba(255, 255, 255, 0.95);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--wp--preset--color--gray-100);
}
.site-header .wp-block-site-logo img {
	width: 80px;
	height: auto;
	max-width: 80px;
}

/* Nav pills */
.primary-nav .wp-block-navigation-item {
	border-radius: var(--wp--preset--border-radius--sm);
}
.primary-nav .wp-block-navigation-item__content {
	padding: 0.5rem 0.875rem;
	border-radius: var(--wp--preset--border-radius--sm);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--wp--preset--color--gray-700);
	transition: background-color 0.2s ease, color 0.2s ease;
}
.primary-nav .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--gray-50);
	color: var(--wp--preset--color--navy);
}
.primary-nav .current-menu-item > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--gray-50);
	color: var(--wp--preset--color--navy);
}

/* Mini-cart (replaces the old drawer) */
.wc-block-mini-cart__button {
	width: 40px;
	height: 40px;
	border-radius: 9999px;
	color: var(--wp--preset--color--navy);
	background: transparent;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.wc-block-mini-cart__button:hover {
	background: var(--wp--preset--color--gray-50);
	color: var(--wp--preset--color--gold-dark);
}
.wc-block-mini-cart__badge {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--navy);
	font-weight: 700;
}

/* ---- Buttons: base is gold via theme.json; variants get lift/hover ---- */
.wp-block-button__link {
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.wp-block-button__link:hover {
	background-color: var(--wp--preset--color--gold-dark);
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--md);
}
.wp-block-button.is-style-caminia-navy .wp-block-button__link {
	background: var(--wp--preset--color--navy);
	color: #fff;
}
.wp-block-button.is-style-caminia-navy .wp-block-button__link:hover {
	background: var(--wp--preset--color--navy-light);
}
.wp-block-button.is-style-caminia-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--navy);
	border: 2px solid var(--wp--preset--color--gray-200);
}
.wp-block-button.is-style-caminia-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--gray-50);
	border-color: var(--wp--preset--color--navy);
	box-shadow: none;
}
.wp-block-button.is-style-caminia-ghost .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--navy);
	box-shadow: none;
}
.wp-block-button.is-style-caminia-ghost .wp-block-button__link:hover {
	color: var(--wp--preset--color--gold-dark);
	transform: none;
	box-shadow: none;
	background: transparent;
}
/* White CTA button on dark panels */
.wp-block-button.is-style-caminia-white-ghost .wp-block-button__link {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.3);
	box-shadow: none;
}
.wp-block-button.is-style-caminia-white-ghost .wp-block-button__link:hover {
	border-color: #fff;
	color: #fff;
	transform: none;
	box-shadow: none;
	background: transparent;
}

/* ---- Utility classes used by patterns ---- */
.eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--teal);
	margin-bottom: 0.75rem;
}

.tag-chip {
	display: inline-block;
	border-radius: 9999px;
	background: var(--wp--preset--color--teal-light);
	color: var(--wp--preset--color--teal);
	padding: 0.4rem 0.9rem;
	font-size: 0.75rem;
	line-height: 1.5;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.caminia-card {
	border-radius: var(--wp--preset--border-radius--md);
	border: 1px solid var(--wp--preset--color--gray-100);
	background: #fff;
	padding: 1.5rem;
	box-shadow: var(--wp--preset--shadow--soft);
	height: 100%;
}
.caminia-card p {
	line-height: 1.65;
	color: var(--wp--preset--color--gray-700);
}

/* Dark-section card (on navy) */
.dark-card {
	border-radius: var(--wp--preset--border-radius--md);
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.05);
	padding: 1.75rem;
	height: 100%;
}
.dark-card h3 {
	color: var(--wp--preset--color--gold) !important;
}
.dark-card p {
	color: rgba(255, 255, 255, 0.7);
}

/* Icon badge — compact, sits above the title without dominating the card */
.icon-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--wp--preset--border-radius--sm);
	margin-bottom: 1rem;
}
.icon-badge svg {
	width: 20px;
	height: 20px;
}
.icon-badge-navy {
	background: rgba(10, 37, 64, 0.10);
	color: var(--wp--preset--color--navy);
}
.icon-badge-teal {
	background: rgba(13, 148, 136, 0.10);
	color: var(--wp--preset--color--teal);
}
.icon-badge-gold {
	background: rgba(255, 184, 0, 0.15);
	color: var(--wp--preset--color--gold-dark);
}

/* Trust list item */
.trust-item {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--gray-700);
}
.trust-item svg {
	width: 14px;
	height: 14px;
	color: var(--wp--preset--color--teal);
	flex: none;
}

/* ---- PageHeader band (navy + optional image/gradient) ---- */
.page-header-band,
.cta-panel {
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--navy);
	color: #fff;
}
.page-header-band--gradient::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.4;
	background:
		radial-gradient(circle at 75% 30%, rgba(13, 148, 136, 0.45), transparent 55%),
		radial-gradient(circle at 10% 90%, rgba(255, 184, 0, 0.18), transparent 45%);
}
.page-header-band--img::before,
.cta-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.25;
	background-image: var(--caminia-band-img);
	background-size: cover;
	background-position: center;
}
.cta-panel::before {
	opacity: 0.2;
	border-radius: inherit;
}
.page-header-band::after,
.cta-panel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(10, 37, 64, 0.7);
	border-radius: inherit;
}
.page-header-band > *,
.cta-panel > * {
	position: relative;
	z-index: 2;
}
.page-header-band h1,
.page-header-band .wp-block-post-title,
.page-header-band .wp-block-query-title,
.cta-panel h2 {
	color: #fff !important;
}
.page-header-band p,
.page-header-band a,
.page-header-band time {
	color: rgba(255, 255, 255, 0.75);
}
.page-header-band p a:hover,
.page-header-band a:hover {
	color: var(--wp--preset--color--gold);
}
.cta-panel {
	border-radius: var(--wp--preset--border-radius--lg);
	box-shadow: var(--wp--preset--shadow--md);
}
.cta-panel p {
	color: rgba(255, 255, 255, 0.75);
}

/* ---- Footer ---- */
.site-footer {
	background: var(--wp--preset--color--navy);
	color: #fff;
}
.site-footer .wp-block-site-logo img {
	width: 48px;
	height: auto;
}
.site-footer .wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.875rem;
}
.site-footer .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--gold);
}
.site-footer a {
	color: rgba(255, 255, 255, 0.7);
}
.site-footer a:hover {
	color: var(--wp--preset--color--gold);
}
.site-footer .wp-block-site-logo {
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}
.footer-col-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #fff;
}
.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	gap: 1rem 2.5rem;
}
.footer-bottom p {
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.8125rem;
	margin: 0;
}
.footer-disclaimer {
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.4);
	max-width: 28rem;
}

/* ---- Article prose ---- */
.prose-article {
	font-size: 1.02rem;
	line-height: 1.8;
	color: var(--wp--preset--color--gray-700);
}
.prose-article h2 {
	font-size: 1.5rem;
	margin-top: 3rem;
	margin-bottom: 1rem;
}
.prose-article h3 {
	font-size: 1.125rem;
	margin-top: 2rem;
	margin-bottom: 0.75rem;
}
.prose-article a {
	color: var(--wp--preset--color--teal);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.prose-article a:hover {
	color: var(--wp--preset--color--navy);
}
.prose-article blockquote {
	border-left: 4px solid var(--wp--preset--color--gold);
	background: rgba(255, 243, 214, 0.6);
	padding: 1.25rem 1.5rem;
	font-style: italic;
	margin: 1.5rem 0;
}
.prose-article ul {
	color: var(--wp--preset--color--gray-500);
	padding-left: 1.5rem;
	list-style: disc;
}
.prose-article ul li + li {
	margin-top: 0.375rem;
}
.prose-article table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
	font-size: 0.875rem;
}
.prose-article th,
.prose-article td {
	border: 1px solid var(--wp--preset--color--gray-100);
	padding: 0.625rem 0.875rem;
	text-align: left;
	vertical-align: top;
}
.prose-article thead th {
	background: var(--wp--preset--color--gray-50);
	color: var(--wp--preset--color--navy);
}
.prose-article hr {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--gray-100);
	margin: 2.5rem 0;
}
.prose-article .citation {
	margin-top: 0.75rem;
	border-radius: var(--wp--preset--border-radius--sm);
	border-left: 2px solid var(--wp--preset--color--teal);
	background: var(--wp--preset--color--gray-50);
	padding: 0.75rem 1rem;
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--wp--preset--color--gray-500);
}
.prose-article .citation strong {
	color: var(--wp--preset--color--navy);
}

/* Callout box (teal left border) */
.callout-box {
	border-radius: var(--wp--preset--border-radius--md);
	border-left: 4px solid var(--wp--preset--color--teal);
	background: var(--wp--preset--color--gray-50);
	padding: 1.75rem 2rem;
}
.callout-box h3 {
	margin-top: 0;
}
.callout-box > p:last-child {
	margin-bottom: 0;
}

/* ---- Dietary supplements: stacked product sections ---- */
.product-section {
	padding-top: 1rem;
}
.product-section .product-image {
	max-width: 560px;
	margin: 0 auto 2.5rem;
	padding: 2rem;
	background: var(--wp--preset--color--gray-50);
	border-radius: var(--wp--preset--border-radius--md);
}
.product-section .product-image img {
	display: block;
	width: auto;
	max-height: 400px;
	margin: 0 auto;
	border-radius: var(--wp--preset--border-radius--sm);
}
.product-section .tag-chip {
	margin-bottom: 1rem;
}
.product-section h2 {
	margin-top: 0.5rem;
}

/* ---- WooCommerce product cards ---- */
.wc-block-product {
	border: 1px solid var(--wp--preset--color-gray-100);
	border-radius: var(--wp--preset--border-radius--md);
	background: #fff;
	box-shadow: var(--wp--preset--shadow--soft);
	overflow: hidden;
	padding: 0 1rem 1rem;
	transition: transform 0.3s ease;
}
.wc-block-product .wc-block-components-product-image {
	margin: 0 -1rem 1rem;
}
.wc-block-product .wc-block-product-template {
	margin: 0;
	padding: 0;
	list-style: none;
}
.wc-block-product:hover {
	transform: translateY(-4px);
}
.wc-block-product .wc-block-product__image {
	background: var(--wp--preset--color--gray-50);
}
.wc-block-product .wc-block-product__image img {
	transition: transform 0.5s ease;
}
.wc-block-product:hover .wc-block-product__image img {
	transform: scale(1.05);
}
.wc-block-product .wc-block-product__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--navy);
}
.wc-block-product .wc-block-product__price {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--wp--preset--color--navy);
}
.wc-block-product .wp-block-button__link {
	flex: 1;
	font-size: 0.875rem;
	padding: 0.625rem 1rem;
}

/* ---- Single product ---- */
.product-main .wc-block-components-product-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--navy);
}
.product-main .wc-block-components-product-price {
	font-size: 1.875rem;
	font-weight: 700;
	color: var(--wp--preset--color--navy);
}

/* ---- Back-to-shop link ---- */
.back-to-shop a {
	color: var(--wp--preset--color--teal);
	font-weight: 700;
	font-size: 0.875rem;
	text-decoration: none;
}
.back-to-shop a:hover {
	color: var(--wp--preset--color--navy);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link,
	.wc-block-product,
	.wc-block-product .wc-block-product__image img {
		transition: none;
	}
	.wp-block-button__link:hover,
	.wc-block-product:hover {
		transform: none;
	}
}

/* ============================================================
   UX polish pass — interaction, commerce, accessibility
   ============================================================ */

html {
	scroll-behavior: smooth;
}

/* Readability: give stacked columns breathing room on mobile,
   and keep long-form copy comfortable. */
@media (max-width: 781px) {
	.wp-block-columns:not(.is-not-stacked) > .wp-block-column:not(:last-child) {
		margin-bottom: 2.5rem;
	}
}
.page-body p,
.article-index p,
.article-single p {
	max-width: 68ch;
}

::selection {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--gold);
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--teal);
	outline-offset: 2px;
	border-radius: 4px;
}

a {
	transition: color 0.2s ease;
}

/* Balanced headline wrapping */
.wp-block-heading {
	text-wrap: balance;
}

/* Hero image elevation */
.hero-image img {
	box-shadow: var(--wp--preset--shadow--md);
}

/* ---- Product cards (WC product-collection) ---- */
.wc-block-product .wc-block-product__title {
	min-height: 2.75em;
	line-height: 1.35;
}
.wc-block-product .wp-block-button {
	width: 100%;
}
.wc-block-product .wp-block-button__link {
	width: 100%;
}
.wc-block-product .wc-block-product__price {
	margin-bottom: 0.75rem;
}

/* ---- Single product: gallery + tabs ---- */
.wp-block-woocommerce-product-image img,
.wc-block-components-product-image img {
	border-radius: var(--wp--preset--border-radius--md);
}
.wc-block-components-product-details button {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--wp--preset--color--gray-500);
	border-bottom: 2px solid transparent;
	padding: 0.75rem 1rem;
	background: transparent;
}
.wc-block-components-product-details button[aria-selected="true"],
.wc-block-components-product-details button:hover {
	color: var(--wp--preset--color--navy);
	border-bottom-color: var(--wp--preset--color--gold);
}

/* ---- WPForms contact form (site palette) ---- */
.wpforms-form .wpforms-field input[type="text"],
.wpforms-form .wpforms-field input[type="email"],
.wpforms-form .wpforms-field input[type="number"],
.wpforms-form .wpforms-field textarea,
.wpforms-form .wpforms-field select {
	border: 1px solid var(--wp--preset--color--gray-200);
	border-radius: var(--wp--preset--border-radius--sm) !important;
	padding: 0.75rem 0.875rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wpforms-form .wpforms-field input:focus,
.wpforms-form .wpforms-field textarea:focus,
.wpforms-form .wpforms-field select:focus {
	border-color: var(--wp--preset--color--teal);
	box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
	outline: none;
}
.wpforms-form .wpforms-field-label {
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
}
.wpforms-form .wpforms-submit {
	background: var(--wp--preset--color--gold) !important;
	border: none !important;
	border-radius: var(--wp--preset--border-radius--sm) !important;
	color: var(--wp--preset--color--navy) !important;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	padding: 0.875rem 1.75rem;
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.wpforms-form .wpforms-submit:hover {
	background: var(--wp--preset--color--gold-dark) !important;
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--md);
}

/* ---- Cart / checkout form controls ---- */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox input,
.wc-block-components-country-input input,
.wc-block-components-form .wc-block-components-text-input input {
	border: 1px solid var(--wp--preset--color--gray-200) !important;
	border-radius: var(--wp--preset--border-radius--sm) !important;
	padding: 0.75rem 0.875rem !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-combobox input:focus {
	border-color: var(--wp--preset--color--teal) !important;
	box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}

/* Primary commerce buttons — gold, matching the brand CTA */
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button,
.wc-block-checkout__place-order-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-cart .wc-block-components-button,
.wc-block-mini-cart__checkout-button {
	background: var(--wp--preset--color--gold) !important;
	color: var(--wp--preset--color--navy) !important;
	border-radius: var(--wp--preset--border-radius--sm) !important;
	font-family: var(--wp--preset--font-family--heading) !important;
	font-weight: 700 !important;
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
.wc-block-checkout__place-order-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-mini-cart__checkout-button:hover {
	background: var(--wp--preset--color--gold-dark) !important;
	transform: translateY(-1px);
	box-shadow: var(--wp--preset--shadow--md);
}

/* Mini-cart drawer item titles */
.wc-block-mini-cart__items .wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	color: var(--wp--preset--color--navy);
}

/* ---- Trust strip separators ---- */
.wp-block-group:has(> .trust-item):not(:first-child) .trust-item {
	/* spacing already handled by blockGap */
}

/* ---- Footer photo credits ---- */
.footer-credits {
	font-size: 0.7rem;
	color: rgba(255, 255, 255, 0.35);
}
.footer-credits a {
	color: rgba(255, 255, 255, 0.35);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.footer-credits a:hover {
	color: var(--wp--preset--color--gold);
}