/* ============================================================
   HLRBO Homepage 2026 ("Land Unlocked") — design-system tokens,
   keyframes, hover/focus states, and responsive rules for the
   Claude Design v3 handoff. The Razor view keeps the design's
   inline styles verbatim (pixel fidelity); ONLY dynamic states
   (hover/focus/scroll steps) and responsive overrides live here.
   ============================================================ */

:root {
  --hlrbo-green-dark: #31420E;
  --hlrbo-green: #6E883F;
  --hlrbo-green-light: #8BA55C;
  --hlrbo-orange: #DC7001;
  --hlrbo-orange-light: #EE8A2B;
  --hlrbo-green-dark-90: #455319;
  --hlrbo-green-dark-75: #5A6A2E;
  --hlrbo-green-dark-50: #98A087;
  --hlrbo-green-dark-25: #CBD0C3;
  --hlrbo-green-dark-10: #EAECE7;
  --hlrbo-green-dark-05: #F5F6F3;
  --hlrbo-green-75: #8BA55C;
  --hlrbo-green-50: #B7C49F;
  --hlrbo-green-25: #DBE1CF;
  --hlrbo-green-15: #E8ECE0;
  --hlrbo-green-10: #F0F2EB;
  --hlrbo-green-05: #F7F9F5;
  --hlrbo-orange-75: #E48F3E;
  --hlrbo-orange-50: #EDB77F;
  --hlrbo-orange-25: #F6DBBF;
  --hlrbo-orange-10: #FBEEDC;
  --hlrbo-orange-05: #FDF7EE;
  --hlrbo-green-hover: #5A7033;
  --hlrbo-green-active: #4D6029;
  --hlrbo-orange-hover: #BB5F01;
  --hlrbo-orange-active: #A55401;
  --hlrbo-text-primary: #1A1A1A;
  --hlrbo-text-secondary: #666666;
  --hlrbo-text-tertiary: #999999;
  --hlrbo-border: #E0E0E0;
  --hlrbo-bg: #F8F9FA;
  --hlrbo-success: #28A745;
  --font-sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-tooltip: 0 2px 8px rgba(0, 0, 0, 0.10);
  --shadow-focus-green: 0 0 0 3px rgba(110, 136, 63, 0.15);
}

html { scroll-behavior: smooth; }
.hp26 {
  margin: 0;
  background: #fff;
  font-family: var(--font-sans);
  color: var(--hlrbo-text-primary);
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* The LandIQ section must stay overflow:visible for its sticky map, so its
     right:-20px "03" numeral escapes and adds 20px of page side-scroll. clip
     (not hidden) removes it WITHOUT creating a scroll container, which would
     break position:sticky; the hidden line is only a legacy-browser fallback. */
  overflow-x: hidden;
  overflow-x: clip;
}
.hp26 a { color: #6E883F; text-decoration: none; }
.hp26 a:hover { color: #5A7033; text-decoration: none; }
.hp26 ::selection { background: rgba(220, 112, 1, .3); }
.hp26 p { text-wrap: pretty; }
.hp26 a:focus-visible, .hp26 button:focus-visible {
  outline: 2px solid var(--hlrbo-orange); outline-offset: 2px; border-radius: 4px;
}
/* select:focus-visible for the hero search selects is handled solely by the
   .hp26-search-card-scoped rule below (Bug #12169) — every <select> in .hp26
   lives inside .hp26-search-card, so a second, less-specific rule here would
   just duplicate it non-deterministically. */
.hp26-search-card select:focus-visible {
  outline: 3px solid var(--hlrbo-orange); outline-offset: 2px;
}
.hp26-search-card select:focus:not(:focus-visible) {
  outline: none;
}

/* ---------- Keyframes (verbatim from the design) ---------- */
@keyframes hp26HeroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hp26Rise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hp26DashMarch { to { stroke-dashoffset: -68; } }
@keyframes hp26SlideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes hp26CuePulse { 0%, 100% { transform: scaleY(.35); opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } }

.hp26-hero-in { animation: hp26HeroIn .8s ease both; }
.hp26-cue { transform-origin: top; animation: hp26CuePulse 2.2s ease-in-out infinite; }
.hp26-dash { animation: hp26DashMarch 6s linear infinite; }
.hp26-fixednav { animation: hp26SlideDown .35s ease both; }

/* Scroll-driven reveals: the design uses animation-timeline: view(). In
   browsers without support the timeline/range declarations are simply
   dropped and the rise keyframe plays once on load — exactly the design's
   own fallback behavior, so no @supports override is needed. */
.hp26-rise { animation: hp26Rise .8s ease both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
.hp26-rise-45 { animation: hp26Rise .8s ease both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
.hp26-rise-40 { animation: hp26Rise .8s ease both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
.hp26-rise-film { animation: hp26Rise .9s ease both; animation-timeline: view(); animation-range: entry 25% entry 70%; }
.hp26-rise-cta { animation: hp26Rise .9s ease both; animation-timeline: view(); animation-range: entry 10% entry 60%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hp26 *, .hp26 *::before, .hp26 *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;
  }
}

/* ---------- Hover states (from the prototype's style-hover attrs) ---------- */
.hp26 .hp26-navlink { color: rgba(255,255,255,.88); }
.hp26 .hp26-navlink:hover { color: #fff; }
.hp26 .hp26-navlink-fixed { color: rgba(255,255,255,.85); }
.hp26 .hp26-navlink-fixed:hover { color: #fff; }
.hp26 .hp26-btn-outline-w { color: #fff; }
.hp26 .hp26-btn-outline-w:hover { background: rgba(255,255,255,.12); color: #fff; }
/* Final-CTA outline button: the design gives this one a stronger .14 hover. */
.hp26 .hp26-btn-outline-w-cta { color: #fff; }
.hp26 .hp26-btn-outline-w-cta:hover { background: rgba(255,255,255,.14); color: #fff; }
.hp26 .hp26-btn-orange { background: var(--hlrbo-orange); color: #fff; }
.hp26 .hp26-btn-orange:hover { background: var(--hlrbo-orange-hover); color: #fff; }
.hp26 .hp26-btn-green { background: var(--hlrbo-green); color: #fff; }
/* #12468: `.hp26 a:hover` (0,2,1) outranks this rule's base color (0,2,0), so the logged-in
   header "Lease Your Land" label turned olive on a green hover background and vanished. */
.hp26 .hp26-btn-green:hover { background: var(--hlrbo-green-hover); color: #fff; }
.hp26 .hp26-btn-green:focus-visible { box-shadow: var(--shadow-focus-green); }
.hp26 .hp26-btn-greendark { background: var(--hlrbo-green-dark); color: #fff; }
.hp26 .hp26-btn-greendark:hover { background: var(--hlrbo-green-dark-90); color: #fff; }
.hp26 .hp26-btn-white { background: #fff; color: var(--hlrbo-green-dark); }
.hp26 .hp26-btn-white:hover { background: var(--hlrbo-green-10); color: var(--hlrbo-green-dark); }
.hp26 .hp26-link-w { color: rgba(255,255,255,.88); }
.hp26 .hp26-link-w:hover { color: #fff; }
.hp26 .hp26-link-w-strong { color: #fff; }
.hp26 .hp26-link-w-strong:hover { color: var(--hlrbo-orange-50); }
.hp26 .hp26-link-green { color: var(--hlrbo-green); }
.hp26 .hp26-link-green:hover { color: var(--hlrbo-green-hover); }

/* Cards: lift + photo zoom on hover */
.hp26-card { transition: box-shadow .25s ease, transform .25s ease; }
.hp26-card:hover { box-shadow: 0 16px 40px rgba(0,0,0,.16); transform: translateY(-4px); }
.hp26-propcard { transition: box-shadow .25s ease, transform .25s ease; }
.hp26-propcard:hover { box-shadow: 0 16px 40px rgba(0,0,0,.18); transform: translateY(-4px); }
.hp26-cardimg { transition: transform .5s ease; }
.hp26-card:hover .hp26-cardimg { transform: scale(1.045); }
.hp26-propimg { transition: transform .6s ease; }
.hp26-propcard:hover .hp26-propimg { transform: scale(1.04); }
.hp26-favbtn { transition: transform .15s ease; }
.hp26-favbtn:hover { transform: scale(1.08); }

/* ---------- LandIQ scroll story (JS sets data-liq-step on the section) ---------- */
.hp26-liq-step { border-left: 2px solid rgba(255,255,255,.22); opacity: .45; transition: opacity .5s ease, border-color .5s ease; }
.hp26-liq-step.is-active { border-left-color: var(--hlrbo-orange); opacity: 1; }
.hp26-liq-chip { color: rgba(255,255,255,.42); transition: color .5s ease; }
.hp26-liq-chip .hp26-liq-dot { background: rgba(255,255,255,.22); transition: background .5s ease; }
.hp26-liq-chip.is-on { color: #fff; }
.hp26-liq-chip.is-on .hp26-liq-dot { background: var(--hlrbo-orange); }
.hp26-liq-layer { opacity: 0; transition: opacity .6s ease; }
.hp26-liq-layer.is-on { opacity: 1; }
/* No fill transition: the design snaps the boundary fill on step change. */
.hp26-liq-bound { fill: rgba(220,112,1,.07); }
.hp26-liq-bound.is-hot { fill: rgba(220,112,1,.16); }

/* ---------- Logged-in account dropdown (production-parity port of the
   site header's SignedIn menu, in the 2026 nav language; JS toggles
   is-open + fills the unread badges) ---------- */
.hp26 .hp26-acct-btn { background: transparent; cursor: pointer; }
.hp26-acct-menu { display: none; }
.hp26-acct.is-open .hp26-acct-menu { display: block; }
.hp26-acct.is-open .hp26-acct-chev { transform: rotate(180deg); }
.hp26 .hp26-acct-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 18px; font-size: 14px; font-weight: 500;
  color: var(--hlrbo-text-primary);
}
.hp26 .hp26-acct-item:hover { background: #F8F9FA; color: var(--hlrbo-text-primary); }
.hp26 .hp26-acct-upgrade { color: #fff; }
.hp26 .hp26-acct-upgrade:hover { background: var(--hlrbo-green-hover); color: #fff; }

/* DEF-12159: burger toggle for the extracted _Nav2026MobileDrawer partial
   (ViewBag.HideHeader = true means this page has no other mobile nav). Hidden
   on desktop; the <=1023px query below reveals it and hides the nav-links rail. */
.hp26-mobile-nav-toggle { display: none; }
/* This header sits on the dark hero photo, where the burger's default
   dark-green (Content/nav2026.css) nearly disappears against the trees. White,
   with a soft shadow so it still reads over the lighter patches of the image. */
.hp26-mobile-nav-toggle .nav26-burger { color: #fff; filter: drop-shadow(0 1px 2px rgba(15, 22, 4, .55)); }

/* ---------- Responsive (the prototype is desktop-first; these keep the
   page usable on tablet/phone without altering desktop pixels) ---------- */
@media (max-width: 1023px) {
  /* #11188: this used to hide BOTH nav-link rows with no replacement — this page
     has no burger and no drawer of its own — so Browse Leases / Subscriptions /
     Lease Finder / LandIQ / How It Works were unreachable on phones in portrait
     AND landscape. The scroll-triggered fixed bar stays link-free (it is a compact
     fixed overlay; a second row there would cover content), but the primary header
     nav now wraps them onto their own horizontally-scrollable row. Desktop pixels
     are untouched — everything here is inside the <=1023px query.
     The !important flags are required: the markup sets display/gap/flex inline. */
  .hp26-fixednav .hp26-nav-links { display: none !important; }

  header#top nav.hp26-pagepad {
    flex-wrap: wrap;
    height: auto !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  header#top nav.hp26-pagepad .hp26-nav-links {
    display: flex !important;
    order: 10;
    flex: 0 0 100% !important;
    gap: 20px !important;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  header#top nav.hp26-pagepad .hp26-nav-links::-webkit-scrollbar { display: none; }
  /* 44px minimum touch target (design system) — the bare text links are ~22px tall. */
  header#top nav.hp26-pagepad .hp26-nav-links .hp26-navlink {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .hp26-two-col, .hp26-prop-grid, .hp26-liq-grid, .hp26-landkey-grid { grid-template-columns: 1fr !important; }
  .hp26-prop-grid { grid-template-rows: none !important; }
  .hp26-prop-tall { grid-row: auto !important; }
  .hp26-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .hp26-liq-sticky { position: static !important; }

  /* DEF-12159: swap the link rail for the real burger + drawer (same
     specificity as the display:flex rule above, later in source -> wins). */
  header#top nav.hp26-pagepad .hp26-nav-links { display: none !important; }
  .hp26-mobile-nav-toggle { display: block !important; }
}
@media (max-width: 640px) {
  .hp26-pagepad { padding-left: 20px !important; padding-right: 20px !important; }
  /* #10197: hero + fixed nav rows (gap:28px, nowrap) need ~522px for
     logo + Log in + Lease Your Land/Account + Sign Up; at ≤640 they clip
     against header/.hp26's overflow-hidden ancestors. Tighten the gap here
     so the full row (pill still shown) comfortably fits down to ~521px —
     the pill itself only needs to go below that; see the ≤520px block. */
  #hp26FixedNav .hp26-pagepad,
  header#top nav.hp26-pagepad {
    gap: 12px !important;
  }
  .hp26-search-card { grid-template-columns: 1fr !important; }
  .hp26-search-card label { border-right: 0 !important; border-bottom: 1px solid var(--hlrbo-border); }
  .hp26-stats-grid { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
  .hp26-hero-h1 { font-size: clamp(52px, 15vw, 72px) !important; }
}
@media (max-width: 520px) {
  /* #10197 R1: logged in swaps the outline pill for a solid-green one
     (a.hp26-btn-green) and swaps Sign Up for the Account toggle — a
     <button> (hp26-acct-btn), so these `a.`-tag-scoped rules never touch
     it and it stays visible/usable either way. Hide both Lease Your Land
     variants so logo + Log in + Sign Up (logged out) and logo + Account
     (logged in) both fit. Nav-scoped so the LandIQ-section "See a sample
     report" outline link and the hero search bar's .hp26-btn-green "Go"
     button (a <button>, also excluded by the `a.` tag) keep working. */
  #hp26FixedNav a.hp26-btn-outline-w,
  header#top nav.hp26-pagepad a.hp26-btn-outline-w,
  #hp26FixedNav a.hp26-btn-green,
  header#top nav.hp26-pagepad a.hp26-btn-green {
    display: none !important;
  }
}
@media (max-width: 360px) {
  /* #10197 R3: the hero nav logo is a flat height:42px (~120px wide) at
     every viewport, no responsive clamp — the single biggest item in the
     row. Shrink it (width:auto keeps aspect) so 320px clears with real
     margin. The fixed-nav logo (34px/~97px) is already close to this
     size, so it's left alone rather than risking an increase. */
  header#top nav.hp26-pagepad img {
    height: 36px !important;
    width: auto !important;
  }
}