/* Brightlings theme styles. Most styling lives in theme.json; this file only
   covers what theme.json can't express. */

:root {
	--bl-ink: var(--wp--preset--color--ink);
	--bl-sun: var(--wp--preset--color--sun);
	--bl-lift: 0 4px 0 var(--bl-ink);
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { height: auto; }

/* Visible keyboard focus everywhere */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--bl-ink);
	outline-offset: 3px;
	border-radius: 6px;
}

/* ---- Buttons: the "sticker" lift that echoes the outlined logo ---- */
.wp-element-button,
.wp-block-button__link,
.wc-block-components-button:not(.is-link),
.wp-block-woocommerce-product-button .wp-block-button__link,
.woocommerce button.button,
.woocommerce a.button,
.single_add_to_cart_button {
	box-shadow: var(--bl-lift);
	transition: transform .12s ease, box-shadow .12s ease;
}
.wp-element-button:hover,
.wp-block-button__link:hover,
.wc-block-components-button:not(.is-link):hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover {
	transform: translateY(2px);
	box-shadow: 0 2px 0 var(--bl-ink);
}
.wp-element-button:active,
.wp-block-button__link:active { transform: translateY(4px); box-shadow: none; }

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: var(--wp--preset--color--white);
	color: var(--bl-ink);
	border: 2px solid var(--bl-ink);
}

/* Woo checkout/cart buttons pick up brand colors */
.wc-block-components-button:not(.is-link),
.woocommerce button.button,
.woocommerce a.button,
.single_add_to_cart_button {
	background: var(--bl-sun) !important;
	color: var(--bl-ink) !important;
	border: 2px solid var(--bl-ink) !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
}

/* ---- Sticker style for images and groups ---- */
.is-style-sticker img,
.wp-block-group.is-style-sticker {
	border: 3px solid var(--bl-ink);
	border-radius: 18px;
	box-shadow: 8px 8px 0 var(--bl-ink);
}
.wp-block-group.is-style-sticker { padding: var(--wp--preset--spacing--40); }

/* ---- Header ---- */
.bl-header { border-bottom: 2px solid var(--bl-ink); background: var(--wp--preset--color--white); }
.bl-header .wp-block-site-logo img { display: block; }
.bl-header .wp-block-navigation a { text-decoration: none; }
.bl-header .wp-block-navigation a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }

/* ---- Hero: the one bold moment. A big sun rises behind the product. ---- */
.bl-hero { position: relative; overflow: hidden; isolation: isolate; }
.bl-hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	width: min(62vw, 720px);
	aspect-ratio: 1;
	right: -8%;
	top: 50%;
	transform: translateY(-50%);
	border-radius: 50%;
	background:
		radial-gradient(circle at center, var(--bl-sun) 0 52%, transparent 52.5%),
		repeating-conic-gradient(from 0deg, var(--bl-sun) 0 3deg, transparent 3deg 22.5deg);
	-webkit-mask: radial-gradient(circle, #000 0 70%, transparent 70.5%);
	mask: radial-gradient(circle, #000 0 70%, transparent 70.5%);
	opacity: .9;
}
.bl-hero h1 { max-width: 14ch; }
.bl-hero__image img { filter: drop-shadow(0 18px 24px rgba(43, 58, 85, .18)); }

@media (max-width: 781px) {
	.bl-hero::before { width: 120vw; right: -50vw; top: 72%; opacity: .55; }
	.bl-hero h1 { max-width: none; }
}

/* ---- Steps (a real sequence, so numbers are earned) ---- */
.bl-steps { counter-reset: bl-step; }
.bl-step { counter-increment: bl-step; position: relative; padding-top: 3.5rem; }
.bl-step::before {
	content: counter(bl-step);
	position: absolute; top: 0; left: 0;
	width: 2.5rem; height: 2.5rem;
	display: grid; place-items: center;
	border: 2px solid var(--bl-ink); border-radius: 50%;
	background: var(--bl-sun);
	font-weight: 700;
}

/* ---- Product cards ---- */
.wc-block-components-product-image img,
.wp-block-woocommerce-product-image img {
	border: 2px solid var(--bl-ink);
	border-radius: 14px;
}
.wp-block-woocommerce-product-template .wp-block-post-title a { text-decoration: none; }

/* ---- FAQ ---- */
.wp-block-details summary { font-weight: 700; cursor: pointer; list-style-position: outside; }
.wp-block-details:last-child { border-bottom: 2px solid var(--bl-ink); }
.wp-block-details[open] summary { margin-bottom: .5rem; }

/* ---- Footer ---- */
.bl-footer a { color: inherit; text-decoration: none; }
.bl-footer a:hover { text-decoration: underline; }
.bl-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}

/* ---- Single product: keep long SEO titles readable ---- */
.single-product h1.wp-block-post-title,
.single-product .product_title {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
}

/* ---- Product meta: SKU + category on one line, tags on their own line ---- */
.wp-block-woocommerce-product-meta > .wp-block-group {
	flex-wrap: wrap !important;
	align-items: baseline;
	column-gap: 1.5rem;
	row-gap: 0.4rem;
	font-size: var(--wp--preset--font-size--small);
}
.wp-block-woocommerce-product-meta .taxonomy-product_tag { flex-basis: 100%; }
.wp-block-woocommerce-product-meta .wp-block-post-terms__prefix { font-weight: 700; }
/* Classic template fallback */
.product_meta .sku_wrapper,
.product_meta .posted_in,
.product_meta .tagged_as { display: block; margin-bottom: 0.35rem; }

/* Phones: stack SKU, Category and Tags on separate lines */
@media (max-width: 600px) {
	.wp-block-woocommerce-product-meta > .wp-block-group,
	div.product_meta:not(.wp-block-woocommerce-product-sku) {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 0.35rem !important;
	}
	.wp-block-woocommerce-product-meta > .wp-block-group > *,
	div.product_meta:not(.wp-block-woocommerce-product-sku) > * {
		width: 100%;
		margin: 0 !important;
	}
	.wp-block-woocommerce-product-sku { display: block !important; }
}