/* Landing page — the public marketing page, ported from the approved `landing.html`.
 *
 * `landing.html` is the source of truth. Every rule below is that file's single <style> block,
 * copied faithfully, plus the handful of rules the MVC page genuinely needs on top. Nothing here
 * is shared with, or inherited from, wwwroot/css/site.css:
 *
 *   * This file is loaded ONLY by Views/Shared/_LandingLayout.cshtml; site.css is loaded ONLY by
 *     Views/Shared/_Layout.cshtml. Neither layout loads the other's stylesheet, so no internal
 *     selector (.app, aside, main, the dashboard's .top/.row/.hero/.card/.g3, th, td, .lg, .bn,
 *     .chip, .nv, .cs, .note, .bar, .mo, ...) can reach the landing page.
 *   * `.lp-body` is the class the landing layout puts on <body>. It carries only the two
 *     document-level rules that cannot be expressed on a descendant: the :root colour tokens and
 *     the body box (page background, colour, 15px/1.6 type). No other view emits that class, so
 *     the tokens here cannot reach an internal page either.
 *   * `.lp` is the landing page's own root element (the <div class="lp"> in Home/Index.cshtml).
 *     Every landing component rule is scoped under it, which keeps the generic names this design
 *     uses — .top, .hero, .row, .btn, .card, .sub, .tag, .av, .bd, .sel, .fl, .toast — from
 *     colliding with the internal application's identically named rules in either direction.
 *   * Nothing here clips .lp. `overflow-x: hidden` on an ancestor turns it into the sticky
 *     scrollport, which silently stops the prototype's `header.top { position: sticky }` from ever
 *     sticking. The prototype does not clip either, and nothing on the page overflows sideways:
 *     every row is a wrapping flex line inside .wrap, and .heroart already has `overflow: hidden`
 *     to contain its own decorative ::after.
 *
 * Two deliberate deviations from the prototype, both forced by the real MVC page:
 *   * the newsletter band lays the seven-field application form out in a centred grid instead of
 *     the prototype's single centred email row (the prototype has one field, the app has seven);
 *   * the mobile menu is a real disclosure (a hidden element plus a click handler) rather than an
 *     inline onclick, so it still works with scripting restricted.
 * Both keep the prototype's own skin: the band's dark background, the white-on-transparent input
 * border/background, the brand button.
 */

/* ---- document level (landing layout's <body class="lp-body">) -------------------------------- */
.lp-body,.lp-body *{box-sizing:border-box}

.lp-body{--ink:#10262b;--ink2:#1c3a41;--bg:#f4f0e8;--sf:#fffdf8;--tx:#15292d;--mu:#65777a;--bd:#e4ddcf;--br:#c8892b;--brs:#f6e6c8;--tl:#1f7a72;--tls:#dcefec;--ok:#2e8b57;--wn:#c8892b;--er:#c0392b;--in:#2d6cdf;--r:14px;--sh:0 1px 2px #10262b14,0 8px 24px #10262b0d;margin:0;background:var(--bg);color:var(--tx);font:15px/1.6 'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,sans-serif}
[data-t=d] .lp-body{--bg:#0c1a1d;--sf:#132a2f;--tx:#eee8da;--mu:#93a7a9;--bd:#254047;--brs:#3a2d14;--tls:#153c39}
[dir=rtl] .lp-body,[dir=rtl] .lp-body button,[dir=rtl] .lp-body input,[dir=rtl] .lp-body select,[dir=rtl] .lp-body textarea{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif}

/* Optional Cairo application font — UI:EnableCairoFont. Same switch, same contract as site.css:
   the flag only renders data-font="c" on <html>, so these rules match nothing when it is off and
   the IBM Plex Sans / IBM Plex Sans Arabic / Fraunces stack above stands unchanged. Cairo is
   appended to the existing families, never substituted for them. */
html[data-font=c] .lp-body,html[data-font=c] .lp-body button,html[data-font=c] .lp-body input,html[data-font=c] .lp-body select,html[data-font=c] .lp-body textarea{font-family:'Cairo','IBM Plex Sans','IBM Plex Sans Arabic',system-ui,sans-serif}
html[data-font=c][dir=rtl] .lp-body,html[data-font=c][dir=rtl] .lp-body button,html[data-font=c][dir=rtl] .lp-body input,html[data-font=c][dir=rtl] .lp-body select,html[data-font=c][dir=rtl] .lp-body textarea{font-family:'Cairo','IBM Plex Sans Arabic','IBM Plex Sans',system-ui,sans-serif}
html[data-font=c] .lp h1,html[data-font=c] .lp h2,html[data-font=c] .lp h3,html[data-font=c] .lp .logo,html[data-font=c] .lp .stats b,html[data-font=c] .lp .path .n,html[data-font=c] .lp .quote{font-family:'Cairo',Fraunces,'IBM Plex Sans Arabic',serif}

/* ---- typography, links, focus ------------------------------------------------------------- */
.lp h1,.lp h2,.lp h3{font-family:Fraunces,'IBM Plex Sans Arabic',serif;margin:0;letter-spacing:-.01em}
[dir=rtl] .lp h1,[dir=rtl] .lp h2,[dir=rtl] .lp h3{letter-spacing:0}
.lp button,.lp input,.lp select,.lp textarea{font:inherit;color:inherit}
.lp a{color:inherit;text-decoration:none}
.lp :focus-visible{outline:3px solid var(--br);outline-offset:2px}

/* ---- content measure: the prototype's 1120px wrap, unchanged --------------------------------- */
.lp .wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* ---- header --------------------------------------------------------------------------------- */
.lp header.top{position:sticky;top:0;background:var(--bg)ee;backdrop-filter:blur(6px);z-index:20;border-bottom:1px solid var(--bd)}
.lp .topin{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.lp .logo{display:flex;gap:10px;align-items:center;font:800 20px Fraunces,serif}
.lp .logo i{width:34px;height:34px;border-radius:10px;background:var(--br);display:grid;place-items:center;color:var(--ink);font-style:normal}
.lp .mnu{display:flex;gap:26px;align-items:center}
.lp .mnu a{color:var(--mu);font-weight:500}
.lp .mnu a:hover{color:var(--tx)}
.lp .topr{display:flex;gap:8px;align-items:center}
.lp .mnub{display:none;border:1px solid var(--bd);background:var(--sf);border-radius:10px;padding:8px 10px}
.lp .mobilemenu{border-top:1px solid var(--bd)}
.lp .mobilemenu .wrap{display:flex;flex-direction:column;padding:12px 24px;gap:10px}

/* ---- controls: buttons, the EN/عربي switch, the brand button -------------------------------- */
.lp .btn{border:1px solid var(--bd);background:var(--sf);border-radius:10px;padding:10px 18px;cursor:pointer;font-weight:600}
.lp .btn.br{background:var(--br);border-color:var(--br);color:var(--ink)}
.lp .btn.p{background:var(--ink);color:#fff;border-color:var(--ink)}
.lp .btn.big{padding:14px 26px;font-size:16px}
.lp .btn:disabled{opacity:.5;cursor:not-allowed}
.lp .sel{display:inline-flex;background:var(--sf);border:1px solid var(--bd);border-radius:999px;padding:3px}
.lp .sel a,.lp .sel button{border:0;background:0;padding:5px 12px;border-radius:999px;cursor:pointer;display:inline-block}
.lp .sel .on{background:var(--ink);color:#fff}

/* ---- hero ----------------------------------------------------------------------------------- */
.lp .hero{padding:76px 0 60px;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.lp .hero small{letter-spacing:.12em;text-transform:uppercase;color:var(--tl);font-weight:700}
[dir=rtl] .lp .hero small{letter-spacing:0}
.lp .hero h1{font-size:52px;line-height:1.06;margin:10px 0 18px}
.lp .hero p.lead{color:var(--mu);font-size:17.5px;max-width:46ch}
.lp .cta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.lp .stats{display:flex;gap:30px;margin-top:34px;flex-wrap:wrap}
.lp .stats b{display:block;font:800 26px Fraunces,serif}
.lp .stats span{color:var(--mu);font-size:13px}

/* ---- cards ---------------------------------------------------------------------------------- */
.lp .card{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:22px;box-shadow:var(--sh)}

/* ---- hero art: the next-session panel -------------------------------------------------------- */
.lp .heroart{background:var(--ink);border-radius:22px;padding:26px;position:relative;overflow:hidden;color:#f3ead6;box-shadow:var(--sh)}
.lp .heroart:after{content:"";position:absolute;inset-inline-end:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(#c8892b88,transparent 70%)}
.lp .heroart .kick{color:#e2b56d;letter-spacing:.1em;text-transform:uppercase}
.lp .heroart h3{margin:6px 0 2px;font-size:24px}
.lp .heroart .sub{color:#c9d5d3;margin:0}
.lp .heroart .row{display:flex;justify-content:space-between;align-items:center;background:#ffffff10;border-radius:12px;padding:12px 14px;margin-top:12px}
.lp .heroart .join{width:100%;margin-top:16px}

/* ---- status pills ---------------------------------------------------------------------------- */
.lp .bd{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:2px 10px;font-size:12.5px;font-weight:600}
.lp .bd:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.lp .s-live{background:#fde3e0;color:var(--er)}
.lp .s-live:before{animation:pl 1.2s infinite}
.lp .s-scheduled{background:#e3ecfc;color:var(--in)}
@keyframes pl{50%{opacity:.2}}

/* ---- sections -------------------------------------------------------------------------------- */
.lp section{padding:56px 0}
.lp section h2{font-size:32px}
.lp section .sub{color:var(--mu);max-width:60ch;margin-top:8px}
.lp .g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:30px}
.lp .g4{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:26px}

/* ---- feature cards --------------------------------------------------------------------------- */
.lp .feat i{width:42px;height:42px;border-radius:11px;background:var(--tls);color:var(--tl);display:grid;place-items:center;margin-bottom:12px}
.lp .feat svg{width:22px;height:22px}
.lp .feat p{color:var(--mu);margin:6px 0 0}

/* ---- the four numbered steps ------------------------------------------------------------------ */
.lp .path{display:flex;gap:18px;align-items:flex-start;margin-top:26px}
.lp .path .n{font:800 30px Fraunces,serif;color:var(--br);width:44px;flex:none}
.lp .path+.path{border-top:1px dashed var(--bd);padding-top:22px}
.lp .path p{color:var(--mu);margin:4px 0 0}

/* ---- teacher card: the shared .card + .av + .tag components, given a name row ---------------- */
.lp .tag{display:inline-block;background:var(--tls);color:var(--tl);border-radius:8px;padding:1px 9px;font-size:12.5px;margin:1px 2px;font-weight:500}
.lp .av{width:38px;height:38px;border-radius:50%;background:var(--brs);color:#8a5a0e;display:inline-grid;place-items:center;font-weight:700;margin-inline-end:10px;vertical-align:middle}
.lp .tname{font-size:17px}
.lp .tmeta{color:var(--mu);margin:10px 0 0}
.lp .tmeta .tag{margin:4px 2px 0 0}
[dir=rtl] .lp .tmeta .tag{margin:0 2px 0 4px}

/* ---- audience cards and the testimonial -------------------------------------------------------- */
.lp .rolecard b{font-size:17px}
.lp .rolecard p{color:var(--mu);margin-top:10px}
.lp .quote{font-family:Fraunces,serif;font-size:19px;line-height:1.5;margin-top:14px}
.lp .byline{color:var(--mu);margin-top:10px}
.lp .quotecard{padding:34px}

/* ---- contact split ------------------------------------------------------------------------------ */
.lp .split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.lp .contactcard{margin-top:22px}
.lp .contactcard p{color:var(--mu);margin:6px 0 0}
.lp .contactcard h3 + h3{margin-top:18px}

/* ---- forms -------------------------------------------------------------------------------------- */
.lp .fl{display:grid;gap:14px}
.lp .fl label{font-weight:600;font-size:14px;display:grid;gap:5px}
.lp .fl input,.lp .fl select,.lp .fl textarea{padding:11px 13px;border:1px solid var(--bd);border-radius:10px;background:var(--bg);width:100%}
.lp .fl textarea{resize:vertical;min-height:110px}
.lp .fl .er input,.lp .fl .er select,.lp .fl .er textarea{border-color:var(--er)}
.lp .fl .em{color:var(--er);font-weight:400;font-size:13px;display:block}
.lp .fl .h{color:var(--mu);font-weight:400;font-size:12.5px}
.lp .two-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lp .ok-box{display:flex;gap:12px;align-items:flex-start;background:var(--tls);border:1px solid #bfe3dd;color:#12483f;border-radius:12px;padding:16px}
[data-t=d] .lp .ok-box{color:#c9ece5}

/* ---- the newsletter / application band ------------------------------------------------------------ */
.lp .sub-band{background:var(--ink);color:#f3ead6;border-radius:22px;padding:38px;text-align:center}
.lp .sub-band h2{color:#fff}
.lp .sub-band p{color:#cfd9d6;max-width:46ch;margin:8px auto 22px}
.lp .sub-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:560px;margin:0 auto;text-align:start}
.lp .sub-form label{font-weight:600;font-size:14px;display:grid;gap:5px}
.lp .sub-form input,.lp .sub-form select{padding:12px 16px;border-radius:10px;border:1px solid #ffffff33;background:#ffffff14;color:#fff;width:100%}
.lp .sub-form input::placeholder{color:#cfd9d6}
.lp .sub-form select option{color:#15292d}
.lp .sub-form .full{grid-column:1 / -1}
.lp .sub-form .err input,.lp .sub-form .err select{border-color:#f0a49b}
.lp .sub-form .em{color:#ffc9c2;font-weight:400;font-size:12.5px;display:block}
.lp .sub-form .h{color:#cfd9d6;font-weight:400;font-size:12.5px}
.lp .sub-actions{grid-column:1 / -1;display:flex;justify-content:center;margin-top:6px}
.lp .sub-ok{max-width:460px;margin:0 auto;background:#ffffff18;border-color:#ffffff33;color:#f3ead6}
.lp .form-errors{grid-column:1 / -1;background:#7a2018;border:1px solid #f0a49b;color:#ffe3df;border-radius:12px;padding:10px 14px;font-size:13.5px}
.lp .form-errors ul{margin:0;padding-inline-start:18px}

/* ---- footer ---------------------------------------------------------------------------------------- */
.lp footer{border-top:1px solid var(--bd);padding:36px 0;color:var(--mu);font-size:13.5px}
.lp .fgrid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px}
.lp .flinks{display:flex;gap:18px}

/* ---- the prototype's transient message --------------------------------------------------------------- */
.lp .toast{position:fixed;bottom:24px;inset-inline-start:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 20px;border-radius:12px;z-index:60;box-shadow:var(--sh)}
[dir=rtl] .lp .toast{transform:translateX(50%)}

/* ---- the prototype's single breakpoint ----------------------------------------------------------------- */
@media(max-width:900px){
  .lp .hero,.lp .split{grid-template-columns:1fr}
  .lp .hero{padding:44px 0 36px}
  .lp .hero h1{font-size:38px}
  .lp .mnu{display:none}
  .lp .mnub{display:inline-flex}
  .lp .two-row{grid-template-columns:1fr}
  .lp .sub-form{grid-template-columns:1fr}
}
