/* UTILITIES Loaded last, and only after the component stylesheets it is meant to override — see inc/enqueue.php. */

/* ── Space above/below a section ────────────────────────────── A named scale, not a free number field. */
.sh-mb-none { margin-bottom: 0; }
.sh-mb-sm   { margin-bottom: var(--space-6); }   /* 1.5rem */
.sh-mb-md   { margin-bottom: var(--space-10); }  /* 2.5rem */
.sh-mb-lg   { margin-bottom: var(--space-20); }  /* 5rem   */

.sh-mt-none { margin-top: 0; }
.sh-mt-sm   { margin-top: var(--space-6); }   /* 1.5rem */
.sh-mt-md   { margin-top: var(--space-10); }  /* 2.5rem */
.sh-mt-lg   { margin-top: var(--space-20); }  /* 5rem   */

/* Large gaps are a desktop luxury: 5rem of empty space on a phone
   is most of a screen. Scaled back rather than dropped, so the
   deliberate "this needs room" reading survives at any width. */
@media (max-width: 768px) {
  .sh-mb-lg { margin-bottom: var(--space-12); }  /* 3rem */
  .sh-mt-lg { margin-top: var(--space-12); }     /* 3rem */

  /* A final full-bleed banner should meet the footer directly. This
     also overrides a custom inline Space below value on that banner. */
  #page-content > :is(.sh-banner, .sh-insurance-band):last-child,
  #page-content > :last-child > :is(.sh-banner, .sh-insurance-band):last-child,
  #page-content > :last-child .sh-banner:last-child,
  #page-content > :last-child .sh-service-full:last-child > .sh-banner:nth-last-child(2) {
    margin-bottom: 0 !important;
  }
}

/* ── Hide below a screen width ────────────────────────────────
   See starfish_acf_visibility_field(). "Hidden below sm" means
   invisible on anything narrower than 640px and shown from there up
   — each rule only fires under its own breakpoint, so choosing "lg"
   does not also need an sm/md rule repeating the same display:none.
   !important because this is a deliberate editorial choice ("this
   should never render on a phone"), not a layout detail that some
   more specific component rule should be allowed to quietly win
   against — the two other cases in this file removing a margin or
   resizing a gap are safe to lose a specificity fight; disappearing
   an element that a component still expects to lay out around is
   not, so this one guards itself. */
@media (max-width: 639px) {
  .sh-hide-below-sm { display: none !important; }
}
@media (max-width: 767px) {
  .sh-hide-below-md { display: none !important; }
}
@media (max-width: 1023px) {
  .sh-hide-below-lg { display: none !important; }
}
@media (max-width: 1279px) {
  .sh-hide-below-xl { display: none !important; }
}