/*
 * nd-utilities.css — ニコルデジマ Utility Classes
 * ================================================
 * Small, single-purpose classes you apply via the Gutenberg
 * block editor's "Additional CSS class" field (Block settings
 * panel > Advanced).
 *
 * These are helpers for quick adjustments — spacing tweaks,
 * text colour overrides, layout nudges. They don't replace
 * component classes; they supplement them.
 *
 * NAMING: all prefixed with nd- to avoid collisions with
 * WordPress, GeneratePress, or plugin classes.
 *
 * DEPENDS ON: nd-tokens.css (references spacing/colour tokens)
 */


/* ═══════════════════════════════════════════════
   SPACING — margin-top
   ═══════════════════════════════════════════════ */

.nd-mt-0   { margin-top: 0; }
.nd-mt-sm  { margin-top: var(--s-2); }       /*  8px */
.nd-mt-md  { margin-top: var(--s-4); }       /* 16px */
.nd-mt-lg  { margin-top: var(--s-8); }       /* 32px */
.nd-mt-xl  { margin-top: var(--s-12); }      /* 48px */
.nd-mt-2xl { margin-top: var(--s-16); }      /* 64px */


/* ═══════════════════════════════════════════════
   SPACING — margin-bottom
   ═══════════════════════════════════════════════ */

.nd-mb-0   { margin-bottom: 0; }
.nd-mb-sm  { margin-bottom: var(--s-2); }    /*  8px */
.nd-mb-md  { margin-bottom: var(--s-4); }    /* 16px */
.nd-mb-lg  { margin-bottom: var(--s-8); }    /* 32px */
.nd-mb-xl  { margin-bottom: var(--s-12); }   /* 48px */
.nd-mb-2xl { margin-bottom: var(--s-16); }   /* 64px */


/* ═══════════════════════════════════════════════
   SPACING — padding-top
   ═══════════════════════════════════════════════ */

.nd-pt-0   { padding-top: 0; }
.nd-pt-sm  { padding-top: var(--s-2); }      /*  8px */
.nd-pt-md  { padding-top: var(--s-4); }      /* 16px */
.nd-pt-lg  { padding-top: var(--s-8); }      /* 32px */
.nd-pt-xl  { padding-top: var(--s-12); }     /* 48px */


/* ═══════════════════════════════════════════════
   SPACING — padding-bottom
   ═══════════════════════════════════════════════ */

.nd-pb-0   { padding-bottom: 0; }
.nd-pb-sm  { padding-bottom: var(--s-2); }   /*  8px */
.nd-pb-md  { padding-bottom: var(--s-4); }   /* 16px */
.nd-pb-lg  { padding-bottom: var(--s-8); }   /* 32px */
.nd-pb-xl  { padding-bottom: var(--s-12); }  /* 48px */


/* ═══════════════════════════════════════════════
   SPACING — gap (for flex/grid containers)
   ═══════════════════════════════════════════════ */

.nd-gap-sm { gap: var(--s-2); }              /*  8px */
.nd-gap-md { gap: var(--s-4); }              /* 16px */
.nd-gap-lg { gap: var(--s-8); }              /* 32px */


/* ═══════════════════════════════════════════════
   TEXT — colour overrides
   ═══════════════════════════════════════════════ */

.nd-text-ink     { color: var(--ink); }
.nd-text-ink2    { color: var(--ink-2); }
.nd-text-muted   { color: var(--ink-3); }
.nd-text-kaki    { color: var(--kaki); }
.nd-text-matcha  { color: var(--matcha); }
.nd-text-on-dark { color: var(--on-accent); }


/* ═══════════════════════════════════════════════
   TEXT — font family overrides
   ═══════════════════════════════════════════════ */

.nd-serif { font-family: var(--serif); }
.nd-sans  { font-family: var(--sans); }
.nd-mono  { font-family: var(--mono); }


/* ═══════════════════════════════════════════════
   TEXT — weight overrides
   ═══════════════════════════════════════════════ */

.nd-fw-400 { font-weight: 400; }
.nd-fw-500 { font-weight: 500; }
.nd-fw-700 { font-weight: 700; }


/* ═══════════════════════════════════════════════
   TEXT — size helpers
   ═══════════════════════════════════════════════ */

.nd-text-xs  { font-size: 10px; }
.nd-text-sm  { font-size: 12px; }
.nd-text-md  { font-size: 15px; }
.nd-text-lg  { font-size: 20px; }
.nd-text-xl  { font-size: 24px; }


/* ═══════════════════════════════════════════════
   LAYOUT — width constraints
   ═══════════════════════════════════════════════ */

.nd-section-narrow {
  max-width: var(--container-narrow);   /* 760px */
  margin-left: auto;
  margin-right: auto;
}

.nd-section-medium {
  max-width: var(--container-medium);   /* 1100px */
  margin-left: auto;
  margin-right: auto;
}


/* ═══════════════════════════════════════════════
   LAYOUT — flex helpers
   ═══════════════════════════════════════════════ */

.nd-flex         { display: flex; }
.nd-flex-col     { display: flex; flex-direction: column; }
.nd-flex-center  { display: flex; align-items: center; justify-content: center; }
.nd-flex-between { display: flex; align-items: center; justify-content: space-between; }
.nd-flex-wrap    { flex-wrap: wrap; }


/* ═══════════════════════════════════════════════
   DISPLAY — visibility
   ═══════════════════════════════════════════════ */

/* Visually hidden but accessible to screen readers */
.nd-visually-hidden {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

/* Hide on specific breakpoints */
@media (max-width: 880px) {   /* --bp-md */
  .nd-hide-mobile { display: none; }
}

@media (min-width: 881px) {
  .nd-hide-desktop { display: none; }
}


/* ═══════════════════════════════════════════════
   BACKGROUND — surface overrides
   ═══════════════════════════════════════════════ */

.nd-bg-paper   { background-color: var(--paper); }
.nd-bg-paper2  { background-color: var(--paper-2); }
.nd-bg-kaki    { background-color: var(--kaki); }
.nd-bg-matcha  { background-color: var(--matcha); }


/* ═══════════════════════════════════════════════
   BORDERS
   ═══════════════════════════════════════════════ */

.nd-border-top    { border-top: 1px solid var(--hairline); }
.nd-border-bottom { border-bottom: 1px solid var(--hairline); }
.nd-border-light  { border: 1px solid var(--hairline-2); }