/**
 * Peptogenesis component styles.
 *
 * The primitives of the design system: cards, buttons, badges, icons, and forms.
 * Everything here is expressed in tokens from theme.json — no literal color,
 * size, or timing values. If a value is missing, add the token rather than
 * hard-coding it here.
 *
 * Each component is styled through two selectors: the block style variation
 * (is-style-pg-card), which is what editors apply in the Site Editor, and a
 * plain utility class (pg-card), which the PHP templates in Phase 5 use where
 * markup is rendered by WooCommerce rather than by the block editor. Both must
 * stay in sync, which is why they share one rule.
 */

/* -------------------------------------------------------------------------- *
 * Metallic champagne-gold palette
 *
 * A three-stop gold: a light champagne highlight, the main gold, and a warm
 * bronze shadow. Primary gold buttons and important accents use the metallic
 * gradient for depth; card borders use the main gold at reduced opacity. This
 * replaces the earlier flatter, more olive treatment.
 * -------------------------------------------------------------------------- */
:root {
	--pg-gold-hi: #F2D675;
	--pg-gold: #D4AF37;
	--pg-gold-dark: #A67C22;
	--pg-gold-metal: linear-gradient( 160deg, #F2D675 0%, #D4AF37 46%, #A67C22 100% );
	--pg-gold-metal-hover: linear-gradient( 160deg, #F6DE8A 0%, #DDB945 46%, #B8892C 100% );
}

/* -------------------------------------------------------------------------- *
 * Cards
 *
 * The Brand Guide assigns separation to the thin gold border, not to the
 * surface, so the charcoal panel sits only slightly above the page and the
 * border does the work.
 * -------------------------------------------------------------------------- */

.is-style-pg-card,
.pg-card {
	background-color: var( --wp--preset--color--charcoal );
	border: var( --wp--custom--border--gold );
	border-radius: var( --wp--custom--radius--card );
	box-shadow: var( --wp--preset--shadow--soft );
	padding: var( --wp--preset--spacing--60 );
	transition:
		transform var( --pg-duration-base ) var( --pg-easing ),
		box-shadow var( --pg-duration-base ) var( --pg-easing ),
		border-color var( --pg-duration-base ) var( --pg-easing );
}

/*
 * Hover lift.
 *
 * :focus-within is paired with :hover so a keyboard user tabbing to a link
 * inside the card gets the same feedback a mouse user gets.
 */
.is-style-pg-card:hover,
.pg-card:hover,
.is-style-pg-card:focus-within,
.pg-card:focus-within {
	border: var( --wp--custom--border--gold-hover );
	/* Raised depth plus a faint gold halo — premium without shouting. */
	box-shadow: var( --wp--preset--shadow--raised ), 0 0 0 1px rgba( 212, 175, 55, 0.12 ), 0 0 30px rgba( 212, 175, 55, 0.10 );
	transform: translateY( -5px );
}

/* -------------------------------------------------------------------------- *
 * Buttons
 *
 * The primary (gold fill) button is defined in theme.json under
 * elements.button, so only the transition and the secondary variant live here.
 * -------------------------------------------------------------------------- */

.wp-element-button,
.wp-block-button__link {
	transition:
		background-color var( --pg-duration-base ) var( --pg-easing ),
		border-color var( --pg-duration-base ) var( --pg-easing ),
		box-shadow var( --pg-duration-base ) var( --pg-easing ),
		color var( --pg-duration-base ) var( --pg-easing ),
		transform var( --pg-duration-base ) var( --pg-easing );
	will-change: transform;
}

/*
 * Primary button polish.
 *
 * A subtle top-lit gold gradient and a soft shadow give the fill depth; on hover
 * it lifts 2px and gains a gold glow. Targeted to the non-outline button so the
 * secondary variant keeps its flat, quiet treatment.
 */
.wp-block-button:not( .is-style-outline ) > .wp-block-button__link,
.wp-block-button:not( .is-style-outline ) .wp-block-button__link:not( .is-style-outline ) {
	background-image: var( --pg-gold-metal );
	box-shadow: 0 6px 18px rgba( 212, 175, 55, 0.22 );
}

.wp-block-button:not( .is-style-outline ) > .wp-block-button__link:hover,
.wp-block-button:not( .is-style-outline ) .wp-block-button__link:not( .is-style-outline ):hover {
	box-shadow: 0 10px 26px rgba( 212, 175, 55, 0.34 );
	transform: translateY( -2px );
}

.wp-block-button:not( .is-style-outline ) > .wp-block-button__link:active {
	transform: translateY( 0 );
}

/* Secondary lifts too, so both buttons feel alive without competing. */
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	transform: translateY( -2px );
}

/*
 * Secondary button.
 *
 * Core's built-in "outline" style is restyled into the approved secondary
 * button rather than registering a competing variation, which keeps one outline
 * button in the editor instead of two that look alike.
 *
 * The selectors below mirror core's own, including its :not(.has-text-color)
 * guard. Core's guarded rule would otherwise outrank a plainer selector here
 * and force the text back to currentColor.
 */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-outline {
	background-color: transparent;
	background-image: none;
	border: 1px solid var( --wp--preset--color--gold );
	border-radius: var( --wp--custom--radius--md );
	font-size: var( --wp--preset--font-size--medium );
	font-weight: 600;
	line-height: 1;
	padding: 1rem 2rem;
}

.wp-block-button.is-style-outline > .wp-block-button__link:not( .has-text-color ),
.wp-block-button .wp-block-button__link.is-style-outline:not( .has-text-color ) {
	color: var( --wp--preset--color--white );
}

/*
 * Secondary hover: a faint gold wash and gold text, which reads as "brighten
 * slightly" without turning the button into a copy of the primary.
 */
.wp-block-button.is-style-outline > .wp-block-button__link:not( .has-text-color ):hover,
.wp-block-button .wp-block-button__link.is-style-outline:not( .has-text-color ):hover {
	background-color: rgba( 212, 175, 55, 0.12 );
	border-color: var( --wp--preset--color--gold );
	color: var( --wp--preset--color--gold );
}

/* -------------------------------------------------------------------------- *
 * Badges
 *
 * Selectors are qualified with `p` as well as bare, because theme.json colors
 * paragraphs slate gray and an unqualified class would not reliably outrank it.
 * -------------------------------------------------------------------------- */

p.is-style-pg-badge,
p.pg-badge,
.is-style-pg-badge,
.pg-badge {
	align-items: center;
	background-color: transparent;
	border: 1px solid rgba( 212, 175, 55, 0.55 );
	border-radius: var( --wp--custom--radius--pill );
	color: var( --wp--preset--color--white );
	display: inline-flex;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 500;
	gap: 0.4em;
	letter-spacing: 0.06em;
	line-height: 1.2;
	padding: 0.375rem 0.875rem;
	text-transform: uppercase;
}

/*
 * Stock status badge.
 *
 * Success Green is confined to stock and success messaging by the Brand Guide.
 * Note that color alone never carries the meaning here — the badge always
 * contains its own text, so the status survives for color-blind users.
 */
p.is-style-pg-badge-success,
p.pg-badge--success,
.is-style-pg-badge-success,
.pg-badge--success {
	align-items: center;
	background-color: transparent;
	border: 1px solid rgba( 60, 179, 113, 0.55 );
	border-radius: var( --wp--custom--radius--pill );
	color: var( --wp--preset--color--success );
	display: inline-flex;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 500;
	gap: 0.4em;
	letter-spacing: 0.06em;
	line-height: 1.2;
	padding: 0.375rem 0.875rem;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------- *
 * Eyebrow label
 *
 * The small uppercase line above a headline, as in the hero's
 * "PREMIUM / VERIFIED / RESEARCH USE ONLY".
 * -------------------------------------------------------------------------- */

p.is-style-pg-eyebrow,
p.pg-eyebrow,
.is-style-pg-eyebrow,
.pg-eyebrow {
	color: var( --wp--preset--color--gold );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------- *
 * Icons
 * -------------------------------------------------------------------------- */

.pg-icon {
	color: var( --wp--preset--color--gold );
	display: inline-block;
	flex-shrink: 0;
	transition: color var( --pg-duration-base ) var( --pg-easing );
	vertical-align: middle;
}

/* Icons brighten to white inside an interactive element on hover. */
a:hover .pg-icon,
button:hover .pg-icon {
	color: var( --wp--preset--color--white );
}

/* -------------------------------------------------------------------------- *
 * Forms
 * -------------------------------------------------------------------------- */

.pg-form {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--40 );
	max-width: 34rem;
}

.pg-field {
	display: block;
}

.pg-form-note {
	color: var( --wp--preset--color--slate );
	font-size: var( --wp--preset--font-size--small );
	margin: 0;
}

/*
 * Honeypot.
 *
 * Positioned off-screen rather than display:none. A bot that respects
 * display:none would skip the trap entirely, which defeats the point; this is
 * hidden from people while staying present for anything filling fields blindly.
 * aria-hidden and tabindex="-1" keep it away from screen readers and Tab.
 */
.pg-honeypot {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

input[ type="text" ],
input[ type="email" ],
input[ type="tel" ],
input[ type="url" ],
input[ type="search" ],
input[ type="number" ],
input[ type="password" ],
input[ type="date" ],
select,
textarea {
	background-color: var( --wp--preset--color--navy );
	border: var( --wp--custom--border--subtle );
	border-radius: var( --wp--custom--radius--sm );
	color: var( --wp--preset--color--white );
	font-family: inherit;
	font-size: var( --wp--preset--font-size--medium );
	line-height: 1.5;
	padding: 0.875rem 1rem;
	transition:
		border-color var( --pg-duration-base ) var( --pg-easing ),
		box-shadow var( --pg-duration-base ) var( --pg-easing );
	width: 100%;
}

textarea {
	min-height: 10rem;
	resize: vertical;
}

/*
 * Focus.
 *
 * The Brand Guide asks for a thin gold outline on the selected field. The
 * outline property is deliberately left alone so the gold focus ring in
 * style.css still appears for keyboard users; this only colors the border.
 */
input:focus,
select:focus,
textarea:focus {
	border-color: var( --wp--preset--color--gold );
	box-shadow: 0 0 0 3px rgba( 212, 175, 55, 0.18 );
}

/* Firefox dims placeholders by default; opacity is reset so slate stays slate. */
::placeholder {
	color: var( --wp--preset--color--slate );
	opacity: 1;
}

/*
 * Custom select arrow.
 *
 * The native arrow renders near-black on the dark field and is effectively
 * invisible, so appearance is reset and a gold chevron matching the icon set is
 * drawn in its place.
 */
select {
	appearance: none;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4AF37' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E" );
	background-position: right 1rem center;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	padding-right: 2.75rem;
}

/* Labels sit above their field, per the Brand Guide. */
label {
	color: var( --wp--preset--color--white );
	display: block;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 500;
	margin-bottom: 0.5rem;
}

/*
 * A label that wraps its own checkbox or radio is a caption, not a heading, so
 * it sits beside the control rather than above it.
 */
label:has( input[ type="checkbox" ] ),
label:has( input[ type="radio" ] ) {
	align-items: center;
	display: flex;
	font-weight: 400;
	gap: 0.6rem;
	margin-bottom: 0;
}

input[ type="checkbox" ],
input[ type="radio" ] {
	accent-color: var( --wp--preset--color--gold );
	block-size: 1.125rem;
	flex-shrink: 0;
	inline-size: 1.125rem;
}

/*
 * Invalid fields.
 *
 * Driven by aria-invalid rather than a theme class, so the visual state and the
 * state announced to screen readers can never drift apart.
 */
input[ aria-invalid="true" ],
select[ aria-invalid="true" ],
textarea[ aria-invalid="true" ] {
	border-color: var( --wp--custom--state--error );
}

input[ aria-invalid="true" ]:focus,
select[ aria-invalid="true" ]:focus,
textarea[ aria-invalid="true" ]:focus {
	box-shadow: 0 0 0 3px rgba( 248, 113, 113, 0.2 );
}

/*
 * Validation messages.
 *
 * Both carry an icon alongside the text so the message never depends on color
 * alone to be understood.
 */
.pg-form-message {
	align-items: center;
	display: flex;
	font-size: var( --wp--preset--font-size--small );
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.pg-form-message--error {
	color: var( --wp--custom--state--error );
}

.pg-form-message--error .pg-icon {
	color: var( --wp--custom--state--error );
}

.pg-form-message--success {
	color: var( --wp--preset--color--success );
}

.pg-form-message--success .pg-icon {
	color: var( --wp--preset--color--success );
}

/*
 * Owner-review placeholder.
 *
 * Marks content that the site owner or their legal counsel must supply before
 * launch. It carries the legal and policy page patterns, whose specifics — a
 * return window, shipping destinations, data-handling practices, a governing
 * jurisdiction — are business and legal decisions the theme must not invent.
 *
 * Deliberately conspicuous: a dashed gold rule and an uppercase label, so a
 * placeholder cannot be published unnoticed. It still draws only on the brand's
 * own tokens, so a page mid-review already looks like Peptogenesis.
 */
.pg-review {
	background: rgba( 212, 175, 55, 0.06 );
	border: 1px dashed rgba( 212, 175, 55, 0.55 );
	border-radius: var( --wp--custom--radius--md );
	padding: var( --wp--preset--spacing--40 );
}

.pg-review__label {
	color: var( --wp--preset--color--gold );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 0 0 var( --wp--preset--spacing--20 );
	text-transform: uppercase;
}

.pg-review p:not( .pg-review__label ) {
	color: var( --wp--preset--color--slate );
	font-size: var( --wp--preset--font-size--small );
	margin: 0;
}

.pg-review p:not( .pg-review__label ) + p {
	margin-top: var( --wp--preset--spacing--20 );
}

.pg-review a {
	color: var( --wp--preset--color--gold );
}

/*
 * COA status panel (product page) and library meta line.
 *
 * The status is stated in words; colour is a secondary cue only — success green
 * when a COA is available, slate when it is still coming — so meaning never rests
 * on colour alone.
 */
.pg-coa {
	margin-top: var( --wp--preset--spacing--30 );
}

.pg-coa__status {
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 0;
}

/* Status wording is colour-coded, but wording always carries the meaning too, so
   it never rests on colour alone. Supplier = gold, independent = green,
   coming-soon = slate. */
.pg-coa__status--supplier {
	color: var( --wp--preset--color--gold );
}

.pg-coa__status--independent {
	color: var( --wp--preset--color--success );
}

.pg-coa__status--coming_soon {
	color: var( --wp--preset--color--slate );
}

.pg-coa__meta,
.pg-library__meta {
	color: var( --wp--preset--color--slate );
	font-size: var( --wp--preset--font-size--small );
	margin-top: 0.25rem;
}

.pg-coa .wp-element-button {
	margin-top: var( --wp--preset--spacing--30 );
}

/* Fact list, shared by the independent and supplier panels. */
.pg-coa__facts {
	display: grid;
	gap: 0.35rem;
	margin: 0.6rem 0 0;
}

.pg-coa__fact {
	display: flex;
	gap: 0.75rem;
	justify-content: space-between;
	font-size: var( --wp--preset--font-size--small );
}

.pg-coa__fact dt {
	color: var( --wp--preset--color--slate );
	margin: 0;
}

.pg-coa__fact dd {
	color: var( --wp--preset--color--white );
	font-weight: 600;
	margin: 0;
	text-align: right;
}

.pg-coa__source {
	color: var( --wp--preset--color--gold );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	margin: 0.4rem 0 0;
}

/* Supplier Test Summary: a gold pill that discloses supplier-provided figures.
   The <summary> is the "View Test Summary" control — keyboard operable natively. */
.pg-coa__summary {
	margin-top: var( --wp--preset--spacing--30 );
}

.pg-coa__toggle {
	align-items: center;
	background: var( --pg-gold-metal );
	border-radius: var( --wp--custom--radius--pill );
	color: var( --wp--preset--color--navy );
	cursor: pointer;
	display: inline-flex;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 700;
	list-style: none;
	min-height: 40px;
	padding: 0.45rem 1.1rem;
}

.pg-coa__toggle::-webkit-details-marker {
	display: none;
}

.pg-coa__toggle:focus-visible {
	outline: 2px solid var( --wp--preset--color--gold );
	outline-offset: 2px;
}

.pg-coa__panel {
	background: rgba( 8, 13, 24, 0.35 );
	border: 1px solid rgba( 212, 175, 55, 0.3 );
	border-radius: var( --wp--custom--radius--md );
	margin-top: 0.8rem;
	padding: var( --wp--preset--spacing--40 );
}

.pg-coa__panel-title {
	color: var( --wp--preset--color--white );
	font-weight: 700;
	margin: 0;
}

.pg-coa__note {
	color: var( --wp--preset--color--slate );
	font-size: var( --wp--preset--font-size--small );
	margin: 0.6rem 0 0;
}

/* Coming-soon is a state, not a control: it must not look or behave like a link. */
.pg-coa__pending {
	cursor: default;
	display: inline-block;
	margin-top: var( --wp--preset--spacing--30 );
	opacity: 0.75;
}

/*
 * COA status badge on product cards (Shop / archive). Non-clickable status pills:
 * the product page carries the actual View COA / View Test Summary controls, so a
 * card never produces a dead or ambiguous link. Gold = supplier, green =
 * independent, slate = coming soon / varies.
 */
.pg-product-card__coa {
	margin-top: 0.4rem;
}

.pg-coa-badge {
	border-radius: var( --wp--custom--radius--pill );
	cursor: default;
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.3;
	padding: 0.28rem 0.7rem;
	text-decoration: none;
}

.pg-coa-badge--supplier {
	background: var( --pg-gold-metal );
	color: var( --wp--preset--color--navy );
}

.pg-coa-badge--independent {
	background: var( --wp--preset--color--success );
	color: var( --wp--preset--color--navy );
}

.pg-coa-badge--coming_soon,
.pg-coa-badge--varies {
	background: rgba( 166, 177, 194, 0.18 );
	color: var( --wp--preset--color--slate );
}

/*
 * Strength / volume switcher on product pages. Accessible links styled as
 * buttons: the current product is a filled gold button, siblings are outlined.
 * Wraps cleanly on small screens.
 */
.pg-switch {
	margin: var( --wp--preset--spacing--30 ) 0 var( --wp--preset--spacing--40 );
}

.pg-switch__label {
	color: var( --wp--preset--color--slate );
	display: block;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	letter-spacing: 0.05em;
	margin-bottom: 0.5rem;
	text-transform: uppercase;
}

.pg-switch__opts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.pg-switch__opt {
	border: 1px solid rgba( 212, 175, 55, 0.55 );
	border-radius: var( --wp--custom--radius--md );
	color: var( --wp--preset--color--white );
	display: inline-block;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 700;
	min-width: 58px;
	padding: 0.55rem 1.05rem;
	text-align: center;
	text-decoration: none;
	transition: background var( --pg-duration-base ) var( --pg-easing );
}

a.pg-switch__opt:hover,
a.pg-switch__opt:focus-visible {
	background: rgba( 212, 175, 55, 0.14 );
}

.pg-switch__opt.is-current {
	background: var( --wp--preset--color--gold );
	border-color: var( --wp--preset--color--gold );
	color: var( --wp--preset--color--navy );
}