/*
 * Web 2.0 static-page upgrade.
 *
 * The SEO/static HTML bundle (Blog, Tools, articles) used to ship its own
 * rust-accent token set (`home-static.css`, `vocabulary-builder.css`,
 * `blog/secondary-page.css`, …) and a separate legacy desktop header
 * styled by `home-static-layout.css`.  The React SPA meanwhile moved to the
 * purple ClaviSay 2.0 brand and the floating `.landing-2-nav` pill.
 *
 * This stylesheet is the single override layer that brings every static page
 * onto the same surface as the SPA.  It MUST be linked AFTER
 * `home-static-layout.css`, `home-static.css`, `vocabulary-builder.css`,
 * `blog/secondary-page.css`, `seo-secondary-page.css`,
 * `article-reading-vocabulary.css`, and `legal-page.css` so the new tokens
 * win the cascade.
 */

:root {
  /* ClaviSay 2.0 brand — keep in sync with apps/web/src/styles.css. */
  --color-brand-00: #9583ed;
  --color-brand-01: #ffdd6f;
  --color-brand-02: #c3dcfd;
  --color-bg-solid-00: #fdf9f3;
  --color-bg-solid-01: #ffffff;
  --color-surface-00: rgb(149 131 237 / 50%);
  --color-surface-05: #e7ddf6;

  --bg: var(--color-bg-solid-00);
  --surface: var(--color-bg-solid-01);
  --surface-soft: var(--color-surface-05);
  --primary: var(--color-brand-00);
  --primary-strong: #646fe3;
  --primary-soft: var(--color-surface-00);
  --highlight: rgb(255 221 111 / 50%);

  /*
   * Override the legacy rust accent everywhere.  Both `--accent` and
   * `--vb-primary` flip to the purple brand so consumers (`.hl-terracotta`,
   * `.layout__lang-option--current`, `.vb-…`, gradients, etc.) follow
   * automatically.
   */
  --accent: oklch(67% 0.153 289);
  --accent-soft: oklch(67% 0.153 289 / 0.08);
  --accent-bg: oklch(96% 0.018 289);
  --accent-glow: oklch(67% 0.153 289 / 0.3);
  --vb-primary: var(--accent);
  --vb-primary-soft: var(--accent-bg);

  --web2-surface-raised: color-mix(in oklch, var(--surface) 94%, var(--primary-soft));
  --web2-surface-muted: color-mix(in oklch, var(--surface-soft) 86%, var(--primary-soft));
  --web2-border-strong: color-mix(in oklch, var(--border) 72%, var(--primary) 28%);
  --web2-shadow-soft: 0 18px 42px oklch(27% 0.03 40 / 0.12);
  --web2-shadow-float: 0 26px 72px oklch(27% 0.04 40 / 0.18);
}

/*
 * `vocabulary-builder.css` redefines the accent locally on `.vb-page` with
 * class-level specificity, which would otherwise beat the `:root` overrides
 * above inside that subtree.  Repeat the purple override at the same scope so
 * every Tools page joins the brand.
 */
.vb-page {
  --vb-primary: oklch(67% 0.153 289);
  --vb-primary-soft: oklch(96% 0.018 289);
  --accent: oklch(67% 0.153 289);
  --accent-soft: oklch(67% 0.153 289 / 0.08);
  --accent-bg: oklch(96% 0.018 289);
  --accent-glow: oklch(67% 0.153 289 / 0.3);
  --primary: oklch(67% 0.153 289);
}

/*
 * The Landing 2.0 floating pill nav.
 *
 * These rules are ported from apps/web/src/styles/web-2-foundation.css and
 * The menu is positioned from the Header's center so route-specific content
 * in the left and right regions cannot move it.
 */
.layout--landing-nav .layout__header {
  position: sticky;
  top: 0;
  z-index: 200;
  width: 100%;
  max-width: none;
  border-bottom: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

@media (min-width: 1101px) {
  .layout--landing-nav .layout__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 84px;
    padding: 13px 32px 13px 80px;
  }

  .layout--landing-nav .layout__topnav-left {
    display: contents;
  }

  /* Hide the wordmark on landing pages — the floating pill is the identity. */
  .layout--landing-nav .layout__brand {
    display: none;
  }

  .layout--landing-nav .landing-2-nav {
    position: absolute;
    left: 50%;
    display: flex;
    flex: 0 0 auto;
    width: fit-content;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 58px;
    margin: 0;
    padding: 6px;
    border-radius: 26px;
    background: #ffffffa8;
    box-shadow: 0 14px 30px #5c4d4620;
    transform: translateX(-50%);
  }

  .layout--landing-nav .landing-2-nav > a {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 20px;
    color: #5c5753;
    font-size: 15px;
    font-weight: 600;
    line-height: 46px;
    text-decoration: none;
    white-space: nowrap;
  }

  .layout--landing-nav .landing-2-nav > a.active,
  .layout--landing-nav .landing-2-nav > a:hover {
    background: #fff;
    color: #171412;
    box-shadow: 0 5px 16px #5c4d4620;
  }

  .layout--landing-nav .landing-2-nav__tools {
    height: 46px;
  }

  .layout--landing-nav .landing-2-nav__tools .layout__tools-trigger {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 0 18px;
    border: 0;
    border-radius: 20px;
    background: transparent;
    color: #5c5753;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 46px;
    white-space: nowrap;
    cursor: pointer;
  }

  .layout--landing-nav .landing-2-nav__tools:hover .layout__tools-trigger,
  .layout--landing-nav .landing-2-nav__tools:focus-within .layout__tools-trigger {
    background: #fff;
    color: #171412;
    box-shadow: 0 5px 16px #5c4d4620;
  }

  .layout--landing-nav .landing-2-nav__tools .layout__tools-panel {
    top: calc(100% + 10px);
    left: 0;
    min-width: 220px;
    padding: 8px;
    border-radius: 14px;
    background: oklch(100% 0 0 / 0.96);
    box-shadow: var(--web2-shadow-float);
  }

  .layout--landing-nav .landing-2-nav__tools .layout__tools-panel a {
    display: flex;
    min-height: 38px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--fg);
    font-size: 14px;
  }

  .layout--landing-nav .landing-2-nav__tools .layout__tools-panel a:hover {
    background: var(--accent-soft);
    color: var(--accent);
  }

  .layout--landing-nav .layout__nav--actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
  }

  .layout--landing-nav .landing-2-nav__help {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #fff7f2;
    color: #171412;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
  }

  .layout--landing-nav .layout__lang {
    position: relative;
    flex: 0 0 auto;
  }

  .layout--landing-nav .layout__lang-trigger {
    display: inline-flex;
    min-height: 58px;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    border: 1px solid #e1dcd8;
    border-radius: 14px;
    background: #fff;
    color: #211d1d;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 2px 5px #4f403312;
  }

  .layout--landing-nav .layout__lang-panel {
    right: 0;
    left: auto;
    min-width: 180px;
  }

  .layout--landing-nav .landing-2-nav__signup {
    display: inline-flex;
    min-height: 58px;
    align-items: center;
    padding: 0 29px;
    border-radius: 999px;
    background: #050505;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
  }

  .layout--landing-nav .landing-2-nav__signup:hover,
  .layout--landing-nav .landing-2-nav__signup:focus-visible,
  .layout--landing-nav .landing-2-nav__signup:active,
  .layout--landing-nav .landing-2-nav__signup:visited {
    color: #fff;
    text-decoration: none;
  }

  .layout--landing-nav .layout__mobile-menu {
    display: none;
  }

  /* Hide the legacy account actions (feedback / avatar / auth placeholder):
     the landing surface renders help + language + Sign Up instead. */
  .layout--landing-nav .layout__feedback,
  .layout--landing-nav .layout__avatar,
  .layout--landing-nav .layout__auth-button,
  .layout--landing-nav .layout__auth-placeholder {
    display: none;
  }
}

/*
 * Mobile: keep the existing hamburger menu but visually align the trigger to
 * the rounded ClaviSay 2.0 surface.  The floating pill is desktop-only.
 *
 * `home-static-layout.css` scopes its mobile rules to `.layout--home`; since
 * Web 2.0 pages flip the wrapper to `.layout--landing-nav`, we must mirror
 * those rules here so the desktop pill row, the Tools dropdown, the language
 * switcher, and the legacy account actions stay hidden at compact widths.
 */
@media (max-width: 1100px) {
  .layout--landing-nav .layout__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 12px 16px;
  }

  .layout--landing-nav .layout__topnav-left {
    flex: 1 1 auto;
    width: auto;
  }

  .layout--landing-nav .landing-2-nav,
  .layout--landing-nav .landing-2-nav__help,
  .layout--landing-nav .landing-2-nav__signup {
    display: none;
  }

  /* Hide desktop actions on mobile — the hamburger menu owns this surface. */
  .layout--landing-nav .layout__nav--actions {
    display: none;
  }

  .layout--landing-nav .layout__mobile-menu {
    display: block;
    position: relative;
    margin-left: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill, 999px);
    background: var(--web2-surface-raised);
  }

  .layout--landing-nav .layout__mobile-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 240;
  }
}

/* Home second-screen fallback: mirror the hydrated lesson-import composition. */
.landing-2-lesson {
  width: min(100% - 40px, 1040px);
  margin: 0 auto;
  padding: 60px 0;
  text-align: center;
}

.landing-2-lesson .landing-2-section-copy > span {
  display: block;
  margin-bottom: 19px;
  color: #9378ff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.23em;
  text-transform: uppercase;
}

.landing-2-lesson .landing-2-function-title {
  margin: 0;
  color: #1b1717;
  font-family: var(--font-body);
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 700;
  letter-spacing: -0.047em;
  line-height: 1.08;
}

.landing-2-lesson .landing-2-function-title em {
  position: relative;
  display: inline-block;
  padding: 0 8px 1px;
  border-radius: 13px 13px 0 13px;
  background: #c9b8f2;
  color: #1b1717;
  font-style: normal;
}

.landing-2-lesson .landing-2-function-title em::after {
  position: absolute;
  top: -31px;
  right: -74px;
  padding: 6px 9px;
  border-radius: 8px 8px 8px 0;
  background: #765cf5;
  color: #fff;
  content: "Febby";
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

.landing-2-lesson .landing-2-function-title em::before {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 7px;
  height: 15px;
  border: 4px solid #765cf5;
  border-top: 0;
  border-left: 0;
  content: "";
}

.landing-2-lesson .landing-2-section-copy > p:not(.landing-2-function-title) {
  max-width: 780px;
  margin: 26px auto 0;
  color: #6a6563;
  font-size: 20px;
  line-height: 1.45;
}

.landing-2-import {
  position: relative;
  margin-top: 51px;
  padding-bottom: 94px;
  text-align: left;
}

.landing-2-import .home-resource-input {
  height: 288px;
  min-height: 288px;
  padding: 34px 24px 30px;
  border: 0;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 22px 52px rgb(79 67 50 / 9%);
}

.landing-2-import .home-resource-input__field {
  min-height: 154px;
}

.landing-2-import .home-resource-input__ghost,
.landing-2-import .home-resource-input__textarea {
  font-size: 20px;
  line-height: 1.45;
}

.landing-2-import .home-resource-input__toolbar {
  min-height: 58px;
}

.landing-2-import .home-resource-input__submit-host {
  max-width: 86px;
  margin-left: auto;
}

.landing-2-import .home-resource-input__submit {
  width: 86px;
  min-width: 86px;
  height: 58px;
  justify-content: center;
  padding: 0;
  border: 0;
  background: #7663f6;
  box-shadow: none;
}

.landing-2-import__sources {
  position: absolute;
  z-index: 2;
  bottom: 8px;
  left: 0;
  display: flex;
  gap: 30px;
  margin: 0;
}

.landing-2-import__sources .landing-2-import__source {
  display: flex;
  width: 116px;
  height: 133px;
  flex: 0 0 116px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 0;
  border: 1px solid #e5e3eb;
  border-radius: 16px;
  appearance: none;
  background: #fff;
  box-shadow: 0 6px 32px rgb(77 64 89 / 10%);
  color: #171313;
  cursor: pointer;
  font: inherit;
}

.landing-2-import__source i {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  font-style: normal;
}

.landing-2-import__source i svg {
  display: block;
  width: 100%;
  height: 100%;
}

.landing-2-import__source b {
  color: #201b1a;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

@media (min-width: 1101px) {
  .landing-2-lesson {
    width: min(100% - 192px, 1404px);
    padding: 52px 0 68px;
  }
}

@media (max-width: 760px) {
  .landing-2-lesson {
    width: min(100% - 28px, 1040px);
    padding: 52px 0;
  }

  .landing-2-lesson .landing-2-function-title {
    font-size: clamp(42px, 10vw, 54px);
    line-height: 1.12;
  }

  .landing-2-import {
    padding-bottom: 112px;
  }

  .landing-2-import .home-resource-input {
    height: 220px;
    min-height: 220px;
    padding: 22px 18px;
  }

  .landing-2-import__sources {
    max-width: 100%;
    gap: 10px;
    overflow-x: auto;
  }

  .landing-2-import__sources .landing-2-import__source {
    width: 92px;
    height: 106px;
    flex-basis: 92px;
  }
}