/* CUSTOM DESIGN VARIABLES */
:root {
  --di-brand: 'Montserrat', sans-serif;
  --di-body: 'Poppins', sans-serif;
  
  /* Light Theme Color Palette */
  --di-bg-main: #F4F8F6;       /* Very light mint/cream */
  --di-bg-card: #FFFFFF;       /* Pure White */
  --di-primary: #0D9488;       /* Primary Health Teal Accent */
  --di-primary-hover: #0F766E; /* Darker Teal for Hover states */
  --di-primary-soft: #CCFBF1;  /* Soft Teal Highlight Background */
  --di-text-main: #1A1A2A;     /* Soft Dark Blue-Grey Text */
  --di-text-muted: #4B5563;    /* Cool Muted Grey Text */
  --di-border: #E5E7EB;        /* Subtle Border Grey */

  /* Configuration Presets */
  --di-max-width: 1140px;      /* Random Container Width (1140px) */
  --di-radius: 16px;           /* Soft Border Radius Style (12px to 20px) */
  --di-radius-sm: 8px;
  
  /* Shadow Depth: raised */
  --di-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --di-shadow-deep: 0 10px 15px -3px rgba(13, 148, 136, 0.15), 0 4px 6px -2px rgba(13, 148, 136, 0.05);
}

/* GLOBAL RESET & FONTS */
body {
  font-family: var(--di-body);
  background-color: var(--di-bg-main);
  color: var(--di-text-main);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Custom Safe Shell Container */
.di-shell {
  max-width: var(--di-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  width: 100%;
}

/* Heading Case Custom Style */
.di-main-heading, 
.di-sub-heading,
h1, h2, h3, h4 {
  font-family: var(--di-brand);
  text-transform: uppercase; /* Heading Case random choice */
  letter-spacing: 0.03em;
}

/* PRESET F: MAGAZINE SPLIT + PULL QUOTE CUSTOM GRID */
.di-two-column-magazine {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media (min-width: 768px) {
  .di-two-column-magazine {
    flex-direction: row;
    align-items: stretch;
  }
  
  .di-gallery-side,
  .di-detail-panel {
    width: 50%;
  }

  /* Gallery Side features sticky placement for magazine style look */
  .di-gallery-side {
    position: sticky;
    top: 2rem;
    align-self: flex-start;
  }
}

/* Image Frame Wrapper */
.di-image-frame {
  border-radius: var(--di-radius);
  box-shadow: var(--di-shadow);
  border: 1px solid var(--di-border);
}

/* Custom Thumbnails Style */
.di-thumb-item {
  width: 3rem;
  height: 3rem;
  padding: 0.25rem;
  border: 2px solid var(--di-border);
  border-radius: var(--di-radius-sm);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
}
.di-thumb-item:hover,
.di-thumb-item.active {
  transform: scale(1.05);
}

/* Editorial Pull Quote formatting */
.di-editorial-quote {
  border-radius: 0 var(--di-radius) var(--di-radius) 0;
}

/* Custom Interactive Button Hover effects without tailwind configuration overrides */
.di-action-trigger {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing: 0.05em;
}
.di-action-trigger:hover {
  background-color: var(--di-primary-hover) !important;
  box-shadow: 0 12px 20px -3px rgba(13, 148, 136, 0.3), 0 4px 12px -2px rgba(13, 148, 136, 0.15) !important;
}

/* Alternating Border styling for Perk sections */
.di-perks-row {
  transition: background-color 0.25s ease;
}
.di-perks-row:hover {
  background-color: rgba(13, 148, 136, 0.02);
}

/* PRESET F: TESTIMONIALS CSS MASONRY */
.di-feedbacks-masonry {
  column-count: 1;
}

@media (min-width: 768px) {
  .di-feedbacks-masonry {
    column-count: 3;
  }
}

.di-feedback-tile {
  break-inside: avoid;
  border-radius: var(--di-radius);
  box-shadow: var(--di-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.di-feedback-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--di-shadow-deep);
}

/* WCAG AA focus indicator reinforcement */
a:focus, button:focus {
  outline: 3px solid var(--di-primary);
  outline-offset: 2px;
}