/*
Theme Name: Velora Research
Theme URI: https://example.com/velora-research
Author: Velora Research Labs
Author URI: https://example.com
Description: A polished block theme for Velora Research Labs, a demonstration research-compound WooCommerce store. Built with native Site Editor support, block patterns, and full WooCommerce block compatibility. Persistent content and business logic live in the companion "velora-core" plugin.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: velora-research
Tags: block-theme, e-commerce, full-site-editing, custom-colors, custom-menu, dark

Velora Research is a demonstration theme. Product names, claims, and copy
included with the optional demo content are placeholders and are not
verified real-world claims.
*/

/* -----------------------------------------------------------------------
   Layout helpers
----------------------------------------------------------------------- */

.vlr-visually-hidden {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.vlr-visually-hidden.vlr-skip-link:focus {
	background: var(--wp--preset--color--electric-blue);
	block-size: auto;
	clip: auto;
	clip-path: none;
	color: var(--wp--preset--color--white);
	inline-size: auto;
	margin: 0;
	padding: 0.85rem 1.25rem;
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100000;
	border-radius: var(--wp--custom--radius--sm);
}

/* -----------------------------------------------------------------------
   Focus visibility (accessibility)
----------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2.5px solid var(--wp--preset--color--ion-blue);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--sm);
}

/* -----------------------------------------------------------------------
   Tech texture utilities — dot grid + network lines
----------------------------------------------------------------------- */

.vlr-texture-dots {
	position: relative;
	background-image: radial-gradient(circle, rgba(122, 164, 255, 0.35) 1px, transparent 1.6px);
	background-size: 26px 26px;
}

.vlr-texture-network {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0.55;
	overflow: hidden;
}

/* -----------------------------------------------------------------------
   Announcement bar
----------------------------------------------------------------------- */

.vlr-announcement-bar {
	background: linear-gradient(90deg, var(--wp--preset--color--electric-blue) 0%, #1b4fd6 100%);
	color: var(--wp--preset--color--white);
	text-align: center;
}

.vlr-announcement-bar p {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.02em;
	margin: 0;
}

/* -----------------------------------------------------------------------
   Site header — dark, sits flush against whatever follows it
----------------------------------------------------------------------- */

.vlr-site-header {
	border-bottom: 1px solid rgba(122, 164, 255, 0.14);
	background: var(--wp--preset--color--void-navy);
}

.vlr-site-header .wp-block-navigation {
	--wp--style--root--padding-inline: 0;
}

.vlr-site-header .wp-block-navigation a {
	color: var(--wp--preset--color--mist-blue);
}

.vlr-site-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--white);
}

.vlr-site-header .wp-block-navigation__responsive-container-open svg,
.vlr-site-header .wp-block-navigation__responsive-container-close svg {
	fill: var(--wp--preset--color--mist-blue);
}

.vlr-site-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--void-navy) !important;
}

/* -----------------------------------------------------------------------
   Eyebrow text style (used via custom class in patterns)
----------------------------------------------------------------------- */

.vlr-eyebrow {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ion-blue);
}

.vlr-eyebrow.vlr-eyebrow--code::before {
	content: "// ";
	opacity: 0.7;
}

/* -----------------------------------------------------------------------
   Light contrast bands (feature cards, categories, FAQ)
----------------------------------------------------------------------- */

.vlr-band-light {
	background: var(--wp--preset--color--ice-blue);
	color: var(--wp--preset--color--midnight-navy);
}

.vlr-band-light :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--midnight-navy);
}

.vlr-band-light p {
	color: var(--wp--preset--color--muted-blue-gray);
}

.vlr-band-light a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--electric-blue);
}

.vlr-band-light a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--deep-blue);
}

/* -----------------------------------------------------------------------
   Cards (trust strip, categories, principles)
----------------------------------------------------------------------- */

.vlr-card {
	background: linear-gradient(160deg, var(--wp--preset--color--deep-blue), var(--wp--preset--color--midnight-navy));
	border: 1px solid rgba(122, 164, 255, 0.16);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--sm);
	padding: 1.75rem;
	color: var(--wp--preset--color--mist-blue);
}

.vlr-card :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--white);
}

.vlr-card h3 {
	font-size: 1.05rem;
	margin-block-end: 0.4rem;
}

.vlr-card p {
	color: var(--wp--preset--color--mist-blue);
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

.vlr-card a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--ion-blue);
}

.vlr-card.vlr-accent-ion {
	border-top: 3px solid var(--wp--preset--color--ion-blue);
}

.vlr-card.vlr-accent-violet {
	border-top: 3px solid var(--wp--preset--color--electric-blue);
}

.vlr-card.vlr-accent-navy {
	border-top: 3px solid var(--wp--preset--color--steel-blue);
}

.vlr-card-icon {
	width: 44px;
	height: 44px;
	border-radius: 11px;
	background: linear-gradient(160deg, var(--wp--preset--color--electric-blue-light), var(--wp--preset--color--electric-blue));
	display: flex;
	align-items: center;
	justify-content: center;
	margin-block-end: 1.1rem;
}

/* Light card variant — used inside .vlr-band-light sections */
.vlr-band-light .vlr-card {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--light-border);
	color: var(--wp--preset--color--muted-blue-gray);
}

.vlr-band-light .vlr-card :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--midnight-navy);
}

.vlr-band-light .vlr-card p {
	color: var(--wp--preset--color--muted-blue-gray);
}

.vlr-band-light .vlr-card a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--electric-blue);
}

/* -----------------------------------------------------------------------
   FAQ accordion (native core/details block) — sits in a light band
----------------------------------------------------------------------- */

.vlr-faq details {
	border-bottom: 1px solid var(--wp--preset--color--light-border);
	padding-block: 1.1rem;
}

.vlr-faq details:first-of-type {
	border-top: 1px solid var(--wp--preset--color--light-border);
}

.vlr-faq summary {
	cursor: pointer;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--wp--preset--color--midnight-navy);
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.vlr-faq summary::-webkit-details-marker {
	display: none;
}

.vlr-faq summary::after {
	content: "+";
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--wp--preset--color--electric-blue);
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.vlr-faq details[open] summary::after {
	content: "\2212";
}

.vlr-faq details > :not(summary) {
	color: var(--wp--preset--color--muted-blue-gray);
	margin-block-start: 0.75rem;
}

/* -----------------------------------------------------------------------
   Footer
----------------------------------------------------------------------- */

.vlr-site-footer {
	background: var(--wp--preset--color--void-navy);
	color: var(--wp--preset--color--mist-blue);
	border-top: 1px solid rgba(122, 164, 255, 0.14);
}

.vlr-site-footer a {
	color: var(--wp--preset--color--mist-blue);
}

.vlr-site-footer a:hover {
	color: var(--wp--preset--color--ion-blue);
}

.vlr-site-footer .wp-block-navigation a {
	color: var(--wp--preset--color--mist-blue);
	opacity: 0.9;
}

.vlr-footer-disclaimer {
	color: var(--wp--preset--color--muted-blue-gray);
	font-size: var(--wp--preset--font-size--small);
}

.vlr-footer-fineprint {
	border-top: 1px solid rgba(122, 164, 255, 0.14);
}

/* -----------------------------------------------------------------------
   Buttons — filled pill with a subtle glow, ghost variant for dark bands
----------------------------------------------------------------------- */

.wp-element-button,
.wp-block-button__link {
	box-shadow: 0 8px 24px rgba(47, 107, 255, 0.28);
}

.is-style-outline .wp-block-button__link {
	box-shadow: none;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.22);
}

.is-style-outline .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.08);
}

/* -----------------------------------------------------------------------
   WooCommerce presentation polish (dark-first)
----------------------------------------------------------------------- */

.wc-block-product-price,
.woocommerce .price,
.woocommerce-Price-amount {
	color: var(--wp--preset--color--white);
	font-weight: 700;
}

.vlr-band-light .wc-block-product-price,
.vlr-band-light .woocommerce .price,
.vlr-band-light .woocommerce-Price-amount {
	color: var(--wp--preset--color--midnight-navy);
}

.wc-block-components-product-badge,
.woocommerce span.onsale,
.wc-block-grid__product-onsale {
	background: var(--wp--preset--color--electric-blue);
	color: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--sm);
}

.wc-block-components-notice-banner,
.woocommerce-message,
.woocommerce-info {
	background: var(--wp--preset--color--deep-blue) !important;
	color: var(--wp--preset--color--white) !important;
	border-inline-start-color: var(--wp--preset--color--ion-blue) !important;
	border-radius: var(--wp--custom--radius--sm);
}

.woocommerce-error {
	background: var(--wp--preset--color--deep-blue) !important;
	color: var(--wp--preset--color--white) !important;
	border-inline-start-color: var(--wp--preset--color--electric-blue) !important;
	border-radius: var(--wp--custom--radius--sm);
}

.wc-block-components-product-add-to-cart .wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit {
	background: linear-gradient(180deg, var(--wp--preset--color--electric-blue-light), var(--wp--preset--color--electric-blue));
	color: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--full);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: var(--wp--preset--color--electric-blue-light);
}

.woocommerce-research-notice {
	background: rgba(47, 107, 255, 0.1);
	border: 1px solid rgba(122, 164, 255, 0.25);
	border-radius: var(--wp--custom--radius--md);
	padding: 1rem 1.25rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--mist-blue);
}

.vlr-band-light .woocommerce-research-notice {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--light-border);
	color: var(--wp--preset--color--muted-blue-gray);
}

/* Product cards — give every WooCommerce product item consistent dark chrome */
.wp-block-woocommerce-product-template .wc-block-product,
.wc-block-grid__product {
	background: linear-gradient(160deg, var(--wp--preset--color--deep-blue), var(--wp--preset--color--midnight-navy));
	border: 1px solid rgba(122, 164, 255, 0.16);
	border-radius: var(--wp--custom--radius--lg);
	padding: 1.25rem;
}

.vlr-band-light .wp-block-woocommerce-product-template .wc-block-product,
.vlr-band-light .wc-block-grid__product {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--light-border);
}

.wp-block-woocommerce-product-template .wc-block-components-product-image img {
	border-radius: var(--wp--custom--radius--md);
}

/* Single product gallery — same dark card chrome as the grid, so a
   product photo's own dark scene doesn't disappear into the page background. */
.woocommerce-product-gallery {
	background: linear-gradient(160deg, var(--wp--preset--color--deep-blue), var(--wp--preset--color--midnight-navy));
	border: 1px solid rgba(122, 164, 255, 0.16);
	border-radius: var(--wp--custom--radius--lg);
	padding: 1.25rem;
}

.woocommerce-product-gallery__image img {
	border-radius: var(--wp--custom--radius--md);
}

.vlr-band-light .woocommerce-product-gallery {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--light-border);
}

/* Breadcrumbs, tabs, forms */
.woocommerce-breadcrumb {
	color: var(--wp--preset--color--mist-blue);
}

.woocommerce-breadcrumb a {
	color: var(--wp--preset--color--steel-blue);
}

.woocommerce-tabs ul.tabs {
	border-bottom: 1px solid rgba(122, 164, 255, 0.2);
}

.woocommerce-tabs ul.tabs li a {
	color: var(--wp--preset--color--mist-blue);
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--white);
}

.woocommerce div.product form.cart .quantity input.qty,
.woocommerce table.shop_table,
.wc-block-components-text-input input,
.wc-block-components-text-input,
.wc-block-components-textarea textarea,
.wc-block-components-combobox input,
.wc-block-components-address-form input,
.wc-blocks-components-select__select,
.wc-blocks-components-select,
.wc-block-components-country-input,
.wc-block-components-state-input,
select,
select:focus,
select:focus-visible,
.wc-blocks-components-select__select:focus {
	background: rgba(255, 255, 255, 0.06) !important;
	background-color: rgba(255, 255, 255, 0.06) !important;
	background-image: none !important;
	border: 1px solid rgba(122, 164, 255, 0.3) !important;
	color: var(--wp--preset--color--white) !important;
	border-radius: var(--wp--custom--radius--sm) !important;
}

.wc-block-components-country-input select,
.wc-block-components-state-input select {
	background: transparent !important;
	color: var(--wp--preset--color--white) !important;
}

.wc-block-components-text-input label,
.wc-blocks-components-select__label {
	color: var(--wp--preset--color--mist-blue) !important;
}

.wc-blocks-components-select__select-arrow {
	fill: var(--wp--preset--color--mist-blue) !important;
}

.vlr-band-light input,
.vlr-band-light select,
.vlr-band-light textarea,
.vlr-band-light .wc-block-components-text-input,
.vlr-band-light .wc-blocks-components-select__select,
.vlr-band-light .wc-blocks-components-select {
	background: var(--wp--preset--color--white) !important;
	border-color: var(--wp--preset--color--light-border) !important;
	color: var(--wp--preset--color--midnight-navy) !important;
}

.vlr-band-light .wc-block-components-text-input label,
.vlr-band-light .wc-blocks-components-select__label {
	color: var(--wp--preset--color--muted-blue-gray) !important;
}

/* Chrome/Edge autofill (common on address/country fields) otherwise
   forces its own light background regardless of author styles. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--wp--preset--color--white) !important;
	-webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.06) inset !important;
	box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.06) inset !important;
	transition: background-color 9999s ease-in-out 0s;
}

.vlr-band-light input:-webkit-autofill,
.vlr-band-light select:-webkit-autofill {
	-webkit-text-fill-color: var(--wp--preset--color--midnight-navy) !important;
	-webkit-box-shadow: 0 0 0px 1000px var(--wp--preset--color--white) inset !important;
	box-shadow: 0 0 0px 1000px var(--wp--preset--color--white) inset !important;
}

.wc-block-components-panel,
.wc-block-cart-items,
.wc-block-components-order-summary,
.wc-block-components-totals-item,
.wp-block-woocommerce-checkout-totals-block,
.wp-block-woocommerce-cart-totals-block {
	color: var(--wp--preset--color--white);
}

.wc-block-components-panel__button {
	color: var(--wp--preset--color--white);
}

.wc-block-components-radio-control__option,
.wc-block-components-address-card {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(122, 164, 255, 0.18) !important;
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--white);
}

.wc-block-components-order-summary-item__description,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
	color: var(--wp--preset--color--mist-blue);
}

/* -----------------------------------------------------------------------
   COA lookup block (see velora-core/blocks/coa-lookup) — dark glow style
----------------------------------------------------------------------- */

.vlr-coa-lookup {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(122, 164, 255, 0.22);
	border-radius: var(--wp--custom--radius--lg);
	padding: clamp(1.5rem, 3vw, 2.5rem);
}

.vlr-coa-lookup__form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block-end: 1rem;
}

.vlr-coa-lookup__form input[type="text"] {
	flex: 1 1 240px;
	min-inline-size: 0;
	padding: 0.75rem 1rem;
	border: 1px solid rgba(122, 164, 255, 0.3);
	border-radius: var(--wp--custom--radius--full);
	font-size: 1rem;
	background: rgba(255, 255, 255, 0.04);
	color: var(--wp--preset--color--white);
}

.vlr-coa-lookup__form input[type="text"]::placeholder {
	color: var(--wp--preset--color--mist-blue);
}

.vlr-coa-lookup__form .wp-block-button__link,
.vlr-coa-lookup__form button {
	border-radius: var(--wp--custom--radius--full);
}

.vlr-coa-lookup__result {
	background: var(--wp--preset--color--midnight-navy);
	border: 1px solid rgba(122, 164, 255, 0.2);
	border-radius: var(--wp--custom--radius--md);
	padding: 1.25rem 1.5rem;
	color: var(--wp--preset--color--mist-blue);
}

.vlr-coa-lookup__result h3 {
	color: var(--wp--preset--color--white);
}

.vlr-coa-lookup__badge {
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ion-blue);
	margin-block-end: 0.5rem;
}

.vlr-product-coa li {
	margin-block-end: 0.5rem;
}

.vlr-product-coa .vlr-coa-lookup__badge {
	display: block;
	margin-block: 0.25rem 0;
}

/* -----------------------------------------------------------------------
   Contact form (see velora-core Frontend module)
----------------------------------------------------------------------- */

.vlr-contact-form input[type="text"],
.vlr-contact-form input[type="email"],
.vlr-contact-form textarea {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid rgba(122, 164, 255, 0.3);
	border-radius: var(--wp--custom--radius--sm);
	font-size: 1rem;
	font-family: inherit;
	background: rgba(255, 255, 255, 0.04);
	color: var(--wp--preset--color--white);
}

.vlr-band-light .vlr-contact-form input[type="text"],
.vlr-band-light .vlr-contact-form input[type="email"],
.vlr-band-light .vlr-contact-form textarea {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--light-border);
	color: var(--wp--preset--color--midnight-navy);
}

.vlr-contact-form__success {
	color: var(--wp--preset--color--white);
	background: rgba(47, 107, 255, 0.14);
	padding: 0.85rem 1.1rem;
	border-radius: var(--wp--custom--radius--sm);
}

.vlr-contact-form__error {
	color: var(--wp--preset--color--white);
	background: rgba(239, 68, 68, 0.12);
	padding: 0.85rem 1.1rem;
	border-radius: var(--wp--custom--radius--sm);
	border-inline-start: 3px solid #ef4444;
}

/* -----------------------------------------------------------------------
   Responsive rules
----------------------------------------------------------------------- */

@media (max-width: 599px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		gap: 1.25rem;
	}
}

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

/* Prevent horizontal overflow at small widths */
body {
	overflow-x: hidden;
}

img,
svg {
	max-inline-size: 100%;
	height: auto;
}