/* Public-site header (mega-menu) + footer. Markup: scripts/site-chrome/chrome.js.
   Loaded after landing.css on every public page. Everything is scoped to .aam-nav /
   .aam-footer so pages still serving the old markup (7-day HTML cache on /blog,
   /tools, /compare) are not affected. */

.aam-nav { --aam-blue: var(--primary, #0a66c2); --aam-ink: #0f172a; --aam-mute: #64748b; --aam-line: #e2e8f0; --aam-tint: #eff6ff; }
html { scroll-padding-top: 84px; }

/* ---------- bar ---------- */
.aam-nav .nav-container { gap: 16px; }
.aam-nav .nav-logo { flex-shrink: 0; }
.aam-nav-menu { display: flex; align-items: center; flex: 1; min-width: 0; margin-left: 28px; }
.aam-nav-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.aam-nav-list > li { position: relative; }
.aam-dd-btn, .aam-nav-link {
  display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px;
  border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--text-secondary, #64748b);
  text-decoration: none; white-space: nowrap; transition: color .15s ease, background-color .15s ease;
}
.aam-dd-btn:hover, .aam-nav-link:hover, .aam-dd.is-open > .aam-dd-btn { color: var(--aam-blue); background: #f1f5f9; }
/* Current section: one subtle marker (ink + short underline), never the hover blue. */
.aam-dd-btn.is-current, .aam-nav-link[aria-current="page"] { color: var(--aam-ink); font-weight: 600; box-shadow: inset 0 -2px 0 0 #93c5fd; border-radius: 10px 10px 0 0; }
.aam-dd-btn.is-current:hover, .aam-dd.is-open > .aam-dd-btn.is-current { color: var(--aam-blue); box-shadow: none; border-radius: 10px; }
.aam-chev { transition: transform .18s ease; opacity: .7; }
.aam-dd.is-open > .aam-dd-btn .aam-chev { transform: rotate(180deg); }
.aam-nav-cta { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.aam-nav-cta .btn { white-space: nowrap; }
/* Header CTAs (2026-10-18): Sign In text link · Start free (primary) · Install Extension (outline). */
.aam-nav-signin { display: inline-flex; align-items: center; height: 40px; padding: 0 10px; border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--aam-ink); text-decoration: none; white-space: nowrap; }
.aam-nav-signin:hover { color: var(--aam-blue); background: #f8fafc; }
.aam-nav-signin[hidden], .aam-nav-start[hidden] { display: none !important; }
.aam-nav-start { display: inline-flex; align-items: center; gap: 8px; }
.aam-nav-start svg { flex: none; transition: transform .15s ease; }
.aam-nav-start:hover svg { transform: translateX(2px); }
.aam-nav-cta .aam-nav-start svg { display: inline-block; }
/* Extension button: neutral grey, secondary to "Sign up free". */
.aam-nav-ext { background: #f1f5f9; color: var(--aam-ink); border: 1px solid transparent; box-shadow: none; }
.aam-nav-ext:hover { background: #e2e8f0; color: var(--aam-ink); }
.aam-nav-ext svg { color: #475569; }
.aam-nav a:focus-visible, .aam-nav button:focus-visible { outline: 2px solid var(--aam-blue); outline-offset: 2px; }

/* ---------- dropdown panel (desktop) ---------- */
.aam-dd-panel {
  position: absolute; top: calc(100% + 14px); left: -12px; z-index: 1001;
  background: #fff; border: 1px solid var(--aam-line); border-radius: 16px;
  box-shadow: 0 24px 48px -12px rgba(15, 23, 42, .18), 0 4px 12px rgba(15, 23, 42, .06);
  padding: 10px; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
/* Invisible bridge so the pointer can travel from the button to the panel. */
.aam-dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.aam-dd.is-open > .aam-dd-panel,
.aam-nav:not(.aam-js) .aam-dd:hover > .aam-dd-panel,
.aam-nav:not(.aam-js) .aam-dd:focus-within > .aam-dd-panel {
  opacity: 1; visibility: visible; transform: none; transition: opacity .16s ease, transform .16s ease, visibility 0s;
}
.aam-dd-panel--product { width: 720px; }
.aam-dd-panel--tools { width: 720px; left: 50%; transform: translate(-50%, 6px); }
.aam-dd.is-open > .aam-dd-panel--tools,
.aam-nav:not(.aam-js) .aam-dd:hover > .aam-dd-panel--tools,
.aam-nav:not(.aam-js) .aam-dd:focus-within > .aam-dd-panel--tools { transform: translate(-50%, 0); }
.aam-dd-panel--resources { width: 700px; left: 50%; transform: translate(-50%, 6px); }
.aam-dd.is-open > .aam-dd-panel--resources,
.aam-nav:not(.aam-js) .aam-dd:hover > .aam-dd-panel--resources,
.aam-nav:not(.aam-js) .aam-dd:focus-within > .aam-dd-panel--resources { transform: translate(-50%, 0); }

.aam-dd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; }
.aam-dd-panel--tools .aam-dd-grid { grid-template-columns: 300px minmax(0, 1fr); }
.aam-dd-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Labelled 2-column menus (Product, Resources): label + 4 items per column share the same
   rows (subgrid), so a 2-line description never pushes one column out of line. */
@media (min-width: 1025px) {
  .aam-dd-panel--product .aam-dd-grid, .aam-dd-panel--resources .aam-dd-grid { grid-template-rows: repeat(5, auto); row-gap: 2px; }
  .aam-dd-panel--product .aam-dd-col, .aam-dd-panel--resources .aam-dd-col { display: grid; grid-row: span 5; grid-template-rows: subgrid; }
}
.aam-dd-label { margin: 0; padding: 8px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; }

.aam-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none; transition: background-color .12s ease; }
.aam-item:focus-visible { background: #f8fafc; }
@media (hover: hover) {
  .aam-item:hover { background: #f8fafc; }
  .aam-item:hover .aam-item-ico { background: var(--aam-blue); color: #fff; }
  .aam-item--feat:hover { background: linear-gradient(160deg, #e0edff 0%, #f1f7ff 70%); }
  .aam-item--feat:hover .aam-item-go { transform: translateX(3px); }
}
.aam-item-ico { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--aam-tint); color: var(--aam-blue); transition: background-color .12s ease, color .12s ease; }
.aam-item-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aam-item-t { font-size: 14px; font-weight: 600; color: var(--aam-ink); line-height: 1.3; }
.aam-item-d { font-size: 12.5px; color: var(--aam-mute); line-height: 1.4; }

/* Featured card (ATS Score Checker) */
.aam-item--feat {
  position: relative; flex-direction: column; gap: 8px; height: 100%; padding: 16px;
  background: linear-gradient(160deg, #eff6ff 0%, #f8fbff 70%); border: 1px solid #dbeafe;
}
.aam-item--feat:focus-visible { background: linear-gradient(160deg, #e0edff 0%, #f1f7ff 70%); }
.aam-item--feat .aam-item-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--aam-blue); color: #fff; }
.aam-item--feat .aam-item-t { font-size: 16px; }
.aam-item--feat .aam-item-d { font-size: 13px; }
.aam-badge { align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: #fff; border: 1px solid #bfdbfe; color: var(--aam-blue); font-size: 11px; font-weight: 600; }
.aam-item-go { margin-top: auto; color: var(--aam-blue); display: inline-flex; transition: transform .15s ease; }

/* Free tools: "Also in the app" (the product's own tools) under the featured card. */
.aam-dd-col--feat { gap: 4px; }
.aam-dd-extra { display: flex; flex-direction: column; gap: 2px; }
.aam-dd-extra .aam-dd-label { padding-top: 10px; }
.aam-item--sm { padding: 7px 12px; gap: 10px; align-items: center; }
.aam-item--sm .aam-item-ico { width: 30px; height: 30px; border-radius: 8px; }
.aam-item--sm .aam-item-ico svg { width: 16px; height: 16px; }
.aam-item--sm .aam-item-t { font-size: 13.5px; }
.aam-item--sm .aam-item-d { font-size: 12px; }
/* Desktop: compact featured card so the left column ends level with the 5 tools on the right. */
@media (min-width: 1025px) {
  .aam-dd-col--feat .aam-item--feat {
    height: auto; display: grid; grid-template-columns: 44px minmax(0, 1fr) 16px; column-gap: 12px; row-gap: 4px;
    grid-template-areas: "ico badge go" "ico t go" "d d d"; align-items: center; padding: 14px;
  }
  .aam-dd-col--feat .aam-item--feat .aam-item-ico { grid-area: ico; }
  .aam-dd-col--feat .aam-item--feat .aam-badge { grid-area: badge; justify-self: start; }
  .aam-dd-col--feat .aam-item--feat .aam-item-t { grid-area: t; }
  .aam-dd-col--feat .aam-item--feat .aam-item-d { grid-area: d; margin-top: 6px; }
  .aam-dd-col--feat .aam-item--feat .aam-item-go { grid-area: go; margin: 0; }
}

@media (min-width: 1025px) {
  .aam-dd-panel--tools .aam-dd-grid { grid-template-rows: repeat(6, auto); row-gap: 2px; }
  .aam-dd-panel--tools .aam-dd-col { display: grid; grid-row: 1 / span 6; grid-template-rows: subgrid; gap: 0; }
  .aam-dd-panel--tools .aam-dd-col > .aam-item { align-self: center; }
  .aam-dd-panel--tools .aam-dd-col--feat > *, .aam-dd-panel--tools .aam-dd-extra > * { grid-column: 1; }
  .aam-dd-panel--tools .aam-dd-col--feat .aam-item--feat { grid-row: 1 / span 3; align-self: stretch; margin-bottom: 30px; }
  .aam-dd-panel--tools .aam-dd-extra { display: contents; }
  .aam-dd-panel--tools .aam-dd-extra .aam-dd-label { grid-row: 3; align-self: end; padding: 0 12px 8px; }
  .aam-dd-panel--tools .aam-dd-extra > a:nth-of-type(1) { grid-row: 4; }
  .aam-dd-panel--tools .aam-dd-extra > a:nth-of-type(2) { grid-row: 5; }
  .aam-dd-panel--tools .aam-dd-extra > a:nth-of-type(3) { grid-row: 6; }
  .aam-dd-panel--tools .aam-dd-extra > a { align-self: center; padding: 10px 12px; }
  .aam-dd-panel--tools .aam-dd-extra .aam-item-ico { width: 36px; height: 36px; border-radius: 10px; }
  .aam-dd-panel--tools .aam-dd-extra .aam-item-ico svg { width: 18px; height: 18px; }
  .aam-dd-panel--tools .aam-dd-extra .aam-item-t { font-size: 14px; }
  .aam-dd-panel--tools .aam-dd-extra .aam-item-d { font-size: 12.5px; }
  /* One-line descriptions on desktop: every row has the same height in both columns. */
  .aam-dd-panel .aam-item:not(.aam-item--feat) .aam-item-d { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.aam-dd-more {
  display: flex; align-items: center; gap: 6px; margin: 6px 2px 0; padding: 10px 12px 4px;
  border-top: 1px solid #f1f5f9; font-size: 13.5px; font-weight: 600; color: var(--aam-blue); text-decoration: none;
}
.aam-dd-more:hover { text-decoration: underline; }

/* Small laptops / large tablets: FR + ES labels overflowed at 1040 px (fit check 2026-10-17). */
@media (min-width: 1025px) and (max-width: 1199px) {
  .aam-nav-menu { margin-left: 12px; }
  .aam-dd-btn, .aam-nav-link { padding: 0 9px; }
  .aam-nav-cta { gap: 8px; }
  .aam-nav-cta .btn { padding: 10px 14px; }
  .aam-nav-cta .btn svg { display: none; }
  .aam-nav-signin { padding: 0 6px; font-size: 14px; }
  .aam-nav .nav-logo span { font-size: 17px; }
  /* Three CTAs do not fit next to the menu below 1280 px (FR / ES / PT): the extension button keeps its icon only. */
  .aam-nav-cta .aam-nav-ext { padding: 10px 11px; }
  .aam-nav-cta .aam-nav-ext svg { display: inline-block; }
  .aam-nav-ext span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* FR / ES labels are longer: from 1200 px the extension button stays icon-only in those two languages
   (EN / PT / HI keep the full label; below 1200 px every language is icon-only). */
@media (min-width: 1200px) {
  html[lang="fr"] .aam-nav-cta .aam-nav-ext, html[lang="es"] .aam-nav-cta .aam-nav-ext { padding: 10px 11px; }
  html[lang="fr"] .aam-nav-ext span, html[lang="es"] .aam-nav-ext span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Large desktops: a bit more air between top-level items. */
@media (min-width: 1200px) { .aam-nav-menu { margin-left: 40px; } .aam-nav-list { gap: 6px; } }

/* ---------- mobile / tablet (hamburger) ---------- */
.aam-nav .aam-nav-toggle { display: none; }
@media (max-width: 1024px) {
  .aam-nav .aam-nav-toggle { display: flex; margin: 0 0 0 auto; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 10px; }
  .aam-nav .aam-nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .aam-nav .aam-nav-toggle.active span:nth-child(2) { opacity: 0; }
  .aam-nav .aam-nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
  .aam-nav-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    height: calc(100vh - 72px); height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain;
    background: #fff; border-top: 1px solid var(--aam-line); padding: 8px 16px 24px;
    flex-direction: column; align-items: stretch;
  }
  .aam-nav.aam-menu-open .aam-nav-menu { display: flex; }
  .aam-nav.aam-menu-open { background: #fff; }
  .aam-nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .aam-nav-list > li { border-bottom: 1px solid #f1f5f9; }
  .aam-dd-btn, .aam-nav-link { width: 100%; height: 56px; padding: 0 4px; justify-content: space-between; font-size: 17px; font-weight: 600; color: var(--aam-ink); border-radius: 0; background: transparent !important; }
  .aam-dd-panel, .aam-dd-panel--tools, .aam-dd-panel--resources,
  .aam-dd.is-open > .aam-dd-panel--tools, .aam-dd.is-open > .aam-dd-panel--resources {
    position: static; width: auto; transform: none; opacity: 1; visibility: visible; transition: none;
    border: 0; box-shadow: none; padding: 0 0 12px; display: none; border-radius: 0;
  }
  .aam-nav:not(.aam-js) .aam-dd:hover > .aam-dd-panel { display: none; }
  .aam-dd.is-open > .aam-dd-panel { display: block; }
  .aam-dd-panel::before { display: none; }
  .aam-dd-grid, .aam-dd-panel--tools .aam-dd-grid { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .aam-item { padding: 9px 8px; }
  .aam-item--feat { flex-direction: row; align-items: center; height: auto; padding: 12px; gap: 12px; }
  .aam-item--feat .aam-item-ico { width: 40px; height: 40px; }
  .aam-item--feat .aam-badge { position: absolute; top: 10px; right: 10px; }
  .aam-item--feat .aam-item-t { font-size: 15px; padding-right: 92px; }
  .aam-item--feat .aam-item-go { display: none; }
  .aam-item--feat { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "ico t" "ico d"; column-gap: 12px; row-gap: 2px; }
  @media (max-width: 480px) {
    .aam-item--feat { grid-template-areas: "ico badge" "ico t" "ico d"; }
    .aam-item--feat .aam-badge { position: static; grid-area: badge; justify-self: start; margin-bottom: 2px; }
    .aam-item--feat .aam-item-t { padding-right: 0; }
  }
  .aam-item--feat .aam-item-ico { grid-area: ico; }
  .aam-item--feat .aam-item-t { grid-area: t; }
  .aam-item--feat .aam-item-d { grid-area: d; }
  /* Free tools on phones: featured card, then the free tools, then "Also in the app". */
  .aam-dd-col--feat { display: contents; }
  .aam-dd-panel--tools .aam-dd-col:not(.aam-dd-col--feat) { order: 1; }
  .aam-dd-extra { order: 2; margin-top: 4px; border-top: 1px solid #f1f5f9; }
  .aam-item--sm { padding: 8px; gap: 12px; }
  .aam-dd-more { margin: 4px 0 0; padding: 12px 8px 4px; }
  .aam-nav-cta { flex-direction: column; align-items: stretch; gap: 10px; margin: 20px 0 0; }
  .aam-nav-cta .btn { width: 100%; justify-content: center; padding: 13px 20px; }
  .aam-nav-start { order: 1; }
  .aam-nav-ext { order: 2; }
  .aam-nav-signin { order: 3; justify-content: center; height: 48px; font-size: 16px; }
  /* Long labels (FR / PT / HI) never push past the panel: text wraps inside its box. */
  .aam-item, .aam-item-txt { min-width: 0; }
  .aam-item-txt { flex: 1 1 auto; }
  .aam-item-t, .aam-item-d, .aam-dd-label, .aam-dd-more span { overflow-wrap: anywhere; word-break: normal; hyphens: auto; }
  .aam-item-ico { flex: 0 0 auto; }
  .aam-dd-btn span, .aam-nav-link { min-width: 0; overflow-wrap: anywhere; }
  .aam-nav-cta .btn span { white-space: normal; text-align: center; }
  html.aam-menu-lock, html.aam-menu-lock body { overflow: hidden; }
}

/* ---------- footer ---------- */
.aam-footer .aam-footer-top { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; padding-bottom: 48px; border-bottom: 1px solid var(--bg-dark-secondary, #1e293b); }
.aam-footer .footer-brand { max-width: 260px; }
.aam-footer .aam-f-formerly { font-size: .75rem !important; color: #64748b !important; margin-top: 4px; }
.aam-footer .aam-f-findus { font-size: .72rem !important; color: #94a3b8 !important; margin-top: 8px; }
.aam-footer .aam-f-findus a { color: inherit; text-decoration: underline; }
.aam-footer .aam-f-social { margin-top: 16px; display: flex; gap: 14px; align-items: center; }
.aam-footer-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 28px; align-items: start; }
.aam-fgroup--wide { grid-column: span 2; }
.aam-fstack { display: flex; flex-direction: column; gap: 36px; }
.aam-fgroup > summary { list-style: none; }
.aam-fgroup > summary::-webkit-details-marker { display: none; }
.aam-fgroup-t { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; font-size: 14px; font-weight: 600; color: #fff; cursor: default; pointer-events: none; }
.aam-fgroup-t .aam-chev { display: none; }
.aam-flinks { list-style: none; margin: 0; padding: 0; }
.aam-flinks li { margin: 0 0 10px; }
.aam-flinks a { font-size: 14px; color: var(--text-tertiary, #94a3b8); text-decoration: none; transition: color .15s ease; }
.aam-flinks a:hover, .aam-flinks a:focus-visible { color: #fff; }
.aam-fgroup--wide .aam-flinks { columns: 2; column-gap: 28px; }
.aam-fgroup--wide .aam-flinks li { break-inside: avoid; }
.aam-footer a:focus-visible, .aam-footer summary:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; border-radius: 4px; }

@media (max-width: 1024px) {
  .aam-footer .aam-footer-top { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .aam-footer .footer-brand { max-width: 520px; }
}
@media (max-width: 768px) {
  .aam-footer-groups { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .aam-fgroup--wide { grid-column: auto; }
  .aam-fstack { gap: 0; }
  .aam-fgroup { border-top: 1px solid var(--bg-dark-secondary, #1e293b); }
  .aam-fgroup-t { margin: 0; min-height: 52px; pointer-events: auto; cursor: pointer; font-size: 15px; }
  .aam-fgroup-t .aam-chev { display: block; color: #94a3b8; }
  .aam-fgroup[open] > .aam-fgroup-t .aam-chev { transform: rotate(180deg); }
  .aam-flinks { columns: 2; column-gap: 20px; padding-bottom: 14px; }
  .aam-flinks li { break-inside: avoid; margin-bottom: 0; }
  .aam-flinks a { display: block; padding: 7px 0; }
  .aam-footer .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
}