/* =============================================================================
   Canna Genetics — app.css
   Visual polish, glassmorphism, animation, WooCommerce & pattern styling.
   Design tokens come from theme.json (CSS custom properties --wp--preset--*).
   ============================================================================= */

:root {
	--cg-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--cg-glass-bg: rgba(24, 36, 28, 0.55);
	--cg-glass-border: 1px solid rgba(255, 255, 255, 0.08);
	--cg-glass-blur: 16px;
	--cg-maxw: 1240px;
}

* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* Stop iOS Safari from auto-inflating text in narrow columns (which made
   footer links huge and break mid-word on iPad/iPhone only). */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }

a { transition: color 0.2s var(--cg-ease); }
.wp-block-button__link,
button,
a { cursor: pointer; }

/* Selection + focus polish ------------------------------------------------- */
::selection { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); }
:where(a, button, input, summary, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-soft);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Buttons: shimmer + lift -------------------------------------------------- */
/* The green→gold gradient must be set here: a gradient can't be applied via
   theme.json color.background (that outputs background-color, which ignores
   gradients), so filled buttons would otherwise render with no background. */
.wp-block-button__link {
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	background: var(--wp--preset--gradient--green-gold);
	color: var(--wp--preset--color--base);
	box-shadow: 0 12px 30px -14px rgba(46, 157, 99, 0.6);
	transition: transform 0.25s var(--cg-ease), box-shadow 0.25s var(--cg-ease), background 0.25s var(--cg-ease), color 0.25s var(--cg-ease);
}
/* Header CTA stays compact and never wraps. */
.cg-header .wp-block-button__link { padding-top: 0.7rem; padding-bottom: 0.7rem; }
.wp-block-button__link:hover {
	transform: translateY(-2px);
	background: var(--wp--preset--gradient--gold-sheen);
	color: var(--wp--preset--color--base);
	box-shadow: 0 18px 40px -14px rgba(201, 162, 39, 0.55);
}
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--wp--preset--color--contrast) !important;
	border: 1px solid rgba(255, 255, 255, 0.25);
	box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-soft) !important;
}

/* Glass surface utility (apply via block "cg-glass" class) ------------------ */
.cg-glass {
	background: var(--cg-glass-bg);
	-webkit-backdrop-filter: blur(var(--cg-glass-blur));
	backdrop-filter: blur(var(--cg-glass-blur));
	border: var(--cg-glass-border);
	border-radius: var(--wp--custom--radius--lg, 24px);
}

/* Gold gradient text (apply class "cg-text-gold") -------------------------- */
.cg-text-gold {
	background: var(--wp--preset--gradient--gold-sheen);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.cg-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	text-transform: uppercase;
	letter-spacing: 0.28em;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent-soft);
}

/* =============================================================================
   Header
   ============================================================================= */
.cg-header {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: background 0.3s var(--cg-ease), backdrop-filter 0.3s var(--cg-ease), border-color 0.3s var(--cg-ease);
	border-bottom: 1px solid transparent;
}
.cg-header.is-stuck {
	background: rgba(11, 16, 13, 0.82);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom-color: var(--wp--preset--color--border);
}
.cg-header .wp-block-navigation a { font-size: 0.92rem; letter-spacing: 0.02em; }
.cg-header .wp-block-navigation a:hover { color: var(--wp--preset--color--accent-soft); }

/* =============================================================================
   Hero
   ============================================================================= */
.cg-hero { position: relative; isolation: isolate; }
.cg-hero__orb {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}
.cg-hero__orb::before,
.cg-hero__orb::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: 0.55;
	animation: cg-float 16s ease-in-out infinite;
}
.cg-hero__orb::before {
	width: 42vw; height: 42vw; left: -8vw; top: -10vw;
	background: radial-gradient(circle, rgba(46,157,99,0.6), transparent 65%);
}
.cg-hero__orb::after {
	width: 36vw; height: 36vw; right: -6vw; bottom: -8vw;
	background: radial-gradient(circle, rgba(201,162,39,0.45), transparent 65%);
	animation-delay: -6s;
}
@keyframes cg-float {
	0%, 100% { transform: translate3d(0,0,0) scale(1); }
	50% { transform: translate3d(2vw, -2vw, 0) scale(1.08); }
}

/* =============================================================================
   Scroll reveal (progressive enhancement; visible by default without JS)
   ============================================================================= */
.cg-reveal { opacity: 1; }
.js .cg-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s var(--cg-ease), transform 0.7s var(--cg-ease);
	will-change: opacity, transform;
}
.js .cg-reveal.is-visible { opacity: 1; transform: none; }
.js .cg-reveal[data-delay="1"] { transition-delay: 0.08s; }
.js .cg-reveal[data-delay="2"] { transition-delay: 0.16s; }
.js .cg-reveal[data-delay="3"] { transition-delay: 0.24s; }

/* Count-up stat numbers ---------------------------------------------------- */
.cg-stat__num {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(2.4rem, 5vw, 3.6rem);
	line-height: 1;
	color: var(--wp--preset--color--accent-soft);
	font-variant-numeric: tabular-nums;
}

/* =============================================================================
   Cards (strain / category / value)
   ============================================================================= */
.cg-card {
	position: relative;
	border-radius: var(--wp--custom--radius--lg, 24px);
	border: 1px solid var(--wp--preset--color--border);
	background: linear-gradient(155deg, rgba(24,36,28,0.9), rgba(18,26,21,0.7));
	overflow: hidden;
	transition: transform 0.35s var(--cg-ease), border-color 0.35s var(--cg-ease), box-shadow 0.35s var(--cg-ease);
}
.cg-card:hover {
	transform: translateY(-6px);
	border-color: rgba(201, 162, 39, 0.4);
	box-shadow: 0 28px 60px -28px rgba(0,0,0,0.8);
}
.cg-card::after {
	content: "";
	position: absolute; inset: 0;
	background: radial-gradient(120% 80% at 50% -20%, rgba(46,157,99,0.18), transparent 60%);
	opacity: 0; transition: opacity 0.35s var(--cg-ease); pointer-events: none;
}
.cg-card:hover::after { opacity: 1; }

.cg-badge {
	display: inline-block;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.3em 0.75em;
	border-radius: 999px;
	border: 1px solid rgba(201,162,39,0.4);
	color: var(--wp--preset--color--accent-soft);
	background: rgba(201,162,39,0.08);
}

/* Blog/guide card thumbnails: crop every featured image to the same 16:9 shape
   so the grid is uniform regardless of the source image's dimensions. */
.cg-card .wp-block-post-featured-image {
	height: auto !important;
	min-height: 0 !important;
	width: 100% !important;
	margin: 0 0 0 0;
	overflow: hidden;
	border-radius: 0;
}
.cg-card .wp-block-post-featured-image a { display: block !important; width: 100% !important; line-height: 0; }
/* Fixed-height crop (object-fit) for uniform thumbnails on ALL devices —
   more compatible than aspect-ratio, which older mobile browsers ignore. */
.cg-card .wp-block-post-featured-image img,
.cg-card img.wp-post-image {
	width: 100% !important;
	height: 200px !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block;
	aspect-ratio: auto !important;
}

/* =============================================================================
   FAQ accordion (AEO)
   ============================================================================= */
.cg-faq { display: grid; gap: 0.75rem; }
.cg-faq__item {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md, 16px);
	background: rgba(18,26,21,0.6);
	overflow: hidden;
}
.cg-faq__q {
	cursor: pointer;
	list-style: none;
	padding: 1.1rem 1.4rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 600;
	display: flex; justify-content: space-between; align-items: center; gap: 1rem;
	transition: color 0.2s var(--cg-ease);
}
.cg-faq__q::-webkit-details-marker { display: none; }
.cg-faq__q::after { content: "+"; color: var(--wp--preset--color--accent); font-size: 1.6rem; line-height: 1; transition: transform 0.25s var(--cg-ease); }
.cg-faq__item[open] .cg-faq__q::after { transform: rotate(45deg); }
.cg-faq__item[open] .cg-faq__q { color: var(--wp--preset--color--accent-soft); }
.cg-faq__a { padding: 0 1.4rem 1.3rem; color: var(--wp--preset--color--muted); }
.cg-faq__a p { margin: 0 0 0.6rem; }

/* =============================================================================
   Comparison / strain-facts tables (GEO)
   ============================================================================= */
.cg-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.cg-table caption { text-align: left; color: var(--wp--preset--color--muted); padding-bottom: 0.6rem; }
.cg-table th, .cg-table td { text-align: left; padding: 0.85rem 1rem; border-bottom: 1px solid var(--wp--preset--color--border); }
.cg-table thead th { color: var(--wp--preset--color--accent-soft); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.cg-table tbody tr:hover { background: rgba(46,157,99,0.06); }
.cg-table td:first-child { font-weight: 600; color: var(--wp--preset--color--contrast); }
/* On narrow screens the 5-column table scrolls inside its card instead of
   overflowing off the page. */
.cg-glass:has(.cg-table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cg-table { min-width: 640px; }

/* =============================================================================
   WooCommerce
   ============================================================================= */

/* The product-loop wrapper is a direct child of a constrained group, so the
   theme limits it to the 760px content width — let product grids use the full
   width of their (wide) section instead. */
.woocommerce[class*="columns-"],
.woocommerce-page[class*="columns-"] { max-width: none !important; }

/* Replace WooCommerce's float layout with a real grid so uneven card heights
   (wrapping titles) don't leave gaps; cards stretch to equal height per row.
   Fixed responsive column counts: 2 (mobile) / 3 (tablet) / 4 (desktop). */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--30);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; display: none !important; }
@media (min-width: 600px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products { grid-template-columns: repeat(4, 1fr); }
}

.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	display: flex !important;
	flex-direction: column;
}
/* Push the add-to-cart button to the bottom so buttons align across a row. */
.woocommerce ul.products li.product > a:first-of-type { display: flex; flex-direction: column; flex: 1 1 auto; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { flex: 1 1 auto; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart { margin-top: auto !important; align-self: flex-start; }

.woocommerce ul.products li.product,
.wc-block-grid__product {
	border-radius: var(--wp--custom--radius--lg, 24px);
	border: 1px solid var(--wp--preset--color--border);
	background: linear-gradient(155deg, rgba(24,36,28,0.9), rgba(18,26,21,0.7));
	padding: 1rem !important;
	transition: transform 0.35s var(--cg-ease), border-color 0.35s var(--cg-ease), box-shadow 0.35s var(--cg-ease);
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-6px);
	border-color: rgba(201,162,39,0.4);
	box-shadow: 0 28px 60px -28px rgba(0,0,0,0.8);
}
.woocommerce ul.products li.product img { border-radius: var(--wp--custom--radius--md, 16px); }
.woocommerce ul.products li.product .price { color: var(--wp--preset--color--accent-soft) !important; font-weight: 600; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--wp--preset--font-family--display); font-weight: 600; }

.woocommerce span.onsale {
	background: var(--wp--preset--gradient--gold-sheen);
	color: var(--wp--preset--color--base);
	border-radius: 999px;
	min-height: auto;
	min-width: auto;
	padding: 0.3em 0.8em;
	font-weight: 700;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt {
	background: var(--wp--preset--gradient--green-gold) !important;
	color: var(--wp--preset--color--base) !important;
	border-radius: 999px !important;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-size: 0.8rem;
	padding: 0.8em 1.6em !important;
	transition: transform 0.25s var(--cg-ease), box-shadow 0.25s var(--cg-ease);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -14px rgba(201,162,39,0.5); }

.woocommerce .price del { color: var(--wp--preset--color--muted); opacity: 0.7; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--wp--preset--color--accent) !important;
	background: rgba(18,26,21,0.7);
	color: var(--wp--preset--color--contrast);
}

/* WooCommerce Cart/Checkout BLOCK buttons (Proceed to Checkout, Place Order).
   These use .wc-block-components-button / .wp-element-button, which otherwise
   pick up the gradient-as-background-color (invalid) and render dark-on-dark. */
.wc-block-components-button.contained,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-cart .wc-block-components-button.contained {
	background: var(--wp--preset--gradient--green-gold) !important;
	color: var(--wp--preset--color--base) !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-weight: 600 !important;
	box-shadow: 0 12px 30px -14px rgba(46, 157, 99, 0.6);
}
.wc-block-components-button.contained:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: var(--wp--preset--gradient--gold-sheen) !important;
}
.wc-block-components-button.contained .wc-block-components-button__text { color: inherit !important; }
/* Cart count badge: force a visible gold chip with dark number (otherwise it
   can inherit the header's light text colour and read as a blank white circle). */
.wc-block-mini-cart__badge {
	background-color: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--base) !important;
	font-weight: 700 !important;
}
/* Mini-cart drawer: the "Start shopping" empty-state button (dark-on-dark by
   default) + readable empty text. */
.wc-block-mini-cart__shopping-button,
.wc-block-mini-cart__shopping-button a,
.wp-block-woocommerce-mini-cart-shopping-button-block a {
	background: var(--wp--preset--gradient--green-gold) !important;
	color: var(--wp--preset--color--base) !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-weight: 600 !important;
	padding: 0.75rem 1.7rem !important;
	display: inline-block;
	text-decoration: none;
}
.wc-block-mini-cart__empty-cart-wrapper,
.wc-block-mini-cart__title,
.wc-block-mini-cart__drawer .wc-block-components-totals-item { color: var(--wp--preset--color--contrast); }
/* Keep cart/checkout block text legible on the dark theme. */
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout,
.wc-block-cart, .wc-block-checkout { color: var(--wp--preset--color--contrast); }
.wc-block-components-product-name,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value { color: var(--wp--preset--color--contrast) !important; }

/* Cart/Checkout BLOCK form fields — dark inputs with light text so the
   floating labels (which inherit the theme's light colour) are legible.
   By default WC renders white inputs, making the light labels invisible. */
.wp-block-woocommerce-checkout input:not([type="checkbox"]):not([type="radio"]),
.wp-block-woocommerce-checkout select,
.wp-block-woocommerce-checkout textarea,
.wp-block-woocommerce-cart input:not([type="checkbox"]):not([type="radio"]),
.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-block-components-address-form select,
.wc-block-components-select__container select,
.wc-block-components-combobox input {
	background-color: rgba(11, 16, 13, 0.6) !important;
	color: var(--wp--preset--color--contrast) !important;
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: 10px !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-address-form input:focus,
.wc-block-components-combobox input:focus {
	border-color: var(--wp--preset--color--accent) !important;
}
/* Field labels / placeholders, section titles and helper text. */
.wc-block-components-text-input label,
.wc-block-components-combobox label,
.wc-block-components-checkout-step__title,
.wc-block-components-title,
.wc-block-components-address-form label,
.wc-block-components-checkout-step__heading-content,
.wc-block-checkout__actions .wc-block-components-checkout-return-to-cart-button {
	color: var(--wp--preset--color--muted) !important;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-combobox.is-active label { color: var(--wp--preset--color--accent-soft) !important; }
/* Dropdown option list legibility. */
.wp-block-woocommerce-checkout select option { background-color: #121A15; color: var(--wp--preset--color--contrast); }
.wc-block-components-combobox-list { background-color: #121A15 !important; color: var(--wp--preset--color--contrast); }
.wc-block-components-combobox-list-item.is-highlighted { background-color: rgba(46,157,99,0.25) !important; }

/* Single product variation dropdown (Pack Size) — light text on the dark
   field, and dark option rows so "Choose an option" is readable. */
.single-product .variations select,
.woocommerce div.product form.cart .variations select,
.wc-block-add-to-cart-form select {
	background-color: var(--wp--preset--color--surface) !important;
	color: var(--wp--preset--color--contrast) !important;
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: 10px;
	padding: 0.6em 2.2em 0.6em 0.9em;
	color-scheme: dark;
}
.single-product .variations select:focus,
.wc-block-add-to-cart-form select:focus { border-color: var(--wp--preset--color--accent) !important; }
.single-product .variations select option,
.wc-block-add-to-cart-form select option {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
}
.single-product .variations label,
.single-product .variations th { color: var(--wp--preset--color--contrast); }
.single-product .reset_variations { color: var(--wp--preset--color--accent-soft); }

/* WooCommerce breadcrumb (single + archives) — keep it small and on-brand. */
.woocommerce-breadcrumb {
	font-size: 0.85rem !important;
	color: var(--wp--preset--color--muted);
	margin-bottom: var(--wp--preset--spacing--30) !important;
}
.woocommerce-breadcrumb a { color: var(--wp--preset--color--accent-soft); }

/* Single product layout */
.single-product div.product .product_title { font-family: var(--wp--preset--font-family--display); }
.single-product div.product p.price,
.single-product div.product span.price { color: var(--wp--preset--color--accent-soft); font-weight: 600; font-size: 1.6rem; }

/* Collector notice band on product template */
.cg-collector-notice {
	border: 1px solid rgba(201,162,39,0.35);
	background: rgba(201,162,39,0.06);
	border-radius: var(--wp--custom--radius--md, 16px);
	padding: 1rem 1.25rem;
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
}
.cg-collector-notice strong { color: var(--wp--preset--color--accent-soft); }

/* =============================================================================
   Footer
   ============================================================================= */
.cg-footer { border-top: 1px solid var(--wp--preset--color--border); }
.cg-footer a { color: var(--wp--preset--color--muted); }
.cg-footer a:hover { color: var(--wp--preset--color--accent-soft); }
.cg-footer .cg-paybadges { width: 100%; }
.cg-footer .cg-paybadges img { display: block; width: 210px; height: auto; opacity: 0.95; }
.cg-legal-strip { font-size: 0.78rem; color: var(--wp--preset--color--muted); }
/* Footer links: keep whole words intact and a steady size. */
.cg-footer .wp-block-column ul,
.cg-footer .wp-block-column li,
.cg-footer .wp-block-column a { overflow-wrap: normal; word-break: normal; hyphens: none; font-size: 0.95rem; }
/* Tablet: reflow the 4-column footer to 2-up so link columns aren't cramped. */
@media (max-width: 900px) {
	.cg-footer .wp-block-columns { flex-wrap: wrap !important; row-gap: var(--wp--preset--spacing--40); }
	.cg-footer .wp-block-columns > .wp-block-column { flex-basis: 45% !important; min-width: 45%; }
}
@media (max-width: 560px) {
	.cg-footer .wp-block-columns > .wp-block-column { flex-basis: 100% !important; min-width: 100%; }
}

/* =============================================================================
   Misc
   ============================================================================= */
hr.wp-block-separator { border-color: var(--wp--preset--color--border); opacity: 0.6; }
.cg-section-line { height: 1px; background: linear-gradient(90deg, transparent, var(--wp--preset--color--border), transparent); border: 0; }

/* Mobile header: hide the redundant "Shop Seeds" CTA so the bar fits (the
   hamburger menu already has Shop, and the cart icon stays). */
@media (max-width: 640px) {
	.cg-header .wp-block-buttons { display: none; }
	.cg-header .wp-block-site-title { font-size: 1.25rem; }
}

/* Reduced motion ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
	.js .cg-reveal { opacity: 1 !important; transform: none !important; }
}