/* Public pages: shared header/footer, landing, legal, contact (+ auth card in account/). */

/* ---- Shared sticky header ---- */
.pub-header {
  position: sticky;
  top: 0;
  z-index: 60;
  /* The canvas, translucent so the blur has something to do — NOT a colour of
     its own. It used to be a hardcoded rgba(253,244,227,.88), i.e. the original
     #FDF4E3, which stayed behind when --canvas was lightened and left the header
     reading as a yellow band above a page that no longer matched it. The rgba
     line is the fallback for a browser without color-mix. */
  background: rgba(251, 247, 238, .88);
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.pub-header-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 32px);
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 26px;
}

/* The lockup itself (mark size, wordmark, gap) is defined once in components.css
   under .brand-lockup — nothing here may resize it. */
.pub-brand { flex: none; }

.pub-nav { display: flex; align-items: center; gap: 22px; margin-left: 12px; }
.pub-nav a { font-size: 14px; font-weight: 500; color: var(--slate); }
.pub-nav a:hover { color: var(--ink-warm); }

.pub-header-spacer { flex: 1; }

/* The two actions used to be indistinguishable in weight — same 14px, same 600,
   and the link's ink was the very colour filling the button next to it, so
   neither read as primary. The secondary one now steps back. The gap is at
   least the button's own 20px padding, otherwise the link sits closer to the
   pill than the pill's label sits to its edge and reads as having fallen out. */
.pub-auth { display: flex; align-items: center; gap: 22px; }
.pub-auth .pub-login { font-size: 14px; font-weight: 500; color: var(--slate); }
.pub-auth .pub-login:hover { color: var(--ink-warm); }

.pub-back { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; margin-left: auto; }

/* ---- Shared small footer (legal pages) ---- */
.pub-footer { border-top: 1px solid var(--border); padding: 22px clamp(18px, 4vw, 32px); }
.pub-footer-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
}
.pub-footer-inner > span { font-size: 12.5px; color: var(--muted-3); }
.pub-footer-links { display: flex; align-items: center; gap: 18px; }
.pub-footer-links a { font-size: 12.5px; color: var(--slate); }
.pub-footer-links a:hover { color: var(--ink-warm); }
.pub-footer-links a.is-current { font-weight: 600; color: var(--ink-warm); }

/* The public pages read in the app's ink, not the base one. `base.css` sets the
   document to --ink (#0F2230, a cool navy) while the app's reading surfaces —
   the lesson above all — sit at --ink-warm (#1C1B19): warm near-black on warm
   cream. Everything under here inherits it, headings included (base.css sets
   h1-h3 to `color: inherit`), so the landing's <h1> stops being a colder black
   than the lesson title it is advertising. The secondary greys are deliberately
   left alone — --muted / --slate are already what the lesson subtitle wears. */
.pub-page { min-height: 100vh; background: var(--canvas); color: var(--ink-warm); display: flex; flex-direction: column; overflow-x: clip; }

/* ==================== Landing ==================== */
/* One row while there is room; on a phone the CTA drops onto a line of its own
   instead of the link itself breaking mid-word. */
.land-anunt {
  background: var(--navy);
  color: var(--canvas);
  font-size: 13px;
  text-align: center;
  padding: 9px 16px;
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 7px;
}
.land-anunt a { color: var(--teal-bright); font-weight: 600; white-space: nowrap; }

@media (max-width: 640px) {
  .land-anunt { flex-direction: column; gap: 2px; }
  .land-anunt-sep { display: none; }
}

.land-wrap { min-height: 100vh; background: var(--canvas); overflow-x: clip; }

/* Hero */
.land-hero { position: relative; padding: clamp(56px, 9vh, 96px) clamp(18px, 4vw, 32px) 0; }
.land-hero-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
}

.land-h1 {
  font-size: clamp(34px, 7.4vw, 88px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.land-h1 span { color: var(--teal); }

.land-sub {
  margin: 0;
  max-width: 640px;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

.land-cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }

.land-colegi { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.land-colegi-note { font-size: 13.5px; color: var(--muted); }
.land-colegi-note strong { color: var(--ink-warm); font-weight: 600; }

.land-hero-art { display: block; width: 100%; max-width: 1240px; margin: clamp(8px, 2vw, 28px) auto 0; }

/* Learning section */
.land-invatare { padding: clamp(72px, 11vh, 130px) clamp(18px, 4vw, 32px) clamp(40px, 6vh, 70px); }
.land-invatare-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(60px, 9vh, 110px);
}

.land-sec-head { max-width: 780px; display: flex; flex-direction: column; gap: 18px; }

.land-h2 {
  font-size: clamp(34px, 4.8vw, 56px);
  line-height: 1.1;
  text-wrap: balance;
}

.land-lede {
  margin: 0;
  font-size: clamp(16px, 1.9vw, 18.5px);
  line-height: 1.65;
  color: var(--muted);
  text-wrap: pretty;
}

.land-feat { display: flex; align-items: center; gap: clamp(28px, 5vw, 72px); flex-wrap: wrap; }
.land-feat--rev { flex-direction: row-reverse; }

.land-feat-art { flex: 1 1 380px; min-width: 300px; max-width: 540px; height: auto; }

.land-feat-body { flex: 1 1 380px; min-width: 280px; display: flex; flex-direction: column; gap: 14px; }

.land-feat-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.land-h3 { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }

.land-feat-body p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--muted); text-wrap: pretty; }

.land-feat-link { font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }

/* Community (dark) section */
.land-com { background: var(--navy); padding: clamp(80px, 12vh, 140px) clamp(18px, 4vw, 32px); }
.land-com-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(44px, 7vh, 72px);
}
.land-com .land-sec-head { max-width: 820px; }
.land-com .land-h2 { color: var(--canvas); }
.land-com .land-lede { color: var(--navy-text); }

.land-com-art { display: block; width: 100%; max-width: 1080px; margin: 0 auto; }

.land-com-cards { display: flex; gap: 18px; flex-wrap: wrap; }

.land-com-card {
  flex: 1 1 280px;
  min-width: 250px;
  background: var(--navy-2);
  border: 1px solid var(--navy-line);
  border-radius: var(--r-lg);
  padding: 26px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.land-com-ico {
  width: 58px; height: 58px;
  border-radius: 15px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.land-com-card-title { font-size: 18px; font-weight: 600; color: var(--canvas); margin-top: 4px; }
.land-com-card-body { font-size: 14.5px; line-height: 1.6; color: var(--navy-text); text-wrap: pretty; }

.land-com-cta { display: flex; justify-content: center; }

/* Final CTA */
.land-final { padding: clamp(80px, 12vh, 140px) clamp(18px, 4vw, 32px); }
.land-final-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.land-final .land-h2 { font-size: clamp(34px, 5vw, 58px); line-height: 1.08; }
.land-final .land-lede { max-width: 560px; }
.land-final-note { font-size: 13px; color: var(--muted-2); }
/* The one way in for someone who already has an account and has read the page */
.land-final-login { margin-top: 4px; font-size: 14px; color: var(--muted); }
.land-final-login a { font-weight: 600; color: var(--teal); }
.land-final-login a:hover { color: var(--teal-hover); text-decoration: underline; }

/* Big footer */
.land-footer { border-top: 1px solid var(--border); padding: 44px clamp(18px, 4vw, 32px) 52px; }
.land-footer-inner { max-width: 1140px; margin: 0 auto; display: flex; flex-direction: column; gap: 30px; }
.land-footer-cols { display: flex; gap: 32px 56px; flex-wrap: wrap; align-items: flex-start; }

.land-footer-brand { display: flex; flex-direction: column; gap: 10px; flex: 1 1 260px; min-width: 220px; }
.land-footer-brand .tagline { font-size: 13.5px; color: var(--muted-2); line-height: 1.55; }

.land-footer-col { display: flex; flex-direction: column; gap: 9px; min-width: 130px; }
.land-footer-col > span {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-3);
}
.land-footer-col a { font-size: 13.5px; color: var(--slate); }
.land-footer-col a:hover { color: var(--ink-warm); }

.land-footer-bottom { border-top: 1px solid var(--divider); padding-top: 18px; font-size: 12.5px; color: var(--muted-3); }

/* ==================== Legal pages ==================== */
.legal-main { flex: 1; padding: clamp(48px, 8vh, 80px) clamp(18px, 4vw, 32px) clamp(60px, 9vh, 100px); }

.legal-inner { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 34px; }
.legal-inner--wide { max-width: 920px; gap: 36px; }

.legal-head { display: flex; flex-direction: column; gap: 14px; }
.legal-head h1 { font-size: clamp(34px, 5.5vw, 50px); line-height: 1.1; }
.legal-date { font-size: 13.5px; color: var(--muted-2); }
.legal-head .land-lede { max-width: 620px; font-size: 16px; }

.legal-summary { padding: 18px 20px; display: flex; gap: 15px; align-items: flex-start; }
.legal-summary svg { flex: none; margin-top: 2px; }
.legal-summary-title { font-size: 14.5px; font-weight: 600; color: var(--ink-warm); }
.legal-summary-body { margin-top: 4px; font-size: 13.5px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }

.legal-sections { display: flex; flex-direction: column; gap: 28px; }
.legal-sections section { display: flex; flex-direction: column; gap: 8px; }
.legal-sections h2 { font-size: 21px; }
.legal-sections p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--muted); text-wrap: pretty; }
.legal-sections a { font-weight: 600; }

/* ==================== Contact ==================== */
.contact-cards { display: flex; gap: 16px; flex-wrap: wrap; }

.contact-card {
  flex: 1 1 250px;
  min-width: 230px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact-card-title { font-size: 16px; font-weight: 600; margin-top: 2px; }
.contact-card-body { font-size: 13.5px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.contact-card a { font-size: 14px; font-weight: 600; }

.contact-form {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  padding: clamp(22px, 4vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 640px;
}
.contact-form-title { font-family: var(--font-serif); font-size: 23px; font-weight: 600; }
.contact-form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.contact-form-row .field { flex: 1 1 220px; }
.contact-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.contact-form-note { font-size: 12.5px; color: var(--muted-2); }

/* ---- Public pages: mobile ---- */
@media (max-width: 640px) {
  .pub-nav { display: none; }
  .pub-header-inner { gap: 12px; }
  .pub-auth { gap: 16px; }
  /* Signing in used to be unreachable from a phone: this was `display: none`
     and the landing page carried no other login link. The nav is hidden at this
     width anyway, so there is room — it just shrinks. */
  .pub-auth .pub-login { font-size: 13px; white-space: nowrap; }
  .pub-auth .btn--dark { padding-left: 14px; padding-right: 14px; font-size: 13.5px; }
  .pub-back { font-size: 13px; }
  .land-hero-inner { gap: 20px; }
  .land-h1 { font-size: 30px; }
  .land-cta-row .btn { flex: 1 1 auto; justify-content: center; }
  .land-footer-cols { gap: 24px 32px; }
}