/* ==========================================================================
   NAV — Services dropdown + mobile drawer.
   Additive: the base .nav/.links/.logo/.burger rules still live inline in each
   template. This file only adds the disclosure dropdown and the mobile panel.

   Nav-specific values are declared here rather than in tokens.css because no
   page currently loads tokens.css — each template declares its own :root.
   Every variable referenced below (--red --ink --slate --peri-soft --line
   --paper --mute --r --sh-lg --ui) is defined in all 13 templates.
   ========================================================================== */

:root{
  --nav-dd-w:      264px;  /* Services panel min-width                      */
  --nav-dd-pad:    8px;    /* panel inner padding                           */
  --nav-drawer-w:  360px;  /* mobile drawer max-width                       */
  --nav-dd-z:      70;     /* above .nav (z-index 60)                       */
  --nav-drawer-z:  90;
}

/* ---------------------------------------------------------------- dropdown */
.nav .has-dd{position:relative}

/* Font properties are set individually, not via the `font` shorthand: the
   shorthand resets line-height to `normal`, which made the button 6px shorter
   than the sibling links and knocked it out of vertical alignment. */
.nav .dd-btn{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--ui);font-size:14.5px;font-weight:500;line-height:inherit;
  color:var(--slate);
  background:none;border:0;cursor:pointer;
  padding:9px 15px;border-radius:999px;
  white-space:nowrap;
  transition:background var(--dur-fast,.16s),color var(--dur-fast,.16s);
}
.nav .dd-btn:hover{background:var(--peri-soft);color:var(--ink)}
.nav .dd-btn[aria-expanded="true"]{background:var(--peri-soft);color:var(--ink)}

/* Chevron rotates to signal state. Reduced-motion users get the end state. */
.nav .dd-btn .chev{
  width:10px;height:10px;flex:none;
  transition:transform var(--dur-fast,.16s) ease;
}
.nav .dd-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}

.nav .dd-panel{
  position:absolute;top:calc(100% - 6px);left:0;z-index:var(--nav-dd-z);
  min-width:var(--nav-dd-w);
  padding:var(--nav-dd-pad);
  margin:0;list-style:none;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--sh-lg);
}
.nav .dd-panel[hidden]{display:none}
.nav .dd-panel li{margin:0}

/* Higher specificity than the inline `.links a` pill rule, so panel links read
   as a list rather than inheriting the pill padding. */
.nav .dd-panel a{
  display:block;
  padding:10px 14px;
  border-radius:var(--r-sm,14px);
  font-family:var(--ui);font-size:14.5px;font-weight:500;line-height:1.45;
  color:var(--slate);text-decoration:none;
  white-space:nowrap;
}
.nav .dd-panel a:hover,
.nav .dd-panel a:focus-visible{background:var(--peri-soft);color:var(--ink)}
.nav .dd-panel a[aria-current="page"]{color:var(--red);font-weight:700}

/* The hub link sits first and is separated from the four service pages. */
.nav .dd-panel .dd-hub{
  border-bottom:1px solid var(--line);
  margin-bottom:var(--nav-dd-pad);
  padding-bottom:var(--nav-dd-pad);
}

/* Visible focus everywhere — WCAG 2.4.7 */
.nav .dd-btn:focus-visible,
.nav .dd-panel a:focus-visible,
.rr-drawer a:focus-visible,
.rr-drawer button:focus-visible{
  outline:2px solid var(--red);outline-offset:2px;
}

/* -------------------------------------------------------------- nav fit
   Adding "Insights" plus the Services button pushed the row past the space
   available at 1024px: the flex items shrank below their content width and the
   labels wrapped to two lines inside their own pills.

   `white-space:nowrap` stops the internal wrap, `flex:none` stops the shrink,
   and the band below tightens gap and padding so the whole row still clears
   the logo at 1024. Measured at 1024: 769px needed vs 724px available, so we
   reclaim ~68px (20px of gap, 48px of padding).                            */
.nav .links > a,
.nav .links .dd-btn{white-space:nowrap;flex:none}

@media (min-width:901px) and (max-width:1150px){
  .nav .links{gap:4px}
  .nav .links > a,
  .nav .links .dd-btn{padding-left:11px;padding-right:11px}
  .nav .links .btn{margin-left:4px}
  .nav .logo img{height:46px}
  .nav .logo b{font-size:19px}
}

/* The wordmark must never break across two lines — squeezing the logo is what
   made "ROBIN / ROBINS" stack at the narrow end of the desktop range. */
.nav .logo b{white-space:nowrap}

/* Tightest desktop step: at 901px (one pixel above the burger breakpoint) the
   row would otherwise sit flush against the logo with zero slack. */
@media (min-width:901px) and (max-width:980px){
  .nav .links{gap:2px}
  .nav .links > a,
  .nav .links .dd-btn{padding-left:8px;padding-right:8px}
  .nav .logo{gap:8px}
  .nav .logo img{height:40px}
  .nav .logo b{font-size:17px}
}

/* ---------------------------------------------------------- mobile drawer */
.rr-drawer-wrap{
  position:fixed;inset:0;z-index:var(--nav-drawer-z);
  background:rgba(35,31,32,.5);
  display:none;
}
.rr-drawer-wrap.is-open{display:block}

.rr-drawer{
  position:absolute;top:0;right:0;
  width:min(var(--nav-drawer-w),88vw);height:100%;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--paper);
  box-shadow:var(--sh-lg);
  padding:18px 20px 40px;
  display:flex;flex-direction:column;gap:2px;
}

.rr-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
}
.rr-drawer-close{
  background:var(--ink);color:var(--paper);border:0;cursor:pointer;
  font:700 13px var(--ui);letter-spacing:.05em;text-transform:uppercase;
  padding:10px 18px;border-radius:999px;
}

.rr-drawer a{
  display:block;padding:12px 14px;border-radius:var(--r-sm,14px);
  font:500 16px var(--ui);color:var(--slate);text-decoration:none;
}
.rr-drawer a:hover{background:var(--peri-soft);color:var(--ink)}
.rr-drawer a[aria-current="page"]{color:var(--red);font-weight:700}

.rr-drawer .rr-drawer-label{
  font:700 12.5px var(--ui);letter-spacing:.15em;text-transform:uppercase;
  color:var(--mute);
  padding:16px 14px 6px;
}
/* Service pages are listed flat under a label — no nested toggle to fight
   with on a touch target this size. */
.rr-drawer .rr-drawer-sub a{padding-left:26px}

.rr-drawer .rr-drawer-cta{
  margin-top:18px;text-align:center;
  background:var(--red);color:var(--paper);font-weight:700;
  border-radius:999px;padding:14px 20px;
}
.rr-drawer .rr-drawer-cta:hover{background:var(--red-dk,#B00810);color:var(--paper)}

/* The drawer is a mobile affordance only; above the burger breakpoint the
   inline `.links` nav is visible and the drawer must never appear. */
@media (min-width:901px){
  .rr-drawer-wrap{display:none!important}
}

@media (prefers-reduced-motion:reduce){
  .nav .dd-btn .chev{transition:none}
}