/* =========================================================
   Stractive Journey — theme styles
   Colors, fonts and spacing are defined in theme.json and can be changed in
   Appearance → Editor → Styles. This file adds interaction states, button
   variations, cards and small details that theme.json cannot express.
   ========================================================= */

:root {
	--sj-ease: cubic-bezier(.2, .7, .3, 1);
	--sj-speed: .18s;
	--sj-shadow-hover: 0 10px 24px rgba(80, 7, 17, .18);
	--sj-focus: 3px solid var(--wp--preset--color--gold);
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; }

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

/* ---------- Buttons ---------- */
.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	min-height: 48px;
	text-decoration: none;
	cursor: pointer;
	transition:
		transform var(--sj-speed) var(--sj-ease),
		box-shadow var(--sj-speed) var(--sj-ease),
		background-color var(--sj-speed) ease,
		border-color var(--sj-speed) ease,
		color var(--sj-speed) ease;
	will-change: transform;
}
.wp-element-button:hover,
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: var(--sj-shadow-hover); }
.wp-element-button:active,
.wp-block-button__link:active { transform: translateY(0) scale(.98); box-shadow: none; transition-duration: .06s; }
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible { outline: var(--sj-focus); outline-offset: 3px; border-radius: 999px; }

/* Gold */
.wp-block-button.is-style-sj-gold .wp-block-button__link {
	background-color: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--merlot);
}
.wp-block-button.is-style-sj-gold .wp-block-button__link:hover { background-color: #ffd884; border-color: #ffd884; color: var(--wp--preset--color--merlot); }

/* Outline */
.wp-block-button.is-style-sj-outline .wp-block-button__link {
	background-color: transparent;
	border-color: var(--wp--preset--color--merlot);
	color: var(--wp--preset--color--merlot);
}
.wp-block-button.is-style-sj-outline .wp-block-button__link:hover { background-color: var(--wp--preset--color--merlot); color: var(--wp--preset--color--white); }

/* Light (for dark sections) */
.wp-block-button.is-style-sj-light .wp-block-button__link {
	background-color: transparent;
	border-color: var(--wp--preset--color--beige);
	color: var(--wp--preset--color--beige);
}
.wp-block-button.is-style-sj-light .wp-block-button__link:hover { background-color: var(--wp--preset--color--beige); color: var(--wp--preset--color--merlot); }

/* Text link with arrow */
.wp-block-button.is-style-sj-link .wp-block-button__link {
	background: transparent;
	border-color: transparent;
	color: var(--wp--preset--color--ruby);
	padding-left: 0;
	padding-right: 0;
	box-shadow: none;
}
.wp-block-button.is-style-sj-link .wp-block-button__link::after { content: "→"; transition: transform var(--sj-speed) var(--sj-ease); }
.wp-block-button.is-style-sj-link .wp-block-button__link:hover { transform: none; box-shadow: none; color: var(--wp--preset--color--merlot); }
.wp-block-button.is-style-sj-link .wp-block-button__link:hover::after { transform: translateX(4px); }

/* Loading state (added by theme.js when a button opens an action link) */
.wp-block-button__link.is-loading,
.sj-btn.is-loading { pointer-events: none; opacity: .85; }
.wp-block-button__link.is-loading::before {
	content: "";
	width: 1em;
	height: 1em;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-right-color: transparent;
	animation: sj-spin .7s linear infinite;
}
@keyframes sj-spin { to { transform: rotate(360deg); } }

/* ---------- Text styles ---------- */
.is-style-sj-eyebrow {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: .8rem !important;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ruby);
	margin-bottom: 0 !important;
}
.has-merlot-background-color .is-style-sj-eyebrow,
.has-merlot-dark-background-color .is-style-sj-eyebrow,
.has-ruby-background-color .is-style-sj-eyebrow { color: var(--wp--preset--color--gold); }

.is-style-sj-lead {
	font-family: var(--wp--preset--font-family--rosario);
	font-style: italic;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	color: #7a2e38;
}
.has-merlot-background-color .is-style-sj-lead,
.has-merlot-dark-background-color .is-style-sj-lead { color: var(--wp--preset--color--pink); }

/* Dark sections: readable defaults */
.has-merlot-background-color,
.has-merlot-dark-background-color { color: var(--wp--preset--color--on-dark); }
/* Headings on dark backgrounds (higher specificity than the global heading color) */
.has-merlot-background-color :is(h1, h2, h3, h4, h5, h6),
.has-merlot-dark-background-color :is(h1, h2, h3, h4, h5, h6),
.has-ruby-background-color :is(h1, h2, h3, h4, h5, h6),
:is(h1, h2, h3, h4, h5, h6).has-merlot-background-color { color: var(--wp--preset--color--white); }
.has-merlot-background-color a:not(.wp-element-button):not(.sj-btn),
.has-merlot-dark-background-color a:not(.wp-element-button):not(.sj-btn),
.has-ruby-background-color a:not(.wp-element-button):not(.sj-btn) { color: var(--wp--preset--color--gold); }
.has-ruby-background-color { color: #fde3ee; }

/* ---------- Cards ---------- */
.is-style-sj-card,
.is-style-sj-card-lift {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 24px;
	padding: clamp(1.25rem, 3vw, 2rem);
}
.is-style-sj-card-lift { transition: transform .22s var(--sj-ease), box-shadow .22s var(--sj-ease); }
.is-style-sj-card-lift:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(80, 7, 17, .10); }
.is-style-sj-card.has-background,
.is-style-sj-card-lift.has-background { border-color: transparent; }

/* Gold check list */
.is-style-sj-check { list-style: none; padding-left: 0; }
.is-style-sj-check li { position: relative; padding-left: 2rem; margin-bottom: .6rem; }
.is-style-sj-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .2em;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	background: var(--wp--preset--color--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3 3 7-7' stroke='%23500711' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / 75% no-repeat;
}

/* Number badges used in the process steps */
.sj-step-number {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--merlot);
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 700;
	margin: 0 !important;
}

/* Brand wave decoration */
.sj-wave img { width: min(220px, 50vw); }

/* Price display */
.sj-price-big {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 700;
	font-size: clamp(2.2rem, 5vw, 3.2rem);
	line-height: 1;
	color: var(--wp--preset--color--merlot);
	margin: 0 !important;
}
.has-merlot-background-color .sj-price-big { color: var(--wp--preset--color--gold); }

/* FAQ (details block) */
.wp-block-details { transition: box-shadow var(--sj-speed) ease; }
.wp-block-details summary {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	color: var(--wp--preset--color--merlot);
	cursor: pointer;
	min-height: 32px;
	list-style-position: outside;
}
.wp-block-details[open] { box-shadow: 0 8px 22px rgba(80, 7, 17, .06); }
.wp-block-details summary + * { margin-top: .75rem; }

/* Tables */
.wp-block-table { overflow-x: auto; }
.wp-block-table table { background: var(--wp--preset--color--white); border-radius: 18px; overflow: hidden; border-collapse: collapse; }
.wp-block-table th { font-family: var(--wp--preset--font-family--poppins); color: var(--wp--preset--color--ruby); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }
.wp-block-table td, .wp-block-table th { border-color: var(--wp--preset--color--line); padding: .85rem 1rem; }

/* ---------- Header ---------- */
.sj-header { position: sticky; top: 0; z-index: 50; }
.admin-bar .sj-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .sj-header { top: 0; } }
.sj-header .wp-block-navigation a { text-decoration: none; }
.sj-header .wp-block-navigation-item__content { padding: .5rem .1rem; border-bottom: 2px solid transparent; transition: border-color var(--sj-speed) ease, color var(--sj-speed) ease; }
.sj-header .wp-block-navigation-item__content:hover,
.sj-header .current-menu-item > .wp-block-navigation-item__content { border-bottom-color: var(--wp--preset--color--ruby); color: var(--wp--preset--color--ruby); }
.sj-header .wp-block-buttons .wp-block-button__link { min-height: 44px; padding: .55em 1.2em; font-size: .92rem; }
.sj-header .wp-block-site-logo img { max-height: 48px; width: auto; }
.wp-block-navigation__responsive-container.is-menu-open { background-color: var(--wp--preset--color--beige) !important; padding: 2rem 1.5rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1rem; font-size: 1.15rem; }

/* Notice row under the header (printed by [sj_avisos]) */
.sj-notice-row:empty { display: none; }
.sj-notice-row .sj-notice { max-width: 1200px; margin: 1rem auto 0; }

/* ---------- Footer ---------- */
.sj-footer a { text-decoration: none; }
.sj-footer a:hover { text-decoration: underline; }
.sj-footer .wp-block-navigation__container { flex-direction: column; align-items: flex-start; gap: .5rem; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
	.wp-element-button:hover,
	.wp-block-button__link:hover,
	.is-style-sj-card-lift:hover { transform: none; }
}
.sj-footer-list { list-style: none; }
.wp-site-blocks > .sj-notice { max-width: 1200px; margin: 1rem auto 0; }

/* Header on small screens */
.sj-header .wp-block-button__link { white-space: nowrap; }
.sj-mobile-only { display: none !important; }
@media (max-width: 781px) {
	.wp-block-navigation__responsive-container.is-menu-open .sj-mobile-only { display: block !important; }
	.sj-header .sj-header-actions .is-style-sj-outline { display: none; }
	.sj-header .wp-block-site-logo img { max-width: 170px; height: auto; }
	.sj-header .wp-block-buttons .wp-block-button__link { padding: .5em 1em; font-size: .88rem; }
}

/* WooCommerce adds an account icon and a mini-cart icon next to the menu.
   On phones the account icon is hidden (the menu already has "Entrar / Mi panel") so the header fits. */
.sj-header .wc-block-mini-cart__button,
.sj-header .wp-block-woocommerce-customer-account a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--wp--preset--color--merlot); }
@media (max-width: 781px) {
	.sj-header .wp-block-woocommerce-customer-account { display: none; }
	.sj-header .wp-block-site-logo img { max-width: 140px; }
	.sj-header .alignwide > .wp-block-group { gap: .35rem; }
}
@media (max-width: 400px) {
	.sj-header .wp-block-site-logo img { max-width: 118px; }
	.sj-header .wp-block-buttons .wp-block-button__link { padding: .5em .85em; }
}

/* WooCommerce product lists: the program covers are horizontal (16:9), so show them whole.
   WooCommerce writes aspect-ratio 1/1 inline on the image, hence !important. */
.wc-block-components-product-image img { aspect-ratio: 16 / 9 !important; object-fit: cover; border-radius: 12px; }
.sj-loop-choose { text-decoration: none; }