/**
Theme Name: Astra Child
Author: Brainstorm Force
Description: Astra Child for Grammatikweg — "autobahn sign" design system on top of Astra.
Version: 1.1.11
Template: astra
Text Domain: astra-child
*/

/* ---------------------------------------------------------------------------
   1. Design tokens
--------------------------------------------------------------------------- */
:root {
	--gw-blue: #0C3F91;
	--gw-blue-dark: #072a63;
	--gw-white: #F5F5F0;
	--gw-yellow: #FFB81C;
	--gw-asphalt: #17191C;
	--gw-asphalt-soft: #24272C;
	--gw-grey: #8A8F98;
	--gw-line: #3a3d42;

	--gw-font-display: 'Fjalla One', 'Arial Narrow', sans-serif;
	--gw-font-body: 'Work Sans', sans-serif;
	--gw-font-mono: 'IBM Plex Mono', monospace;
}

/* ---------------------------------------------------------------------------
   2. Base
--------------------------------------------------------------------------- */
body,
.site {
	background-color: var(--gw-asphalt) !important;
	color: var(--gw-white);
	font-family: var(--gw-font-body);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	color: var(--gw-yellow);
}

::selection {
	background: var(--gw-yellow);
	color: var(--gw-asphalt);
}

a:focus-visible,
button:focus-visible,
.gw-filter-chip:focus-visible,
.gw-topic-card:focus-visible,
.gw-note-card:focus-visible {
	outline: 3px solid var(--gw-yellow);
	outline-offset: 3px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--gw-font-display);
	font-weight: 400;
	color: var(--gw-white);
}

/* ---------------------------------------------------------------------------
   3. Header (Astra #masthead) — sticky, dark, translucent
--------------------------------------------------------------------------- */
#masthead {
	position: sticky;
	top: 0;
	z-index: 999;
	background: rgba(23, 25, 28, 0.92);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--gw-line);
}

#masthead .ast-site-identity .site-title,
#masthead .site-branding .site-title {
	font-family: var(--gw-font-display);
	font-size: 1.25rem;
	letter-spacing: 0.02em;
	color: var(--gw-white);
}

#masthead .ast-site-title-wrap {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

#masthead .site-logo-img img {
	max-height: 34px;
	width: auto;
}

/* Primary menu */
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link {
	color: var(--gw-grey);
	font-size: 0.92rem;
}

.ast-builder-menu-1 .main-header-menu > .menu-item:hover > .menu-link,
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link:hover {
	color: var(--gw-white);
}

.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current_page_item > .menu-link {
	color: var(--gw-yellow);
}

/* Current page and its parent (e.g. "Kurse" while on "A2 Kurs"). The rule
   above loses to the grey top-level rule, so the top level needs its own. */
.ast-builder-menu-1 .main-header-menu > .current-menu-item > .menu-link,
.ast-builder-menu-1 .main-header-menu > .current-menu-ancestor > .menu-link {
	color: var(--gw-yellow);
}

/* Dropdowns (e.g. Kurse → A2 Kurs, Mein Lernbereich). Astra draws them white. */
#ast-desktop-header .main-header-menu .sub-menu {
	background: var(--gw-asphalt-soft);
	border: 1px solid var(--gw-line);
	border-top: 2px solid var(--gw-yellow);
	border-radius: 0 0 6px 6px;
	box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.7);
}

#ast-desktop-header .main-header-menu .sub-menu .menu-link {
	background: transparent;
	color: var(--gw-grey);
	font-size: 0.92rem;
}

#ast-desktop-header .main-header-menu .sub-menu .menu-item:hover > .menu-link,
#ast-desktop-header .main-header-menu .sub-menu .menu-link:focus-visible {
	background: rgba(245, 245, 240, 0.06);
	color: var(--gw-white);
}

#ast-desktop-header .main-header-menu .sub-menu .current-menu-item > .menu-link {
	color: var(--gw-yellow);
}

/* Mobile menu (off-canvas panel): dark like the header. */
#ast-mobile-popup .ast-mobile-popup-inner {
	background: var(--gw-asphalt);
	color: var(--gw-white);
	border-left: 1px solid var(--gw-line);
}

#ast-mobile-popup .main-header-menu,
#ast-mobile-popup .main-header-menu .sub-menu,
#ast-mobile-popup .main-header-menu .menu-link {
	background: transparent;
}

#ast-mobile-popup .main-header-menu .current-menu-item > .menu-link {
	background: rgba(245, 245, 240, 0.06);
}

#ast-mobile-popup .main-header-menu > .current-menu-ancestor > .menu-link {
	color: var(--gw-yellow);
}

/* Sub-menu arrow: Astra's button focus style makes it pale with a white icon. */
#ast-mobile-popup .main-header-menu .ast-menu-toggle,
#ast-mobile-popup .main-header-menu .ast-menu-toggle:hover,
#ast-mobile-popup .main-header-menu .ast-menu-toggle:focus {
	background: transparent;
	color: var(--gw-grey);
}

#ast-mobile-popup .main-header-menu .ast-menu-toggle:hover,
#ast-mobile-popup .main-header-menu .ast-menu-toggle:focus-visible {
	color: var(--gw-white);
}

/* Header CTA button ("Zur Bibliothek") */
.ast-header-button-1 .ast-custom-button,
.ast-header-html-1 a.ast-custom-button {
	display: inline-block;
	font-family: var(--gw-font-mono);
	font-size: 0.8rem;
	font-weight: 500;
	padding: 9px 16px;
	border-radius: 3px;
	line-height: 1.4;
}

/* ---------------------------------------------------------------------------
   4. Footer (Astra #colophon) — dark, thin mono text
--------------------------------------------------------------------------- */
footer#colophon {
	background-color: var(--gw-asphalt) !important;
	border-top: 1px solid var(--gw-line);
	color: var(--gw-grey);
	font-family: var(--gw-font-mono);
	font-size: 0.85rem;
}

footer#colophon a {
	color: var(--gw-grey);
}

footer#colophon a:hover {
	color: var(--gw-white);
}

footer#colophon .ast-footer-copyright,
footer#colophon .ast-builder-html-element {
	font-family: var(--gw-font-mono);
	font-size: 0.85rem;
	color: var(--gw-grey);
}

/* ---------------------------------------------------------------------------
   5. Topic tiles (landing) — shortcode [grammatikweg_themen]
--------------------------------------------------------------------------- */
.gw-topic-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 18px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 32px;
}

.gw-topic-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 148px;
	background: var(--gw-blue);
	border: 2px solid var(--gw-white);
	border-radius: 8px;
	padding: 22px 20px 20px;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.gw-topic-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -16px rgba(12, 63, 145, 0.6);
	border-color: var(--gw-yellow);
	color: var(--gw-white);
}

.gw-topic-exit {
	font-family: var(--gw-font-mono);
	font-size: 0.7rem;
	color: var(--gw-yellow);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gw-topic-name {
	font-family: var(--gw-font-display);
	font-size: 1.5rem;
	line-height: 1.1;
	margin-top: 10px;
	color: var(--gw-white);
}

.gw-topic-meta {
	margin-top: 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--gw-font-mono);
	font-size: 0.72rem;
	color: rgba(245, 245, 240, 0.65);
}

.gw-topic-arrow {
	font-size: 1rem;
	transition: transform 0.18s ease;
}

.gw-topic-card:hover .gw-topic-arrow {
	transform: translateX(4px);
}

/* Dashed "add new" card */
.gw-topic-card.gw-add-new,
.gw-note-card.gw-add-new {
	background: transparent;
	border: 2px dashed var(--gw-line);
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--gw-grey);
}

.gw-topic-card.gw-add-new:hover,
.gw-note-card.gw-add-new:hover {
	border-color: var(--gw-yellow);
	color: var(--gw-white);
	box-shadow: none;
	transform: none;
}

.gw-add-new .plus {
	font-family: var(--gw-font-display);
	font-size: 2rem;
	color: var(--gw-grey);
	display: block;
	margin-bottom: 6px;
}

.gw-add-new:hover .plus {
	color: var(--gw-yellow);
}

/* Parent topic accordion (landing) — native details/summary */
.gw-topic-parent {
	grid-column: 1 / -1;
}

.gw-topic-parent summary {
	list-style: none;
	cursor: pointer;
	user-select: none;
	flex-direction: row;
	align-items: center;
	min-height: 0;
	padding: 20px 26px;
	gap: 18px;
}

.gw-topic-parent summary::-webkit-details-marker {
	display: none;
}

.gw-topic-parent[open] summary {
	border-color: var(--gw-yellow);
}

.gw-topic-parent summary .gw-topic-exit {
	margin-right: auto;
}

.gw-topic-parent summary .gw-topic-name {
	margin-top: 0;
	font-size: 1.7rem;
}

.gw-topic-parent summary .gw-topic-meta {
	margin-top: 0;
}

.gw-chevron {
	transition: transform 0.18s ease;
}

.gw-topic-parent[open] .gw-chevron {
	transform: rotate(90deg);
}

.gw-child-grid {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 14px;
	margin-top: 18px;
	padding: 0;
}

.gw-child-card {
	min-height: 0;
	padding: 18px 18px 16px;
	border-width: 1.5px;
	background: var(--gw-asphalt-soft);
	border-color: var(--gw-line);
}

.gw-child-card .gw-topic-name {
	font-size: 1.1rem;
	margin-top: 0;
}

.gw-child-card .gw-topic-meta {
	margin-top: 12px;
}

.gw-child-card:hover {
	border-color: var(--gw-yellow);
	box-shadow: 0 14px 30px -16px rgba(12, 63, 145, 0.55);
}

.gw-child-all {
	margin-top: 12px;
	text-align: right;
}

.gw-child-all a {
	font-family: var(--gw-font-mono);
	font-size: 0.74rem;
	letter-spacing: 0.03em;
	color: var(--gw-yellow);
	text-decoration: none;
}

.gw-child-all a:hover {
	color: var(--gw-white);
}

/* ---------------------------------------------------------------------------
   6. Bibliothek filter bar — shortcode [grammatikweg_bibliothek]
--------------------------------------------------------------------------- */
.gw-bibliothek {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 32px;
}

.gw-filter-bar {
	position: sticky;
	top: 66px;
	z-index: 40;
	background: var(--gw-asphalt);
	padding: 18px 0;
	border-bottom: 1px solid var(--gw-line);
	margin-bottom: 40px;
}

.gw-filter-scroll {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.gw-filter-children {
	margin-top: 8px;
}

.gw-filter-chip {
	flex: 0 0 auto;
	font-family: var(--gw-font-mono);
	font-size: 0.8rem;
	padding: 9px 16px;
	border: 1.5px solid var(--gw-line);
	border-radius: 999px;
	color: var(--gw-grey);
	white-space: nowrap;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.gw-filter-chip:hover {
	border-color: var(--gw-yellow);
	color: var(--gw-white);
}

.gw-filter-chip.is-active {
	background: var(--gw-blue);
	border-color: var(--gw-blue);
	color: var(--gw-white);
}

.gw-filter-chip .count {
	color: var(--gw-yellow);
	margin-left: 6px;
}

.gw-filter-chip.is-active .count {
	color: var(--gw-white);
	opacity: 0.7;
}

.gw-filter-chip-child {
	font-size: 0.74rem;
	padding: 7px 13px;
	margin-left: 2px;
}

/* ---------------------------------------------------------------------------
   7. Note cards (library grid)
--------------------------------------------------------------------------- */
.gw-notes-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
	padding-bottom: 100px;
}

.gw-note-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: var(--gw-blue);
	border: 2px solid var(--gw-white);
	border-radius: 8px;
	padding: 22px 22px 20px;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.gw-note-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px -16px rgba(12, 63, 145, 0.6);
	border-color: var(--gw-yellow);
}

.gw-note-card.gw-add-new {
	min-height: 200px;
}

.gw-note-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
}

.gw-note-topic-tag {
	font-family: var(--gw-font-mono);
	font-size: 0.68rem;
	color: var(--gw-yellow);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gw-note-type {
	font-family: var(--gw-font-mono);
	font-size: 0.65rem;
	color: rgba(245, 245, 240, 0.6);
	border: 1px solid rgba(245, 245, 240, 0.3);
	padding: 3px 8px;
	border-radius: 999px;
	white-space: nowrap;
}

.gw-note-title {
	font-family: var(--gw-font-display);
	font-size: 1.35rem;
	line-height: 1.15;
	margin: 0;
	color: var(--gw-white);
}

.gw-note-title a {
	color: var(--gw-white);
}

.gw-note-title a:hover {
	color: var(--gw-yellow);
}

.gw-note-body {
	font-size: 0.92rem;
	color: rgba(245, 245, 240, 0.85);
}

.gw-note-example {
	background: rgba(0, 0, 0, 0.15);
	border-left: 2px solid var(--gw-yellow);
	padding: 10px 14px;
	border-radius: 0 4px 4px 0;
	font-size: 0.9rem;
	color: var(--gw-white);
}

.gw-note-example .en {
	color: rgba(245, 245, 240, 0.6);
	font-size: 0.85rem;
	display: block;
	margin-top: 2px;
}

.gw-note-meta {
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px solid rgba(245, 245, 240, 0.15);
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--gw-font-mono);
	font-size: 0.68rem;
	color: rgba(245, 245, 240, 0.5);
}

.gw-empty {
	color: var(--gw-grey);
	font-size: 1rem;
}

/* ---------------------------------------------------------------------------
   8. Hero sign + eyebrow (landing, Elementor containers)
--------------------------------------------------------------------------- */
.gw-hero-sign {
	position: relative;
}

.gw-hero-sign::before {
	content: '';
	position: absolute;
	inset: 10px;
	border: 1px solid rgba(245, 245, 240, 0.25);
	border-radius: 6px;
	pointer-events: none;
}

.gw-eyebrow .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.gw-eyebrow .gw-dash {
	width: 40px;
	height: 1px;
	background: currentColor;
	display: inline-block;
}

/* Home page courses section (#kurse, Elementor container .gw-home-kurse,
   since 1.1.10; English, see docs/decisions.md 2026-10-18): the course cards
   are Elementor containers (.gw-course-card) that link to the course, styled
   as blue sign cards like the topic tiles (section 5); the hover is the same. */
.gw-home-kurse .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

.gw-home-kurse .gw-course-card {
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.gw-home-kurse .gw-course-card:hover,
.gw-home-kurse .gw-course-card:focus-visible {
	border-color: var(--gw-yellow) !important;
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -16px rgba(12, 63, 145, 0.6);
}

.gw-home-kurse .gw-course-card:focus-visible {
	outline: 3px solid var(--gw-yellow);
	outline-offset: 2px;
}

/* "Open course →" sits at the bottom, like the tiles' "1 Notiz →" line. */
.gw-home-kurse .gw-course-card .gw-card-cta {
	margin-top: auto;
	padding-top: 6px;
}

.gw-home-kurse .gw-course-card:hover .gw-card-cta .elementor-heading-title {
	color: var(--gw-yellow) !important;
}

@media (prefers-reduced-motion: reduce) {
	.gw-home-kurse .gw-course-card:hover {
		transform: none;
	}
}

/* Links in Elementor text (e.g. "Jetzt kostenlos registrieren"): the base
   style makes links look like plain text. `.elementor` outranks Elementor's
   own `.elementor a`, which loads after this file. */
.elementor .elementor-widget-text-editor a:where(:not([class])) {
	color: var(--gw-yellow);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.elementor .elementor-widget-text-editor a:where(:not([class])):hover {
	color: var(--gw-white);
}

/* ---------------------------------------------------------------------------
   9. Single pages (posts, grammar notes, courses, lessons, topics, quizzes)
      Astra's boxed layout draws these on a white card; the site's text is
      light, so the card is dark here.
--------------------------------------------------------------------------- */
body.ast-separate-container .ast-article-single:not(.ast-related-post),
body.ast-separate-container .ast-article-post {
	background-color: var(--gw-asphalt-soft);
	border: 1px solid var(--gw-line);
	border-radius: 8px;
	color: var(--gw-white);
}

/* Astra colours content headings via `.entry-content :where(h1 … h6)`. */
.ast-article-single .entry-content :where(h1, h2, h3, h4, h5, h6) {
	color: var(--gw-white);
}

/* "By … / date" line under the title (Astra's blue is too dark here). */
.ast-article-single .entry-meta,
.ast-article-single .entry-meta * {
	color: rgba(245, 245, 240, 0.72);
}

.ast-article-single .entry-meta a:hover {
	color: var(--gw-yellow);
}

.ast-article-single .entry-content a:where(:not([class])) {
	color: var(--gw-yellow);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ast-article-single .entry-content a:where(:not([class])):hover {
	color: var(--gw-white);
}

.ast-article-single .entry-content p.has-small-font-size {
	color: rgba(245, 245, 240, 0.72);
}

.ast-article-single .entry-content table,
.ast-article-single .entry-content th,
.ast-article-single .entry-content td {
	border-color: var(--gw-line);
}

.ast-article-single .entry-content th {
	background: rgba(245, 245, 240, 0.07);
	font-weight: 600;
}

.ast-article-single .entry-content blockquote {
	margin-inline: 0;
	padding: 14px 18px;
	border-left: 4px solid var(--gw-yellow);
	border-radius: 0 6px 6px 0;
	background: rgba(0, 0, 0, 0.18);
	color: var(--gw-white);
	font-size: 1em;
	font-style: normal;
}

.ast-article-single .entry-content blockquote p:last-child {
	margin-bottom: 0;
}

/* Grammar boxes of the courses (built by _build/dlms-13-tagalog.php,
   t_grammar()): each form starts on a line of its own, the German form in
   yellow, its meaning in the body font. */
.ast-article-single .entry-content .dlms-grammar h4 {
	margin: 1.4em 0 0.6em;
	padding-top: 1em;
	border-top: 1px solid var(--gw-line);
	color: var(--gw-yellow);
	font-size: 1.25em;
}

.ast-article-single .entry-content .dlms-grammar .dlms-grammar__means {
	color: var(--gw-white);
	font-family: var(--gw-font-body);
	font-size: 0.8em;
	font-weight: 600;
}

.ast-article-single .entry-content .dlms-grammar ul {
	margin-bottom: 1em;
}

/* DeutschLMS colours on the dark card. `body` outranks the plugin's own
   defaults (same selectors), which load after this file on pages where a
   shortcode adds them while rendering (Kurse, Mein Lernbereich, exercises). */
body .dlms,
body .wp-block-deutschlms-course-outline,
body .wp-block-deutschlms-progress-bar,
body .wp-block-deutschlms-mark-complete,
body .wp-block-deutschlms-enroll-button,
body .wp-block-deutschlms-course-grid,
body .wp-block-deutschlms-student-dashboard {
	--dlms-accent: var(--gw-yellow);
	--dlms-accent-contrast: var(--gw-asphalt);
	--dlms-success: #4ade80;
	--dlms-success-contrast: var(--gw-asphalt);
	--dlms-danger: #f87171;
	--dlms-panel-background: var(--gw-asphalt);
	--dlms-panel-color: var(--gw-white);

	/* Article colours, lighter so they read on asphalt (der / die / das). */
	--dlms-der: #60a5fa;
	--dlms-die: #f87171;
	--dlms-das: #4ade80;
	--dlms-article-contrast: var(--gw-asphalt);
}

/* Larger text on course pages (course, lesson, topic, exercise), for learners
   (the owner's request, 2026-10-06): body 15 → 17px, small text such as the
   English and Hindi help lines 13 → 15px, headings a little larger. The rest
   of the site keeps Astra's sizes. */
body:is(.single-dlms_course, .single-dlms_lesson, .single-dlms_topic, .single-dlms_quiz) .entry-content {
	--wp--preset--font-size--small: 1rem;
	font-size: 1.1334rem;
}

body:is(.single-dlms_course, .single-dlms_lesson, .single-dlms_topic, .single-dlms_quiz) .entry-content h2 {
	font-size: 1.8667rem;
}

body:is(.single-dlms_course, .single-dlms_lesson, .single-dlms_topic, .single-dlms_quiz) .entry-content h3 {
	font-size: 1.4667rem;
}

body:is(.single-dlms_course, .single-dlms_lesson, .single-dlms_topic, .single-dlms_quiz) .entry-content h4 {
	font-size: 1.2667rem;
}

/* Astra styles every `label` and `legend` (dark grey, 14px). In exercises the
   questions are legends and the answers labels, so they take the course text
   back. :where() keeps DeutschLMS's own rules (e.g. bold questions) in charge. */
.dlms :where(label, legend) {
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

.dlms :where(label) {
	font-weight: inherit;
}

/* ---------------------------------------------------------------------------
   10. Accounts (Paid Memberships Pro: Anmelden, Registrieren, Mein Konto …)
       PMPro's own colours are set in Memberships → Settings → Design (by
       _build/10-pmpro-setup.php). This only fixes what Astra overrides.
--------------------------------------------------------------------------- */
.pmpro {
	color-scheme: dark; /* PMPro's message colours use light-dark(). */
}

/* Astra colours every `label` dark grey. */
.pmpro label,
.pmpro legend {
	color: var(--gw-white);
}

.pmpro .pmpro_asterisk abbr {
	color: var(--gw-yellow);
	text-decoration: none;
}

.pmpro a:where(:not([class])) {
	color: var(--gw-yellow);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pmpro a:where(:not([class])):hover {
	color: var(--gw-white);
}

/* ---------------------------------------------------------------------------
   11. Responsive & motion
--------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.gw-topic-grid,
	.gw-bibliothek {
		padding: 0 20px;
	}
	.gw-filter-bar {
		top: 62px;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		scroll-behavior: auto !important;
	}
}