/**
 * Custom CSS Classes – ready-to-use utilities for Content Blocks.
 * Add these class names in the Advanced > Custom CSS Classes field.
 * Uses theme variables: --space-xs, --space-sm, --space-md, --space-lg, --space-xl, --space-hero, --grid-gap
 *
 * Section-level utilities use .site-main section prefix to override
 * .site-main section:not(...) { padding } from main.css
 */

/* ==========================================================================
   PADDING
   ========================================================================== */

/* All sides */
.u-p-none { padding: 0 !important; }
.u-p-xs { padding: var(--space-xs) !important; }
.u-p-sm { padding: var(--space-sm) !important; }
.u-p-md { padding: var(--space-md) !important; }
.u-p-lg { padding: var(--space-lg) !important; }
.u-p-xl { padding: var(--space-xl) !important; }

/* Block (top/bottom) */
.u-p-block-none { padding-top: 0 !important; padding-bottom: 0 !important; }
.u-p-block-xs { padding-top: var(--space-xs) !important; padding-bottom: var(--space-xs) !important; }
.u-p-block-sm { padding-top: var(--space-sm) !important; padding-bottom: var(--space-sm) !important; }
.u-p-block-md { padding-top: var(--space-md) !important; padding-bottom: var(--space-md) !important; }
.u-p-block-lg { padding-top: var(--space-lg) !important; padding-bottom: var(--space-lg) !important; }
.u-p-block-xl { padding-top: var(--space-xl) !important; padding-bottom: var(--space-xl) !important; }
.u-p-block-hero { padding-top: calc(var(--space-xl) + var(--space-hero)) !important; padding-bottom: calc(var(--space-xl) + var(--space-hero)) !important; }
/* Sections: use full padding shorthand to override main.css (keeps inline padding) */
.site-main section.u-p-block-none { padding: 0 var(--site-section-padding) !important; }
.site-main section.u-p-block-xs { padding: var(--space-xs) var(--site-section-padding) !important; }
.site-main section.u-p-block-sm { padding: var(--space-sm) var(--site-section-padding) !important; }
.site-main section.u-p-block-md { padding: var(--space-md) var(--site-section-padding) !important; }
.site-main section.u-p-block-lg { padding: var(--space-lg) var(--site-section-padding) !important; }
.site-main section.u-p-block-xl { padding: var(--space-xl) var(--site-section-padding) !important; }
.site-main section.u-p-block-hero { padding: calc(var(--space-xl) + var(--space-hero)) var(--site-section-padding) !important; }

/* Inline (left/right) */
.u-p-inline-none { padding-inline: 0 !important; }
.u-p-inline-xs { padding-inline: var(--space-xs) !important; }
.u-p-inline-sm { padding-inline: var(--space-sm) !important; }
.u-p-inline-md { padding-inline: var(--space-md) !important; }
.u-p-inline-lg { padding-inline: var(--space-lg) !important; }
.u-p-inline-xl { padding-inline: var(--space-xl) !important; }

/* Top */
.u-pt-none { padding-top: 0 !important; }
.u-pt-xs { padding-top: var(--space-xs) !important; }
.u-pt-sm { padding-top: var(--space-sm) !important; }
.u-pt-md { padding-top: var(--space-md) !important; }
.u-pt-lg { padding-top: var(--space-lg) !important; }
.u-pt-xl { padding-top: var(--space-xl) !important; }

/* Bottom */
.u-pb-none { padding-bottom: 0 !important; }
.u-pb-xs { padding-bottom: var(--space-xs) !important; }
.u-pb-sm { padding-bottom: var(--space-sm) !important; }
.u-pb-md { padding-bottom: var(--space-md) !important; }
.u-pb-lg { padding-bottom: var(--space-lg) !important; }
.u-pb-xl { padding-bottom: var(--space-xl) !important; }

/* Left */
.u-pl-none { padding-left: 0 !important; }
.u-pl-xs { padding-left: var(--space-xs) !important; }
.u-pl-sm { padding-left: var(--space-sm) !important; }
.u-pl-md { padding-left: var(--space-md) !important; }
.u-pl-lg { padding-left: var(--space-lg) !important; }
.u-pl-xl { padding-left: var(--space-xl) !important; }

/* Right */
.u-pr-none { padding-right: 0 !important; }
.u-pr-xs { padding-right: var(--space-xs) !important; }
.u-pr-sm { padding-right: var(--space-sm) !important; }
.u-pr-md { padding-right: var(--space-md) !important; }
.u-pr-lg { padding-right: var(--space-lg) !important; }
.u-pr-xl { padding-right: var(--space-xl) !important; }

/* ==========================================================================
   MARGIN
   ========================================================================== */

/* Block (top/bottom) */
.u-m-block-none { margin-block: 0 !important; }
.u-m-block-xs { margin-block: var(--space-xs) !important; }
.u-m-block-sm { margin-block: var(--space-sm) !important; }
.u-m-block-md { margin-block: var(--space-md) !important; }
.u-m-block-lg { margin-block: var(--space-lg) !important; }
.u-m-block-xl { margin-block: var(--space-xl) !important; }

/* Inline (left/right) */
.u-m-inline-none { margin-inline: 0 !important; }
.u-m-inline-auto { margin-inline: auto !important; }
.u-m-inline-xs { margin-inline: var(--space-xs) !important; }
.u-m-inline-sm { margin-inline: var(--space-sm) !important; }
.u-m-inline-md { margin-inline: var(--space-md) !important; }
.u-m-inline-lg { margin-inline: var(--space-lg) !important; }
.u-m-inline-xl { margin-inline: var(--space-xl) !important; }

/* Top */
.u-mt-none { margin-top: 0 !important; }
.u-mt-xs { margin-top: var(--space-xs) !important; }
.u-mt-sm { margin-top: var(--space-sm) !important; }
.u-mt-md { margin-top: var(--space-md) !important; }
.u-mt-lg { margin-top: var(--space-lg) !important; }
.u-mt-xl { margin-top: var(--space-xl) !important; }

/* Bottom */
.u-mb-none { margin-bottom: 0 !important; }
.u-mb-xs { margin-bottom: var(--space-xs) !important; }
.u-mb-sm { margin-bottom: var(--space-sm) !important; }
.u-mb-md { margin-bottom: var(--space-md) !important; }
.u-mb-lg { margin-bottom: var(--space-lg) !important; }
.u-mb-xl { margin-bottom: var(--space-xl) !important; }

/* Left */
.u-ml-none { margin-left: 0 !important; }
.u-ml-auto { margin-left: auto !important; }
.u-ml-xs { margin-left: var(--space-xs) !important; }
.u-ml-sm { margin-left: var(--space-sm) !important; }
.u-ml-md { margin-left: var(--space-md) !important; }
.u-ml-lg { margin-left: var(--space-lg) !important; }
.u-ml-xl { margin-left: var(--space-xl) !important; }

/* Right */
.u-mr-none { margin-right: 0 !important; }
.u-mr-auto { margin-right: auto !important; }
.u-mr-xs { margin-right: var(--space-xs) !important; }
.u-mr-sm { margin-right: var(--space-sm) !important; }
.u-mr-md { margin-right: var(--space-md) !important; }
.u-mr-lg { margin-right: var(--space-lg) !important; }
.u-mr-xl { margin-right: var(--space-xl) !important; }

/* ==========================================================================
   GAP (flex/grid)
   ========================================================================== */

.u-gap-none { gap: 0 !important; }
.u-gap-xs { gap: var(--space-xs) !important; }
.u-gap-sm { gap: var(--space-sm) !important; }
.u-gap-md { gap: var(--space-md) !important; }
.u-gap-lg { gap: var(--space-lg) !important; }
.u-gap-xl { gap: var(--space-xl) !important; }

/* Row gap only */
.u-gap-row-xs { row-gap: var(--space-xs) !important; }
.u-gap-row-sm { row-gap: var(--space-sm) !important; }
.u-gap-row-md { row-gap: var(--space-md) !important; }
.u-gap-row-lg { row-gap: var(--space-lg) !important; }
.u-gap-row-xl { row-gap: var(--space-xl) !important; }

/* Column gap only */
.u-gap-col-xs { column-gap: var(--space-xs) !important; }
.u-gap-col-sm { column-gap: var(--space-sm) !important; }
.u-gap-col-md { column-gap: var(--space-md) !important; }
.u-gap-col-lg { column-gap: var(--space-lg) !important; }
.u-gap-col-xl { column-gap: var(--space-xl) !important; }

/* ==========================================================================
   MAX-WIDTH
   ========================================================================== */

.u-max-w-narrow { max-width: 45ch; }
.u-max-w-prose { max-width: 65ch; }
.u-max-w-wide { max-width: 80ch; }
.u-max-w-full { max-width: 100%; }

/* ==========================================================================
   WIDTH
   ========================================================================== */

.u-w-full { width: 100%; }
.u-w-auto { width: auto; }

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.u-flex { display: flex; }
.u-flex-col { flex-direction: column; }
.u-flex-wrap { flex-wrap: wrap; }
.u-items-start { align-items: flex-start; }
.u-items-center { align-items: center; }
.u-items-end { align-items: flex-end; }
.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-grid { display: grid; }
.u-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.u-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 767px) {
  .u-grid-cols-2,
  .u-grid-cols-3 {
    grid-template-columns: 1fr;
  }

  .u-p-block-hero {
    padding-top: var(--space-xl) !important;
    padding-bottom: var(--space-xl) !important;
  }

  .site-main section.u-p-block-hero {
    padding: var(--space-xl) var(--site-section-padding) !important;
  }
}

/* ==========================================================================
   TEXT
   ========================================================================== */

.u-text-left { text-align: left; }
.u-text-center { text-align: center; }
.u-text-right { text-align: right; }

.u-text-sm { font-size: 1em; }
.u-text-lg { font-size: 1.15em; }

/* ==========================================================================
   BORDERS
   ========================================================================== */

.u-border-none { border: none !important; }
.u-border-t { border-top: 1px solid var(--color-divider); }
.u-border-b { border-bottom: 1px solid var(--color-divider); }
.u-border-l { border-left: 1px solid var(--color-divider); }
.u-border-r { border-right: 1px solid var(--color-divider); }

/* ==========================================================================
   VISIBILITY / OVERFLOW
   ========================================================================== */

/* Screen reader only: hidden on all screens, read by assistive tech */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.u-overflow-hidden { overflow: hidden; }
.u-overflow-auto { overflow: auto; }