/* ============================================================
   AdaptiveAsk — Shared Styles
   ============================================================ */

:root {
  --paper:      #F4F0E8;
  --paper-2:    #EAE4D6;
  --paper-3:    #E0D9C5;
  --ink:        #14161A;
  --ink-2:      #2A2D33;
  --muted:      #6E6A60;
  --rule:       #D9D2C2;
  --brand:      #3B7A99;
  --brand-deep: #2C5C75;
  --brand-soft: #BFD4DE;
  --clay:       #B5503B;
  --olive:      #6B7242;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Geist', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* prevent horizontal scroll from mobile menu */
}

a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--brand); color: var(--paper); }
*:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Typography helpers */
.serif  { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; letter-spacing: -0.01em; }
.mono   { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.italic { font-style: italic; }
.muted  { color: var(--muted); }
.tnum   { font-variant-numeric: tabular-nums; }
.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Layout */
.container        { max-width: 1240px; margin: 0 auto; padding: 0 56px; }
.container-narrow { max-width: 760px;  margin: 0 auto; padding: 0 56px; }
.rule { height: 1px; background: var(--rule); width: 100%; }

/* Section variants */
section { position: relative; }
.pad-y    { padding: 120px 0; }
.pad-y-sm { padding: 80px 0; }
.dark     { background: var(--ink); color: var(--paper); }
.dark .eyebrow, .dark .muted { color: #9A958A; }
.dark .rule { background: #2A2D33; }
.cream    { background: var(--paper-2); }

/* Headings */
h1.display { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 84px; line-height: 0.96; letter-spacing: -0.02em; }
h2.display { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 64px; line-height: 1.0;  letter-spacing: -0.015em; }
h3.display { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 32px; line-height: 1.15; }

.lede  { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
.small { font-size: 13px; line-height: 1.5; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 26px;
  border: none;
  background: var(--ink);
  color: var(--paper);
  font-size: 15px;
  font-weight: 500;
  border-radius: 2px;
  transition: transform .15s, background .15s;
  text-decoration: none;
}
.btn:hover          { background: var(--brand-deep); transform: translateY(-1px); }
.btn-brand          { background: var(--brand); }
.btn-brand:hover    { background: var(--brand-deep); }
.btn-ghost          { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-ghost:hover    { background: var(--ink); color: var(--paper); }

/* Chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: 100px;
  font-size: 12px;
  color: var(--muted);
  background: rgba(255,255,255,0.4);
  white-space: nowrap;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.chip-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Tag pills */
.tag-pill          { display: inline-flex; padding: 4px 10px; font-size: 11px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 100px; background: var(--paper-2); color: var(--ink-2); }
.tag-pill.cat-feed     { background: #D8E5EB; color: #2C5C75; }
.tag-pill.cat-ads      { background: #E8DDC9; color: #6B5A2E; }
.tag-pill.cat-case     { background: #DCE3D2; color: #3F5230; }
.tag-pill.cat-industry { background: #E8D5CC; color: #823E2A; }

/* Grid layouts */
.twocol   { display: grid; grid-template-columns: 1.05fr 1fr;        gap: 80px; align-items: start; }
.threecol { display: grid; grid-template-columns: repeat(3, 1fr);    gap: 48px; }
.fourcol  { display: grid; grid-template-columns: repeat(4, 1fr);    gap: 32px; }

/* Card */
.card { background: #fff; border: 1px solid var(--rule); border-radius: 4px; padding: 32px; }

/* Placeholder image */
.ph-img {
  background: repeating-linear-gradient(45deg, #E5DFCF, #E5DFCF 8px, #DBD3BD 8px, #DBD3BD 9px);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8B8478;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Animations */
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.blink { animation: blink 1.6s ease-in-out infinite; }

/* Nav button visibility */
.nav-mobile-btn { display: none; }
.nav-desktop-btn { display: inline-flex; }

/* Footer Accordion */
.footer-col-title {
  background: none; border: none; color: inherit;
  font-family: inherit; font-size: inherit; font-weight: inherit;
  letter-spacing: inherit; text-transform: inherit;
  width: 100%; text-align: left;
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; cursor: pointer;
}
.footer-chevron {
  display: none;
  font-size: 18px; font-family: 'JetBrains Mono', monospace;
  transition: transform 0.2s;
}
.footer-links { list-style: none; }

/* ============================================================
   Navigation — shared across all pages
   ============================================================ */
#main-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244,240,232,0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
#main-nav .inner {
  display: flex; align-items: center; height: 72px; gap: 48px;
}
#main-nav .logo {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--brand);
}
#main-nav .logo svg { width: 32px; height: 32px; display: block; }
#main-nav .logo-text { font-family: 'Instrument Serif', serif; font-size: 24px; color: var(--ink); }
#main-nav .logo-text em { font-style: italic; color: var(--brand); }
#main-nav .nav-links { flex: 1; display: flex; gap: 36px; font-size: 14px; }
#main-nav .nav-links a { text-decoration: none; color: var(--ink); }
#main-nav .nav-right { display: flex; align-items: center; gap: 16px; }
#main-nav .nav-phone { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); }
#mobile-menu-toggle {
  display: none; background: none; border: none;
  padding: 8px; cursor: pointer; color: var(--ink); z-index: 101;
}
#mobile-menu-toggle svg { width: 24px; height: 24px; display: block; }

/* ============================================================
   Blog — Prose typography
   ============================================================ */
.prose { font-size: 19px; line-height: 1.75; color: var(--ink-2); }
.prose p                  { margin-bottom: 28px; text-wrap: pretty; }
.prose h2                 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 40px; line-height: 1.15; color: var(--ink); margin-top: 64px; margin-bottom: 24px; letter-spacing: -0.015em; }
.prose h3                 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 28px; line-height: 1.2;  color: var(--ink); margin-top: 48px; margin-bottom: 16px; }
.prose ul, .prose ol      { margin-bottom: 28px; padding-left: 24px; }
.prose li                 { margin-bottom: 10px; }
.prose blockquote         { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 30px; line-height: 1.4; color: var(--ink); border-left: 2px solid var(--brand); padding-left: 32px; margin: 48px 0; }
.prose code               { font-family: 'JetBrains Mono', monospace; font-size: 0.85em; background: var(--paper-2); padding: 2px 8px; border-radius: 3px; color: var(--ink); }
.prose pre                { background: var(--ink); color: var(--paper); padding: 28px; border-radius: 4px; overflow-x: auto; margin: 32px 0; font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.65; }
.prose pre code           { background: transparent; padding: 0; color: inherit; font-size: inherit; }
.prose a                  { color: var(--brand); text-decoration: underline; text-underline-offset: 4px; }
.prose strong             { color: var(--ink); font-weight: 600; }
.prose hr                 { border: none; height: 1px; background: var(--rule); margin: 48px 0; }
.prose figure             { margin: 48px -56px; }
.prose figcaption         { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 12px; padding-left: 56px; }
.prose .lede              { font-family: 'Instrument Serif', serif; font-size: 28px; line-height: 1.4; color: var(--ink); margin-bottom: 48px; font-style: italic; }
.prose .drop-cap::first-letter {
  font-family: 'Instrument Serif', serif;
  font-size: 88px;
  float: left;
  line-height: 0.8;
  margin: 6px 12px 0 0;
  color: var(--brand);
  font-style: italic;
}

/* ============================================================
   Global enhancements
   ============================================================ */
html { scroll-behavior: smooth; }

/* ============================================================
   Blog & Article Components
   ============================================================ */

/* Reading progress bar */
#reading-progress {
  position: fixed; top: 71px; left: 0;
  height: 2px; background: var(--brand);
  width: 0%; z-index: 100;
  transition: width 0.1s linear;
}

/* Blog nav active state */
.nav-blog-active { color: var(--brand) !important; font-weight: 500; }

/* Blog Cards & Layouts */
.featured-article {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px;
  align-items: center; padding: 48px 0;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  text-decoration: none; color: inherit;
  transition: opacity .15s;
}
.featured-article:hover { opacity: 0.85; }

.posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }

.post-card {
  padding-top: 32px; border-top: 1px solid var(--rule);
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: transform .2s;
}
.post-card:hover { transform: translateY(-2px); }
.post-card-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.post-card-thumb { border-radius: 4px; margin-bottom: 24px; }
.post-card-dek { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin-bottom: 20px; flex: 1; }
.post-card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px dashed var(--rule); }

/* Table of Contents */
.toc-side { position: sticky; top: 96px; align-self: start; }
.toc-side a {
  display: block; padding: 6px 0; padding-left: 12px;
  border-left: 1px solid var(--rule); font-size: 13px;
  color: var(--muted); text-decoration: none; line-height: 1.4;
  transition: color .15s, border-color .15s;
}
.toc-side a:hover { color: var(--ink); border-left-color: var(--brand); }
.toc-side a.active { color: var(--brand); border-left-color: var(--brand); font-weight: 500; }

/* Article Data Tables */
.attr-table { width: 100%; border-collapse: collapse; margin: 32px 0; font-size: 14px; }
.attr-table thead th {
  text-align: left; padding: 12px 16px; background: var(--paper-2);
  border-bottom: 1px solid var(--rule); font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
.attr-table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.attr-table tbody tr:hover { background: rgba(255,255,255,0.4); }
.attr-table .code { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--brand-deep); }

.req-pill { display: inline-block; padding: 3px 8px; border-radius: 100px; font-size: 10px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase; }
.req-must { background: #E8D5CC; color: #823E2A; }
.req-rec  { background: #E8DDC9; color: #6B5A2E; }
.req-opt  { background: #DCE3D2; color: #3F5230; }

/* Newsletter Strip */
.newsletter-strip { padding: 80px 0; border-top: 1px solid var(--rule); }
.newsletter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.newsletter-form { display: flex; gap: 8px; }
.newsletter-input {
  flex: 1; padding: 18px 20px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--rule); background: #fff; border-radius: 2px;
  outline: none; transition: border-color .15s;
}
.newsletter-input:focus { border-color: var(--brand); }

/* Filter Bar */
.filter-bar { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper); }
.filter-bar-inner { display: flex; align-items: center; justify-content: space-between; padding: 20px 56px; gap: 24px; flex-wrap: wrap; max-width: 1240px; margin: 0 auto; }
.filter-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
  border: 1px solid var(--rule); border-radius: 100px; font-size: 13px;
  color: var(--muted); background: rgba(255,255,255,0.4); cursor: pointer;
  font-family: inherit; transition: background .15s, color .15s, border-color .15s;
}
.filter-btn:hover { background: var(--paper-2); }
.filter-btn.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ============================================================
   Responsive — Tablet  ≤ 1024px
   ============================================================ */
@media (max-width: 1024px) {
  .container        { padding: 0 32px; }
  .container-narrow { padding: 0 32px; }

  h1.display { font-size: 64px; }
  h2.display { font-size: 48px; }
  h3.display { font-size: 26px; }

  .pad-y    { padding: 80px 0; }
  .pad-y-sm { padding: 56px 0; }

  .twocol   { grid-template-columns: 1fr 1fr; gap: 48px; }
  .threecol { grid-template-columns: 1fr 1fr; gap: 32px; }
  .fourcol  { grid-template-columns: 1fr 1fr; gap: 24px; }

  .lede { font-size: 17px; }

  /* Blog & Articles */
  .featured-article { grid-template-columns: 1fr; gap: 32px; }
  .posts-grid       { grid-template-columns: 1fr 1fr; gap: 28px; }
  .newsletter-grid  { grid-template-columns: 1fr; gap: 32px; }
  .newsletter-form  { flex-wrap: wrap; }
  .filter-bar-inner { padding: 16px 32px; }

  /* TOC Stack */
  .container > div[style*="grid-template-columns: 220px"] { display: block !important; }
  .toc-side { position: static; margin-bottom: 40px; border-bottom: 1px solid var(--rule); padding-bottom: 24px; }
  .toc-side a { display: inline-block; padding: 4px 12px; }
}

/* ============================================================
   Responsive — Mobile  ≤ 768px
   ============================================================ */
@media (max-width: 768px) {
  .container        { padding: 0 20px; }
  .container-narrow { padding: 0 20px; }

  h1.display { font-size: 42px; line-height: 1.0; }
  h2.display { font-size: 34px; line-height: 1.05; }
  h3.display { font-size: 22px; }

  .pad-y    { padding: 56px 0; }
  .pad-y-sm { padding: 40px 0; }

  .twocol   { grid-template-columns: 1fr; gap: 32px; }
  .threecol { grid-template-columns: 1fr; gap: 32px; }
  .fourcol  { grid-template-columns: 1fr; gap: 24px; }

  .lede { font-size: 16px; max-width: 100%; }

  .btn { padding: 14px 20px; font-size: 14px; gap: 8px; }

  /* Nav */
  #main-nav .nav-desktop-btn { display: none; }
  #main-nav .nav-mobile-btn { display: inline-flex; margin-top: 24px; width: 100%; justify-content: center; }

  /* Footer Accordion */
  .footer-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .footer-col-title { border-bottom: 1px solid #2A2D33; margin-bottom: 0; padding: 16px 0; }
  .footer-chevron { display: block; }
  .footer-links { display: none; padding: 16px 0; }
  .footer-col.active .footer-links { display: block; }
  .footer-col.active .footer-chevron { transform: rotate(45deg); }

  /* Prose */
  .prose { font-size: 17px; }
  .prose h2 { font-size: 30px; margin-top: 48px; }
  .prose h3 { font-size: 22px; }
  .prose blockquote { font-size: 22px; padding-left: 20px; }
  .prose .drop-cap::first-letter { font-size: 64px; }
  .prose figure { margin: 32px 0; }
  .prose figcaption { padding-left: 0; }
}

/* ============================================================
   Cookie Banner
   ============================================================ */
#aa-cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9999;
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid #2A2D33;
  transform: translateY(0);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.cb-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px 56px;
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.cb-text {
  flex: 1;
  font-size: 13px;
  line-height: 1.55;
  color: #C9C4B7;
  min-width: 260px;
}
.cb-text strong { color: var(--paper); }
.cb-link {
  color: var(--brand-soft);
  text-underline-offset: 3px;
  margin-left: 6px;
  font-size: 12px;
}
.cb-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.cb-btn {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 2px;
  border: none;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.cb-decline {
  background: transparent;
  color: #9A958A;
  border: 1px solid #2A2D33;
}
.cb-decline:hover { background: #2A2D33; color: var(--paper); }
.cb-accept {
  background: var(--brand);
  color: var(--paper);
}
.cb-accept:hover { background: var(--brand-deep); }

/* ============================================================
   Mobile Menu
   ============================================================ */
#mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: var(--ink);
  z-index: 201;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  #mobile-menu-toggle { display: block; }

  /* Nav inner: ensure logo left, toggle right, no overflow */
  #main-nav .inner {
    padding: 0 20px !important;
    gap: 12px !important;
    justify-content: space-between;
  }

  #main-nav .logo {
    flex-shrink: 0;
  }

  /* Hide nav-right CTA button on mobile, keep toggle */
  #main-nav .nav-right {
    gap: 8px;
  }

  #main-nav .nav-links {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(300px, 85vw);
    background: var(--paper);
    flex-direction: column;
    padding: 88px 32px 40px;
    gap: 8px !important;
    box-shadow: -8px 0 32px rgba(0,0,0,0.12);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    display: flex !important;
    z-index: 200;
    overflow-y: auto;
  }

  #main-nav .nav-links a:not(.btn) {
    display: block;
    padding: 12px 0;
    font-size: 18px;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
    text-decoration: none;
  }

  body.menu-open #main-nav .nav-links {
    transform: translateX(0);
  }

  body.menu-open {
    overflow: hidden;
  }

  /* Overlay */
  .menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20,22,26,0.35);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
    z-index: 199;
  }
  body.menu-open .menu-overlay {
    opacity: 1;
    pointer-events: auto;
  }
}