/* Harding Property — shared overrides.
   Loaded after each page's inline <style>, so these rules win.
   1. Form legibility on the navy panels
   2. Mobile layout corrections */

/* ---------------------------------------------------------------------------
   1. FORM LEGIBILITY
   The panels sit on navy. Cream at 55–60% opacity was too faint to read,
   especially the field labels, the maintenance-margin checkbox and the
   result rows. Lifted across the board.
--------------------------------------------------------------------------- */

.panel { color: var(--cream); }                 /* panels inside .light sections */

.field label { opacity: .82; }
.field input,
.field select,
.field textarea {
  color: var(--cream);
  border-bottom-color: rgba(240,230,218,.30);
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(240,230,218,.40); opacity: 1; }
.field select:invalid, .field select option[disabled] { color: rgba(240,230,218,.45); }

.check span { opacity: 1; }
.check small { opacity: .72; }
.panel .panel-sub { opacity: .78; }
.result-rows .row { opacity: 1; }
.result-hero .caps { opacity: .85; }
.result-note { opacity: .68; }
.privacy-note { opacity: .68; }
.fee-toggle button:not(.active),
.gate-choice button:not(.active) { opacity: .78; }
#gateBonus { opacity: .85 !important; }
.form-done p, .form-done { opacity: 1; }

/* ---------------------------------------------------------------------------
   2. MOBILE
--------------------------------------------------------------------------- */

/* The hamburger only exists on small screens. */
.nav-toggle { display: none; }

@media (max-width: 760px) {

  /* Nav: compact, never overflows the viewport */
  nav { padding: 14px 5vw; gap: 12px; flex-wrap: nowrap; }
  nav img, nav.scrolled img { height: 30px; }
  nav a.btn, .nav-links a.btn {
    padding: 10px 13px;
    font-size: 9.5px;
    letter-spacing: .08em;
    white-space: nowrap;
  }
  nav .callto { font-size: 11px; letter-spacing: .1em; }
  nav:not(.scrolled) {
    background: linear-gradient(180deg, rgba(9,25,40,.92) 0%, rgba(9,25,40,0) 100%);
  }

  /* CRITICAL: backdrop-filter on the scrolled nav makes the nav a containing
     block for position:fixed descendants. That collapses the drawer below into
     a ~60px box inside the bar and spills the links over the page once the user
     has scrolled. Solid background instead — no blur, no containing block. */
  nav.scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(12,32,51,.97);
  }

  /* --- Hamburger ------------------------------------------------------- */
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0 8px;
    margin-right: -8px;
    background: none;
    border: 0;
    cursor: pointer;
    flex: 0 0 auto;
    z-index: 60;
  }
  .nav-toggle span {
    display: block;
    height: 1.5px;
    width: 100%;
    background: var(--cream);
    transition: transform .3s, opacity .2s;
  }
  nav.open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
  nav.open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* --- Drawer ---------------------------------------------------------- */
  nav .nav-links {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    padding: 90px 8vw 60px;
    background: var(--navy-deep);
    transform: translateY(-100%);
    transition: transform .42s cubic-bezier(.2,.7,.2,1);
    z-index: 55;
  }
  nav.open .nav-links { transform: none; }

  /* Beat the existing per-page rule that hides the links below 900px. */
  nav .nav-links a:not(.btn) {
    display: block;
    font-size: 20px;
    letter-spacing: .14em;
    opacity: 1;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
  }
  nav .nav-links a:not(.btn):first-child { border-top: 1px solid var(--line); }

  /* The CTA is lifted out of the drawer by nav.js and sits in the bar. */
  nav > a.nav-cta { flex: 0 0 auto; z-index: 60; }

  /* Keep the logo above the drawer so the brand stays visible when open.
     The homepage puts the <img> straight in the nav; subpages wrap it in a link. */
  nav > img,
  nav > a:has(img) { position: relative; z-index: 60; }

  body.nav-open { overflow: hidden; }
}

/* Very small phones: the bar can't hold logo + CTA + toggle, so nav.js leaves
   the appraisal CTA in the drawer and it renders as a full-width button. */
@media (max-width: 380px) {
  nav img, nav.scrolled img { height: 26px; }
  nav .nav-links a.btn {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 28px;
    padding: 16px 10px;
    font-size: 11px;
    letter-spacing: .16em;
  }

  /* Hero: centre the block instead of pinning it to the bottom, so the
     copy sits in the middle of the screen rather than dropping to the base. */
  .hero { height: 92vh; align-items: center; }
  .hero-inner { padding: 70px 6vw 0; }
  .hero-h { display: none; }

  /* Legibility over imagery */
  .hero-shade {
    background: linear-gradient(180deg,
      rgba(9,25,40,.80) 0%, rgba(9,25,40,.66) 38%,
      rgba(12,32,51,.90) 72%, rgba(18,44,68,.98) 100%);
  }
  .page-head .shade {
    background: linear-gradient(180deg,
      rgba(9,25,40,.84) 0%, rgba(9,25,40,.74) 45%, var(--navy) 100%);
  }
  .lp-hero .shade {
    background: linear-gradient(180deg,
      rgba(9,25,40,.90) 0%, rgba(12,32,51,.94) 100%);
  }

  /* Type sizing */
  .hero h1 { font-size: 33px; line-height: 1.14; margin-bottom: 26px; }
  .hero-foot p { font-size: 15px; line-height: 1.7; }
  .page-head h1 { font-size: 31px; line-height: 1.16; }
  .page-head p { font-size: 15px; line-height: 1.72; }
  .lp-hero h1 { font-size: 33px; line-height: 1.14; }
  .lp-hero p.lead { font-size: 15.5px; line-height: 1.72; }

  /* Buttons */
  .hero-ctas { width: 100%; gap: 10px; }
  .hero-ctas .btn {
    flex: 1 1 0;
    padding: 15px 8px;
    font-size: 10px;
    letter-spacing: .1em;
    text-align: center;
  }
  .trust span { font-size: 10px; letter-spacing: .14em; padding: 8px 13px; }

  /* Ad landing page: get the form as close to the fold as possible */
  .lp-hero { min-height: 0; padding: 96px 6vw 60px; gap: 28px; }
  .lp-hero .caps { margin-bottom: 16px; }
  .lp-hero h1 { margin-bottom: 18px; }
  .lp-hero p.lead { margin-bottom: 22px; }
  .panel { padding: 34px 24px; }
}

/* On touch devices the hover letter-spacing change shifts the layout
   under the finger. Kill it. */
@media (hover: none) {
  .btn:hover, .nav-links a.btn:hover { letter-spacing: inherit; }
}