/* ============================================================
   lang.css — the only stylesheet that is not part of the design
   ============================================================

   assets/css/globals.css is an unmodified copy of the Next.js app's
   src/app/globals.css, and that is the property that makes it re-copyable when
   the design changes. Anything this migration had to add or adjust lives here
   instead, namespaced or scoped so it cannot collide.

   Three things are in this file:

     1. the language switcher, which the single-locale app had no equivalent of;
     2. one navbar fix, for an overflow that predates this migration;
     3. an English type scale for the hero and the two components the design
        sizes in pixels.

   Colours and radii come from the design tokens globals.css declares on :root,
   so nothing here restates the palette.
   ============================================================ */

/* --- language switcher (footer) ----------------------------------------- */

/* It sits in .footer__bottom, which globals.css lays out as a
   space-between row — privacy link, this, copyright — and stacks to a centred
   column at 768px. Sizing it like its two neighbours is what makes it read as
   part of that row rather than as something bolted on. */

.aieo-lang {
  display: flex;
  align-items: center;
  gap: 8px;
}

.aieo-lang__sep {
  color: var(--color-white);
  opacity: 0.35;
  font-size: 12px;
  line-height: 1;
}

/* .footer a rules in globals.css are more specific than a bare class, so the
   scoped selector is what makes these win rather than merely follow. */
.footer .aieo-lang__option {
  font-size: 12px;
  color: var(--color-white);
  opacity: 0.7;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.footer .aieo-lang__option:hover {
  opacity: 1;
}

/* The current language is not a link to somewhere else, so it reads as a label:
   full contrast, no hover change. */
.footer .aieo-lang__option.is-active {
  opacity: 1;
  font-weight: 700;
  cursor: default;
}

/* --- navbar: fitting the row -------------------------------------------- */

/* This is a pre-existing defect, not one the migration introduced.

   globals.css hides .navbar-links and .btn-nav-cta below 1024px and shows the
   hamburger instead, so the desktop row has to fit every width from 1025px up.
   It does not. Measured on the rendered page, the row occupies 200px of logo +
   800px of links (six Japanese labels at the design's 24px gap) + 202px of CTA
   + 52px of the pill's own padding = 1254px, so the CTA hangs outside the
   navbar pill on every viewport between the breakpoint and ~1254px — 164px
   outside it at 1025px. The navbar is position:fixed, so the overflow produces
   no scrollbar to notice: the button is simply clipped off the right of the
   pill, on exactly the widths a small laptop and a landscape tablet use.

   Two rules fix it:

     - The drawer takes over at 1259px instead of 1024px. Below that the row
       cannot be made to fit without shrinking the design's own type, and the
       hamburger is a working, deliberate-looking answer that already exists.
     - Between 1260px and --navbar-max-width (1400px) the six gaps drop from
       24px to 16px, which brings the requirement down to 1214px and leaves
       46px of headroom at the breakpoint. A 1280px browser window —
       clientWidth ~1265 once its scrollbar is subtracted, and much the most
       common laptop size — therefore keeps the full desktop navigation.

   Above 1400px the design's spacing is untouched. */

@media (max-width: 1259px) {
  .navbar-links,
  .btn-nav-cta {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  /* Mirrors the ≤1024px rule globals.css already had for this element, so the
     pill keeps its margins once the row inside it is gone. */
  .navbar-inner {
    width: calc(100% - 40px);
    padding: 0 20px;
  }
}

@media (max-width: 1400px) {
  .navbar-links {
    gap: 16px;
  }
}

/* ============================================================
   Locale type scale — English hero
   ============================================================

   The hero headline is the one block in the design whose typography is tuned to
   a specific writing system. `.hero__highlight-box` is 70px with 5.6px of
   letter-spacing inside a 600px column, which is exactly right for the seven
   Japanese characters it was drawn around and roughly twice what English can
   fit: "Content that AI" wrapped inside its own gradient box, and the third
   line ran out of the column and over the diagnosis form.

   Traditional Chinese needs none of this — it is as dense as Japanese, and the
   copy in inc/dictionaries.json is written to the same line lengths.

   Scoped to html[lang="en"], which header.php sets from aieo_lang_tag(), so the
   Japanese and Chinese pages are byte-identical to what globals.css produces.
   ============================================================ */

html[lang="en"] .hero__highlight-box {
  font-size: 46px;
  /* Latin letterforms already carry their own sidebearings; the CJK tracking
     would open the words up into separate letters. */
  letter-spacing: 0;
}

/* The rule above also matches the second box, which carries both classes — and
   `.hero__highlight-box--sm` relies on font-size: 0 to swallow any whitespace
   between its two children. Restoring it keeps that mechanism intact; the two
   children set their own sizes. */
html[lang="en"] .hero__highlight-box--sm {
  font-size: 0;
}

html[lang="en"] .hero__highlight-box-main {
  font-size: 44px;
}

html[lang="en"] .hero__highlight-box-sub {
  font-size: 34px;
}

html[lang="en"] .hero__auto-text {
  font-size: 52px;
  letter-spacing: 0;
}

html[lang="en"] .hero__build-text {
  font-size: 44px;
  letter-spacing: 0;
}

/* The marker stroke is a 358px-wide SVG positioned under a four-character
   Japanese word. Any other language puts a different number of glyphs above it,
   so it is sized from the text it underlines instead of from a fixed number.
   `.hero__auto-text` is already position:relative, so the percentage resolves
   against the word itself. */
html[lang="en"] .hero__underline {
  width: calc(100% + 10px);
  height: 40px;
  bottom: 0;
}

/* ============================================================
   Locale type scale — fixed-size components
   ============================================================

   Two components in the design are sized in pixels rather than by their
   contents, which is safe in a single-locale site and is not once the same
   component has to hold three languages. Both were measured, not guessed: the
   Japanese page has zero elements whose scrollWidth exceeds their clientWidth,
   and these are the only two where English does.
   ============================================================ */

/* `.btn-cta--outline` is a 292px pill with white-space: nowrap. "無料で相談する"
   needs 284px of it; "Book a free consultation" needs 334px and spilled over
   the border on both banner CTAs and the hero. Growing to fit keeps the
   Japanese and Chinese pills at exactly the width they were drawn at, because
   min-width holds the floor. */
html[lang="en"] .btn-cta--outline {
  width: auto;
  min-width: 292px;
}

/* The comparison grid is `320px 170px 320px` with nowrap cells, which is the
   width four to eight Japanese characters need. The English strings are two to
   three times as many glyphs and ran out of every column.
   `.comparison__table-wrapper` already scrolls horizontally — the section has a
   "Scroll" hint of its own — so widening the columns costs nothing on a narrow
   screen and simply uses the space that is there on a wide one. */
html[lang="en"] .comparison__table {
  grid-template-columns: 380px 200px 380px;
}

html[lang="en"] .comparison__table-td {
  font-size: 16px;
  /* CJK tracking on Latin text wastes the width this rule is trying to buy. */
  letter-spacing: 0;
}

html[lang="en"] .comparison__table-td--label {
  min-width: 200px;
  font-size: 15px;
  letter-spacing: 0;
}