/* --- src/tokens/tokens.css --- */
/* ============================================
   Design System — Design Tokens
   ============================================
   Override these custom properties on your site
   to rebrand every component at once.
   ============================================ */

:root {
  /* --- Colors (aligned with DIR / dir.texas.gov) --- */
  --txds-color-primary:          #0073eb;
  --txds-color-primary-dark:     #00257d;
  --txds-color-primary-light:    #73b3e7;
  --txds-color-secondary:        #021a52;
  --txds-color-secondary-dark:   #010a20;
  --txds-color-accent-warm:      #ffc90c;
  --txds-color-accent-cool:      #00cbcf;

  /* DIRE numbered palette (from Figma) */
  /* Primary */
  --txds-color-primary-05:       #f9f9f9;
  --txds-color-primary-10:       #9db2ca;
  --txds-color-primary-50:       #486687;  /* base */
  --txds-color-primary-60:       #2a3d4e;
  --txds-color-primary-90:       #0e151c;
  /* Secondary (gold) */
  --txds-color-secondary-05:     #faf6ef;
  --txds-color-secondary-10:     #fff4df;
  --txds-color-secondary-50:     #ebb445;  /* base */
  --txds-color-secondary-60:     #b07f1c;
  --txds-color-secondary-90:     #372809;
  /* Status / Destructive */
  --txds-color-destructive-50:   #de6262;
  --txds-color-destructive-60:   #a64949;
  /* Tertiary */
  --txds-color-purple-50:        #9e60dd;
  --txds-color-purple-60:        #663399;
  --txds-color-teal-50:          #52bab3;
  --txds-color-light-blue-50:    #7cc1d3;
  --txds-color-blue-50:          #5f72bf;
  --txds-color-yellow-50:        #deca78;
  /* Texas brand colors (official site banner — do not modify) */
  --txds-color-tx-blue:          #20294f;
  --txds-color-tx-red:           #a82439;
  --txds-color-tx-white:         #ffffff;
  /* Internal Figma accent (sidebar headings) */
  --txds-color-primary-50-alt:   #4245ac;
  --txds-color-success-50:       #3a7a53;

  /* Feedback */
  --txds-color-success:          #008200;
  --txds-color-warning:          #ffc90c;
  --txds-color-error:            #d90000;
  --txds-color-info:             #00cbcf;

  /* Neutrals */
  --txds-color-white:            #ffffff;
  --txds-color-gray-lightest:    #f9fafb;
  --txds-color-gray-lighter:     #f0f0f0;
  --txds-color-gray-light:       #dfe1e2;
  --txds-color-gray:             #a9aeb1;
  --txds-color-gray-medium:      #71767a;
  --txds-color-gray-dark:        #565c65;
  --txds-color-gray-darker:      #3d4551;
  --txds-color-black:            #1b1b1b;

  /* DIRE numbered grayscale (from Figma) */
  --txds-color-gray-00:          #fafafa;
  --txds-color-gray-05:          #f8f8f7;
  --txds-color-gray-10:          #eeeeec;
  --txds-color-gray-20:          #e3e2e1;
  --txds-color-gray-30:          #c9c9c5;
  --txds-color-gray-40:          #a8a69d;
  --txds-color-gray-50:          #7b7976;
  --txds-color-gray-60:          #5b5a56;
  --txds-color-gray-70:          #403c37;
  --txds-color-gray-80:          #2b2926;

  /* DIR brand blues */
  --txds-color-navy:             #00257d;
  --txds-color-navy-dark:        #021a52;

  /* --- Typography --- */
  --txds-font-family:            'Geologica', Arial, Verdana, sans-serif;
  --txds-font-family-mono:       'Source Code Pro', 'Fira Code', monospace;
  --txds-font-family-header:     'Geologica', Arial, Verdana, sans-serif;

  /* Font weights */
  --txds-font-weight-extralight: 200;
  --txds-font-weight-light:      300;
  --txds-font-weight-normal:     400;
  --txds-font-weight-medium:     500;
  --txds-font-weight-semibold:   600;
  --txds-font-weight-bold:       700;
  --txds-font-weight-extrabold:  800;
  --txds-font-weight-black:      900;

  /* Desktop header scale */
  --txds-font-size-h1-poster:    104px;
  --txds-line-height-h1-poster:  112px;
  --txds-font-size-h1:           50px;
  --txds-line-height-h1:         52px;
  --txds-font-size-h2:           40px;
  --txds-line-height-h2:         44px;
  --txds-font-size-h3:           32px;
  --txds-line-height-h3:         38px;
  --txds-font-size-h4:           28px;
  --txds-line-height-h4:         32px;

  /* Body copy scale */
  --txds-font-size-body-xxl:     32px;
  --txds-line-height-body-xxl:   56px;
  --txds-font-size-body-xl:      24px;
  --txds-line-height-body-xl:    32px;
  --txds-font-size-body-lg:      20px;
  --txds-line-height-body-lg:    32px;
  --txds-font-size-body-lg-eb:   20px;
  --txds-line-height-body-lg-eb: 30px;
  --txds-font-size-body-md:      18px;
  --txds-line-height-body-md:    30px;
  --txds-font-size-body-sm:      16px;
  --txds-line-height-body-sm:    26px;
  --txds-font-size-body-sm-eb:   16px;
  --txds-line-height-body-sm-eb: 26px;
  --txds-font-size-caption:      12px;
  --txds-line-height-caption:    18px;

  /* Generic aliases (legacy) */
  --txds-font-size-xs:           0.75rem;    /* 12px */
  --txds-font-size-sm:           0.875rem;   /* 14px */
  --txds-font-size-base:         1rem;       /* 16px */
  --txds-font-size-md:           1.125rem;   /* 18px */
  --txds-font-size-lg:           1.375rem;   /* 22px */
  --txds-font-size-xl:           1.75rem;    /* 28px */
  --txds-font-size-2xl:          2.25rem;    /* 36px */
  --txds-line-height:            1.6;

  /* --- Spacing --- */
  --txds-space-1:                0.25rem;    /*  4px */
  --txds-space-2:                0.5rem;     /*  8px */
  --txds-space-3:                0.75rem;    /* 12px */
  --txds-space-4:                1rem;       /* 16px */
  --txds-space-5:                1.5rem;     /* 24px */
  --txds-space-6:                2rem;       /* 32px */
  --txds-space-7:                2.5rem;     /* 40px */
  --txds-space-8:                3rem;       /* 48px */
  --txds-space-9:                4rem;       /* 64px */
  --txds-space-10:               4.5rem;     /* 72px */
  --txds-space-11:               6rem;       /* 96px */

  /* --- Border --- */
  --txds-border-radius:          4px;
  --txds-border-radius-sm:       4px;
  --txds-border-radius-lg:       8px;
  --txds-border-radius-xxl:      36px;
  --txds-card-radius:            4px;
  --txds-button-radius:          4px;
  --txds-border-width:           1px;
  --txds-border-color:           var(--txds-color-gray-light);

  /* --- Shadows --- */
  --txds-shadow-sm:              0 1px 2px rgba(0, 0, 0, 0.05);
  --txds-shadow-md:              0 2px 8px rgba(0, 0, 0, 0.1);
  --txds-shadow-lg:              0 4px 16px rgba(0, 0, 0, 0.12);
  /* Figma elevation tokens */
  --txds-shadow-card:            0 12px 48px -12px rgba(32, 41, 79, 0.25);
  --txds-shadow-panel:           0 12px 48px 0 rgba(32, 41, 79, 0.25);
  --txds-shadow-header:          0 8px 8px -6px rgba(0, 0, 0, 0.25);
  --txds-shadow-input:           0 6px 24px -6px rgba(32, 41, 79, 0.25);

  /* --- Focus --- */
  --txds-focus-color:            #0073eb;
  --txds-focus-width:            2px;
  --txds-focus-offset:           2px;

  /* --- Motion --- */
  --snappy:                      0.3s ease-in-out;
  --normal:                      0.5s ease-in-out;
  --slow:                        0.8s ease-in-out;
}

/* --- Global Focus Utility ---
   Apply to any interactive element for consistent
   keyboard focus indicators per WCAG 2.2 & DIR standards. */
*:focus-visible {
  outline: var(--txds-focus-width) solid var(--txds-focus-color);
  outline-offset: var(--txds-focus-offset);
}

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

/* --- Form control typography baseline ---
   Ensures search/input text uses the design-system font across browsers,
   including Safari where search controls can keep native system styling. */
button,
input,
select,
textarea {
  font-family: var(--txds-font-family);
}

input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

/* --- Mobile typography overrides --- */
@media (max-width: 767px) {
  :root {
    --txds-font-size-h1-poster:  48px;
    --txds-line-height-h1-poster:56px;
    --txds-font-size-h1:         34px;
    --txds-line-height-h1:       40px;
    --txds-font-size-h2:         30px;
    --txds-line-height-h2:       36px;
    --txds-font-size-h3:         24px;
    --txds-line-height-h3:       30px;
    --txds-font-size-h4:         24px;
    --txds-line-height-h4:       30px;
  }
}


/* --- src/tokens/imagery/imagery.css --- */
/* ==========================================================================
   Imagery — Photo library & background pattern reference
   ========================================================================== */

/* ---------- Photo grid ---------- */
.txds-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.txds-photo-card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: var(--txds-color-gray-10, #f0efed);
  aspect-ratio: 3 / 2;
  box-shadow: var(--txds-shadow-card);
}

.txds-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.txds-photo-card__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.6);
  font-family: var(--txds-font-family-body, 'Geologica', sans-serif);
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Pattern grid ---------- */
.txds-pattern-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.txds-pattern-tile {
  width: min(250px, 100%);
  height: 160px;
  border-radius: 4px;
  border: 1px solid var(--txds-color-gray-20, #dcdbd8);
  overflow: hidden;
  position: relative;
}

.txds-pattern-tile__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4px 8px;
  font-family: var(--txds-font-family-body, 'Geologica', sans-serif);
  font-size: 11px;
  font-weight: 500;
  color: var(--txds-color-gray-60, #5b5956);
  background: rgba(255, 255, 255, 0.85);
  text-align: center;
}

/* ---------- Abstract wave patterns (CSS-generated) ---------- */
.txds-pattern--abstract-1 {
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 7px,
      var(--txds-color-gray-30, #c9c8c5) 7px,
      var(--txds-color-gray-30, #c9c8c5) 8px
    );
}

.txds-pattern--abstract-2 {
  background:
    repeating-linear-gradient(
      175deg,
      transparent,
      transparent 6px,
      var(--txds-color-gray-30, #c9c8c5) 6px,
      var(--txds-color-gray-30, #c9c8c5) 7px
    );
}

.txds-pattern--abstract-3 {
  background:
    radial-gradient(circle at 20% 30%, var(--txds-color-gray-20, #dcdbd8) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, var(--txds-color-gray-20, #dcdbd8) 0%, transparent 50%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 9px,
      var(--txds-color-gray-20, #dcdbd8) 9px,
      var(--txds-color-gray-20, #dcdbd8) 10px
    );
}

.txds-pattern--abstract-4 {
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 5px,
      rgba(0, 27, 116, 0.06) 5px,
      rgba(0, 27, 116, 0.06) 6px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 5px,
      rgba(0, 27, 116, 0.06) 5px,
      rgba(0, 27, 116, 0.06) 6px
    );
}

.txds-pattern--abstract-5 {
  background:
    repeating-conic-gradient(
      var(--txds-color-gray-10, #f0efed) 0% 25%,
      transparent 0% 50%
    ) 0 0 / 20px 20px;
}

/* ---------- Minimal wave patterns ---------- */
.txds-pattern--minimal-1 {
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 8px,
    var(--txds-color-gray-30, #c9c8c5) 8px,
    var(--txds-color-gray-30, #c9c8c5) 9px,
    transparent 9px,
    transparent 12px,
    var(--txds-color-gray-30, #c9c8c5) 12px,
    var(--txds-color-gray-30, #c9c8c5) 13px
  );
}

.txds-pattern--minimal-2 {
  background:
    linear-gradient(135deg, var(--txds-color-gray-20, #dcdbd8) 25%, transparent 25%) -6px 0 / 12px 12px,
    linear-gradient(225deg, var(--txds-color-gray-20, #dcdbd8) 25%, transparent 25%) -6px 0 / 12px 12px,
    linear-gradient(315deg, var(--txds-color-gray-20, #dcdbd8) 25%, transparent 25%) 0 0 / 12px 12px,
    linear-gradient(45deg, var(--txds-color-gray-20, #dcdbd8) 25%, transparent 25%) 0 0 / 12px 12px;
  background-color: #fff;
}

.txds-pattern--minimal-3 {
  background:
    radial-gradient(circle, var(--txds-color-gray-30, #c9c8c5) 1px, transparent 1px) 0 0 / 12px 12px;
}

.txds-pattern--minimal-4 {
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 14px,
      var(--txds-color-gray-20, #dcdbd8) 14px,
      var(--txds-color-gray-20, #dcdbd8) 15px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 14px,
      var(--txds-color-gray-20, #dcdbd8) 14px,
      var(--txds-color-gray-20, #dcdbd8) 15px
    );
}

.txds-pattern--minimal-5 {
  background:
    linear-gradient(45deg, var(--txds-color-gray-20, #dcdbd8) 12.5%, transparent 12.5%, transparent 50%, var(--txds-color-gray-20, #dcdbd8) 50%, var(--txds-color-gray-20, #dcdbd8) 62.5%, transparent 62.5%) 0 0 / 16px 16px;
}

/* ---------- Modern geometric patterns ---------- */
.txds-pattern--modern-1 {
  background:
    radial-gradient(ellipse at 70% 30%, rgba(66, 69, 172, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse at 0% 100%, rgba(0, 27, 116, 0.12) 0%, transparent 60%),
    linear-gradient(135deg, #fff 0%, #f0f0f8 100%);
}

.txds-pattern--modern-2 {
  background:
    repeating-conic-gradient(
      var(--txds-color-gray-10, #f0efed) 0% 25%,
      #fff 0% 50%
    ) 0 0 / 12px 12px;
}

.txds-pattern--modern-3 {
  background: linear-gradient(180deg, #f8f8f7 0%, #21433a 100%);
}

.txds-pattern--modern-4 {
  background:
    linear-gradient(135deg, rgba(66, 69, 172, 0.05) 25%, transparent 25%) 0 0 / 40px 40px,
    linear-gradient(225deg, rgba(66, 69, 172, 0.05) 25%, transparent 25%) 0 0 / 40px 40px,
    linear-gradient(315deg, rgba(66, 69, 172, 0.05) 25%, transparent 25%) 0 0 / 40px 40px,
    linear-gradient(45deg, rgba(66, 69, 172, 0.05) 25%, transparent 25%) 0 0 / 40px 40px,
    #fff;
}

.txds-pattern--modern-5 {
  background: linear-gradient(160deg, #001b74 0%, #4245ac 50%, #c9c8c5 100%);
}

/* ---------- Category heading ---------- */
.txds-imagery-category {
  font-family: var(--txds-font-family-body, 'Geologica', sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--txds-color-gray-70, #403c37);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 4px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--txds-color-primary-50-alt, #4245ac);
}

/* ---------- Photo placeholder (when real images unavailable) ---------- */
.txds-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--txds-color-gray-10, #f0efed);
  font-family: var(--txds-font-family-body, 'Geologica', sans-serif);
  font-size: 12px;
  font-weight: 500;
  color: var(--txds-color-gray-50, #726e69);
  text-align: center;
  padding: 8px;
}


/* --- src/utilities/layout-grid.css --- */
/* ============================================
   Utility: Layout Grid (.txds-*)
   12-column responsive utility grid inspired
   by USWDS layout-grid behavior.
   ============================================ */

:root {
  --txds-grid-columns: 12;
  --txds-grid-gutter-x: var(--txds-space-5);
  --txds-grid-gutter-y: var(--txds-space-5);
  --txds-container-max: 1200px;
  --txds-container-padding: var(--txds-space-6);
}

.txds-container,
.txds-container-fluid {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--txds-container-padding);
  padding-right: var(--txds-container-padding);
}

.txds-container {
  max-width: var(--txds-container-max);
}

.txds-grid-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--txds-grid-gutter-x) * -0.5);
  margin-right: calc(var(--txds-grid-gutter-x) * -0.5);
  margin-top: calc(var(--txds-grid-gutter-y) * -0.5);
  margin-bottom: calc(var(--txds-grid-gutter-y) * -0.5);
}

.txds-grid-row > * {
  width: 100%;
  max-width: 100%;
  padding-left: calc(var(--txds-grid-gutter-x) * 0.5);
  padding-right: calc(var(--txds-grid-gutter-x) * 0.5);
  padding-top: calc(var(--txds-grid-gutter-y) * 0.5);
  padding-bottom: calc(var(--txds-grid-gutter-y) * 0.5);
}

.txds-col {
  flex: 1 0 0%;
}

.txds-col-auto {
  flex: 0 0 auto;
  width: auto;
}

.txds-col-fill {
  flex: 1 1 0%;
  width: auto;
}

.txds-col-1 { flex: 0 0 auto; width: 8.333333%; }
.txds-col-2 { flex: 0 0 auto; width: 16.666667%; }
.txds-col-3 { flex: 0 0 auto; width: 25%; }
.txds-col-4 { flex: 0 0 auto; width: 33.333333%; }
.txds-col-5 { flex: 0 0 auto; width: 41.666667%; }
.txds-col-6 { flex: 0 0 auto; width: 50%; }
.txds-col-7 { flex: 0 0 auto; width: 58.333333%; }
.txds-col-8 { flex: 0 0 auto; width: 66.666667%; }
.txds-col-9 { flex: 0 0 auto; width: 75%; }
.txds-col-10 { flex: 0 0 auto; width: 83.333333%; }
.txds-col-11 { flex: 0 0 auto; width: 91.666667%; }
.txds-col-12 { flex: 0 0 auto; width: 100%; }

.txds-offset-1 { margin-left: 8.333333%; }
.txds-offset-2 { margin-left: 16.666667%; }
.txds-offset-3 { margin-left: 25%; }
.txds-offset-4 { margin-left: 33.333333%; }
.txds-offset-5 { margin-left: 41.666667%; }
.txds-offset-6 { margin-left: 50%; }
.txds-offset-7 { margin-left: 58.333333%; }
.txds-offset-8 { margin-left: 66.666667%; }
.txds-offset-9 { margin-left: 75%; }
.txds-offset-10 { margin-left: 83.333333%; }
.txds-offset-11 { margin-left: 91.666667%; }
.txds-offset-0 { margin-left: 0; }

.txds-gx-0 { --txds-grid-gutter-x: 0; }
.txds-gx-1 { --txds-grid-gutter-x: var(--txds-space-1); }
.txds-gx-2 { --txds-grid-gutter-x: var(--txds-space-2); }
.txds-gx-3 { --txds-grid-gutter-x: var(--txds-space-3); }
.txds-gx-4 { --txds-grid-gutter-x: var(--txds-space-4); }
.txds-gx-5 { --txds-grid-gutter-x: var(--txds-space-5); }
.txds-gx-6 { --txds-grid-gutter-x: var(--txds-space-6); }

.txds-gy-0 { --txds-grid-gutter-y: 0; }
.txds-gy-1 { --txds-grid-gutter-y: var(--txds-space-1); }
.txds-gy-2 { --txds-grid-gutter-y: var(--txds-space-2); }
.txds-gy-3 { --txds-grid-gutter-y: var(--txds-space-3); }
.txds-gy-4 { --txds-grid-gutter-y: var(--txds-space-4); }
.txds-gy-5 { --txds-grid-gutter-y: var(--txds-space-5); }
.txds-gy-6 { --txds-grid-gutter-y: var(--txds-space-6); }

.txds-order-first { order: -1; }
.txds-order-last { order: 99; }
.txds-order-0 { order: 0; }
.txds-order-1 { order: 1; }
.txds-order-2 { order: 2; }
.txds-order-3 { order: 3; }

@media (min-width: 480px) {
  .txds-col-sm-auto { flex: 0 0 auto; width: auto; }
  .txds-col-sm-fill { flex: 1 1 0%; width: auto; }
  .txds-col-sm-1 { flex: 0 0 auto; width: 8.333333%; }
  .txds-col-sm-2 { flex: 0 0 auto; width: 16.666667%; }
  .txds-col-sm-3 { flex: 0 0 auto; width: 25%; }
  .txds-col-sm-4 { flex: 0 0 auto; width: 33.333333%; }
  .txds-col-sm-5 { flex: 0 0 auto; width: 41.666667%; }
  .txds-col-sm-6 { flex: 0 0 auto; width: 50%; }
  .txds-col-sm-7 { flex: 0 0 auto; width: 58.333333%; }
  .txds-col-sm-8 { flex: 0 0 auto; width: 66.666667%; }
  .txds-col-sm-9 { flex: 0 0 auto; width: 75%; }
  .txds-col-sm-10 { flex: 0 0 auto; width: 83.333333%; }
  .txds-col-sm-11 { flex: 0 0 auto; width: 91.666667%; }
  .txds-col-sm-12 { flex: 0 0 auto; width: 100%; }

  .txds-offset-sm-0 { margin-left: 0; }
  .txds-offset-sm-1 { margin-left: 8.333333%; }
  .txds-offset-sm-2 { margin-left: 16.666667%; }
  .txds-offset-sm-3 { margin-left: 25%; }
  .txds-offset-sm-4 { margin-left: 33.333333%; }
  .txds-offset-sm-5 { margin-left: 41.666667%; }
  .txds-offset-sm-6 { margin-left: 50%; }
  .txds-offset-sm-7 { margin-left: 58.333333%; }
  .txds-offset-sm-8 { margin-left: 66.666667%; }
  .txds-offset-sm-9 { margin-left: 75%; }
  .txds-offset-sm-10 { margin-left: 83.333333%; }
  .txds-offset-sm-11 { margin-left: 91.666667%; }
}

@media (min-width: 640px) {
  .txds-col-md-auto { flex: 0 0 auto; width: auto; }
  .txds-col-md-fill { flex: 1 1 0%; width: auto; }
  .txds-col-md-1 { flex: 0 0 auto; width: 8.333333%; }
  .txds-col-md-2 { flex: 0 0 auto; width: 16.666667%; }
  .txds-col-md-3 { flex: 0 0 auto; width: 25%; }
  .txds-col-md-4 { flex: 0 0 auto; width: 33.333333%; }
  .txds-col-md-5 { flex: 0 0 auto; width: 41.666667%; }
  .txds-col-md-6 { flex: 0 0 auto; width: 50%; }
  .txds-col-md-7 { flex: 0 0 auto; width: 58.333333%; }
  .txds-col-md-8 { flex: 0 0 auto; width: 66.666667%; }
  .txds-col-md-9 { flex: 0 0 auto; width: 75%; }
  .txds-col-md-10 { flex: 0 0 auto; width: 83.333333%; }
  .txds-col-md-11 { flex: 0 0 auto; width: 91.666667%; }
  .txds-col-md-12 { flex: 0 0 auto; width: 100%; }

  .txds-offset-md-0 { margin-left: 0; }
  .txds-offset-md-1 { margin-left: 8.333333%; }
  .txds-offset-md-2 { margin-left: 16.666667%; }
  .txds-offset-md-3 { margin-left: 25%; }
  .txds-offset-md-4 { margin-left: 33.333333%; }
  .txds-offset-md-5 { margin-left: 41.666667%; }
  .txds-offset-md-6 { margin-left: 50%; }
  .txds-offset-md-7 { margin-left: 58.333333%; }
  .txds-offset-md-8 { margin-left: 66.666667%; }
  .txds-offset-md-9 { margin-left: 75%; }
  .txds-offset-md-10 { margin-left: 83.333333%; }
  .txds-offset-md-11 { margin-left: 91.666667%; }
}

@media (min-width: 1024px) {
  .txds-col-lg-auto { flex: 0 0 auto; width: auto; }
  .txds-col-lg-fill { flex: 1 1 0%; width: auto; }
  .txds-col-lg-1 { flex: 0 0 auto; width: 8.333333%; }
  .txds-col-lg-2 { flex: 0 0 auto; width: 16.666667%; }
  .txds-col-lg-3 { flex: 0 0 auto; width: 25%; }
  .txds-col-lg-4 { flex: 0 0 auto; width: 33.333333%; }
  .txds-col-lg-5 { flex: 0 0 auto; width: 41.666667%; }
  .txds-col-lg-6 { flex: 0 0 auto; width: 50%; }
  .txds-col-lg-7 { flex: 0 0 auto; width: 58.333333%; }
  .txds-col-lg-8 { flex: 0 0 auto; width: 66.666667%; }
  .txds-col-lg-9 { flex: 0 0 auto; width: 75%; }
  .txds-col-lg-10 { flex: 0 0 auto; width: 83.333333%; }
  .txds-col-lg-11 { flex: 0 0 auto; width: 91.666667%; }
  .txds-col-lg-12 { flex: 0 0 auto; width: 100%; }

  .txds-offset-lg-0 { margin-left: 0; }
  .txds-offset-lg-1 { margin-left: 8.333333%; }
  .txds-offset-lg-2 { margin-left: 16.666667%; }
  .txds-offset-lg-3 { margin-left: 25%; }
  .txds-offset-lg-4 { margin-left: 33.333333%; }
  .txds-offset-lg-5 { margin-left: 41.666667%; }
  .txds-offset-lg-6 { margin-left: 50%; }
  .txds-offset-lg-7 { margin-left: 58.333333%; }
  .txds-offset-lg-8 { margin-left: 66.666667%; }
  .txds-offset-lg-9 { margin-left: 75%; }
  .txds-offset-lg-10 { margin-left: 83.333333%; }
  .txds-offset-lg-11 { margin-left: 91.666667%; }
}

@media (min-width: 1200px) {
  .txds-col-xl-auto { flex: 0 0 auto; width: auto; }
  .txds-col-xl-fill { flex: 1 1 0%; width: auto; }
  .txds-col-xl-1 { flex: 0 0 auto; width: 8.333333%; }
  .txds-col-xl-2 { flex: 0 0 auto; width: 16.666667%; }
  .txds-col-xl-3 { flex: 0 0 auto; width: 25%; }
  .txds-col-xl-4 { flex: 0 0 auto; width: 33.333333%; }
  .txds-col-xl-5 { flex: 0 0 auto; width: 41.666667%; }
  .txds-col-xl-6 { flex: 0 0 auto; width: 50%; }
  .txds-col-xl-7 { flex: 0 0 auto; width: 58.333333%; }
  .txds-col-xl-8 { flex: 0 0 auto; width: 66.666667%; }
  .txds-col-xl-9 { flex: 0 0 auto; width: 75%; }
  .txds-col-xl-10 { flex: 0 0 auto; width: 83.333333%; }
  .txds-col-xl-11 { flex: 0 0 auto; width: 91.666667%; }
  .txds-col-xl-12 { flex: 0 0 auto; width: 100%; }

  .txds-offset-xl-0 { margin-left: 0; }
  .txds-offset-xl-1 { margin-left: 8.333333%; }
  .txds-offset-xl-2 { margin-left: 16.666667%; }
  .txds-offset-xl-3 { margin-left: 25%; }
  .txds-offset-xl-4 { margin-left: 33.333333%; }
  .txds-offset-xl-5 { margin-left: 41.666667%; }
  .txds-offset-xl-6 { margin-left: 50%; }
  .txds-offset-xl-7 { margin-left: 58.333333%; }
  .txds-offset-xl-8 { margin-left: 66.666667%; }
  .txds-offset-xl-9 { margin-left: 75%; }
  .txds-offset-xl-10 { margin-left: 83.333333%; }
  .txds-offset-xl-11 { margin-left: 91.666667%; }
}

@media (max-width: 767px) {
  :root {
    --txds-container-padding: var(--txds-space-4);
  }
}

/* --- src/components/accordion/accordion.css --- */
/* ============================================
   Component: Accordion  (.txds-accordion)
   ============================================ */

.txds-accordion {
  font-family: var(--txds-font-family);
}

.txds-accordion__item {
  border-bottom: 1px solid var(--txds-color-gray-30);
}

/* --- Header button (title row) --- */
.txds-accordion__button {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  padding: 32px 24px;
  background: none;
  border: none;
  font-family: var(--txds-font-family);
  font-size: var(--txds-font-size-h5, 24px);
  font-weight: var(--txds-font-weight-bold);
  line-height: var(--txds-line-height-h5, 30px);
  color: var(--txds-color-primary-60);
  cursor: pointer;
  text-align: left;
  transition: background-color var(--snappy, 0.3s ease-in-out);
}

.txds-accordion__button:hover {
  background-color: var(--txds-color-gray-05);
}

.txds-accordion__button:focus-visible {
  outline: 2px solid var(--txds-color-primary-50);
  outline-offset: -2px;
}

.txds-accordion__button::after {
  content: "+";
  font-size: var(--txds-font-size-h5, 24px);
  font-weight: var(--txds-font-weight-bold);
  color: var(--txds-color-primary-60);
  flex-shrink: 0;
  margin-left: 16px;
  line-height: var(--txds-line-height-h5, 30px);
}

.txds-accordion__button[aria-expanded="true"]::after {
  content: "\2212";
}

/* --- Collapsible content panel --- */
.txds-accordion__content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  overflow: hidden;
  height: 0;
  opacity: 0;
  padding: 0 24px;
  transition:
    height var(--normal, 0.5s ease-in-out),
    opacity var(--normal, 0.5s ease-in-out),
    padding-top var(--normal, 0.5s ease-in-out),
    padding-bottom var(--normal, 0.5s ease-in-out);
}

.txds-accordion__content[aria-hidden="false"],
.txds-accordion__content.txds-accordion__content--open {
  opacity: 1;
  padding-top: 8px;
  padding-bottom: 32px;
}

/* --- Content body text --- */
.txds-accordion__text {
  font-family: var(--txds-font-family);
  font-size: var(--txds-font-size-body-lg, 20px);
  font-weight: var(--txds-font-weight-normal);
  line-height: var(--txds-line-height-body-lg, 32px);
  color: var(--txds-color-gray-70);
  margin: 0;
}

/* --- Contact detail rows --- */
.txds-accordion__details {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 104px;
}

.txds-accordion__detail {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.txds-accordion__detail-label {
  font-family: var(--txds-font-family);
  font-size: var(--txds-font-size-body-sm-eb, 16px);
  font-weight: var(--txds-font-weight-extrabold);
  line-height: normal;
  color: var(--txds-color-gray-70);
  margin: 0;
}

.txds-accordion__detail-value {
  font-family: var(--txds-font-family);
  font-size: var(--txds-font-size-body-sm-eb, 16px);
  font-weight: var(--txds-font-weight-extrabold);
  line-height: var(--txds-line-height-body-sm-eb, 26px);
  margin: 0;
}

.txds-accordion__detail-value a {
  color: var(--txds-color-primary-50);
  text-decoration: underline;
}

/* --- Bordered variant --- */
.txds-accordion--bordered .txds-accordion__button {
  border-left: 4px solid var(--txds-color-primary-50-alt, #4245ac);
}

@media (max-width: 767px) {
  .txds-accordion__button {
    font-size: var(--txds-font-size-body-lg, 20px);
    line-height: 26px;
    padding: 24px 16px;
  }
  .txds-accordion__content {
    padding: 0 16px;
  }
  .txds-accordion__content[aria-hidden="false"],
  .txds-accordion__content.txds-accordion__content--open {
    padding-bottom: 24px;
  }
  .txds-accordion__details {
    gap: 24px 48px;
  }
}


/* --- src/components/alert/alert.css --- */
/* ============================================
   Component: Alert Banner  (.txds-alert-banner)
   Texas Design System
   Global banner bar at the top of the page.
   Variants: Danger / Warning / Information × Filled / Open
   ============================================ */

.txds-alert-banner {
  font-family: var(--txds-font-family);
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  column-gap: 16px;
  min-height: 72px;
  padding: 16px 24px;
  width: 100%;
}

.txds-alert-banner[hidden] {
  display: none !important;
}

/* ---- Icon ---- */
.txds-alert-banner__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  color: currentColor;
  font-size: 20px;
  font-weight: var(--txds-font-weight-extrabold);
  line-height: 1;
}

.txds-alert-banner__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.txds-alert-banner__icon i {
  font-size: 24px;
  line-height: 1;
}

/* ---- Text ---- */
.txds-alert-banner__text {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: var(--txds-font-weight-extrabold);
  line-height: 24px;
  letter-spacing: 0.4px;
  margin: 0;
}

/* ---- Dismiss button ---- */
.txds-alert-banner__close {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  font-size: 30px;
  font-weight: var(--txds-font-weight-bold);
  line-height: 1;
}

/* ==============================
   FILLED style (default)
   ============================== */

/* Danger — Filled */
.txds-alert-banner--danger {
  background: var(--txds-color-destructive-60);
  color: var(--txds-color-gray-05);
  border: var(--txds-border-width, 1px) solid var(--txds-color-destructive-50);
}
.txds-alert-banner--danger .txds-alert-banner__text {
  color: var(--txds-color-gray-05);
}

/* Warning — Filled */
.txds-alert-banner--warning {
  background: var(--txds-color-yellow-50);
  color: var(--txds-color-primary-60);
  border: var(--txds-border-width, 1px) solid var(--txds-color-secondary-60);
}
.txds-alert-banner--warning .txds-alert-banner__text {
  color: var(--txds-color-primary-60);
}

/* Information — Filled */
.txds-alert-banner--information {
  background: var(--txds-color-primary-60);
  color: var(--txds-color-gray-05);
  border: var(--txds-border-width, 1px) solid var(--txds-color-primary-50);
}
.txds-alert-banner--information .txds-alert-banner__text {
  color: var(--txds-color-gray-05);
}

/* ==============================
   OPEN style (accent left border + neutral outline)
   ============================== */

.txds-alert-banner--open {
  background: transparent;
  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
}

.txds-alert-banner--open {
  color: var(--txds-color-gray-70);
}
.txds-alert-banner--open .txds-alert-banner__text {
  color: var(--txds-color-gray-70);
}

/* State icon matches the accent/border color per variant */
.txds-alert-banner--danger.txds-alert-banner--open {
  border: 0 !important;
}
.txds-alert-banner--danger.txds-alert-banner--open .txds-alert-banner__icon {
  color: var(--txds-color-destructive-60);
}

.txds-alert-banner--warning.txds-alert-banner--open {
  border: 0 !important;
}
.txds-alert-banner--warning.txds-alert-banner--open .txds-alert-banner__icon {
  color: var(--txds-color-primary-60);
}

.txds-alert-banner--information.txds-alert-banner--open {
  border: 0 !important;
}
.txds-alert-banner--information.txds-alert-banner--open .txds-alert-banner__icon {
  color: var(--txds-color-primary-60);
}

/* ---- Mobile ---- */
@media (max-width: 767px) {
  .txds-alert-banner {
    padding: 12px 24px;
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    column-gap: 12px;
    min-height: 64px;
  }

  .txds-alert-banner__icon,
  .txds-alert-banner__close {
    width: 32px;
    height: 32px;
  }
}


/* --- src/components/benefits/benefits.css --- */
/* ============================================
   Component: Benefits  (.txds-benefits)
   "What we do" blocks with icon, title,
   and description. Vertical and horizontal.
   ============================================ */

.txds-benefits {
  font-family: var(--txds-font-family);
}

/* --- Single benefit item --- */
.txds-benefit {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
}

.txds-benefit__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--txds-color-gray-70);
}
.txds-benefit__icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.txds-benefit__icon i {
  font-size: 24px;
  line-height: 1;
}

.txds-benefit__title {
  font-family: var(--txds-font-family-header);
  font-size: var(--txds-font-size-h4);
  font-weight: var(--txds-font-weight-bold);
  line-height: var(--txds-line-height-h4);
  color: var(--txds-color-gray-70);
  margin: 0;
}

.txds-benefit__text {
  font-size: var(--txds-font-size-body-md);
  line-height: var(--txds-line-height-body-md);
  color: var(--txds-color-gray-70);
  margin: 0;
}

/* --- Horizontal variant --- */
.txds-benefit--horizontal {
  flex-direction: row;
  gap: 24px;
  padding: 0;
}
.txds-benefit--horizontal .txds-benefit__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- Benefits grid --- */
.txds-benefits__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 32px;
}

/* --- Section with left border title --- */
.txds-benefits__section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-right: 1px solid var(--txds-color-gray-30);
  padding-right: 16px;
}

.txds-benefits__heading {
  font-family: var(--txds-font-family-header);
  font-size: var(--txds-font-size-h3);
  font-weight: var(--txds-font-weight-bold);
  line-height: var(--txds-line-height-h3);
  color: var(--txds-color-gray-80);
  margin: 0;
  padding-left: 16px;
  border-left: 8px solid var(--txds-color-blue-50);
}

@media (max-width: 767px) {
  .txds-benefits__grid {
    grid-template-columns: 1fr;
  }
  .txds-benefit--horizontal {
    flex-direction: column;
    gap: 16px;
  }
  .txds-benefits__section {
    border-right: none;
    padding-right: 0;
  }
}


/* --- src/components/branding/branding.css --- */
/* ============================================
   Component: Branding  (.txds-branding)
   Texas Design System
   Agency logo placeholder in circular format.
   Variants: Full Color (filled) / One Color Blue (outline)
   ============================================ */

.txds-branding {
  font-family: var(--txds-font-family-header);
  width: 327px;
  height: 317px;
  position: relative;
  overflow: hidden;
}

.txds-branding__circle {
  position: absolute;
  inset: 0.32% 1.83%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 1000px;
}

.txds-branding__label {
  font-size: var(--txds-font-size-h2);
  font-weight: var(--txds-font-weight-semibold);
  line-height: var(--txds-line-height-h2);
  white-space: nowrap;
}

/* ---- Full Color variant (default) ---- */
.txds-branding--full-color .txds-branding__circle {
  background: var(--txds-color-primary-50);
}

.txds-branding--full-color .txds-branding__label {
  color: var(--txds-color-gray-05);
}

/* ---- One Color Blue variant ---- */
.txds-branding--one-color .txds-branding__circle {
  background: transparent;
  border: 1px solid var(--txds-color-primary-60);
}

.txds-branding--one-color .txds-branding__label {
  color: var(--txds-color-primary-60);
}

/* ---- Smaller sizes ---- */
.txds-branding--sm {
  width: 178px;
  height: 174px;
}

.txds-branding--sm .txds-branding__label {
  font-size: 24px;
  line-height: 28px;
}


/* --- src/components/breadcrumb/breadcrumb.css --- */
/* ============================================
   Component: Breadcrumb  (.txds-breadcrumb)
   ============================================ */

.txds-breadcrumb {
  font-family: var(--txds-font-family);
  padding: var(--txds-space-3) 0;
}

.txds-breadcrumb__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--txds-space-2, 8px);
  margin: 0;
  padding: 0;
}

.txds-breadcrumb__item {
  display: flex;
  align-items: center;
  font-size: var(--txds-font-size-body-sm, 16px);
}

.txds-breadcrumb__item:not(:last-child)::after {
  content: "›";
  margin-left: var(--txds-space-1);
  color: var(--txds-color-gray-medium);
}

.txds-breadcrumb__item a {
  color: var(--txds-color-primary-50, #486687);
  text-decoration: underline;
}

.txds-breadcrumb__item a:hover {
  text-decoration: underline;
}
.txds-breadcrumb__item a:focus-visible {
  outline: var(--txds-focus-width) solid var(--txds-focus-color);
  outline-offset: var(--txds-focus-offset);
}

.txds-breadcrumb__item[aria-current="page"] {
  color: var(--txds-color-gray-dark);
}

/* --- Dark variant (for dark backgrounds) --- */
.txds-breadcrumb--dark .txds-breadcrumb__item a {
  color: var(--txds-color-gray-05, #f8f8f7);
}
.txds-breadcrumb--dark .txds-breadcrumb__item:not(:last-child)::after {
  color: var(--txds-color-gray-05, #f8f8f7);
}
.txds-breadcrumb--dark .txds-breadcrumb__item[aria-current="page"] {
  color: var(--txds-color-gray-05, #f8f8f7);
  font-weight: var(--txds-font-weight-bold, 700);
}


/* --- src/components/button/button.css --- */
/* ============================================
   Component: Button  (.txds-button)
   ============================================ */

.txds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--txds-space-2);
  font-family: var(--txds-font-family);
  font-size: var(--txds-font-size-body-lg); /* 18px */
  font-style: normal;
  font-weight: var(--txds-font-weight-bold); /* 700 */
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  padding: 16px 40px; /* Large — default */
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition:
    background-color var(--snappy, 0.3s ease-in-out),
    border-color var(--snappy, 0.3s ease-in-out),
    color var(--snappy, 0.3s ease-in-out);
}

.txds-button:focus-visible {
  outline: var(--txds-focus-width) solid var(--txds-focus-color);
  outline-offset: var(--txds-focus-offset);
}

/* --- Primary Blue (filled) --- */
.txds-button--primary {
  background-color: var(--txds-color-primary-50);
  color: var(--txds-color-gray-00);
  border-color: transparent;
}
.txds-button--primary:hover {
  background-color: var(--txds-color-primary-60);
}

/* --- Primary Yellow (filled) --- */
.txds-button--yellow {
  background-color: var(--txds-color-secondary-50);
  color: var(--txds-color-gray-80);
  border-color: transparent;
}
.txds-button--yellow:hover {
  background-color: var(--txds-color-secondary-60);
}

/* --- Secondary / Outline (Blue border, no fill) --- */
.txds-button--secondary,
.txds-button--outline {
  background-color: transparent;
  border-color: var(--txds-color-primary-50);
  color: var(--txds-color-primary-50);
}
.txds-button--secondary:hover,
.txds-button--outline:hover {
  background-color: transparent;
  border-color: var(--txds-color-primary-60);
  color: var(--txds-color-primary-60);
}

/* --- Inverse (white on dark backgrounds) --- */
.txds-button--inverse {
  background-color: var(--txds-color-white);
  color: var(--txds-color-primary-50);
  border-color: transparent;
}
.txds-button--inverse:hover {
  background-color: var(--txds-color-gray-10);
}
.txds-button--outline.txds-button--inverse {
  background-color: transparent;
  border-color: var(--txds-color-white);
  color: var(--txds-color-white);
}
.txds-button--outline.txds-button--inverse:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

/* --- Sizes --- */
.txds-button--large {
  padding: 16px 40px;
  font-size: var(--txds-font-size-body-lg); /* 18px */
}
.txds-button--small {
  padding: 10px 32px;
  font-size: var(--txds-font-size-body-sm); /* 16px */
}

/* --- Disabled --- */
.txds-button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Full-width --- */
.txds-button--full-width {
  display: flex;
  width: 100%;
}


/* --- src/components/card/card.css --- */
/* ============================================
   Component: Card  (.txds-card)
   Featured card with image, title,
   description, and optional content tag.
   ============================================ */

.txds-card {
  font-family: var(--txds-font-family);
  background: var(--txds-color-gray-00, #fafafa);
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
  transition:
    border-color var(--snappy, 0.3s ease-in-out),
    box-shadow var(--snappy, 0.3s ease-in-out);
  border: 2px solid transparent;
}

.txds-card:hover {
  border-radius: 4px;
  border-color: var(--txds-color-primary-50);
  box-shadow: var(--txds-shadow-card);
}

.txds-card__media {
  width: 100%;
  height: 225px;
  overflow: clip;
}

.txds-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.txds-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
}

.txds-card__heading {
  font-size: var(--txds-font-size-body-lg-eb, 20px);
  font-weight: 800;
  line-height: var(--txds-line-height-body-lg-eb, 30px);
  margin: 0;
}

.txds-card__heading a {
  color: var(--txds-color-primary-50);
  text-decoration: none;
}
.txds-card__heading a:hover {
  text-decoration: underline;
}

.txds-card__text {
  font-size: var(--txds-font-size-body-sm, 16px);
  line-height: var(--txds-line-height-body-sm, 26px);
  color: var(--txds-color-gray-70);
  margin: 0;
}

/* --- Content tag pill --- */
.txds-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  background: var(--txds-color-gray-10);
  border-radius: 2px;
  font-size: var(--txds-font-size-caption, 12px);
  font-weight: 600;
  color: var(--txds-color-gray-70);
  line-height: normal;
  align-self: flex-start;
}
.txds-card__tag .bi {
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

/* --- Flag variant (horizontal) --- */
.txds-card--flag {
  display: flex;
  width: auto;
}
.txds-card--flag .txds-card__media {
  width: 240px;
  height: auto;
  flex-shrink: 0;
}
.txds-card--flag .txds-card__media img {
  height: 100%;
  object-fit: cover;
}

/* --- Card group --- */
.txds-card-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 24px;
}

/* --- Responsive --- */
@media (max-width: 480px) {
  .txds-card--flag {
    flex-direction: column;
  }
  .txds-card--flag .txds-card__media {
    width: 100%;
  }
}


/* --- src/components/chip/chip.css --- */
/* ============================================
   Component: Chip  (.txds-chip)
   ============================================ */

.txds-chip {
  display: inline-flex;
  align-items: center;
  background-color: var(--txds-color-primary-50);
  color: var(--txds-color-gray-05);
  font-family: var(--txds-font-family);
  font-size: 14px;
  font-weight: var(--txds-font-weight-medium); /* 500 */
  letter-spacing: 0.07px;
  line-height: 13px;
  padding: 6px 16px 7px;
  border-radius: 24px;
  border: none;
  cursor: default;
  text-decoration: none;
  transition: background-color 0.15s;
}

/* --- Removable chip (with close icon) --- */
.txds-chip--removable {
  gap: 8px;
  padding: 5px 8px 5px 16px;
  cursor: pointer;
}

.txds-chip--removable:hover {
  background-color: var(--txds-color-primary-60);
}

/* --- Close button inside chip --- */
.txds-chip__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
}

.txds-chip__close::before {
  content: '✕';
}

.txds-chip__close:focus-visible {
  outline: var(--txds-focus-width) solid var(--txds-focus-color);
  outline-offset: 1px;
  border-radius: 50%;
}


/* --- src/components/desktop-navigation/desktop-navigation.css --- */
/* ============================================
   Component: Desktop Navigation  (.txds-desktop-nav)
   Texas Design System
   Main navigation bar with two variants:
   - Menu only: nav links on primary-50 background
   - Combined: logo + nav links + language + search on primary-60 background
   ============================================ */

.txds-desktop-nav {
  font-family: var(--txds-font-family);
  display: flex;
  align-items: center;
  height: 62px;
  width: 100%;
}

/* ==============================
   Menu-only variant (default)
   ============================== */

.txds-desktop-nav--menu-only {
  background: var(--txds-color-primary-50);
  gap: 40px;
  padding: 0 40px;
}

.txds-desktop-nav__item-group {
  position: relative;
  display: flex;
}

/* ---- Nav button items ---- */
.txds-desktop-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 8px;
  min-height: 44px;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--txds-color-gray-05);
  text-decoration: none;
}

.txds-desktop-nav__item-inner {
  display: flex;
  align-items: center;
  gap: 8px;
}

.txds-desktop-nav__item-label {
  font-family: var(--txds-font-family);
  font-size: var(--txds-font-size-body-md, 18px);
  font-weight: var(--txds-font-weight-extrabold);
  line-height: var(--txds-line-height-body-md, 30px);
  color: var(--txds-color-gray-05);
  white-space: nowrap;
  text-align: center;
}

.txds-desktop-nav__item-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.txds-desktop-nav__item-chevron svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: var(--txds-color-gray-05);
}

/* Indicator bar beneath each nav item */
.txds-desktop-nav__item-bar {
  width: 100%;
  height: 3px;
  background: transparent;
  transition: background var(--snappy, 0.3s ease-in-out);
}

/* --- Default state --- */
/* White text, chevron down, no bar (already the base styles) */

/* --- Hover state --- */
/* Text turns warm cream (#fff4df), no bar */
.txds-desktop-nav__item:hover .txds-desktop-nav__item-label {
  color: var(--txds-color-secondary-10);
}

.txds-desktop-nav__item:hover .txds-desktop-nav__item-chevron svg {
  stroke: var(--txds-color-secondary-10);
}

/* --- Active state --- */
/* White text, chevron rotates up, 3px white bar */
.txds-desktop-nav__item--active .txds-desktop-nav__item-label {
  color: var(--txds-color-gray-05);
}

.txds-desktop-nav__item--active .txds-desktop-nav__item-chevron svg {
  transform: rotate(180deg);
}

.txds-desktop-nav__item--active .txds-desktop-nav__item-bar {
  background: var(--txds-color-gray-05);
}

/* ==============================
   Combined variant
   ============================== */

.txds-desktop-nav--combined {
  background: var(--txds-color-primary-60);
  justify-content: space-between;
  gap: 24px;
  padding: 0 24px;
  border-radius: 4px;
}

.txds-desktop-nav__left {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 32px;
  min-width: 0;
}

/* Logo */
.txds-desktop-nav__logo {
  flex-shrink: 0;
  height: 32px;
}

.txds-desktop-nav__logo img,
.txds-desktop-nav__logo svg {
  height: 100%;
  width: auto;
  display: block;
}

/* Simple inline nav links (combined variant) */
.txds-desktop-nav__links {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.txds-desktop-nav__links > li {
  position: relative;
}

.txds-desktop-nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--txds-font-family);
  font-size: var(--txds-font-size-body-sm, 16px);
  font-weight: var(--txds-font-weight-normal);
  line-height: var(--txds-line-height-body-sm, 26px);
  color: var(--txds-color-gray-05);
  text-decoration: none;
  white-space: nowrap;
}

.txds-desktop-nav__links a:hover {
  text-decoration: underline;
}

.txds-desktop-nav__child-links {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 180px;
  list-style: none;
  margin: 0;
  padding: 12px 16px;
  background: var(--txds-color-gray-05);
  border-radius: 4px;
  box-shadow: 0 10px 24px rgba(11, 23, 42, 0.18);
}

.txds-desktop-nav__child-links a {
  min-height: auto;
  color: var(--txds-color-primary-70);
  font-family: var(--txds-font-family);
  font-size: var(--txds-font-size-sm, 14px);
  line-height: var(--txds-line-height-caption, 18px);
}

/* Right side controls */
.txds-desktop-nav__controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Language button */
.txds-desktop-nav__lang-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 8px;
  border: 1px solid var(--txds-color-primary-10);
  border-radius: 4px;
  background: none;
  color: var(--txds-color-primary-05);
  font-family: var(--txds-font-family);
  font-size: var(--txds-font-size-sm, 14px);
  font-weight: var(--txds-font-weight-normal);
  line-height: var(--txds-line-height-caption, 18px);
  cursor: pointer;
}

.txds-desktop-nav__lang-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Search bar */
.txds-desktop-nav__search {
  display: flex;
  align-items: stretch;
  width: 208px;
}

.txds-desktop-nav__search-input {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 8px;
  background: var(--txds-color-gray-00);
  border: none;
  border-radius: 4px 0 0 4px;
  min-width: 0;
  align-self: stretch;
}

.txds-desktop-nav__search-input:focus-within {
  outline: var(--txds-focus-width) solid var(--txds-focus-color);
  outline-offset: var(--txds-focus-offset);
}

.txds-desktop-nav__search-input input {
  border: none;
  background: none;
  font-family: var(--txds-font-family);
  font-size: var(--txds-font-size-sm, 14px);
  line-height: var(--txds-line-height-caption, 18px);
  color: var(--txds-color-gray-80);
  width: 100%;
  outline: none;
}

.txds-desktop-nav__search-input input::placeholder {
  color: var(--txds-color-gray-60);
  opacity: 1;
}

.txds-desktop-nav__search-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.txds-desktop-nav__search-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.txds-desktop-nav__search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  padding: 2px 8px;
  background: var(--txds-color-secondary-50);
  border: none;
  border-radius: 0 4px 4px 0;
  font-family: var(--txds-font-family);
  font-size: var(--txds-font-size-caption, 12px);
  font-weight: var(--txds-font-weight-normal);
  line-height: var(--txds-line-height-caption, 18px);
  color: var(--txds-color-primary-90);
  cursor: pointer;
  white-space: nowrap;
}

.txds-desktop-nav__search-btn:hover {
  background: var(--txds-color-secondary-60);
}

@media (max-width: 1200px) {
  .txds-desktop-nav--combined {
    gap: 16px;
    padding: 0 16px;
  }

  .txds-desktop-nav__left {
    gap: 20px;
  }

  .txds-desktop-nav__links {
    gap: 16px;
  }

  .txds-desktop-nav__links a {
    font-size: 15px;
  }

  .txds-desktop-nav__search {
    width: 184px;
  }
}

/* ---- Mobile: hide nav ---- */
@media (max-width: 767px) {
  .txds-desktop-nav {
    display: none;
  }
}


/* --- src/components/featured-banner/featured-banner.css --- */
/* ============================================
   Component: Featured Banner  (.txds-featured-banner)
   Full-width CTA strip with title, optional
   description, and outlined button.
   ============================================ */

.txds-featured-banner {
  font-family: var(--txds-font-family);
  width: 100%;
  background: var(--txds-color-gray-00, #fafafa);
}

/* --- With description variant (gray-20 bg) --- */
.txds-featured-banner--alt {
  background: var(--txds-color-gray-20);
}

.txds-featured-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 56px 64px;
  box-sizing: border-box;
}

/* --- Simple variant: title fills, button pushed right --- */
.txds-featured-banner--simple .txds-featured-banner__title {
  flex: 1;
}

/* --- Content block --- */
.txds-featured-banner__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.txds-featured-banner__title {
  font-family: var(--txds-font-family-header);
  font-size: var(--txds-font-size-h3);
  font-weight: var(--txds-font-weight-bold);
  line-height: var(--txds-line-height-h3);
  color: var(--txds-color-gray-80);
  margin: 0;
}

.txds-featured-banner__text {
  font-size: var(--txds-font-size-body-md);
  line-height: var(--txds-line-height-body-md);
  color: var(--txds-color-gray-70);
  margin: 0;
}

/* --- Outlined button --- */
.txds-featured-banner__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 40px;
  border: 1px solid var(--txds-color-primary-50);
  border-radius: var(--txds-button-radius, 4px);
  background: transparent;
  color: var(--txds-color-primary-50);
  font-family: var(--txds-font-family);
  font-size: var(--txds-font-size-body-md);
  font-weight: var(--txds-font-weight-bold);
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
}
.txds-featured-banner__action:hover {
  background: var(--txds-color-primary-50);
  color: var(--txds-color-gray-05);
}

/* --- Tablet --- */
@media (min-width: 768px) and (max-width: 1024px) {
  .txds-featured-banner__inner {
    padding: 56px 48px;
    gap: 32px;
  }
}

/* --- Mobile --- */
@media (max-width: 767px) {
  .txds-featured-banner__inner {
    padding: 56px 24px;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
  }
  .txds-featured-banner__title {
    font-size: 24px;
    line-height: 30px;
  }
  .txds-featured-banner__action {
    width: 100%;
  }
}

.txds-featured-banner-doc-row {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.txds-featured-banner-doc-mobile-col {
  flex: 0 0 375px;
}

.txds-featured-banner-doc-code-col {
  flex: 1;
  min-width: 300px;
}

.txds-featured-banner-doc-frame,
.txds-featured-banner-preview-mobile-frame {
  border: 1px solid #dee2e6;
  border-radius: 6px;
  display: block;
}

.txds-featured-banner-preview-pad {
  padding: 0 2rem;
}

.txds-featured-banner-preview-mobile-grid {
  display: flex;
  gap: 2rem;
  padding: 0 2rem;
  flex-wrap: wrap;
}

.txds-featured-banner-preview-mobile-col {
  flex: 0 0 375px;
}

.txds-featured-banner-preview-mobile-label {
  font-family: var(--txds-font-family);
  font-size: 0.875rem;
  font-weight: 600;
  color: #555;
  margin-bottom: 0.5rem;
}

.txds-featured-banner-preview-mobile-details {
  margin: 0.5rem 0 0;
}


/* --- src/components/footer/footer.css --- */
/* ============================================
   Component: Footer  (.txds-footer)
   Texas Design System
   Two-section footer: Top (links) + Bottom (legal bar)
   Desktop + Mobile variants
   ============================================ */

.txds-footer {
  font-family: var(--txds-font-family);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

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

/* ==============================
   Top section (primary-60 background)
   ============================== */

.txds-footer__top {
  background: var(--txds-color-primary-60);
  display: flex;
  align-items: center;
  padding: 40px 64px;
  gap: 24px;
}

/* EEO Blurb */
.txds-footer__blurb {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--txds-font-family);
  font-size: 14px;
  font-weight: var(--txds-font-weight-normal);
  line-height: 24px;
  color: var(--txds-color-gray-05);
  letter-spacing: -0.154px;
}

.txds-footer__blurb strong {
  font-weight: var(--txds-font-weight-bold);
}

/* Link columns */
.txds-footer__links-col {
  width: 240px;
  flex-shrink: 0;
}

.txds-footer__links-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.txds-footer__links-list li {
  margin-bottom: 16px;
}

.txds-footer__links-list li:last-child {
  margin-bottom: 0;
}

.txds-footer__links-col a,
.txds-footer__links-list a {
  display: block;
  font-family: var(--txds-font-family);
  font-size: 16px;
  font-weight: var(--txds-font-weight-medium);
  line-height: 24px;
  color: var(--txds-color-gray-05);
  text-decoration: underline;
}

.txds-footer__links-col > a {
  margin-bottom: 16px;
}

.txds-footer__links-col > a:last-child {
  margin-bottom: 0;
}

.txds-footer__links-col a:hover,
.txds-footer__links-list a:hover {
  color: var(--txds-color-gray-00);
}

/* ==============================
   Bottom bar (#1d2731 background)
   ============================== */

.txds-footer__bottom {
  background: #1d2731;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 0 64px;
  height: 70px;
}

.txds-footer__copyright {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--txds-font-family);
  font-size: 14px;
  font-weight: var(--txds-font-weight-normal);
  line-height: 20px;
  color: var(--txds-color-gray-05);
  margin: 0;
}

.txds-footer__legal {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.txds-footer__legal a {
  font-family: var(--txds-font-family);
  font-size: 14px;
  font-weight: var(--txds-font-weight-medium);
  line-height: 20px;
  color: var(--txds-color-gray-05);
  text-decoration: underline;
  white-space: nowrap;
}

.txds-footer__legal a:hover {
  color: var(--txds-color-gray-00);
}

/* ==============================
   Mobile modifier (txds-footer--mobile)
   Matches Figma Size=Mobile (375px)
   ============================== */

.txds-footer--mobile {
  width: 375px;
}

.txds-footer--mobile .txds-footer__top {
  flex-direction: column;
  padding: 40px 24px;
  gap: 32px;
}

.txds-footer--mobile .txds-footer__links-col {
  width: 100%;
}

.txds-footer--mobile .txds-footer__bottom {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 24px;
  height: auto;
  gap: 40px;
}

.txds-footer--mobile .txds-footer__copyright {
  width: 100%;
}

.txds-footer--mobile .txds-footer__legal {
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

/* ==============================
   Responsive fallback
   ============================== */

@media (min-width: 768px) and (max-width: 1024px) {
  .txds-footer__top {
    padding: 32px 32px;
    flex-wrap: wrap;
    gap: 16px;
  }
  .txds-footer__bottom {
    padding: 0 32px;
  }
}

@media (max-width: 767px) {
  .txds-footer .txds-footer__top {
    flex-direction: column;
    padding: 40px 24px;
    gap: 32px;
  }

  .txds-footer .txds-footer__links-col {
    width: 100%;
  }

  .txds-footer .txds-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 24px;
    height: auto;
    gap: 40px;
  }

  .txds-footer .txds-footer__copyright {
    width: 100%;
  }

  .txds-footer .txds-footer__legal {
    flex-direction: column;
    gap: 24px;
    width: 100%;
  }
}


/* --- src/components/get-in-touch/get-in-touch.css --- */
/* ============================================
   Component: Get In Touch  (.txds-get-in-touch)
   ============================================ */

.txds-get-in-touch {
  font-family: var(--txds-font-family);
  background: var(--txds-color-gray-05, #F8F8F7);
  border-radius: 8px;
  padding: 64px;
  overflow: hidden;
}

/* Heading */
.txds-get-in-touch__heading {
  font-size: var(--txds-font-size-h2, 40px);
  font-weight: 600;
  line-height: var(--txds-line-height-h2, 44px);
  color: var(--txds-color-gray-70, #403C37);
  margin: 0 0 36px;
}

/* Rich content block */
.txds-get-in-touch__content {
  color: var(--txds-color-gray-70, #403C37);
  margin-bottom: 36px;
}

.txds-get-in-touch__content h4 {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  margin: 0 0 16px;
}

.txds-get-in-touch__content p {
  font-size: var(--txds-font-size-body-md, 18px);
  line-height: var(--txds-line-height-body-md, 30px);
  margin: 0 0 16px;
}

.txds-get-in-touch__content p:last-child {
  margin-bottom: 0;
}

.txds-get-in-touch__content a {
  color: var(--txds-color-primary-50, #486687);
  text-decoration: underline;
}

/* Form */
.txds-get-in-touch__form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Form field group */
.txds-get-in-touch__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 600px;
  margin-bottom: 24px;
}

.txds-get-in-touch__label {
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: var(--txds-color-gray-80, #2B2926);
}

.txds-get-in-touch__input {
  display: block;
  width: 100%;
  padding: 8px;
  font-family: var(--txds-font-family);
  font-size: 16px;
  color: var(--txds-color-gray-80, #2B2926);
  background: var(--txds-color-gray-05, #F8F8F7);
  border: 1px solid var(--txds-color-gray-30, #C9C9C5);
  border-radius: 4px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.16);
}

.txds-get-in-touch__input:focus {
  outline: 2px solid var(--txds-color-primary-50, #486687);
  outline-offset: 0;
  border-color: var(--txds-color-primary-50, #486687);
}

.txds-get-in-touch__textarea {
  display: block;
  width: 100%;
  min-height: 160px;
  padding: 8px;
  font-family: var(--txds-font-family);
  font-size: 16px;
  color: var(--txds-color-gray-80, #2B2926);
  background: var(--txds-color-gray-05, #F8F8F7);
  border: 1px solid var(--txds-color-gray-30, #C9C9C5);
  border-radius: 4px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.16);
  resize: vertical;
}

.txds-get-in-touch__textarea:focus {
  outline: 2px solid var(--txds-color-primary-50, #486687);
  outline-offset: 0;
  border-color: var(--txds-color-primary-50, #486687);
}

/* Submit button */
.txds-get-in-touch__submit {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  padding: 16px 40px;
  background: var(--txds-color-secondary-50, #EBB445);
  color: var(--txds-color-gray-80, #2B2926);
  font-family: var(--txds-font-family);
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
  border: none;
  border-radius: var(--txds-border-radius, 4px);
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 12px;
}

.txds-get-in-touch__submit:hover {
  background: var(--txds-color-secondary-60, #D9A23E);
}

@media (max-width: 767px) {
  .txds-get-in-touch {
    padding: 32px 24px;
  }

  .txds-get-in-touch__heading {
    font-size: 32px;
    line-height: 38px;
  }

  .txds-get-in-touch__field {
    max-width: 100%;
  }
}


/* --- src/components/header/header.css --- */
/* ============================================
   Component: Header Bar  (.txds-header)
   Texas Design System
   ============================================ */

.txds-header {
  font-family: var(--txds-font-family);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Desktop */
.txds-header--desktop {
  background: var(--txds-color-gray-05);
  padding: 16px 64px;
  box-shadow: 0 8px 8px -6px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.txds-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 32px;
  text-decoration: none;
}

.txds-header__logo img {
  height: 100%;
  width: auto;
  display: block;
}

.txds-header__logo svg {
  display: block;
}

.txds-header__logo .txds-header__logo-mark {
  width: 209px;
  height: 32px;
  color: var(--txds-color-gray-80);
}

.txds-header--dark .txds-header__logo-mark {
  color: var(--txds-color-gray-00);
}

.txds-header__controls {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

.txds-header__lang-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 8px;
  min-height: 44px;
  border: 1px solid var(--txds-color-primary-50);
  border-radius: 8px;
  background: none;
  cursor: pointer;
}

.txds-header__lang-btn .txds-header__lang-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.txds-header__lang-btn .txds-header__lang-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: var(--txds-color-primary-50);
}

.txds-header__lang-btn .txds-header__lang-label {
  font-size: 16px;
  font-weight: var(--txds-font-weight-bold);
  line-height: 24px;
  color: var(--txds-color-primary-50);
}

.txds-header__lang-btn:hover {
  border-color: var(--txds-color-primary-90);
}

.txds-header__lang-btn:hover .txds-header__lang-label {
  color: var(--txds-color-primary-90);
}

.txds-header__lang-btn:hover .txds-header__lang-icon svg {
  stroke: var(--txds-color-secondary-60);
}
.txds-header__lang-btn:focus-visible {
  outline: var(--txds-focus-width) solid var(--txds-focus-color);
  outline-offset: var(--txds-focus-offset);
}

.txds-header__search {
  display: flex;
  align-items: center;
  width: 242px;
}

.txds-header__search-field {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  min-height: 44px;
  border: 1px solid var(--txds-color-primary-50);
  border-right: none;
  border-radius: 4px 0 0 4px;
  background: transparent;
  min-width: 0;
}

.txds-header__search-field:focus-within {
  outline: var(--txds-focus-width) solid var(--txds-focus-color);
  outline-offset: var(--txds-focus-offset);
}

.txds-header__search-field input {
  border: none;
  background: none;
  font-family: var(--txds-font-family);
  font-size: 14px;
  flex: 1;
  min-width: 0;
  outline: none;
  color: var(--txds-color-gray-70);
}

.txds-header__search-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.txds-header__search-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: var(--txds-color-primary-50);
}

.txds-header__search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  min-height: 44px;
  background: var(--txds-color-primary-50);
  border: none;
  border-radius: 0 4px 4px 0;
  font-family: var(--txds-font-family);
  font-size: 14px;
  font-weight: var(--txds-font-weight-bold);
  line-height: 24px;
  color: var(--txds-color-gray-00);
  cursor: pointer;
  white-space: nowrap;
}

.txds-header__search-btn:hover {
  background: var(--txds-color-primary-60);
}
.txds-header__search-btn:focus-visible {
  outline: var(--txds-focus-width) solid var(--txds-focus-color);
  outline-offset: var(--txds-focus-offset);
}

/* Mobile Closed */
.txds-header--mobile {
  height: 72px;
  padding: 8px 24px;
  overflow: hidden;
}

.txds-header--mobile.txds-header--light {
  background: var(--txds-color-gray-05);
  box-shadow: var(--txds-shadow-header);
}

.txds-header--mobile.txds-header--dark {
  background: rgba(42, 61, 78, 0.84);
  backdrop-filter: blur(8px);
}

.txds-header__menu-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  min-height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.txds-header__menu-toggle-label {
  font-size: 16px;
  font-weight: var(--txds-font-weight-extrabold);
  line-height: 18px;
}

.txds-header--light .txds-header__menu-toggle-label {
  color: var(--txds-color-gray-70);
}

.txds-header--dark .txds-header__menu-toggle-label {
  color: var(--txds-color-gray-00);
}

.txds-header__menu-toggle-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.txds-header__menu-toggle-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.txds-header--light .txds-header__menu-toggle-icon svg {
  stroke: var(--txds-color-gray-70);
}

.txds-header--dark .txds-header__menu-toggle-icon svg {
  stroke: var(--txds-color-gray-00);
}

/* Mobile Open */
.txds-header--mobile-open {
  flex-direction: column;
  align-items: flex-start;
  height: auto;
  overflow: hidden;
  background: var(--txds-color-gray-05);
  box-shadow: var(--txds-shadow-panel);
  width: 375px;
}

.txds-header--mobile-open .txds-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 72px;
  padding: 8px 24px;
  background: var(--txds-color-gray-05);
  box-shadow: var(--txds-shadow-header);
}

.txds-header--mobile-open .txds-header__close {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  min-height: 44px;
  background: none;
  border: none;
  cursor: pointer;
}

.txds-header--mobile-open .txds-header__close-label {
  font-size: 16px;
  font-weight: var(--txds-font-weight-extrabold);
  line-height: 18px;
  color: var(--txds-color-primary-50);
}

.txds-header--mobile-open .txds-header__close-icon {
  width: 24px;
  height: 24px;
}

.txds-header--mobile-open .txds-header__close-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: var(--txds-color-primary-50);
}

.txds-header__mobile-lang {
  display: flex;
  align-items: flex-start;
  padding: 16px 24px;
  width: 100%;
  background: var(--txds-color-gray-05);
}

.txds-header__mobile-search {
  display: flex;
  align-items: flex-start;
  padding: 16px 24px;
  width: 100%;
  background: var(--txds-color-gray-05);
  box-sizing: border-box;
}

.txds-header__mobile-search .txds-header__search {
  flex: 1;
  width: auto;
}

.txds-header__mobile-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  width: 100%;
  background: var(--txds-color-gray-05);
  border: none;
  cursor: pointer;
}

.txds-header__mobile-menu-item span {
  font-size: 16px;
  font-weight: var(--txds-font-weight-semibold);
  color: var(--txds-color-primary-50);
}

.txds-header__mobile-menu-item--expanded span {
  font-weight: var(--txds-font-weight-extrabold);
  color: var(--txds-color-secondary-50);
}

.txds-header__mobile-menu-item--expanded svg {
  stroke: var(--txds-color-secondary-50);
}

.txds-header__mobile-menu-item svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  stroke: var(--txds-color-primary-50);
}

.txds-header__mobile-menu-item.txds-header__mobile-menu-item--expanded svg {
  stroke: var(--txds-color-secondary-50);
}

.txds-header__mobile-section-divider {
  width: calc(100% - 48px);
  height: 3px;
  background: var(--txds-color-secondary-60);
  margin: 0 24px;
}

.txds-header__mobile-subsection {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--txds-color-primary-50);
}

.txds-header__mobile-subsection-title {
  display: block;
  width: 100%;
  padding: 16px 24px;
  font-size: 14px;
  font-weight: var(--txds-font-weight-extrabold);
  line-height: 24px;
  color: var(--txds-color-gray-05);
}

.txds-header__mobile-subsection-link {
  display: block;
  width: 100%;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: var(--txds-font-weight-medium);
  line-height: 18px;
  color: var(--txds-color-gray-05);
  text-decoration: underline;
}

.txds-header__mobile-subsection-link:hover {
  color: var(--txds-color-gray-00);
}
.txds-header__mobile-subsection-link:focus-visible {
  outline: var(--txds-focus-width) solid var(--txds-focus-color);
  outline-offset: var(--txds-focus-offset);
}

.txds-header__mobile-view-all {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 13px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: var(--txds-font-weight-medium);
  line-height: 18px;
  color: var(--txds-color-gray-05);
  text-decoration: underline;
  background: var(--txds-color-primary-50);
}

.txds-header__mobile-view-all svg {
  width: 24px;
  height: 24px;
  stroke: var(--txds-color-gray-05);
}

@media (max-width: 767px) {
  .txds-header--desktop {
    display: none;
  }
}
@media (min-width: 768px) {
  .txds-header--mobile,
  .txds-header--mobile-open {
    display: none;
  }
}


/* --- src/components/hero/hero.css --- */
/* ============================================
   Component: Hero  (.txds-hero)
   Split hero with text + image side by side.
   Variants: Filled (dark bg), Open (no bg).
   ============================================ */

.txds-hero {
  font-family: var(--txds-font-family);
  width: 100%;
  overflow: hidden;
}

.txds-hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  box-sizing: border-box;
  padding: 64px;
  width: 100%;
  max-width: 1400px;
  height: 532px;
  margin: 0 auto;
}

/* --- Filled (dark background) --- */
.txds-hero--filled {
  background: var(--txds-color-primary-60);
  color: var(--txds-color-gray-05);
}

/* --- Open (transparent background) --- */
.txds-hero--open {
  background: transparent;
  color: var(--txds-color-gray-80, #2b2926);
  border-radius: 0 0 var(--txds-card-radius, 4px) var(--txds-card-radius, 4px);
}
.txds-hero--open .txds-hero__heading {
  color: var(--txds-color-primary-90, #0e151c);
}
.txds-hero--open .txds-hero__text {
  color: var(--txds-color-gray-70);
}

/* --- Content area (left side) --- */
.txds-hero__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;
  flex: 0 1 571px;
  min-width: 0;
}

.txds-hero__heading {
  font-family: var(--txds-font-family-header);
  font-size: var(--txds-font-size-h1, 50px);
  font-weight: var(--txds-font-weight-bold, 700);
  line-height: var(--txds-line-height-h1, 52px);
  margin: 0;
}

.txds-hero__text {
  font-size: var(--txds-font-size-body-lg, 20px);
  line-height: var(--txds-line-height-body-lg, 32px);
  margin: 0;
}

.txds-hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* --- Image area (right side) --- */
.txds-hero__image {
  position: relative;
  flex: 0 1 604px;
  min-width: 240px;
  height: 404px;
  border-radius: 16px;
  overflow: clip;
}
.txds-hero__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- CTA button (secondary gold) --- */
.txds-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 40px;
  background: var(--txds-color-secondary-50, #ebb445);
  color: var(--txds-color-gray-80, #2b2926);
  font-family: var(--txds-font-family);
  font-size: var(--txds-font-size-body-md, 18px);
  font-weight: var(--txds-font-weight-bold, 700);
  line-height: 20px;
  text-decoration: none;
  border: none;
  border-radius: var(--txds-button-radius, 4px);
  cursor: pointer;
}
.txds-hero__cta:hover {
  background: var(--txds-color-secondary-60, #bf9639);
}

/* --- Mobile stacked layout (375px) --- */
@media (max-width: 767px) {
  .txds-hero__inner {
    flex-direction: column;
    padding: 0;
    height: auto;
    gap: 0;
  }

  .txds-hero--filled {
    box-shadow: var(--txds-shadow-card);
  }

  .txds-hero__content {
    width: 100%;
    flex: none;
    gap: 16px;
    padding: 32px 24px;
  }

  .txds-hero__heading {
    font-size: var(--txds-font-size-h1, 50px);
    line-height: var(--txds-line-height-h1, 52px);
  }

  .txds-hero__text {
    font-size: var(--txds-font-size-body-lg, 20px);
    line-height: var(--txds-line-height-body-lg, 32px);
  }

  .txds-hero__image {
    width: 100%;
    flex: none;
    min-width: unset;
    height: 266px;
    border-radius: 0;
  }

  .txds-hero--filled .txds-hero__image {
    border-radius: 0 0 16px 16px;
  }

  .txds-hero--open .txds-hero__image {
    border-radius: var(--txds-card-radius, 4px);
  }

  .txds-hero--open .txds-hero__content {
    border-radius: 0 0 16px 16px;
  }

  .txds-hero__cta {
    width: 100%;
  }
}

/* --- Tablet layout (768px–1024px) --- */
@media (min-width: 768px) and (max-width: 1024px) {
  .txds-hero__inner {
    padding: 40px 32px;
    height: auto;
    min-height: 400px;
    gap: 24px;
  }

  .txds-hero__content {
    flex: 1 1 auto;
    gap: 16px;
  }

  .txds-hero__heading {
    font-size: var(--txds-font-size-h2, 40px);
    line-height: var(--txds-line-height-h2, 44px);
  }

  .txds-hero__image {
    flex: 0 1 340px;
    min-width: 200px;
    height: 300px;
  }
}

.txds-hero-preview-pad {
  padding: 0 2rem;
}

.txds-hero-preview-note {
  font-family: var(--txds-font-family);
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 0.75rem;
}

.txds-hero-preview-mobile-grid {
  display: flex;
  gap: 2rem;
  padding: 0 2rem;
  flex-wrap: wrap;
}

.txds-hero-preview-mobile-col {
  flex: 0 0 375px;
}

.txds-hero-preview-mobile-label {
  font-family: var(--txds-font-family);
  font-size: 0.875rem;
  font-weight: 600;
  color: #555;
  margin-bottom: 0.5rem;
}

.txds-hero-preview-mobile-frame {
  border: 1px solid #dee2e6;
  border-radius: 6px;
  display: block;
}

.txds-hero-preview-mobile-details {
  margin: 0.5rem 0 0;
}

.txds-hero-doc-row {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.txds-hero-doc-mobile-col {
  flex: 0 0 375px;
}

.txds-hero-doc-code-col {
  flex: 1;
  min-width: 300px;
}

.txds-hero-doc-frame {
  border: 1px solid #dee2e6;
  border-radius: 6px;
  display: block;
}


/* --- src/components/icons/icons.css --- */
/* ==========================================================================
   Icons — Icon reference & documentation
   ========================================================================== */

/* ---------- Icon grid ---------- */
.txds-icon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

/* ---------- Single icon cell ---------- */
.txds-icon-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 80px;
  padding: 8px 4px;
  border-radius: var(--txds-border-radius-sm, 4px);
  transition: background 0.15s ease;
}

.txds-icon-cell:hover {
  background: var(--txds-color-gray-10, #f0efed);
}

.txds-icon-cell svg {
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.txds-icon-cell--24 svg {
  width: 24px;
  height: 24px;
}

.txds-icon-cell--16 svg {
  width: 16px;
  height: 16px;
}

.txds-icon-cell__label {
  font-family: var(--txds-font-family-body, 'Geologica', sans-serif);
  font-size: 10px;
  font-weight: 400;
  color: var(--txds-color-gray-60, #5b5956);
  text-align: center;
  line-height: 1.3;
  word-break: break-word;
}

/* ---------- Social icon set ---------- */
.txds-social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.txds-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  overflow: hidden;
  color: #fff;
}

.txds-social-icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.txds-social-icon i {
  font-size: 20px;
  line-height: 1;
}

.txds-social-icon--youtube  { background: #ff0000; }
.txds-social-icon--facebook { background: #22589d; }
.txds-social-icon--linkedin { background: #0b86ca; }
.txds-social-icon--instagram {
  background: linear-gradient(135deg, #f58529 0%, #dd2a7b 50%, #8134af 75%, #515bd4 100%);
}
.txds-social-icon--flickr    { background: var(--txds-color-gray-05, #f8f8f7); color: #000; }
.txds-social-icon--wordpress { background: var(--txds-color-gray-05, #f8f8f7); color: #464342; }
.txds-social-icon--x         { background: var(--txds-color-gray-05, #f8f8f7); color: #000; }

/* ---------- Documentation sidebar ---------- */
.txds-icon-docs {
  border-right: 1px solid var(--txds-color-gray-30, #c9c8c5);
  padding-right: 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.txds-icon-docs__title {
  border-left: 8px solid var(--txds-color-primary-50-alt, #4245ac);
  padding-left: 16px;
  font-family: var(--txds-font-family-header, 'Geologica', sans-serif);
  font-size: 32px;
  font-weight: 700;
  line-height: 48px;
  color: var(--txds-color-gray-80, #2b2926);
  margin: 0;
}

.txds-icon-docs__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-left: 16px;
}

.txds-icon-docs__label {
  font-family: var(--txds-font-family-body, 'Geologica', sans-serif);
  font-size: 16px;
  font-weight: 300;
  color: var(--txds-color-gray-60, #5b5956);
  margin: 0;
}

.txds-icon-docs__text {
  font-family: var(--txds-font-family-body, 'Geologica', sans-serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  color: var(--txds-color-gray-80, #2b2926);
  margin: 0;
}

.txds-icon-docs__links {
  font-family: var(--txds-font-family-body, 'Geologica', sans-serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
  color: var(--txds-color-primary-50, #001b74);
  margin: 0;
}

.txds-icon-docs__links a {
  color: var(--txds-color-primary-50, #001b74);
  text-decoration: underline;
}

.txds-icon-docs__links a:hover {
  color: var(--txds-color-primary-60, #21433a);
}

/* ---------- Category heading ---------- */
.txds-icon-category {
  font-family: var(--txds-font-family-body, 'Geologica', sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--txds-color-gray-70, #403c37);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 4px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--txds-color-primary-50-alt, #4245ac);
}

/* ---------- Size label ---------- */
.txds-icon-size-label {
  font-family: var(--txds-font-family-body, 'Geologica', sans-serif);
  font-size: 12px;
  font-weight: 500;
  color: var(--txds-color-gray-50, #726e69);
  margin: 0;
}


/* --- src/components/inputs-filters/inputs-filters.css --- */
/* ============================================
   Page: Form Inputs & Filters
   Layout helpers for the combined showcase page.
   ============================================ */

/* --- Component section: sidebar + demo two-column layout --- */
.txds-component-section {
  display: flex;
  gap: 0;
  margin-bottom: 48px;
}
.txds-component-sidebar {
  flex: 0 0 340px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-right: 24px;
  border-right: 1px solid var(--txds-color-gray-30);
}
.txds-component-sidebar__title {
  font-family: var(--txds-font-family);
  font-weight: var(--txds-font-weight-bold);
  font-size: 24px;
  line-height: 32px;
  color: var(--txds-color-gray-80);
  margin: 0;
  padding-left: 16px;
  border-left: 8px solid var(--txds-color-primary-50-alt, #4245ac);
}
.txds-component-sidebar__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-left: 16px;
}
.txds-component-sidebar__label {
  font-family: var(--txds-font-family);
  font-weight: 300;
  font-size: 14px;
  color: var(--txds-color-gray-60);
  margin: 0;
}
.txds-component-sidebar__text {
  font-family: var(--txds-font-family);
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  color: var(--txds-color-gray-80);
  margin: 0;
}
.txds-component-sidebar__required {
  font-family: var(--txds-font-family);
  font-weight: 500;
  font-size: 12px;
  color: var(--txds-color-gray-50);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}
.txds-component-sidebar__field {
  font-family: var(--txds-font-family);
  font-weight: 500;
  font-size: 16px;
  color: var(--txds-color-gray-80);
  margin: 0;
}
.txds-component-sidebar__guidance {
  font-family: var(--txds-font-family);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--txds-color-gray-80);
  margin: 0;
}
.txds-component-sidebar__guidance ul {
  margin: 4px 0 12px 20px;
  padding: 0;
}
.txds-component-sidebar__guidance li {
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 2px;
}
.txds-component-demo {
  flex: 1;
  min-width: 0;
  padding-left: 32px;
}

/* --- State labels on right side of inputs --- */
.txds-input-state-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 24px;
}
.txds-input-state-row .txds-form-group {
  width: 100%;
  max-width: 420px;
  margin-bottom: 0;
}
.txds-state-label {
  font-family: var(--txds-font-family);
  font-weight: var(--txds-font-weight-normal, 400);
  font-size: 16px;
  line-height: 22px;
  color: var(--txds-color-gray-40);
  white-space: normal;
}

/* --- Filled (inactive) input styling --- */
.txds-input--inactive {
  background: var(--txds-color-gray-10);
  color: var(--txds-color-gray-50);
}

/* --- Combo box wrapper (input + dropdown trigger) --- */
.txds-combo-box {
  position: relative;
}

/* --- Checkbox / radio state grid --- */
.txds-check-radio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px 48px;
  margin-bottom: 32px;
}
.txds-check-radio-grid fieldset {
  margin-bottom: 0;
  border: none;
  padding: 0;
}

/* --- Filters section: side-by-side panels --- */
.txds-filters-row {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.txds-filters-row > * {
  flex: 1;
  min-width: 280px;
}

/* --- Filter by bar (horizontal alpha + dropdowns) --- */
.txds-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.txds-filter-bar__label {
  font-family: var(--txds-font-family);
  font-weight: var(--txds-font-weight-extrabold, 800);
  font-size: 18px;
  line-height: 22px;
  color: var(--txds-color-gray-70);
  white-space: nowrap;
}
.txds-filter-bar__alpha {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.txds-filter-bar__alpha-btn {
  font-family: var(--txds-font-family);
  font-weight: var(--txds-font-weight-extrabold, 800);
  font-size: 18px;
  line-height: 22px;
  padding: 8px;
  border: 1px solid var(--txds-color-gray-30);
  border-radius: var(--txds-border-radius-lg, 8px);
  background: var(--txds-color-gray-05);
  color: var(--txds-color-primary-50);
  cursor: pointer;
  min-width: 40px;
  text-align: center;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.txds-filter-bar__alpha-btn:hover {
  background: var(--txds-color-primary-60);
  border-color: var(--txds-color-primary-60);
  color: var(--txds-color-gray-05);
}
.txds-filter-bar__alpha-btn--active {
  background: var(--txds-color-primary-60);
  border-color: var(--txds-color-primary-60);
  color: var(--txds-color-gray-05);
}
.txds-filter-bar__clear {
  font-family: var(--txds-font-family);
  font-weight: var(--txds-font-weight-semibold);
  font-size: 16px;
  line-height: 22px;
  font-style: italic;
  color: var(--txds-color-primary-50);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  margin-left: auto;
}
.txds-filter-bar__clear:hover {
  color: var(--txds-color-primary-60);
}

/* --- Horizontal checkbox row --- */
.txds-checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

/* --- Show more link --- */
.txds-show-more {
  font-family: var(--txds-font-family);
  font-weight: var(--txds-font-weight-semibold);
  font-size: 16px;
  line-height: 22px;
  font-style: italic;
  color: var(--txds-color-primary-50);
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  margin-left: auto;
  margin-top: 8px;
}

/* --- Filter by dropdowns row --- */
.txds-filter-dropdowns {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 24px;
}
.txds-filter-dropdowns .txds-form-group {
  flex: 1;
  min-width: 200px;
  margin-bottom: 0;
}

/* ============================================
   Base form elements
   ============================================ */

/* --- Form group (label + input wrapper) --- */
.txds-form-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

/* --- Labels --- */
.txds-label {
  font-family: var(--txds-font-family);
  font-weight: var(--txds-font-weight-normal, 400);
  font-size: 16px;
  line-height: 22px;
  color: var(--txds-color-gray-70);
  display: block;
}

/* --- Text inputs --- */
.txds-input {
  font-family: var(--txds-font-family);
  font-size: 16px;
  line-height: 22px;
  color: var(--txds-color-gray-80);
  padding: 10px 12px;
  border: 1px solid var(--txds-color-gray-30);
  border-radius: var(--txds-border-radius-sm, 4px);
  background: var(--txds-color-white);
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.txds-input:focus {
  outline: 2px solid var(--txds-color-primary-50);
  outline-offset: -1px;
  border-color: var(--txds-color-primary-50);
}
.txds-input--error {
  border-color: var(--txds-color-error);
  border-width: 2px;
}
.txds-input--success {
  border-color: var(--txds-color-success-50);
  border-width: 2px;
}

/* --- Error / success messages --- */
.txds-error-message {
  font-family: var(--txds-font-family);
  font-size: 14px;
  line-height: 20px;
  color: var(--txds-color-error);
  font-weight: var(--txds-font-weight-semibold);
}
.txds-success-message {
  font-family: var(--txds-font-family);
  font-size: 14px;
  line-height: 20px;
  color: var(--txds-color-success-50);
  font-weight: var(--txds-font-weight-semibold);
}

/* --- Select --- */
.txds-select {
  font-family: var(--txds-font-family);
  font-size: 16px;
  line-height: 22px;
  color: var(--txds-color-gray-80);
  padding: 10px 36px 10px 12px;
  border: 1px solid var(--txds-color-gray-30);
  border-radius: var(--txds-border-radius-sm, 4px);
  background: var(--txds-color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237b7976' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 8px;
  appearance: none;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color 0.15s;
}
.txds-select:focus {
  outline: 2px solid var(--txds-color-primary-50);
  outline-offset: -1px;
  border-color: var(--txds-color-primary-50);
}
.txds-select--error {
  border-color: var(--txds-color-error);
  border-width: 2px;
}
.txds-select--success {
  border-color: var(--txds-color-success-50);
  border-width: 2px;
}

/* --- Textarea --- */
.txds-textarea {
  font-family: var(--txds-font-family);
  font-size: 16px;
  line-height: 22px;
  color: var(--txds-color-gray-80);
  padding: 10px 12px;
  border: 1px solid var(--txds-color-gray-30);
  border-radius: var(--txds-border-radius-sm, 4px);
  background: var(--txds-color-white);
  width: 100%;
  box-sizing: border-box;
  min-height: 120px;
  resize: vertical;
}
.txds-textarea:focus {
  outline: 2px solid var(--txds-color-primary-50);
  outline-offset: -1px;
  border-color: var(--txds-color-primary-50);
}

/* --- Checkboxes --- */
.txds-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--txds-font-family);
  font-size: 16px;
  line-height: 22px;
  color: var(--txds-color-gray-80);
  cursor: pointer;
  margin-bottom: 8px;
}
.txds-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--txds-color-primary-50);
  cursor: pointer;
  flex-shrink: 0;
}
.txds-checkbox:hover {
  color: var(--txds-color-gray-90);
}
.txds-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* --- Radio buttons --- */
.txds-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--txds-font-family);
  font-size: 16px;
  line-height: 22px;
  color: var(--txds-color-gray-80);
  cursor: pointer;
  margin-bottom: 8px;
}
.txds-radio input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--txds-color-primary-50);
  cursor: pointer;
  flex-shrink: 0;
}
.txds-radio-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ============================================
   Number Counter
   ============================================ */
.txds-counter {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--txds-color-gray-30);
  border-radius: var(--txds-border-radius-sm, 4px);
  overflow: hidden;
  background: var(--txds-color-white);
}
.txds-counter__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: var(--txds-color-gray-10);
  color: var(--txds-color-gray-60);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.txds-counter__btn:hover {
  background: var(--txds-color-primary-90);
  color: var(--txds-color-white);
}
.txds-counter__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.txds-counter__btn svg {
  width: 16px;
  height: 16px;
}
.txds-counter__value {
  width: 56px;
  height: 44px;
  border: none;
  border-left: 1px solid var(--txds-color-gray-30);
  border-right: 1px solid var(--txds-color-gray-30);
  text-align: center;
  font-family: var(--txds-font-family);
  font-size: 16px;
  font-weight: var(--txds-font-weight-semibold);
  color: var(--txds-color-gray-80);
  background: var(--txds-color-white);
  -moz-appearance: textfield;
  appearance: textfield;
}
.txds-counter__value::-webkit-inner-spin-button,
.txds-counter__value::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.txds-counter__message {
  margin: 8px 0 0;
  font-family: var(--txds-font-family);
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--txds-font-weight-semibold);
  color: var(--txds-color-error);
  min-height: 20px;
}

.txds-counter--error {
  border-color: var(--txds-color-error);
}

.txds-counter--error .txds-counter__value {
  border-color: var(--txds-color-error);
}

/* ============================================
   Filter Panel
   ============================================ */
.txds-filter-panel {
  border: 1px solid var(--txds-color-gray-30);
  border-radius: var(--txds-border-radius-lg, 8px);
  overflow: hidden;
  background: var(--txds-color-gray-10);
}
.txds-filter-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--txds-color-primary-50);
  border-bottom: 1px solid var(--txds-color-gray-30);
}
.txds-filter-panel__header-title {
  font-family: var(--txds-font-family);
  font-weight: var(--txds-font-weight-bold);
  font-size: 24px;
  line-height: 32px;
  color: var(--txds-color-gray-05);
  margin: 0;
}
.txds-filter-panel__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  color: var(--txds-color-gray-05);
  cursor: pointer;
  border-radius: var(--txds-border-radius-sm, 4px);
  transition: background-color 0.15s;
}
.txds-filter-panel__toggle:hover {
  background: rgba(255, 255, 255, 0.15);
}
.txds-filter-panel__toggle svg {
  width: 16px;
  height: 16px;
}
.txds-filter-panel__section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--txds-color-gray-20);
  background: var(--txds-color-white);
  margin: 8px;
  border-radius: var(--txds-border-radius-sm, 4px);
  border: 1px solid var(--txds-color-gray-20);
}
.txds-filter-panel__section:last-of-type {
  margin-bottom: 8px;
}
.txds-filter-panel__section-title {
  font-family: var(--txds-font-family);
  font-weight: var(--txds-font-weight-bold);
  font-size: 20px;
  line-height: 28px;
  color: var(--txds-color-gray-70);
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--txds-color-gray-20);
}
.txds-filter-panel__section-label {
  font-family: var(--txds-font-family);
  font-size: 14px;
  line-height: 20px;
  color: var(--txds-color-gray-50);
  margin: 0 0 8px;
}
.txds-filter-panel__action {
  display: block;
  width: calc(100% - 40px);
  margin: 16px 20px;
  padding: 12px 24px;
  font-family: var(--txds-font-family);
  font-weight: var(--txds-font-weight-bold);
  font-size: 16px;
  line-height: 22px;
  color: var(--txds-color-secondary-90);
  background: var(--txds-color-secondary-50);
  border: 2px solid var(--txds-color-secondary-50);
  border-radius: var(--txds-border-radius-sm, 4px);
  cursor: pointer;
  text-align: center;
  transition: background-color 0.15s, color 0.15s;
}
.txds-filter-panel__action:hover {
  background: var(--txds-color-secondary-60);
  color: var(--txds-color-white);
}

/* Boxed variant — darker header */
.txds-filter-panel--boxed .txds-filter-panel__header {
  background: var(--txds-color-gray-70);
}
.txds-filter-panel--boxed .txds-filter-panel__header-title {
  color: var(--txds-color-white);
}
.txds-filter-panel--boxed .txds-filter-panel__toggle {
  color: var(--txds-color-white);
}
.txds-filter-panel--boxed .txds-filter-panel__toggle:hover {
  background: var(--txds-color-gray-60);
}

/* Unfilled variant — transparent header */
.txds-filter-panel--unfilled {
  border-color: var(--txds-color-gray-20);
  background: var(--txds-color-white);
}
.txds-filter-panel--unfilled .txds-filter-panel__header {
  background: var(--txds-color-white);
  border-bottom-color: var(--txds-color-gray-20);
}
.txds-filter-panel--unfilled .txds-filter-panel__header-title {
  color: var(--txds-color-gray-80);
}
.txds-filter-panel--unfilled .txds-filter-panel__toggle {
  color: var(--txds-color-gray-60);
}
.txds-filter-panel--unfilled .txds-filter-panel__toggle:hover {
  background: var(--txds-color-gray-10);
}

@media (max-width: 767px) {
  .txds-component-section {
    flex-direction: column;
  }
  .txds-component-sidebar {
    flex: none;
    border-right: none;
    border-bottom: 1px solid var(--txds-color-gray-30);
    padding-right: 0;
    padding-bottom: 24px;
    margin-bottom: 24px;
  }
  .txds-component-demo {
    padding-left: 0;
  }
  .txds-input-state-row {
    flex-wrap: wrap;
  }
  .txds-check-radio-grid {
    grid-template-columns: 1fr;
  }
  .txds-filters-row {
    flex-direction: column;
  }
  .txds-filter-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .txds-filter-bar__clear {
    margin-left: 0;
  }
  .txds-checkbox-row {
    flex-direction: column;
  }
}


/* --- src/components/language-selector/language-selector.css --- */
/* ============================================
   Component: Language Selector  (.txds-lang-selector)
   Texas Design System
   Variants: Filled / Outline / Button
   States: Default / Hover / Clicked (dropdown open)
   ============================================ */

.txds-lang-selector {
  font-family: var(--txds-font-family);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 8px;
  border-radius: 8px;
  border: none;
  background: none;
  cursor: pointer;
  position: relative;
}

/* Button variant — globe + label, wider right padding */
.txds-lang-selector--button {
  padding-right: 12px;
}

/* ==============================
   Variant: Outline
   ============================== */

.txds-lang-selector--outline {
  border: 1px solid var(--txds-color-primary-50);
}

.txds-lang-selector--outline .txds-lang-selector__icon svg {
  stroke: var(--txds-color-primary-50);
}

.txds-lang-selector--outline .txds-lang-selector__label {
  font-size: 16px;
  font-weight: var(--txds-font-weight-bold);
  line-height: 24px;
  color: var(--txds-color-primary-50);
}

.txds-lang-selector--outline .txds-lang-selector__caret svg {
  stroke: var(--txds-color-primary-50);
}

.txds-lang-selector--outline:hover {
  border-color: var(--txds-color-primary-90);
}

.txds-lang-selector--outline:hover .txds-lang-selector__icon svg {
  stroke: var(--txds-color-primary-90);
}

.txds-lang-selector--outline:hover .txds-lang-selector__label {
  color: var(--txds-color-primary-90);
}

.txds-lang-selector--outline:hover .txds-lang-selector__caret svg {
  stroke: var(--txds-color-primary-90);
}

/* ==============================
   Variant: Filled
   ============================== */

.txds-lang-selector--filled {
  background: var(--txds-color-primary-60);
  border: 2px solid var(--txds-color-gray-05);
}

.txds-lang-selector--filled .txds-lang-selector__label {
  font-size: 16px;
  font-weight: var(--txds-font-weight-bold);
  line-height: 24px;
  color: var(--txds-color-gray-05);
}

.txds-lang-selector--filled .txds-lang-selector__caret svg {
  stroke: var(--txds-color-gray-05);
}

/* ==============================
   Shared sub-elements
   ============================== */

.txds-lang-selector__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.txds-lang-selector__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.txds-lang-selector--button .txds-lang-selector__icon svg {
  stroke: var(--txds-color-primary-50);
}

.txds-lang-selector__label {
  font-size: 16px;
  font-weight: var(--txds-font-weight-bold);
  line-height: 24px;
  white-space: nowrap;
}

.txds-lang-selector__caret {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.txds-lang-selector__caret svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ==============================
   Dropdown (clicked state)
   ============================== */

.txds-lang-selector__dropdown {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.txds-lang-selector__dropdown-item {
  font-family: var(--txds-font-family);
  font-size: 16px;
  font-weight: var(--txds-font-weight-bold);
  line-height: 24px;
  padding: 4px 0;
  cursor: pointer;
  background: transparent;
  border: none;
  text-align: left;
  white-space: nowrap;
}

/* Outline dropdown */
.txds-lang-selector--outline .txds-lang-selector__dropdown-item {
  color: var(--txds-color-primary-60);
  letter-spacing: 1px;
}

.txds-lang-selector--outline .txds-lang-selector__dropdown-item:hover {
  color: var(--txds-color-primary-50);
}

/* Filled dropdown */
.txds-lang-selector--filled .txds-lang-selector__dropdown-item {
  color: var(--txds-color-gray-05);
}

.txds-lang-selector--filled .txds-lang-selector__dropdown-item:hover {
  color: var(--txds-color-gray-00);
}

/* Open state — stacked layout (uses <div> wrapper to allow nested buttons) */
.txds-lang-selector--open {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 4px 4px 4px 8px;
  cursor: default;
}

.txds-lang-selector--open .txds-lang-selector__header {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Ensure dropdown-item buttons inherit the container background (transparent) */
.txds-lang-selector--open .txds-lang-selector__dropdown-item {
  background: transparent;
}

/* Outline open — border + text go to primary-60 */
.txds-lang-selector--outline.txds-lang-selector--open {
  border-color: var(--txds-color-primary-60);
}

.txds-lang-selector--outline.txds-lang-selector--open .txds-lang-selector__label {
  color: var(--txds-color-primary-60);
}

.txds-lang-selector--outline.txds-lang-selector--open .txds-lang-selector__caret svg {
  stroke: var(--txds-color-primary-60);
}

/* Button hover — border + text + icon go to primary-60 */
.txds-lang-selector--button:hover,
.txds-lang-selector--button-hover {
  border-color: var(--txds-color-primary-90);
}

.txds-lang-selector--button:hover .txds-lang-selector__icon svg,
.txds-lang-selector--button-hover .txds-lang-selector__icon svg {
  stroke: var(--txds-color-secondary-60);
}

.txds-lang-selector--button:hover .txds-lang-selector__label,
.txds-lang-selector--button-hover .txds-lang-selector__label {
  color: var(--txds-color-primary-90);
}

.txds-lang-selector-preview {
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: flex-start;
}

.txds-lang-selector-preview__top-row {
  display: flex;
  gap: 52px;
  align-items: flex-start;
}

.txds-lang-selector-preview__variant-col,
.txds-lang-selector-preview__button-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

.txds-lang-selector-preview__button-row {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}


/* --- src/components/link/link.css --- */
/* ============================================
   Component: Text Link  (.txds-link)
   ============================================ */

.txds-link {
  font-family: var(--txds-font-family);
  font-weight: var(--txds-font-weight-extrabold); /* 800 */
  font-size: var(--txds-font-size-body-sm); /* 16px — Small (default) */
  line-height: 22px;
  color: var(--txds-color-primary-50);
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-offset: 2px;
  cursor: pointer;
}

.txds-link:hover {
  color: var(--txds-color-primary-60);
}
.txds-link:focus-visible {
  outline: var(--txds-focus-width) solid var(--txds-focus-color);
  outline-offset: var(--txds-focus-offset);
}

.txds-link:visited {
  color: var(--txds-color-purple-60);
}

/* --- Sizes --- */
.txds-link--lg {
  font-size: var(--txds-font-size-body-lg); /* 18px */
  line-height: 26px;
}

.txds-link--xl {
  font-size: var(--txds-font-size-body-xl); /* 24px */
  line-height: 38px;
}

/* --- Document link (icon + text) --- */
.txds-link-doc {
  display: inline-flex;
  align-items: flex-start;
  gap: 16px;
  font-family: var(--txds-font-family);
  font-weight: var(--txds-font-weight-extrabold); /* 800 */
  font-size: var(--txds-font-size-body-lg); /* 18px */
  line-height: 22px;
  color: var(--txds-color-primary-50);
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-offset: 2px;
  cursor: pointer;
}

.txds-link-doc:hover {
  color: var(--txds-color-primary-60);
}
.txds-link-doc:focus-visible {
  outline: var(--txds-focus-width) solid var(--txds-focus-color);
  outline-offset: var(--txds-focus-offset);
}

.txds-link-doc:visited {
  color: var(--txds-color-purple-60);
}

.txds-link-doc__icon {
  display: inline-flex;
  flex-shrink: 0;
  padding-top: 2px;
}

.txds-link-doc__icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}


/* --- src/components/location-search/location-search.css --- */
/* ============================================
   Component: Location Search  (.txds-location-search)
   ============================================ */

.txds-location-search {
  font-family: var(--txds-font-family);
  background: var(--txds-color-gray-00, #FAFAFA);
  border-radius: var(--txds-border-radius, 4px);
  box-shadow: var(--txds-shadow-card);
  overflow: hidden;
}

/* Top accent bar */
.txds-location-search__bar {
  height: 4px;
  background: var(--txds-color-primary-60, #2A3D4E);
  border-radius: 4px 4px 0 0;
}

/* =====================
   Horizontal layout (default)
   ===================== */
.txds-location-search--horizontal .txds-location-search__inner {
  display: flex;
  align-items: center;
  gap: 68px;
  padding: 40px;
}

/* Texas map graphic */
.txds-location-search__graphic {
  flex-shrink: 0;
  width: 232px;
  display: flex;
  align-items: center;
}

.txds-location-search__graphic img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Vertical divider line */
.txds-location-search__divider {
  width: 1px;
  align-self: stretch;
  background: var(--txds-color-gray-30, #C9C9C5);
  flex-shrink: 0;
}

/* Content area */
.txds-location-search__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

/* Text block */
.txds-location-search__heading {
  font-size: var(--txds-font-size-h3, 32px);
  font-weight: var(--txds-font-weight-bold, 700);
  line-height: var(--txds-line-height-h3, 38px);
  color: var(--txds-color-gray-70, #403C37);
  margin: 0;
}

.txds-location-search__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: var(--txds-color-gray-70, #403C37);
  margin: 8px 0 0;
}

/* Combobox */
.txds-location-search__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 450px;
  width: 100%;
}

.txds-location-search__label {
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: var(--txds-color-gray-80, #2B2926);
}

.txds-location-search__combobox {
  display: block;
  width: 100%;
  padding: 8px;
  font-family: var(--txds-font-family);
  font-size: 16px;
  color: var(--txds-color-gray-80, #2B2926);
  background: var(--txds-color-gray-00, #FAFAFA);
  border: 1px solid var(--txds-color-gray-30, #C9C9C5);
  border-radius: 4px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23565c65' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.txds-location-search__combobox:focus {
  outline: 2px solid var(--txds-color-primary-50, #486687);
  outline-offset: 0;
  border-color: var(--txds-color-primary-50, #486687);
}

/* Submit button (blue primary) */
.txds-location-search__button {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  padding: 16px 40px;
  background: var(--txds-color-primary-50, #486687);
  color: var(--txds-color-gray-00, #FAFAFA);
  font-family: var(--txds-font-family);
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
  border: none;
  border-radius: var(--txds-border-radius, 4px);
  cursor: pointer;
  transition: background 0.15s;
}

.txds-location-search__button:hover {
  background: var(--txds-color-primary-60, #2A3D4E);
}

/* =====================
   Vertical layout
   ===================== */
.txds-location-search--vertical {
  max-width: 338px;
}

.txds-location-search--vertical .txds-location-search__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: 40px;
}

.txds-location-search--vertical .txds-location-search__graphic {
  width: 194px;
}

.txds-location-search--vertical .txds-location-search__content {
  align-items: center;
  text-align: left;
  width: 100%;
}

.txds-location-search--vertical .txds-location-search__heading {
  font-size: var(--txds-font-size-h4, 24px);
  line-height: var(--txds-line-height-h4, 30px);
}

.txds-location-search--vertical .txds-location-search__field {
  max-width: 100%;
}

.txds-location-search--vertical .txds-location-search__button {
  width: auto;
}

/* =====================
   Mobile
   ===================== */
@media (max-width: 767px) {
  .txds-location-search--horizontal .txds-location-search__inner {
    flex-direction: column;
    gap: 32px;
  }

  .txds-location-search__graphic {
    width: 160px;
  }

  .txds-location-search__divider {
    display: none;
  }

  .txds-location-search__field {
    max-width: 100%;
  }

  .txds-location-search__button {
    width: auto;
  }
}


/* --- src/components/mega-menu/mega-menu.css --- */
/* ============================================
   Component: Mega Menu  (.txds-mega-menu)
   Texas Design System
   Supports 2-, 3-, and 4-column layouts.
   ============================================ */

.txds-mega-menu {
  font-family: var(--txds-font-family);
  background: var(--txds-color-gray-05);
  border-radius: 0 0 16px 16px;
  box-shadow: var(--txds-shadow-card);
  overflow: hidden;
  width: 100%;
}

.txds-mega-menu__inner {
  padding: 32px 64px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end;
}

/* ---- Section title (e.g. "Public Health") ---- */
.txds-mega-menu__title {
  font-size: var(--txds-font-size-h4);
  font-weight: var(--txds-font-weight-bold);
  line-height: var(--txds-line-height-h4);
  color: var(--txds-color-primary-50);
  width: 100%;
  margin: 0;
}

/* ---- Column grid ---- */
.txds-mega-menu__columns {
  display: grid;
  gap: 40px;
  width: 100%;
}

.txds-mega-menu--4col .txds-mega-menu__columns {
  grid-template-columns: repeat(4, 1fr);
}

.txds-mega-menu--3col .txds-mega-menu__columns {
  grid-template-columns: repeat(3, 1fr);
}

.txds-mega-menu--2col .txds-mega-menu__columns {
  grid-template-columns: repeat(2, 1fr);
}

/* ---- Individual column ---- */
.txds-mega-menu__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.txds-mega-menu__col-title {
  display: flex;
  align-items: flex-end;
  min-height: 48px;
  font-size: 16px;
  font-weight: var(--txds-font-weight-extrabold);
  line-height: 24px;
  color: var(--txds-color-gray-70);
  margin: 0;
}

.txds-mega-menu__col-divider {
  border: none;
  border-top: 1px solid var(--txds-color-gray-30);
  margin: 0;
}

.txds-mega-menu__link {
  font-size: 16px;
  font-weight: var(--txds-font-weight-normal);
  line-height: 20px;
  color: var(--txds-color-primary-50);
  text-decoration: underline;
  transition: color var(--snappy, 0.3s ease-in-out);
}

.txds-mega-menu__link:hover {
  color: var(--txds-color-primary-60);
}

/* ---- "View all" link ---- */
.txds-mega-menu__view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: var(--txds-font-weight-extrabold);
  line-height: 20px;
  color: var(--txds-color-primary-50);
  text-decoration: underline;
  align-self: flex-end;
}

.txds-mega-menu__view-all:hover {
  color: var(--txds-color-primary-60);
}

.txds-mega-menu__view-all svg {
  width: 24px;
  height: 24px;
}

/* ---- Mobile stacking ---- */
@media (max-width: 767px) {
  .txds-mega-menu__inner {
    padding: 24px;
  }

  .txds-mega-menu--4col .txds-mega-menu__columns,
  .txds-mega-menu--3col .txds-mega-menu__columns,
  .txds-mega-menu--2col .txds-mega-menu__columns {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}


/* --- src/components/mobile-menu/mobile-menu.css --- */
/* ============================================
   Component: Mobile Menu  (.txds-mobile-menu)
   Texas Design System
   A slide-out mobile navigation panel at 375px
   with expandable menu sections, language button,
   and search bar.
   ============================================ */

.txds-mobile-menu,
.txds-mobile-menu * {
  box-sizing: border-box;
}

.txds-mobile-menu {
  font-family: var(--txds-font-family);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 375px;
  box-sizing: border-box;
  background: var(--txds-color-gray-05);
  box-shadow: var(--txds-shadow-panel);
}

/* ==============================
   Top bar — logo + close
   ============================== */

.txds-mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 72px;
  padding: 8px 24px;
  background: var(--txds-color-gray-05);
  box-shadow: var(--txds-shadow-header);
}

.txds-mobile-menu__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 32px;
  max-height: 32px;
  text-decoration: none;
}

.txds-mobile-menu__logo img,
.txds-mobile-menu__logo svg {
  width: 180px;
  max-width: 180px;
  height: 32px;
  max-height: 32px;
  object-fit: contain;
  display: block;
}

.txds-mobile-menu__close {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  background: none;
  border: none;
  cursor: pointer;
}

.txds-mobile-menu__close-label {
  font-size: 16px;
  font-weight: var(--txds-font-weight-extrabold);
  line-height: 18px;
  color: var(--txds-color-primary-50);
}

.txds-mobile-menu__close-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.txds-mobile-menu__close-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: var(--txds-color-primary-50);
}

/* ==============================
   Language row
   ============================== */

.txds-mobile-menu__lang {
  display: flex;
  align-items: flex-start;
  padding: 16px 24px;
  width: 100%;
  background: var(--txds-color-gray-05);
}

.txds-mobile-menu__lang .txds-lang-selector__icon svg,
.txds-mobile-menu__lang .txds-lang-selector:hover .txds-lang-selector__icon svg {
  stroke: var(--txds-color-primary-50);
}

/* ==============================
   Search row
   ============================== */

.txds-mobile-menu__search {
  display: flex;
  align-items: flex-start;
  padding: 16px 24px;
  width: 100%;
  background: var(--txds-color-gray-05);
}

.txds-mobile-menu__search-bar {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}

.txds-mobile-menu__search-field {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border: 1px solid var(--txds-color-primary-50);
  border-right: none;
  border-radius: 4px 0 0 4px;
  background: transparent;
  min-width: 0;
}

.txds-mobile-menu__search-field:focus-within {
  outline: var(--txds-focus-width) solid var(--txds-focus-color);
  outline-offset: var(--txds-focus-offset);
}

.txds-mobile-menu__search-field input {
  border: none;
  background: none;
  font-family: var(--txds-font-family);
  font-size: 14px;
  width: 100%;
  min-width: 0;
  outline: none;
  color: var(--txds-color-gray-70);
}

.txds-mobile-menu__search-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.txds-mobile-menu__search-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: var(--txds-color-primary-50);
}

.txds-mobile-menu__search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 6px 8px;
  background: var(--txds-color-primary-50);
  border: 1px solid var(--txds-color-primary-50);
  border-left: none;
  border-radius: 0 4px 4px 0;
  font-family: var(--txds-font-family);
  font-size: 14px;
  font-weight: var(--txds-font-weight-bold);
  line-height: 24px;
  color: var(--txds-color-gray-00);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--snappy, 0.3s ease-in-out);
}

.txds-mobile-menu__search-btn:hover {
  background: var(--txds-color-primary-60);
}

/* ==============================
   Menu items — collapsed
   ============================== */

.txds-mobile-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  width: 100%;
  background: var(--txds-color-gray-05);
  border: none;
  cursor: pointer;
}

.txds-mobile-menu__item-label {
  font-size: 16px;
  font-weight: var(--txds-font-weight-semibold);
  color: var(--txds-color-primary-50);
}

.txds-mobile-menu__item-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.txds-mobile-menu__item-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: var(--txds-color-primary-50);
}

/* ==============================
   Menu item — expanded
   ============================== */

.txds-mobile-menu__item--expanded {
  flex-wrap: wrap;
  padding: 23px 24px 0;
  cursor: default;
}

.txds-mobile-menu__item--expanded .txds-mobile-menu__item-label {
  font-weight: var(--txds-font-weight-extrabold);
  color: var(--txds-color-primary-60);
}

.txds-mobile-menu__item--expanded .txds-mobile-menu__item-icon svg {
  stroke: var(--txds-color-primary-60);
}

.txds-mobile-menu__item-divider {
  width: 348px;
  height: 3px;
  background: var(--txds-color-secondary-60);
  margin: 19px auto 0;
}

/* ==============================
   Subsection panel (dark)
   ============================== */

.txds-mobile-menu__subsection {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--txds-color-primary-50);
}

.txds-mobile-menu__subsection-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 40px;
  width: 100%;
  background: var(--txds-color-primary-50);
  font-size: 14px;
  font-weight: var(--txds-font-weight-extrabold);
  line-height: 24px;
  color: var(--txds-color-gray-05);
}

.txds-mobile-menu__subsection-link-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 40px;
  width: 100%;
  background: var(--txds-color-primary-50);
}

.txds-mobile-menu__subsection-link {
  flex: 1 0 0;
  min-width: 0;
  font-size: 14px;
  font-weight: var(--txds-font-weight-medium);
  line-height: 18px;
  color: var(--txds-color-gray-05);
  text-decoration: underline;
  transition: color var(--snappy, 0.3s ease-in-out);
}

.txds-mobile-menu__subsection-link:hover {
  color: var(--txds-color-gray-00);
}

.txds-mobile-menu__subsection-viewall-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 24px 12px 40px;
  width: 100%;
  background: var(--txds-color-primary-50);
}

.txds-mobile-menu__view-all {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 13px;
  padding-right: 16px;
  font-size: 14px;
  font-weight: var(--txds-font-weight-medium);
  line-height: 18px;
  color: var(--txds-color-gray-05);
  text-decoration: underline;
}

.txds-mobile-menu-doc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  margin: 32px 0;
}

.txds-mobile-menu-doc-frame {
  width: 375px;
}

.txds-mobile-menu-doc-frame-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.txds-mobile-menu-doc-frame-padded {
  background: var(--txds-color-gray-05);
  padding: 16px 24px;
}

.txds-mobile-menu-doc-search-bg {
  background: var(--txds-color-gray-05);
}

.txds-mobile-menu__view-all svg {
  width: 24px;
  height: 24px;
  stroke: var(--txds-color-gray-05);
  flex-shrink: 0;
}

/* ==============================
   Subsection — Closed (semibold)
   ============================== */

.txds-mobile-menu__subsection-closed {
  display: flex;
  align-items: center;
  padding: 16px 40px;
  width: 100%;
  background: var(--txds-color-primary-50);
}

.txds-mobile-menu__subsection-closed span {
  flex: 1 0 0;
  min-width: 0;
  font-size: 14px;
  font-weight: var(--txds-font-weight-semibold);
  line-height: 24px;
  color: var(--txds-color-gray-05);
}

/* ==============================
   Admin Header — Link row
   ============================== */

.txds-mobile-menu__admin-link {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 24px;
  width: 100%;
  background: var(--txds-color-primary-60);
}

.txds-mobile-menu__admin-link a {
  flex: 1 0 0;
  min-width: 0;
  font-size: 16px;
  font-weight: var(--txds-font-weight-medium);
  line-height: 22px;
  color: var(--txds-color-gray-05);
  text-decoration: underline;
}

.txds-mobile-menu__admin-link a:hover {
  color: var(--txds-color-gray-00);
}

/* ==============================
   Admin Header — Social icons row
   ============================== */

.txds-mobile-menu__admin-social {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px;
  width: 100%;
  background: var(--txds-color-primary-60);
}

.txds-mobile-menu__admin-social a,
.txds-mobile-menu__admin-social .txds-mobile-menu__social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--txds-color-gray-05);
  text-decoration: none;
}

.txds-mobile-menu__admin-social a svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: var(--txds-color-gray-05);
  fill: none;
}

.txds-mobile-menu__admin-social a:hover svg {
  stroke: var(--txds-color-gray-00);
}

/* ==============================
   Mobile Menu Button (trigger)
   ============================== */

.txds-mobile-menu-btn {
  font-family: var(--txds-font-family);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  background: none;
  border: none;
  cursor: pointer;
}

.txds-mobile-menu-btn__label {
  font-size: 16px;
  font-weight: var(--txds-font-weight-extrabold);
  line-height: 18px;
}

.txds-mobile-menu-btn--default .txds-mobile-menu-btn__label {
  color: var(--txds-color-gray-70);
}

.txds-mobile-menu-btn--clicked .txds-mobile-menu-btn__label {
  color: var(--txds-color-primary-50);
}

.txds-mobile-menu-btn__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.txds-mobile-menu-btn__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.txds-mobile-menu-btn--default .txds-mobile-menu-btn__icon svg {
  stroke: var(--txds-color-gray-70);
}

.txds-mobile-menu-btn--clicked .txds-mobile-menu-btn__icon svg {
  stroke: var(--txds-color-primary-50);
}


/* --- src/components/news-card/news-card.css --- */
/* ============================================
   Component: News Card  (.txds-news-card)
   News releases and event cards with colored
   top bar, date, title, and description.
   ============================================ */

.txds-news-card {
  font-family: var(--txds-font-family);
  background: var(--txds-color-gray-00, #fafafa);
  border-radius: var(--txds-border-radius, 4px);
  overflow: clip;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 346px;
  height: 300px;
  padding-bottom: 24px;
  transition: box-shadow var(--snappy, 0.3s ease-in-out);
}

.txds-news-card:hover {
  box-shadow: var(--txds-shadow-card);
}

/* --- Color bar --- */
.txds-news-card__bar {
  height: 4px;
  width: 100%;
  flex-shrink: 0;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.txds-news-card--news .txds-news-card__bar {
  background: var(--txds-color-purple-50, #9e60dd);
}
.txds-news-card--events .txds-news-card__bar {
  background: var(--txds-color-teal-50, #7cc1d3);
}

/* --- Body --- */
.txds-news-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 32px;
  flex: 1;
}

/* --- Tag chip --- */
.txds-news-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  background: var(--txds-color-gray-10);
  border-radius: var(--txds-border-radius, 4px);
  font-size: var(--txds-font-size-caption, 12px);
  font-weight: var(--txds-font-weight-semibold);
  color: var(--txds-color-gray-70);
  align-self: flex-start;
}

.txds-news-card__tag-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  flex-shrink: 0;
}

.txds-news-card__tag-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* --- Date --- */
.txds-news-card__date {
  font-size: 14px;
  line-height: var(--txds-line-height-caption, 24px);
  color: var(--txds-color-gray-60);
  margin: 0;
}

/* --- Title --- */
.txds-news-card__title {
  font-family: var(--txds-font-family-header);
  font-size: 22px;
  font-weight: var(--txds-font-weight-extrabold);
  line-height: 26px;
  color: var(--txds-color-primary-50);
  margin: 0;
}
.txds-news-card:hover .txds-news-card__title {
  color: var(--txds-color-primary-60);
}

.txds-news-card__title a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* --- Text --- */
.txds-news-card__text {
  font-size: var(--txds-font-size-body-md);
  line-height: var(--txds-line-height-body-md, 30px);
  color: var(--txds-color-gray-70);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* --- News card group --- */
.txds-news-card-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 346px));
  gap: 24px;
}

@media (max-width: 767px) {
  .txds-news-card-group {
    grid-template-columns: 1fr;
  }
  .txds-news-card {
    width: 100%;
    height: auto;
    min-height: 240px;
  }
  .txds-news-card__body {
    padding: 0 24px 24px;
  }
}


/* --- src/components/page-header/page-header.css --- */
/* ============================================
   Component: Page Header  (.txds-page-header)
   Dark landing page header with breadcrumbs,
   H1 title, and optional body text.
   ============================================ */

.txds-page-header {
  font-family: var(--txds-font-family);
  background: var(--txds-color-primary-60);
  color: var(--txds-color-gray-05);
  width: 100%;
  overflow: clip;
}

.txds-page-header__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 32px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 64px 64px 144px;
  min-height: 316px;
  box-sizing: border-box;
}
.txds-page-header__inner .txds-breadcrumb {
  margin-bottom: -16px;
}

.txds-page-header__title {
  font-family: var(--txds-font-family-header);
  font-size: var(--txds-font-size-h1, 50px);
  font-weight: var(--txds-font-weight-bold, 700);
  line-height: var(--txds-line-height-h1, 52px);
  color: var(--txds-color-gray-05);
  margin: 0;
  text-align: left;
}

.txds-page-header__text {
  font-size: var(--txds-font-size-body-lg, 20px);
  line-height: var(--txds-line-height-body-lg, 32px);
  color: var(--txds-color-gray-05);
  margin: 0;
  text-align: left;
}

/* --- Image variant --- */
.txds-page-header--image {
  background: transparent;
  position: relative;
  overflow: hidden;
  min-height: 560px;
  padding: 104px 0 32px;
  padding-right: var(--txds-padding-l, 64px);
  border-bottom: 8px solid var(--txds-color-primary-10, #9db2ca);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}
.txds-page-header--image .txds-page-header__bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}
.txds-page-header--image .txds-page-header__inner {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  align-items: flex-start;
  gap: 0;
  padding: 0;
  min-height: auto;
  margin: 0;
}
.txds-page-header--image .txds-page-header__breadcrumb-bar {
  background: #fff;
  padding: 8px 16px;
  max-width: 750px;
  width: 100%;
}
.txds-page-header--image .txds-page-header__breadcrumb-bar .txds-breadcrumb {
  margin-bottom: 0;
}
.txds-page-header--image .txds-page-header__title-bar {
  background: var(--txds-color-primary-60, #2a3d4e);
  padding: 24px 16px;
  max-width: 750px;
  width: 100%;
}
.txds-page-header--image .txds-page-header__title {
  color: var(--txds-color-gray-05, #f8f8f7);
}

/* --- No-fill (light) variant --- */
.txds-page-header--light {
  background: transparent;
  color: var(--txds-color-gray-70);
}
.txds-page-header--light .txds-page-header__title {
  color: var(--txds-color-gray-70);
}
.txds-page-header--light .txds-page-header__text {
  color: var(--txds-color-gray-70);
}



@media (max-width: 767px) {
  .txds-page-header__inner {
    padding: 32px 24px;
    min-height: auto;
  }
  .txds-page-header--image {
    min-height: 400px;
    padding: 72px 16px 24px;
  }
}


/* --- src/components/pagination/pagination.css --- */
/* ============================================
   Component: Pagination  (.txds-pagination)
   ============================================ */

.txds-pagination {
  font-family: var(--txds-font-family);
  padding: var(--txds-space-4) 0;
}

.txds-pagination__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

/* --- Number items --- */
.txds-pagination__item a,
.txds-pagination__item span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: var(--txds-font-size-body-sm); /* 16px */
  font-weight: var(--txds-font-weight-extrabold); /* 800 */
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid var(--txds-color-gray-30);
  background-color: var(--txds-color-gray-05);
  color: var(--txds-color-primary-50);
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

.txds-pagination__item a:hover {
  background-color: var(--txds-color-gray-05);
  border-color: var(--txds-color-primary-60);
  color: var(--txds-color-primary-60);
}
.txds-pagination__item a:focus-visible {
  outline: var(--txds-focus-width) solid var(--txds-focus-color);
  outline-offset: var(--txds-focus-offset);
}

/* --- Current / active page --- */
.txds-pagination__item--current span {
  background-color: var(--txds-color-primary-60);
  border-color: var(--txds-color-primary-60);
  color: var(--txds-color-gray-05);
  font-weight: var(--txds-font-weight-extrabold);
}

/* --- Ellipsis --- */
.txds-pagination__item--ellipsis span {
  border-color: var(--txds-color-gray-30);
  background-color: var(--txds-color-gray-05);
  color: var(--txds-color-primary-60);
  cursor: default;
}

/* --- Nav links (First, Previous, Next, Last) --- */
.txds-pagination__item--prev a,
.txds-pagination__item--prev span,
.txds-pagination__item--next a,
.txds-pagination__item--next span,
.txds-pagination__item--first a,
.txds-pagination__item--first span,
.txds-pagination__item--last a,
.txds-pagination__item--last span {
  width: auto;
  padding: 0 var(--txds-space-2);
  border: none;
  background: transparent;
  gap: 4px;
}

.txds-pagination__item--prev a,
.txds-pagination__item--prev span,
.txds-pagination__item--first a,
.txds-pagination__item--first span {
  font-weight: var(--txds-font-weight-normal); /* 400 — Regular */
  color: var(--txds-color-primary-50);
}
.txds-pagination__item--prev a:hover,
.txds-pagination__item--first a:hover {
  color: var(--txds-color-primary-60);
  border: none;
  background: transparent;
}
.txds-pagination__item--prev a:focus-visible,
.txds-pagination__item--first a:focus-visible {
  outline: var(--txds-focus-width) solid var(--txds-focus-color);
  outline-offset: var(--txds-focus-offset);
}

.txds-pagination__item--next a,
.txds-pagination__item--next span,
.txds-pagination__item--last a,
.txds-pagination__item--last span {
  font-weight: var(--txds-font-weight-extrabold); /* 800 */
  color: var(--txds-color-primary-60);
}
.txds-pagination__item--next a:hover,
.txds-pagination__item--last a:hover {
  color: var(--txds-color-primary-60);
  border: none;
  background: transparent;
}
.txds-pagination__item--next a:focus-visible,
.txds-pagination__item--last a:focus-visible {
  outline: var(--txds-focus-width) solid var(--txds-focus-color);
  outline-offset: var(--txds-focus-offset);
}

/* --- Disabled state --- */
.txds-pagination__item--disabled a,
.txds-pagination__item--disabled span {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

/* --- Mobile: hide First/Last/numbered nav, keep prev/next + active --- */
@media (max-width: 640px) {
  .txds-pagination__item--first,
  .txds-pagination__item--last {
    display: none;
  }
  .txds-pagination__list {
    gap: 8px;
  }
}


/* --- src/components/photo-quote/photo-quote.css --- */
/* ============================================
   Component: Photo Quote  (.txds-photo-quote)
   ============================================ */

.txds-photo-quote {
  font-family: var(--txds-font-family);
  display: flex;
  position: relative;
  width: 100%;
}

/* --- Photo area --- */
.txds-photo-quote__photo {
  position: relative;
  overflow: hidden;
}

.txds-photo-quote__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Quote block --- */
.txds-photo-quote__quote {
  background: var(--txds-color-gray-10, #EEEEEC);
  border-radius: 16px;
  padding: 40px 64px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-shrink: 0;
}

.txds-photo-quote__title {
  font-size: var(--txds-font-size-h3, 32px);
  font-weight: var(--txds-font-weight-bold, 700);
  line-height: var(--txds-line-height-h3, 38px);
  color: var(--txds-color-gray-70, #403C37);
  margin: 0;
}

.txds-photo-quote__body {
  font-size: 24px;
  font-weight: 400;
  line-height: 39px;
  color: var(--txds-color-gray-70, #403C37);
  margin: 0;
}

.txds-photo-quote__body::before,
.txds-photo-quote__body::after {
  color: inherit;
}

.txds-photo-quote__body::before {
  content: "\201C";
}

.txds-photo-quote__body::after {
  content: "\201D";
}

.txds-photo-quote__attribution {
  font-size: var(--txds-font-size-h4, 28px);
  font-weight: var(--txds-font-weight-bold, 700);
  line-height: var(--txds-line-height-h4, 32px);
  color: var(--txds-color-gray-70, #403C37);
  margin: 0;
}

/* =====================
   Position: Bottom (default)
   Photo on top, quote below overlapping
   ===================== */
.txds-photo-quote--bottom {
  flex-direction: column;
  justify-content: center;
  padding-bottom: 104px;
}

.txds-photo-quote--bottom .txds-photo-quote__photo {
  width: 100%;
  height: 368px;
  margin-bottom: -104px;
  flex-shrink: 0;
}

.txds-photo-quote--bottom .txds-photo-quote__quote {
  width: calc(100% - 128px);
  margin: 0 64px;
  position: relative;
  z-index: 1;
}

/* =====================
   Position: Right
   Photo on left, quote overlaps from right
   ===================== */
.txds-photo-quote--right {
  --txds-photo-quote-overlap: clamp(32px, 8vw, 104px);
  --txds-photo-quote-card-width: clamp(320px, 40vw, 519px);
  --txds-photo-quote-frame-inset: 40px;
  --txds-photo-quote-card-padding-inline: clamp(32px, 4vw, 64px);
  align-items: stretch;
  min-height: 693px;
  padding-right: var(--txds-photo-quote-overlap);
}

.txds-photo-quote--right .txds-photo-quote__photo {
  flex: 1 0 0;
  align-self: stretch;
  min-width: clamp(280px, 48%, 880px);
  min-height: 0;
  margin: 0 calc(-1 * var(--txds-photo-quote-overlap)) 0 0;
}

.txds-photo-quote--right .txds-photo-quote__photo img {
  position: absolute;
  inset: 0;
}

.txds-photo-quote--right .txds-photo-quote__quote {
  width: var(--txds-photo-quote-card-width);
  max-width: calc(100% - 16px);
  position: relative;
  z-index: 1;
  margin: var(--txds-photo-quote-frame-inset) 0;
  justify-content: center;
  align-self: auto;
  padding: 40px var(--txds-photo-quote-card-padding-inline);
}

/* =====================
   Position: Left
   Quote on left, photo on right
   ===================== */
.txds-photo-quote--left {
  --txds-photo-quote-overlap: clamp(32px, 8vw, 104px);
  --txds-photo-quote-card-width: clamp(320px, 40vw, 519px);
  --txds-photo-quote-frame-inset: 40px;
  --txds-photo-quote-card-padding-inline: clamp(32px, 4vw, 64px);
  align-items: stretch;
  min-height: 693px;
  padding-right: var(--txds-photo-quote-overlap);
  justify-content: flex-end;
  isolation: isolate;
}

.txds-photo-quote--left .txds-photo-quote__quote {
  width: var(--txds-photo-quote-card-width);
  max-width: calc(100% - 16px);
  position: relative;
  z-index: 2;
  margin-right: calc(-1 * var(--txds-photo-quote-overlap));
  margin-top: var(--txds-photo-quote-frame-inset);
  margin-bottom: var(--txds-photo-quote-frame-inset);
  justify-content: center;
  align-self: auto;
  padding: 40px var(--txds-photo-quote-card-padding-inline);
}

.txds-photo-quote--left .txds-photo-quote__photo {
  flex: 1 0 0;
  align-self: stretch;
  min-width: clamp(280px, 48%, 880px);
  min-height: 693px;
  margin-right: calc(-1 * var(--txds-photo-quote-overlap));
  margin-top: 0;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

.txds-photo-quote--left .txds-photo-quote__photo img {
  position: absolute;
  inset: 0;
}

/* =====================
   Tablet
   ===================== */
@media (max-width: 1024px) and (min-width: 768px) {
  .txds-photo-quote--right,
  .txds-photo-quote--left {
    flex-direction: column;
    min-height: auto;
    padding-right: 0;
    padding-bottom: 40px;
  }

  .txds-photo-quote--right .txds-photo-quote__photo,
  .txds-photo-quote--left .txds-photo-quote__photo {
    width: 100%;
    height: 360px;
    min-height: 0;
    flex: none;
    align-self: auto;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: -80px;
    z-index: auto;
  }

  .txds-photo-quote--right .txds-photo-quote__photo img,
  .txds-photo-quote--left .txds-photo-quote__photo img {
    position: static;
  }

  .txds-photo-quote--right .txds-photo-quote__quote,
  .txds-photo-quote--left .txds-photo-quote__quote {
    width: calc(100% - 64px);
    min-width: 0;
    max-width: none;
    margin: 0 32px;
    padding: 48px;
    align-self: auto;
    z-index: 1;
  }

  .txds-photo-quote--left .txds-photo-quote__photo {
    order: -1;
  }
}

/* =====================
   Mobile
   ===================== */
@media (max-width: 767px) {
  .txds-photo-quote--bottom .txds-photo-quote__photo {
    height: 240px;
  }

  .txds-photo-quote--bottom .txds-photo-quote__quote {
    width: calc(100% - 48px);
    margin: 0 24px;
    padding: 32px;
  }

  .txds-photo-quote--right,
  .txds-photo-quote--left {
    flex-direction: column;
    min-height: auto;
    padding-right: 0;
    padding-bottom: 40px;
  }

  .txds-photo-quote--right .txds-photo-quote__photo,
  .txds-photo-quote--left .txds-photo-quote__photo {
    width: 100%;
    height: 280px;
    min-height: 0;
    flex: none;
    align-self: auto;
    margin-right: 0;
    margin-bottom: -80px;
    z-index: auto;
  }

  .txds-photo-quote--right .txds-photo-quote__photo img,
  .txds-photo-quote--left .txds-photo-quote__photo img {
    position: static;
  }

  .txds-photo-quote--right .txds-photo-quote__quote,
  .txds-photo-quote--left .txds-photo-quote__quote {
    width: calc(100% - 32px);
    min-width: 0;
    margin: 0 16px;
    padding: 32px;
    align-self: auto;
    z-index: 1;
  }

  .txds-photo-quote--left .txds-photo-quote__photo {
    order: -1;
  }
}


/* --- src/components/program-contact-card/program-contact-card.css --- */
/* ============================================
   Component: Program Contact Card  (.txds-program-contact)
   ============================================ */

.txds-program-contact {
  font-family: var(--txds-font-family);
  background: var(--txds-color-gray-05, #F8F8F7);
  border-radius: var(--txds-border-radius, 4px);
  box-shadow: var(--txds-shadow-card);
  overflow: hidden;
  max-width: 848px;
}

/* Top accent bar */
.txds-program-contact__bar {
  height: 8px;
  background: var(--txds-color-primary-50, #486687);
  border-radius: 4px 4px 0 0;
}

/* Inner content */
.txds-program-contact__body {
  padding: 0 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Program name heading */
.txds-program-contact__name {
  font-size: var(--txds-font-size-h3, 32px);
  font-weight: var(--txds-font-weight-bold, 700);
  line-height: var(--txds-line-height-h3, 38px);
  color: var(--txds-color-gray-70, #403C37);
  margin: 32px 0 0;
}

/* Body description text */
.txds-program-contact__description {
  font-size: var(--txds-font-size-body-md, 18px);
  font-weight: 400;
  line-height: var(--txds-line-height-body-md, 30px);
  color: var(--txds-color-gray-70, #403C37);
  margin: 0;
}

/* Contact details row */
.txds-program-contact__details {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 64px;
  align-items: flex-start;
}

/* Individual contact block */
.txds-program-contact__detail {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.txds-program-contact__detail-label {
  font-size: 20px;
  font-weight: 800;
  color: var(--txds-color-gray-70, #403C37);
}

.txds-program-contact__detail-value {
  font-size: 18px;
  font-weight: 800;
  line-height: 28px;
  color: var(--txds-color-primary-50, #486687);
  text-decoration: underline;
}

.txds-program-contact__detail-value a {
  color: inherit;
  text-decoration: inherit;
}

/* Address (not a link) */
.txds-program-contact__detail-text {
  font-size: var(--txds-font-size-body-md, 18px);
  font-weight: 400;
  line-height: 30px;
  color: var(--txds-color-gray-70, #403C37);
}

/* Directions link under address */
.txds-program-contact__detail-link {
  font-size: 18px;
  font-weight: 800;
  color: var(--txds-color-primary-50, #486687);
  text-decoration: underline;
}

@media (max-width: 767px) {
  .txds-program-contact__details {
    flex-direction: column;
    gap: 24px;
  }

  .txds-program-contact__body {
    padding: 0 24px 32px;
  }
}


/* --- src/components/program-header/program-header.css --- */
/* ============================================
   Component: Program Header  (.txds-program-header)
   Full-width banner with breadcrumbs, H1 title, and
   optional description. Supports Green, White, and
   Image background variants in Desktop and Mobile sizes.
   ============================================ */

.txds-program-header {
  font-family: var(--txds-font-family);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  box-shadow: var(--txds-shadow-card);
}

/* --- Green (dark) variant --- */
.txds-program-header--green {
  background: var(--txds-color-primary-60);
  color: var(--txds-color-gray-05);
  padding: 99px 32px;
  gap: 8px;
  justify-content: center;
}
.txds-program-header--green .txds-program-header__breadcrumb a {
  color: var(--txds-color-gray-05);
}
.txds-program-header--green .txds-program-header__breadcrumb-current {
  color: var(--txds-color-gray-05);
}
.txds-program-header--green .txds-program-header__title {
  color: var(--txds-color-gray-05);
}
.txds-program-header--green .txds-program-header__text {
  color: #fff;
}

/* --- White (light) variant --- */
.txds-program-header--white {
  background: var(--txds-color-gray-05);
  color: var(--txds-color-gray-70);
  padding: 99px 32px;
  gap: 8px;
  justify-content: center;
}
.txds-program-header--white .txds-program-header__breadcrumb a {
  color: var(--txds-color-primary-50);
}
.txds-program-header--white .txds-program-header__breadcrumb-current {
  color: var(--txds-color-gray-70);
}
.txds-program-header--white .txds-program-header__title {
  color: var(--txds-color-gray-70);
}
.txds-program-header--white .txds-program-header__text {
  color: var(--txds-color-gray-70);
}

/* --- Wide variant --- */
.txds-program-header--wide {
  min-height: 324px;
  padding: 0 32px;
  justify-content: center;
}
.txds-program-header--wide.txds-program-header--green {
  padding: 0 32px;
}
.txds-program-header--wide.txds-program-header--white {
  padding: 0 32px;
}

/* --- Content wrapper --- */
.txds-program-header__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* --- Breadcrumbs --- */
.txds-program-header__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.txds-program-header__breadcrumb li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.txds-program-header__breadcrumb a {
  font-family: var(--txds-font-family);
  font-weight: var(--txds-font-weight-normal, 400);
  font-size: 16px;
  line-height: 24px;
  text-decoration: underline;
}
.txds-program-header__breadcrumb a:hover {
  opacity: 0.8;
}
.txds-program-header__breadcrumb-separator {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.txds-program-header__breadcrumb-separator svg {
  display: block;
  width: 100%;
  height: 100%;
}
.txds-program-header__breadcrumb-current {
  font-family: var(--txds-font-family);
  font-weight: var(--txds-font-weight-bold);
  font-size: 16px;
  line-height: 24px;
}

/* --- Title --- */
.txds-program-header__title {
  font-family: var(--txds-font-family-header);
  font-weight: var(--txds-font-weight-bold);
  font-size: var(--txds-font-size-h1);
  line-height: var(--txds-line-height-h1);
  margin: 0;
  width: 100%;
}

/* --- Description --- */
.txds-program-header__text {
  font-family: var(--txds-font-family);
  font-weight: var(--txds-font-weight-normal, 400);
  font-size: 20px;
  line-height: 28px;
  margin: 0;
  max-width: 760px;
}

/* --- Background logo watermark --- */
.txds-program-header__watermark {
  position: absolute;
  opacity: 0.2;
  overflow: hidden;
  pointer-events: none;
}
.txds-program-header:not(.txds-program-header--wide) .txds-program-header__watermark {
  width: 600px;
  height: 582px;
  right: -32px;
  top: -35px;
}
.txds-program-header--wide .txds-program-header__watermark {
  width: 600px;
  height: 582px;
  right: -40px;
  top: -57px;
}

/* --- Mobile --- */
@media (max-width: 767px) {
  .txds-program-header--green,
  .txds-program-header--white {
    padding: 72px 32px;
  }
  .txds-program-header__title {
    font-size: 34px;
    line-height: 40px;
  }
  .txds-program-header__watermark {
    width: 327px;
    height: 317px;
    right: -101px;
    bottom: -110px;
    top: auto;
  }
}


/* --- src/components/search/search.css --- */
/* ============================================
   Page: Search
   Layout helpers for the combined Search showcase.
   ============================================ */

/* --- Section divider --- */
.txds-search-divider {
  border: none;
  border-top: 1px solid var(--txds-color-gray-30);
  margin: 48px 0;
}


/* --- src/components/search-hero/search-hero.css --- */
/* ============================================
   Component: Search Hero  (.txds-search-hero)
   Dark search banner with heading, search bar,
   and optional trending keywords.
   ============================================ */

.txds-search-hero {
  font-family: var(--txds-font-family);
  background: var(--txds-color-primary-60);
  color: var(--txds-color-gray-05);
  width: 100%;
  overflow: hidden;
}

.txds-search-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding: 56px 64px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
}

.txds-search-hero__heading {
  font-family: var(--txds-font-family-header);
  font-weight: var(--txds-font-weight-bold);
  font-size: var(--txds-font-size-h3);
  line-height: var(--txds-line-height-h3);
  color: var(--txds-color-gray-05);
  text-align: left;
  margin: 0;
  width: 100%;
}

/* --- Search bar --- */
.txds-search-hero__inner form {
  width: 100%;
}

.txds-search-hero__bar {
  display: flex;
  align-items: stretch;
  width: 100%;
  border-radius: var(--txds-input-radius, 4px);
  overflow: hidden;
}

.txds-search-hero__input-wrap {
  flex: 1 1 0%;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--txds-color-gray-05);
  padding-left: 32px;
  border-radius: var(--txds-input-radius, 4px) 0 0 var(--txds-input-radius, 4px);
  min-height: 56px;
}

.txds-search-hero__input-wrap:focus-within {
  outline: var(--txds-focus-width) solid var(--txds-focus-color);
  outline-offset: var(--txds-focus-offset);
}

.txds-search-hero__search-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--txds-color-gray-70);
}
.txds-search-hero__search-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.txds-search-hero__input {
  flex: 1 1 0%;
  font-family: var(--txds-font-family);
  font-size: var(--txds-font-size-body-lg);
  line-height: var(--txds-line-height-body-lg);
  background: transparent;
  color: var(--txds-color-gray-80);
  border: none;
  padding: 12px 16px 12px 0;
  outline: none;
}
.txds-search-hero__input::placeholder {
  color: var(--txds-color-gray-40);
}

.txds-search-hero__button {
  flex-shrink: 0;
  font-family: var(--txds-font-family);
  font-weight: var(--txds-font-weight-normal, 400);
  font-size: 20px;
  line-height: 28px;
  white-space: nowrap;
  background: var(--txds-color-secondary-50);
  color: var(--txds-color-gray-80);
  border: none;
  border-radius: 0 var(--txds-input-radius, 4px) var(--txds-input-radius, 4px) 0;
  padding: 14px 32px;
  min-width: 120px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s;
}
.txds-search-hero__button:hover {
  background: var(--txds-color-secondary-60);
  font-weight: var(--txds-font-weight-extrabold, 800);
}

/* --- Trending links --- */
.txds-search-hero__trending {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  width: 100%;
  font-size: 18px;
  line-height: 26px;
  color: var(--txds-color-gray-05);
  text-align: left;
  white-space: nowrap;
}

.txds-search-hero__trending-label {
  font-family: var(--txds-font-family);
  font-weight: var(--txds-font-weight-normal, 400);
}

.txds-search-hero__trending a {
  color: var(--txds-color-gray-05);
  font-family: var(--txds-font-family);
  font-weight: var(--txds-font-weight-bold);
  text-decoration: underline;
}
.txds-search-hero__trending a:hover {
  opacity: 0.8;
}

/* --- Light theme (for use on light backgrounds) --- */
.txds-search-hero__bar--light {
  border: 1px solid var(--txds-color-gray-50);
}

.txds-search-hero__bar--light .txds-search-hero__input-wrap {
  margin: -1px 0 -1px -1px;
}

/* --- Filled state --- */
.txds-search-hero__bar--filled .txds-search-hero__button {
  font-weight: var(--txds-font-weight-extrabold, 800);
}
.txds-search-hero__bar--filled.txds-search-hero__bar--light {
  box-shadow: 0 1px 7px 0 #dfe5f4;
}

/* --- Mobile forced class --- */
.txds-search-hero--mobile {
  display: flex;
  flex-direction: column;
  padding: 56px 24px;
  gap: 24px;
  max-width: 375px;
  box-sizing: border-box;
  overflow: visible;
}
.txds-search-hero--mobile .txds-search-hero__heading {
  font-size: 24px;
  line-height: 30px;
}
.txds-search-hero--mobile .txds-search-hero__bar {
  max-width: 100%;
  overflow: visible;
}
.txds-search-hero--mobile .txds-search-hero__input-wrap {
  padding-left: 16px;
  gap: 8px;
  min-height: 48px;
  min-width: 0;
}
.txds-search-hero--mobile .txds-search-hero__input {
  padding: 8px 8px 8px 0;
  font-size: var(--txds-font-size-body-md, 18px);
}
.txds-search-hero--mobile .txds-search-hero__button {
  padding: 7px 20px;
  min-width: 110px;
  font-size: var(--txds-font-size-body-md);
  line-height: var(--txds-line-height-body-md);
}
.txds-search-hero--mobile .txds-search-hero__trending {
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
}
.txds-search-hero--mobile .txds-search-hero__trending a {
  font-size: 18px;
  line-height: 26px;
}

/* --- Mobile responsive --- */
@media (min-width: 768px) and (max-width: 1024px) {
  .txds-search-hero__inner {
    padding: 40px 48px;
  }
}

@media (max-width: 767px) {
  .txds-search-hero__inner {
    padding: 56px 24px;
    gap: 24px;
  }
  .txds-search-hero__heading {
    font-size: 24px;
    line-height: 30px;
  }
  .txds-search-hero__bar {
    max-width: 100%;
    overflow: visible;
  }
  .txds-search-hero__input-wrap {
    padding-left: 16px;
    gap: 8px;
    min-height: 48px;
    min-width: 0;
  }
  .txds-search-hero__input {
    padding: 8px 8px 8px 0;
    font-size: var(--txds-font-size-body-md, 18px);
  }
  .txds-search-hero__button {
    padding: 7px 20px;
    min-width: 110px;
    font-size: var(--txds-font-size-body-md);
    line-height: var(--txds-line-height-body-md);
  }
  .txds-search-hero__button:hover {
    background: var(--txds-color-secondary-50);
    font-weight: var(--txds-font-weight-normal, 400);
  }
  .txds-search-hero__trending {
    flex-direction: column;
    gap: 4px;
    font-size: 16px;
    line-height: 22px;
  }
  .txds-search-hero__trending a {
    font-size: 18px;
    line-height: 26px;
  }
}


/* --- src/components/search-results/search-results.css --- */
/* ============================================
   Component: Search Results  (.txds-search-result)
   Individual search result with title, description,
   date, and optional contact/program details.
   ============================================ */

.txds-search-result {
  font-family: var(--txds-font-family);
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--txds-color-gray-30);
}

/* --- Header row: icon + title + date --- */
.txds-search-result__header {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

.txds-search-result__icon {
  flex-shrink: 0;
  width: 24px;
  padding-top: 8px;
  color: var(--txds-color-primary-50);
}
.txds-search-result__icon svg {
  display: block;
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
}

.txds-search-result__title-wrap {
  display: flex;
  flex: 1 1 0%;
  flex-wrap: wrap;
  gap: 0 24px;
  align-items: flex-start;
  min-width: 0;
}

.txds-search-result__title {
  flex: 1 1 350px;
  font-family: var(--txds-font-family);
  font-weight: var(--txds-font-weight-extrabold, 800);
  font-size: 20px;
  line-height: 34px;
  color: var(--txds-color-primary-50);
  text-decoration: underline;
  margin: 0;
  min-width: 0;
}
.txds-search-result__title a {
  color: inherit;
  text-decoration: inherit;
}
.txds-search-result__title a:hover {
  color: var(--txds-color-primary-60);
}

/* Large variant title */
.txds-search-result--large .txds-search-result__title {
  font-size: 20px;
  line-height: 34px;
}

.txds-search-result--large {
  border-bottom: none;
}
/* Small variant title */
.txds-search-result--small .txds-search-result__title {
  font-size: 24px;
  line-height: 38px;
}
/* Program / Directory variant title */
.txds-search-result--program .txds-search-result__title,
.txds-search-result--directory .txds-search-result__title {
  font-size: 24px;
  line-height: 38px;
}

/* --- Date --- */
.txds-search-result__date {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  text-align: right;
  white-space: nowrap;
  color: var(--txds-color-gray-70);
}
.txds-search-result__date-label {
  font-family: var(--txds-font-family);
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
}
.txds-search-result__date-value {
  font-family: var(--txds-font-family);
  font-weight: var(--txds-font-weight-extrabold, 800);
  font-size: 16px;
  line-height: 20px;
}

/* --- Description --- */
.txds-search-result__description {
  font-family: var(--txds-font-family);
  font-weight: var(--txds-font-weight-normal, 400);
  font-size: 20px;
  line-height: 28px;
  color: var(--txds-color-gray-70);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.txds-search-result--small .txds-search-result__description {
  font-size: 16px;
  line-height: 22px;
  font-weight: var(--txds-font-weight-normal, 400);
  -webkit-line-clamp: 3;
}

.txds-search-result--small {
  border-bottom: none;
}

/* --- Thumbnail (program) --- */
.txds-search-result__thumbnail {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  padding: 8px;
  border-radius: var(--txds-border-radius, 4px);
  background: var(--txds-color-primary-60);
  overflow: hidden;
  text-decoration: none;
  box-sizing: border-box;
}
.txds-search-result__thumbnail img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* --- Details grid (program/directory contacts) --- */
.txds-search-result__details {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 72px;
  align-items: flex-start;
  width: 100%;
}

.txds-search-result__detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.txds-search-result__detail-label {
  font-family: var(--txds-font-family);
  font-weight: var(--txds-font-weight-extrabold, 800);
  font-size: 16px;
  line-height: 20px;
  color: var(--txds-color-gray-70);
  margin: 0;
}
.txds-search-result__detail-value {
  font-family: var(--txds-font-family);
  font-weight: var(--txds-font-weight-normal, 400);
  font-size: 16px;
  line-height: 28px;
  margin: 0;
}
.txds-search-result__detail-value a {
  color: var(--txds-color-primary-50);
  text-decoration: underline;
}
.txds-search-result__detail-value a:hover {
  color: var(--txds-color-primary-60);
}

/* --- Program layout (horizontal) --- */
.txds-search-result--program {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 24px;
  border-bottom: none;
}
.txds-search-result--program .txds-search-result__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1 1 328px;
  min-width: 0;
}

/* --- Directory single-row --- */
.txds-search-result--directory {
  flex-direction: row;
  border-bottom: none;
}
.txds-search-result--directory .txds-search-result__body {
  display: flex;
  flex-direction: column;
  gap: 40px;
  flex: 1 1 0%;
  min-width: 0;
}

/* --- Optional Action Button --- */
.txds-search-result__action {
  flex-shrink: 0;
}

/* --- Breadcrumb link --- */
.txds-search-result__breadcrumb {
  font-family: var(--txds-font-family);
  font-weight: var(--txds-font-weight-normal, 400);
  font-size: 14px;
  line-height: 1.4;
  color: var(--txds-color-primary-50);
  margin: 0;
}

/* --- Mobile --- */
@media (max-width: 767px) {
  .txds-search-result--program {
    flex-direction: column;
  }
  .txds-search-result__date {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .txds-search-result__details {
    flex-direction: column;
    gap: 32px;
  }
}


/* --- src/components/service-card/service-card.css --- */
/* ============================================
   Component: Service Card  (.txds-service-card)
   Popular Service cards with title, description,
   arrow link, and optional navigation controls.
   ============================================ */

.txds-service-card {
  font-family: var(--txds-font-family);
  background: var(--txds-color-gray-05);
  border-radius: var(--txds-border-radius-md, 8px);
  display: flex;
  min-height: 162px;
  box-shadow: var(--txds-shadow-card);
  border-bottom-right-radius: 4px;
  transition: box-shadow 0.2s ease;
}

/* Hover state for single card variant (not stacked) */
.txds-service-card:not(.txds-service-card--stacked):hover {
  box-shadow: var(--txds-shadow-panel);
}

.txds-service-card:not(.txds-service-card--stacked):hover .txds-service-card__title {
  color: var(--txds-color-primary-60);
}

.txds-service-card:not(.txds-service-card--stacked):hover .txds-service-card__link {
  color: var(--txds-color-primary-60);
}

.txds-service-card:not(.txds-service-card--stacked):hover .txds-service-card__link::after {
  transform: translateX(3px);
}

.txds-service-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  padding: 20px 24px;
  flex: 1;
}

.txds-service-card__title {
  font-family: var(--txds-font-family-header);
  font-size: 24px;
  font-weight: var(--txds-font-weight-bold);
  line-height: 28px;
  color: var(--txds-color-gray-70);
  margin: 0;
  transition: color 0.2s ease;
}

.txds-service-card__text {
  font-size: var(--txds-font-size-body-md);
  line-height: var(--txds-line-height-body-md);
  color: var(--txds-color-gray-70);
  margin: 0;
}

.txds-service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: var(--txds-font-weight-extrabold);
  color: var(--txds-color-primary-50);
  text-decoration: none;
  transition: color 0.2s ease;
}
.txds-service-card__link::after {
  content: "\2192";
  font-size: 20px;
  text-decoration: none;
  transition: transform 0.2s ease;
}

/* --- Popular Services section --- */
.txds-service-section {
  font-family: var(--txds-font-family);
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 526px;
}

.txds-service-section__heading {
  font-family: var(--txds-font-family-header);
  font-size: var(--txds-font-size-h3);
  font-weight: var(--txds-font-weight-bold);
  line-height: var(--txds-line-height-h3);
  color: var(--txds-color-gray-70);
  margin: 0;
}

/* --- Navigation row (Showing X of Y / Back / Next) --- */
.txds-service-section__nav {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  font-size: 16px;
  font-weight: var(--txds-font-weight-extrabold);
}

.txds-service-section__count {
  color: var(--txds-color-gray-70);
  line-height: 20px;
}

.txds-service-section__controls {
  display: flex;
  gap: 24px;
  align-items: center;
}

.txds-service-section__controls a,
.txds-service-section__btn {
  font-family: var(--txds-font-family);
  font-size: var(--txds-font-size-body-md);
  line-height: var(--txds-line-height-body-md);
  font-weight: var(--txds-font-weight-extrabold);
  text-decoration: underline;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.txds-service-section__btn {
  color: var(--txds-color-primary-50);
}

.txds-service-section__btn:hover {
  color: var(--txds-color-primary-60);
}

.txds-service-section__btn:focus-visible {
  outline: var(--txds-focus-width) solid var(--txds-focus-color);
  outline-offset: var(--txds-focus-offset);
  border-radius: 2px;
}

.txds-service-section__btn:disabled {
  color: var(--txds-color-gray-50);
  cursor: not-allowed;
  pointer-events: none;
}

.txds-service-section__controls a[aria-disabled="true"] {
  color: var(--txds-color-gray-50);
  pointer-events: none;
}
.txds-service-section__controls a:not([aria-disabled]) {
  color: var(--txds-color-primary-50);
}

.txds-service-section__footer {
  font-size: 16px;
  font-weight: var(--txds-font-weight-extrabold);
  color: var(--txds-color-primary-50);
}

/* --- Stacked mobile variant (all cards in one box) --- */
.txds-service-card--stacked {
  flex-direction: column;
  height: auto;
  border-radius: var(--txds-border-radius, 4px);
  box-shadow: var(--txds-shadow-panel);
}
.txds-service-card--stacked .txds-service-card__bar {
  height: 4px;
  width: 100%;
  background: var(--txds-color-primary-50);
  border-top-left-radius: var(--txds-border-radius, 4px);
  border-top-right-radius: var(--txds-border-radius, 4px);
}
.txds-service-card--stacked .txds-service-card__body {
  padding: 20px 24px;
  height: auto;
}
.txds-service-card--stacked .txds-service-card__text {
  height: auto;
}
.txds-service-card--stacked .txds-service-card__divider {
  border-bottom: 1px solid var(--txds-color-gray-30);
  margin: 16px 24px;
}

.txds-service-card-preview-wide {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  flex-wrap: nowrap;
}

.txds-service-card-preview-heading {
  margin-bottom: 12px;
}

.txds-service-card-preview-mobile {
  max-width: 375px;
}

.txds-service-card-preview-link {
  text-decoration: none;
}

.txds-service-card[hidden] {
  display: none;
}

@media (max-width: 767px) {
  .txds-service-section {
    max-width: 100%;
  }
  .txds-service-card {
    width: 100%;
  }
}


/* --- src/components/texas-banner/texas-banner.css --- */
/* ============================================
   Component: Texas Website Banner  (.txds-tx-banner)
   Texas Design System
   "An official website of the Texas state government."
   ============================================ */

.txds-tx-banner {
  font-family: var(--txds-font-family);
  background: var(--txds-color-gray-60);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px 24px;
  width: 100%;
}

.txds-tx-banner__flag {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.txds-tx-banner__flag svg,
.txds-tx-banner__flag img {
  width: 100%;
  height: 100%;
  display: block;
}

.txds-tx-banner__text {
  font-size: 14px;
  font-weight: var(--txds-font-weight-medium);
  line-height: 14px;
  color: var(--txds-color-gray-05);
  white-space: nowrap;
}

/* ---- Mobile ---- */
@media (max-width: 767px) {
  .txds-tx-banner {
    justify-content: flex-start;
    padding: 9px 24px;
    min-height: 60px;
  }

  .txds-tx-banner__text {
    white-space: normal;
    line-height: 16px;
  }
}


/* --- src/components/video-player/video-player.css --- */
/* ============================================
   Component: Video Player  (.txds-video-player)
   ============================================ */

.txds-video-player {
  font-family: var(--txds-font-family);
  max-width: 722px;
}

.txds-video-player__wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  background: var(--txds-color-gray-30, #c5c5c5);
  border-radius: 8px;
  overflow: hidden;
}

.txds-video-player__wrapper iframe,
.txds-video-player__wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
}

/* Placeholder thumbnail when no video is embedded */
.txds-video-player__thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Play button overlay */
.txds-video-player__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  background: rgba(23, 23, 23, 0.8);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.2s;
}

.txds-video-player__play:hover {
  background: rgba(200, 0, 0, 0.9);
}
.txds-video-player__play:focus-visible {
  outline: var(--txds-focus-width) solid var(--txds-focus-color);
  outline-offset: var(--txds-focus-offset);
}

.txds-video-player__play::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent var(--txds-color-white, #fff);
}

/* Title bar at top */
.txds-video-player__title-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent);
  border-radius: 8px 8px 0 0;
  z-index: 1;
}

.txds-video-player__title {
  font-size: 14px;
  font-weight: 400;
  color: var(--txds-color-white, #fff);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Caption below video */
.txds-video-player__caption {
  margin-top: 16px;
  font-size: var(--txds-font-size-body-md, 18px);
  line-height: var(--txds-line-height-body-md, 30px);
  color: var(--txds-color-gray-70, #403C37);
}