/* ============================================================
   chrome.css — the shared header, nav, and footer, on their own

   Exists so the self-contained tool pages (market-map,
   assistant-editor-essentials, social-studio) can wear the site
   chrome without pulling in components.css, inner.css and the rest
   of the cascade, which would fight their own bespoke styles.

   Editorial pages do NOT load this — components.css already
   contains these rules. This file is a duplicate by design, and
   the duplication is the point: the two consumers have genuinely
   different needs and coupling them caused the cascade wars this
   avoids.

   If you change the header or footer, change it in BOTH files.
   validate.js checks the brand lockup renders on every page, which
   catches the most common way this drifts.
   ============================================================ */

/* ── Skip link + screen-reader utility ──────────────────────
   These live in base.css for the editorial pages. The standalone
   tool pages do not load base.css but DO carry the skip-link markup
   from the shared nav partial, so without these it renders as a
   stray visible link above the header. */

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 200;
  background-color: var(--accent);
  color: var(--ink-inv);
  font-family: var(--sans);
  font-size: var(--t-sm);
  padding: var(--s-3) var(--s-5);
  text-decoration: none;
}

.skip-link:focus {
  top: var(--s-3);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ── Site Header / Nav ──────────────────────────────────── */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-h);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  background-color: var(--bg);
  border-bottom: 1px solid transparent;
  transition:
    border-color var(--ease),
    background-color var(--ease),
    backdrop-filter var(--ease);
}

.site-header.scrolled {
  border-bottom-color: var(--rule);
  background-color: rgba(243, 240, 233, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nav {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  gap: var(--s-8);
}

/* ── Brand lockup ───────────────────────────────────────────────────
   Mark + wordmark. The mark is inline SVG stroked in currentColor, so a
   single asset serves parchment and petrol with no variant file; the
   wordmark is real text, so it stays selectable and someone copying the
   nav logo gets "CutToAi" rather than three words.

   The name is set solid — no weight or colour shift between Cut/To/Ai.
   Cormorant's sidebearings are wide enough that a weight break reads as
   three separate words, and camelCase already does the segmenting. */

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.44em;
  flex-shrink: 0;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  transition: color var(--ease-f);
}

.brand-lockup__mark {
  width: 1em;
  height: 1em;
  flex: none;
  overflow: visible;   /* the 2px stroke sits on the viewBox edge */
}

a.brand-lockup:hover {
  color: var(--brand);
}

a.brand-lockup:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

.nav__links {
  display: flex;
  list-style: none;
  gap: var(--s-6);
  margin-left: auto;
}

.nav__links a {
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--ink-2);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color var(--ease-f);
  padding: var(--s-1) 0;
  position: relative;
}

.nav__links a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ease);
}

.nav__links a:hover,
.nav__links a[aria-current="page"] {
  color: var(--ink);
}

.nav__links a[aria-current="page"]::after,
.nav__links a:hover::after {
  transform: scaleX(1);
}

/* The one primary CTA on the page, so it carries --brand as a fill.
   Everything else structural stays on --accent. */
.nav__cta {
  flex-shrink: 0;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-inv);
  background-color: var(--brand);
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  padding: 0.625rem 1.125rem;
  min-height: var(--tap-target);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition:
    background-color var(--ease-f),
    border-color var(--ease-f);
}

.nav__cta:hover {
  background-color: var(--brand-h);
  border-color: var(--brand-h);
}

.nav__cta:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Mobile burger */
.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: var(--tap-target);
  height: var(--tap-target);
  padding: var(--s-2);
  margin-left: auto;
  margin-right: calc(var(--s-2) * -1); /* optically align icon with gutter despite larger hit area */
  background: none;
  border: none;
  cursor: pointer;
}

.nav__burger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--ink);
  transition: transform var(--ease), opacity var(--ease);
  transform-origin: center;
}

.nav__burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(3px) rotate(45deg);
}

.nav__burger[aria-expanded="true"] span:nth-child(2) {
  transform: translateY(-3px) rotate(-45deg);
}

@media (max-width: 900px) {
  .nav__links,
  .nav__cta {
    display: none;
  }
  .nav__burger {
    display: flex;
  }
}


/* ── Mobile Nav Overlay ─────────────────────────────────── */

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  background-color: var(--bg);
  display: flex;
  flex-direction: column;
  padding: var(--nav-h) var(--gutter) var(--gutter);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity var(--ease),
    visibility 0s var(--ease);
}

.mobile-nav.is-open {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
  transition: opacity var(--ease), visibility 0s;
}

.mobile-nav__links {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-8);
  list-style: none;
}

.mobile-nav__links a {
  font-family: var(--serif);
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.2;
  display: block;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--rule-lt);
  transition: color var(--ease-f), padding-left var(--ease);
}

.mobile-nav__links a:hover {
  color: var(--accent);
  padding-left: var(--s-3);
}

.mobile-nav__cta {
  display: inline-block;
  margin-top: var(--s-8);
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  padding: var(--s-3) 0;
}


/* ── Site Footer ────────────────────────────────────────── */

.site-footer {
  background-color: var(--bg-2);
  border-top: 1px solid var(--rule);
  padding: var(--s-16) var(--gutter) var(--s-12);
}

.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--s-8);
}

.footer__brand {
  max-width: 280px;
}

.brand-lockup--footer {
  font-size: 1.25rem;
  display: inline-flex;
  margin-bottom: var(--s-2);
}

.footer__descriptor {
  font-family: var(--sans);
  font-size: var(--t-xs);
  color: var(--ink-3);
  letter-spacing: 0.01em;
  line-height: 1.5;
  display: block;
}

.footer__founder {
  font-family: var(--sans);
  font-size: var(--t-xs);
  color: var(--ink-3);
  line-height: 1.5;
  display: block;
  margin-top: var(--s-2);
}

.footer__founder a {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: color var(--ease-f), border-color var(--ease-f);
}

.footer__founder a:hover {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  justify-content: flex-end;
}

.footer__nav a {
  font-family: var(--sans);
  font-size: var(--t-xs);
  color: var(--ink-2);
  text-decoration: none;
  letter-spacing: 0.02em;
  padding: var(--s-2) 0;
  transition: color var(--ease-f);
}

.footer__nav a:hover {
  color: var(--ink);
}

.footer__base {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-6);
  border-top: 1px solid var(--rule-lt);
  flex-wrap: wrap;
  gap: var(--s-4);
}

.footer__location {
  font-family: var(--sans);
  font-size: var(--t-label);
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer__copy {
  font-family: var(--sans);
  font-size: var(--t-label);
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

/* ── Footer link columns ────────────────────────────────────
   Three columns carry everything the five-item top nav has to drop.
   Replaces the old single flat .footer__nav row. */

.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-8);
}

.footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-1);
}

.footer__col-title {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--s-2);
}

.footer__col a {
  font-family: var(--sans);
  font-size: var(--t-xs);
  color: var(--ink-2);
  text-decoration: none;
  letter-spacing: 0.02em;
  padding: var(--s-1) 0;
  transition: color var(--ease-f);
}

.footer__col a:hover {
  color: var(--brand);
}

@media (max-width: 860px) {
  .footer-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-6);
  }
}

/* ── Footer Social Icons ────────────────────────────────── */

.footer__social {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  border-top: 1px solid var(--rule-lt);
  flex-wrap: wrap;
}

.footer__social a {
  color: var(--ink-2);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  line-height: 1;
  transition: color var(--ease-f);
}

.footer__social a:hover {
  color: var(--ink);
}

.footer__social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}