/**
 * Responsive foundation — system-level primitives that every plugin block
 * and every pattern depends on. Standards: docs/responsive-architecture.md.
 *
 * This file is loaded globally by functions.php. Do NOT add block-specific
 * rules here — those belong in plugin/src/<block>/style.css.
 */

/* ─── Breakpoint tokens ─────────────────────────────────────────
 * For parent-theme header/footer CSS only. Plugin blocks respond
 * to container width, not viewport — they use @container, not these.
 * See docs/responsive-architecture.md §3.1.
 */
:root {
    --nn-bp-sm: 30rem;  /*  480px */
    --nn-bp-md: 48rem;  /*  768px */
    --nn-bp-lg: 64rem;  /* 1024px */
    --nn-bp-xl: 80rem;  /* 1280px */
}

/* ─── Text-wrap guarantees ──────────────────────────────────────
 * Headings balance line distribution across 1-3 lines.
 * Prose breaks long words rather than forcing container overflow.
 * Long unbreakable strings (emails, tel links) break anywhere.
 * See docs/responsive-architecture.md §5.
 */
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

p, li, figcaption, blockquote, dd, dt {
    overflow-wrap: break-word;
}

a[href^="mailto:"],
a[href^="tel:"] {
    overflow-wrap: anywhere;
}

/* Site title is a wordmark — wrap at word boundaries, never mid-word.
 * Default heading rules let `overflow-wrap: break-word` split a single
 * long word ("Strawberry" → "Strawberr / y") when the column is narrow.
 * For a brand mark that's wrong; let it wrap at the space instead, or
 * overflow if it's truly one long word (the design should size it down). */
.wp-block-site-title {
    overflow-wrap: normal;
    word-break: keep-all;
}

/* ─── Grid-item shrink guarantee ────────────────────────────────
 * Grid items default to min-width: auto, which means they will NOT
 * shrink below their content's intrinsic min-width. A single long
 * word forces the column to expand past its 1fr allocation, which
 * forces the parent grid, which forces the body — horizontal scroll.
 *
 * min-width: 0 allows grid items to actually respect their 1fr.
 * Applied to all plugin block grids via attribute selector so
 * individual blocks don't need to remember.
 *
 * See docs/responsive-architecture.md §4.4.
 */
[class*="nn-"][class*="-grid"] > * {
    min-width: 0;
}