/* Adamard marketing site: design-critique fixes (2026-11-11).
   Added on top of the prerendered build, whose source is not in this repo
   (docs/STATE.md). Loaded after the build's own stylesheet. */

/* 1. The fixed top nav was transparent everywhere, so over the light "paper"
   sections the logo and links disappeared and overlapped content. Give it the
   page's own background (theme-aware via --bg) with a blur. Over the dark hero
   this is nearly invisible; over light sections it keeps the nav readable. */
nav.fixed.z-50 {
  background: rgb(var(--bg) / 0.86);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  backdrop-filter: saturate(1.2) blur(12px);
  box-shadow: 0 1px 0 rgb(var(--line) / 0.6);
}

/* 2. Hero: the 158px headline plus a 24svh spacer pushed "Create account"
   below the fold on a 1440x900 screen. Smaller cap and spacer on desktop. */
@media (min-width: 1024px) {
  .hero .sent { font-size: clamp(56px, 8vw, 128px); }
  .hero { grid-template-rows: auto minmax(14svh, 1fr) auto; }
}

/* 3. Phone tap targets in the top bar (theme, language, menu) were 32-40px. */
@media (max-width: 1023px) {
  nav.fixed.z-50 button { min-width: 44px; min-height: 44px; }
}

/* 4. Brand green text on light grounds was 2.2-2.3:1 (WCAG 1.4.3). In the
   light theme and on light "paper" sections use the deep brand green
   (#0E7A54, about 5.5:1). Dark sections keep the bright mint. */
:is([data-theme=light], .paper) .hv3 :is(.facts b, .facts .num, .pnotes b, .ind-proof),
[data-theme=light] .hv3 .word span,
.paper :is(.facts b, .facts .num, .pnotes b, .ind-proof) {
  color: var(--mint-deep, #0E7A54);
}
/* The .tag pill sits on a mint tint, where #0E7A54 measured 4.45:1. */
:is([data-theme=light], .paper) .hv3 .tag { color: #0A5E40; }

/* ---- Batch E (2026-11-11 design review, items 5, 6, 19, 20, 31, 32, menu,
   footer badges). Items 4 (hero CTA under the cookie banner) is not here:
   see docs/design-skills-review-2026-11-11.md and the batch E PR notes. ---- */

/* 5. Focus rings. Light theme: deep brand green (about 5.5:1 on paper).
   Dark theme keeps mint. Inputs get a 2px ring with a 2px offset, since
   the default ring on the pilot form was not visible. */
[data-theme=light] :focus-visible { outline-color: #0E7A54; }
/* ".form-clean .input:focus" sets outline: none (0,3,0), so the input rules
   repeat that scope and come later to win. */
.input:focus-visible,
.form-clean .input:focus-visible,
body.crm-skin .input:focus-visible { outline: 2px solid #34C08C; outline-offset: 2px; }
[data-theme=light] .input:focus-visible,
[data-theme=light] .form-clean .input:focus-visible,
[data-theme=light] body.crm-skin .input:focus-visible { outline-color: #0E7A54; }

/* 6. The fixed top bar (about 114 px) hid controls that keyboard focus
   scrolled to, such as "Choose Enterprise" when tabbing backwards.
   Padding on the scroller only: a scroll-margin on targets as well would
   add to it and land anchors 256 px down. */
html { scroll-padding-top: 128px; }

/* 19. Footer wordmark: Sora, as in the nav and the apps. */
footer span.font-head.leading-none {
  font-family: Sora, Mardoto, "Noto Sans Armenian", sans-serif;
}

/* 20. Home CTAs match /pricing: Manrope 600, 8px radius. The recommended
   plan uses the /pricing mint fill with dark text (about 7.9:1), so the home
   page has one fill style for its primary buttons. */
.hbtn { font-family: Manrope, Mardoto, "Noto Sans Armenian", sans-serif; border-radius: 8px; }
/* On the home page the recommended plan is itself a mint card, so a mint
   button there had no edge and read as plain text. Dark fill with light text
   (about 16:1) and a dark edge (about 8:1 on the mint). */
.hv3 .plan.rec .hbtn {
  background-color: #0E1712;
  color: #EEF3EC;
  border-color: #0E1712;
}

/* 31. The cookie banner's "Privacy policy" link was an inline-block with
   py-2, which made its line about 36 px tall. Keep the 8px tap area as
   padding and margin on an inline link, so the line height does not change. */
.fixed.bottom-0.z-\[60\] a[href="/privacy"] {
  display: inline;
  padding-block: 8px;
  margin-block: -8px;
}

/* 32. From 1024 px, the nav uses the same 28 px gutter as the home page
   content, so the logo and the page content share one left edge. */
@media (min-width: 1024px) {
  nav.fixed.z-50 > div {
    max-width: none;
    padding-left: 28px;
    padding-right: 28px;
  }
}

/* Interim mobile menu fix (needs-site-source item 1). The open menu is
   z-40, under the cookie banner (z-60), so its last links ("Log In",
   "Create account") were hidden. Lift it above the banner. The menu only
   exists in the DOM while open. The nav must stay above the menu, so the
   close button still works. */
.fixed.inset-0.z-40 { z-index: 70; }
nav.fixed.z-50 { z-index: 80; }

/* Owner decision (2026-11-11): hide the card-payment badges in the footer
   site-wide. Card payment is coming soon. Only the three badges are hidden. */
footer [role="img"][aria-label="Visa"],
footer [role="img"][aria-label="Mastercard"],
footer [role="img"][aria-label="ArCa"] {
  display: none;
}
/* ...and the "We accept" label with them, so it is not left alone. */
footer .flex.items-center.gap-3:has(> div > [role="img"][aria-label="Visa"]) {
  display: none;
}

/* 33. Skip link, first child of body (fixes.js). Off-screen until it has focus. */
.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 100;
  transform: translateY(-200%);
  padding: 10px 16px;
  border-radius: 8px;
  background: #0E7A54;
  color: #FFFFFF;
  font: 600 15px/1.2 Manrope, Mardoto, "Noto Sans Armenian", sans-serif;
  text-decoration: none;
}
.skip-link:focus-visible {
  transform: none;
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

/* 34. Cookie banner as a compact card (design review item 4). Phones: full
   width minus 16px gutters, no taller than 35vh, so the hero CTA stays above
   it at 390x844. From 640px: a 360px card in the bottom-right corner, 16px in
   from each edge. Its text and buttons are unchanged. */
.fixed.bottom-0.z-\[60\] {
  left: 16px;
  right: 16px;
  bottom: 16px;
  width: auto;
  padding: 0;
}
.fixed.bottom-0.z-\[60\] > div {
  max-width: none;
  margin: 0;
  max-height: 35vh;
  overflow-y: auto;
  flex-direction: column;
  align-items: stretch;
}
@media (min-width: 640px) {
  .fixed.bottom-0.z-\[60\] {
    left: auto;
    width: 360px;
  }
}

/* ---- Site alignment pass (2026-11-12). Each rule names the page it was
   found on; the issue list is in the PR notes. ---- */

/* 35. Home pricing, 1024px and up: the three plan cards share a row height but
   the button sat right under each list, so it was level only when the lists
   were the same length. The card is a flex column and the button goes to the
   bottom, so all three buttons line up. */
.hv3 .plan { display: flex; flex-direction: column; }
.hv3 .plan > .hbtn { margin-top: auto; }

/* 36. Top bar: the Products and language wrappers are blocks
   holding an inline-flex button, which put a line box (and a 1px offset)
   around it. A block-level button sits on the same centre line as the links. */
nav.fixed.z-50 div.relative > button { display: flex; }

/* 37. /pricing (768px and up) and /dzain "Where it earns its keep" (640px and
   up): the three cards in a row had equal heights but their insides did not
   line up. A description or quote of a different length (two lines in one
   card, one in another, and three in Armenian) pushed the price, the feature
   list and the divider 3 to 27px lower in one card than in its neighbours.
   Each card now takes its rows from the shared grid (subgrid), so the title,
   description, price, list and button start at the same height in all three
   cards, whatever the language. The row gap of the outer grid is 0 because
   the cards space their own contents with margins. Browsers without subgrid
   keep the old layout. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 768px) {
    .grid:has(> div > .card-hand.\!flex-col) { row-gap: 0; }
    .grid:has(> div > .card-hand.\!flex-col) > div {
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
    }
    .grid:has(> div > .card-hand.\!flex-col) > div > .card-hand {
      display: grid !important; /* the build sets display with !important (!flex) */
      grid-row: 1 / -1;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
  }
  @media (min-width: 640px) {
    .grid:has(> div > .card-hand.group.h-full) { row-gap: 0; }
    .grid:has(> div > .card-hand.group.h-full) > div {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
    }
    .grid:has(> div > .card-hand.group.h-full) > div > .card-hand {
      display: grid;
      grid-row: 1 / -1;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
  }
}

/* 38. /pricing plan price, Armenian: the price, "/ month" and the dollar
   estimate did not fit on one line, so the dram sign dropped under the number. The price stays on
   one line and the small print wraps below it. */
.card-hand > .flex.items-baseline.gap-1\.5 { flex-wrap: wrap; row-gap: 2px; }
.card-hand > .flex.items-baseline.gap-1\.5 > span:first-child { white-space: nowrap; }

/* 39. Home "Business plan vs salary" figures, Armenian: the label above the
   second number wraps to two lines, which pushed that number lower than the
   first. Both figures sit on the bottom of their row. */
.hv3 .figs { align-items: end; }

/* 40. /crm "What you get" cards: the 44px icon sat at the top with a single
   24px text line beside it, so the text looked 10px too high. The row is
   centred, so icon and text share one centre line. */
.card-hand.flex.items-start:has(> .shrink-0.rounded-full) { align-items: center; }

/* 41. "Company details" (/contact, /about) and the /contact info cards: the e-mail and phone links are
   inline-block with 8px of tap padding, which made their rows 38px tall and
   left the label 8px above the value. The tap area stays (padding with a
   matching negative margin on an inline link), the row height does not grow. */
dl dd > a[href^="mailto:"],
dl dd > a[href^="tel:"],
.card-hand a[href^="mailto:"],
.card-hand a[href^="tel:"] {
  display: inline;
  padding-block: 8px;
  margin-block: -8px;
}

/* 42. Top bar, all widths: the logo link was an inline-level box holding an
   inline SVG, so it was 6px taller than the logo (descender space below it).
   The row centres boxes, so the logo sat about 3px above the centre line of
   the links and buttons. A flex link is exactly as tall as the logo. */
nav.fixed.z-50 > div > a:first-child { display: flex; }

/* 43. Home pricing while prices are on request: "Price on request" in the
   plan cards is text, not a figure, so it is set smaller than the old prices
   and does not wrap to two lines at desktop widths. (The cost comparison and
   its figures are gone from the page.) */
.hv3 .plan .amt.ask { display: block; white-space: nowrap; font-size: clamp(26px, 2.2vw, 36px); letter-spacing: -.02em; }
.hv3 .ptop > .hbtn { flex: none; }