:root {
        --text: #565656;
--links: #0c5eac;
--titles: #0e2b76;
--page-background: #ffffff;
--highlight: #043550;
--boxes-background: #ffffff;
--boxes-border: #CBD2DB;
--section-titles: #142E7B;
--section-titles-background: #F6F8FB;
--header-background: #0D2A4C;
--header-links: #FFFFFF;
--footer-background: #FFFFFF;
--footer-links: #0F79D0;
--titles-font-family: "Montserrat (Custom)", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--titles-h1-font-size: 1.8571rem;
--titles-h1-font-weight: 700;
--titles-h1-color: #0e2b76;
--titles-h2-font-size: 1.5714rem;
--titles-h2-font-weight: 700;
--titles-h2-color: #000000;
--titles-h3-font-size: 1.2857rem;
--titles-h3-font-weight: 700;
--titles-h3-color: #000000;
--texts-font-family: "", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--texts-primary-font-size: 1.0000rem;
--texts-primary-color: #565656;
--texts-secondary-font-size: 1.0000rem;
--texts-secondary-color: #565656;
--texts-link-color: #0c5eac;
    }
    
:root { --react-body-font-family: "", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

:root {
  /* =========================================
     THEME VARIABLES
  ========================================= */
  
  /* Typography */
  --font-base: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Brand / General */
  --color-white: #fff;

  /* Banner Component Colors */
  --banner-bg: #f0f0f0;
  --banner-text: #1b1b1b;
  --banner-link: #005ea2;
  --banner-link-hover: #1a4480;
  --banner-focus-ring: #2491ff;

  /* Beta Disclaimer Colors */
  --disclaimer-bg: #fff3cd;
  --disclaimer-border: #ffca28;
  --disclaimer-text: #7a5b00;
  --disclaimer-text-strong: #8a6d00;
  --disclaimer-link-hover: #5c3c00;
  --disclaimer-icon: #d97c00;
}

/* =========================================
   BASE STYLES
========================================= */
.stb-brand-text {
  color: var(--color-white);
  font-weight: bold;
  font-size: large;
  margin-left: 0.5em;
}

.ods-front-header__portal-brand__text {
  margin-left: 2px;
}

.ods-responsive-menu-collapsible--collapsed .ods-responsive-menu-collapsible__container {
  z-index: 9999;
}



/* =========================================
   1. BASE BANNER & HEADER LAYOUT
========================================= */
.usa-banner {
  font-family: var(--font-base);
  background-color: var(--banner-bg);
  color: var(--banner-text);
  font-size: 0.85rem;
  line-height: 1.5;
  padding-left: 2rem;
}

.usa-banner__header {
  padding: 0.5rem 0;
}

/* Treat the container as a standard block and left-align everything */
.usa-banner__inner {
  text-align: left;
}

/* Inline-flex keeps the flag and text neatly on the same line */
.usa-banner .grid-col-auto {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  vertical-align: middle;
}

/* Size the US flag */
.usa-banner__header-flag {
  width: 1.25rem;
  height: auto;
  display: block;
}

/* Remove default margins from header text */
.usa-banner__header-text {
  margin: 0;
}

/* Hide duplicate fallback text */
.usa-banner__header-action {
  display: none;
}

/* =========================================
   2. ACCORDION SUMMARY / "HERE'S HOW" LINK
========================================= */
/* Display inline keeps the summary next to the header text */
.usa-banner__accordion {
  display: inline;
}

/* Style the summary exactly like a link */
.usa-banner__accordion > summary {
  list-style: none; /* Hide default triangle */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  border: 0;
  background: none;
  padding: 0;
  margin-left: 0.5rem; /* Space between header text and link */
  color: var(--banner-link);
  text-decoration: underline;
  font-size: inherit;
}

/* Hide Safari/WebKit default marker */
.usa-banner__accordion > summary::-webkit-details-marker {
  display: none;
}

.usa-banner__accordion > summary:hover {
  color: var(--banner-link-hover);
}

/* Accessibility focus ring */
.usa-banner__accordion > summary:focus-visible {
  outline: 0.15rem solid var(--banner-focus-ring);
  outline-offset: 0.15rem;
  border-radius: 2px;
}

/* Downward Chevron Arrow */
.usa-banner__accordion > summary::after {
  content: "";
  display: inline-block;
  width: 0.35rem;
  height: 0.35rem;
  border-right: 0.1rem solid currentColor;
  border-bottom: 0.1rem solid currentColor;
  transform: translateY(-15%) rotate(45deg); /* Pointing down */
  margin-left: 0.35rem;
  transition: transform 0.2s ease;
}

/* Flip arrow up when open */
.usa-banner__accordion[open] > summary::after {
  transform: translateY(15%) rotate(225deg); /* Pointing up */
}

/* =========================================
   3. EXPANDED CONTENT LAYOUT
========================================= */
.usa-banner__content {
  display: block; /* Forces dropdown content to a new line natively */
  margin-top: 1rem;
  padding-top: 1rem;
}

/* Make the grid a flexbox to align columns horizontally */
.usa-banner__content .grid-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

/* Media block layout for the guidance columns (Icon Left, Text Right) */
.usa-banner__guidance {
  display: flex;
  align-items: flex-start;
  gap: 1rem; /* Space between large icon and text */
  flex: 1 1 25rem; /* Ensures they wrap on smaller mobile screens */
}

.usa-media-block__body {
  flex: 1; /* Allows text block to take up remaining space */
}

.usa-media-block__body p {
  margin: 0 0 0.5rem;
}

/* =========================================
   4. ICON SIZING (FIXES HUGE ICONS)
========================================= */
/* Guidance Column Icons (Bank and Secure Lock in a circle) */
.usa-banner__icon {
  width: 2.5rem;   /* Locks width to ~40px */
  height: 2.5rem;  /* Locks height to ~40px */
  flex-shrink: 0;  /* Prevents the icon from squishing */
  display: block;
}

/* Inline Black Lock Icon (Inside the text block) */
.icon-lock {
  display: inline-flex;
  align-items: center;
  vertical-align: baseline;
}

.usa-banner__lock-image {
  width: 0.85em;  /* Uses 'em' so it perfectly matches the text size */
  height: 0.85em; 
  fill: currentColor;
}

/* =========================================
   5. BETA DISCLAIMER
========================================= */
.beta-disclaimer {
  font-size: 0.85rem;
  background: var(--disclaimer-bg);
  color: var(--disclaimer-text);
  font-weight: 500;
  line-height: 1.5;
  padding: 10px 15px 10px 20px;
  border-left: 4px solid var(--disclaimer-border);
}

.beta-disclaimer strong {
  font-size: 0.9rem;
  text-transform: uppercase;
  color: var(--disclaimer-text-strong);
}

/* Minimal additions for icon alignment */
.beta-disclaimer .disclaimer-content {
  display: flex;
  align-items: flex-start;  /* aligns top of icon with first line of text */
  gap: 10px;                /* spacing between icon and text */
}

/* Masked icon — lets you control the color easily */
.beta-disclaimer .disclaimer-icon-mask {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  margin-top: 2px; /* aligns to first line baseline */
  background-color: var(--disclaimer-icon);
  -webkit-mask: url('https://s3.amazonaws.com/aws-ec2-us-east-1-opendatasoft-staticfileset/stb/theme_image/triangle-exclamation-solid-full.svg') no-repeat center / contain;
  mask: url('https://s3.amazonaws.com/aws-ec2-us-east-1-opendatasoft-staticfileset/stb/theme_image/triangle-exclamation-solid-full.svg') no-repeat center / contain;
}

.beta-disclaimer .disclaimer-content > div {
  min-width: 0; /* ensures long lines wrap correctly in flex */
}

/* Optional: link styling that matches your color scheme */
.beta-disclaimer a {
  color: var(--disclaimer-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.beta-disclaimer a:hover,
.beta-disclaimer a:focus {
  color: var(--disclaimer-link-hover);
  text-decoration-thickness: 2px;
}