/* rhody-apple.css -- global Apple design language for Rhody Websites.
   Loaded on every page. Owns the shared chrome: header, logo, hamburger nav,
   and base typography. Page bodies carry their own (Apple-palette) inline
   styles; this file makes the header/nav universal and maintainable.
   TYPOGRAPHY: Apple system stack (real SF on Apple devices; Helvetica Neue /
   Arial fallback elsewhere -- we do not ship SF font files, no licence to).
   PALETTE: white / #f5f5f7 bands, near-black #1d1d1f text, gray #6e6e73,
   Apple blue #0071e3. Header logo = the original terminal ">rhodywebsites"
   wordmark (JetBrains Mono) recolored to the Apple palette. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@800&display=swap');
:root{
  --rw-sf:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --rw-ink:#1d1d1f;
  --rw-ink2:#6e6e73;
  --rw-line:#d2d2d7;
  --rw-blue:#0071e3;
  --rw-blue-h:#0077ed;
}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:var(--rw-sf)}

/* ---- header ---- */
.rw-header{position:sticky;top:0;z-index:1000;
  background:rgba(255,255,255,0.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,0.08)}
.rw-nav{max-width:1120px;margin:0 auto;padding:12px 32px;display:flex;
  align-items:center;justify-content:space-between;gap:20px}
.rw-brandcol{display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.rw-brand{display:inline-flex;align-items:center;text-decoration:none}
.rw-brand:hover{text-decoration:none}
/* Header logo is now the TILE LOCKUP image (Steve, 2026-08-16): rounded blue
   square + white arrow + wordmark, arrow ONLY in the tile so it never reads as
   two arrows. Light variant, because the header band is white. Shipped at 2x
   (749x80) for retina and displayed at 40px tall. The .rw-logo-type rules below
   are the retired CSS-typeset treatment, kept for reference. */
.rw-logo-img{display:block;height:40px;width:auto}
.rw-logo-type{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:800;font-size:34px;letter-spacing:-0.055em;white-space:nowrap;line-height:1.15}
.rw-logo-type .rw-chev{color:var(--rw-blue)}
.rw-logo-type .rw-r{color:var(--rw-ink)}
.rw-logo-type .rw-w{color:var(--rw-blue)}
.rw-logo-type .rw-cursor{display:inline-block;width:16px;height:26px;background:var(--rw-blue);
  vertical-align:-3px;margin-left:5px}
.rw-brand-sub{align-self:flex-end;text-align:right;font-family:var(--rw-sf);font-style:italic;
  font-size:11px;color:var(--rw-ink2);letter-spacing:0.01em;white-space:nowrap;margin-top:1px}
.rw-nav-right{display:flex;align-items:center;gap:26px}
.rw-links{display:flex;align-items:center;gap:26px}
.rw-links a{font-family:var(--rw-sf);font-size:16px;color:var(--rw-ink);
  text-decoration:none;font-weight:400;white-space:nowrap}
.rw-links a:hover{color:var(--rw-blue)}
.rw-links a.rw-phone{font-weight:600}
.rw-cta{font-family:var(--rw-sf);font-size:16px;font-weight:500;
  background:var(--rw-blue);color:#fff;padding:9px 18px;border-radius:980px;
  text-decoration:none;white-space:nowrap}
.rw-cta:hover{background:var(--rw-blue-h);color:#fff;text-decoration:none}

/* ---- hamburger button ---- */
.rw-burger{display:none;flex:0 0 auto;width:44px;height:44px;border:0;
  background:transparent;cursor:pointer;align-items:center;justify-content:center;
  border-radius:10px;padding:0}
.rw-burger:focus-visible{outline:2px solid var(--rw-blue);outline-offset:2px}
.rw-burger .bar{display:block;width:22px;height:2px;background:var(--rw-ink);
  position:relative;transition:background .2s}
.rw-burger .bar::before,.rw-burger .bar::after{content:"";position:absolute;
  left:0;width:22px;height:2px;background:var(--rw-ink);transition:transform .2s,top .2s}
.rw-burger .bar::before{top:-7px}
.rw-burger .bar::after{top:7px}
.rw-burger[aria-expanded="true"] .bar{background:transparent}
.rw-burger[aria-expanded="true"] .bar::before{top:0;transform:rotate(45deg)}
.rw-burger[aria-expanded="true"] .bar::after{top:0;transform:rotate(-45deg)}

/* ---- mobile / tablet menu panel ---- */
/* The menu is a direct child of <body> (NOT inside the backdrop-filtered
   header), so position:fixed resolves against the viewport and it overlays the
   whole page. Solid background + explicit dark text so it is always legible. */
.rw-menu{display:none;position:fixed;inset:0;z-index:999;
  background:#ffffff;color:var(--rw-ink);
  padding:88px 24px 40px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .2s ease,transform .2s ease}
.rw-menu.open{opacity:1;transform:none;pointer-events:auto}
.rw-menu a{display:block;font-family:var(--rw-sf);font-size:22px;font-weight:500;
  color:var(--rw-ink);text-decoration:none;padding:18px 2px;
  border-bottom:1px solid var(--rw-line)}
.rw-menu a:hover{color:var(--rw-blue);text-decoration:none}
.rw-menu a.rw-menu-cta{margin-top:26px;background:var(--rw-blue);color:#fff;
  border:0;border-bottom:0;border-radius:980px;text-align:center;
  padding:18px;font-size:18px;font-weight:600}
.rw-menu a.rw-menu-cta:hover{background:var(--rw-blue-h);color:#fff}
body.rw-noscroll{overflow:hidden}

/* Collapse to hamburger below desktop width -- includes tablet (break at 1024). */
@media (max-width:1024px){
  .rw-links,.rw-nav-right>.rw-cta{display:none}
  .rw-burger{display:inline-flex}
  .rw-menu{display:block}
}
/* Below desktop, ease the terminal wordmark down a notch so it isn't overbearing
   and never crowds the hamburger. Desktop size (34px) is unchanged. */
@media (max-width:768px){
  .rw-logo-img{height:36px}
  .rw-logo-type{font-size:30px}
  .rw-logo-type .rw-cursor{height:23px;width:14px}
}
@media (max-width:560px){
  .rw-nav{padding:12px 18px}
  .rw-logo-img{height:31px}
  .rw-logo-type{font-size:26px}
  .rw-logo-type .rw-cursor{height:20px;width:12px}
  .rw-brand-sub{font-size:10px}
}
@media (max-width:400px){
  .rw-nav{padding:12px 16px}
  .rw-logo-img{height:27px}
  .rw-logo-type{font-size:23px}
  .rw-logo-type .rw-cursor{height:18px;width:11px}
  .rw-brand-sub{font-size:9px}
}