/*
Theme Name: Lingonex Academy
Theme URI: https://lingonex.academy/
Author: Lingonex
Author URI: https://lingonex.academy/
Description: Lightweight, self-owned theme for the Lingonex Academy LMS (MasterStudy LMS + Elementor + UAE). Replaces the premium "MasterStudy Templates" parent+child, whose files a failed update wiped — taking the site down. This theme depends on no premium parent: it owns its base layer and lets MasterStudy render its own course/lesson/account pages, Elementor render page bodies, and UAE render the header/footer. Carries the Lingonex brand (burgundy #7D0122 / carmine #AF0D38, self-hosted Nunito).
Version: 1.2.2
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lingonex-academy
Tags: education, elementor, custom-menu, translation-ready, full-width-template
*/

/* ==========================================================================
   WHAT THIS FILE IS AND IS NOT

   It is not a full design system. On this site the things that render most of
   the pixels bring their own CSS: MasterStudy LMS ships the course catalogue,
   the course player, quizzes and the account dashboard; Elementor carries each
   page body's CSS inline; UAE renders the header and footer as Elementor
   templates. What is left for the theme is the base layer they all assume and
   none of them declare — box sizing, document typography, the brand tokens,
   focus states, and the handful of classes WordPress core emits.

   So the rules here are deliberately low-specificity DEFAULTS (no !important):
   where MasterStudy or Elementor set their own type or colour, theirs wins.
   The theme only fills the gaps, and gives theme-rendered content (bare pages,
   posts, archives, search, 404) the Lingonex look.

   Brand tokens are lifted from STYLEGUIDE.md in the Elementor-widgets repo, the
   same source the lingonex.de theme uses, so the two sites read as one brand.
   ========================================================================== */

/* Self-hosted Nunito (variable font, latin subset). Served from the theme, not
   Google's CDN, so no visitor IP leaves for fonts.gstatic.com. Nunito is a
   variable font, so one file covers the whole normal weight range (and one the
   italics); the latin subset covers German (ä ö ü ß are in U+0000–00FF).
   font-display:swap so text paints immediately in the fallback and swaps in. */
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 200 1000;
	font-display: swap;
	src: url('assets/fonts/nunito-latin-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Nunito';
	font-style: italic;
	font-weight: 200 1000;
	font-display: swap;
	src: url('assets/fonts/nunito-latin-italic.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Brand — burgundy / carmine, cream + green accents */
	--lx-primary:       #7D0122; /* deep burgundy — brand, links, emphasis */
	--lx-secondary:     #AF0D38; /* carmine — buttons, accents, hovers */
	--lx-primary-dark:  #5A082D; /* pressed / gradient end */
	--lx-ink:           #2B2B2B; /* strong dark text */
	--lx-heading:       #2b2126; /* heading ink (matches .de) */
	--lx-text:          #373737; /* body copy — never pure black */
	--lx-cream:         #FBF7F3; /* soft warm section background */
	--lx-offwhite:      #F9F9F9; /* alternating section background */
	--lx-border:        #ece3e6; /* hairline borders / dividers */
	--lx-green:         #35BF52; /* positive / benefit ticks only */
	--lx-dark:          #1A1A1A; /* dark footer / bands */

	/* Type — Nunito only, self-hosted (see @font-face above). One family does both
	   body and headings; no external (Google) font request, so no visitor IP is
	   sent to Google — closes the F8 GDPR exposure. */
	--lx-font-body: 'Nunito', 'Segoe UI', Helvetica, Arial, sans-serif;
	--lx-font-head: 'Nunito', 'Segoe UI', Helvetica, Arial, sans-serif;

	/* Layout */
	--lx-content: 1140px; /* readable content width */
	--lx-wide:    1480px; /* wide / full-bleed inner width */
	--lx-radius:  15px;   /* default card radius */
}

/* border-box everywhere. MasterStudy and every widget set this inside their own
   roots, i.e. they were all compensating for a document that did not. */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: #fff;
	color: var(--lx-text);
	font-family: var(--lx-font-body);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Headings: Nunito (semibold), brand ink. These are DEFAULTS for bare headings
   only — MasterStudy's own UI and Elementor headings set their own sizes and win.
   In this Nunito-only design the 600 weight here vs 400 body is the hierarchy. No
   colour on the bare rule beyond the heading ink, and it is a normal (not
   !important) declaration so a maroon CTA card with color:#fff on the card
   still tints its own heading. */
h1, h2, h3, h4, h5, h6 {
	margin: .2em 0 .5em;
	font-family: var(--lx-font-head);
	font-weight: 600;
	line-height: 1.2;
	color: var(--lx-heading);
}
/* The type scale from STYLEGUIDE.md §3 — the same responsive curve lingonex.de
   uses, so headings on both sites step through the same sizes. Fluid via
   clamp() rather than fixed px, and slightly tighter tracking on the large
   sizes, which is what stops Nunito from reading flat at display size. */
h1 { font-size: clamp(2rem, 4vw, 3.4rem);      line-height: 1.15; letter-spacing: -.01em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem);    letter-spacing: -.01em; }
h3 { font-size: clamp(1.35rem, 2vw, 1.8rem); }
h4 { font-size: clamp(1.15rem, 1.5vw, 1.5rem); }
h5 { font-size: 1.1rem; }
h6 { font-size: .95rem; letter-spacing: .5px; }

p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.4em; }
li { margin: 0 0 .35em; }
blockquote { margin: 0 0 1em; padding-left: 1em; border-left: 3px solid var(--lx-border); }
hr { border: 0; border-top: 1px solid var(--lx-border); margin: 2em 0; }

a { color: var(--lx-primary); text-decoration: none; }
a:hover { color: var(--lx-secondary); }

/* Visible keyboard focus — a real requirement, and the theme is the base layer
   that must provide it. :focus-visible so it doesn't fire on mouse clicks. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: 3px solid var(--lx-primary); outline-offset: 2px; }

img, svg, video, iframe { max-width: 100%; }
img { height: auto; border: 0; }

table { border-collapse: collapse; width: 100%; margin: 0 0 1em; }
th, td { padding: .5em .7em; border: 1px solid var(--lx-border); text-align: left; }

code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95em; }
pre { overflow-x: auto; padding: 1em; background: var(--lx-cream); border-radius: 8px; }

button, input, select, textarea { font: inherit; color: inherit; }

/* ---- classes WordPress core emits and expects the theme to style ---- */

/* Accessibility: skip link + screen-reader-only labels. Core markup relies on it. */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.screen-reader-text:focus {
	position: fixed !important;
	top: 12px; left: 12px;
	width: auto; height: auto;
	padding: 12px 20px; margin: 0;
	clip: auto; clip-path: none;
	z-index: 100000;
	background: #fff;
	color: var(--lx-primary);
	font-weight: 700;
	border-radius: 6px;
	box-shadow: 0 6px 24px -8px rgba(43,33,38,.5);
}

.alignleft { float: left; margin: 0 1.2em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.2em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide, .alignfull { max-width: none; }
.wp-caption { max-width: 100%; }
.wp-caption-text, figcaption { font-size: .85rem; color: #8a8290; margin-top: .5em; }
.sticky, .gallery-caption, .bypostauthor { /* declared for theme-check completeness */ }

/* Elementor / UAE render full-bleed; there is no theme container to fight. */
main { display: block; }

/* ==========================================================================
   STICKY FOOTER

   UAE renders the whole site inside <div id="page" class="hfeed site">, with
   its header as #masthead and its footer as #colophon — both direct children,
   verified on the Elementor homepage, on a theme-rendered page (/user-account/)
   and on a MasterStudy course page. Without this, a page whose content is
   shorter than the viewport left the footer sitting directly under the content
   with blank space beneath it, instead of at the bottom of the window.

   So: make #page a full-height flex column, let the content region grow, and
   give the footer an auto top margin to absorb any remaining slack. On long
   pages there is no free space, so nothing moves and the footer simply follows
   the content as before.

   Deliberately scoped to #page and NOT to <body>: MasterStudy's course player
   emits its own document with no #page wrapper, so it is untouched by this.
   ========================================================================== */
#page.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* Header and footer keep their natural height. */
#page.site > #masthead,
#page.site > header,
#page.site > #colophon,
#page.site > footer { flex: 0 0 auto; }

/* The content region takes the slack, so the page background belongs to the
   content rather than showing as a gap above the footer. Covers all three
   content shapes: our own templates (main), Elementor page templates
   (.elementor), and MasterStudy's framed LMS pages (.stm-lms-wrapper). */
#page.site > main,
#page.site > .elementor,
#page.site > .stm-lms-wrapper { flex: 1 0 auto; }

/* Belt and braces: whatever the content element turns out to be, an auto top
   margin on the footer still pins it to the bottom. */
#page.site > #colophon,
#page.site > footer { margin-top: auto; }

/* ==========================================================================
   BRAND SKIN — the lingonex.de design vocabulary

   Everything below comes from STYLEGUIDE.md in the Elementor-widgets repo, the
   same source lingonex.de is built from, so the two sites read as one brand:
   pill buttons in carmine with a soft coloured shadow, 15px cards with a low
   shadow, cream/off-white section tones, eyebrow labels and the short accent
   bar, green only for positive ticks.

   Scope note, deliberate: this styles what the THEME renders (its own pages,
   blog, search, 404, forms) and provides reusable .lx-* utilities for Elementor
   content. It does NOT reach into MasterStudy's dashboard/player chrome — that
   is a functional app whose own CSS already uses our brand colours (main_color
   #7D0122 / secondary_color #AF0D38 are set in MasterStudy's settings), and
   blind overrides there break icon buttons and controls. Restyling the LMS
   chrome belongs in the Lingonex LMS Customizer plugin, which exists for it.
   ========================================================================== */

/* Reading copy: 17px at 1.7, the styleguide's body setting. Applied to theme
   content rather than <body>, so the global rem base stays 16px and nothing
   in MasterStudy's or Elementor's px/rem sizing shifts underneath us. */
.lx-main { font-size: 1.0625rem; }
.lx-main p { max-width: 70ch; }
.lx-post-body { font-size: 1.0625rem; }

::selection { background: var(--lx-secondary); color: #fff; }

/* ---- Buttons ------------------------------------------------------------
   The .de signature: pill, uppercase, carmine, soft coloured shadow, lifting
   slightly on hover. Width/height are never constrained here, so a button with
   an icon keeps its natural shape. */
.lx-btn,
body .lx-search-submit,
.lx-main .wp-element-button,
.lx-main input[type="submit"],
.lx-main button[type="submit"] {
	display: inline-block;
	font-family: var(--lx-font-body);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .6px;
	font-size: .9rem;
	line-height: 1.2;
	color: #fff;
	background: var(--lx-secondary);
	text-decoration: none;
	padding: 14px 34px;
	border-radius: 100px;
	border: 2px solid var(--lx-secondary);
	box-shadow: 0 8px 20px rgba(175, 13, 56, .25);
	transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
	cursor: pointer;
}
.lx-btn:hover,
body .lx-search-submit:hover,
.lx-main .wp-element-button:hover,
.lx-main input[type="submit"]:hover,
.lx-main button[type="submit"]:hover {
	background: var(--lx-primary);
	border-color: var(--lx-primary);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(125, 1, 34, .28);
}
.lx-btn--ghost {
	background: transparent;
	color: var(--lx-secondary);
	box-shadow: none;
}
.lx-btn--ghost:hover { background: var(--lx-secondary); color: #fff; }

/* ---- Form fields -------------------------------------------------------- */
.lx-main input[type="text"],
.lx-main input[type="email"],
.lx-main input[type="url"],
.lx-main input[type="password"],
.lx-main input[type="search"],
.lx-main input[type="number"],
.lx-main input[type="tel"],
.lx-main textarea,
.lx-main select {
	width: 100%;
	max-width: 100%;
	padding: 13px 15px;
	background: #fff;
	border: 1px solid var(--lx-border);
	border-radius: 10px;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.lx-main input:focus,
.lx-main textarea:focus,
.lx-main select:focus {
	outline: none;
	border-color: var(--lx-secondary);
	box-shadow: 0 0 0 3px rgba(175, 13, 56, .15);
}

/* ---- Cards -------------------------------------------------------------- */
.lx-card {
	background: #fff;
	border: 1px solid var(--lx-border);
	border-radius: var(--lx-radius);
	padding: 26px 24px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
	transition: transform .25s ease, box-shadow .25s ease;
}
.lx-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0, 0, 0, .10); }
/* The archive/blog cards in index.php are media-first, so they carry their own
   padding rules; keep them flush and let the image sit edge to edge. */
.lx-list .lx-card { padding: 0; border: 0; box-shadow: none; }
.lx-list .lx-card:hover { transform: none; box-shadow: none; }
.lx-list .lx-card-media img { box-shadow: 0 10px 30px rgba(0, 0, 0, .08); }

/* ---- Eyebrow label + accent bar + section tones ------------------------- */
.lx-eyebrow {
	display: inline-block;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: .8rem;
	color: var(--lx-secondary);
	margin-bottom: .6rem;
}
.lx-bar {
	display: block;
	width: 60px;
	height: 4px;
	border-radius: 4px;
	background: var(--lx-secondary);
	margin: 14px 0 24px;
}
.lx-section { padding: clamp(48px, 8vw, 96px) 0; }
.lx-section--cream { background: var(--lx-cream); }
.lx-section--offwhite { background: var(--lx-offwhite); }
.lx-section--dark { background: var(--lx-dark); color: #fff; }
.lx-section--brand {
	background: linear-gradient(135deg, var(--lx-secondary) 0%, var(--lx-primary) 100%);
	color: #fff;
}
.lx-container { max-width: var(--lx-content); margin: 0 auto; padding: 0 20px; }

/* Positive ticks are the only place green appears. */
.lx-tick { color: var(--lx-green); font-weight: 700; }

/* ---- Site header ---------------------------------------------------------
   Ours, replacing UAE's Elementor header. Deliberately quiet: a white bar, the
   logo at the width UAE used (203px), and the account control pushed right.

   Sticky, because this is a portal: the account menu is the main navigation, so
   keeping it reachable while scrolling a long course or dashboard is worth more
   here than the few pixels of height. The hairline plus a very soft shadow is
   what separates it from content once the page scrolls under it — a heavier
   border would fight the cards below. */
.lx-header {
	background: #fff;
	border-bottom: 1px solid var(--lx-border);
	box-shadow: 0 1px 3px rgba(43, 33, 38, .04);
	position: sticky;
	top: 0;
	z-index: 100;
}
.lx-header__bar {
	max-width: var(--lx-wide);
	margin: 0 auto;
	padding: 14px clamp(20px, 4vw, 40px);
	display: flex;
	align-items: center;
	gap: 24px;
}
.lx-header__logo { flex: 0 0 auto; line-height: 0; }
.lx-header__logo img,
.lx-header__logo .custom-logo {
	display: block;
	width: 203px;
	max-width: 52vw;
	height: auto;
}
.lx-header__logo-link { font-weight: 700; font-size: 1.25rem; color: var(--lx-primary); line-height: 1.2; }
.lx-header__nav { flex: 1 1 auto; }
.lx-header__menu { list-style: none; display: flex; flex-wrap: wrap; gap: 22px; margin: 0; padding: 0; }
.lx-header__menu a { font-weight: 600; color: var(--lx-ink); }
.lx-header__menu a:hover { color: var(--lx-primary); }
/* Pushed right whether or not a nav is present. */
.lx-header__account { margin-left: auto; flex: 0 0 auto; }
.lx-btn--sm { padding: 10px 22px; font-size: .8rem; }

/* ---- Site footer --------------------------------------------------------- */
.lx-footer { background: var(--lx-cream); border-top: 1px solid var(--lx-border); }
.lx-footer__inner {
	max-width: var(--lx-wide);
	margin: 0 auto;
	padding: 30px clamp(20px, 4vw, 40px);
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}
.lx-footer__title { font-size: 1rem; font-weight: 600; margin: 0; }
.lx-footer__title a { color: var(--lx-heading); }
.lx-footer__title a:hover { color: var(--lx-primary); }
.lx-footer__social { list-style: none; display: flex; gap: 14px; margin: 0; padding: 0; }
.lx-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	color: var(--lx-primary);
	background: #fff;
	border: 1px solid var(--lx-border);
	transition: background .2s ease, color .2s ease, transform .2s ease;
}
.lx-footer__social a:hover { background: var(--lx-primary); color: #fff; transform: translateY(-2px); }
.lx-footer__copy { margin: 0 0 0 auto; font-size: .85rem; color: #8a8290; }
@media (max-width: 640px) {
	.lx-footer__inner { justify-content: center; text-align: center; }
	.lx-footer__copy { margin: 0; width: 100%; }
}

/* Brand-tinted quotes and rules, so long-form content reads as Lingonex. */
.lx-main blockquote,
.lx-post-body blockquote {
	border-left: 4px solid var(--lx-secondary);
	background: var(--lx-cream);
	border-radius: 0 var(--lx-radius) var(--lx-radius) 0;
	padding: 18px 22px;
	margin: 0 0 1.4em;
}
.lx-main blockquote p:last-child,
.lx-post-body blockquote p:last-child { margin-bottom: 0; }