/* Texas Property Protest: the header, the same on every page. Linked last, after the page's own stylesheets.
   seo/site_header.py writes the markup and refuses a release when any page's header differs from it.
   Self-contained on purpose: new class names only (tpp-h...), and the colours and fonts it needs are set on .tpp-h with the
   values the site uses, so no page stylesheet reaches it and it reaches nothing else.
   Wide screens: brand, five links (two are dropdowns) and the Join button. Narrow screens: brand, Join (when it fits) and a Menu
   button that opens a panel with the same links. Each menu is a <details>, so it opens and closes with no script;
   header.js only adds Escape, click-outside, close-after-a-pick and aria-current on the link to the page you are on.
   No inline styles anywhere: the site's CSP only allows stylesheets.
   The last section is not the header: it is the analytics choice (the California bar that site.js builds, and the control on /privacy).
   It lives here because this is the one stylesheet every page links. Class names tpp-consent and tpp-choice. */

/* ---------- The strip above the header: one strip, the same words and look on every page (markup in seo/site_header.py, PROMO) ----------
   The look is the home page's strip, written out here with its values so a page that loads none of home.css, texas.css or houston.css gets it too.
   On a phone the third phrase drops to its own line, as on the home page. */
p.promo{margin:0;padding:9px 16px;background:#12203a;color:#fff;text-align:center;text-wrap:pretty;font:500 .76rem/1.3 'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.09em;text-transform:uppercase}
p.promo span{margin:0 8px;color:#ffcb3d}
p.promo i{font-style:normal}
@media (max-width:700px){
  p.promo{font-size:.66rem;letter-spacing:.06em}
  p.promo span{margin:0 4px}
  p.promo .tx-promo-3{display:block}
  p.promo .tx-promo-3 span{display:none}
}

.tpp-h{
  --h-ink:#12203a;--h-ink-2:#33415c;--h-red:#c8202f;--h-red-d:#a71825;--h-sun:#ffcb3d;
  --h-navy:#0f2a6b;--h-navy-2:#1c3d8f;--h-sky:#eef5fd;--h-white:#fff;
  --h-bd:2px solid var(--h-ink);
  --h-disp:'Bricolage Grotesque','Arial Narrow',system-ui,sans-serif;
  --h-body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --h-mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  position:relative;z-index:8;background:var(--h-white);color:var(--h-ink);
  font:400 16px/1.3 var(--h-body);letter-spacing:normal;text-transform:none;text-align:left;
  -webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.tpp-h *,.tpp-h *::before,.tpp-h *::after{box-sizing:border-box}
.tpp-h ul{margin:0;padding:0;list-style:none}
.tpp-h li{margin:0;padding:0}
.tpp-h a{color:inherit;text-decoration:none}
.tpp-h svg{display:block}
.tpp-h summary{list-style:none}
.tpp-h summary::-webkit-details-marker{display:none}
.tpp-h :focus-visible{outline:3px solid var(--h-navy-2);outline-offset:3px}
/* While any menu is open the header sits above the page's fixed bottom bars (z-index 20 in home.css and guide.css), so the bar never covers the
   last rows of the Menu. Closed, it stays at 8 so the skip link (z-index 10 in site.css) still shows on top of it when it has focus. */
.tpp-h:has(details[open]){z-index:40}
/* the red, white and blue stripe under the bar */
.tpp-h::after{content:"";display:block;height:8px;border-top:var(--h-bd);border-bottom:var(--h-bd);background:linear-gradient(90deg,var(--h-navy) 0 33.34%,var(--h-white) 33.34% 66.67%,var(--h-red) 66.67%)}

/* ---------- The bar ---------- */
.tpp-h-in{display:flex;align-items:center;gap:16px;max-width:1180px;min-height:74px;margin:0 auto;padding:0 28px}
.tpp-h .tpp-h-brand{display:flex;align-items:center;gap:11px;flex:0 1 auto;min-width:0;min-height:44px}
.tpp-h-brand svg{width:38px;height:38px;flex:none}
.tpp-h-brand b{display:block;font:800 1.12rem/1.05 var(--h-disp);letter-spacing:-.015em;white-space:nowrap}
.tpp-h-brand small{display:block;font-size:.8rem;font-weight:500;line-height:1.3;color:var(--h-ink-2)}

.tpp-h-nav{display:flex;align-items:center;gap:4px;margin-left:auto;font:600 .95rem/1.2 var(--h-body)}
.tpp-h .tpp-h-nav > a,.tpp-h-dd > summary{display:flex;align-items:center;gap:7px;min-height:44px;padding:0 11px;border-radius:10px;white-space:nowrap;cursor:pointer;touch-action:manipulation}
.tpp-h .tpp-h-nav > a:hover,.tpp-h-dd > summary:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.tpp-h .tpp-h-nav > .tpp-h-login{margin-left:8px;padding:0 18px;border:var(--h-bd);border-radius:999px;font:700 .86rem/1 var(--h-body);letter-spacing:.03em;text-transform:uppercase;text-decoration:none;transition:background-color .15s}
.tpp-h .tpp-h-nav > .tpp-h-login:hover{background:var(--h-sky);text-decoration:none}
.tpp-h .tpp-h-nav > .tpp-h-login:active{background:var(--h-sun)}

/* the two dropdowns */
.tpp-h-dd{position:relative}
.tpp-h-dd > summary svg,.tpp-h-sub > summary svg{width:11px;height:8px;flex:none;transition:transform .2s cubic-bezier(.16,1,.3,1)}
.tpp-h-dd[open] > summary svg,.tpp-h-sub[open] > summary svg{transform:rotate(180deg)}
.tpp-h-list{position:absolute;z-index:1;top:calc(100% + 4px);left:50%;width:350px;margin:0 0 0 -175px;padding:8px;background:var(--h-white);border:var(--h-bd);border-radius:18px;box-shadow:4px 4px 0 var(--h-ink);font-weight:500}
.tpp-h-list--guides{width:330px;margin-left:-165px}
.tpp-h .tpp-h-list a,.tpp-h .tpp-h-sublist a{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:44px;padding:0 12px;border-radius:11px;color:var(--h-ink-2);white-space:nowrap}
.tpp-h .tpp-h-list a:hover,.tpp-h .tpp-h-sublist a:hover,.tpp-h .tpp-h-list a[aria-current="page"],.tpp-h .tpp-h-sublist a[aria-current="page"]{background:var(--h-sky)}
.tpp-h-list b,.tpp-h-sublist b{margin-right:4px;color:var(--h-ink);font-weight:700}
.tpp-h-tag{flex:none;padding:5px 9px;border:var(--h-bd);border-radius:999px;background:var(--h-sun);color:var(--h-ink);font:500 .68rem/1 var(--h-mono);letter-spacing:.06em;word-spacing:-.25em;text-transform:uppercase}
.tpp-h .tpp-h-list .tpp-h-all a,.tpp-h .tpp-h-sublist .tpp-h-all a{justify-content:center;margin-top:6px;border-top:var(--h-bd);border-radius:0 0 11px 11px;color:var(--h-ink);font-weight:700}

/* the Join button: a <button data-tx-start> on pages that carry the address-first form, a link on the rest. Same look. */
.tpp-h .tpp-h-join{display:inline-flex;align-items:center;justify-content:center;text-align:center;flex:none;min-height:44px;margin:0;padding:13px 20px;border:var(--h-bd);border-radius:999px;background:var(--h-red);color:#fff;font:800 .86rem/1 var(--h-body);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;cursor:pointer;box-shadow:3px 3px 0 var(--h-ink);touch-action:manipulation;-webkit-appearance:none;appearance:none;transition:transform .15s cubic-bezier(.16,1,.3,1),box-shadow .15s cubic-bezier(.16,1,.3,1),background-color .15s}
.tpp-h .tpp-h-join:hover{background:var(--h-red-d);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--h-ink)}
.tpp-h .tpp-h-join:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--h-ink)}

/* the Menu (narrow screens only) */
.tpp-h-menu{display:none}
.tpp-h .tpp-h-join--panel{display:none}

/* ---------- Narrow screens: the five links wrap before they fit, so the Menu takes over ---------- */
@media (max-width:1119px){
  .tpp-h-nav{display:none}
  .tpp-h .tpp-h-brand{margin-right:auto}
  .tpp-h-menu{display:block;flex:none}
  .tpp-h-menu > summary{display:flex;align-items:center;gap:9px;min-height:44px;padding:0 16px;border:var(--h-bd);border-radius:999px;background:var(--h-white);font:700 .86rem/1 var(--h-body);letter-spacing:.03em;text-transform:uppercase;cursor:pointer;touch-action:manipulation;transition:background-color .15s}
  .tpp-h-menu[open] > summary{background:var(--h-sun)}
  .tpp-h-burger{width:18px;height:13px;flex:none}
  .tpp-h-panel{position:absolute;left:0;right:0;top:100%;z-index:1;max-height:calc(100vh - 130px);max-height:calc(100dvh - 130px);overflow-y:auto;overscroll-behavior:contain;padding:8px 28px 24px;background:var(--h-white);border-bottom:var(--h-bd);box-shadow:0 4px 0 var(--h-ink)}
  .tpp-h-panel nav{max-width:560px}
  .tpp-h-plist > li{border-bottom:1px solid rgba(18,32,58,.16)}
  .tpp-h .tpp-h-plist > li > a,.tpp-h-sub > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 2px;font:700 1.05rem/1.2 var(--h-body);cursor:pointer;touch-action:manipulation}
  .tpp-h-sub > summary svg{width:13px;height:9px}
  .tpp-h-sublist{margin:0 0 12px 2px;padding:0 0 0 12px;border-left:3px solid var(--h-sun);font-weight:500}
  .tpp-h .tpp-h-sublist a{white-space:normal}
}
@media (max-width:700px){
  .tpp-h-in{gap:10px;min-height:64px;padding:0 18px}
  .tpp-h-brand svg{width:34px;height:34px}
  .tpp-h-brand b{font-size:1rem;white-space:normal}
  .tpp-h-brand small{font-size:.74rem}
  .tpp-h-panel{padding:8px 18px 22px}
}
/* a phone too narrow for the bar button: Join moves to the foot of the Menu panel */
@media (max-width:539px){
  .tpp-h-in > .tpp-h-join{display:none}
  .tpp-h .tpp-h-join--panel{display:flex;width:100%;max-width:560px;min-height:52px;margin-top:18px;font-size:.95rem}
}
/* Under 380px wide, with the real fonts, the name wraps to two lines and 'A service of The Ambrose Group' wraps to two more: four lines in a 64px bar.
   So below 380px the small line is left out and the name has the room (375px and wider keep both lines, one line each). */
@media (max-width:379px){
  .tpp-h-brand small{display:none}
}
@media (max-width:359px){
  .tpp-h-in{gap:8px;padding:0 14px}
  .tpp-h-panel{padding-left:14px;padding-right:14px}
  .tpp-h-brand{gap:8px}
  .tpp-h-brand svg{width:30px;height:30px}
  .tpp-h-brand b{font-size:.92rem}
  .tpp-h-menu > summary{padding:0 13px;gap:7px}
}
@media (prefers-reduced-motion:reduce){
  .tpp-h *{transition:none !important}
}

/* ---------- The analytics choice (markup: site.js; words and rules: seo/site_forms.py, the privacy page) ----------
   1. The bar for visitors in California. site.js builds it only when the server put data-tpp-consent="ask" on <html> and the visitor has not chosen.
      It is the last thing in the page. Allow and No thanks are the same button, the same size, side by side.
      Phones (under 540px wide): it stays in the page flow, after the footer. A fixed bar covered the sign-up form on the first screen of some pages
      at 320 and 375 wide, so on a phone it never floats over anything.
      540px and wider: fixed to the foot of the screen. site.js sets --tpp-consent-h to its height: the page gets that much room at its end,
      scrolled-to and focused things stop above the bar, and the page's own fixed bottom bars (home.css .stickybar, guide.css .g-sticky) sit on top of it.
      An open header menu is z-index 40 and stays above the bar.
   2. The control on the privacy page: a status line and one button. */
.tpp-consent{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 20px;padding:14px 16px calc(14px + env(safe-area-inset-bottom));background:#fff;color:#12203a;border-top:2px solid #12203a;font:400 .95rem/1.4 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:normal;text-transform:none;text-align:left;-webkit-text-size-adjust:100%}
.tpp-consent *{box-sizing:border-box}
.tpp-consent p{flex:1 1 300px;max-width:62ch;margin:0;text-wrap:pretty}
.tpp-consent a{display:inline-block;padding:13px 2px;margin:-13px 0;color:inherit;font-weight:600;text-underline-offset:3px}
.tpp-consent-btns{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(124px,1fr);gap:10px;flex:0 0 auto}
.tpp-consent button,.tpp-choice-btn{min-width:96px;min-height:44px;margin:0;padding:0 22px;border:2px solid #12203a;border-radius:999px;background:#fff;color:#12203a;font:700 .95rem/1 'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:normal;text-transform:none;cursor:pointer;touch-action:manipulation;transition:background-color .15s}
.tpp-consent button:hover,.tpp-choice-btn:hover{background:#eef5fd}
.tpp-consent button:active,.tpp-choice-btn:active{background:#ffcb3d}
.tpp-consent :focus-visible,.tpp-choice-btn:focus-visible{outline:3px solid #223a82;outline-offset:3px}
@media (max-width:539px){
  .tpp-consent{gap:8px}
  .tpp-consent-btns{flex:1 1 100%;grid-auto-columns:1fr}
  .tpp-consent button{min-width:0}
  /* Guide pages have their own fixed bottom bar (guide.css .g-sticky, 66 to 76px tall, shown up to 700px wide) and keep room for it inside the footer
     (.site-f, 114px), which is above this bar. At the end of the page the bar would sit under it, so the bar leaves that room below itself and the
     footer keeps only its usual 44px above it. County, city and Houston pages already have room under the page (body.has-sticky). */
  html:has(.g-sticky) .tpp-consent{margin-bottom:calc(84px + env(safe-area-inset-bottom))}
  html:has(.g-sticky).tpp-consent-on .site-f{padding-bottom:44px}
}
@media (min-width:540px){
  .tpp-consent{position:fixed;left:0;right:0;bottom:0;z-index:30}
  .tpp-consent-on{padding-bottom:var(--tpp-consent-h,0px);scroll-padding-bottom:var(--tpp-consent-h,0px)}
  .tpp-consent-on .stickybar,.tpp-consent-on .g-sticky{bottom:var(--tpp-consent-h,0px)}
}
/* A phone held sideways (540px or wider, 500px or less tall): the same bar with less padding and narrower buttons, so it is one short row (about 58px)
   and the page keeps most of the screen. The two buttons stay the same size as each other and 44px tall. */
@media (min-width:540px) and (max-height:500px){
  .tpp-consent{gap:4px 16px;padding:6px 16px calc(6px + env(safe-area-inset-bottom))}
  .tpp-consent p{flex-basis:240px;font-size:.88rem;line-height:1.3}
  .tpp-consent-btns{grid-auto-columns:minmax(96px,1fr)}
  .tpp-consent button{padding:0 14px}
}
.tpp-choice{margin:18px 0 0}
.tpp-choice-status{margin:0 0 12px;font-weight:600}
@media (prefers-reduced-motion:reduce){
  .tpp-consent button,.tpp-choice-btn{transition:none}
}