/* ====================================================================
   HM FLUID SCALING DESIGN FRAMEWORK
   For use with Bricks Builder + WPCodebox 2
   ==================================================================== */

/* --- 0b. BASE RESET OVERRIDES --- */
*, *::before, *::after { 
  box-sizing: border-box; 
}

/* Prevents long text/URLs from blowing out your fluid card layouts */
p, h1, h2, h3, h4, h5, h6 { 
  overflow-wrap: break-word; 
}

/* Sets fluid images up for success framework-wide */
img, picture, svg { 
  max-width: 100%; 
  height: auto; 
  display: block; 
}

/* SAFE FOR BRICKS BUILDER: Inherits font-family safely without stripping form heights */
input, button, textarea, select { 
  font-family: inherit; 
}

/* --- 0. BASE SITE DEFAULTS --- */
html {
  font-family: "Montserrat", sans-serif;
  font-size: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--hm-blue-light) var(--hm-bg);
  scrollbar-width: thin;
}

html, body {
  min-height: 100dvh;
}

:root {
  /* --- 1. FONT-SIZE CONTROLS --- */
  --fluid-min-width: 400;
  --fluid-max-width: 1920; /* 1200 */

  /* --- 2. THE BASE SIZE --- */
  --font-base-min: 18;
  --font-base-max: 20;

  /* --- 3. THE TYPOGRAPHY RATIO --- */
  --hm-type-ratio: 1.25;
  /* Added a distinct spacer token to isolate layout gaps from text-ratio shifts */
  --hm-space-ratio: var(--hm-type-ratio); 

  /* --- 4. THE FLUID MATH --- */
  --variable-unit: (var(--font-base-max) - var(--font-base-min)) / (var(--fluid-max-width) - var(--fluid-min-width));
  --fluid-slope: calc(var(--variable-unit) * 100);
  --fluid-intercept: calc(var(--font-base-min) - var(--variable-unit) * var(--fluid-min-width));

  /* --- 5. FLUID FONT VARIABLES --- */
  --hm-font-size-m:   clamp(calc(var(--font-base-min) * 1px), calc(var(--fluid-slope) * 1vw + (var(--fluid-intercept) * 1px)), calc(var(--font-base-max) * 1px));
  --hm-font-size-l:   calc(var(--hm-font-size-m) * var(--hm-type-ratio));
  --hm-font-size-xl:  calc(var(--hm-font-size-l) * var(--hm-type-ratio));
  --hm-font-size-2xl: calc(var(--hm-font-size-xl) * var(--hm-type-ratio));
  --hm-font-size-3xl: calc(var(--hm-font-size-2xl) * var(--hm-type-ratio));
  --hm-font-size-4xl: calc(var(--hm-font-size-3xl) * var(--hm-type-ratio));
  --hm-font-size-s:   calc(var(--hm-font-size-m) / var(--hm-type-ratio));
  --hm-font-size-xs:  calc(var(--hm-font-size-s) / var(--hm-type-ratio));

  /* --- 6. FLUID SPACE VARIABLES --- */
  --hm-space-multiplier: 1.5;
  --hm-space--s:   var(--hm-font-size-m);
  --hm-space--xs:  calc(var(--hm-space--s) / var(--hm-space-multiplier));
  --hm-space--xxs: calc(var(--hm-space--xs) / var(--hm-space-multiplier));
  --hm-space--xxxs: calc(var(--hm-space--xxs) / var(--hm-space-multiplier));
  --hm-space--m:   calc(var(--hm-space--s) * var(--hm-space-multiplier));
  --hm-space--l:   calc(var(--hm-space--m) * var(--hm-space-multiplier));
  --hm-space--xl:  calc(var(--hm-space--l) * var(--hm-space-multiplier));
  --hm-space--2xl: calc(var(--hm-space--xl) * var(--hm-space-multiplier));
  --hm-space--3xl: calc(var(--hm-space--2xl) * var(--hm-space-multiplier));
  --hm-space--4xl: calc(var(--hm-space--3xl) * var(--hm-space-multiplier));
  --hm-space--0: 0;

  /* --- 7. BORDER RADIUS --- */
  --hm-radius-base: 1.875rem;
  --hm-radius-m:    var(--hm-radius-base);
  --hm-radius-s:    calc(var(--hm-radius-base) * 0.5);
  --hm-radius-xs:   calc(var(--hm-radius-base) * 0.25);
  --hm-radius-full: 50%;

  /* --- 8. SEMANTIC ALIASES --- */
  --hm-gutter:                var(--hm-space--s);
  --hm-section-padding-block: var(--hm-space--3xl);
  --hm-card-radius:           var(--hm-radius-m);
  --hm-button-radius:         var(--hm-radius-s);

  /* --- 9. SHADOW TOKENS --- */
  --hm-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --hm-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --hm-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* --- 10. CARD TOKENS --- */
  --hm-card-bg:     var(--hm-bg); /* Synced color aliases directly */
  --hm-card-border: rgba(0, 0, 0, 0.08);

  /* --- 10b. GLOBAL COLOR BRAND TOKENS --- */
  --hm-bg:                  #FFFEFA;
  --hm-blue:                #277C9C;
  --hm-blue-dark:           #185886;
  --hm-blue-light:          #9FCAD3;
  --hm-gray:                #828282;
  --hm-gray-dark:           #2C2C2C;
  --hm-gray-light:          #B4B4B2;
  --hm-green:               #28C2B3;
  --hm-green-dark:          #0D9BA4;
  --hm-green-light:         #B1E1D5;
  --hm-purple:              #AD5FDE;
  --hm-purple-dark:         #6E31BC;
  --hm-purple-light:        #E3B5F3;
  --hm-red:                 #FC6D77;
  --hm-red-dark:            #CC3358;
  --hm-red-light:           #FFABAB;
  --hm-yellow:              #FEC97D;
  --hm-yellow-dark:         #D77D4A;
  --hm-yellow-light:        #FFEDAF;
  --hm-color-neutral-light: #f0f4f8;
}

/* --- 11. BREAKPOINT OVERRIDES --- */
@media (max-width: 767px) {
  /* Restricting scale ratio modifications strictly to layout properties */
  :root { --hm-type-ratio: 1.15; } 
}

/* ============================================================
   LAYOUT
   ============================================================ */

/* --- 12. GRID UTILITIES --- */
.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--hm-space--l); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 991px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* --- 13. SECTION & SPACING UTILITIES --- */
.section-pad { padding-block: var(--hm-section-padding-block); }
.section-xl  { padding-block: var(--hm-space--4xl); }
.section-l   { padding-block: var(--hm-space--3xl); }
.section-m   { padding-block: var(--hm-space--xl); }
.section-s   { padding-block: var(--hm-space--l); }

.container-gutter { padding-inline: var(--hm-gutter); }

.container-main-max {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--hm-gutter);
}

/* ============================================================
   LAYOUT (CONTINUED)
   ============================================================ */

/* --- 14. FLOW UTILITY (Lobotomized Owl spacing) --- */
.flow > * + * { margin-top: var(--flow-space, 1em); }
.flow-s { --flow-space: var(--hm-space--s); }
.flow-m { --flow-space: var(--hm-space--m); }
.flow-l { --flow-space: var(--hm-space--l); }

.list-item-space-xs li { padding-bottom: var(--hm-space--xs); }
.list-item-space-s  li { padding-bottom: var(--hm-space--s); }
.list-item-space-m  li { padding-bottom: var(--hm-space--m); }

/* Prevent double padding if lists are nested */
.list-item-space-xs li li,
.list-item-space-s  li li,
.list-item-space-m  li li { padding-bottom: 0; }

/* --- 15. FLEXBOX HELPERS --- */
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-column  { display: flex; flex-direction: column; }

/* --- 16. WIDTH & ALIGNMENT (Centered by Default) --- */
.max-width-s { max-width: 40ch; margin-inline: auto; }
.max-width-m { max-width: 65ch; margin-inline: auto; } /* Shifted to industry-optimal 65ch */
.max-width-l { max-width: 80ch; margin-inline: auto; }
.align-center { margin-inline: auto; text-align: center; }
.align-right  { margin-inline-start: auto; text-align: right; }

/* --- 17. RESPONSIVE VISIBILITY --- */
@media (max-width: 767px)                        { .hide-mobile  { display: none !important; } }
@media (min-width: 768px) and (max-width: 991px) { .hide-tablet  { display: none !important; } }
@media (min-width: 992px)                        { .hide-desktop { display: none !important; } }


/* ============================================================
   TYPOGRAPHY
   ============================================================ */

/* --- 18. HEADING SCALE --- */
h1, .h1 { font-size: var(--hm-font-size-4xl); font-weight: 800; line-height: 1.1; }
h2, .h2 { font-size: var(--hm-font-size-3xl); font-weight: 700; line-height: 1.2; }
h3, .h3 { font-size: var(--hm-font-size-2xl); font-weight: 700; line-height: 1.2; }
h4, .h4 { font-size: var(--hm-font-size-xl);  font-weight: 600; line-height: 1.3; }
h5, .h5 { font-size: var(--hm-font-size-l);   font-weight: 600; line-height: 1.4; }
h6, .h6 { font-size: var(--hm-font-size-m);   font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.4; }

/* --- 19. SCOPED BODY TEXT DEFAULTS --- */
#brx-content :where(p, li, label),
.brxe-section :where(p, li, label),
.brxe-footer :where(p, li, label),
.brxe-header :where(p, li, label) {
  font-size: var(--hm-font-size-m);
  line-height: 1.6;
  max-width: 75ch; /* Keeps standard paragraphs at a comfortable reading length */
}

small, .text-s { font-size: var(--hm-font-size-s); }

/* --- 20. TEXT OPTIMIZATION ASSIST --- */
p {
  text-wrap: pretty; /* Prevents awkward single-word orphans at the end of paragraphs */
}

/* Standard 1-line truncation with trailing ellipsis (...) */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Multi-line clamp: restricts card descriptions to exactly 3 lines max */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}


/* --- 21. ANIMATED TEXT LINK (Safe inline rendering) --- */
.text-link {
  color: var(--bricks-color-primary);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  display: inline-block; /* Keeps underline line-breaks clean */
  transition: background-size 0.3s ease;
}
.text-link:hover { background-size: 100% 2px; }

/* ============================================================
   COMPONENTS
   ============================================================ */

/* --- 22. BUTTON SYSTEM (Fluid Framework Aligned) --- */
.btn, :where(.bricks-button) {
  box-sizing: border-box;
}

.btn, .bricks-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hm-space--xxs);
  
  /* 💡 Fluid Fix: Padding scale set in ems so it shrinks/grows perfectly 
     proportional to whatever fluid font-size is active */
  padding: 0.65em 1.4em; 
  font-size: var(--hm-font-size-s);
  border-radius: var(--hm-button-radius);
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  
  border: 3px solid var(--btn-border, var(--hm-blue));
  background-color: var(--btn-bg, var(--hm-blue));
  color: var(--btn-color, var(--hm-bg));
  
  /* 💡 Removed will-change: transform to prevent performance memory leaks 
     on large loops, dropping transition time slightly for snappier UI feel */
  transition: transform 0.2s ease, filter 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Isolating the line-height property strictly to standard link and structural button text zones */
a.btn, 
button.btn, 
a.bricks-button, 
button.bricks-button {
  /* 💡 Fluid Fix: 1.1 or 1.15 prevents Montserrat's tall uppercase letters 
     and descenders from clipping inside tightly bound containers */
  line-height: 1.15; 
}

/* Global Form Input Override */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], select, textarea {
  line-height: 1.5;
  padding-block: var(--hm-space--xs, 12px); 
  padding-inline: var(--hm-space--s, 16px);
  height: auto;
}

/* 💡 Scale transform instead of TranslateY ensures the button expands out from 
   its center footprint, completely avoiding the hover-flicker loop */
.btn:hover, .bricks-button:hover { 
  filter: brightness(1.1); 
  transform: scale(1.02); 
}

/* 💡 Specificity Modifiers: Only font-size needs changing. 
   The em padding automatically manages the correct fluid layout */
.btn.btn-xs, .bricks-button.btn-xs { font-size: var(--hm-font-size-xs); }
.btn.btn-s,  .bricks-button.btn-s  { font-size: var(--hm-font-size-s); }
.btn.btn-m,  .bricks-button.btn-m  { font-size: var(--hm-font-size-m); }
.btn.btn-l,  .bricks-button.btn-l  { font-size: var(--hm-font-size-l); }

/* Global Outline Modifier using Variable Switching */
.btn.btn-outline, .bricks-button.btn-outline {
  --btn-bg: var(--hm-bg);
  --btn-color: var(--btn-border, var(--hm-blue));
}

/* Color Variant Overrides */
.btn-primary { --btn-bg: var(--bricks-color-primary); --btn-border: var(--bricks-color-primary); --btn-color: var(--hm-bg); }
.btn-blue    { --btn-bg: var(--hm-blue);   --btn-border: var(--hm-blue);   --btn-color: var(--hm-bg); }
.btn-green   { --btn-bg: var(--hm-green);  --btn-border: var(--hm-green);  --btn-color: var(--hm-bg); }
.btn-purple  { --btn-bg: var(--hm-purple); --btn-border: var(--hm-purple); --btn-color: var(--hm-bg); }
.btn-red     { --btn-bg: var(--hm-red);    --btn-border: var(--hm-red);    --btn-color: var(--hm-bg); }
.btn-yellow  { --btn-bg: var(--hm-yellow); --btn-border: var(--hm-yellow); --btn-color: var(--hm-bg); }

.btn-yellow.btn-outline { --btn-color: var(--hm-yellow-dark); }

/* Ghost Utility State */
.btn-ghost { 
  --btn-bg: transparent; 
  --btn-border: transparent; 
  --btn-color: inherit; 
}
/* 💡 Maintained transition alignment to prevent glitching when paired with interactive cards */
.btn-ghost:hover { 
  --btn-bg: rgba(0, 0, 0, 0.05); 
  transform: scale(1); 
  filter: none; 
}

/* --- 22b. BADGE / PILL SYSTEM (Fluid Framework Aligned) --- */
.badge {
  display: inline-block; /* 💡 Safe default: honors your padding without flex layout bugs */
  text-align: center;    /* Ensures text stays centered if it wraps */
  
  /* Strict layout proportions for metadata, scaling cleanly via ems */
  padding: 0.25em 0.6em; 
  font-size: var(--hm-font-size-xs);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  
  /* This token forces the perfect capsule/pill shape */
  border-radius: var(--hm-radius-full); 
  
  /* Fallback layout defaults */
  background-color: var(--badge-bg, var(--hm-gray-light));
  color: var(--badge-color, var(--hm-gray-dark));
  border: 1px solid var(--badge-border, transparent);
  
  /* Explicitly strips interactive behavior for screen readers and mice */
  pointer-events: none; 
  user-select: none;
}

/* Badge Color Variant Bridges (Matching your theme engine) */
.badge.badge-primary { --badge-bg: var(--bricks-color-primary); --badge-color: var(--hm-bg); }
.badge.badge-blue    { --badge-bg: var(--hm-blue);   --badge-color: var(--hm-bg); }
.badge.badge-green   { --badge-bg: var(--hm-green);  --badge-color: var(--hm-bg); }
.badge.badge-purple  { --badge-bg: var(--hm-purple); --badge-color: var(--hm-bg); }
.badge.badge-red     { --badge-bg: var(--hm-red);    --badge-color: var(--hm-bg); }
.badge.badge-yellow  { --badge-bg: var(--hm-yellow); --badge-color: var(--hm-gray-dark); }

/* Outline Modifier Variant */
.badge.badge-outline {
  --badge-border: var(--badge-bg, var(--hm-gray-light));
  --badge-color: var(--badge-bg, var(--hm-gray-dark));
  --badge-bg: transparent;
}


/* --- 23. CARD COMPONENT --- */
.card {
  display: flex;
  flex-direction: column;
  background-color: var(--hm-card-bg);
  border-radius: var(--hm-card-radius);
  border: 3px solid var(--hm-card-border);
  overflow: hidden;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; 
  will-change: transform; 
}

.card-media { 
  width: 100%; 
  aspect-ratio: 16 / 9; 
  object-fit: cover; 
  display: block;
}

.card-content {
  padding: var(--hm-space--m);
  display: flex;
  flex-direction: column;
  gap: var(--hm-space--s);
  flex-grow: 1;
}

.card-content h3, 
.card-content .card-title {
  margin-top: 0;
}

.card-content p, 
.card-content .card-description {
  margin-bottom: auto;
}

.card-meta-group {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--hm-space--xs);
}

.card-interactive:hover {
  transform: translateY(-5px);
  box-shadow: var(--hm-shadow-md);
  border-color: var(--bricks-color-primary);
}

a.card {
  text-decoration: none;
  color: inherit;
}


/* ============================================================
   UTILITIES
   ============================================================ */

/* --- 24. SHADOW UTILITIES --- */
.shadow-sm { box-shadow: var(--hm-shadow-sm) !important; }
.shadow-md { box-shadow: var(--hm-shadow-md) !important; }
.shadow-lg { box-shadow: var(--hm-shadow-lg) !important; }

/* --- 25. IMAGE UTILITIES --- */
.img-fit   { width: 100%; height: 100%; object-fit: cover; }
.img-round { border-radius: 50%; aspect-ratio: 1/1; }

/* --- 26. GLASS EFFECT --- */
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Radio Styler Goes here */

/* ============================================================
   BRICKS COLOR BRIDGE
   ============================================================ */

/* --- 27. TEXT COLORS --- */
.text-primary   { color: var(--bricks-color-primary) !important; }
.text-secondary { color: var(--bricks-color-secondary) !important; }
.text-accent    { color: var(--bricks-color-accent) !important; }
.text-white     { color: var(--hm-bg) !important; }
.text-black     { color: var(--hm-gray-dark) !important; } /* Refactored to native token */
.text-muted     { color: rgba(0, 0, 0, 0.6) !important; }

/* --- 28. BACKGROUND COLORS --- */
.bg-primary   { background-color: var(--bricks-color-primary) !important; }
.bg-secondary { background-color: var(--bricks-color-secondary) !important; }
.bg-accent    { background-color: var(--bricks-color-accent) !important; }
.bg-light     { background-color: #f8f9fa !important; }
.bg-dark      { background-color: var(--hm-gray-dark) !important; } /* Refactored to native token */
.bg-white     { background-color: var(--hm-bg) !important; }

/* --- 29. BORDER COLORS --- */
.border-primary   { border: 1px solid var(--bricks-color-primary) !important; }
.border-secondary { border: 1px solid var(--bricks-color-secondary) !important; }
.border-light     { border: 1px solid rgba(0, 0, 0, 0.1) !important; }

/* --- 30. COMBO: DARK SECTION --- */
.section-dark { background-color: #111111; color: var(--hm-bg); } /* Adjusted base backplate split contrast */
.section-dark h1,
.section-dark h2,
.section-dark h3 { color: var(--hm-bg) !important; }


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

/* --- 31. FOCUS STATES --- */
/* A. Standard clickable links and button focus loops */
.btn:focus-visible,
a:focus-visible {
  outline: 3px solid var(--bricks-color-secondary);
  outline-offset: 4px;
}

/* B. EDITABLE FORM FOCUS: Swap out the variable token to change your outline color */
input:not([readonly]):focus,
textarea:not([readonly]):focus,
select:not([readonly]):focus {
  /* Change var(--hm-blue) to your preferred token (e.g. var(--hm-green), etc.) */
  outline: 3px solid var(--hm-blue) !important; 
  outline-offset: 2px !important;
  border-color: transparent !important; /* Cleans up dual-border overlaps on focus */
}

/* Hides element visually but keeps it fully accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}