/**
 * Styles für die neuen "Mein Konto"-Bereiche (Meine Kurse, Zertifikate).
 * Wird nur auf "Mein Konto"-Seiten geladen, siehe YF_My_Account::enqueue_assets().
 * Bewusst zurückhaltend gehalten, orientiert sich an WooCommerce-Standardklassen
 * (.button, .shop_table, .woocommerce-info/-error) statt eigene Buttons/Boxen
 * neu zu erfinden.
 */

/**
 * Layout-Korrekturen am Zakra-Theme für "Mein Konto".
 *
 * Das Theme (wp-content/themes/zakra/woocommerce.css) setzt:
 *   .woocommerce-account.logged-in .woocommerce { display:flex; gap:30px; … }
 *   @media (min-width: 768px) {
 *     .woocommerce-MyAccount-navigation { width:35%; padding-right:30px; … }
 *     .woocommerce-MyAccount-content   { width:65%; }
 *   }
 * Selektoren hier bewusst mit einem zusätzlichen `body`-Qualifikator, damit sie
 * unabhängig von der Ladereihenfolge sicher höhere Spezifität haben als die
 * Theme-Regeln – ein Parent-Theme-File selbst darf nicht editiert werden
 * (wird bei Theme-Updates überschrieben).
 */
body.woocommerce-account .woocommerce {
	padding-left: 30px;
	padding-right: 30px;
	box-sizing: border-box;
}

body.woocommerce-account .woocommerce-MyAccount-navigation {
	/* Das Theme setzt hier zusätzlich einen border-right als Trennlinie
	   (siehe woocommerce.css) – padding-right sorgt für Abstand zwischen den
	   Nav-Links und DIESER Linie. Der 30px-Gap von .woocommerce liegt
	   dahinter und sorgt separat für Abstand zwischen der Linie und dem
	   Content; beide Abstände haben also unterschiedliche Aufgaben. */
	padding-right: 20px;
}

@media screen and (min-width: 768px) {
	body.woocommerce-account .woocommerce-MyAccount-navigation {
		flex: 0 1 25%;
		width: auto;
		min-width: 350px;
	}

	body.woocommerce-account .woocommerce-MyAccount-content {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}
}

.yf-course-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.5em;
	margin: 0 0 2em;
	padding: 0;
	list-style: none;
}

.yf-course-card {
	padding: 1.25em;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 4px;
}

.yf-course-card--expired {
	opacity: 0.6;
}

.yf-course-card__title {
	margin: 0 0 0.5em;
	font-size: 1.1em;
}

.yf-course-card__expiry,
.yf-course-card__notice {
	margin: 0 0 0.5em;
	font-size: 0.9em;
}

.yf-course-card__quiz,
.yf-course-card__certificate {
	margin: 0 0 0.75em;
}

.yf-course-card__actions {
	margin: 1em 0 0;
}

/* "Kurs ansehen" / "Kurse entdecken" / "Herunterladen" (Zertifikate-Tabelle):
   gleicher Button-Stil wie die Elementor-Buttons im Rest der Seite
   (Startseite u. a.) – orange, Jost, abgerundet. Hier etwas kleiner, da es
   ein Sekundärbutton in einer Karte/Tabelle ist, kein grosser
   Call-to-Action. */
.yf-course-card__actions .button,
.yf-empty-state .button,
.yf-certificate-download-button {
	background-color: #df6e1f;
	border-color: #df6e1f;
	color: var(--e-global-color-zakracolor3, #fff);
	font-family: 'Jost', sans-serif;
	font-size: 16px;
	font-weight: 600;
	padding: 12px 20px;
	border-radius: 8px;
	transition: background-color 0.3s;
}

.yf-course-card__actions .button:hover,
.yf-course-card__actions .button:focus,
.yf-empty-state .button:hover,
.yf-empty-state .button:focus,
.yf-certificate-download-button:hover,
.yf-certificate-download-button:focus {
	background-color: #bd5e1a;
	border-color: #bd5e1a;
	color: var(--e-global-color-zakracolor3, #fff);
}

/* Aktiver Menüpunkt in der Kontonavigation: gleicher Orangeton wie die
   Buttons statt des bisherigen Theme-Blaus (var(--zakra-color-1)). */
body.woocommerce-account .woocommerce-MyAccount-navigation ul .is-active a,
body.woocommerce-account .woocommerce-MyAccount-navigation ul .is-active a:hover,
body.woocommerce-account .woocommerce-MyAccount-navigation ul .is-active a:focus {
	background-color: #df6e1f;
	color: var(--e-global-color-zakracolor3, #fff);
}

.yf-badge {
	display: inline-block;
	padding: 0.2em 0.7em;
	border-radius: 999px;
	font-size: 0.85em;
	line-height: 1.6;
}

.yf-badge--open {
	background: #f0f0f1;
	color: #50575e;
}

.yf-badge--success {
	background: #edfaef;
	color: #1e7e34;
}

.yf-badge--warning {
	background: #fcf1e6;
	color: #a0561e;
}

.yf-course-single__back {
	margin-bottom: 1em;
}

.yf-course-single__title {
	margin-top: 0;
}

.yf-course-single__player {
	margin: 1.5em 0;
}

.yf-course-single__quiz {
	margin: 2.5em 0;
	padding-top: 2em;
	border-top: 1px solid #e4e4e7;
}

.yf-course-single__quiz-title {
	margin: 0 0 1em;
}

.yf-course-single__order-link {
	margin-top: 2em;
}

.yf-empty-state {
	padding: 1em 1.5em;
}

.yf-certificates-table td,
.yf-certificates-table th {
	text-align: left;
}

.yf-certificates-table th {
	/* Ohne Trennzeichen brachen lange Wörter wie "Zertifikatsnummer" in der
	   schmalen Spalte mitten im Wort um, ohne sichtbaren Bindestrich. */
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
}