/* ============================================
   UTILITIES
   Common utility classes for layout, spacing,
   typography, and visibility
   
   TABLE OF CONTENTS:
   1. Base HTML Reset
   2. Custom Properties
   3. Layout Utilities
      - Flexbox
      - Grid
      - Gap Utilities
      - Position
      - Coverall Link Pattern
   4. Spacing Utilities
      - Margin (Standard, Block)
      - Padding (Standard)
   5. Typography Utilities
      - Text Alignment
      - Text Size & Weight
      - Text Style
      - Text Color
      - Link Styles
   6. Sizing Utilities
      - Width
      - Content Sizes
   7. Visibility Utilities
      - Display
      - Screen Reader Only
      - Responsive Visibility
   8. Styling Utilities
      - Border Radius
      - Object Fit
   9. Component Utilities
      - Button Utilities
      - Headline Component
   10. Accessibility Utilities
      - Skip Link
   ============================================ */

/* Base HTML Reset */
:where(html) {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--font-lineheight-2);
  color: var(--text-1);
  background-color: var(--surface-1);
}

/* Custom Properties */
:root {
  /* Standard gap variables based on --size-4 */
  --gap: var(--size-4);
  --gap-half: calc(var(--size-4) / 2);
  --gap-double: calc(var(--size-4) * 2);
}

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

/* Flexbox */
.flex {
  display: flex;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-1 {
  flex: 1;
}

.align-items-center {
  align-items: center;
}

.align-center {
  align-items: center;
}

/* Grid */
.grid {
  display: grid;
}

.grid--three-columns {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--size-4);
}

@media (max-width: 768px) {
  .grid--three-columns {
    grid-template-columns: 1fr;
  }
}

/* Gap Utilities */
.gap {
  gap: var(--gap);
}

.gap-half {
  gap: var(--gap-half);
}

.gap-double {
  gap: var(--gap-double);
}

/* Position */
.position-relative {
  position: relative;
}

/* Coverall Link Pattern */
.coverall {
  position: absolute;
  inset: 0;
  z-index: var(--layer-coverall, 1);
}

.coverall * {
  pointer-events: auto;
}

/* ============================================
   SPACING UTILITIES
   ============================================ */

/* Margin - Standard */
.push--top {
  margin-top: var(--size-4);
}

.push--bottom {
  margin-bottom: var(--size-4);
}

.push_half--bottom {
  margin-bottom: var(--size-2);
}

.push_double--bottom {
  margin-bottom: var(--size-8);
}

.flush--top {
  margin-top: 0;
}

/* Margin - Block */
.margin-block {
  margin-block: var(--size-3);
}

.margin-block--double {
  margin-block: var(--size-8);
}

.margin-block--start {
  margin-block-start: var(--size-3);
}

.margin-block--start-half {
  margin-block-start: var(--size-2);
}

/* Margin - Other */
.my-2 {
  margin: var(--size-2) 0;
}

/* Padding - Standard */
.pad {
  padding: var(--size-4);
}

.pad--bottom {
  padding-bottom: var(--size-4);
}


/* ============================================
   TYPOGRAPHY UTILITIES
   ============================================ */

/* Text Alignment */
.txt-align--center {
  text-align: center;
}

/* Text Size */
.txt--small {
  font-size: var(--font-size-1);
}

/* Text Weight */
.txt--bold {
  font-weight: var(--font-weight-6);
}

/* Text Style */
.txt--ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.txt--break-words {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Text Color */
.txt-primary {
  color: var(--brand-primary);
}

.txt-subtle {
  color: var(--text-3);
  font-size: var(--font-size-0);
  text-align: center;
  margin: 0;
}

/* Link Styles */
.permalink {
  color: inherit;
  text-decoration: none;
}

.undecorated {
  text-decoration: none;
}

/* ============================================
   SIZING UTILITIES
   ============================================ */

/* Width */
.full-width,
.u-full-width {
  width: 100%;
}

/* Content Sizes */
.size-content-2 {
  width: min(95%, var(--size-content-2)) !important;
  margin-inline: auto;
}
.size-content-3 {
  width: min(95%, var(--size-content-3)) !important;
  margin-inline: auto;
}

.size-content-4 {
  width: min(95%, var(--size-content-4)) !important;
  margin-inline: auto;
}

.size-content-prose {
  width: min(95%, calc(var(--size-content-3) + 3.5rem)) !important;
  margin-inline: auto;
  padding-inline: 1.75rem;
}

/* ============================================
   VISIBILITY UTILITIES
   ============================================ */

/* Display */
.hidden {
  display: none !important;
}

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

/* Responsive Visibility */
.u-hide\@mobile {
  @media (max-width: 768px) {
    display: none !important;
  }
}

.u-hide\@desktop {
  @media (min-width: 769px) {
    display: none !important;
  }
}

/* ============================================
   STYLING UTILITIES
   ============================================ */

/* Border Radius */
.rounded {
  border-radius: var(--radius-2);
}

/* Object Fit */
.object-cover {
  object-fit: cover;
}

/* ============================================
   COMPONENT UTILITIES
   ============================================ */

/* Button Utilities */
.btn--plain {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
}

.button--focusable {
  outline: none;
}

.button--focusable:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Headline Component */
.headline__content {
  display: inline-flex;
  align-items: center;
  gap: var(--size-2);
}

.headline__icon {
  width: var(--font-size-4);
  height: var(--font-size-4);
  color: var(--text-2);
  flex-shrink: 0;
}

/* ============================================
   ACCESSIBILITY UTILITIES
   ============================================ */

/* Skip Link */
.skip-link {
  position: absolute;
  top: -50px;
  left: 6px;
  background: var(--violet-7);
  color: white;
  padding: 8px;
  border-radius: var(--radius-1);
  text-decoration: none;
  z-index: 1000;
  font-weight: 500;
}

.skip-link:focus {
  top: 6px;
}