/* ==========================================================================
 * LINEAGE THEME - MAIN STYLESHEET
 * ==========================================================================
 * 
 * TABLE OF CONTENTS:
 * 1. Typography & Text Utilities
 * 2. Theme Transitions
 * 3. Responsive Typography Overrides (Desktop/Mobile)
 * 4. Decorative Background Patterns
 * 5. Media Queries & Responsive Layouts
 * 
 * TODO [CUSTOMIZATION]:
 * - To change the global font family, replace `.font-sans` or `.font-serif` 
 *   classes here or in the Tailwind config inside HTML files.
 * - This file contains custom patterns (`.bg-pattern-*`) that can be removed 
 *   if you prefer solid backgrounds.
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 1. Typography & Text Utilities
 * -------------------------------------------------------------------------- */
/* Text Outline Utility */
.text-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px #064e3b;
}

.text-outline-ivory {
  color: transparent;
  -webkit-text-stroke: 1.5px #f9f6f0;
}

/* --------------------------------------------------------------------------
 * 2. Theme Transitions
 * -------------------------------------------------------------------------- */
/* Theme Transition */
body {
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

/* --------------------------------------------------------------------------
 * 3. Responsive Typography Overrides
 * -------------------------------------------------------------------------- */
/* Global Heading Font Weight */
h1,
h2,
h3,
h4,
h5,
h6,
h1.font-serif,
h2.font-serif,
h3.font-serif,
h4.font-serif,
h5.font-serif,
h6.font-serif {
  font-weight: 600 !important;
}

/* Global Typography */
/* Increase small uppercase subheadings (e.g., CONSULTATION, EXTRACTION) */
h4.font-sans.text-xs {
  font-size: 0.875rem !important; /* 14px (was 12px) */
}

/* Desktop Typography */
@media (min-width: 1024px) {
  p,
  .font-sans.text-base,
  .font-serif.text-base,
  li.text-base,
  span.text-base,
  details p,
  summary span {
    font-size: 1.125rem; /* 18px */
    line-height: 1.75;
  }

  /* Footer Typography */
  footer a.font-sans {
    font-size: 0.875rem !important; /* 14px (was 11px) */
  }

  footer div.text-center.md\:text-start > span.font-sans,
  footer div.md\:text-start.flex-col > span.font-sans {
    font-size: 0.8125rem !important; /* 13px (was 10px) */
  }

  footer div.border-t span.font-sans {
    font-size: 0.75rem !important; /* 12px (was 9px) */
  }
}

/* --------------------------------------------------------------------------
 * 4. Decorative Background Patterns
 * -------------------------------------------------------------------------- */
.bg-pattern-diagonal {
  background-image: repeating-linear-gradient(
    45deg,
    currentColor 0,
    currentColor 2px,
    transparent 0,
    transparent 20px
  );
}

.bg-pattern-diagonal-light {
  background-image: repeating-linear-gradient(
    45deg,
    currentColor 0,
    currentColor 1px,
    transparent 0,
    transparent 20px
  );
}

.bg-pattern-diagonal-dense {
  background-image: repeating-linear-gradient(
    45deg,
    currentColor 0,
    currentColor 2px,
    transparent 0,
    transparent 10px
  );
}

.bg-pattern-grid-dense {
  background-image: repeating-linear-gradient(
    45deg,
    currentColor 0,
    currentColor 1px,
    transparent 0,
    transparent 50%
  );
  background-size: 10px 10px;
}