/*
 * Winexel — design tokens & global presentation rules
 *
 * Locked-down spec from designer Iuliia (2026-04):
 *   - Font: Onest (Google Fonts) for headings, body, buttons.
 *   - Body color: #2D2D2D on background #FAF7F5.
 *   - Heading colour: burgundy #4B1C3E (overridden inside cover blocks).
 *   - Headings: H1 48 / H2 32 / H3 24 / body 18 / button 18 (desktop px).
 *   - Buttons: 200x60 minimum, radius 5px, weight 600, line-height 120%.
 *   - Three button states: primary (#4B1C3E bg / white text),
 *                          hover/active (#3A1530 bg / white text),
 *                          secondary (transparent bg / #4B1C3E text / 2px border).
 *
 * Loaded via wp_enqueue_style() from functions.php (handle: winexel-design-tokens).
 */

:root {
	--winexel-font-family: 'Onest', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	--winexel-text-color: #2D2D2D;
	--winexel-bg-color: #FAF7F5;
	--winexel-burgundy: #4B1C3E;
	--winexel-burgundy-hover: #3A1530;
}

/* ---------- Typography: Onest everywhere ---------- */
html,
body,
button,
input,
select,
textarea,
.entry-content,
.ct-button,
.wp-block-button__link,
.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	font-family: var(--winexel-font-family) !important;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.widget-title,
.ct-widget-title {
	font-family: var(--winexel-font-family) !important;
	font-weight: 700;
}

/* Default heading colour: burgundy. Cover-block headings opt out via
   their own inline colour (white/cream), and the .has-*-color preset
   classes override too. */
h1, h2, h3, h4, h5, h6 {
	color: var(--winexel-burgundy);
}

/* Desktop heading sizes per style sheet. */
h1 { font-size: 48px; line-height: 1.2; }
h2 { font-size: 32px; line-height: 1.25; }
h3 { font-size: 24px; line-height: 1.3; }

/* Body text: 18px on desktop, off-black #2D2D2D. */
body {
	font-size: 18px;
	line-height: 1.6;
	color: var(--winexel-text-color);
}

/* Make sure paragraphs and list items inherit the off-black color
   instead of falling back to Blocksy's default --theme-palette-color-3. */
p, li, dd, dt, blockquote, address, figcaption {
	color: var(--winexel-text-color);
}

/* ---------- Brand wordmark (header text logo) ----------
   Used by the Blocksy header "text" item. Replaces inline
   font-family/size/colour styles in theme_mods.header_text. */
.winexel-wordmark {
	margin: 0;
	text-align: center;
	font-family: var(--winexel-font-family);
	font-weight: 700;
	font-size: 25px;
	color: var(--winexel-burgundy);
}

/* ---------- Button system: three states ---------- */
/* Targets: Blocksy .ct-button, Gutenberg .wp-block-button__link,
   WooCommerce .button / button.button / input.button, and the Blocksy
   header CTA wrapper. We do NOT target .ct-button[data-icon] icon-only
   buttons on the header (account/cart/search) — those are utility icons.
*/
.ct-button:not([data-icon]),
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
[data-id="button"] .ct-header-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 200px;
	min-height: 60px;
	padding: 0 24px;
	border-radius: 5px;
	font-family: var(--winexel-font-family) !important;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border: none;
	background-color: var(--winexel-burgundy);
	color: #FFFFFF;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ct-button:not([data-icon]):hover,
.ct-button:not([data-icon]):focus,
.ct-button:not([data-icon]).is-active,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
[data-id="button"] .ct-header-cta:hover,
[data-id="button"] .ct-header-cta:focus {
	background-color: var(--winexel-burgundy-hover);
	color: #FFFFFF;
	border-color: var(--winexel-burgundy-hover);
}

/* Secondary (outline) variant.
   Available via:
     - Blocksy: <a class="ct-button is-secondary">
     - Gutenberg: button block with "is-style-outline" class
     - Generic: any element with class "btn-secondary"
*/
.ct-button.is-secondary,
.wp-block-button.is-style-outline .wp-block-button__link,
.btn-secondary {
	background-color: transparent;
	color: var(--winexel-burgundy);
	border: 2px solid var(--winexel-burgundy);
}

.ct-button.is-secondary:hover,
.ct-button.is-secondary:focus,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus,
.btn-secondary:hover,
.btn-secondary:focus {
	background-color: var(--winexel-burgundy);
	color: #FFFFFF;
	border-color: var(--winexel-burgundy);
}

/* Mobile: relax min-width so buttons don't blow out narrow columns. */
@media (max-width: 480px) {
	.ct-button:not([data-icon]),
	.wp-block-button__link,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button,
	[data-id="button"] .ct-header-cta {
		min-width: 0;
		width: 100%;
	}
}

/* ---------- Form inputs: aligned with the button system ----------
   Spec (derived from button system, brief 2026-04-27):
     - 2px solid #4B1C3E border (matches Secondary button outline)
     - 5px radius (matches buttons)
     - 60px height for single-line inputs (matches button height)
     - Onest 18px / 400 (lighter than the 600-weight buttons)
     - #FFFFFF background (chosen over cream — higher contrast on the
       #FAF7F5 page bg, matches all the field-on-card layouts in the brief)
     - Padding: 0 18px horizontal — visually matches the 24px horizontal
       padding inside buttons but feels less cramped for typed input
     - Focus: border darkens to #3A1530 plus a soft 3px ring at 18% alpha
       so keyboard users get a clear focus state without the harsh
       browser default outline.
   Excluded per brief: checkbox, radio, submit/button, header search icon. */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
	font-family: var(--winexel-font-family);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--winexel-text-color);
	background-color: #FFFFFF;
	border: 2px solid var(--winexel-burgundy);
	border-radius: 5px;
	padding: 0 18px;
	box-shadow: none;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	box-sizing: border-box;
	max-width: 100%;
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
select {
	height: 60px;
}

textarea {
	min-height: 120px;
	padding: 14px 18px;
	line-height: 1.5;
	resize: vertical;
}

/* Native chevron + room for it on selects. */
select {
	padding-right: 40px;
	background-image: linear-gradient(45deg, transparent 50%, var(--winexel-burgundy) 50%),
	                  linear-gradient(135deg, var(--winexel-burgundy) 50%, transparent 50%);
	background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	-webkit-appearance: none;
	appearance: none;
}

/* Blocksy search form — feed brand vars into Blocksy's input geometry.
   Blocksy's .ct-search-form positions the inside-icon submit button as a
   visual extension of the input via shared CSS vars (height, radius,
   border colour). Set those vars on .ct-search-form so the input AND
   submit button both pick up our brand: 60px tall, 5px radius, burgundy
   border, white background. This keeps Blocksy's button-positioning
   intact while honouring the style sheet. */
.ct-search-form {
	--theme-form-field-height: 60px;
	--theme-form-field-border-radius: 5px;
	--theme-form-field-border-width: 2px;
	--theme-form-field-border-initial-color: var(--winexel-burgundy);
	--theme-form-field-border-focus-color: var(--winexel-burgundy-hover);
	--theme-form-field-background-initial-color: #FFFFFF;
	--theme-form-field-background-focus-color: #FFFFFF;
}

/* The inside-icon submit button shares the form-field vars but needs the
   burgundy fill (matching primary buttons) so the icon reads on the
   right edge. */
.ct-search-form[data-form-controls="inside"] .wp-element-button {
	--theme-button-background-initial-color: var(--winexel-burgundy);
	--theme-button-background-hover-color: var(--winexel-burgundy-hover);
	--theme-button-text-initial-color: #FFFFFF;
	--theme-button-text-hover-color: #FFFFFF;
	border-color: var(--winexel-burgundy);
}

/* 404 / no-results page: constrain the body search form so it doesn't
   span the full content width, and centre it under the heading.
   Blocksy already has a `.ct-no-results .ct-search-form { max-width: 400px }`
   rule, but stack ours with !important to win against any plugin or
   customizer rule that might fight it. */
.ct-no-results .ct-search-form,
.error404 .entry-content .ct-search-form,
.search-no-results .entry-content .ct-search-form {
	max-width: 560px !important;
	margin-inline: auto !important;
	width: 100%;
}

/* Placeholder: lighter grey, ~60% of text colour. */
input::placeholder,
textarea::placeholder {
	color: rgba(45, 45, 45, 0.55);
	opacity: 1;
}

/* Focus state: darker border + subtle ring (no thick browser outline). */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
	border-color: var(--winexel-burgundy-hover);
	box-shadow: 0 0 0 3px rgba(75, 28, 62, 0.18);
	outline: none;
}

/* WooCommerce / Contact Form 7 / WPForms inputs inherit via the generic
   selectors above. The legacy WC checkout uses .input-text inside .form-row,
   which is just an <input type="text">, so it picks up our base rules.
   No plugin-specific overrides needed unless visual QA flags an outlier. */

/* ---------- Gutenberg editor palette utility classes ----------
   Mirrors add_theme_support('editor-color-palette',...) in functions.php.
   When an author uses the block colour picker, WP emits these class names
   on the rendered HTML — defining them here keeps frontend output painted
   without relying on WP's auto-generated .has-*-color rules (which only
   exist for some core blocks). */
.has-burgundy-color        { color: var(--winexel-burgundy) !important; }
.has-burgundy-dark-color   { color: var(--winexel-burgundy-hover) !important; }
.has-cream-color           { color: var(--winexel-bg-color) !important; }
.has-off-black-color       { color: var(--winexel-text-color) !important; }

.has-burgundy-background-color        { background-color: var(--winexel-burgundy) !important; }
.has-burgundy-dark-background-color   { background-color: var(--winexel-burgundy-hover) !important; }
.has-cream-background-color           { background-color: var(--winexel-bg-color) !important; }
.has-off-black-background-color       { background-color: var(--winexel-text-color) !important; }


/* ============================================================
   LearnDash overrides
   ============================================================
   The learndash_30_custom_colors filter (functions.php) feeds our
   palette into LD's runtime-generated CSS — so all dynamic colour
   rules already use #4B1C3E / #3A1530 / #FAF7F5. The rules below
   handle what the filter cannot reach: typography, border-radius,
   button geometry, and a few legacy class hardcodes.
*/

/* Typography — apply Onest across all LD-rendered surfaces. */
.learndash-wrapper,
.learndash-wrapper * {
	font-family: var(--winexel-font-family);
}

/* Buttons — match the global three-state button system.
   LD's "Mark Complete", "Next Lesson", "Take this Course" all use
   .ld-button or .btn-blue. The site-wide rule already targets
   .ct-button, .wp-block-button__link, etc.; we extend it here. */
.learndash-wrapper .ld-button:not(.ld-button-transparent):not([disabled]),
.learndash-wrapper .btn-blue,
.learndash-wrapper input[type="submit"].ld-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 200px;
	min-height: 60px;
	padding: 0 24px;
	border-radius: 5px;
	font-family: var(--winexel-font-family);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border: none;
	background-color: var(--winexel-burgundy);
	color: #FFFFFF;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.learndash-wrapper .ld-button:not(.ld-button-transparent):not([disabled]):hover,
.learndash-wrapper .ld-button:not(.ld-button-transparent):not([disabled]):focus,
.learndash-wrapper .btn-blue:hover,
.learndash-wrapper .btn-blue:focus {
	background-color: var(--winexel-burgundy-hover);
	color: #FFFFFF;
}

/* "Alt" / secondary LD buttons (e.g. "Continue" on completion screen,
   transparent variants) — render as outline button to mirror our
   secondary spec. */
.learndash-wrapper .ld-button.ld-button-alternate,
.learndash-wrapper .ld-button.ld-button-transparent {
	background-color: transparent;
	color: var(--winexel-burgundy);
	border: 2px solid var(--winexel-burgundy);
}

.learndash-wrapper .ld-button.ld-button-alternate:hover,
.learndash-wrapper .ld-button.ld-button-transparent:hover {
	background-color: var(--winexel-burgundy);
	color: #FFFFFF;
}

/* Status icons — completed checkmarks, in-progress markers.
   LD draws them as pseudo-elements with their own colour vars; the
   filter handles most, but a few static SVGs need reinforcement. */
.learndash-wrapper .ld-status-complete,
.learndash-wrapper .ld-status-icon.ld-status-complete {
	background-color: var(--winexel-burgundy);
	color: #FFFFFF;
}

/* Progress bar — burgundy fill on a cream-tinted track. */
.learndash-wrapper .ld-progress-bar {
	background-color: rgba(75, 28, 62, 0.12); /* burgundy at low opacity */
	border-radius: 5px;
	overflow: hidden;
}
.learndash-wrapper .ld-progress-bar-percentage,
.learndash-wrapper .ld-progress-bar .ld-progress-bar-fill {
	background-color: var(--winexel-burgundy);
}

/* Tabs — when LD shows multiple tabs (Materials, Quizzes, etc.),
   the active tab's underline picks up our burgundy. */
.learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab.ld-active {
	border-bottom-color: var(--winexel-burgundy);
	color: var(--winexel-burgundy);
}

/* Lesson list rows — sane spacing + hover state. */
.learndash-wrapper .ld-item-list .ld-item-list-item:hover {
	border-color: var(--winexel-burgundy);
}

/* Course content "back" link + breadcrumb — Onest, burgundy. */
.learndash-wrapper .ld-breadcrumbs,
.learndash-wrapper .ld-breadcrumbs a {
	font-family: var(--winexel-font-family);
	font-size: 14px;
	color: var(--winexel-text-color);
}
.learndash-wrapper .ld-breadcrumbs a:hover {
	color: var(--winexel-burgundy);
}

/* Quiz UI — same rules apply when quiz buttons render. */
.wpProQuiz_button,
.wpProQuiz_button2 {
	font-family: var(--winexel-font-family) !important;
	font-weight: 600 !important;
	font-size: 18px !important;
	min-height: 60px;
	padding: 0 24px;
	border-radius: 5px !important;
	background-color: var(--winexel-burgundy) !important;
	color: #FFFFFF !important;
	border: none !important;
}
.wpProQuiz_button:hover,
.wpProQuiz_button2:hover {
	background-color: var(--winexel-burgundy-hover) !important;
}