/* 
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;
  overflow-x:clip;
  -webkit-overflow-scrolling: touch;
}

/* ======================================================
   2. GLOBAL VARIABLES (adjust to brand)
====================================================== */
:root {
  /* PRIMARY COLORS */
  --color-primary: #0066cc;          /* main primary */
  --color-primary-dark: #3C93BE;     /* darker shade for hover, etc. */
  --color-primary-alt: #f5a623; 
  --color-primary-light: #EAF5FA; /* very light blue */

  /* 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: 1200px;
	 /* Content widths */
  --content-width: 1200px;
  --content-width-narrow: 860px;
  --content-width-wide: 1440px;

  /* Horizontal padding scale */
  --space-inline-xs: clamp(1rem, 3vw, 1.25rem);
  --space-inline-sm: clamp(1.25rem, 4vw, 1.75rem);
  --space-inline-md: clamp(1.5rem, 5vw, 2.5rem);
  --space-inline-lg: clamp(2rem, 6vw, 4rem);

  /* Vertical rhythm */
  --space-block-sm: 1.5rem;
  --space-block-md: 3rem;
  --space-block-lg: 5rem;
	
	
 /* RESPONSIVE BREAKPOINTS */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1200px;
}

/* ======================================================
   3. CONTAINER HELPERS
====================================================== */
.u-section {
  padding-inline: var(--space-inline-md);
}

.u-container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var( --space-inline-sm);
}


.u-content {
  max-width: var(--content-width);
  margin-inline: auto;
}

.u-content--narrow {
  max-width: var(--content-width-narrow);
}

.u-content--wide {
  max-width: var(--content-width-wide);
}

/* USAGE:
Container (Full width)
  └── class: u-section
      └── Container
          └── class: u-content
              └── actual content blocks

*/


/* 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;
}
.u-canvas {
  padding-inline: 0 !important;
  margin-inline: 0 !important;
}


/* ======================================================
   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; }
.u-pt-xl  { padding-top: var(--spacer-xl) !important; }
.u-pb-xl  { padding-bottom: var(--spacer-xl) !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-primary-dark   { color: var(--color-primary-dark) !important; font-weight: 500;}
.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: 400; 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: 400; 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: 400; 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);}
.u-p, .u-prose p{ 	font-size: clamp(0.9rem, 0.7091rem + 0.3636vw, 1.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; }
}

/* ======================================================
   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; }
}


/* =========================================================
   CF7 Blueprint (accessible + reusable)
   Wrapper: .u-cf7
========================================================= */

.u-cf7 .cf7-grid{
  display:grid;
  gap:16px;
  align-items:start;
}

/* Column modifiers */
.u-cf7 .cf7-grid--cols-3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.u-cf7 .cf7-grid--cols-2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.u-cf7 .cf7-grid--cols-1{ grid-template-columns:1fr; }

/* Full-width rows */
.u-cf7 .cf7-field--full{ grid-column:1 / -1; }

/* Label styling */
.u-cf7 .cf7-label{
  display:block;
  margin:0 0 6px;
}

/* Normalize CF7 defaults */
.u-cf7 .wpcf7 form p{ margin:0; } /* just in case CF7 inserts <p> around messages */

/* Inputs */
.u-cf7 .wpcf7 input[type="text"],
.u-cf7 .wpcf7 input[type="email"],
.u-cf7 .wpcf7 input[type="tel"],
.u-cf7 .wpcf7 textarea{
  width:100%;
  max-width:100%;
}

/* Checkbox row */
.u-cf7 .cf7-checkbox .wpcf7-list-item{ margin:0; }
.u-cf7 .cf7-checkbox label{ display:inline-flex; gap:.5rem; align-items:baseline; }

/* Actions row (RTL-friendly: use end if you prefer) */
.u-cf7 .cf7-actions input[type="submit"]{
  justify-self:start; /* change to end for right-aligned */
}

/* Mobile stack */
@media (max-width:780px){
  .u-cf7 .cf7-grid{ grid-template-columns:1fr; }
  .u-cf7 .cf7-field--full{ grid-column:auto; }
  .u-cf7 .cf7-actions input[type="submit"]{ justify-self:stretch; }
}

/* Optional: placeholders-only mode (still accessible because of aria-label) */
.u-cf7.u-cf7--placeholders-only .cf7-label{ display:none; }

/* =========================================================
   CF7 – Placeholders only (accessible)
========================================================= */
/* USAGE:
<div class="u-cf7 u-cf7--placeholders-only">

*/
.u-cf7--placeholders-only .cf7-label{
  display:none;
}

/* Optional UX polish */
.u-cf7--placeholders-only ::placeholder{
  opacity:.7;
}

.u-cf7--placeholders-only input:focus::placeholder,
.u-cf7--placeholders-only textarea:focus::placeholder{
  opacity:.35;
}