/*
 * Utilities
 * =========
 * One-purpose helper classes. Keep these lightweight.
 * Only add a class here if it's used in multiple places.
 *
 * Section index:
 *   1. Display
 *   2. Text alignment
 *   3. Text helpers
 *   4. Colour helpers
 *   5. Spacing helpers (margin / padding)
 *   6. Flex/grid layout helpers
 *   7. Width helpers
 *   8. WordPress core overrides
 */


/* =============================================================================
   1. Display
   ============================================================================= */

.hidden       { display: none !important; }
.block        { display: block; }
.inline-block { display: inline-block; }
.flex         { display: flex; }
.grid         { display: grid; }


/* =============================================================================
   2. Text alignment
   ============================================================================= */

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


/* =============================================================================
   3. Text helpers
   ============================================================================= */

.text-sm     { font-size: 0.875rem; }
.text-xs     { font-size: 0.75rem; }
.text-lg     { font-size: 1.125rem; }
.text-bold   { font-weight: 700; }
.text-muted  { color: var(--ssc-muted); }
.text-upper  { text-transform: uppercase; letter-spacing: 0.06em; }


/* =============================================================================
   4. Colour helpers
   ============================================================================= */

.bg-green     { background-color: var(--ssc-green); }
.bg-dark      { background-color: var(--ssc-dark); }
.bg-off-white { background-color: var(--ssc-off-white); }
.bg-white     { background-color: var(--ssc-white); }
.text-white   { color: var(--ssc-white); }
.text-gold    { color: var(--ssc-gold); }
.text-green   { color: var(--ssc-green); }


/* =============================================================================
   5. Spacing helpers
   ============================================================================= */

.mt-0  { margin-top: 0 !important; }
.mt-1  { margin-top: 0.5rem; }
.mt-2  { margin-top: 1rem; }
.mt-3  { margin-top: 1.5rem; }
.mt-4  { margin-top: 2rem; }
.mt-6  { margin-top: 3rem; }
.mt-8  { margin-top: 4rem; }

.mb-0  { margin-bottom: 0 !important; }
.mb-1  { margin-bottom: 0.5rem; }
.mb-2  { margin-bottom: 1rem; }
.mb-3  { margin-bottom: 1.5rem; }
.mb-4  { margin-bottom: 2rem; }
.mb-6  { margin-bottom: 3rem; }

.py-4  { padding-block: 2rem; }
.py-6  { padding-block: 3rem; }
.py-8  { padding-block: 4rem; }
.px-4  { padding-inline: 2rem; }


/* =============================================================================
   6. Flex / grid layout helpers
   ============================================================================= */

.gap-1   { gap: 0.5rem; }
.gap-2   { gap: 1rem; }
.gap-3   { gap: 1.5rem; }
.gap-4   { gap: 2rem; }

.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }

.flex-wrap      { flex-wrap: wrap; }
.flex-col       { flex-direction: column; }


/* =============================================================================
   7. Width helpers
   ============================================================================= */

.w-full   { width: 100%; }
.max-w-content { max-width: var(--ssc-content); }
.max-w-wide    { max-width: var(--ssc-container); }
.mx-auto  { margin-inline: auto; }


/* =============================================================================
   8. WordPress core overrides
   ============================================================================= */

/* Remove top margin from first block inside page content */
.entry-content > *:first-child,
.page-content  > *:first-child {
  margin-top: 0;
}

/* Fix Gutenberg wide/full alignment within .container */
.entry-content .alignwide {
  max-width: var(--ssc-container);
  margin-inline: auto;
}

/* Modern Gutenberg (is-layout-flow) no longer wraps group children in
   .wp-block-group__inner-container — cap direct children of alignfull
   groups so background bleeds full-viewport but content stays contained. */
.page-content .wp-block-group.alignfull.is-layout-flow > *,
.page-content .wp-block-group[class*="has-background"].is-layout-flow > * {
  max-width: var(--ssc-container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  box-sizing: border-box;
  width: 100%;
}


/* Prevent very tall images in block editor */
.wp-block-image img {
  max-height: 600px;
  object-fit: cover;
  width: 100%;
}

/* Gutenberg table block */
.wp-block-table table {
  width: 100%;
}

/* Gutenberg buttons */
.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}