/* ============================================================
   INSTAWHEW — UTILITIES  v1.0
   Competitive u-* utility layer. Loaded on every page after
   tokens.css. Later cascade position means utilities win over
   equal-specificity component rules — no !important needed.

   Naming: u-{property}-{value}
   Responsive variants: u-{property}-{value}\@mobile  (≤ 767px)
                        u-{property}-{value}\@tablet  (≤ 1023px)
   ============================================================ */

/* ── SPACING ─────────────────────────────────────────────────
   Scale maps to --space-1 … --space-6 from tokens.css.
   u-m / u-p = all sides | u-mx/u-my = inline/block axis
   u-mt/mb/ml/mr/ms/me = logical individual sides
   ─────────────────────────────────────────────────────────── */

/* Margin — all sides */
.u-m-0 { margin: 0; }
.u-m-1 { margin: var(--space-1); }
.u-m-2 { margin: var(--space-2); }
.u-m-3 { margin: var(--space-3); }
.u-m-4 { margin: var(--space-4); }
.u-m-5 { margin: var(--space-5); }
.u-m-6 { margin: var(--space-6); }
.u-m-auto { margin: auto; }

/* Margin — inline axis (left + right) */
.u-mx-0    { margin-inline: 0; }
.u-mx-1    { margin-inline: var(--space-1); }
.u-mx-2    { margin-inline: var(--space-2); }
.u-mx-3    { margin-inline: var(--space-3); }
.u-mx-4    { margin-inline: var(--space-4); }
.u-mx-auto { margin-inline: auto; }

/* Margin — block axis (top + bottom) */
.u-my-0 { margin-block: 0; }
.u-my-1 { margin-block: var(--space-1); }
.u-my-2 { margin-block: var(--space-2); }
.u-my-3 { margin-block: var(--space-3); }
.u-my-4 { margin-block: var(--space-4); }
.u-my-5 { margin-block: var(--space-5); }
.u-my-6 { margin-block: var(--space-6); }

/* Margin — individual sides (logical) */
.u-mt-0 { margin-top: 0; }
.u-mt-1 { margin-top: var(--space-1); }
.u-mt-2 { margin-top: var(--space-2); }
.u-mt-3 { margin-top: var(--space-3); }
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-5 { margin-top: var(--space-5); }
.u-mt-6 { margin-top: var(--space-6); }

.u-mb-0 { margin-bottom: 0; }
.u-mb-1 { margin-bottom: var(--space-1); }
.u-mb-2 { margin-bottom: var(--space-2); }
.u-mb-3 { margin-bottom: var(--space-3); }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-mb-5 { margin-bottom: var(--space-5); }
.u-mb-6 { margin-bottom: var(--space-6); }

.u-ml-0 { margin-left: 0; }
.u-ml-auto { margin-left: auto; }
.u-mr-0 { margin-right: 0; }
.u-mr-auto { margin-right: auto; }

/* Padding — all sides */
.u-p-0 { padding: 0; }
.u-p-1 { padding: var(--space-1); }
.u-p-2 { padding: var(--space-2); }
.u-p-3 { padding: var(--space-3); }
.u-p-4 { padding: var(--space-4); }
.u-p-5 { padding: var(--space-5); }
.u-p-6 { padding: var(--space-6); }

/* Padding — inline axis */
.u-px-0 { padding-inline: 0; }
.u-px-1 { padding-inline: var(--space-1); }
.u-px-2 { padding-inline: var(--space-2); }
.u-px-3 { padding-inline: var(--space-3); }
.u-px-4 { padding-inline: var(--space-4); }
.u-px-5 { padding-inline: var(--space-5); }
.u-px-6 { padding-inline: var(--space-6); }

/* Padding — block axis */
.u-py-0 { padding-block: 0; }
.u-py-1 { padding-block: var(--space-1); }
.u-py-2 { padding-block: var(--space-2); }
.u-py-3 { padding-block: var(--space-3); }
.u-py-4 { padding-block: var(--space-4); }
.u-py-5 { padding-block: var(--space-5); }
.u-py-6 { padding-block: var(--space-6); }

/* Padding — individual sides */
.u-pt-0 { padding-top: 0; }
.u-pt-1 { padding-top: var(--space-1); }
.u-pt-2 { padding-top: var(--space-2); }
.u-pt-3 { padding-top: var(--space-3); }
.u-pt-4 { padding-top: var(--space-4); }
.u-pt-5 { padding-top: var(--space-5); }
.u-pt-6 { padding-top: var(--space-6); }

.u-pb-0 { padding-bottom: 0; }
.u-pb-1 { padding-bottom: var(--space-1); }
.u-pb-2 { padding-bottom: var(--space-2); }
.u-pb-3 { padding-bottom: var(--space-3); }
.u-pb-4 { padding-bottom: var(--space-4); }
.u-pb-5 { padding-bottom: var(--space-5); }
.u-pb-6 { padding-bottom: var(--space-6); }

/* Gap (for flex/grid containers) */
.u-gap-0 { gap: 0; }
.u-gap-1 { gap: var(--space-1); }
.u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }
.u-gap-4 { gap: var(--space-4); }
.u-gap-5 { gap: var(--space-5); }
.u-gap-6 { gap: var(--space-6); }

.u-gap-x-1 { column-gap: var(--space-1); }
.u-gap-x-2 { column-gap: var(--space-2); }
.u-gap-x-3 { column-gap: var(--space-3); }
.u-gap-x-4 { column-gap: var(--space-4); }

.u-gap-y-1 { row-gap: var(--space-1); }
.u-gap-y-2 { row-gap: var(--space-2); }
.u-gap-y-3 { row-gap: var(--space-3); }
.u-gap-y-4 { row-gap: var(--space-4); }


/* ── TYPOGRAPHY ──────────────────────────────────────────────
   Font sizes map to --text-* tokens. Weights, leading, and
   tracking are CSS-only tokens from tokens.css.
   ─────────────────────────────────────────────────────────── */

/* Font size */
.u-text-xs   { font-size: var(--text-xs); }
.u-text-sm   { font-size: var(--text-sm); }
.u-text-base { font-size: var(--text-base); }
.u-text-md   { font-size: var(--text-md, 1.0625rem); }
.u-text-lg   { font-size: var(--text-lg); }
.u-text-xl   { font-size: var(--text-xl); }
.u-text-2xl  { font-size: var(--text-2xl); }
.u-text-3xl  { font-size: var(--text-3xl); }
.u-text-4xl  { font-size: var(--text-4xl); }

/* Font weight */
.u-font-normal   { font-weight: 400; }
.u-font-medium   { font-weight: 500; }
.u-font-semibold { font-weight: 600; }
.u-font-bold     { font-weight: 700; }
.u-font-black    { font-weight: 800; }

/* Line height */
.u-leading-none    { line-height: 1; }
.u-leading-tight   { line-height: var(--leading-tight); }
.u-leading-snug    { line-height: var(--leading-snug); }
.u-leading-normal  { line-height: var(--leading-normal); }
.u-leading-relaxed { line-height: var(--leading-relaxed); }
.u-leading-loose   { line-height: var(--leading-loose); }

/* Letter spacing */
.u-tracking-tight  { letter-spacing: var(--tracking-tight); }
.u-tracking-snug   { letter-spacing: var(--tracking-snug); }
.u-tracking-normal { letter-spacing: 0; }
.u-tracking-wide   { letter-spacing: var(--tracking-wide); }
.u-tracking-caps   { letter-spacing: var(--tracking-caps); text-transform: uppercase; }

/* Text alignment */
.u-text-left   { text-align: left; }
.u-text-center { text-align: center; }
.u-text-right  { text-align: right; }

/* Text wrapping (modern — widely supported 2024+) */
.u-text-balance { text-wrap: balance; }
.u-text-pretty  { text-wrap: pretty; }

/* Text transform */
.u-uppercase   { text-transform: uppercase; }
.u-capitalize  { text-transform: capitalize; }
.u-normal-case { text-transform: none; }

/* Text decoration */
.u-underline    { text-decoration: underline; }
.u-no-underline { text-decoration: none; }
.u-line-through { text-decoration: line-through; }

/* Overflow */
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-clamp-2  { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.u-clamp-3  { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.u-break-words { overflow-wrap: break-word; word-break: break-word; }

/* Whitespace */
.u-nowrap    { white-space: nowrap; }
.u-pre-wrap  { white-space: pre-wrap; }


/* ── COLOR ───────────────────────────────────────────────────
   Text colors map to semantic --text-* tokens.
   Background colors map to semantic --surface-* tokens.
   ─────────────────────────────────────────────────────────── */

/* Text color */
.u-text-1       { color: var(--text-1); }
.u-text-2       { color: var(--text-2); }
.u-text-3       { color: var(--text-3); }
.u-text-accent  { color: var(--accent-600); }
.u-text-accent-lt { color: var(--accent-300); }
.u-text-white   { color: #fff; }
.u-text-success { color: var(--success); }
.u-text-warning { color: var(--warning); }
.u-text-error   { color: var(--error); }
.u-text-inherit { color: inherit; }

/* Background */
.u-bg-surface    { background: var(--surface); }
.u-bg-surface-2  { background: var(--surface-2); }
.u-bg-surface-3  { background: var(--surface-3, var(--surface-2)); }
.u-bg-accent     { background: var(--accent-600); }
.u-bg-accent-sub { background: var(--accent-50); }
.u-bg-dark       { background: var(--base-950); }
.u-bg-white      { background: #fff; }
.u-bg-transparent { background: transparent; }
.u-bg-success    { background: var(--success-bg); }
.u-bg-warning    { background: var(--warning-bg); }
.u-bg-error      { background: var(--error-bg); }

/* Border */
.u-border        { border: 1px solid var(--line-subtle); }
.u-border-line   { border: 1px solid var(--line); }
.u-border-top    { border-top: 1px solid var(--line-subtle); }
.u-border-bottom { border-bottom: 1px solid var(--line-subtle); }
.u-border-none   { border: none; }
.u-border-accent { border-color: var(--accent-600); }


/* ── LAYOUT — FLEX ───────────────────────────────────────────
   Flex container + children utilities.
   ─────────────────────────────────────────────────────────── */

.u-flex        { display: flex; }
.u-inline-flex { display: inline-flex; }
.u-flex-col    { flex-direction: column; }
.u-flex-row    { flex-direction: row; }
.u-flex-wrap   { flex-wrap: wrap; }
.u-flex-nowrap { flex-wrap: nowrap; }

/* Align items */
.u-items-start   { align-items: flex-start; }
.u-items-center  { align-items: center; }
.u-items-end     { align-items: flex-end; }
.u-items-stretch { align-items: stretch; }
.u-items-baseline { align-items: baseline; }

/* Justify content */
.u-justify-start   { justify-content: flex-start; }
.u-justify-center  { justify-content: center; }
.u-justify-end     { justify-content: flex-end; }
.u-justify-between { justify-content: space-between; }
.u-justify-around  { justify-content: space-around; }

/* Self alignment */
.u-self-start  { align-self: flex-start; }
.u-self-center { align-self: center; }
.u-self-end    { align-self: flex-end; }
.u-self-stretch { align-self: stretch; }

/* Flex children */
.u-flex-1    { flex: 1; }
.u-flex-auto { flex: 1 1 auto; }
.u-flex-none { flex: none; }
.u-grow      { flex-grow: 1; }
.u-shrink-0  { flex-shrink: 0; }


/* ── LAYOUT — GRID ───────────────────────────────────────────
   Responsive auto-fit grids using minmax so columns collapse
   gracefully on mobile without breakpoint rules.
   ─────────────────────────────────────────────────────────── */

.u-grid      { display: grid; }
.u-inline-grid { display: inline-grid; }

/* Fixed-count grids (collapse to 1-col on narrow viewports via auto-fit) */
.u-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.u-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.u-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); }

/* Auto-fit grids — columns fill available space, collapse naturally */
.u-grid-auto-sm  { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.u-grid-auto-md  { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.u-grid-auto-lg  { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }

/* Grid alignment */
.u-grid-center { place-items: center; }


/* ── SIZING ──────────────────────────────────────────────────
   Width, height, max-width utilities.
   ─────────────────────────────────────────────────────────── */

.u-w-full   { width: 100%; }
.u-w-auto   { width: auto; }
.u-w-screen { width: 100vw; }
.u-h-full   { height: 100%; }
.u-h-auto   { height: auto; }
.u-h-screen { height: 100vh; }
.u-min-w-0  { min-width: 0; }
.u-min-h-0  { min-height: 0; }

/* Max-width — ties to WP layout sizes */
.u-max-w-xs      { max-width: 360px; }
.u-max-w-sm      { max-width: 480px; }
.u-max-w-md      { max-width: 640px; }
.u-max-w-prose   { max-width: 65ch; }
.u-max-w-content { max-width: var(--wp--style--global--content-size, 720px); }
.u-max-w-wide    { max-width: var(--wp--style--global--wide-size, 1200px); }
.u-max-w-full    { max-width: 100%; }
.u-max-w-none    { max-width: none; }

/* Auto center + max-width combined */
.u-container        { max-width: var(--wp--style--global--content-size, 720px); margin-inline: auto; }
.u-container--wide  { max-width: var(--wp--style--global--wide-size, 1200px); margin-inline: auto; }


/* ── DISPLAY ─────────────────────────────────────────────────
   ─────────────────────────────────────────────────────────── */

.u-block        { display: block; }
.u-inline       { display: inline; }
.u-inline-block { display: inline-block; }
.u-hidden       { display: none; }
.u-contents     { display: contents; }

/* Screen-reader only — visually hidden but accessible */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}


/* ── POSITION ────────────────────────────────────────────────
   ─────────────────────────────────────────────────────────── */

.u-relative { position: relative; }
.u-absolute { position: absolute; }
.u-fixed    { position: fixed; }
.u-sticky   { position: sticky; }
.u-static   { position: static; }
.u-inset-0  { inset: 0; }
.u-top-0    { top: 0; }
.u-right-0  { right: 0; }
.u-bottom-0 { bottom: 0; }
.u-left-0   { left: 0; }

/* Z-index */
.u-z-0  { z-index: 0; }
.u-z-1  { z-index: 1; }
.u-z-10 { z-index: 10; }
.u-z-20 { z-index: 20; }
.u-z-50 { z-index: 50; }


/* ── VISUAL ──────────────────────────────────────────────────
   Border-radius, shadows, overflow, opacity.
   ─────────────────────────────────────────────────────────── */

/* Border radius */
.u-rounded-none { border-radius: 0; }
.u-rounded-sm   { border-radius: var(--radius-sm); }
.u-rounded-md   { border-radius: var(--radius-md); }
.u-rounded-lg   { border-radius: var(--radius-lg); }
.u-rounded-xl   { border-radius: var(--radius-xl); }
.u-rounded-full { border-radius: var(--radius-full); }

/* Box shadow */
.u-shadow-none { box-shadow: none; }
.u-shadow-xs   { box-shadow: var(--shadow-xs); }
.u-shadow-sm   { box-shadow: var(--shadow-sm); }
.u-shadow-md   { box-shadow: var(--shadow-md); }
.u-shadow-lg   { box-shadow: var(--shadow-lg); }
.u-shadow-xl   { box-shadow: var(--shadow-xl); }

/* Overflow */
.u-overflow-hidden { overflow: hidden; }
.u-overflow-auto   { overflow: auto; }
.u-overflow-x-auto { overflow-x: auto; }
.u-overflow-x-hidden { overflow-x: hidden; }

/* Opacity */
.u-opacity-0   { opacity: 0; }
.u-opacity-50  { opacity: 0.5; }
.u-opacity-75  { opacity: 0.75; }
.u-opacity-100 { opacity: 1; }


/* ── ASPECT RATIO ────────────────────────────────────────────
   ─────────────────────────────────────────────────────────── */

.u-aspect-square { aspect-ratio: 1 / 1; }
.u-aspect-video  { aspect-ratio: 16 / 9; }
.u-aspect-4-3    { aspect-ratio: 4 / 3; }
.u-aspect-3-4    { aspect-ratio: 3 / 4; }


/* ── OBJECT FIT ──────────────────────────────────────────────
   ─────────────────────────────────────────────────────────── */

.u-object-cover   { object-fit: cover; }
.u-object-contain { object-fit: contain; }
.u-object-center  { object-position: center; }
.u-object-top     { object-position: top; }


/* ── INTERACTIVE ─────────────────────────────────────────────
   ─────────────────────────────────────────────────────────── */

.u-cursor-pointer { cursor: pointer; }
.u-cursor-default { cursor: default; }
.u-cursor-not-allowed { cursor: not-allowed; }
.u-select-none { user-select: none; }
.u-pointer-events-none { pointer-events: none; }
.u-pointer-events-auto { pointer-events: auto; }

/* Transition shorthand */
.u-transition      { transition: all var(--dur-base) var(--ease); }
.u-transition-fast { transition: all var(--dur-fast) var(--ease); }
.u-transition-none { transition: none; }


/* ── COLUMN PROPORTIONS ──────────────────────────────────────
   For wp:columns without a component class. Apply to the
   wp-block-column div so WP's flex layout honours the ratio
   without an inline flex-basis. Uses unitless flex so the two
   siblings' ratios are preserved at any container width.
   ─────────────────────────────────────────────────────────── */

.u-col-35 { flex: 35; min-width: 0; }
.u-col-40 { flex: 40; min-width: 0; }
.u-col-45 { flex: 45; min-width: 0; }
.u-col-55 { flex: 55; min-width: 0; }
.u-col-60 { flex: 60; min-width: 0; }
.u-col-65 { flex: 65; min-width: 0; }


/* ── BLOCK GAP OVERRIDES ─────────────────────────────────────
   WP's is-layout-flow uses --wp--style--block-gap for spacing
   between block children. These classes override it per-container
   directly in the block editor "Additional CSS class" field.
   ─────────────────────────────────────────────────────────── */

.u-flow-0 { --wp--style--block-gap: 0; }
.u-flow-1 { --wp--style--block-gap: var(--space-1); }
.u-flow-2 { --wp--style--block-gap: var(--space-2); }
.u-flow-3 { --wp--style--block-gap: var(--space-3); }
.u-flow-4 { --wp--style--block-gap: var(--space-4); }
.u-flow-5 { --wp--style--block-gap: var(--space-5); }
.u-flow-6 { --wp--style--block-gap: var(--space-6); }


/* ── RESPONSIVE VISIBILITY ───────────────────────────────────
   Backslash escapes the @ so it's valid in a class attribute.
   ─────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .u-hidden\@mobile  { display: none !important; }
  .u-block\@mobile   { display: block; }
  .u-flex\@mobile    { display: flex; }
  .u-flex-col\@mobile { flex-direction: column; }
  .u-text-center\@mobile { text-align: center; }
  .u-mx-auto\@mobile { margin-inline: auto; }
  .u-w-full\@mobile  { width: 100%; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .u-hidden\@tablet  { display: none !important; }
}

@media (min-width: 768px) {
  .u-hidden\@desktop { display: none !important; }
  .u-block\@desktop  { display: block; }
  .u-flex\@desktop   { display: flex; }
}


/* ── DARK MODE AWARE ─────────────────────────────────────────
   Utilities that adapt in dark mode. These supplement the
   semantic color tokens — use semantic tokens first, these
   only when you need an explicit override.
   ─────────────────────────────────────────────────────────── */

[data-theme="dark"] .u-dark\:bg-surface   { background: var(--surface); }
[data-theme="dark"] .u-dark\:text-1       { color: var(--text-1); }
[data-theme="dark"] .u-dark\:text-2       { color: var(--text-2); }
[data-theme="dark"] .u-dark\:border-subtle { border-color: var(--line-subtle); }