/* 
Utility classes for spacing, typography, flex, etc. 
Loaded via functions.php
*/

/* ======================================================
   1. BASE RESET & BOX-SIZING
====================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ======================================================
   2. GLOBAL VARIABLES (adjust to brand)
====================================================== */
:root {
  /* PRIMARY COLORS */
  --color-primary: #0066cc;          /* main primary */
  --color-primary-dark: #004c99;     /* darker shade for hover, etc. */
  --color-primary-alt: #f5a623;      /* alternative accent color */

  /* GRAYSCALE / NEUTRALS */
  --color-gray-100: #f9f9f9;
  --color-gray-200: #f2f2f2;
  --color-gray-300: #e6e6e6;
  --color-gray-400: #cccccc;
  --color-gray-500: #999999;
  --color-gray-600: #666666;
  --color-gray-700: #444444;
  --color-gray-800: #222222;
  --color-gray-900: #111111;

  /* BLACK / WHITE */
  --color-white: #ffffff;
  --color-black: #000000;

  --spacer-xxs: 4px;
  --spacer-xs: 8px;
  --spacer-s: 16px;
  --spacer-m: 24px;
  --spacer-l: 32px;
  --spacer-xl: 48px;
  --spacer-xxl: 64px;

  --container-max-width: 1600px;
 /* RESPONSIVE BREAKPOINTS */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1200px;
}

/* ======================================================
   3. CONTAINER HELPERS
====================================================== */
.u-container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--spacer-m);
}

/* Full Width Bleed style for GenerateBlocks containers */
.is-style-dm-full-width-bleed {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    position: relative;
}


/* ======================================================
   4. SPACING UTILITIES
====================================================== */
.u-m-0  { margin: 0 !important; }
.u-p-0  { padding: 0 !important; }

.u-mt-xxs { margin-top: var(--spacer-xxs) !important; }
.u-mt-xs  { margin-top: var(--spacer-xs) !important; }
.u-mt-s   { margin-top: var(--spacer-s) !important; }
.u-mt-m   { margin-top: var(--spacer-m) !important; }
.u-mt-l   { margin-top: var(--spacer-l) !important; }
.u-mt-xl  { margin-top: var(--spacer-xl) !important; }
.u-mt-xxl { margin-top: var(--spacer-xxl) !important; }

.u-mb-xxs { margin-bottom: var(--spacer-xxs) !important; }
.u-mb-xs  { margin-bottom: var(--spacer-xs) !important; }
.u-mb-s   { margin-bottom: var(--spacer-s) !important; }
.u-mb-m   { margin-bottom: var(--spacer-m) !important; }
.u-mb-l   { margin-bottom: var(--spacer-l) !important; }
.u-mb-xl  { margin-bottom: var(--spacer-xl) !important; }
.u-mb-xxl { margin-bottom: var(--spacer-xxl) !important; }

.u-pt-s  { padding-top: var(--spacer-s) !important; }
.u-pb-s  { padding-bottom: var(--spacer-s) !important; }
.u-pt-m  { padding-top: var(--spacer-m) !important; }
.u-pb-m  { padding-bottom: var(--spacer-m) !important; }
.u-pt-l  { padding-top: var(--spacer-l) !important; }
.u-pb-l  { padding-bottom: var(--spacer-l) !important; }

/* Margin auto */
.u-mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* ======================================================
   5. TEXT UTILITIES
====================================================== */
.h-body {font-family: var(---gp-font-body);}
.u-heading {font-family: var(---gp-font-heading);}

.u-text-left   { text-align: left !important; }
.u-text-center { text-align: center !important; }
.u-text-right  { text-align: right !important; }
.u-text-uppercase { text-transform: uppercase !important; }
.u-text-lowercase { text-transform: lowercase !important; }
.u-text-capitalize { text-transform: capitalize !important; }
.u-text-primary   { color: var(--color-primary) !important; }
.u-text-secondary { color: var(--color-secondary) !important; }

/* -----------------------------
   Text justification
----------------------------- */
.u-text-justify {
  text-align: justify !important;
  text-justify: inter-word; /* improves spacing in some browsers */
}


/* -----------------------------
   Responsive Grid Columns
----------------------------- */

/* Base: single column by default */
.u-cols-1 { 
  display: grid !important; 
  grid-template-columns: 1fr; 
  gap: var(--spacer-m); 
}

/* Two columns */
.u-cols-2 { 
  display: grid !important; 
  grid-template-columns: repeat(2, 1fr); 
  gap: var(--spacer-m); 
}

/* Three columns */
.u-cols-3 { 
  display: grid !important; 
  grid-template-columns: repeat(3, 1fr); 
  gap: var(--spacer-m); 
}

/* Four columns */
.u-cols-4 { 
  display: grid !important; 
  grid-template-columns: repeat(4, 1fr); 
  gap: var(--spacer-m); 
}

/* =======================
   Responsive Breakpoints
======================= */

/* Small devices (up to 576px) */
@media (max-width: var(--breakpoint-sm)) {
  .u-sm-cols-1 { grid-template-columns: 1fr !important; }
  .u-sm-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
  .u-sm-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
  .u-sm-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
}

/* Medium devices (up to 768px) */
@media (max-width: var(--breakpoint-md)) {
  .u-md-cols-1 { grid-template-columns: 1fr !important; }
  .u-md-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
  .u-md-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
  .u-md-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
}

/* Large devices (up to 1024px) */
@media (max-width: var(--breakpoint-lg)) {
  .u-lg-cols-1 { grid-template-columns: 1fr !important; }
  .u-lg-cols-2 { grid-template-columns: repeat(2, 1fr) !important;
	}

/* ======================================================
   6. FONT WEIGHT & STYLE
====================================================== */
.u-bold      { font-weight: 700 !important; }
.u-semibold  { font-weight: 600 !important; }
.u-regular   { font-weight: 400 !important; }
.u-light     { font-weight: 300 !important; }
.u-italic    { font-style: italic !important; }
	  
a.no-ul {text-decoration: none;}

/* ======================================================
   7. FONT SIZE SCALE
====================================================== */
.u-text-xs { font-size: 0.75rem !important; line-height: 1.2; }
.u-text-sm { font-size: 0.875rem !important; line-height: 1.4; }
.u-text-md { font-size: 1rem !important; line-height: 1.5; }
.u-text-lg { font-size: 1.25rem !important; line-height: 1.6; }
.u-text-xl { font-size: 1.5rem !important; line-height: 1.6; }

/* ======================================================
   8. HEADINGS & PARAGRAPHS
====================================================== */
h1, .u-h1 { font-size: clamp(2.25rem, 1.9943rem + 1.0227vw, 2.8125rem); font-weight: 700; line-height: 1.1; font-family: var(---gp-font-heading); }
h2, .u-h2 { font-size: clamp(1.875rem, 1.6619rem + 0.8523vw, 2.3438rem); font-weight: 600; line-height: 1.2; font-family: var(---gp-font-heading);}
h3, .u-h3 { font-size: clamp(1.875rem, 1.6619rem + 0.8523vw, 2.3438rem);  font-weight: 600; line-height: 1.3; font-family: var(---gp-font-heading);}
h4, .u-h4 { font-size: clamp(1.5rem, 1.3295rem + 0.6818vw, 1.875rem); font-weight: 500; line-height: 1.4; font-family: var(---gp-font-heading);}
h5, .u-h5 { font-size: clamp(1.25rem, 1.108rem + 0.5682vw, 1.5625rem);font-weight: 500; line-height: 1.5; font-family: var(---gp-font-heading);}
h6, .u-h6 { font-size: clamp(1.125rem, 0.9972rem + 0.5114vw, 1.4063rem); font-weight: 500; line-height: 1.5; font-family: var(---gp-font-heading);}
p, .u-p { 	font-size: clamp(0.8rem, 0.7091rem + 0.3636vw, 1rem);
}

.u-body   { font-size: 1rem; line-height: 1.6; color: var(--color-neutral-900); }
.u-small  { font-size: 0.875rem; line-height: 1.4; color: var(--color-neutral-900); }
.u-lead   { font-size: 1.125rem; font-weight: 400; line-height: 1.8; color: var(--color-neutral-900); }

/* ======================================================
   9. FLEX & GRID HELPERS
====================================================== */
.u-flex { display: flex !important; }
.u-inline-flex { display: inline-flex !important; }
.u-flex-column { flex-direction: column !important; }
.u-flex-row { flex-direction: row !important; }
.u-flex-wrap { flex-wrap: wrap !important; }
.u-flex-center { display: flex !important; align-items: center; justify-content: center; }
.u-flex-between { display: flex !important; justify-content: space-between; align-items: center; }
.u-justify-center { justify-content: center !important; }
.u-align-center { align-items: center !important; }

/* ======================================================
   10. WIDTH & CONTAINER HELPERS
====================================================== */
.u-w-100 { width: 100% !important; }
.u-w-auto { width: auto !important; }
.u-max-w-sm { max-width: 500px !important; margin-inline: auto; }
.u-max-w-md { max-width: 800px !important; margin-inline: auto; }
.u-max-w-lg { max-width: 1200px !important; margin-inline: auto; }

/* ======================================================
   11. BACKGROUND & COLOR HELPERS
====================================================== */
.u-bg-light { background-color: var(--color-light-gray) !important; }
.u-bg-dark  { background-color: var(--color-neutral-900) !important; color: var(--color-neutral-100) !important; }

/* ======================================================
   12. BORDER & RADIUS
====================================================== */
.u-border { border: 1px solid rgba(0, 0, 0, 0.1) !important; }
.u-border-0 { border: none !important; }
.u-rounded { border-radius: 0.5rem !important; }
.u-rounded-lg { border-radius: 1rem !important; }

/* ======================================================
   13. VISIBILITY / RESPONSIVE
====================================================== */
@media (max-width: var(--breakpoint-md)) {
  .u-hide-md { display: none !important; }
}
@media (min-width: var(--breakpoint-md)) {
  .u-show-md { display: block !important; }
}
	
	.hide {display: none !important;}

/* ======================================================
   14. COMPONENT HELPERS (Card, Button)
====================================================== */
.u-card {
  background-color: var(--color-neutral-100);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  border-radius: 4px;
  overflow: hidden;
}
.u-card-body { padding: var(--spacer-m); }

.u-btn {
  display: inline-block;
  text-decoration: none;
  padding: var(--spacer-s) var(--spacer-m);
  border-radius: 4px;
  background-color: var(--color-primary);
  color: var(--color-neutral-100);
  transition: background-color .2s ease;
}
.u-btn:hover {
  background-color: var(--color-primary-dark);
}

/* ======================================================
   15. SECTION SPACING HELPERS
====================================================== */
.section-spaced {
  padding-top: var(--spacer-l);
  padding-bottom: var(--spacer-l);
}
.section-spaced-xl {
  padding-top: var(--spacer-xl);
  padding-bottom: var(--spacer-xl);
}

/* ======================================================
   16. LISTS, CLEARFIX, MISC
====================================================== */
.u-clearfix::after { content: ""; display: table; clear: both; }
.u-list-reset { list-style: none; margin: 0; padding: 0; }
	  
/* ======================================================
   16. Aspect Ratios
====================================================== */	  
	  
/* Aspect Ratio Utilities */
.u-aspect-1x1 { aspect-ratio: 1 / 1; }
.u-aspect-16x9 { aspect-ratio: 16 / 9; }
.u-aspect-4x3 { aspect-ratio: 4 / 3; }
.u-aspect-3x2 { aspect-ratio: 3 / 2; }

/* Responsive Aspect Ratios */
@media (max-width: var(--breakpoint-md)) {
  .u-aspect-md-16x9 { aspect-ratio: 16 / 9; }
  .u-aspect-md-4x3 { aspect-ratio: 4 / 3; }
}