﻿/* Freehold menu rail - the studio's annotation layer on the Range showcases.
   Shared verbatim by all three showcase pages (linked, not pasted, so it cannot drift).
   Brand: Freehold land green + survey-peg gold, regardless of each showcase's own palette. */

.fh-rail{display:none;}
.fh-chip{display:none;}

/* ---- desktop: a stationary box down the left hand side ---- */
@media (min-width:1240px){
  body{padding-left:19.5rem;}
  .fh-rail{
    display:block;position:fixed;left:1.1rem;top:50%;transform:translateY(-50%);
    z-index:60;width:17rem;box-sizing:border-box;
    background:#253D2E;color:#F5EFE3;border:2px solid #C8863C;
    box-shadow:4px 4px 0 rgba(23,39,29,.4);
    padding:1rem 1rem .9rem;
    font-family:'Atkinson Hyperlegible',sans-serif;
  }
  .fh-rail-title{margin:0 0 .7rem;font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#E9C48A;display:flex;align-items:center;gap:.55rem;}
  .fh-rail-title::before{content:"";width:7px;height:7px;background:#C8863C;}
  .fh-rail-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem;}
  .fh-rail a.fh-rail-item, .fh-sheet a.fh-rail-item{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:#C6D6C9;padding:.32rem .4rem;}
  .fh-rail a.fh-rail-item:hover, .fh-sheet a.fh-rail-item:hover{color:#fff;}
  .fh-rail-num{flex:none;display:inline-grid;place-items:center;width:1.7rem;height:1.7rem;color:#E9C48A;font-weight:700;font-size:.95rem;border:2px solid #C8863C;background:transparent;}
  .fh-rail-label{font-size:.9rem;font-weight:700;line-height:1.25;}
  .fh-rail a.fh-rail-item.is-active, .fh-sheet a.fh-rail-item.is-active{background:rgba(200,134,60,.16);color:#fff;}
  .fh-rail a.fh-rail-item.is-active .fh-rail-num, .fh-sheet a.fh-rail-item.is-active .fh-rail-num{background:#C8863C;color:#253D2E;box-shadow:2px 2px 0 #17271D;}
  .fh-rail-hint{margin:.85rem 0 0;font-size:.79rem;line-height:1.45;color:#A8C1AF;}
  .fh-rail .fh-rail-hint a, .fh-sheet .fh-rail-hint a{color:#E9C48A;}
}

/* ---- below 1240px: bottom-left chip + pop-up sheet ---- */
@media (max-width:1239.9px){
  .fh-chip{
    display:inline-flex;align-items:center;gap:.55rem;
    position:fixed;left:.9rem;bottom:.9rem;z-index:60;max-width:74vw;
    background:#253D2E;color:#F5EFE3;border:2px solid #C8863C;
    box-shadow:3px 3px 0 rgba(23,39,29,.4);
    padding:.5rem .8rem;cursor:pointer;
    font-family:'Atkinson Hyperlegible',sans-serif;font-size:.9rem;font-weight:700;text-align:left;
  }
  .fh-chip-num{flex:none;display:inline-grid;place-items:center;width:1.7rem;height:1.7rem;background:#C8863C;color:#253D2E;font-weight:700;border:2px solid #17271D;}
  .fh-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .fh-sheet{
    position:fixed;left:.9rem;bottom:4.2rem;z-index:61;width:min(20rem,90vw);box-sizing:border-box;
    background:#253D2E;color:#F5EFE3;border:2px solid #C8863C;box-shadow:4px 4px 0 rgba(23,39,29,.4);
    padding:1rem;font-family:'Atkinson Hyperlegible',sans-serif;
  }
  .fh-sheet .fh-rail-title{margin:0 0 .7rem;font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#E9C48A;}
  .fh-sheet .fh-rail-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem;}
  .fh-sheet .fh-rail a.fh-rail-item, .fh-sheet a.fh-rail-item{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:#C6D6C9;padding:.32rem .4rem;}
  .fh-sheet .fh-rail-num{flex:none;display:inline-grid;place-items:center;width:1.7rem;height:1.7rem;color:#E9C48A;font-weight:700;font-size:.95rem;border:2px solid #C8863C;}
  .fh-sheet .fh-rail a.fh-rail-item.is-active, .fh-sheet a.fh-rail-item.is-active{background:rgba(200,134,60,.16);color:#fff;}
  .fh-sheet .fh-rail a.fh-rail-item.is-active .fh-rail-num, .fh-sheet a.fh-rail-item.is-active .fh-rail-num{background:#C8863C;color:#253D2E;}
  .fh-sheet .fh-rail-label{font-size:.9rem;font-weight:700;line-height:1.25;}
  .fh-sheet .fh-rail-hint{margin:.85rem 0 0;font-size:.79rem;line-height:1.45;color:#A8C1AF;}
  .fh-sheet .fh-rail .fh-rail-hint a, .fh-sheet .fh-rail-hint a{color:#E9C48A;}
}

/* ---- the ask-us chat, built into the rail: input always visible, history grows beneath the menu ---- */
.fh-sheet[hidden]{display:none;}
.fh-rail-chat{
  margin-top:.85rem;
  border:1px solid #C8863C;background:#F7F1E6;
  height:8.4rem;
  transition:height .25s ease;
  overflow:hidden;
}
.fh-rail-chat.is-open{height:min(24rem,46vh);}
.fh-rail-chat iframe{width:100%;height:100%;border:0;display:block;}
@media (prefers-reduced-motion: reduce){.fh-rail-chat{transition:none;}}

.fh-rail a:focus-visible,.fh-rail button:focus-visible,.fh-chip:focus-visible,.fh-sheet a:focus-visible,.fh-sheet button:focus-visible{outline:3px solid #E9C48A;outline-offset:2px;}
