/*
 * Rynue Memberships — Brand Variation (Rynue Atlantic/Carta)
 *
 * Decoration layer loaded on top of base.css. Contains:
 *  - Hover rotate effects on cards (human, hand-placed feel)
 *  - Box-shadow depth
 *  - CTA button rotate on hover
 *  - Paper texture ::before overlay
 *  - Checkout page specific decoration
 *  - Level card featured accent
 *  - Transition refinements
 *
 * Disabling this file (via Design Settings → "Disable Rynue frontend CSS")
 * leaves a clean, unstyled structural layout for themes to style themselves.
 *
 * @since 1.0.0
 */

/* ─── Global page background ─────────────────────────────────────────────────── */
.rynue-page {
	position: relative;
}

/* ─── Cards — hover lift + micro-rotation ────────────────────────────────────── */
.rynue-card,
.rynue-level-card,
.rynue-checkout__section,
.rynue-account__section {
	box-shadow: var(--rynue--shadow--sm);
	transition:
		box-shadow var(--rynue--transition--fast),
		transform  var(--rynue--transition--fast),
		border-color var(--rynue--transition--fast);
}

.rynue-level-card:hover {
	box-shadow: var(--rynue--shadow--md);
	transform: translateY(-2px) rotate(-0.5deg);
	border-color: var(--rynue--color--accent);
}

.rynue-level-card.is-featured {
	box-shadow: var(--rynue--shadow--md);
}

.rynue-level-card.is-featured:hover {
	transform: translateY(-3px) rotate(-0.75deg);
	border-color: var(--rynue--color--cta);
}

/* ─── CTA button — warmth + micro-tilt on hover ──────────────────────────────── */
.rynue-btn--primary:hover,
.rynue-btn--cta:hover {
	transform: translateY(-1px) rotate(-0.5deg);
	box-shadow: 0 4px 16px rgba(212, 136, 92, 0.35);
}

/* ─── Checkout submit — prominent warmth CTA ──────────────────────────────────── */
.rynue-checkout__submit {
	font-size: 1.05rem;
	letter-spacing: 0.02em;
}

.rynue-checkout__submit:hover {
	transform: translateY(-1px) rotate(-1deg);
}

/* ─── Checkout section — subtle left accent border ───────────────────────────── */
.rynue-checkout__section {
	border-left: 3px solid var(--rynue--color--border);
	transition:
		border-left-color var(--rynue--transition--fast),
		box-shadow var(--rynue--transition--fast);
}

.rynue-checkout__section:focus-within {
	border-left-color: var(--rynue--color--accent);
	box-shadow: var(--rynue--shadow--md);
}

/* ─── Featured level badge ────────────────────────────────────────────────────── */
.rynue-level-card.is-featured::before {
	content: attr(data-featured-label);
	display: block;
	background: var(--rynue--color--cta);
	color: var(--rynue--color--surface);
	font-family: var(--rynue--font--ui);
	font-size: var(--rynue--font-size--xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 4px 12px;
	border-radius: var(--rynue--border--radius--sm) var(--rynue--border--radius--sm) 0 0;
	margin: calc(-1 * var(--rynue--space--xl)) calc(-1 * var(--rynue--space--xl)) var(--rynue--space--md);
	text-align: center;
}

/* ─── Invoice header brand accent ────────────────────────────────────────────── */
.rynue-invoice__title {
	color: var(--rynue--color--accent);
}

/* ─── Focus ring refinement ──────────────────────────────────────────────────── */
.rynue-input:focus,
.rynue-select:focus,
.rynue-textarea:focus {
	border-color: var(--rynue--color--accent);
}

/* ─── Paper texture overlay ──────────────────────────────────────────────────── */

/*
 * SVG feTurbulence noise injected via PHP (wp_head hook in AssetsServiceProvider).
 * The SVG filter element is rendered once as a hidden inline element;
 * the ::before pseudo applies the filter as an overlay.
 *
 * If the inline SVG is not present (e.g. texture disabled in Design Settings),
 * this ::before is harmless (filter: url(#rynue-noise) becomes a no-op).
 */
.rynue-page::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: var(--rynue--texture--opacity, 0.025);
	mix-blend-mode: multiply;
	filter: url(#rynue-noise);
	background: var(--rynue--color--base);
}

/* ─── Account section titles — decorative underline ─────────────────────────── */
.rynue-account__section-title {
	position: relative;
}

.rynue-account__section-title::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 2px;
	background: var(--rynue--color--cta);
	border-radius: var(--rynue--border--radius--pill);
	margin-top: var(--rynue--space--sm);
}

/* ─── Membership restricted message ─────────────────────────────────────────── */
.rynue-restricted-message {
	background: var(--rynue--color--surface);
	border: 2px dashed var(--rynue--color--border);
	border-radius: var(--rynue--border--radius--lg);
	padding: var(--rynue--space--xl);
	text-align: center;
	color: var(--rynue--color--text-secondary);
}

.rynue-restricted-message .rynue-btn {
	margin-top: var(--rynue--space--md);
}

/* ─── Page — confirmation / cancel / login ────────────────────────────────────── */
.rynue-page--confirmation .rynue-card,
.rynue-page--cancel      .rynue-card,
.rynue-page--login       .rynue-card {
	max-width: 520px;
	margin: 2rem auto;
}

/* ─── Page — account / billing / checkout / invoice / levels ─────────────── */

/* Account: accent side-bar indicator on the active nav link */
.rynue-page--account .rynue-account__nav-link--active {
	position: relative;
}

.rynue-page--account .rynue-account__nav-link--active::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 60%;
	background: var(--rynue--color--cta);
	border-radius: var(--rynue--border--radius--pill);
}

/* Billing: constrain card to readable width */
.rynue-page--billing .rynue-card {
	max-width: 640px;
	margin-inline: auto;
}

/* Checkout: smooth section border transitions */
.rynue-page--checkout .rynue-checkout__section {
	transition:
		box-shadow var(--rynue--transition--fast),
		border-color var(--rynue--transition--fast);
}

/* Invoice: accent top-border for a branded printable document feel */
.rynue-page--invoice .rynue-card {
	max-width: 720px;
	margin-inline: auto;
	border-top: 3px solid var(--rynue--color--accent);
}

/* Levels: featured card gets a natural resting lift */
.rynue-page--levels .rynue-level-card.is-featured {
	transform: translateY(-4px);
}

/* ─── Reduced-motion: disable decorative transforms ──────────────────────── */
@media (prefers-reduced-motion: reduce) {

	.rynue-level-card,
	.rynue-level-card.is-featured,
	.rynue-level-card--highlighted,
	.rynue-level-card:hover,
	.rynue-level-card.is-featured:hover,
	.rynue-btn--primary:hover,
	.rynue-btn--cta:hover,
	.rynue-checkout__submit:hover {
		transition: none;
		transform: none;
	}
}