/* ==========================================================
   Horus website — responsive layer
   Loaded after c.css and page-specific <style> so it overrides
   the desktop-first layout for tablet (≤960) and phone (≤600).
   ========================================================== */

/* ---------- Mobile-nav hamburger (hidden ≥ 960) ---------- */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  color: var(--c-nav-fg);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background-color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.nav-toggle:hover { background: var(--c-nav-lk-hover-bg); border-color: var(--c-border-strong); }
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .ic-close { display: none; }
body.nav-open { overflow: hidden; }
body.nav-open .nav-toggle .ic-open { display: none; }
body.nav-open .nav-toggle .ic-close { display: block; }

/* Drawer-only nav items (Logg inn / Book demo) injected by c.js — hidden in the
   desktop nav, revealed only inside the mobile drawer (≤960px, nav-open). */
.nav ul li.nav-drawer-only { display: none; }

/* ====================================================
   ≤ 1180px — tighten desktop chrome before stacking
   ==================================================== */
@media (max-width: 1180px) {
  .nav .nav-inner { padding: 14px 32px; gap: 14px; }
  .nav a.lk { font-size: 16px; padding: 6px 10px; }
  .nav .actions { gap: 10px; }
  .nav .actions .btn { padding: 12px 22px; font-size: 15px; }
  .nav .actions > button.theme-toggle { transform: scale(1.05); margin: 0; }
  .wrap { padding: 0 24px; }
}

/* ====================================================
   ≤ 960px — tablet: collapse nav, stack editorial grids
   ==================================================== */
@media (max-width: 960px) {

  /* ----- Nav: logo · [theme, CTA, hamburger] ----- */
  .nav .nav-inner {
    grid-template-columns: auto 1fr auto;
    padding: 12px 20px;
    gap: 12px;
  }
  .nav ul { display: none; }
  .nav img.logo { height: 36px; }
  .nav .actions {
    grid-column: 3;
    gap: 8px;
  }
  .nav .actions .btn.ghost { padding: 10px 16px; font-size: 14px; }
  .nav .actions .btn.primary { padding: 10px 18px; font-size: 14px; }
  .nav .actions > button.theme-toggle { transform: none; margin: 0; }
  .nav-toggle { display: inline-flex; }

  /* ----- Drawer (open state) — floating panel anchored top-right under the nav.
     The nav has backdrop-filter which, per spec, creates a containing block
     for fixed-position descendants — so a fixed drawer would be clipped to
     the nav's height. Drop the filter while open so the fixed UL escapes. */
  body.nav-open { overflow: auto; } /* allow scrolling underneath */
  body.nav-open .nav { backdrop-filter: none; }
  body.nav-open .nav ul {
    display: flex;
    position: fixed;
    top: calc(var(--nav-h, 64px) + 8px);
    left: 16px;
    right: 16px;
    bottom: auto;
    max-height: calc(100vh - var(--nav-h, 64px) - 24px);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    background: var(--c-page);
    padding: 8px;
    z-index: 100;
    border: 1px solid var(--c-nav-border);
    border-radius: 14px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.30), 0 4px 12px rgba(0,0,0,0.18);
    overflow-y: auto;
    flex-wrap: nowrap;
  }
  body.nav-open .nav ul li { width: 100%; list-style: none; }
  body.nav-open .nav ul a.lk {
    display: block;
    padding: 12px 14px;
    font-size: 16px;
    border-radius: 8px;
    border-bottom: 1px solid var(--c-nav-border);
    color: var(--c-nav-fg);
  }
  body.nav-open .nav ul li:last-child a.lk { border-bottom: 0; }
  body.nav-open .nav ul a.lk.active { background: transparent; color: var(--horus-indigo); }
  body.nav-open .nav ul a.lk.drawer-extra {
    border-bottom: 0;
    margin-top: 6px;
    padding: 11px 14px;
    background: rgba(99,102,241,0.10);
    color: var(--horus-indigo);
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
  }
  [data-theme="dark"] body.nav-open .nav ul a.lk.drawer-extra {
    background: rgba(175,190,255,0.10);
    color: var(--horus-lavender);
  }
  /* Reveal the injected drawer-only items inside the open mobile drawer. */
  body.nav-open .nav ul li.nav-drawer-only { display: block; }

  /* ----- Editorial 200px · 1fr (and 200px · 1fr · 1fr) grids: stack ----- */
  .hero .meta,
  .hero .actions-row,
  .page-head .meta,
  .page-head .lead,
  .feat-teasers .head,
  .quote-block,
  .end-cta-grid,
  .pricing-row,
  .faq-row,
  .pgrid,
  .int-grid,
  .k-grid,
  .demo-grid,
  .takk-grid,
  .partner-section,
  .become-grid,
  .chapter,
  .res-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    align-items: start !important;
  }
  .end-cta-grid { gap: 28px !important; text-align: center; }
  .end-cta-grid > .meta-label { text-align: left; }
  .end-cta-grid h2 { margin-left: auto; margin-right: auto; }
  .end-cta-grid .ctas { justify-content: center; }
  .quote-block { gap: 16px !important; padding: 32px 0 !important; text-align: center; }
  .quote-block .body { margin-left: auto; margin-right: auto; }
  .hero .actions-row { margin-top: 28px; }
  .hero .meta.hero-meta-after { margin-top: 48px; }
  .page-head .lead { margin-top: 20px; }
  .res-grid .meta-label { position: static !important; }

  /* The eyebrow row above stacked body now reads as a small mono caption. */
  .pricing-row > .meta-label,
  .faq-row > .meta-label,
  .pgrid > .meta-label,
  .int-grid > .meta-label,
  .k-grid > .meta-label,
  .demo-grid > .meta-label,
  .takk-grid > .meta-label,
  .partner-section > .meta-label,
  .become-grid > .meta-label,
  .chapter .ix,
  .feat-teasers .head .meta-label,
  .page-head .meta .meta-label,
  .hero .meta .meta-label,
  .end-cta-grid > .meta-label { padding-top: 0; }

  /* ----- Card / column grids: collapse ----- */
  .stats-row,
  .feat-cols,
  .plans,
  .pcards,
  .int-cards,
  .partner-grid,
  .related-grid,
  .article-cta .wrap,
  .chapter .body-grid,
  .res-featured,
  .res-cards {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .stats-row { gap: 36px !important; }
  /* Stats look stranded against the left edge once stacked — centre them. */
  .stats-row .stat { text-align: center; }
  .stats-row .stat .lbl { margin-left: auto; margin-right: auto; }
  .stats-row .stat .num { display: inline-flex; align-items: baseline; }
  .chapter .body-grid { gap: 28px !important; }

  /* ----- Section paddings: trim ----- */
  .hero { padding: 56px 0 64px; }
  .page-head { padding: 48px 0; }
  .feat-teasers { padding: 56px 0; }
  .quotes-section { padding: 56px 0; }
  .end-cta { padding: 48px 0 64px; }
  section.stats { padding: 40px 0 56px; }
  .chapter { padding: 56px 0 !important; }
  .end-cta-card { padding: 56px 32px; border-radius: 16px; }
  .pricing-section { padding: 56px 0 72px !important; }
  .faq { padding: 56px 0 !important; }
  .faq-list { padding: 56px 0 !important; }
  .article-head { padding: 56px 0 32px !important; }
  .article-body { padding: 32px 0 64px !important; }
  .related { padding: 48px 0 !important; }
  .article-cta { padding: 56px 0 !important; }

  /* ----- Tile / card padding ----- */
  .feat-tile { padding: 22px; min-height: 0; gap: 14px; }
  .feat-tile h3 { font-size: 22px; }
  .feat-tile p { font-size: 15px; }
  .feat-tile a { font-size: 18px; }
  .feat-tile a svg { width: 20px; height: 20px; }

  /* ----- Footer: 2-col, full-width brand block ----- */
  .foot-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding-bottom: 32px;
  }
  .foot-grid > :first-child { grid-column: 1 / -1; }

  /* ----- Hero preview: drop the 3D tilt + heavy shadow ----- */
  .hero-preview { margin-top: 40px; }
  .hero-preview .app-frame {
    transform: none;
    box-shadow: 0 16px 32px rgba(0,0,0,0.25), 0 6px 12px rgba(99,102,241,0.10);
  }

  /* ----- Article TOC: stack above article body ----- */
  .article-body .wrap {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .article-body .toc { position: static !important; }

  /* ----- Form card / contact / takk: relax padding ----- */
  .k-card, .takk-card, .demo-form { padding: 26px !important; }
}

/* ====================================================
   ≤ 600px — phone
   ==================================================== */
@media (max-width: 600px) {
  .wrap { padding: 0 16px; }
  .nav .nav-inner { padding: 10px 16px; gap: 8px; }
  .nav img.logo { height: 30px; }
  .nav .actions .btn.primary { padding: 9px 14px; font-size: 13px; }
  .nav .actions .btn.ghost { display: none; } /* hidden on phone; reachable in drawer */
  .nav .actions { gap: 6px; }
  .nav-toggle { width: 40px; height: 40px; }
  .nav-toggle svg { width: 20px; height: 20px; }

  /* Headings reflow */
  .hero h1 { font-size: clamp(36px, 11vw, 56px); line-height: 0.98; }
  .page-head h1 { font-size: clamp(32px, 10vw, 56px); line-height: 1.02; }
  .page-head .lead-body { font-size: 15px; }
  .feat-teasers h2 { font-size: clamp(28px, 8vw, 40px); }
  .end-cta h2 { font-size: clamp(32px, 10vw, 52px); }
  .quote-block .body { font-size: 21px; }
  .quotes-eyebrow { margin-bottom: 24px; font-size: 12px; }

  /* CTA buttons stack full-width */
  .hero .ctas,
  .end-cta .ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .hero .ctas .btn,
  .end-cta .ctas .btn {
    width: 100%;
    justify-content: center;
  }

  /* Stats — keep generous but a touch smaller */
  .stat .num { font-size: 64px; }
  .stat .num small { font-size: 22px; }
  .stat .num small.stack { font-size: 15px; margin-top: 8px; margin-left: 10px; }

  /* Marquee: tighter */
  .marquee { padding: 18px 0; }
  .marquee-item { font-size: 15px; }
  .marquee-set { gap: 36px; padding-right: 36px; }

  /* Footer: single column */
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .foot-bottom { flex-direction: column; gap: 10px; align-items: flex-start; padding-top: 20px; }

  /* End CTA card: less padding */
  .end-cta-card { padding: 40px 22px; border-radius: 14px; }

  /* Pricing plan card */
  .plan { padding: 28px !important; border-radius: 18px; }
  .plan .price { font-size: 48px !important; }
  .plan h3 { font-size: 24px !important; }

  /* FAQ */
  .faq dt { font-size: 17px !important; }
  .faq dd { font-size: 14px !important; }
  .faq-q { font-size: 18px !important; }
  .faq-a { font-size: 14px !important; }
  .faq-item { padding: 18px 0 !important; }

  /* Partner & integration cards */
  .pcard { padding: 26px !important; border-radius: 16px !important; }
  .pcard h2 { font-size: 24px !important; }
  .int-card { padding: 22px; }

  /* Article body */
  .article-body article { font-size: 16px; }
  .article-body article h2 { font-size: 24px; margin-top: 40px; }
  .article-body article h3 { font-size: 19px; margin-top: 32px; }
  .article-body article blockquote { font-size: 19px; padding-left: 18px; }
  .callout { padding: 18px 20px; grid-template-columns: 24px 1fr; gap: 12px; }

  /* Chapter title (funksjoner.html) */
  .chapter h2 { font-size: 32px !important; }
  .chapter p { font-size: 15px !important; }
  .chapter ul { font-size: 14px !important; }

  /* Forms — stack at full width */
  .field input,
  .field textarea,
  .demo-form input,
  .demo-form textarea,
  .k-card input,
  .k-card textarea { font-size: 16px; /* prevent iOS auto-zoom */ }

  /* Mini-mocks: keep visible but trim font sizes inside SVG-less mocks */
  .mini-mock.dl-mock .dl-cols { grid-template-columns: 1fr !important; }

  /* Featured resource pair */
  .res-featured { grid-template-columns: 1fr !important; }

  /* Become grid (partnere subpages) — the 200·1·1 collapses to single col */
  .become h3 { font-size: 28px !important; }
}

/* ====================================================
   Print: hide nav chrome + reveal everything
   ==================================================== */
@media print {
  .nav, footer, .marquee, .nav-toggle, .theme-toggle { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}