/* =============================================================================
   Adrian Kołodziej — Platforma · Fundament komponentów (v2 — premium)
   Playfair Display w nagłówkach, Montserrat w treści/UI.
   Wszystko na tokenach z theme.css. Zero wartości na sztywno.
   ========================================================================== */

/* --- Baza ---------------------------------------------------------------- */
body {
	background-color: var(--surface-page);
	color: var(--text-primary);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* --- Nagłówki: Playfair Display ----------------------------------------- */
h1, h2, h3, h4, h5, h6,
.entry-title,
.ast-single-post .entry-title {
	font-family: var(--font-display);
	color: var(--text-primary);
	line-height: var(--lh-heading);
	font-weight: var(--fw-bold);
	letter-spacing: var(--tracking-tight);
	text-wrap: balance;
}
h1, .entry-title { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-xl);  font-weight: var(--fw-semibold); }
h5 { font-size: var(--fs-lg);  font-weight: var(--fw-semibold); }
h6 { font-size: var(--fs-base);font-weight: var(--fw-semibold); }

/* --- Treść --------------------------------------------------------------- */
p {
	max-width: var(--measure);
	margin: 0 0 var(--space-4);
}
strong, b { font-weight: var(--fw-semibold); color: var(--text-primary); }

a {
	color: var(--text-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--text-link-hover); }

/* Etykieta/kapitalik z rozstrzeleniem (premium) */
.akp-eyebrow {
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--text-tertiary);
}

/* Złota linia-akcent (dekoracyjny separator premium) */
.akp-rule-gold {
	width: 56px;
	height: 3px;
	border: 0;
	border-radius: var(--radius-full);
	background: linear-gradient(90deg, var(--p-gold-400), var(--p-gold-600));
	margin: var(--space-4) 0;
}

/* --- Focus widoczny (WCAG 2.4.7 / 3:1) ---------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* --- Kontener ------------------------------------------------------------ */
.akp-container {
	width: 100%;
	max-width: 72rem;
	margin-inline: auto;
	padding-inline: var(--space-4);
}

/* --- Przycisk (atom) ----------------------------------------------------- */
.akp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 2.875rem;
	padding: var(--space-3) var(--space-6);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.02em;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out),
		transform var(--dur-fast) var(--ease-out);
}
.akp-btn:active { transform: translateY(1px); }
.akp-btn:disabled, .akp-btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* Primary — granat */
.akp-btn--primary { background-color: var(--action-primary-bg); color: var(--action-primary-text); }
.akp-btn--primary:hover { background-color: var(--action-primary-bg-hover); box-shadow: var(--shadow-md); }
.akp-btn--primary:active { background-color: var(--action-primary-bg-active); }

/* Accent — złote CTA premium (ciemny tekst) */
.akp-btn--accent { background-color: var(--action-accent-bg); color: var(--action-accent-text); }
.akp-btn--accent:hover { background-color: var(--action-accent-bg-hover); box-shadow: var(--shadow-accent); }

/* Secondary — obrys granatowy */
.akp-btn--secondary {
	background-color: var(--action-secondary-bg);
	color: var(--action-secondary-text);
	border-color: var(--action-secondary-border);
}
.akp-btn--secondary:hover { background-color: var(--action-secondary-bg-hover); }

/* Destructive */
.akp-btn--destructive { background-color: var(--action-destructive-bg); color: var(--action-destructive-text); }
.akp-btn--destructive:hover { background-color: var(--action-destructive-bg-hover); }

/* --- Karta --------------------------------------------------------------- */
.akp-card {
	background-color: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: var(--space-6);
}

/* --- Stopka (Astra #colophon) — czarna, copyright wyśrodkowany ----------- */
.site-footer#colophon {
	background-color: var(--p-neutral-950) !important;   /* czerń */
}
.site-footer#colophon .site-primary-footer-wrap,
.site-footer#colophon .site-below-footer-wrap,
.site-footer#colophon .ast-builder-grid-row {
	background: transparent !important;
}
.site-footer#colophon,
.site-footer#colophon p,
.site-footer#colophon .ast-footer-copyright,
.site-footer#colophon .widget,
.site-footer#colophon .widget-title {
	color: var(--p-neutral-300) !important;
}
.site-footer#colophon a { color: var(--p-neutral-300) !important; text-decoration: none; }
.site-footer#colophon a:hover { color: var(--p-gold-400) !important; }
/* Copyright wyśrodkowany — obejmujemy każdy wariant kontenera Astry */
.site-footer#colophon p,
.site-footer#colophon .ast-footer-copyright,
.site-footer#colophon .ast-footer-copyright p,
.site-footer#colophon .site-below-footer-wrap,
.site-footer#colophon [class*="below-footer"],
.site-footer#colophon .site-footer-below-section-1,
.site-footer#colophon .site-footer-below-section-2 {
	text-align: center !important;
	justify-content: center !important;
}
.site-footer#colophon .ast-footer-copyright p {
	font-size: var(--fs-sm);
	letter-spacing: 0.01em;
}
/* Górny wiersz linków też wyśrodkowany, subtelny odstęp */
.site-footer#colophon .footer-widget-area,
.site-footer#colophon .site-footer-section {
	text-align: center !important;
}

/* --- Nagłówek (Astra #masthead) — premium ------------------------------- */
.site-header#masthead {
	border-bottom: 1px solid var(--border-subtle);
}
/* Menu / konto / wylogowanie — hover w złocie */
.site-header .main-header-menu a,
.site-header .ast-nav-menu > .menu-item > a,
.site-header .ast-header-account-wrap a {
	font-family: var(--font-sans);
	font-weight: var(--fw-medium);
	transition: color var(--dur-fast) var(--ease-out);
}
.site-header .main-header-menu > .menu-item > a:hover,
.site-header .ast-nav-menu > .menu-item > a:hover {
	color: var(--accent-strong) !important;
}
/* Avatar w nagłówku — subtelny złoty pierścień */
.site-header .ast-header-account-type-avatar img,
.site-header img.avatar {
	border-radius: var(--radius-full);
	box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 3px var(--border-accent);
}

/* Zbliż avatar do tekstu „Wylogowanie" (było ~35px przerwy).
   Avatar i „Wylogowanie" to DWA osobne elementy nagłówka — przerwa z paddingów
   widgetu konta (.ast-masthead-custom-menu-items pr 15px + wrapper pr 10px)
   oraz z padding-left menu-linku (20px). Tniemy wszystkie trzy. */
.site-header .learndash-profile-link {
	margin: 0 !important;
	padding: 0 !important;
	display: inline-flex;
	align-items: center;
}
.site-header .ast-masthead-custom-menu-items {
	padding-left: var(--space-2) !important;
	padding-right: var(--space-1) !important;   /* było 15px */
}
.site-header .ast-builder-layout-element:has(.learndash-profile-link) {
	padding-right: var(--space-1) !important;   /* było 10px */
}
.site-header .ast-nav-menu > .menu-item > .menu-link,
.site-header .main-header-menu > .menu-item > .menu-link {
	padding-left: var(--space-2) !important;   /* było 20px */
	padding-right: var(--space-2) !important;
}

/* --- Globalne mikro-detale ---------------------------------------------- */
::selection {
	background-color: var(--p-gold-200);
	color: var(--p-navy-900);
}
html { scroll-behavior: smooth; }

/* --- Archiwum kursów /courses/ — premium karty --------------------------- */
.post-type-archive-sfwd-courses .ast-archive-description {
	text-align: center;
	margin-bottom: var(--space-8);
}
.post-type-archive-sfwd-courses .ast-archive-title,
.tax-ld_course_category .ast-archive-title {
	font-family: var(--font-display) !important;
	font-size: var(--fs-4xl) !important;
	color: var(--text-primary);
}
/* Karta kursu */
.post-type-archive-sfwd-courses #primary article {
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	max-width: 460px;
	margin-inline: auto;
	transition: transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out);
}
.post-type-archive-sfwd-courses #primary article:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
}
/* Obrazek wyróżniający — pełna szerokość karty (full-bleed) */
.post-type-archive-sfwd-courses #primary article .ast-article-inner,
.post-type-archive-sfwd-courses #primary article .post-content { padding: 0 !important; margin: 0 !important; }
.post-type-archive-sfwd-courses #primary article .ast-blog-featured-section,
.post-type-archive-sfwd-courses #primary article .post-thumb-img-content,
.post-type-archive-sfwd-courses #primary article .post-thumb-img-content > a {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
}
.post-type-archive-sfwd-courses #primary article img.wp-post-image {
	width: 100% !important;
	height: 190px;
	object-fit: cover;
	display: block;
}
/* Tekst i CTA — z paddingiem */
.post-type-archive-sfwd-courses #primary article .ast-excerpt-container,
.post-type-archive-sfwd-courses #primary article .entry-content,
.post-type-archive-sfwd-courses #primary article .read-more {
	padding-inline: var(--space-6) !important;
}
.post-type-archive-sfwd-courses #primary article .ast-excerpt-container { padding-top: var(--space-5) !important; }
.post-type-archive-sfwd-courses #primary article .entry-title {
	font-family: var(--font-display);
	font-size: var(--fs-2xl);
	margin-top: var(--space-5);
}
.post-type-archive-sfwd-courses #primary article .entry-content {
	color: var(--text-secondary);
	padding-top: var(--space-4);
}
/* CTA „Otwórz szkolenie" — złoty przycisk */
.post-type-archive-sfwd-courses #primary .read-more {
	padding-bottom: var(--space-6);
	padding-top: var(--space-2);
}
.post-type-archive-sfwd-courses #primary .read-more a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background-color: var(--action-accent-bg);
	color: var(--action-accent-text);
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-md);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out);
}
.post-type-archive-sfwd-courses #primary .read-more a:hover {
	background-color: var(--action-accent-bg-hover);
	box-shadow: var(--shadow-accent);
}

/* --- Responsywność bazowa ------------------------------------------------ */
@media (max-width: 600px) {
	:root { --fs-4xl: 2rem; --fs-3xl: 1.625rem; }
	.akp-container { padding-inline: var(--space-3); }
}