/* ═══════════════════════════════════════════
   BRAND MARK  (logo system — see includes/brand-mark.php)

   Loaded globally from header.php so it reaches every page regardless
   of which page stylesheet (main / index / admin / login) is active.

   Theme-aware: both the light & dark <img> variants are placed in the
   DOM; we show the one matching html[data-theme]. Default (no attr)
   shows the light variant, matching header.php's default theme. The
   swap is instant on toggle (no src change, no network, no flash).
═══════════════════════════════════════════ */
.lt-mark{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0;vertical-align:middle;}
.lt-mark__img{display:block;width:100%;height:100%;object-fit:contain;}

/* Theme swap. Default = light shown, dark hidden. */
.lt-mark__dark{display:none;}
html[data-theme="dark"] .lt-mark__light{display:none;}
html[data-theme="dark"] .lt-mark__dark{display:block;}

/* ── Icon-only (square) size variants ── */
.lt-mark--mark.lt-mark--xs{width:30px;height:30px;}
.lt-mark--mark.lt-mark--sm{width:32px;height:32px;}
.lt-mark--mark.lt-mark--md{width:64px;height:64px;}
.lt-mark--mark.lt-mark--lg{width:96px;height:96px;}

/* ── Lockup (wider than tall): constrain by height, width auto ── */
.lt-mark--lockup{display:inline-block;line-height:0;}
.lt-mark--lockup .lt-mark__img{width:auto;height:100%;}
.lt-mark--lockup.lt-mark--md{height:120px;}
.lt-mark--lockup.lt-mark--lg{height:150px;}

/* ── Context tweaks ──
   IMPORTANT: the base size rule above (.lt-mark--mark.lt-mark--xs) is a
   two-class selector = specificity (0,2,0). A plain one-class override like
   .ltd-brand-mark (0,1,0) LOSES to it and never applies. So every per-context
   size override below is written as a THREE-class selector (0,3,0) to win
   cleanly, regardless of stylesheet load order. */

/* App nav (dashboard / tutor / practice-test) — nav-v2 .ltd-brand */
.lt-mark--mark.lt-mark--xs.ltd-brand-mark{width:42px;height:42px;}

/* Landing page nav brand */
.lt-mark--mark.lt-mark--xs.lp-brand-mark{width:42px;height:42px;}

/* Admin header/sidebar brand icon */
.lt-mark--mark.lt-mark--xs.admin-logo-mark{width:42px;height:42px;}

/* Old-nav pages (billing/pricing/etc.) — align with the "Law Twist" text */
.lt-mark--mark.lt-mark--xs.nav-brand-mark{width:26px;height:26px;}

/* Landing mock-window title strip — small inline mark */
.lt-mark--mark.lt-mark--xs.lp-mockup-mark{width:18px;height:18px;}

/* Inline alignment for the brand links */
.lp-brand{display:inline-flex;align-items:center;gap:8px;}
.lp-mockup-title{display:inline-flex;align-items:center;gap:6px;}

/* ── Brand wordmark "Law Twist" text size — sized to balance the 42px mark.
   Placed here (global) so it also reaches main.css/admin.css pages. Uses a
   2-class selector where possible to win over the base 1.1rem nav rule. */
.ltd-topnav .ltd-brand-name{font-size:30px;}        /* app nav */
.lp-nav .lp-brand{font-size:30px;}                  /* landing */
.admin-logo .admin-logo-name{font-size:30px;}       /* admin */

/* Login / forgot / reset: lockup centered in the card */
.login-logo-lockup{height:96px;}
.login-logo .lt-mark--lockup{display:block;margin:0 auto;}
@media (max-width:480px){.login-logo-lockup{height:76px;}}