/* utilities.css — small helper classes shared across all pages */

/* ── Brand font defaults ─────────────────────────────────────────────────
   Match the Tweaks-panel default ("dm-serif" preset) so the JS
   applyTweaks() at load is a no-op and the page doesn't reflow when
   --serif / --sans / --mono are reset. */
:root{
  --serif: 'DM Serif Display', 'Fraunces', 'Times New Roman', serif;
  --sans:  'Manrope', 'Inter Tight', system-ui, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* Section background overrides */
.section.bg-paper{background:var(--bg)}
.section.bg-alt{background:var(--bg-alt)}

/* Margin-top utilities (paragraph spacing) */
.mt-2{margin-top:8px}
.mt-3{margin-top:14px}
.mt-4{margin-top:22px}
.mt-5{margin-top:24px}
.mt-0{margin-top:0}

/* Visibility */
.is-hidden{display:none !important}

/* Text helpers */
.text-muted{color:var(--muted)}
.text-orange-italic{font-style:italic;color:var(--orange)}

/* Media helpers */
.media-contain{width:100%;height:100%;object-fit:contain;object-position:center}

/* Tweak-row: vertical layout (used by tweaks panel) */
.tweak-row.is-stack{flex-direction:column;align-items:stretch;gap:8px}

/* CTA pill buttons used inside content sections */
.btn-pill{
  padding:16px 26px;border-radius:999px;
  font-weight:500;font-size:15px;
  display:inline-flex;align-items:center;gap:12px;
  text-decoration:none;
}
.btn-pill.is-primary{background:var(--orange);color:#fff}
.btn-pill.is-primary:hover{background:#fff;color:var(--ink);transform:translateY(-1px)}
.btn-pill.is-ghost{border:1px solid currentColor}
.btn-pill.is-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

/* Section title (used as inline h2 styling) */
.section-title{
  font-family:var(--serif);font-weight:340;
  font-size:clamp(2rem,4.5vw,3.4rem);
  line-height:1.05;letter-spacing:-.02em;
  max-width:22ch;margin-bottom:0;
}


/* ── extras (post-audit) ────────────────────────────────────── */
.mb-3{margin-bottom:18px}
.mb-4{margin-bottom:22px}
.mb-5{margin-bottom:24px}
.mb-7{margin-bottom:60px}
.mt-7{margin-top:32px}
.mt-8{margin-top:36px}

.text-muted-thin{color:var(--muted);font-weight:300}
.text-tiny{font-size:.6em}

/* Intro paragraph below section-title (used in nosaltres, mentoria-ia) */
.section-intro{margin-bottom:56px;max-width:60ch}

/* Header row aligned to baseline (used in index intro) */
.row-end-32{display:flex;gap:32px;align-items:flex-end}

/* Section-title max-width modifiers (in ch units) */
.section-title.mw-18{max-width:18ch}
.section-title.mw-20{max-width:20ch}
.section-title.mw-22{max-width:22ch}
.section-title.mw-24{max-width:24ch}


/* ── Header & mobile menu ────────────────────────────────────────────────
   Off-canvas panel inspired by HeadlessUI Dialog / Tailwind Plus headers
   (Stripe, Linear, Vercel, Apple all converge on this pattern).
   ───────────────────────────────────────────────────────────────────── */

/* Language switcher always visible (override base CSS hide-on-small rule) */
.site-header .lang{display:flex !important}
@media (max-width:520px){
  .site-header .lang{font-size:12px;margin-right:4px}
  .site-header .lang a{padding:4px}
}

/* Mobile-menu wrapper: overlay above everything */
.mm-root{
  position:fixed;inset:0;z-index:9999;
  pointer-events:none;visibility:hidden;
}
.mm-root.open{pointer-events:auto;visibility:visible}

/* Backdrop — fades in */
.mm-backdrop{
  position:absolute;inset:0;background:rgba(20,20,20,.55);
  opacity:0;transition:opacity .28s ease-out;
}
.mm-root.open .mm-backdrop{opacity:1}

/* Sliding panel — comes in from the right */
.mm-panel{
  position:absolute;top:0;right:0;height:100dvh;height:100vh;
  width:min(380px,92vw);background:var(--bg,#f4f1ec);color:var(--ink,#141414);
  display:flex;flex-direction:column;
  box-shadow:-12px 0 40px rgba(0,0,0,.18);
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.22,.61,.36,1);
  will-change:transform;outline:none;
}
.mm-root.open .mm-panel{transform:translateX(0)}

/* Panel header (title + X close button) */
.mm-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid rgba(20,20,20,.08);
}
.mm-title{
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink,#141414);
}
.mm-close{
  background:none;border:0;color:var(--ink,#141414);cursor:pointer;
  width:40px;height:40px;border-radius:999px;
  display:grid;place-items:center;
  transition:background .15s,color .15s;
}
.mm-close:hover{background:rgba(20,20,20,.06)}
.mm-close:focus-visible{outline:2px solid var(--orange,#ff6900);outline-offset:2px}

/* Body — scrollable list of links */
.mm-body{
  flex:1;overflow-y:auto;
  padding:14px 12px 28px;
  display:flex;flex-direction:column;gap:2px;
}
.mm-body a{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-radius:12px;
  font-family:var(--serif,'Fraunces',serif);font-weight:340;
  font-size:22px;line-height:1.1;
  color:var(--ink,#141414);text-decoration:none;
  transition:background .15s,color .15s,padding-left .2s;
}
.mm-body a:hover{background:rgba(20,20,20,.04);color:var(--orange,#ff6900);padding-left:22px}
.mm-body a.sub{font-size:18px;padding-left:28px;color:#3a3a3a}
.mm-body a.sub:hover{padding-left:34px}

.mm-body .mm-group-label{
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted,#8a8a8a);
  padding:18px 16px 6px;
}

/* CTA buttons at the bottom */
.mm-body .mm-ctas{
  display:flex;flex-direction:column;gap:10px;
  margin-top:14px;padding:18px 16px 6px;
  border-top:1px solid rgba(20,20,20,.08);
}
.mm-body .mm-ctas a{
  justify-content:center;border-radius:999px;
  font-family:var(--sans,system-ui);font-weight:500;font-size:15px;
  padding:14px 22px;
}
.mm-body .mm-ctas a:hover{padding-left:22px}
.mm-body .mm-ctas a.primary{background:var(--orange,#ff6900);color:#fff}
.mm-body .mm-ctas a.primary:hover{background:#e35e00;color:#fff}
.mm-body .mm-ctas a.ghost{border:1px solid rgba(20,20,20,.18);background:transparent;color:var(--ink,#141414)}
.mm-body .mm-ctas a.ghost:hover{background:rgba(20,20,20,.04)}

@media (prefers-reduced-motion:reduce){
  .mm-backdrop, .mm-panel{transition:none}
}

/* Neutralise the legacy .mobile-menu rules in every per-page CSS so they
   don't conflict — the new markup uses .mm-root / .mm-panel / .mm-body */
.mobile-menu{display:none !important}