/* 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}
/* flex:0 0 auto ADDED 2026-08-17. THIS FIXES A LIVE LOGO BUG, and the bug was
   here before the type pass -- the type pass only made it obvious.
   .rw-brandcol was a shrinkable flex item holding an <img> that carries the
   global img{max-width:100%}. So when the nav ran short of room the column
   shrank, max-width:100% pulled the image's WIDTH down with it, and
   height:34px held the height fixed. The result is a horizontally SQUASHED
   wordmark, not a smaller one. Measured on the live render at 1025px:
     header links at 16px (as shipped)  logo 295x34, aspect 8.68 vs 9.36,  7% squash
     header links at 18px (Steve's spec) logo 236x34, aspect 6.94 vs 9.36, 26% squash
   7% was quietly wrong. 26% is unmissable. Neither is acceptable on a logo.
   flex:0 0 auto stops the column shrinking at all, so the lockup renders at its
   true 318x34 or not at all. The collapse breakpoint below moves with it. */
.rw-brandcol{display:flex;flex-direction:column;align-items:flex-start;gap:1px;flex:0 0 auto}
.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
   749x80. The .rw-logo-type rules below are the retired CSS-typeset treatment,
   kept for reference.

   SIZE REDUCED 2026-08-17 (Steve: "a little too large ... reduce it").
   40px -> 34px, a 15% trim. Deliberately modest: the lockup carries the tile
   mark AND the wordmark, so it goes illegible faster than a plain wordmark
   would, and the "powered by Own The Box Marketing LLC" sub-line sits directly
   under it and has to stay readable.
   RETINA: the asset is 80px tall, so any displayed height at or under 40px is
   >=2x. At 34px it renders at 2.35x, crisper than before, not softer. Do not
   raise any of these values above 40px without shipping a taller asset. */
.rw-logo-img{display:block;height:34px;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}
/* HEADER TYPE, Steve's scale 2026-08-17: 16 / 17 / 18.
   Only the desktop value is reachable. Below 1024px .rw-links and .rw-cta are
   display:none and the header collapses to the hamburger, so the mobile and
   tablet columns of that line have no element to land on -- what a phone and a
   tablet actually show is the logo lockup plus .rw-menu a, which is a
   full-screen overlay at 22px and is left alone. So 16px -> 18px on desktop,
   and nothing else changes.
   THIS FILE IS SHARED BY ALL 20 PAGES. The header is meant to be identical
   site-wide, so this ships everywhere by design rather than by accident.
   NAV FIT CHECKED, not assumed: measured at 1025px, the tightest width at
   which the link row renders at all. */
.rw-links a{font-family:var(--rw-sf);font-size:18px;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:18px;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.
   1024 -> 1120, 2026-08-17, and it is a consequence of the rule above, not a
   taste change. Now that the brand column cannot shrink, the link row has to
   hand over to the hamburger at the width where it stops fitting instead of
   quietly eating the logo. The arithmetic, measured not guessed:
     logo 318 + gap 20 + links 507 + gap 26 + CTA 157 = 1028px of content
     + the nav's own 2 x 32px padding                  = 1092px of nav
   1120 is the nav's own max-width, so the rule reads as "show the links only
   when the nav can be at its full designed width", with 28px to spare. Between
   1025 and 1120 a visitor now gets the hamburger, which is the same header
   every phone and tablet already gets, instead of a 26%-squashed wordmark.
   If Steve would rather keep links down to 1025, the header type has to go
   back to 16px AND the brand column has to keep flex:0 0 auto -- at 16px the
   requirement is 982 + 64 = 1046, which still does not fit 1025. The links
   never actually fitted at 1025; the logo was paying for it. */
@media (max-width:1120px){
  .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:31px}
  .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:27px}
  .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:24px}
  .rw-logo-type{font-size:23px}
  .rw-logo-type .rw-cursor{height:18px;width:11px}
  .rw-brand-sub{font-size:9px}
}