/*
 * Militra child theme — global base.
 * All brand values come from var(--boltpress-*) (compiled from
 * boltpress_design_tokens.json by the parent). Fallbacks mirror the tokens
 * so the page still renders if the compiled file is momentarily absent.
 */

:root {
	--mil-maxw: 1280px;
	--mil-measure: 720px;
	--mil-space-section: clamp(40px, 8vw, 96px);
	--mil-ease: 0.18s ease;
}

*, *::before, *::after { box-sizing: border-box; }

body {
	font-family: var(--boltpress-typography-font-family-body, 'DM Sans', system-ui, sans-serif);
	font-size: var(--boltpress-typography-font-size-base, 16px);
	line-height: var(--boltpress-typography-line-height-relaxed, 1.65);
	color: var(--boltpress-colors-text, #334155);
	background: var(--boltpress-colors-neutral-0, #ffffff);
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--boltpress-typography-font-family-heading, 'DM Sans', system-ui, sans-serif);
	color: var(--boltpress-colors-headings-general, #0F172A);
	font-weight: var(--boltpress-typography-font-weight-bold, 700);
	letter-spacing: -0.02em;
	line-height: var(--boltpress-typography-line-height-tight, 1.1);
	margin: 0 0 0.5em;
}

/* Intentional: h1/h2 use fluid clamp() and are CSS-controlled here, NOT bound
   to the font-size tokens — edit these values in this file, not in the JSON. */
h1 { font-size: clamp(32px, 4.5vw, 56px); }
h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; }
h3 { font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; }
h4 { font-size: 18px; font-weight: var(--boltpress-typography-font-weight-semibold, 600); }

p { margin: 0 0 1em; }

a {
	color: var(--boltpress-colors-links-initial, #D14318);
	text-decoration: none;
	transition: color var(--mil-ease);
}
a:hover { color: var(--boltpress-colors-links-hover, #E8501E); }

::selection { background: var(--boltpress-colors-orange-100, #FCE6D9); color: var(--boltpress-colors-headings-general, #0F172A); }

/* Layout helpers */
.container {
	width: 100%;
	max-width: var(--mil-maxw);
	margin-inline: auto;
	padding-inline: 24px;
}
@media (min-width: 768px) { .container { padding-inline: 40px; } }

.entry-content {
	max-width: var(--mil-maxw);
	margin-inline: auto;
	padding-inline: 24px;
}
/* Cap ONLY top-level flow text to a readable measure, via :where() (0
   specificity, trivially overridable). Deliberately NOT `> *`: WooCommerce and
   CertFlow render wrapper divs as direct children of .entry-content and must
   keep full width. */
.entry-content > :where(p, h2, h3, h4, ul, ol, blockquote) {
	max-width: var(--mil-measure);
	margin-inline: auto;
}
.entry-content > .alignfull,
.entry-content > .alignwide { max-width: none; }

/* Brand utilities */
.eyebrow {
	display: inline-block;
	font-size: 11px;
	font-weight: var(--boltpress-typography-font-weight-extrabold, 800);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--boltpress-colors-primary, #E8501E);
	margin: 0 0 0.75em;
}

.lead {
	font-size: var(--boltpress-typography-font-size-md, 18px);
	line-height: var(--boltpress-typography-line-height-relaxed, 1.65);
	color: var(--boltpress-colors-neutral-600, #475569);
}

/* Section heading + lead — global utility used by homepage sections, will be
   reused by blog / WC / CertFlow surfaces. NOT scoped under .militra-home
   because they're page-agnostic typography helpers. The design system defined
   these at site.css:35–48 which is outside the port range; rules added by hand
   so they survive across phases. */
.section-h2 {
	font-size: clamp(26px, 3vw, 36px);
	font-weight: var(--boltpress-typography-font-weight-bold, 700);
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--boltpress-colors-headings-general, #0F172A);
	margin: 0;
}
.section-h2 em { font-style: normal; color: var(--boltpress-colors-primary, #E8501E); }
.section-lead {
	font-size: var(--boltpress-typography-font-size-base, 16px);
	color: var(--boltpress-colors-neutral-500, #64748B);
	line-height: var(--boltpress-typography-line-height-relaxed, 1.65);
	margin: 12px 0 0;
	max-width: 640px;
}

.militra-icon { display: inline-block; vertical-align: middle; flex: none; }

/* Buttons: the token-compiled rules style native button / .wp-block-button.
   These add ghost + sizing variants the design uses, on top of the tokens. */
.btn,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	text-decoration: none;
	transition: all var(--mil-ease);
}
.btn:active, .wp-block-button__link:active { transform: scale(0.98); }

/* Button system — two canonical styles, established by the header CTAs:
   primary  `class="btn bp-btn-primary"`  (orange fill) and
   secondary `class="btn bp-btn-secondary"` (white, bordered).
   Reuse these for EVERY CTA — including on <button> elements — so buttons stay
   unified site-wide. Native <button>/<input> controls don't inherit
   font-family (the token rules set size/weight/colour but not family), so we
   inherit it here, keeping a <button class="btn bp-btn-primary"> visually
   identical to an <a class="btn bp-btn-primary">. */
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	font-family: inherit;
}

.btn--ghost {
	background: transparent;
	border: 1px solid transparent;
	color: var(--boltpress-colors-neutral-700, #334155);
	padding: 12px 18px;
	border-radius: var(--boltpress-border-radius-sm, 8px);
	font-weight: var(--boltpress-typography-font-weight-semibold, 600);
}
.btn--ghost:hover { background: var(--boltpress-colors-neutral-50, #F8FAFC); }

.btn--lg { padding: 14px 28px; font-size: 16px; }

/* WooCommerce single add-to-cart button — branded GLOBALLY (not just on WC
   pages). WC core colours `.woocommerce button.button.alt` with its default
   purple (#a46497). On the canonical product URL the theme's woocommerce.css
   already overrides that — but CertFlow's date-booking calendar injects on
   `woocommerce_before_add_to_cart_button`, so this same `form.cart` button can
   render on a page where is_woocommerce() is false (e.g. a product embedded via
   shortcode/block). There woocommerce.css never loads and the button falls back
   to WC purple, with CertFlow's `.cf-pdc-locked` only dimming opacity. Scoping
   to `form.cart` (WooCommerce always wraps the single add-to-cart button in it)
   brands the button in every context and out-specifies WC core's
   `.woocommerce button.button.alt` (0,3,1) without needing the
   militra-woocommerce body class. Mirrors the single-product CTA in
   woocommerce.css so the two stay identical. */
form.cart button.single_add_to_cart_button,
form.cart button.single_add_to_cart_button.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 12px 20px;
	border: 0;
	border-radius: 8px;
	background-color: var(--boltpress-colors-primary, #E8501E);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-shadow: none;
	min-height: 48px;
	cursor: pointer;
	box-shadow: none;
	transition: background-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}
form.cart button.single_add_to_cart_button:hover,
form.cart button.single_add_to_cart_button.button.alt:hover {
	background-color: var(--boltpress-colors-orange-600, #D14318);
	transform: translateY(-1px);
	box-shadow: 0 10px 24px -10px rgba(232, 80, 30, 0.55);
}
form.cart button.single_add_to_cart_button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--boltpress-colors-headings-general, #0F172A);
}
/* Locked / disabled — CertFlow keeps `disabled` + `.cf-pdc-locked` on the button
   until a date is chosen (its own CSS only fades opacity). Render it muted and
   not-allowed so the locked state is unmistakable. `.button.alt` in each selector
   keeps these above the orange enabled rule — the locked button still carries the
   `button alt` classes — and `opacity: 1` replaces CertFlow's 55% dim with a solid
   grey, matching the theme's other disabled buttons. */
form.cart button.single_add_to_cart_button.button.alt[disabled],
form.cart button.single_add_to_cart_button.button.alt.disabled,
form.cart button.single_add_to_cart_button.button.alt.cf-pdc-locked,
form.cart button.single_add_to_cart_button.button.alt[disabled]:hover,
form.cart button.single_add_to_cart_button.button.alt.disabled:hover,
form.cart button.single_add_to_cart_button.button.alt.cf-pdc-locked:hover {
	background-color: var(--boltpress-colors-neutral-200, #E2E8F0);
	color: var(--boltpress-colors-neutral-500, #64748B);
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
	opacity: 1;
}

/* ===== Shared card rules (consumed by homepage Naujienos + every blog surface)
 * The .post / .news-grid / .news-cover / .post-* / editorial-cover-variant
 * classes render on the homepage Naujienos strip AND on every blog page (single
 * related strip, archive, posts page, search results). These rules MUST live
 * at the global scope, NOT nested under .militra-home — otherwise blog pages
 * (which have .militra-blog, not .militra-home) render the cards unstyled.
 *
 * Origin: docs/militra-design-system/project/ui_kits/website/site.css 1118–1255.
 * Extracted from home.css's .militra-home {} block; tools/port-home-css.php's
 * second array_splice now skips that source range so this section is the
 * single source of truth.
 */
.news-grid {
	display: grid; gap: 20px;
	grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1000px) {
	.news-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	.news-grid { grid-template-columns: 1fr; }
}

.post {
	display: flex; flex-direction: column;
	background: var(--boltpress-colors-neutral-0, #fff);
	border: 1px solid var(--boltpress-colors-neutral-200, #E2E8F0);
	border-radius: var(--boltpress-border-radius-lg, 8px);
	overflow: hidden;
	transition: all .2s ease;
	position: relative;
}
.post:hover {
	transform: translateY(-3px);
	border-color: var(--boltpress-colors-headings-general, #0F172A);
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.news-cover {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--boltpress-colors-neutral-100, #F1F5F9);
	overflow: hidden;
}
/* Featured-image fills the cover at its aspect ratio. Without this, WP's
   intrinsic-size <img> (e.g. 600x400 militra-card) overflows narrow cards
   horizontally and leaves gaps on wide ones. */
.news-cover img, .news-cover-img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; object-position: center;
	display: block;
}
.post-cat {
	position: absolute; top: 14px; left: 14px; z-index: 2;
	display: inline-block;
	background: var(--boltpress-colors-neutral-0, #fff);
	font-size: 10px; font-weight: 800; letter-spacing: .12em;
	color: var(--boltpress-colors-headings-general, #0F172A); text-transform: uppercase;
	padding: 5px 10px; border-radius: 8px;
}
.post-deco { position: absolute; inset: 0; }

/* Editorial cover treatments per accent — abstract, not stocky */
.post-orange .news-cover {
	background:
		radial-gradient(circle at 80% 30%, rgba(232,80,30,0.32), transparent 55%),
		linear-gradient(135deg, #F5EFE9 0%, #F0E4D9 100%);
}
.post-orange .post-deco::before {
	content: ''; position: absolute;
	top: 30%; left: 18%; width: 140px; height: 140px;
	border-radius: 50%;
	background: var(--boltpress-colors-primary, #E8501E);
	opacity: .9;
}
.post-orange .post-deco::after {
	content: ''; position: absolute;
	bottom: -20px; right: 12%; width: 90px; height: 90px;
	border: 2px solid var(--boltpress-colors-primary, #E8501E);
	border-radius: 50%;
	opacity: .55;
}

.post-slate .news-cover {
	background: linear-gradient(150deg, #1F2937 0%, #0F172A 100%);
}
.post-slate .post-cat { background: rgba(255,255,255,0.95); }
.post-slate .post-deco::before {
	content: ''; position: absolute;
	top: 50%; left: 0; right: 0; height: 1px;
	background: rgba(255,255,255,0.18);
}
.post-slate .post-deco::after {
	content: '240';
	position: absolute; right: 14%; top: 28%;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 92px; font-weight: 700;
	color: var(--boltpress-colors-primary, #E8501E);
	letter-spacing: -0.04em;
	line-height: 1;
}

.post-olive .news-cover {
	background:
		repeating-linear-gradient(135deg,
			#FDFBF6 0 22px,
			#F4EDE0 22px 24px);
}
.post-olive .post-deco::before {
	content: ''; position: absolute;
	top: 20%; left: 50%; transform: translateX(-50%);
	width: 96px; height: 96px;
	border: 8px solid var(--boltpress-colors-primary, #E8501E);
	border-radius: 50%;
	background: #FDFBF6;
}
.post-olive .post-deco::after {
	content: '';
	position: absolute;
	top: calc(20% + 36px); left: 50%; transform: translateX(-50%);
	width: 24px; height: 24px;
	background: var(--boltpress-colors-primary, #E8501E);
	border-radius: 50%;
}

.post-body {
	padding: 22px;
	display: flex; flex-direction: column; gap: 10px;
	flex: 1;
}
.post-meta {
	display: flex; align-items: center; gap: 8px;
	font-size: 12px; color: var(--boltpress-colors-neutral-500, #64748B); font-weight: 500;
}
.post-meta span { display: inline-flex; align-items: center; gap: 5px; }
.post-meta svg { color: var(--boltpress-colors-neutral-500, #64748B); }
/* Card meta-line extensions — emitted by template-parts/blog/card.php on
   every .post card (homepage Naujienos + every blog listing). */
.post-cat-inline {
	font-weight: 700; color: var(--boltpress-colors-primary, #E8501E);
	text-transform: uppercase; letter-spacing: .06em; font-size: 11px;
}
.post-read { color: var(--boltpress-colors-neutral-500, #64748B); font-size: 12px; }
.post-meta-dot { color: var(--boltpress-colors-neutral-300, #CBD5E1); }
.post-title {
	font-size: 19px; font-weight: 700; color: var(--boltpress-colors-headings-general, #0F172A);
	margin: 0; line-height: 1.3; letter-spacing: -0.015em;
}
.post-excerpt {
	font-size: 14px; color: var(--boltpress-colors-neutral-500, #64748B); line-height: 1.6; margin: 0;
}
.post-cta {
	margin-top: auto;
	padding-top: 14px;
	font-size: 13px; font-weight: 700; color: var(--boltpress-colors-orange-600, #D14318);
}
.post:hover .post-cta { color: var(--boltpress-colors-primary, #E8501E); }

/* Featured post — bigger title, side-by-side layout on wide */
@media (min-width: 1000px) {
	.post-feat { grid-row: span 1; }
	.post-feat .post-title { font-size: 24px; }
	.post-feat .news-cover { aspect-ratio: 16 / 11; }
}

/* ===== Shared course-card rules (homepage CourseGrid + woo archive)
 * The .course-card / .course-title / .course-desc / .course-foot /
 * .course-price / .course-cta classes render on the homepage CourseGrid
 * (.militra-home scope) AND on the WooCommerce shop archive
 * (body.militra-woocommerce scope, via woocommerce/content-product.php's
 * `.course-card.woo-product-card` markup). These rules MUST live at the
 * global scope, NOT nested under .militra-home — otherwise the woo
 * archive renders the cards unstyled.
 *
 * Homepage-only ornamentation (.course-card-featured, .course-flag,
 * .course-rank, .course-tag, .course-icon, .course-grid, .course-grid-section)
 * stays in home.css under .militra-home.
 *
 * The .course-cover rule below is woo-archive-only markup (a <div> wrapping
 * the_post_thumbnail) — the homepage uses .course-icon for an SVG instead.
 * Defined here so the cascade is one-stop for any "course card" surface.
 */
.course-card {
	background: var(--boltpress-colors-neutral-0, #fff);
	border: 1px solid var(--boltpress-colors-neutral-200, #E2E8F0);
	border-radius: 8px;
	padding: 22px;
	box-shadow: none;
	display: flex; flex-direction: column; gap: 10px;
	transition: all .2s ease;
	height: 500px;                       /* fixed — shop archive + related products + homepage CourseGrid. 500px accommodates up to 5-line titles + 2-3 lines of desc + cover + foot. */
	position: relative;
	overflow: hidden;                     /* belt-and-braces in case any descendant tries to push past the fixed height */
}
.course-card:hover {
	border-color: var(--boltpress-colors-headings-general, #0F172A);
	transform: translateY(-2px);
}
.course-cover {
	display: block;
	overflow: hidden;
	border-radius: 8px 8px 0 0;
	aspect-ratio: 16 / 10;
	margin: -22px -22px 12px;
	background: var(--boltpress-colors-neutral-100, #F1F5F9);
}
.course-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.course-code {
	font-size: 11px; font-weight: 700;
	color: var(--boltpress-colors-neutral-500, #64748B);
	letter-spacing: .04em; text-transform: uppercase;
}
.course-title {
	font-size: 18px; font-weight: 700;
	color: var(--boltpress-colors-headings-general, #0F172A);
	margin: 0;
	/* Title NEVER clamps — it claims whatever vertical space it needs. The
	   description below absorbs the slack with line-clamp, so a longer title
	   simply shrinks the visible description. */
	flex: 0 0 auto;
	line-height: 1.3;
	word-break: break-word;
}
.course-desc {
	font-size: 14px;
	color: var(--boltpress-colors-neutral-500, #64748B);
	line-height: 1.55; margin: 0;
	/* Description fills the remaining space between (title) and (foot).
	   Line-clamp on whatever lines fit — the foot is pinned to the bottom
	   via .course-foot's `margin-top: auto`. */
	flex: 1 1 auto;
	min-height: 0;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.course-foot {
	display: flex; justify-content: space-between; align-items: center;
	margin-top: auto; padding-top: 12px;
	border-top: 1px solid var(--boltpress-colors-neutral-100, #F1F5F9);
}
.course-foot--stacked {
	display: flex; flex-direction: column; align-items: stretch;
	justify-content: flex-start;
	gap: 10px;
}
.course-price {
	font-size: 15px; font-weight: 700;
	color: var(--boltpress-colors-headings-general, #0F172A);
}
.course-price .from {
	font-size: 11px; font-weight: 500;
	color: var(--boltpress-colors-neutral-500, #64748B);
	margin-right: 2px;
}
/* Sale price (WC emits <del>regular</del><ins>sale</ins>). On product cards
   the regular slips under as a muted strikethrough; the sale price stays
   bold and brand-colored so the discount reads instantly. */
.course-price del {
	display: inline-block;
	margin-right: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--boltpress-colors-neutral-500, #64748B);
	text-decoration: line-through;
}
.course-price del bdi { color: inherit; }
.course-price ins {
	background: transparent;
	color: var(--boltpress-colors-primary, #E8501E);
	font-weight: 700;
	text-decoration: none;
}
.course-cta {
	font-size: 13px; font-weight: 700;
	color: var(--boltpress-colors-orange-600, #D14318);
}
.course-card:hover .course-cta { color: var(--boltpress-colors-primary, #E8501E); }

/* Full-width Užsakyti pill on woo archive product cards. Style derives from
   .bp-btn-primary, scaled down for card density (10/18 pad, 14px) so the
   catalog matches the rest of the site without overpowering the card.
   Only emitted by woocommerce/content-product.php today — adding the
   modifier outside WC would inherit this orange-fill treatment. */
.course-cta--btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 10px 18px;
	border-radius: 8px;
	background: var(--boltpress-colors-primary, #E8501E);
	border: 1px solid var(--boltpress-colors-primary, #E8501E);
	color: var(--boltpress-colors-neutral-0, #fff);
	font-size: 14px; font-weight: 700;
	letter-spacing: 0; text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease;
}
.course-card:hover .course-cta--btn {
	background: var(--boltpress-colors-orange-600, #D14318);
	border-color: var(--boltpress-colors-orange-600, #D14318);
	color: var(--boltpress-colors-neutral-0, #fff);
}

/* Portal switcher — links between the CertFlow portals a multi-role user can
   reach. Injected atop the portal pages' content. Buttons reuse the unified
   .btn bp-btn-* system (current portal = primary, others = secondary). */
.militra-portal-switcher {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 24px;
	padding: 16px 20px;
	border: 1px solid var(--boltpress-colors-neutral-200, #E2E8F0);
	border-radius: var(--boltpress-border-radius-md, 12px);
	background: var(--boltpress-colors-neutral-50, #F8FAFC);
}
.militra-portal-switcher__label {
	font-weight: var(--boltpress-typography-font-weight-semibold, 600);
	color: var(--boltpress-colors-neutral-700, #334155);
}
.militra-portal-switcher__link { padding: 10px 18px; }