/**
 * OVC Power Pages - Consolidated Stylesheet
 * Refactored from Figma export to eliminate redundant classes
 * 
 * Original: ~2335 lines with 241 classes (181 duplicates)
 * Consolidated: ~450 lines with semantic, reusable classes
 */

/* ============================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================ */
:root {
  /* Typography */
  --font-family-primary: 'Noto Sans', sans-serif;
  
  /* Brand Colors */
  --color-primary: rgba(64, 130, 89, 1);                     /* Lush Green - primary brand */
  --color-primary-dark: rgba(75, 134, 89, 1);                /* Darker green for SVG */
  --color-secondary: rgba(0, 60, 109, 1);                    /* Navy blue */
  --color-accent: rgba(195, 64, 98, 1);                      /* Pink/red accent */
  --color-deep-moss: rgba(40, 90, 70, 1);                    /* Deep Moss */
  --color-sage: rgba(180, 215, 192, 1);                      /* Sage */
  --color-light-green: rgba(240, 247, 240, 1);               /* Light Green */

  /* Secondary Colour Palette */
  --color-cerulean-blue: rgba(32, 127, 161, 1);              /* Cerulean Blue */
  --color-cerulean-blue-dark: rgba(0, 60, 109, 1);           /* Cerulean Blue Dark */
  --color-cerulean-blue-light: rgba(238, 245, 248, 1);       /* Cerulean Blue Light */
  --color-interim-magenta: rgba(195, 64, 98, 1);             /* Interim Magenta */
  --color-interim-magenta-dark: rgba(149, 16, 38, 1);        /* Interim Magenta Dark */
  --color-interim-magenta-light: rgba(252, 245, 247, 1);     /* Interim Magenta Light */
  --color-safety-cone-orange: rgba(216, 109, 32, 1);         /* Safety Cone Orange */
  --color-safety-cone-orange-dark: rgba(183, 64, 10, 1);     /* Safety Cone Orange Dark */
  --color-safety-cone-orange-light: rgba(252, 246, 242, 1);  /* Safety Cone Orange Light */
  
  /* Neutral Colors */
  --color-black: rgba(0, 0, 0, 1);
  --color-white: rgba(255, 255, 255, 1);
  --color-gray-dark: rgba(102, 102, 102, 1);
  --color-gray-light: rgba(214, 230, 217, 1);
  --color-cream: rgba(246, 247, 240, 1);
  
  /* Illustration Colors (for SVG graphics) */
  --color-svg-tan: rgba(195, 190, 165, 1);
  --color-svg-peach: rgba(232, 164, 128, 1);
  --color-svg-pink: rgba(238, 179, 166, 1);
  --color-svg-rose: rgba(230, 142, 155, 1);
  --color-svg-mauve: rgba(185, 50, 84, 1);
  --color-svg-brown: rgba(121, 75, 75, 1);
  --color-svg-brown-light: rgba(186, 125, 104, 1);
  --color-svg-blue: rgba(74, 118, 159, 1);
  --color-svg-orange: rgba(231, 142, 84, 1);
  --color-svg-magenta: rgba(199, 66, 100, 1);
  
  /* Layout */
  --container-max-width: 1440px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  
  /* Borders */
  --border-color-muted: rgba(172, 189, 162, 1);
  --border-radius-sm: 10px;
  --border-radius-full: 46px;
}

/* ============================================
   BASE RESET
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

/* ============================================
   TYPOGRAPHY - Text Colors
   Replaces: text-rgb-*, text-black, text-white
   ============================================ */
.text-primary {
  color: var(--color-primary);
}

.text-secondary {
  color: var(--color-secondary);
}

.text-accent {
  color: var(--color-accent);
}

.text-black {
  color: var(--color-black);
}

.text-white {
  color: var(--color-white);
}

.text-muted {
  color: var(--color-gray-dark);
}

.text-light {
  color: var(--color-gray-light);
}

.text-cream {
  color: var(--color-cream);
}

/* Legacy class aliases for backward compatibility */
.text-rgb-64-130-89 { color: var(--color-primary); }
.text-rgb-0-60-109 { color: var(--color-secondary); }
.text-rgb-102-102-102 { color: var(--color-gray-dark); }
.text-rgb-214-230-217 { color: var(--color-gray-light); }
.text-rgb-243-247-231 { color: var(--color-cream); }
.text-rgb-195-64-98 { color: var(--color-accent); }

/* ============================================
   TYPOGRAPHY - Text Sizes & Weights
   Replaces: text-218, text-224, text-227, p-bold, p-small, p-default
   ============================================ */
.text-sm {
  font-family: var(--font-family-primary);
  font-size: 12px;
  font-weight: normal;
  text-decoration: none;
  text-transform: none;
}

.text-base {
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-weight: normal;
  text-decoration: none;
  text-transform: none;
}

.text-md {
  font-family: var(--font-family-primary);
  font-size: 16px;
  font-weight: normal;
  text-decoration: none;
  text-transform: none;
}

.text-bold {
  font-weight: 700;
}

.text-normal {
  font-weight: normal;
}

/* Legacy aliases */
.p-small {
  font-family: var(--font-family-primary);
  font-size: 12px;
  font-weight: normal;
  color: var(--color-gray-light);
}

.p-default {
  font-family: var(--font-family-primary);
  font-size: 16px;
  font-weight: normal;
}

.p-bold {
  font-family: var(--font-family-primary);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-cream);
}

/* Consolidated text paragraph styles
   Replaces: text-218, text-224, text-227, text-166, text-199 */
.footer-text {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-weight: normal;
  text-decoration: none;
  text-transform: none;
}

/* ============================================
   FLEXBOX UTILITIES
   Replaces: 73 group-*, node-* classes
   ============================================ */

/* Base flex item (most common - used by group-*, node-*) */
.flex-item {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

/* Flex containers */
.flex-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

.flex-row-center {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.flex-row-baseline {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: baseline;
}

.flex-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.flex-col-center {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

/* Gap utilities */
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }

/* ============================================
   SVG ICON FILLS
   Replaces: 100+ path-* classes with fill colors
   ============================================ */

/* Base SVG path styling */
.svg-path {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  border: none;
  outline: none;
}

/* SVG fill colors */
.svg-fill-black { fill: var(--color-black); }
.svg-fill-white { fill: var(--color-white); }
.svg-fill-primary { fill: var(--color-primary-dark); }
.svg-fill-cream { fill: var(--color-cream); }
.svg-fill-accent { fill: var(--color-accent); }

/* Illustration-specific fills */
.svg-fill-tan { fill: var(--color-svg-tan); }
.svg-fill-peach { fill: var(--color-svg-peach); }
.svg-fill-pink { fill: var(--color-svg-pink); }
.svg-fill-rose { fill: var(--color-svg-rose); }
.svg-fill-mauve { fill: var(--color-svg-mauve); }
.svg-fill-brown { fill: var(--color-svg-brown); }
.svg-fill-brown-light { fill: var(--color-svg-brown-light); }
.svg-fill-blue { fill: var(--color-svg-blue); }
.svg-fill-orange { fill: var(--color-svg-orange); }
.svg-fill-magenta { fill: var(--color-svg-magenta); }

/* ============================================
   LAYOUT COMPONENTS
   Replaces: content-*, top-row-*, bottom-row-*, etc.
   ============================================ */

/* Main content wrapper 
   Replaces: content-148, content-181 */
.content-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl) 0;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

/* Page content area - ROW layout for two-column design
   Replaces: content-148 */
.page-content {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 32px;
  padding: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 93.75%;
}

/* Make a one column-layout instead of two-column layout on mobile */
@media (max-width: 600px) {
  .page-content {
    flex-direction: column;
    width: 100%;
  }
}

/* Sidebar layout columns
   Replaces: left-149, right-160, right-187 */
.sidebar-left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  padding: 24px 32px 24px 0px;
  flex-grow: 0;
  flex-shrink: 1;
}

.content-main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 0px 24px 0px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

/* Know Your Rights sidebar card */
.sidebar-left .flex-item {
  background-color: var(--color-cerulean-blue-light);
  border-radius: 12px;
  border: 1px solid var(--color-cerulean-blue);
  padding: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sidebar-left .alert-body {
  text-align: center;
}

.sidebar-left .btn.button1 {
  background-color: var(--color-primary);
  color: white;
  border: none;
  margin: auto !important;
}

.sidebar-left .btn.button1:hover {
  background-color: var(--color-deep-moss);
}

/* Row layouts 
   Replaces: top-row-182, bottom-row-228 */
.layout-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-lg);
  padding: 0;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
}

.layout-row-bordered {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg) 0;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
  border-top: 1px solid var(--border-color-muted);
}

/* ============================================
   FOOTER COMPONENTS
   Replaces: footer-177, logo-and-recognition-183, additional-links-*
   ============================================ */
.footer-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  border: none;
}

/* Footer content container */
.footer-content {
  display: flex;
  flex-direction: column;
  background-color: #108059;
  margin: 0;
  padding: 40px 24px;
  border: none !important;
  width: 100%;
}

/* Footer branding column (left) */
.footer-branding {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 24px 24px 0;
  border: none;
}

/* Footer links sections */
.footer-links-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 0 24px 24px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

/* Footer logo */
.footer-logo {
  flex-grow: 0;
  flex-shrink: 0;
  margin-bottom: 16px;
}

.footer-logo img {
  max-width: 200px;
  height: auto;
}

/* Heading with icon (Need support?) */
.heading-with-icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.heading-with-icon .icon-wrapper {
  flex-shrink: 0;
}

.heading-with-icon h2 {
  margin: 0;
  font-size: 16px;
}

/* Footer text styling */
.footer-text {
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-weight: normal;
  line-height: 1.5;
  margin: 0;
}

/* Footer link styling */
.footer-links-section a,
a.footer-text {
  color: var(--color-gray-light);
  text-decoration: underline;
}

.footer-links-section a:hover,
a.footer-text:hover {
  color: var(--color-white);
}

/* ============================================
   ICON & GRAPHIC CONTAINERS
   Replaces: icon-*, important-circle-*, large-icon-*
   ============================================ */
.icon-wrapper {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.icon-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.icon-container-padded {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: var(--spacing-xs) 0 0 0;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.icon-large {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

/* ============================================
   BUTTONS
   Replaces: buttons-133, button1, primary-button-*, tertiary-button-*, contrast-button-*
   ============================================ */
.btn-group-inline {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  padding: 0;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.btn-primary-custom {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

/* Need Support button - outline puck style */
.btn.btn-support,
a.btn-support {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background-color: var(--color-cream) !important;
  box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.5) !important;
  border-radius: 46px;
  text-decoration: none;
  font-weight: 500;
}

/* Fix text color inside Need Support button */
.btn.btn-support,
.btn.btn-support span,
.btn.btn-support .text-primary,
a.btn-support,
a.btn-support span {
  color: var(--color-primary) !important;
}

.btn.btn-support:hover,
a.btn-support:hover {
  background-color: var(--color-deep-moss) !important;
}

.btn.btn-support:hover,
.btn.btn-support:hover span,
.btn.btn-support:hover .text-primary,
a.btn-support:hover,
a.btn-support:hover span {
  color: var(--color-white) !important;
}

.btn.btn-support .icon-wrapper svg path {
  fill: var(--color-primary) !important;
}

.btn.btn-support:hover .icon-wrapper svg path {
  fill: var(--color-white) !important;
}

/* Quick Exit button - needs !important to override Bootstrap .btn */
.btn.btn-quick-exit,
a.btn-quick-exit {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.5);
  background-color: var(--color-safety-cone-orange-dark) !important;
  color: var(--color-white) !important;
  fill: var(--color-white);
  border-radius: 46px;
  text-decoration: none;
  font-weight: 600;
}

.btn.btn-quick-exit:hover,
a.btn-quick-exit:hover {
  background-color: var(--color-black) !important;
  border-color: var(--color-safety-cone-orange-dark) !important;
  color: var(--color-white) !important;
}

/* ============================================
   ALERTS & NOTIFICATIONS
   Four variants: info (blue), warning (orange), error (pink), success (green)
   ============================================ */

/* Base alert styling */
.alert-info,
.alert-warning,
.alert-error,
.alert-success,
.alert-162,
.alert-220 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: 16px 20px;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
  border-radius: var(--border-radius-sm);
  margin-bottom: 16px;
  color: var(--color-black);
  font-family: var(--font-family-primary);
  font-size: 14px;
  line-height: 1.5;
}

/* Info Alert - Blue (Cerulean) */
.alert-info {
  background-color: var(--color-cerulean-blue-light);
  border: 2px solid var(--color-cerulean-blue);
}

/* Warning Alert - Orange */
.alert-warning {
  background-color: var(--color-safety-cone-orange-light);
  border: 2px solid var(--color-safety-cone-orange);
}

/* Error Alert - Pink/Magenta */
.alert-error,
.alert-220 {
  background-color: var(--color-interim-magenta-light);
  border: 2px solid var(--color-interim-magenta);
}

/* Success Alert - Green */
.alert-success {
  background-color: var(--color-light-green);
  border: 2px solid var(--color-primary);
}

/* Alert icon container */
.alert-icon {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 0;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}

/* Alert body text container */
.alert-body {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  padding-top: 2px;
}

/* ============================================
   ALERT ICON CIRCLES
   Exclamation point icons in colored circles
   ============================================ */

/* Base circle icon styling */
.important-circle,
.important-circle-164,
.important-circle-221,
.icon-163,
.icon-165,
[class*="important-circle"] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Blue circle icon (info) */
.alert-info .important-circle,
.alert-info .important-circle-164,
.alert-info .important-circle-221,
.alert-info [class*="important-circle"],
.important-circle-info {
  background-color: var(--color-cerulean-blue);
}

/* Orange circle icon (warning) */
.alert-warning .important-circle,
.alert-warning .important-circle-164,
.alert-warning .important-circle-221,
.alert-warning [class*="important-circle"],
.important-circle-warning {
  background-color: var(--color-safety-cone-orange);
}

/* Pink/Magenta circle icon (error) */
.alert-error .important-circle,
.alert-error .important-circle-164,
.alert-error .important-circle-221,
.alert-error [class*="important-circle"],
.alert-220 .important-circle,
.alert-220 .important-circle-164,
.alert-220 .important-circle-221,
.important-circle-error {
  background-color: var(--color-interim-magenta);
}

/* Green circle icon (success) */
.alert-success .important-circle,
.alert-success .important-circle-164,
.alert-success .important-circle-221,
.alert-success [class*="important-circle"],
.important-circle-success {
  background-color: var(--color-primary);
}

/* Exclamation SVG inside circle - make it white */
.important-circle svg,
.important-circle-164 svg,
.important-circle-221 svg,
[class*="important-circle"] svg {
  width: 14px;
  height: 14px;
}

.important-circle svg path,
.important-circle-164 svg path,
.important-circle-221 svg path,
[class*="important-circle"] svg path {
  fill: var(--color-white) !important;
}

/* ============================================
   POWER PAGES FORM ALERT OVERRIDES
   Targets dynamically generated alert elements
   ============================================ */

/* Override default Power Pages validation styling */
.validation-summary,
.field-validation-error,
[data-name="validationmessage"] {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: 16px 20px;
  background-color: var(--color-interim-magenta-light);
  border: 2px solid var(--color-interim-magenta);
  border-radius: var(--border-radius-sm);
  margin-bottom: 16px;
}

/* Info/help text boxes in forms */
.info-box,
.help-block,
[class*="info-box"],
[class*="help-text"] {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: 16px 20px;
  background-color: var(--color-cerulean-blue-light);
  border: 2px solid var(--color-cerulean-blue);
  border-radius: var(--border-radius-sm);
  margin-bottom: 16px;
}

/* Links inside alerts */
.alert-info a,
.alert-warning a,
.alert-error a,
.alert-success a {
  color: var(--color-secondary);
  text-decoration: underline;
}

.alert-info a:hover,
.alert-warning a:hover,
.alert-error a:hover,
.alert-success a:hover {
  color: var(--color-black);
}

/* ============================================
   LANDING PAGE LAYOUT
   Replaces: landing-page-1, 1-getting-started-2
   ============================================ */
.page-landing {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  max-width: var(--container-max-width);
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.page-getting-started {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 53px;
  padding: 0;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  background-color: var(--color-cream);
}

/* ============================================
   FORM COMPONENTS
   ============================================ */
.crmEntityFormView {
  background-color: var(--color-white) !important;
}

.crmEntityFormView label {
  background-color: var(--color-white) !important;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
.sr-only {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.btn:focus-visible {
  outline: 2px solid var(--color-black) !important;
}

/* ============================================
   LEGACY CLASS ALIASES
   Maps old Figma class names to new semantic classes
   ============================================ */

/* Flex item aliases */
.group-1-7, .group-1-187, .group-2-17, .group-2-197,
.group-3-39, .group-4-41, .group-5-38, .group-6-44,
.node-6, .node-150, .node-185, .node-186 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

/* Icon container aliases */
.icon-137, .icon-152, .icon-163, .icon-165,
.icon-192, .icon-194, .icon-221, .icon-222, .icon-223 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.large-icon-rights-151 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

/* Heading aliases */
.heading-188, .heading-220 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: baseline;
  gap: var(--spacing-sm);
  padding: 0;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

/* Text aliases */
.text-166, .text-199 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.text-218, .text-224, .text-227 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-weight: normal;
  text-decoration: none;
  text-transform: none;
  color: var(--color-gray-light);
}

/* Button aliases */
.buttons-133 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  padding: 0;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.primary-button-158 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.tertiary-button-134 {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.contrast-button-139 {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.body-156 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.x-circle-222 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

/* ============================================
   RESPONSIVE - General
   ============================================ */
@media (max-width: 1440px) {
  .page-landing {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }
}

@media (max-width: 768px) {
  .page-landing {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }
}

/* ============================================
   FOOTER OVERRIDES & LAYOUT FIX
   Fixes for theme.css conflicts and column layout
   ============================================ */
footer .footer-bottom {
  background-color: #108059 !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

footer.footer {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: transparent !important;
}

footer img {
  display: block;
  border: none;
  margin: 0;
  padding: 0;
}

footer > img {
  margin-bottom: -1px;
}

.footer-content .container,
footer .footer-bottom .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================
   FOOTER THREE-COLUMN LAYOUT FIX
   Maximum specificity to override inline styles
   ============================================ */
.footer-bottom .container .row .footer-content .layout-row,
.footer-bottom .footer-content .layout-row,
.xrm-attribute-value .footer-content .layout-row,
div.footer-content div.layout-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 24px !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.footer-bottom .footer-content .layout-row > .footer-branding,
.xrm-attribute-value .footer-content .layout-row > .footer-branding,
div.footer-content div.layout-row > div.footer-branding,
.footer-content .layout-row > .footer-branding[style],
.footer-content .layout-row > .footer-branding[style*="50"] {
  width: 50% !important;
  flex: 0 0 50% !important;
  max-width: 50% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.footer-bottom .footer-content .layout-row > .footer-links-section:nth-child(2),
.xrm-attribute-value .footer-content .layout-row > .footer-links-section:nth-child(2),
div.footer-content div.layout-row > div.footer-links-section:nth-child(2),
.footer-content .layout-row > .footer-links-section[style*="30"] {
  width: 30% !important;
  flex: 0 0 30% !important;
  max-width: 30% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.footer-bottom .footer-content .layout-row > .footer-links-section:nth-child(3),
.footer-bottom .footer-content .layout-row > .footer-links-section:last-child,
.xrm-attribute-value .footer-content .layout-row > .footer-links-section:nth-child(3),
div.footer-content div.layout-row > div.footer-links-section:nth-child(3),
.footer-content .layout-row > .footer-links-section[style*="20"] {
  width: 20% !important;
  flex: 0 0 20% !important;
  max-width: 20% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Footer copyright row */
.footer-bottom .footer-content .layout-row-bordered,
.xrm-attribute-value .footer-content .layout-row-bordered,
div.footer-content div.layout-row-bordered {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 24px !important;
  padding: 24px 0 0 0 !important;
  margin-top: 24px !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* ============================================
   FOOTER RESPONSIVE
   ============================================ */
@media (max-width: 992px) {
  .footer-bottom .footer-content .layout-row,
  .xrm-attribute-value .footer-content .layout-row,
  div.footer-content div.layout-row {
    flex-wrap: wrap !important;
  }
  
  .footer-bottom .footer-content .layout-row > .footer-branding,
  .xrm-attribute-value .footer-content .layout-row > .footer-branding,
  div.footer-content div.layout-row > div.footer-branding,
  .footer-content .layout-row > .footer-branding[style] {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    margin-bottom: 24px !important;
  }
  
  .footer-bottom .footer-content .layout-row > .footer-links-section,
  .xrm-attribute-value .footer-content .layout-row > .footer-links-section,
  div.footer-content div.layout-row > div.footer-links-section,
  .footer-content .layout-row > .footer-links-section[style] {
    width: 48% !important;
    flex: 0 0 48% !important;
    max-width: 48% !important;
    border-left: none !important;
    padding-left: 0 !important;
  }
}

@media (max-width: 576px) {
  .footer-bottom .footer-content .layout-row > .footer-links-section,
  .xrm-attribute-value .footer-content .layout-row > .footer-links-section,
  div.footer-content div.layout-row > div.footer-links-section,
  .footer-content .layout-row > .footer-links-section[style] {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 24px !important;
  }
}