/**
 * Framework — Utility classes (CSS)
 * =================================
 * Single-purpose classes applied as mix classes in Bricks. Each corresponds to a
 * Bricks global class that carries NO settings — the class exists so it can be
 * picked in the builder, the styling lives here.
 *
 * Migrated verbatim from WPCodeBox snippet #26 on 2026-09-06.
 * Values come from the global variables (--gap-*, --radius-*), so retheming a
 * project means changing the variables, never this file.
 *
 * Spacing utilities (u-mt-*, u-emt-*, u-p*, u-ep*) are NOT here — those are
 * Bricks global classes with real settings, managed in the design system.
 */

/* ======================
   GAP UTILITIES
   ====================== */

/* Shorthand gap (row + column) */
.u-gap-xs  { gap: var(--gap-xs); }
.u-gap-s   { gap: var(--gap-s); }
.u-gap-m   { gap: var(--gap-m); }
.u-gap-l   { gap: var(--gap-l); }
.u-gap-xl  { gap: var(--gap-xl); }

/* Row gap only */
.u-row-gap-xs  { row-gap: var(--gap-xs); }
.u-row-gap-s   { row-gap: var(--gap-s); }
.u-row-gap-m   { row-gap: var(--gap-m); }
.u-row-gap-l   { row-gap: var(--gap-l); }
.u-row-gap-xl  { row-gap: var(--gap-xl); }

/* Column gap only */
.u-col-gap-xs  { column-gap: var(--gap-xs); }
.u-col-gap-s   { column-gap: var(--gap-s); }
.u-col-gap-m   { column-gap: var(--gap-m); }
.u-col-gap-l   { column-gap: var(--gap-l); }
.u-col-gap-xl  { column-gap: var(--gap-xl); }


/* ======================
   BORDER-RADIUS UTILITIES
   ====================== */

.u-radius-xs    { border-radius: var(--radius-xs); }
.u-radius-s     { border-radius: var(--radius-s); }
.u-radius-m     { border-radius: var(--radius-m); }
.u-radius-l     { border-radius: var(--radius-l); }
.u-radius-xl    { border-radius: var(--radius-xl); }
.u-radius-2xl   { border-radius: var(--radius-2xl); }
.u-radius-3xl   { border-radius: var(--radius-3xl); }
.u-radius-full  { border-radius: var(--radius-full); }
.u-radius-none  { border-radius: 0; }


/* ======================
   CORNER SHAPE UTILITIES
   Requires a u-radius-* class (or border-radius) to take effect.
   Chrome/Edge 139+ only — graceful fallback to standard radius.
   ====================== */

/* Keywords */
.u-shape-squircle  { corner-shape: squircle; }          /* K=2  — iOS app icon feel */
.u-shape-bevel     { corner-shape: bevel; }             /* K=0  — straight diagonal cut */
.u-shape-scoop     { corner-shape: scoop; }             /* K=-1 — concave inward curve */
.u-shape-notch     { corner-shape: notch; }             /* K=-∞ — sharp 90° inward cut */

/* Fine-tuned superellipse values */
.u-shape-soft      { corner-shape: superellipse(1.5); } /* between round and squircle */
.u-shape-firm      { corner-shape: superellipse(3); }   /* squircle pushing toward square */


/* ======================
   SINGLE-CORNER SHAPE OVERRIDES
   ====================== */

/* Scoop overrides (most common use case) */
.u-shape-scoop-tl  { corner-top-left-shape: scoop; }
.u-shape-scoop-tr  { corner-top-right-shape: scoop; }
.u-shape-scoop-br  { corner-bottom-right-shape: scoop; }
.u-shape-scoop-bl  { corner-bottom-left-shape: scoop; }

/* Bevel overrides */
.u-shape-bevel-tl  { corner-top-left-shape: bevel; }
.u-shape-bevel-tr  { corner-top-right-shape: bevel; }
.u-shape-bevel-br  { corner-bottom-right-shape: bevel; }
.u-shape-bevel-bl  { corner-bottom-left-shape: bevel; }

/* Notch overrides */
.u-shape-notch-tl  { corner-top-left-shape: notch; }
.u-shape-notch-tr  { corner-top-right-shape: notch; }
.u-shape-notch-br  { corner-bottom-right-shape: notch; }
.u-shape-notch-bl  { corner-bottom-left-shape: notch; }


/* ==========================================================================
   Surface utilities — blur and glass
   Migrated from WPCodeBox snippets #7 and #45 on 2026-09-06.
   u-blur-light : backdrop blur only, no surface of its own.
   u-glass      : full glassmorphism — translucent white, blur, border, shadow.
   ========================================================================== */

.u-blur-light { 

   backdrop-filter:  saturate(90%) blur(2px)!important;
   -webkit-backdrop-filter: saturate(90%) blur(2px)!important;
}

.u-glass {
/* From https://css.glass */
background: rgba(255, 255, 255, 0.49);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(3.1px);
-webkit-backdrop-filter: blur(5.1px);
border: 1px solid rgba(255, 255, 255, 0.39);
}


/* ======================
   FONT-FAMILY UTILITIES
   ======================
   Opt-in overrides of the base font layer in typography.css. Specificity
   0,0,1,0 beats the body / h1-h6 tag rules with no !important needed.

   u-font-body     on a HEADING tag that should read as body copy
                   (eyebrows, kickers, sublines)
   u-font-heading  on a NON-heading tag that should carry the heading face
                   (table headers, key figures, oversized numbers)
   u-font-display  secondary display face, opt-in only
   u-font-mono     code and tabular figures

   These are the ONLY place outside typography.css where font-family may be
   set. A c- component class that names a font family is a bug. */

.u-font-body     { font-family: var(--font-body, system-ui, sans-serif); }
.u-font-heading  { font-family: var(--font-heading, system-ui, sans-serif); }
.u-font-display  { font-family: var(--font-display, var(--font-heading, system-ui, sans-serif)); }
.u-font-mono     { font-family: var(--font-mono, ui-monospace, monospace); }