/* nav.css — the ONE site navigation, 2026-08-31.
   Tony: "the navigation at the top should all be cohesive, same as footer, on each page."

   MEASURED BEFORE THIS FILE EXISTED: the homepage nav was 13,988 bytes and carried the services
   menu, the phone number, Log In and a cart. Every inner page carried a DIFFERENT 720-byte header
   with none of those. The link LIST was already shared (_includes/primary-nav.php); it was the
   chrome around it that differed, which is why the site read as two sites.

   These rules are lifted verbatim from index.php, the header Tony said reads right. The palette
   tokens come with them, and #D9B25A is the gold the team pages now use too. */


:root{
  --cream:#EFF7EF; --cream-2:#F5FBF5; --peach:#E3F1E6;
  --forest:#1E7A45; --forest-2:#15693a; --forest-deep:#0e5530;
  --sage:#3B5C53; --mint:#C9F7DA; --orange:#EB5F3C; --teal:#3FB78F;
  --cart-badge:#C2410C; /* the cart count is 10px white text. On --orange #EB5F3C that measured
                          3.37:1 against a 4.5:1 AA requirement; #C2410C measures 5.18:1. Kept as a
                          separate token so --orange is unchanged everywhere else. */
    --ink:#2B2118; --brown:#2E2118; --gray:#646464; --line:#D7E6DB; --gold:#D9B25A;
}

.wrap{max-width:1140px;margin:0 auto;padding:0 22px}


/* HEADER */
.nav{background:var(--cream);position:sticky;top:0;z-index:60;border-bottom:1px solid var(--line)}

.nav-row{display:flex;align-items:center;gap:14px;padding:10px 0}

.brand{display:flex;align-items:center;gap:9px;min-width:0;font-family:'Playfair Display',Georgia,serif;font-weight:500;color:var(--brown);font-size:13px;letter-spacing:.5px;text-transform:uppercase}

.brand img{width:40px;height:40px}

.nav-links{display:flex;gap:22px;align-items:center;margin-left:18px;flex:1}

.nav-links a{color:var(--ink);font-weight:500;font-size:15px}

.nav-links a:hover{color:var(--forest)}

.nav-right{display:flex;align-items:center;gap:18px}

.nav-phone{display:flex;align-items:center;gap:7px;color:var(--forest);font-weight:700;font-size:15px;white-space:nowrap}

.nav-login{display:flex;align-items:center;gap:6px;color:var(--ink);font-weight:500;font-size:14px}

.nav-login .av{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--forest);display:inline-flex;align-items:center;justify-content:center;color:var(--forest);font-size:13px}

.nav-cart{position:relative;color:var(--brown);font-size:20px;flex:none}

.nav-cart .ct{position:absolute;top:-8px;right:-9px;background:var(--cart-badge);color:#fff;font-size:10px;font-weight:700;border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-family:'Mulish'}

.burger{display:none;font-size:24px;color:var(--brown);background:none;border:0;flex:none}
@media(max-width:1024px){
.nav-links{display:none}
.burger{display:block}
}
@media(max-width:400px){
.brand span{font-size:11px}
.nav-phone{font-size:13px}
}
@media(min-width:1025px){
.nav .wrap{max-width:none;padding-left:44px;padding-right:44px}
.nav-links a{white-space:nowrap}
}

#mnav a.mnav-link{display:block;min-height:44px;padding:11px 4px;color:var(--ink);font-weight:600;
  font-size:16px;line-height:1.4;text-decoration:none;border-radius:9px}

#mnav a.mnav-link:hover,#mnav a.mnav-link:focus-visible{background:#F3FBF6;color:#0e5530}

#mnav a.mnav-link:focus-visible{outline:3px solid #D9B25A;outline-offset:2px}

/* FULL-BLEED BANDS (Tony 2026-08-25): "see full-width you don't have that on
   smseniorhomes.com we need that like is shown at maureeneliz.wixsite.com/senior-home-solution".
   The wordmark band and the category row escape the 1140px .wrap and run edge-to-edge with a
   ~30px gutter, matching the reference. This is done by MARKUP (a sibling container), never by
   100vw / calc(50% - 50vw) - a vw escape on a page that has a scrollbar is the classic way to
   introduce horizontal scroll. Running BODY COPY is deliberately left inside .wrap: 1400px lines
   of prose are unreadable, and this is a senior audience. */
.wrap-wide{max-width:none;margin:0;padding:0 30px}
@media(max-width:560px){
.wrap-wide{padding:0 16px}
}

.mlm .wrap.mlm-grid{max-width:1340px}

/* Tony asked twice for these faces to be CENTRED. They were a grid of
   repeat(auto-fit,minmax(190px,1fr)), and 1fr means the last row STRETCHES to fill the row
   instead of centring: measured 2026-08-26 the last row sat hard left with a 500px hole at
   1024px and a 496px hole at 768px. Ten faces happen to split 5+5 at 1440px, which is why
   a desktop glance said it was fine. Flex-wrap with justify-content:center and NO flex-grow
   centres every row including a short last one, and it keeps doing so when the roster count
   changes. Deliberately NO max-width or margin:auto here - .wrap already centres this box,
   and centring an already-centred container twice is what makes it look off. */
.ppl-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}

/* ── MOBILE HEADER OVERFLOW FIX (Vaughn, 2026-09-15) ────────────────────────────────────────────
   MEASURED IN REAL CHROME AT 390px BEFORE THIS FIX: button.burger sat at x=390 to 412, entirely
   outside the 390px viewport. html,body{overflow-x:hidden} CLIPPED it, so scrollWidth (390) equaled
   clientWidth (390) and every automated mobile check reported the page clean while the only control
   that opens the menu on a phone was unreachable. There was no way to navigate this site from a
   phone on any page that uses nav-main.php. A CSS declaration silenced the measurement that should
   have caught it, which is exactly why the build standard says to LOOK rather than trust scrollWidth.

   CAUSE: .nav-row cannot fit brand + the phone NUMBER + the words "Log In" + cart + burger at 390,
   and .burger is the LAST child of .nav-right, so it is the first element pushed past the edge.

   FIX: below 480px the two redundant TEXT labels are dropped with font-size:0. Both ANCHORS and
   both ICONS stay, so tel: and the login link keep working, the icons keep their accessible names,
   and screen readers still announce the hidden text because font-size:0 is not display:none.
   The burger is also moved FIRST in the cluster with order:-1, so it can never again be the element
   that overflows. Every control in the row is given a 44px minimum tap target.

   RE-VERIFY BY LOOKING, never by scrollWidth, for the reason above. */
@media(max-width:480px){
  .nav-row{gap:8px}
  .nav-right{gap:12px}
  .burger{order:-1;display:flex;align-items:center;justify-content:center;
          min-width:44px;min-height:44px;font-size:26px;line-height:1}
  .nav-phone{font-size:0;gap:0;min-width:44px;min-height:44px;justify-content:center}
  .nav-phone svg{width:22px;height:22px}
  .nav-login{font-size:0;gap:0;min-width:44px;min-height:44px;justify-content:center}
  .nav-cart{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
  /* ⭐ THE CART BADGE WAS THE LAST THING STILL OUTSIDE THE VIEWPORT (Chase, 2026-09-21).
     MEASURED IN REAL CHROME BEFORE THIS FIX, and it is the same defect class Vaughn wrote up
     directly above. .nav-row{padding:10px 0} overrides .wrap's 22px side padding, so on a phone
     the header row has NO gutter at all: a.nav-cart ends flush at x=390 and .ct's right:-9px
     put the badge at left=383 right=399, NINE PIXELS PAST THE VIEWPORT. Identical on / , on
     /contact/ and on /quote/, and at every width measured from 320 to 480 (320:+9, 360:+9,
     375:+9, 390:+9, 412:+6 on /, +9 on the others, 430:+9, 480:+9; 481 and up were already
     inside). html,body{overflow-x:hidden} clipped it, so scrollWidth 390 equalled clientWidth
     390 and every automated check called the page clean. The clamp hid the symptom; it never
     moved the badge back on screen.
     FIX: inside the mobile chrome only, pin the badge inside the 44px tap target instead of
     hanging it off the corner. Right edge now lands at 388 of 390. DESKTOP IS DELIBERATELY
     UNTOUCHED: above 1024 .nav .wrap carries a 44px gutter the overhang sits in, and that
     header is the one Tony signed off on. */
  .nav-cart .ct{top:2px;right:2px}
  .brand span{font-size:10px}
}