/* ==========================================================================
   UTILITIES.CSS
   Karleigh Jackson | Executive Editorial Portfolio
   Version: 2.0
   ========================================================================== */


/* ==========================================================================
   DISPLAY
   ========================================================================== */

   .d-none { display: none !important; }
   .d-block { display: block !important; }
   .d-inline { display: inline !important; }
   .d-inline-block { display: inline-block !important; }
   .d-flex { display: flex !important; }
   .d-grid { display: grid !important; }
   
   
   /* ==========================================================================
      FLEX
      ========================================================================== */
   
   .flex-column { flex-direction: column !important; }
   .flex-wrap { flex-wrap: wrap !important; }
   
   .justify-start { justify-content: flex-start !important; }
   .justify-center { justify-content: center !important; }
   .justify-end { justify-content: flex-end !important; }
   .justify-between { justify-content: space-between !important; }
   
   .align-start { align-items: flex-start !important; }
   .align-center { align-items: center !important; }
   .align-end { align-items: flex-end !important; }
   
   .flex-1 { flex: 1; }
   
   
   /* ==========================================================================
      GRID HELPERS
      ========================================================================== */
   
   .grid-center {
       place-items: center;
   }
   
   .grid-span-2 {
       grid-column: span 2;
   }
   
   .grid-span-3 {
       grid-column: span 3;
   }
   
   
   /* ==========================================================================
      WIDTHS
      ========================================================================== */
   
   .w-100 { width: 100%; }
   .h-100 { height: 100%; }
   
   .max-content {
       max-width: var(--content-width);
   }
   
   .max-reading {
       max-width: var(--reading-width);
   }
   
   .mx-auto {
       margin-inline: auto;
   }
   
   
   /* ==========================================================================
      TEXT ALIGNMENT
      ========================================================================== */
   
   .text-left { text-align: left; }
   .text-center { text-align: center; }
   .text-right { text-align: right; }
   
   
   /* ==========================================================================
      FONT WEIGHT
      ========================================================================== */
   
   .fw-light { font-weight: var(--fw-light); }
   .fw-regular { font-weight: var(--fw-regular); }
   .fw-medium { font-weight: var(--fw-medium); }
   .fw-semibold { font-weight: var(--fw-semibold); }
   .fw-bold { font-weight: var(--fw-bold); }
   
   
   /* ==========================================================================
      TEXT COLORS
      ========================================================================== */
   
   .text-primary { color: var(--text-primary); }
   .text-secondary { color: var(--text-secondary); }
   .text-light { color: var(--text-light); }
   
   .text-pink { color: var(--color-pink); }
   .text-teal { color: var(--color-teal); }
   .text-blue { color: var(--color-blue); }
   .text-purple { color: var(--color-purple); }
   .text-green { color: var(--color-green); }
   
   
   /* ==========================================================================
      BACKGROUNDS
      ========================================================================== */
   
   .bg-white { background: var(--color-white); }
   .bg-surface { background: var(--color-surface); }
   
   .bg-pink-soft { background: var(--pink-soft); }
   .bg-teal-soft { background: var(--teal-soft); }
   .bg-blue-soft { background: var(--blue-soft); }
   .bg-purple-soft { background: var(--purple-soft); }
   .bg-green-soft { background: var(--green-soft); }
   
   
   /* ==========================================================================
      MARGINS
      ========================================================================== */
   
   .mt-0 { margin-top: 0; }
   
   .mt-1 { margin-top: var(--space-1); }
   .mt-2 { margin-top: var(--space-2); }
   .mt-3 { margin-top: var(--space-3); }
   .mt-4 { margin-top: var(--space-4); }
   .mt-5 { margin-top: var(--space-5); }
   .mt-6 { margin-top: var(--space-6); }
   .mt-7 { margin-top: var(--space-7); }
   
   .mb-1 { margin-bottom: var(--space-1); }
   .mb-2 { margin-bottom: var(--space-2); }
   .mb-3 { margin-bottom: var(--space-3); }
   .mb-4 { margin-bottom: var(--space-4); }
   .mb-5 { margin-bottom: var(--space-5); }
   .mb-6 { margin-bottom: var(--space-6); }
   .mb-7 { margin-bottom: var(--space-7); }
   
   .mx-auto { margin-inline: auto; }
   
   
   /* ==========================================================================
      PADDING
      ========================================================================== */
   
   .p-1 { padding: var(--space-1); }
   .p-2 { padding: var(--space-2); }
   .p-3 { padding: var(--space-3); }
   .p-4 { padding: var(--space-4); }
   .p-5 { padding: var(--space-5); }
   .p-6 { padding: var(--space-6); }
   
   .py-6 {
       padding-block: var(--space-6);
   }
   
   .py-8 {
       padding-block: var(--space-8);
   }
   
   
   /* ==========================================================================
      GAP
      ========================================================================== */
   
   .gap-1 { gap: var(--space-1); }
   .gap-2 { gap: var(--space-2); }
   .gap-3 { gap: var(--space-3); }
   .gap-4 { gap: var(--space-4); }
   .gap-5 { gap: var(--space-5); }
   
   
   /* ==========================================================================
      POSITION
      ========================================================================== */
   
   .relative { position: relative; }
   .absolute { position: absolute; }
   
   .overflow-hidden {
       overflow: hidden;
   }
   
   
   /* ==========================================================================
      BORDER RADIUS
      ========================================================================== */
   
   .radius-sm { border-radius: var(--radius-sm); }
   .radius-md { border-radius: var(--radius-md); }
   .radius-lg { border-radius: var(--radius-lg); }
   .radius-xl { border-radius: var(--radius-xl); }
   .radius-pill { border-radius: var(--radius-pill); }
   
   
   /* ==========================================================================
      SHADOWS
      ========================================================================== */
   
   .shadow-xs { box-shadow: var(--shadow-xs); }
   .shadow-sm { box-shadow: var(--shadow-sm); }
   .shadow-md { box-shadow: var(--shadow-md); }
   .shadow-lg { box-shadow: var(--shadow-lg); }
   
   
   /* ==========================================================================
      TRANSITIONS
      ========================================================================== */
   
   .transition {
       transition: all var(--transition);
   }
   
   
   /* ==========================================================================
      CURSOR
      ========================================================================== */
   
   .cursor-pointer {
       cursor: pointer;
   }
   
   
   /* ==========================================================================
      ACCESSIBILITY
      ========================================================================== */
   
   .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;
   
   }
   
   
   /* ==========================================================================
      FOCUS
      ========================================================================== */
   
   .focus-ring:focus-visible {
   
       outline: 3px solid var(--color-pink);
   
       outline-offset: 4px;
   
   }
   
   
   /* ==========================================================================
      SCROLL OFFSET
      ========================================================================== */
   
   .anchor-offset {
       scroll-margin-top: calc(var(--nav-height) + var(--space-3));
   }
   
   
   /* ==========================================================================
      DESIGN SYSTEM ALIASES
      (Normalizes naming across files)
      ========================================================================== */
   
   /* Timeline */
   
   .timeline-content{
       position: relative;
   }
   
   /* Thought Cards */
   
   .thought-panel,
   .thought-card {
       position: relative;
   }
   
   /* Section Labels */
   
   .label,
   .section-label {
       display: inline-flex;
       align-items: center;
   }
   
   
   /* ==========================================================================
      END
      ========================================================================== */