/*
 * Klariqo Global Design System
 * Single source of truth for typography, colors, and shared styles.
 * Linked from every page — changes here propagate site-wide.
 *
 * Usage: <link rel="stylesheet" href="/assets/css/global.css">
 * Place AFTER Tailwind CDN script so overrides take precedence.
 */

/* ═══════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════ */

/* All headings use regular weight (400), not black (900).
   This gives a modern, clean look matching Linear/Stripe.
   Tailwind's font-black class in HTML is overridden here. */
h1, h2, h3, h4, h5, h6 {
    font-weight: 400 !important;
}

/* ═══════════════════════════════════════════
   BRAND HIGHLIGHT
   ═══════════════════════════════════════════ */
.highlight {
    background: linear-gradient(to top, #a3ff0f 45%, transparent 45%);
    padding: 0 6px;
    margin-left: -6px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* ═══════════════════════════════════════════
   MOBILE MENU
   ═══════════════════════════════════════════ */
.mobile-menu { display: none; }
.mobile-menu.open { display: flex; }

/* Dropdown nav hover */
.group:hover > div { pointer-events: auto; }