/**
 * Main CSS Variables
 * 
 * This file contains global CSS variables for colors, typography, and spacing
 * that will be imported by all component CSS files.
 */

 html, body {
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}



* {
  font-family: inherit;
}

*, *::before, *::after {
  box-sizing: border-box;
}


:root {
  /* Color Families */
  
  /* Primary Colors */
  --primary-50: #E6F0E7;
  --primary-100: #C5DFCB;
  --primary-200: #A1CDAC;
  --primary-300: #7DBC8C;
  --primary-400: #5DA87E;  /* NEW */
  --primary-500: #48956F;
  --primary-600: #398059;  /* NEW */
  --primary-700: #2C694E;
  --primary-800: #235441;  /* NEW */
  --primary-900: #1A3835;
  
  /* Secondary Colors */
  --secondary-50: #E6F5F7;
  --secondary-100: #C5E8EC;
  --secondary-200: #A1D9E0;
  --secondary-300: #7DCAD3;
  --secondary-400: #5DBBC6;  /* NEW */
  --secondary-500: #48ACB9;
  --secondary-600: #3A96A1;  /* NEW */
  --secondary-700: #2C7F89;
  --secondary-800: #24656D;  /* NEW */
  --secondary-900: #1A4A50;
  
  /* Tertiary Colors */
  --tertiary-50: #F7EFE6;
  --tertiary-100: #EDDCC5;
  --tertiary-200: #E2C8A1;
  --tertiary-300: #D7B37D;
  --tertiary-400: #CD9E60;  /* NEW */
  --tertiary-500: #C28A48;
  --tertiary-600: #A7763A;  /* NEW */
  --tertiary-700: #8C622C;
  --tertiary-800: #714E23;  /* NEW */
  --tertiary-900: #503A1A;
  
  /* Grays */
  --gray-50: #F7F7F7;
  --gray-100: #E6E6E6;
  --gray-200: #CCCCCC;
  --gray-300: #B3B3B3;
  --gray-400: #999999;  /* NEW */
  --gray-500: #808080;
  --gray-600: #666666;  /* NEW */
  --gray-700: #4D4D4D;
  --gray-800: #333333;  /* NEW */
  --gray-900: #262626;
  
  /* Typography */
  
  /* Font Families */
  --font-primary: 'Lato', sans-serif;
  --font-heading: 'Lato', sans-serif;
  
  /* Font Sizes */
  --font-size-h1: 4.25rem;
  --font-size-h2: 3.15rem;
  --font-size-h3: 2.75rem;
  --font-size-h4: 1.75rem;
  --font-size-h5: 1rem;
  --font-size-title: 1.25rem;
  --font-size-large: 1.125rem;
  --font-size-medium: 1rem;
  --font-size-small: 0.875rem;
  --font-size-btn-large: 1.125rem;
  --font-size-btn-medium: .75rem;
  --font-size-btn-small: 0.75rem;
  
  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  
  /* Line Heights */
  --line-height-tight: 1.1;
  --line-height-snug: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* Letter Spacing */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.15em;
  --letter-spacing-wider: 0.025em;
  
  /* Spacing */
  --spacing-0: 0;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-7: 1.75rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-14: 3.5em;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
  --spacing-32: 8rem;
  --spacing-45: 11.25rem; /* 180px equivalent for container padding */
  
  /* Component Specific */
  --container-max-width: 1280px;
  --container-padding: 1.5rem;
  
  /* Border Radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  
}

 /* Background & Text Color Utility Classes */
 .bg-primary-50 { background-color: var(--primary-50); }
 .bg-primary-100 { background-color: var(--primary-100); }
 .bg-primary-200 { background-color: var(--primary-200); }
 .bg-primary-300 { background-color: var(--primary-300); }
 .bg-primary-400 { background-color: var(--primary-400); }  /* NEW */
 .bg-primary-500 { background-color: var(--primary-500); }
 .bg-primary-600 { background-color: var(--primary-600); }  /* NEW */
 .bg-primary-700 { background-color: var(--primary-700); }
 .bg-primary-800 { background-color: var(--primary-800); }  /* NEW */
 .bg-primary-900 { background-color: var(--primary-900); }
 
 .bg-secondary-50 { background-color: var(--secondary-50); }
 .bg-secondary-100 { background-color: var(--secondary-100); }
 .bg-secondary-200 { background-color: var(--secondary-200); }
 .bg-secondary-300 { background-color: var(--secondary-300); }
 .bg-secondary-400 { background-color: var(--secondary-400); }  /* NEW */
 .bg-secondary-500 { background-color: var(--secondary-500); }
 .bg-secondary-600 { background-color: var(--secondary-600); }  /* NEW */
 .bg-secondary-700 { background-color: var(--secondary-700); }
 .bg-secondary-800 { background-color: var(--secondary-800); }  /* NEW */
 .bg-secondary-900 { background-color: var(--secondary-900); }
 
 .bg-tertiary-50 { background-color: var(--tertiary-50); }
 .bg-tertiary-100 { background-color: var(--tertiary-100); }
 .bg-tertiary-200 { background-color: var(--tertiary-200); }
 .bg-tertiary-300 { background-color: var(--tertiary-300); }
 .bg-tertiary-400 { background-color: var(--tertiary-400); }  /* NEW */
 .bg-tertiary-500 { background-color: var(--tertiary-500); }
 .bg-tertiary-600 { background-color: var(--tertiary-600); }  /* NEW */
 .bg-tertiary-700 { background-color: var(--tertiary-700); }
 .bg-tertiary-800 { background-color: var(--tertiary-800); }  /* NEW */
 .bg-tertiary-900 { background-color: var(--tertiary-900); }
 
 .bg-gray-50 { background-color: var(--gray-50); }
 .bg-gray-100 { background-color: var(--gray-100); }
 .bg-gray-200 { background-color: var(--gray-200); }
 .bg-gray-300 { background-color: var(--gray-300); }
 .bg-gray-400 { background-color: var(--gray-400); }  /* NEW */
 .bg-gray-500 { background-color: var(--gray-500); }
 .bg-gray-600 { background-color: var(--gray-600); }  /* NEW */
 .bg-gray-700 { background-color: var(--gray-700); }
 .bg-gray-800 { background-color: var(--gray-800); }  /* NEW */
 .bg-gray-900 { background-color: var(--gray-900); }
 
 .text-primary-400 { color: var(--primary-400); }  /* NEW */
 .text-primary-500 { color: var(--primary-500); }
 .text-primary-600 { color: var(--primary-600); }  /* NEW */
 .text-primary-700 { color: var(--primary-700); }
 .text-primary-800 { color: var(--primary-800); }  /* NEW */
 .text-primary-900 { color: var(--primary-900); }
 
 .text-secondary-400 { color: var(--secondary-400); }  /* NEW */
 .text-secondary-500 { color: var(--secondary-500); }
 .text-secondary-600 { color: var(--secondary-600); }  /* NEW */
 .text-secondary-700 { color: var(--secondary-700); }
 .text-secondary-800 { color: var(--secondary-800); }  /* NEW */
 .text-secondary-900 { color: var(--secondary-900); }
 
 .text-tertiary-400 { color: var(--tertiary-400); }  /* NEW */
 .text-tertiary-500 { color: var(--tertiary-500); }
 .text-tertiary-600 { color: var(--tertiary-600); }  /* NEW */
 .text-tertiary-700 { color: var(--tertiary-700); }
 .text-tertiary-800 { color: var(--tertiary-800); }  /* NEW */
 .text-tertiary-900 { color: var(--tertiary-900); }
 
 .text-gray-50 { color: var(--gray-50); }
 .text-gray-100 { color: var(--gray-100); }
 .text-gray-400 { color: var(--gray-400); }  /* NEW */
 .text-gray-500 { color: var(--gray-500); }
 .text-gray-600 { color: var(--gray-600); }  /* NEW */
 .text-gray-700 { color: var(--gray-700); }
 .text-gray-800 { color: var(--gray-800); }  /* NEW */
 .text-gray-900 { color: var(--gray-900); }

/* Alternative approach using pseudo-elements for more control */
body {
  margin: 0;
  position: relative;
  z-index: 0;
  background-image: linear-gradient(to top, var(--tertiary-700), var(--primary-900));
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: local;
  min-height: 100vh; /* Ensure body is at least viewport height */
}

/* Top angles */
body::before {
  content: '';
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  width: 100%;
  height: calc(100vw * 1.408); /* Maintain aspect ratio: 1931/1371 = 1.408 */
  background-image: url(/wp-content/themes/foxtrot/assets/bg/angles.svg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto; /* Scale to full width, height adjusts automatically */
  pointer-events: none;
  z-index: -1;
}

/* Bottom angles */
body::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: calc(100vw * 1.408); /* Maintain aspect ratio: 1931/1371 = 1.408 */
  background-image: url(/wp-content/themes/foxtrot/assets/bg/angles.svg);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto; /* Scale to full width, height adjusts automatically */
  pointer-events: none;
  z-index: -1;
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Class added by JavaScript when SVGs would overlap */
body.hide-bottom-svg::after {
  opacity: 0;
  pointer-events: none;
}

#page {
  position:relative;
  overflow: hidden;
}

.site {
  padding: 0 var(--spacing-14) 0 var(--spacing-14);
  position: relative;
  z-index: 1;
  background: transparent; /* Allow angle backgrounds to show through */
}

/* ================================
   PAGE ANGLE BACKGROUNDS
   ================================ */

/* Angle background elements */
.page-angle {
  position: fixed;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 300ms ease-in-out;
  background-size: cover;
  background-repeat: no-repeat;
}

.page-angle-top {
  top: 0;
  background-position: bottom center;
}

.page-angle-bottom {
  bottom: 0;
  background-position: top center;
  transform: scaleY(-1); /* Flip the bottom angle */
}

/* Typography Classes */

h1, .h1 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: var(--spacing-6);
  margin-top:0;
  color:var(--primary-900);
}

h1.huge, .h1.huge {
  font-size: var(--font-size-h1);
}

h2, .h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: var(--spacing-5);
  color:var(--primary-900);
}

h3, .h3 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  margin-bottom: var(--spacing-4);
  color:var(--primary-900);
}

h4, .h4 {
  font-size: var(--font-size-medium) !important;
  font-weight: var(--font-weight-semibold) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:var(--secondary-500);
}

h5, .h5 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  margin-top:var(--spacing-1);
  margin-bottom: var(--spacing-1);
  color: var(--primary-700);
  text-transform: uppercase;
}

p {
  color:var(--secondary-700);
  line-height: var(--line-height-normal);
}

p a {
  color: var(--primary-200);
  font-weight:bold;
  text-decoration:underline !important;
  transition: color 0.3s ease;
}

/* Optional: Add hover effect */
p a:hover {
  color: var(--primary-100);
}

p a:focus {
  color: var(--primary-100);
  outline: 2px solid var(--primary-200);
  outline-offset: 2px;
}

/* List Styles */
ul, ol {
  margin-top: var(--spacing-4);
  margin-bottom: var(--spacing-6);
  padding-left: var(--spacing-8);
  color: var(--secondary-700);
  line-height: var(--line-height-relaxed);
}

ul li, ol li {
  margin-bottom: var(--spacing-3);
  padding-left: var(--spacing-2);
  line-height:var(--line-height-snug);
}

/* Custom bullet points for unordered lists */
ul {
  list-style: none;
  padding-left: var(--spacing-3);
  text-align:left;
}

ul li {
  position: relative;
  padding-left: var(--spacing-6);
}

ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  background-color: var(--primary-500);
  border-radius: 50%;
  transform: translateY(-50%);
}

/* Nested lists */
ul ul, ol ul {
  margin-top: var(--spacing-2);
  margin-bottom: var(--spacing-2);
}

ul ul li::before {
  width: 4px;
  height: 4px;
  background-color: var(--primary-300);
}

/* Ordered lists */
ol {
  counter-reset: list-counter;
  list-style: none;
  padding-left: var(--spacing-6);
}

ol li {
  counter-increment: list-counter;
  position: relative;
  padding-left: var(--spacing-8);
}

ol li::before {
  content: counter(list-counter) ".";
  position: absolute;
  left: 0;
  color: var(--primary-700);
  font-weight: var(--font-weight-bold);
  font-size: 0.9em;
}

/* WordPress block list specific styles */
.wp-block-list {
  margin-top: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}

/* List links inherit paragraph link styles */
ul a, ol a {
  color: var(--primary-200);
  font-weight: bold;
  text-decoration: underline;
  transition: color 0.3s ease;
}

ul a:hover, ol a:hover {
  color: var(--primary-100);
}

ul a:focus, ol a:focus {
  color: var(--primary-100);
  outline: 2px solid var(--primary-200);
  outline-offset: 2px;
}

.text-center {
  text-align:center;
}

/* Dark theme list styles */
.bg-dark ul, .bg-dark ol {
  color: var(--gray-100);
}

.bg-dark ul li::before {
  background-color: var(--primary-300);
}

.bg-dark ul ul li::before {
  background-color: var(--primary-500);
}

.bg-dark ol li::before {
  color: var(--primary-300);
}

.bg-dark ul a, .bg-dark ol a {
  color: var(--primary-300);
}

.bg-dark ul a:hover, .bg-dark ol a:hover {
  color: var(--primary-100);
}

/* List inside text blocks with different font sizes */
.text-small ul, .text-small ol {
  font-size: var(--font-size-small);
}

.text-large ul, .text-large ol {
  font-size: var(--font-size-large);
}

.text-xl ul, .text-xl ol {
  font-size: 1.25rem;
}

.text-2xl ul, .text-2xl ol {
  font-size: 1.5rem;
}

.text-3xl ul, .text-3xl ol {
  font-size: 1.75rem;
}

.text-4xl ul, .text-4xl ol {
  font-size: 2rem;
}

.title {
  font-family: var(--font-heading);
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

.title-link {
  font-family: var(--font-heading);
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  text-decoration: none;
  color: var(--primary-700);
}

.title-link:hover {
  color: var(--primary-900);
  text-decoration: underline;
}

.text-large {
  font-family: var(--font-primary);
  font-size: var(--font-size-large);
  line-height: var(--line-height-relaxed);
}

.link-large {
  font-family: var(--font-primary);
  font-size: var(--font-size-large);
  line-height: var(--line-height-relaxed);
  text-decoration: none;
  color: var(--primary-700);
}

.link-large:hover {
  color: var(--primary-900);
  text-decoration: underline;
}

.text-medium {
  font-family: var(--font-primary);
  font-size: var(--font-size-medium);
  line-height: var(--line-height-normal);
}

.link-medium {
  font-family: var(--font-primary);
  font-size: var(--font-size-medium);
  line-height: var(--line-height-normal);
  text-decoration: none;
  color: var(--primary-700);
}

.link-medium:hover {
  color: var(--primary-900);
  text-decoration: underline;
}

.text-small {
  font-family: var(--font-primary);
  font-size: var(--font-size-small);
  line-height: var(--line-height-normal);
}

.link-small {
  font-family: var(--font-primary);
  font-size: var(--font-size-small);
  line-height: var(--line-height-normal);
  text-decoration: none;
  color: var(--primary-700);
  text-decoration:none !important;
}

.link-small:hover {
  color: var(--primary-900);
  text-decoration: underline;
}

/* Button Styles */
.btn-large {
  padding: var(--spacing-4) var(--spacing-8);
  font-family: var(--font-primary);
  font-size: var(--font-size-btn-large);
  font-weight: var(--font-weight-medium);
  text-align: center;
  text-decoration: none;
  text-transform:uppercase;
  cursor: pointer;
  border-radius: 0;
  transition: all 0.2s ease;
  background-color: var(--primary-700);
  color: var(--gray-50);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing:var(--letter-spacing-wide);
}

.btn-large:hover {
  background-color: var(--primary-500);
}

.btn-medium {
  padding: var(--spacing-3) var(--spacing-7);
  font-family: var(--font-primary);
  font-size: var(--font-size-btn-medium);
  font-weight: var(--font-weight-black);
  text-align: center;
  text-decoration: none;
  text-transform:uppercase;
  cursor: pointer;
  border-radius: 0;
  transition: all 0.2s ease;
  background-color: var(--primary-600);
  color: var(--gray-50);
  border: none;
  height:60px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing:var(--letter-spacing-wide);
}

.btn-medium i {
  color: var(--secondary-200);
  font-size: 1.75rem;
  padding-left: 10px;
  position: relative;
  right: -5px;
}

.btn-medium:hover {
  background-color: var(--primary-500);
}

.btn-small {
  padding: var(--spacing-2) var(--spacing-4);
  font-family: var(--font-primary);
  font-size: var(--font-size-btn-small);
  font-weight: var(--font-weight-medium);
  text-align: center;
  text-decoration: none;
  text-transform:uppercase;
  cursor: pointer;
  border-radius: 0;
  transition: all 0.2s ease;
  background-color: var(--primary-700);
  color: var(--gray-50);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing:var(--letter-spacing-wide);
}

.btn-small:hover {
  background-color: var(--primary-500);
}

.btn-alt {
  background-color: transparent;
  color: var(--primary-700);
  border: 2px solid var(--primary-500);
}

.btn-alt:hover {
  background-color: var(--primary-50);
  color: var(--primary-900);
}

.text-link {
  text-transform: uppercase;
  font-size: .75rem;
  font-weight: var(--font-weight-bold);
}

input {
  background-color:var(--gray-50);
  border:none;
  border-radius:0;
  color:var(--secondary-700);
  line-height: var(--line-height-normal);
  outline:none;
  height:60px;
}

input:focus {
  background-color:var(--gray-100);
}

input::placeholder {
  color:var(--secondary-700);
}

/* Style Modifiers */
.text-gradient {
  background: linear-gradient(to right, var(--primary-300), var(--secondary-300));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient {
  background: linear-gradient(to right, var(--primary-300), var(--secondary-300));
}

.text-shadow {
  text-shadow: 0 2px 0 rgba(0,0,0,0.50);
}

/* Utility Classes */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Container Width Classes */
.container-narrow {
  max-width: calc(100%- 280px);
  margin-left: auto;
  margin-right: auto;

}

.container-medium {
  width:100%;
  max-width: calc(100% - var(--spacing-32));
  margin-left: auto;
  margin-right: auto;
}

.container-wide {
  max-width: calc(100% - 110px);
  margin-left: auto;
  margin-right: auto;
}

/* Vertical Padding (py-*) */
.py-8 {
padding-top: var(--spacing-8);
padding-bottom: var(--spacing-8);
}

.py-12 {
padding-top: var(--spacing-12);
padding-bottom: var(--spacing-12);
}

.py-16 {
padding-top: var(--spacing-16);
padding-bottom: var(--spacing-16);
}

.py-20 {
padding-top: var(--spacing-20);
padding-bottom: var(--spacing-20);
}

.py-24 {
padding-top: var(--spacing-24);
padding-bottom: var(--spacing-24);
}

/* Margin Bottom Classes (mb-*) */
.mb-4 {
margin-bottom: var(--spacing-4);
}

.mb-6 {
margin-bottom: var(--spacing-6);
}

.mb-8 {
margin-bottom: var(--spacing-8);
}

.mb-10 {
margin-bottom: var(--spacing-10);
}

.mb-12 {
margin-bottom: var(--spacing-12);
}

.mb-16 {
margin-bottom: var(--spacing-16);
}

.mb-20 {
margin-bottom: var(--spacing-20);
}

.mb-24 {
margin-bottom: var(--spacing-24);
}

/* Color Modifiers for Content Blocks */
.bg-dark {
  background-color: transparent !important;

}

.bg-dark h1 {
  color: var(--gray-50); /* Headings in dark mode */
}

.bg-dark h2 {
  color: var(--secondary-300); /* Smaller headings in dark mode */
}

.bg-dark h3 {
  color:var(--secondary-300);
}

.bg-dark h5 {
  color:var(--primary-500);
}

.bg-dark p {
  color:var(--gray-50);
}

.bg-dark p a {
  color: var(--primary-300); /* Links in dark mode */
}

.bg-dark a:hover {
  color: var(--primary-100); /* Link hover in dark mode */
}

/* Primary Colors */
.bg-primary-50 {
background-color: var(--primary-50);
}

.bg-primary-100 {
background-color: var(--primary-100);
}

.bg-primary-200 {
background-color: var(--primary-200);
}

.bg-primary-300 {
background-color: var(--primary-300);
}

.bg-primary-400 {
background-color: var(--primary-400);  /* NEW */
}

.bg-primary-500 {
background-color: var(--primary-500);
}

.bg-primary-600 {
background-color: var(--primary-600);  /* NEW */
}

.bg-primary-700 {
background-color: var(--primary-700);
}

.bg-primary-800 {
background-color: var(--primary-800);  /* NEW */
}

.bg-primary-900 {
background-color: var(--primary-900);
}

/* Secondary Colors */
.bg-secondary-50 {
background-color: var(--secondary-50);
}

.bg-secondary-100 {
background-color: var(--secondary-100);
}

.bg-secondary-200 {
background-color: var(--secondary-200);
}

.bg-secondary-300 {
background-color: var(--secondary-300);
}

.bg-secondary-400 {
background-color: var(--secondary-400);  /* NEW */
}

.bg-secondary-500 {
background-color: var(--secondary-500);
}

.bg-secondary-600 {
background-color: var(--secondary-600);  /* NEW */
}

.bg-secondary-700 {
background-color: var(--secondary-700);
}

.bg-secondary-800 {
background-color: var(--secondary-800);  /* NEW */
}

.bg-secondary-900 {
background-color: var(--secondary-900);
}

/* Tertiary Colors */
.bg-tertiary-50 {
background-color: var(--tertiary-50);
}

.bg-tertiary-100 {
background-color: var(--tertiary-100);
}

.bg-tertiary-200 {
background-color: var(--tertiary-200);
}

.bg-tertiary-300 {
background-color: var(--tertiary-300);
}

.bg-tertiary-400 {
background-color: var(--tertiary-400);  /* NEW */
}

.bg-tertiary-500 {
background-color: var(--tertiary-500);
}

.bg-tertiary-600 {
background-color: var(--tertiary-600);  /* NEW */
}

.bg-tertiary-700 {
background-color: var(--tertiary-700);
}

.bg-tertiary-800 {
background-color: var(--tertiary-800);  /* NEW */
}

.bg-tertiary-900 {
background-color: var(--tertiary-900);
}

/* Grays */
.bg-gray-50 {
background-color: var(--gray-50);
}

.bg-gray-100 {
background-color: var(--gray-100);
}

.bg-gray-200 {
background-color: var(--gray-200);
}

.bg-gray-300 {
background-color: var(--gray-300);
}

.bg-gray-400 {
background-color: var(--gray-400);  /* NEW */
}

.bg-gray-500 {
background-color: var(--gray-500);
}

.bg-gray-600 {
background-color: var(--gray-600);  /* NEW */
}

.bg-gray-700 {
background-color: var(--gray-700);
}

.bg-gray-800 {
background-color: var(--gray-800);  /* NEW */
}

.bg-gray-900 {
background-color: var(--gray-900);
}

/* Theme classes for text/component styling */
.bg-light {
/* Default text color for light themes */
background:var(--gray-50);
}

/* News Pagination Styles */
.news-pagination {
  margin-top: 0;
  padding-top: 0;
  border-top: 0 solid var(--gray-200);
}

.news-pagination ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}

.news-pagination li {
  margin: 0;
}

.news-pagination a,
.news-pagination .current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--spacing-3);
  text-decoration: none;
  color: var(--secondary-300);
  background-color: transparent;
  border: 0;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: all var(--transition-base);
}

.news-pagination a:hover {
  color: var(--primary-200);
}

.news-pagination .current {
  color: var(--primary-300);
  font-weight: 600;
}

.news-pagination .prev,
.news-pagination .next {
  padding: 0 var(--spacing-4);
}

.news-pagination ul li {
  padding:0;
}

.news-pagination ul li:before {
  display:none;
}

.page-numbers .dots {
  line-height:2rem;
  font-size:1.25rem;
  color: var(--secondary-300);
}

@media (max-width: 1280px) {
  .container-narrow {
    max-width: calc(var(--container-max-width) - 200px);
  }
  
  .container-wide {
    max-width: calc(100% - 40px);
  }
}

@media (max-width: 768px) {
  .container-narrow {
    max-width: calc(100% - 40px);
  }
  
  .container-medium {
    max-width: calc(100% - 40px);
  }
  
  .container-wide {
    max-width: calc(100% - 20px);
  }

  /* Reduce list spacing on mobile */
  ul, ol {
    padding-left: var(--spacing-4);
  }

  ul li, ol li {
    padding-left: var(--spacing-4);
  }
}

/* Responsive Adjustments */
@media (max-width: 1280px) {
  :root {
    --font-size-h1: 3rem;
    --font-size-h2: 2.5rem;
    --font-size-h3: 2rem;
  }
  .site {
    padding: 0 var(--spacing-7) 0 var(--spacing-7);
  }
  .container-medium {
    max-width: calc(100% - var(--spacing-16));
  }
  .hero-style1 .container-medium {
    max-width: calc(100% - var(--spacing-32));
  }
  .footer-style1 .container-medium {
    max-width: calc(100% - var(--spacing-32));
  }
  .hero-actions-block {
    padding: var(--spacing-4);
    padding-right: var(--spacing-6);
  }
  .hero-actions-meta {
    opacity:0;
  }
  .hero-actions-label {
    font-size:.75rem;
  }
  .news-item {
    height:55vh;
  }
}

@media (max-width: 768px) {
  :root {
    --font-size-h1: 3rem;
    --font-size-h2: 2rem;
    --font-size-h3: 1.75rem;
    --font-size-h4: 1.5rem;
    --container-padding: 1rem;
  }
  .site {
    padding: 0 var(--spacing-2) 0 var(--spacing-2);
  }
  .hero-style1 .container-medium {
      max-width: calc(100% - var(--spacing-12));
  }
  .container-medium {
    max-width: calc(100% - var(--spacing-2));
  }
  .hero-actions-block {
    padding: var(--spacing-4);
    padding-right: var(--spacing-4);
  }
}

@media (max-width: 480px) {
  :root {
    --font-size-h1: 2rem;
    --font-size-h2: 1.75rem;
    --font-size-h3: 1.5rem;
    --font-size-h4: 1.25rem;
  }
  .container-medium {
    max-width: calc(100% - var(--spacing-6));
  }
}

.hero-actions-title {
  display:none;
}


/* ================================
   ADD THIS SECTION TO YOUR EXISTING hero-actions.css
   This integrates CF7 with your existing signup form styles
   ================================ */

/* ================================
   SIGNUP FORM COMPONENT STYLES - WITH CF7 SUPPORT
   Uncomment your existing styles (lines 576-711) and add these CF7-specific styles
   ================================ */

/* CF7 VERTICAL SIGNUP INTEGRATION */

/* Hide CF7's BR tags */
.hero-actions-signup .wpcf7-form .form-fields-grid br {
  display: none;
}

/* CF7 form wrapper */
.hero-actions-signup .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

/* CF7 paragraph spacing */
.hero-actions-signup .wpcf7-form p {
  margin: 0;
  width: 100%;
}

/* Make the P tag inside form-fields-grid act as our grid container */
.hero-actions-signup .wpcf7-form .form-fields-grid p {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1rem;
  width: 100%;
  margin: 0;
}

/* Each span wrapper takes up one grid cell */
.hero-actions-signup .wpcf7-form .form-fields-grid .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* Style CF7 inputs to match existing design */
.hero-actions-signup .wpcf7-form input[type="text"],
.hero-actions-signup .wpcf7-form input[type="email"],
.hero-actions-signup .wpcf7-form input[type="tel"],
.hero-actions-signup .wpcf7-form input[type="url"],
.hero-actions-signup .wpcf7-form input[type="number"],
.hero-actions-signup .wpcf7-form textarea,
.hero-actions-signup .wpcf7-form select {
  /* These already inherit from your global input styles */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* CF7 Submit button - EXACT btn-medium match */
.hero-actions-signup .wpcf7-form input[type="submit"] {
  /* Reset ALL defaults */
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  
  /* EXACT btn-medium styles */
  padding: var(--spacing-3) var(--spacing-10) !important;
  font-family: var(--font-primary) !important;
  font-size: var(--font-size-btn-medium) !important;
  font-weight: var(--font-weight-black) !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  transition: all 0.2s ease !important;
  background-color: var(--primary-700) !important;
  color: var(--gray-50) !important;
  border: none !important;
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  letter-spacing: var(--letter-spacing-wide) !important;
  
  /* Full width */
  width: 100%;
  margin-top: var(--spacing-3);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  position: relative;
}

/* Hover state - match btn-medium hover */
.hero-actions-signup .wpcf7-form input[type="submit"]:hover {
  background-color: var(--primary-500) !important;
  color: var(--gray-50) !important;
  border: none !important;
  transform: none !important;
}

/* Add arrow after submit button text */
.hero-actions-signup .wpcf7-form input[type="submit"]::after {
  content: " →";
  margin-left: var(--spacing-2);
  display: inline-block;
  font-size: 1.2em;
  transition: transform 0.2s ease;
}

.hero-actions-signup .wpcf7-form input[type="submit"]:hover::after {
  transform: translateX(4px);
}

/* Hide CF7 spinner */
.hero-actions-signup .wpcf7-spinner {
  display: none;
}

/* Fix any inherited styles */
.hero-actions-signup .wpcf7-form * {
  box-sizing: border-box;
}

/* ================================
   CF7 RESPONSIVE OVERRIDES
   These work with your existing breakpoints
   ================================ */


/* Match your existing 1024px breakpoint (line 1164) */
@media (max-width: 768px) {
  /* CF7 version - override grid to flex */
  .hero-actions-signup .wpcf7-form .form-fields-grid p {
    display: flex !important;
    gap: var(--spacing-3);
  }
  
  /* Make fields equal width in flex container */
  .hero-actions-signup .wpcf7-form .form-fields-grid .wpcf7-form-control-wrap {
    flex: 1;
    min-width: 0;
  }
}


/* Match your mobile breakpoint (line 1352) */
@media (max-width: 768px) {
  /* Stack CF7 grid to single column */
  .hero-actions-signup .wpcf7-form .form-fields-grid p {
    grid-template-columns: 1fr !important;
  }
  
  /* Adjust CF7 button on mobile */
  .hero-actions-signup .wpcf7-form input[type="submit"] {
    height: 50px !important;
    padding: var(--spacing-3) var(--spacing-4) !important;
  }
}

/* Match your 480px breakpoint (line 1742) */
@media (max-width: 480px) {
  /* CF7 specific adjustments for small mobile */
  .hero-actions-signup .wpcf7-form .form-fields-grid p {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--spacing-3) !important;
  }
  
  .hero-actions-signup .wpcf7-form .form-fields-grid .wpcf7-form-control-wrap {
    width: 100% !important;
    flex: none !important;
    min-width: 100% !important;
  }
  
  .hero-actions-signup .wpcf7-form input[type="text"],
  .hero-actions-signup .wpcf7-form input[type="email"],
  .hero-actions-signup .wpcf7-form input[type="tel"],
  .hero-actions-signup .wpcf7-form input[type="url"],
  .hero-actions-signup .wpcf7-form textarea,
  .hero-actions-signup .wpcf7-form select {
    font-size: var(--font-size-small);
  }
  
  .hero-actions-signup .wpcf7-form input[type="submit"] {
    padding: var(--spacing-3) !important;
    font-size: var(--font-size-small) !important;
    height: 50px !important;
    width: 100% !important;
    margin-top: var(--spacing-2) !important;
  }
  
  .hero-actions-signup .wpcf7-form input[type="text"],
  .hero-actions-signup .wpcf7-form input[type="email"],
  .hero-actions-signup .wpcf7-form input[type="tel"],
  .hero-actions-signup .wpcf7-form input[type="url"],
  .hero-actions-signup .wpcf7-form textarea,
  .hero-actions-signup .wpcf7-form select,
  .hero-actions-signup .wpcf7-form input[type="submit"] {
    margin: 0 0 var(--spacing-2) 0 !important;
  }
}

/* ================================
   CF7 VALIDATION & ERROR STYLING
   ================================ */

/* Error tip styling */
.hero-actions-signup .wpcf7-not-valid-tip {
  color: var(--tertiary-300, #D7B37D);
  font-size: var(--font-size-small);
  margin-top: 0.25rem;
  display: block;
}

/* Invalid field styling */
.hero-actions-signup .wpcf7-not-valid {
  border: 2px solid var(--tertiary-300, #D7B37D) !important;
}

/* Response messages */
.hero-actions-signup .wpcf7-response-output {
  margin: 1rem 0 0 0;
  padding: 0.75rem;
  border: 2px solid;
  text-align: center;
  font-size: var(--font-size-small);
  border-radius: 0;
}

.hero-actions-signup .wpcf7-mail-sent-ok {
  color: var(--primary-300);
  border-color: var(--primary-300);
  background: rgba(125, 188, 140, 0.1);
}

.hero-actions-signup .wpcf7-mail-sent-ng,
.hero-actions-signup .wpcf7-validation-errors,
.hero-actions-signup .wpcf7-spam-blocked {
  color: var(--tertiary-300);
  border-color: var(--tertiary-300);
  background: rgba(215, 179, 125, 0.1);
}

/* CF7 Loading state */
.hero-actions-signup .wpcf7-form.submitting input[type="submit"] {
  opacity: 0.7;
  cursor: not-allowed;
  position: relative;
}

.hero-actions-signup .wpcf7-form.submitting input[type="submit"]::after {
  display: none; /* Hide arrow during submit */
}

/* Privacy notice styling (works with CF7) */
.hero-actions-signup .wpcf7-form .privacy-notice {
  text-align: center;
  margin-top: var(--spacing-4);
}

.hero-actions-signup .wpcf7-form .privacy-notice p {
  font-size: 0.75rem;
  line-height: 1.5;
  margin: 0;
  color: inherit;
  opacity: 0.8;
}

.hero-actions-signup .wpcf7-form .privacy-notice a {
  color: var(--primary-300);
  text-decoration: underline;
  transition: color 0.2s ease;
}

.hero-actions-signup .wpcf7-form .privacy-notice a:hover {
  color: var(--primary-200);
}