/*
Theme Name:   Hello Elementor Child
Theme URI:    https://txwarrants.com
Description:  Child theme for Hello Elementor. All custom component CSS lives in this file.
Author:       EP Portfolio
Author URI:   https://txwarrants.com
Template:     hello-elementor
Version:      1.1.0
License:      GNU General Public License v2 or later
Text Domain:  hello-elementor-child
*/

/* ============================================================
   DO NOT TOUCH THE BLOCK ABOVE
   ============================================================
   WordPress parses it to identify the theme. It must stay the
   very first thing in this file. The Template line must match
   the parent theme folder name exactly. Add new CSS BELOW.
   ============================================================ */


/* ============================================================
   TXWARRANTS.COM - MASTER COMPONENT STYLES
   ============================================================
   Version : 1.1
   Updated : 2026-07-28

   CONTENTS  (search the ID to jump)
   ------------------------------------------------------------
   [T-01]  DESIGN TOKENS
   [C-01]  Glassmorphism sections      .glass-section
   [C-02]  Stat and rating bar         .twb-
   [C-03]  Secure payment badge        .txs-
   [C-04]  Benefit cards               .twc-
   [C-05]  Testimonial ticker          .twt-
   [C-06]  County search directory     .txw-dir
   [Z-01]  HOUSE RULES

   HARD RULES - these have all bitten this project already
   ------------------------------------------------------------
   1. ASCII only. No box-drawing, no em dashes, no smart quotes.
   2. No angle-bracket tags inside comments. WordPress strips
      them and mangles the comment.
   3. No curly braces inside comments.
   4. CHECK EVERY COMMENT CLOSES WITH STAR-SLASH, NOT SLASH.
      A missing star swallows every rule until the next close.
   5. Every component scoped under ONE root class.
   6. Shared custom properties prefixed --txw-
   ============================================================ */


/* ============================================================
   [T-01]  DESIGN TOKENS
   ============================================================
   Only values shared across two or more components live here.
   Component-specific palettes stay local for readability.
   ============================================================ */

:root{

  /* --- Navy surfaces --- */
  --txw-navy-0:#131d29;
  --txw-navy-1:#1a2535;
  --txw-navy-2:#22303f;

  /* --- Brand accents --- */
  --txw-maroon:#852833;
  --txw-maroon-lt:#a03340;
  --txw-crimson:#7a1f2e;
  --txw-teal:#3d6b74;
  --txw-teal-lt:#5d939e;
  --txw-gold:#c9a84c;
  --txw-gold-lt:#ddbe6d;

  /* --- Status --- */
  --txw-green:#3f9b6d;
  --txw-green-lt:#5fc490;
  --txw-green-dot:#7fe8b0;
  --txw-star:#facc15;
  --txw-verified:#22c55e;

  /* --- Neutrals --- */
  --txw-ink:#f4f6f7;
  --txw-muted:#93a6b3;
  --txw-sage:#e8f0eb;
  --txw-offwhite:#faf9f6;
  --txw-line:rgba(255,255,255,.09);

  /* --- Shape --- */
  --txw-r:12px;
  --txw-r-sm:8px;
  --txw-r-lg:16px;

  /* --- Type --- */
  --txw-display:'Poppins',sans-serif;
  --txw-cond:'Barlow Condensed','Oswald','Arial Narrow',sans-serif;
  --txw-body:'Barlow','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --txw-ui:'Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif;
  --txw-serif:Georgia,'Times New Roman',serif;

  /* --- Motion --- */
  --txw-fast:.16s;
  --txw-mid:.18s;
  --txw-slow:.32s;
}


/* ============================================================
   [C-01]  GLASSMORPHISM SECTIONS
   ============================================================
   Add .glass-section to an Elementor Section or Container via
   Advanced - CSS Classes. Stack a modifier for variants.

   Modifiers: --blur-xs  --blur-sm  --blur-lg  --blur-xl
              --dark  --blue  --purple
   ============================================================ */

.glass-section{
  background:rgba(255,255,255,.12) !important;
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.20);
  border-radius:var(--txw-r-lg);
  box-shadow:0 8px 32px rgba(0,0,0,.12);
  position:relative;
  overflow:hidden;
}

.glass-section::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(
    135deg,
    rgba(255,255,255,.18) 0%,
    rgba(255,255,255,.04) 60%,
    transparent 100%
  );
  pointer-events:none;
  z-index:0;
}

.glass-section > .elementor-container,
.glass-section > .e-con-inner{
  position:relative;
  z-index:1;
}

.glass-section--blur-xs{
  backdrop-filter:blur(4px) saturate(160%);
  -webkit-backdrop-filter:blur(4px) saturate(160%);
}
.glass-section--blur-sm{
  backdrop-filter:blur(10px) saturate(160%);
  -webkit-backdrop-filter:blur(10px) saturate(160%);
}
.glass-section--blur-lg{
  backdrop-filter:blur(28px) saturate(160%);
  -webkit-backdrop-filter:blur(28px) saturate(160%);
}
.glass-section--blur-xl{
  backdrop-filter:blur(40px) saturate(160%);
  -webkit-backdrop-filter:blur(40px) saturate(160%);
}

.glass-section--dark{
  background:rgba(15,15,25,.65) !important;
  border-color:rgba(255,255,255,.10);
}
.glass-section--blue{
  background:rgba(55,138,221,.15) !important;
  border-color:rgba(55,138,221,.25);
}
.glass-section--purple{
  background:rgba(127,119,221,.15) !important;
  border-color:rgba(127,119,221,.25);
}

/* heavy blur is expensive on phones */
@media(max-width:767px){
  .glass-section,
  .glass-section--blur-lg,
  .glass-section--blur-xl{
    backdrop-filter:blur(10px) saturate(160%);
    -webkit-backdrop-filter:blur(10px) saturate(160%);
  }
}


/* ============================================================
   [C-02]  STAT AND RATING BAR
   ============================================================
   Horizontal row of stat items separated by dividers.
   Stacks vertically under 640px.
   ============================================================ */

.twb-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:20px 0;
  font-family:var(--txw-ui);
}

.twb-item{
  display:flex;
  align-items:center;
  gap:13px;
  padding:0 36px;
  flex:1 1 0%;
  max-width:300px;
}

.twb-divider{
  width:1px;
  height:52px;
  background:rgba(255,255,255,.15);
  flex-shrink:0;
}

.twb-icon{
  flex-shrink:0;
  width:46px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.twb-text{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.twb-stars{
  display:flex;
  gap:3px;
  margin-bottom:4px;
}

.twb-star{
  width:15px;
  height:15px;
  fill:var(--txw-star);
  filter:drop-shadow(0 0 3px rgba(250,204,21,.5));
}

.twb-number{
  font-size:26px;
  font-weight:700;
  color:#ffffff;
  line-height:1;
  letter-spacing:-.5px;
}

.twb-label{
  font-size:10px;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:rgba(255,255,255,.48);
  line-height:1.2;
  margin-top:1px;
}

.twb-texas-img{
  width:42px;
  height:42px;
  object-fit:contain;
  filter:drop-shadow(0 0 5px rgba(251,191,36,.35));
}

.twb-search-icon{
  width:36px;
  height:36px;
}

@media(max-width:640px){
  .twb-wrap{
    flex-direction:column;
    align-items:stretch;
    padding:16px 24px;
    gap:0;
  }
  .twb-divider{
    width:100%;
    height:1px;
    margin:14px 0;
  }
  .twb-item{
    display:grid;
    grid-template-columns:52px 1fr;
    align-items:center;
    gap:0;
    padding:0;
    max-width:100%;
  }
  .twb-icon{
    width:52px;
    justify-content:flex-start;
  }
  .twb-text{gap:4px}
  .twb-number{font-size:28px}
  .twb-label{
    font-size:10px;
    letter-spacing:.09em;
  }
}


/* ============================================================
   [C-03]  SECURE PAYMENT BADGE
   ============================================================
   Light-mode component. Sits on light or dark backgrounds.
   Uses its own local green palette rather than brand tokens,
   since it deliberately mimics a payment-processor trust badge.

   NOTE: the .txs-wrap rule below was previously destroyed by
   an unclosed comment above it. Restored.
   ============================================================ */

.txs-wrap{
  width:100%;
  font-family:var(--txw-ui);
}

/* --- main badge row --- */

.txs-main{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:#f0fdf4;
  border:1px solid #bbf7d0;
  border-radius:10px 10px 0 0;
  padding:12px 18px;
}

.txs-lock-circle{
  width:34px;
  height:34px;
  background:#16a34a;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.txs-lock-circle svg{
  width:16px;
  height:16px;
}

.txs-main-text{flex:1}

.txs-main-title{
  font-size:13px;
  font-weight:700;
  color:#14532d;
  line-height:1.2;
}

.txs-main-sub{
  font-size:11px;
  color:#16a34a;
  margin-top:2px;
}

.txs-stripe-logo{
  display:flex;
  align-items:center;
  gap:5px;
  flex-shrink:0;
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:6px;
  padding:5px 10px;
}

.txs-powered{
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#94a3b8;
}

.txs-stripe-wordmark{
  font-size:14px;
  font-weight:800;
  color:#635bff;
  letter-spacing:-.3px;
}

/* --- trust items row --- */

.txs-items{
  display:flex;
  align-items:stretch;
  border:1px solid #e2e8f0;
  border-top:none;
  border-radius:0 0 10px 10px;
  overflow:hidden;
  background:#ffffff;
}

.txs-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:14px 10px;
  text-align:center;
  border-right:1px solid #f1f5f9;
}
.txs-item:last-child{border-right:none}

.txs-item svg{
  width:20px;
  height:20px;
  flex-shrink:0;
}

.txs-item-label{
  font-size:10.5px;
  font-weight:700;
  color:#1e293b;
  line-height:1.3;
}

.txs-item-sub{
  font-size:9.5px;
  color:#94a3b8;
  line-height:1.3;
}

/* --- card chips --- */

.txs-cards{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:12px;
  flex-wrap:wrap;
}

.txs-card-chip{
  height:26px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:5px;
  padding:0 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  flex-shrink:0;
}

.txs-card-chip.visa     {color:#1a1f71}
.txs-card-chip.mc       {color:#eb001b}
.txs-card-chip.amex     {color:#2e77bc}
.txs-card-chip.discover {color:#f76f20}

.txs-cards-label{
  font-size:10px;
  color:#cbd5e1;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-top:8px;
  text-align:center;
}

@media(max-width:480px){
  .txs-item-sub{display:none}
  .txs-item{padding:12px 6px}
  .txs-main{flex-wrap:wrap;gap:8px}
}


/* ============================================================
   [C-04]  BENEFIT CARDS
   ============================================================
   Three-up grid, two-up under 768px, single column under 480px.

   Colour variants - pair the icon class with the matching tag
   class on the same card:
     .ic-gold + .tag-gold      .ic-teal + .tag-teal
     .ic-green + .tag-green    .ic-red + .tag-red
     .ic-blue + .tag-blue      .ic-purple + .tag-purple
   ============================================================ */

.twc-wrap{
  width:100%;
  font-family:var(--txw-ui);
  padding:0;
}

.twc-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.twc-card{
  background:rgba(255,255,255,.05);
  border:.5px solid rgba(255,255,255,.1);
  border-radius:14px;
  padding:28px 24px 26px;
  display:flex;
  flex-direction:column;
  gap:12px;
  box-shadow:0 8px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.07);
  transition:border-color .25s ease;
}
.twc-card:hover{
  border-color:rgba(255,255,255,.2);
}

.twc-icon{
  width:46px;
  height:46px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  margin-bottom:2px;
}
.twc-icon svg{
  width:22px;
  height:22px;
}

.ic-gold   {background:rgba(250,204,21,.12)}
.ic-teal   {background:rgba(34,211,238,.12)}
.ic-green  {background:rgba(102,147,130,.18)}
.ic-red    {background:rgba(220,38,38,.12)}
.ic-blue   {background:rgba(96,165,250,.12)}
.ic-purple {background:rgba(167,139,250,.12)}

.twc-tag{
  display:inline-block;
  font-size:10px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:3px 10px;
  border-radius:20px;
  width:fit-content;
  margin-bottom:2px;
}

.tag-gold   {background:rgba(250,204,21,.12);  color:#facc15}
.tag-teal   {background:rgba(34,211,238,.12);  color:#22d3ee}
.tag-green  {background:rgba(102,147,130,.18); color:#669382}
.tag-red    {background:rgba(220,38,38,.12);   color:#f87171}
.tag-blue   {background:rgba(96,165,250,.12);  color:#60a5fa}
.tag-purple {background:rgba(167,139,250,.12); color:#a78bfa}

.twc-title{
  font-size:16px;
  font-weight:600;
  color:#ffffff;
  line-height:1.3;
  margin:0;
}

.twc-body{
  font-size:13px;
  font-weight:400;
  color:rgba(255,255,255,.58);
  line-height:1.7;
  margin:0;
  flex:1;
}
.twc-body strong{
  color:rgba(255,255,255,.85);
  font-weight:500;
}

.twc-foot{
  display:flex;
  align-items:center;
  gap:7px;
  padding-top:12px;
  border-top:.5px solid rgba(255,255,255,.07);
  font-size:11.5px;
  color:rgba(255,255,255,.35);
  margin-top:auto;
}

.twc-foot-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  flex-shrink:0;
}

@media(max-width:768px){
  .twc-grid{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }
}
@media(max-width:480px){
  .twc-grid{grid-template-columns:1fr}
  .twc-card{padding:22px 18px 20px}
}


/* ============================================================
   [C-05]  TESTIMONIAL TICKER
   ============================================================
   Infinite horizontal scroll. The track must contain the card
   set duplicated twice for the -50% loop to be seamless.
   Pauses on hover.
   ============================================================ */

.twt-ticker-wrap{
  width:100%;
  overflow:hidden;
  padding:14px 0;
  position:relative;
  mask-image:linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image:linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.twt-track{
  display:flex;
  gap:14px;
  width:max-content;
  animation:twt-scroll 110s linear infinite;
}
.twt-track:hover{animation-play-state:paused}

@keyframes twt-scroll{
  0%   {transform:translateX(0)}
  100% {transform:translateX(-50%)}
}

.twt-card{
  display:flex;
  align-items:flex-start;
  gap:11px;
  background:rgba(255,255,255,.06);
  border:.5px solid rgba(255,255,255,.11);
  border-radius:10px;
  padding:13px 16px;
  min-width:300px;
  max-width:340px;
  flex-shrink:0;
  box-shadow:0 4px 20px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08);
}

.twt-avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:600;
  font-family:var(--txw-serif);
  color:#fff;
  background:#1e3a5f;
  border:1px solid rgba(255,255,255,.15);
}

.twt-body{flex:1;min-width:0}

.twt-stars{
  display:flex;
  gap:2px;
  margin-bottom:5px;
}
.twt-star{
  width:11px;
  height:11px;
  fill:var(--txw-star);
}

.twt-text{
  font-size:12.5px;
  line-height:1.55;
  color:rgba(255,255,255,.78);
  font-family:var(--txw-serif);
  font-style:italic;
  margin-bottom:7px;
}

.twt-meta{
  display:flex;
  align-items:center;
  gap:6px;
}
.twt-name{
  font-size:11.5px;
  font-weight:600;
  color:rgba(255,255,255,.9);
  font-family:var(--txw-ui);
  font-style:normal;
}
.twt-dot{
  width:3px;
  height:3px;
  border-radius:50%;
  background:rgba(255,255,255,.25);
  flex-shrink:0;
}
.twt-location{
  font-size:11px;
  color:rgba(255,255,255,.38);
  font-family:var(--txw-ui);
  font-style:normal;
}
.twt-verified{
  margin-left:auto;
  width:14px;
  height:14px;
  fill:var(--txw-verified);
  flex-shrink:0;
  opacity:.8;
}

@media(prefers-reduced-motion:reduce){
  .twt-track{animation:none}
}


/* ============================================================
   [C-06]  COUNTY SEARCH DIRECTORY
   ============================================================
   Root class .txw-dir. Requires the companion JS block.
   Local vars alias the global tokens so the component can be
   lifted out to another site as a self-contained unit.
   ============================================================ */

.txw-dir{
  --navy-0:var(--txw-navy-0);
  --navy-1:var(--txw-navy-1);
  --navy-2:var(--txw-navy-2);
  --teal:var(--txw-teal);
  --teal-lt:var(--txw-teal-lt);
  --green:var(--txw-green);
  --green-lt:var(--txw-green-lt);
  --green-dot:var(--txw-green-dot);
  --gold:var(--txw-gold);
  --gold-lt:var(--txw-gold-lt);
  --maroon:var(--txw-maroon);
  --maroon-lt:var(--txw-maroon-lt);
  --ink:var(--txw-ink);
  --muted:var(--txw-muted);
  --line:var(--txw-line);
  --r:var(--txw-r);
  --r-sm:var(--txw-r-sm);
  --display:var(--txw-display);
  --cond:var(--txw-cond);
  --body:var(--txw-body);

  font-family:var(--body);
  color:var(--ink);
  padding:clamp(28px,5vw,56px) clamp(14px,3vw,32px);
  border-radius:var(--txw-r-lg);
  background:
    radial-gradient(120% 80% at 15% 0%, rgba(61,107,116,.22) 0%, transparent 55%),
    radial-gradient(90% 70% at 92% 100%, rgba(122,31,46,.16) 0%, transparent 60%),
    linear-gradient(165deg, var(--navy-0) 0%, var(--navy-1) 50%, var(--navy-2) 100%);
}

.txw-dir *{box-sizing:border-box;margin:0;padding:0}
.txw-dir a{text-decoration:none}


/* --- C-06.1 header --- */

.txw-dir .txw-hd{
  text-align:center;
  max-width:640px;
  margin:0 auto clamp(24px,4vw,36px);
}
.txw-dir .txw-eyebrow{
  display:inline-block;
  font-family:var(--cond);
  font-size:11px;
  font-weight:600;
  letter-spacing:3.5px;
  text-transform:uppercase;
  color:var(--teal-lt);
  margin-bottom:12px;
}
.txw-dir .txw-hd h2{
  font-family:var(--display) !important;
  font-size:2rem !important;
  font-weight:900 !important;
  line-height:1.15;
  letter-spacing:-.5px;
  margin-bottom:14px;
  color:var(--ink);
}
.txw-dir .txw-hd h2 em{
  font-style:normal;
  font-weight:900;
  color:var(--gold);
}
.txw-dir .txw-hd p{
  font-size:15px;
  line-height:1.65;
  color:var(--muted);
}


/* --- C-06.2 search bar ---
   The WRAPPER is the visible box. The real form field sits
   transparent inside it as a flex item, so theme padding
   rules on form fields cannot collapse the layout.        */

.txw-dir .txw-search-wrap{
  display:flex;
  align-items:center;
  gap:12px;
  max-width:620px;
  margin:0 auto 18px;
  padding:0 16px;
  height:56px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  border-radius:var(--r);
  transition:border-color var(--txw-mid), background var(--txw-mid), box-shadow var(--txw-mid);
}
.txw-dir .txw-search-wrap:focus-within{
  border-color:var(--teal-lt);
  background:rgba(255,255,255,.09);
  box-shadow:0 0 0 3px rgba(93,147,158,.16);
}
.txw-dir .txw-ico{
  flex:0 0 18px;
  width:18px;
  height:18px;
  stroke:var(--muted);
  fill:none;
  stroke-width:2;
  pointer-events:none;
}
.txw-dir .txw-search{
  flex:1 1 auto;
  min-width:0;
  height:100%;
  background:transparent !important;
  border:0 !important;
  outline:none !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:0 !important;
  font-family:var(--body);
  font-size:16px;
  color:var(--ink) !important;
  line-height:normal;
  -webkit-appearance:none;
  appearance:none;
}
.txw-dir .txw-search:focus,
.txw-dir .txw-search:focus-visible{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  outline:none !important;
}
.txw-dir .txw-search::placeholder{
  color:var(--muted);
  opacity:1;
}
.txw-dir .txw-clear{
  flex:0 0 26px;
  width:26px;
  height:26px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  color:var(--muted);
  font-size:15px;
  line-height:1;
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  transition:background .15s, color .15s;
}
.txw-dir .txw-clear:hover{
  background:rgba(255,255,255,.18);
  color:var(--ink);
}
.txw-dir .txw-clear.on{display:flex}


/* --- C-06.3 filter chips --- */

.txw-dir .txw-chips{
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.txw-dir .txw-chip{
  font-family:var(--cond);
  font-size:12px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:7px 16px;
  border-radius:20px;
  cursor:pointer;
  background:transparent;
  color:var(--muted);
  border:1px solid var(--line);
  transition:all var(--txw-fast);
}
.txw-dir .txw-chip:hover{
  color:var(--ink);
  border-color:rgba(255,255,255,.2);
}
.txw-dir .txw-chip.on{
  background:var(--teal);
  border-color:var(--teal);
  color:#fff;
}
.txw-dir .txw-chip.on[data-f="live"]{
  background:var(--green);
  border-color:var(--green);
}
.txw-dir .txw-chip.on[data-f="soon"]{
  background:rgba(201,168,76,.85);
  border-color:var(--gold);
  color:#16202e;
}


/* --- C-06.4 result count --- */

.txw-dir .txw-count{
  text-align:center;
  font-size:12.5px;
  color:var(--muted);
  margin-bottom:20px;
  min-height:18px;
}
.txw-dir .txw-count b{
  color:var(--gold-lt);
  font-weight:600;
}


/* --- C-06.5 county rows --- */

.txw-dir .txw-list{
  max-width:820px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.txw-dir .txw-row{
  background:rgba(255,255,255,.035);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  position:relative;
  transition:border-color var(--txw-mid), background var(--txw-mid);
}
.txw-dir .txw-row[hidden]{display:none}

.txw-dir .txw-row::before{
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:2px;
  background:linear-gradient(180deg,var(--teal-lt),var(--teal));
  opacity:0;
  transition:opacity .2s, background .2s;
  z-index:1;
}
.txw-dir .txw-row.open{
  border-color:rgba(93,147,158,.45);
  background:rgba(255,255,255,.06);
}
.txw-dir .txw-row.open::before{opacity:1}

/* hover - maroon lands on the HEADER BAR only. Putting it on
   the row would turn an expanded county's steps and buttons
   maroon too.                                              */
.txw-dir .txw-row:hover{
  background:rgba(255,255,255,.04);
  border-color:var(--maroon);
}
.txw-dir .txw-row:hover::before{
  background:var(--gold);
  opacity:1;
}
.txw-dir .txw-row:hover > .txw-head{
  background:var(--maroon) !important;
}
.txw-dir .txw-row:hover > .txw-head .txw-name{
  color:#ffffff !important;
}
.txw-dir .txw-row:hover > .txw-head .txw-cities{
  color:rgba(255,255,255,.82) !important;
}
.txw-dir .txw-row:hover > .txw-head .txw-arrow{
  stroke:#ffffff !important;
}
.txw-dir .txw-row:hover > .txw-head .txw-pill{
  background:rgba(255,255,255,.16) !important;
  border-color:rgba(255,255,255,.34) !important;
  color:#ffffff !important;
}
.txw-dir .txw-row:hover > .txw-head .txw-pill.live::before{
  background:var(--green-dot) !important;
  box-shadow:0 0 0 2px rgba(127,232,176,.25) !important;
}


/* --- C-06.6 row header --- */

.txw-dir .txw-head{
  width:100%;
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  background:none;
  border:0;
  cursor:pointer;
  font-family:var(--body);
  text-align:left;
  color:inherit;
  position:relative;
  z-index:2;
  transition:background var(--txw-mid) ease;
}
.txw-dir .txw-head:focus-visible{
  outline:2px solid var(--teal-lt);
  outline-offset:-2px;
}
.txw-dir .txw-row.open > .txw-head{
  background:rgba(61,107,116,.08);
  border-bottom:1px solid var(--line);
}
.txw-dir .txw-meta{flex:1;min-width:0}
.txw-dir .txw-name{
  display:block;
  font-family:var(--cond);
  font-size:19px;
  font-weight:700;
  letter-spacing:.2px;
  line-height:1.2;
  white-space:nowrap;
  color:var(--ink);
  transition:color var(--txw-mid) ease;
}
.txw-dir .txw-cities{
  display:block;
  font-size:12.5px;
  color:var(--muted);
  margin-top:2px;
  line-height:1.4;
  transition:color var(--txw-mid) ease;
}
.txw-dir .txw-pill{
  font-family:var(--cond);
  font-size:10px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:20px;
  white-space:nowrap;
  flex-shrink:0;
  transition:color var(--txw-mid) ease, background var(--txw-mid) ease, border-color var(--txw-mid) ease;
}
.txw-dir .txw-pill.live{
  background:rgba(63,155,109,.16);
  color:var(--green-lt);
  border:1px solid rgba(95,196,144,.38);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.txw-dir .txw-pill.live::before{
  content:'';
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--green-lt);
  box-shadow:0 0 0 2px rgba(95,196,144,.22);
  transition:background var(--txw-mid) ease, box-shadow var(--txw-mid) ease;
}
.txw-dir .txw-pill.soon{
  background:rgba(201,168,76,.13);
  color:var(--gold);
  border:1px solid rgba(201,168,76,.28);
}
.txw-dir .txw-arrow{
  width:11px;
  height:11px;
  flex-shrink:0;
  stroke:var(--muted);
  fill:none;
  stroke-width:2.4;
  transition:transform .28s ease, stroke .2s ease;
}
.txw-dir .txw-row.open .txw-arrow{
  transform:rotate(180deg);
  stroke:var(--teal-lt);
}


/* --- C-06.7 row body - JS sets max-height --- */

.txw-dir .txw-body{
  max-height:0;
  overflow:hidden;
  transition:max-height var(--txw-slow) cubic-bezier(.4,0,.2,1);
}
.txw-dir .txw-inner{padding:2px 18px 18px}


/* --- C-06.8 tags, steps, notes --- */

.txw-dir .txw-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:14px 0;
}
.txw-dir .txw-tag{
  font-family:var(--cond);
  font-size:11px;
  letter-spacing:.4px;
  color:var(--muted);
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  padding:4px 10px;
  border-radius:20px;
}

.txw-dir .txw-steps{
  list-style:none;
  counter-reset:s;
}
.txw-dir .txw-steps li{
  counter-increment:s;
  position:relative;
  padding:8px 0 8px 30px;
  font-size:13.5px;
  line-height:1.55;
  color:#c6d3dc;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.txw-dir .txw-steps li:last-child{border-bottom:0}
.txw-dir .txw-steps li::before{
  content:counter(s);
  position:absolute;
  left:0;
  top:8px;
  width:19px;
  height:19px;
  border-radius:50%;
  background:var(--teal);
  color:#fff;
  font-family:var(--cond);
  font-size:11px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}

.txw-dir .txw-note{
  font-size:12.5px;
  line-height:1.6;
  color:var(--muted);
  background:rgba(201,168,76,.06);
  border-left:2px solid var(--gold);
  padding:10px 14px;
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  margin-top:14px;
}
.txw-dir .txw-note a{color:var(--gold)}
.txw-dir .txw-note a:hover{text-decoration:underline}


/* --- C-06.9 action buttons ---
   !important throughout. The theme sets a global link hover
   colour of white, which was making the gold button's dark
   text vanish on hover.                                    */

.txw-dir .txw-btns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:16px;
}
.txw-dir .txw-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:12px 14px;
  border-radius:var(--r-sm);
  font-family:var(--cond);
  font-size:13px;
  font-weight:700;
  letter-spacing:.7px;
  text-transform:uppercase;
  line-height:1.25;
  transition:background var(--txw-fast) ease, color var(--txw-fast) ease,
             border-color var(--txw-fast) ease, transform var(--txw-fast) ease;
}
.txw-dir .txw-btn:hover{transform:translateY(-1px)}
.txw-dir .txw-btn.wide{grid-column:1/-1}

.txw-dir .txw-btn.free{
  background:rgba(63,155,109,.15) !important;
  color:var(--green-lt) !important;
  border:1px solid rgba(95,196,144,.4) !important;
}
.txw-dir .txw-btn.free:hover,
.txw-dir .txw-btn.free:focus{
  background:rgba(63,155,109,.34) !important;
  color:#ffffff !important;
  border-color:rgba(95,196,144,.7) !important;
}

.txw-dir .txw-btn.paid{
  background:linear-gradient(135deg,var(--gold-lt),var(--gold)) !important;
  color:#16202e !important;
  border:1px solid transparent !important;
}
.txw-dir .txw-btn.paid:hover,
.txw-dir .txw-btn.paid:focus{
  background:var(--maroon) !important;
  background-image:none !important;
  color:#ffffff !important;
  border-color:var(--maroon-lt) !important;
  filter:none !important;
}


/* --- C-06.10 view all, empty state, footer --- */

.txw-dir .txw-more{
  display:none;
  margin:18px auto 0;
  padding:12px 26px;
  cursor:pointer;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:var(--r);
  font-family:var(--cond);
  font-size:13px;
  font-weight:600;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--muted);
  transition:all var(--txw-fast);
}
.txw-dir .txw-more:hover{
  color:#ffffff;
  border-color:var(--maroon);
  background:var(--maroon);
}
.txw-dir .txw-more.on{display:block}

.txw-dir .txw-empty{
  display:none;
  text-align:center;
  padding:40px 20px;
  color:var(--muted);
  max-width:820px;
  margin:0 auto;
}
.txw-dir .txw-empty.on{display:block}
.txw-dir .txw-empty strong{
  display:block;
  font-family:var(--cond);
  font-size:19px;
  color:var(--ink);
  margin-bottom:8px;
}
.txw-dir .txw-empty a{color:var(--gold)}
.txw-dir .txw-empty a:hover{text-decoration:underline}

.txw-dir .txw-foot{
  text-align:center;
  font-size:13px;
  color:var(--muted);
  margin:28px auto 0;
  padding-top:22px;
  border-top:1px solid var(--line);
  max-width:820px;
}
.txw-dir .txw-foot a{color:var(--gold)}
.txw-dir .txw-foot a:hover{text-decoration:underline}
.txw-dir .txw-disc{
  max-width:660px;
  margin:14px auto 0;
  font-size:11px;
  line-height:1.65;
  color:rgba(147,166,179,.6);
}


/* --- C-06.11 mobile --- */

@media(max-width:600px){
  .txw-dir{border-radius:var(--txw-r)}
  .txw-dir .txw-hd h2{font-size:1.6rem !important}
  .txw-dir .txw-search-wrap{
    height:52px;
    padding:0 14px;
    gap:10px;
  }
  /* stays 16px - anything smaller triggers iOS zoom on tap */
  .txw-dir .txw-search{font-size:16px}
  .txw-dir .txw-head{padding:14px 15px;gap:11px}
  .txw-dir .txw-name{font-size:17px;white-space:normal}
  .txw-dir .txw-cities{font-size:11.5px}
  .txw-dir .txw-pill{display:none}
  .txw-dir .txw-inner{padding:2px 15px 16px}
  .txw-dir .txw-btns{grid-template-columns:1fr}
  .txw-dir .txw-btn.wide{grid-column:1}
}

@media(prefers-reduced-motion:reduce){
  .txw-dir *{transition:none !important}
}


/* ============================================================
   [Z-01]  HOUSE RULES - ADDING A COMPONENT
   ============================================================
   1. Add an entry to CONTENTS with the next C-xx id.
   2. Pick ONE root class. Prefix it. Scope every selector
      under it so it cannot leak into the theme.
   3. Reference tokens from T-01 rather than hardcoding hex
      where the value is shared. Component-only colours can
      stay local.
   4. Keep the component's media queries inside its own block.
   5. Bump the Version line in the theme header at the top.

   DEBUGGING
   A stylesheet error cascades FORWARD from the fault, never
   backward. If a component stops working, the fault is at or
   above it, never below. The most common cause by far is a
   comment closed with slash instead of star-slash.
   ============================================================ */



/* ============================================================
   [C-07]  HERO COUNTY SEARCH
   ============================================================
   Root class .txwh. Requires the companion JS block.
   Compact sibling of C-06. Four highest-population counties
   only, with the same expand-to-steps behaviour. Sized to sit
   inside a hero container and stay readable on a phone.
 
   Sits on glass so it reads over a hero background image.
   Links out to the full C-06 directory for everything else.
 
   Local vars alias the global tokens so the component can be
   lifted out to another site as a self-contained unit.
   ============================================================ */
 
.txwh{
  --navy-1:var(--txw-navy-1);
  --teal:var(--txw-teal);
  --teal-lt:var(--txw-teal-lt);
  --green:var(--txw-green);
  --green-lt:var(--txw-green-lt);
  --gold:var(--txw-gold);
  --gold-lt:var(--txw-gold-lt);
  --maroon:var(--txw-maroon);
  --maroon-lt:var(--txw-maroon-lt);
  --ink:var(--txw-ink);
  --muted:var(--txw-muted);
  --line:var(--txw-line);
  --r:var(--txw-r);
  --r-sm:var(--txw-r-sm);
  --cond:var(--txw-cond);
  --body:var(--txw-body);
 
  width:100%;
  max-width:620px;
  margin:0 auto;
  padding:18px 18px 16px;
  font-family:var(--body);
  color:var(--ink);
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  border-radius:var(--txw-r-lg);
  box-shadow:0 8px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
}
 
.txwh *{box-sizing:border-box;margin:0;padding:0}
.txwh a{text-decoration:none}
 
 
/* --- C-07.1 search bar ---
   Same construction as C-06.2. The WRAPPER is the visible box
   and the field sits transparent inside it, so theme padding
   rules on form fields cannot collapse the layout.          */
 
.txwh .txwh-bar{
  display:flex;
  align-items:center;
  gap:11px;
  padding:0 14px;
  height:50px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  border-radius:var(--r);
  transition:border-color var(--txw-mid), background var(--txw-mid), box-shadow var(--txw-mid);
}
.txwh .txwh-bar:focus-within{
  border-color:var(--teal-lt);
  background:rgba(255,255,255,.09);
  box-shadow:0 0 0 3px rgba(93,147,158,.16);
}
.txwh .txwh-ico{
  flex:0 0 17px;
  width:17px;
  height:17px;
  stroke:var(--muted);
  fill:none;
  stroke-width:2;
  pointer-events:none;
}
.txwh .txwh-input{
  flex:1 1 auto;
  min-width:0;
  height:100%;
  background:transparent !important;
  border:0 !important;
  outline:none !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:0 !important;
  font-family:var(--body);
  font-size:16px;
  color:var(--ink) !important;
  line-height:normal;
  -webkit-appearance:none;
  appearance:none;
}
.txwh .txwh-input:focus,
.txwh .txwh-input:focus-visible{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  outline:none !important;
}
.txwh .txwh-input::placeholder{
  color:var(--muted);
  opacity:1;
}
.txwh .txwh-clear{
  flex:0 0 24px;
  width:24px;
  height:24px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  color:var(--muted);
  font-size:14px;
  line-height:1;
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  transition:background .15s, color .15s;
}
.txwh .txwh-clear:hover{
  background:rgba(255,255,255,.18);
  color:var(--ink);
}
.txwh .txwh-clear.on{display:flex}
 
 
/* --- C-07.2 sub line --- */
 
.txwh .txwh-sub{
  font-size:11.5px;
  line-height:1.5;
  color:var(--muted);
  text-align:center;
  margin:10px 0 14px;
}
.txwh .txwh-sub b{
  color:var(--gold-lt);
  font-weight:600;
}
 
 
/* --- C-07.3 county rows --- */
 
.txwh .txwh-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.txwh .txwh-row{
  background:rgba(255,255,255,.035);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  overflow:hidden;
  position:relative;
  transition:border-color var(--txw-mid), background var(--txw-mid);
}
.txwh .txwh-row[hidden]{display:none}
 
.txwh .txwh-row::before{
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:2px;
  background:linear-gradient(180deg,var(--teal-lt),var(--teal));
  opacity:0;
  transition:opacity .2s, background .2s;
  z-index:1;
}
.txwh .txwh-row.open{
  border-color:rgba(93,147,158,.45);
  background:rgba(255,255,255,.06);
}
.txwh .txwh-row.open::before{opacity:1}
 
/* hover lands on the HEADER BAR only, same reasoning as C-06.5 */
.txwh .txwh-row:hover{border-color:var(--maroon)}
.txwh .txwh-row:hover::before{
  background:var(--gold);
  opacity:1;
}
.txwh .txwh-row:hover > .txwh-head{
  background:var(--maroon) !important;
}
.txwh .txwh-row:hover > .txwh-head .txwh-nm{color:#ffffff !important}
.txwh .txwh-row:hover > .txwh-head .txwh-ct{color:rgba(255,255,255,.82) !important}
.txwh .txwh-row:hover > .txwh-head .txwh-arrow{stroke:#ffffff !important}
.txwh .txwh-row:hover > .txwh-head .txwh-pill{
  background:rgba(255,255,255,.16) !important;
  border-color:rgba(255,255,255,.34) !important;
  color:#ffffff !important;
}
 
 
/* --- C-07.4 row header --- */
 
.txwh .txwh-head{
  width:100%;
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px 14px;
  background:none;
  border:0;
  cursor:pointer;
  font-family:var(--body);
  text-align:left;
  color:inherit;
  position:relative;
  z-index:2;
  transition:background var(--txw-mid) ease;
}
.txwh .txwh-head:focus-visible{
  outline:2px solid var(--teal-lt);
  outline-offset:-2px;
}
.txwh .txwh-row.open > .txwh-head{
  background:rgba(61,107,116,.08);
  border-bottom:1px solid var(--line);
}
.txwh .txwh-meta{flex:1;min-width:0}
.txwh .txwh-nm{
  display:block;
  font-family:var(--cond);
  font-size:17px;
  font-weight:700;
  letter-spacing:.2px;
  line-height:1.2;
  color:var(--ink);
  transition:color var(--txw-mid) ease;
}
.txwh .txwh-ct{
  display:block;
  font-size:11.5px;
  color:var(--muted);
  margin-top:2px;
  line-height:1.4;
  transition:color var(--txw-mid) ease;
}
.txwh .txwh-pill{
  font-family:var(--cond);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:3px 9px;
  border-radius:20px;
  white-space:nowrap;
  flex-shrink:0;
  background:rgba(63,155,109,.16);
  color:var(--green-lt);
  border:1px solid rgba(95,196,144,.38);
  display:inline-flex;
  align-items:center;
  gap:5px;
  transition:color var(--txw-mid) ease, background var(--txw-mid) ease, border-color var(--txw-mid) ease;
}
.txwh .txwh-pill::before{
  content:'';
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--green-lt);
  box-shadow:0 0 0 2px rgba(95,196,144,.22);
}
.txwh .txwh-arrow{
  width:10px;
  height:10px;
  flex-shrink:0;
  stroke:var(--muted);
  fill:none;
  stroke-width:2.4;
  transition:transform .28s ease, stroke .2s ease;
}
.txwh .txwh-row.open .txwh-arrow{
  transform:rotate(180deg);
  stroke:var(--teal-lt);
}
 
 
/* --- C-07.5 row body - JS sets max-height --- */
 
.txwh .txwh-body{
  max-height:0;
  overflow:hidden;
  transition:max-height var(--txw-slow) cubic-bezier(.4,0,.2,1);
}
.txwh .txwh-inner{padding:4px 14px 14px}
 
 
/* --- C-07.6 steps and note --- */
 
.txwh .txwh-steps{
  list-style:none;
  counter-reset:hs;
}
.txwh .txwh-steps li{
  counter-increment:hs;
  position:relative;
  padding:7px 0 7px 27px;
  font-size:12.5px;
  line-height:1.5;
  color:#c6d3dc;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.txwh .txwh-steps li:last-child{border-bottom:0}
.txwh .txwh-steps li::before{
  content:counter(hs);
  position:absolute;
  left:0;
  top:7px;
  width:17px;
  height:17px;
  border-radius:50%;
  background:var(--teal);
  color:#fff;
  font-family:var(--cond);
  font-size:10px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}
 
.txwh .txwh-note{
  font-size:11.5px;
  line-height:1.55;
  color:var(--muted);
  background:rgba(201,168,76,.06);
  border-left:2px solid var(--gold);
  padding:9px 12px;
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  margin-top:12px;
}
 
 
/* --- C-07.7 action buttons ---
   !important throughout, same reason as C-06.9. The theme
   sets a global link hover colour of white which was making
   the gold button's dark text vanish on hover.             */
 
.txwh .txwh-btns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:13px;
}
.txwh .txwh-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:10px 12px;
  border-radius:var(--r-sm);
  font-family:var(--cond);
  font-size:12px;
  font-weight:700;
  letter-spacing:.7px;
  text-transform:uppercase;
  line-height:1.25;
  transition:background var(--txw-fast) ease, color var(--txw-fast) ease,
             border-color var(--txw-fast) ease, transform var(--txw-fast) ease;
}
.txwh .txwh-btn:hover{transform:translateY(-1px)}
 
.txwh .txwh-btn.free{
  background:rgba(63,155,109,.15) !important;
  color:var(--green-lt) !important;
  border:1px solid rgba(95,196,144,.4) !important;
}
.txwh .txwh-btn.free:hover,
.txwh .txwh-btn.free:focus{
  background:rgba(63,155,109,.34) !important;
  color:#ffffff !important;
  border-color:rgba(95,196,144,.7) !important;
}
 
.txwh .txwh-btn.paid{
  background:linear-gradient(135deg,var(--gold-lt),var(--gold)) !important;
  color:#16202e !important;
  border:1px solid transparent !important;
}
.txwh .txwh-btn.paid:hover,
.txwh .txwh-btn.paid:focus{
  background:var(--maroon) !important;
  background-image:none !important;
  color:#ffffff !important;
  border-color:var(--maroon-lt) !important;
  filter:none !important;
}
 
 
/* --- C-07.8 empty state and footer link --- */
 
.txwh .txwh-empty{
  display:none;
  text-align:center;
  padding:22px 12px;
  font-size:12.5px;
  line-height:1.6;
  color:var(--muted);
}
.txwh .txwh-empty.on{display:block}
.txwh .txwh-empty strong{
  display:block;
  font-family:var(--cond);
  font-size:16px;
  color:var(--ink);
  margin-bottom:6px;
}
.txwh .txwh-empty a{color:var(--gold)}
.txwh .txwh-empty a:hover{text-decoration:underline}
 
.txwh .txwh-foot{
  text-align:center;
  font-size:11.5px;
  color:var(--muted);
  margin-top:13px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.txwh .txwh-foot a{
  color:var(--gold);
  font-weight:600;
}
.txwh .txwh-foot a:hover{text-decoration:underline}
 
 
/* --- C-07.9 mobile --- */
 
@media(max-width:600px){
  .txwh{
    padding:14px 12px 12px;
    border-radius:var(--r);
  }
  .txwh .txwh-bar{
    height:46px;
    padding:0 12px;
    gap:9px;
  }
  /* stays 16px - anything smaller triggers iOS zoom on tap */
  .txwh .txwh-input{font-size:16px}
  .txwh .txwh-sub{margin:9px 0 12px}
  .txwh .txwh-head{padding:11px 12px;gap:9px}
  .txwh .txwh-nm{font-size:16px}
  .txwh .txwh-ct{font-size:11px}
  .txwh .txwh-pill{display:none}
  .txwh .txwh-inner{padding:4px 12px 12px}
  .txwh .txwh-btns{grid-template-columns:1fr}
}
 
@media(prefers-reduced-motion:reduce){
  .txwh *{transition:none !important}
}