/* Macoupin County VAC — "American Civic Institutionalism" MACVAC site stylesheet. Navy + Gold + Cream; Merriweather + Source Sans 3. NOTE: gold accents are intentional for the public website and differ from the VAC "no gold" brand standard — swap --gold to a blue to convert. */ :root{ --navy:#1B2A4A; --navy-dark:#122039; --gold:#C9A84C; --gold-dark:#b8963c; --gold-text:#7C5F14; --gold-light:#E7D7A6; --cream:#F5F3EE; --crisis:#9A3324; --ink:#20262f; --muted:#5A6478; --muted2:#676F82; --border:#D7DBE2; --foot:#DCD9D0; --foot-border:#3A4A6B; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{margin:0;background:var(--cream);color:var(--ink); font-family:'Source Sans 3','Source Sans Pro',system-ui,sans-serif;line-height:1.6;} h1,h2,h3,h4,h5,h6{font-family:'Merriweather',Georgia,serif;} a{color:var(--navy);} .container-x{max-width:1280px;margin:0 auto;padding-left:1rem;padding-right:1rem;} @media(min-width:640px){.container-x{padding-left:1.5rem;padding-right:1.5rem;}} @media(min-width:1024px){.container-x{padding-left:2rem;padding-right:2rem;}} a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px;} /* dividers */ .gold-divider{height:3px;background:linear-gradient(to right,transparent,var(--gold),transparent);margin:1.5rem 0;} .gold-divider-left{height:3px;width:80px;background:var(--gold);margin-bottom:1rem;} /* section bg helpers */ .section-navy{background:var(--navy);color:#fff;} .section-cream{background:var(--cream);} .section-white{background:#fff;} .crisis-bar{background:var(--crisis);color:#fff;} /* buttons */ .btn-gold,.btn-navy,.btn-outline-gold{display:inline-block;font-family:'Source Sans 3',sans-serif; font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.85rem;border-radius:2px; text-decoration:none;transition:all .2s ease;cursor:pointer;} .btn-gold{background:var(--gold);color:var(--navy-dark);padding:.75rem 1.75rem;border:2px solid var(--gold);} .btn-gold:hover{background:var(--gold-dark);transform:translateY(-1px);box-shadow:0 4px 12px rgba(201,168,76,.4);} .btn-navy{background:var(--navy);color:#fff;padding:.75rem 1.75rem;border:2px solid var(--navy);} .btn-navy:hover{background:var(--navy-dark);transform:translateY(-1px);} .btn-outline-gold{border:2px solid var(--gold-text);color:var(--gold-text);background:transparent;padding:.65rem 1.5rem;} .btn-outline-gold:hover{background:var(--gold);color:var(--navy-dark);} /* cards */ .service-card{background:#fff;border-top:4px solid var(--gold);border-radius:2px;padding:2rem; box-shadow:0 2px 12px rgba(27,42,74,.08);transition:all .25s ease;height:100%;text-decoration:none;display:block;color:var(--ink);} .service-card:hover{box-shadow:0 8px 24px rgba(27,42,74,.15);transform:translateY(-3px);} .benefit-card{border-left:4px solid var(--gold);padding:1.25rem 1.5rem;background:var(--cream); margin-bottom:.75rem;transition:all .2s ease;} .benefit-card:hover{background:#fff;box-shadow:0 2px 8px rgba(27,42,74,.1);} .stat-number{font-family:'Merriweather',Georgia,serif;font-size:3rem;font-weight:900;color:var(--gold-text);line-height:1;} /* nav */ .navlink{font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:.9rem;color:var(--navy); padding:.5rem .75rem;border-radius:2px;text-decoration:none;transition:all .2s;} .navlink:hover,.navlink.active{background:var(--navy);color:#fff;} /* animation */ @keyframes fadeInUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}} .reveal{opacity:0;} .reveal.in{animation:fadeInUp .6s ease forwards;} /* generic helpers used in pages */ .eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text);font-family:'Source Sans 3',sans-serif;} .lead{font-size:1.12rem;color:var(--muted);} .skip{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:.6rem 1rem;z-index:200;} .skip:focus{left:8px;top:8px;} /* ---- page-level helpers for interior pages ---- */ .pagehead{background:var(--navy);color:#fff;padding:3.25rem 0;} .pagehead h1{font-size:2.2rem;font-weight:900;color:#fff;margin:.2rem 0 .4rem;} .pagehead p{color:rgba(255,255,255,.78);font-size:1.05rem;margin:0;} .h2blk{font-weight:900;font-size:1.55rem;color:var(--navy);margin:0 0 1rem;} .vactable{width:100%;border-collapse:collapse;font-size:.9rem;} .vactable th{background:var(--navy);color:#fff;text-align:left;padding:.6rem .75rem;font-family:'Source Sans 3',sans-serif;} .vactable td{padding:.6rem .75rem;border-bottom:1px solid var(--border);vertical-align:top;color:var(--ink);} .vactable tr:nth-child(even) td{background:var(--cream);} .card-b{background:#fff;border:1px solid var(--border);border-radius:2px;padding:1.25rem;} .callout-l{border-left:4px solid var(--gold);background:#fff;padding:1.25rem 1.5rem;border-radius:2px;} .callout-crisis{border-left:4px solid var(--crisis);background:#fff;padding:1.25rem 1.5rem;border-radius:2px;} details.acc-item{border:1px solid var(--border);border-radius:2px;margin-bottom:.75rem;background:#fff;overflow:hidden;} details.acc-item>summary{padding:1.1rem 1.25rem;font-family:Merriweather,serif;font-weight:700;color:var(--navy);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;} details.acc-item>summary::-webkit-details-marker{display:none;} details.acc-item>summary::after{content:"+";color:var(--gold-text);font-weight:700;font-size:1.3rem;} details.acc-item[open]>summary{background:var(--navy);color:#fff;} details.acc-item[open]>summary::after{content:"\2013";color:#fff;} details.acc-item .acc-body{padding:1.5rem;border-top:1px solid var(--border);background:#fcfdff;} .acc-sub{font-size:.8rem;font-weight:400;color:var(--muted2);font-family:'Source Sans 3',sans-serif;display:block;margin-top:.15rem;} .reslink{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--gold-text);text-decoration:none;} /* ---- unified dropdown navigation ---- */ .mainnav .navmenu{list-style:none;display:flex;gap:.15rem;margin:0;padding:0;align-items:center;} .mainnav .navmenu>li{position:relative;} .mainnav .navmenu>li>a,.mainnav .navtop{display:block;padding:.55rem .7rem;font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:.85rem;color:var(--navy);text-decoration:none;border-radius:2px;cursor:pointer;white-space:nowrap;background:none;border:0;} .mainnav .navmenu>li>a:hover,.mainnav .navtop:hover,.mainnav .has-sub:hover .navtop,.mainnav .has-sub:focus-within .navtop{background:var(--navy);color:#fff;} .mainnav .sub{position:absolute;top:100%;left:0;min-width:230px;background:#fff;border:1px solid var(--border);border-top:3px solid var(--gold);box-shadow:0 10px 26px rgba(27,42,74,.18);list-style:none;margin:0;padding:.3rem;display:none;z-index:60;} .mainnav .has-sub:hover .sub,.mainnav .has-sub:focus-within .sub{display:block;} .mainnav .sub li a{display:block;padding:.5rem .7rem;font-size:.85rem;color:var(--navy);text-decoration:none;border-radius:2px;white-space:nowrap;} .mainnav .sub li a:hover{background:var(--cream);color:var(--gold-text);} @media(max-width:1023px){.mainnav{display:none;}} /* ---- nav: click-open + responsive (paired with nav.js) ---- */ .navtoggle{display:none;background:var(--navy);color:#fff;border:0;font-weight:700;font-size:.9rem;padding:.55rem .95rem;border-radius:3px;cursor:pointer;font-family:'Source Sans 3',sans-serif;flex-shrink:0;} .mainnav .has-sub.open .sub{display:block;} /* click-open on desktop */ header .container-x{position:relative;} @media(max-width:1023px){ .mainnav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--border);box-shadow:0 12px 26px rgba(27,42,74,.18);z-index:70;max-height:80vh;overflow:auto;} .mainnav.open{display:block;} .mainnav .navmenu{flex-direction:column;align-items:stretch;gap:0;padding:.4rem;} .mainnav .navmenu>li{position:static;border-bottom:1px solid var(--cream);} .mainnav .navmenu>li>a,.mainnav .navtop{padding:.8rem .7rem;font-size:.95rem;} .mainnav .sub{position:static;display:none;min-width:0;border:0;border-top:0;box-shadow:none;padding:0 0 .4rem 1.1rem;} .mainnav .has-sub.open .sub{display:block;} .navtoggle{display:inline-block;} } /* ---- round 1: contrast + header CTA ---- */ .reslink{color:var(--navy);} /* small link text -> navy for AA contrast */ .hdr-cta{display:inline-block;background:var(--gold);color:var(--navy-dark);font-family:'Source Sans 3',sans-serif;font-weight:700;letter-spacing:.03em;font-size:.82rem;text-transform:uppercase;padding:.6rem 1rem;border-radius:3px;text-decoration:none;white-space:nowrap;flex-shrink:0;} .hdr-cta:hover{background:var(--gold-dark);} @media(max-width:1023px){.hdr-cta{display:none;}} /* ---- emails always lowercase (override .reslink uppercase) ---- */ a.reslink[href^="mailto:"]{text-transform:lowercase;letter-spacing:normal;} /* ---- readability: enlarge small captions/links/tables ---- */ .reslink{font-size:.84rem;} .acc-sub{font-size:.9rem;} .vactable{font-size:.96rem;} .eyebrow{font-size:.78rem;} figcaption{font-size:.9rem;} /* ---- mobile: compact tables (horizontal scroll preserved) ---- */ @media(max-width:640px){ .vactable{font-size:.84rem;} .vactable th,.vactable td{padding:.45rem .5rem;} } /* ---- staff photo placeholders (Our Team) ---- */ .staff-photo{width:120px;height:120px;margin:0 auto .9rem;border-radius:50%;overflow:hidden;border:3px solid var(--gold);box-shadow:0 2px 10px rgba(27,42,74,.15);background:var(--cream);} .staff-photo img{width:100%;height:100%;object-fit:cover;display:block;} .staff-ph{display:none;width:100%;height:100%;align-items:center;justify-content:center;background:var(--navy);color:var(--gold);font-family:Merriweather,serif;font-weight:700;font-size:2rem;letter-spacing:.04em;} /* ---- core values chips (home) ---- */ .val-chip{display:inline-block;background:var(--navy);color:#fff;border:1px solid var(--gold);border-radius:999px;padding:.42rem .95rem;font-size:.85rem;font-weight:600;font-family:'Source Sans 3',sans-serif;} /* ============================================================ MOBILE FIX (2026-07-06): keep header on-screen on phones. The logo link is flex-shrink:0 with a large non-wrapping org name, which pushed the ☰ menu button off the right edge on narrow devices. Let the logo shrink and scale on mobile, and guard against any horizontal overflow. ============================================================ */ html, body { overflow-x: hidden; } *, *::before, *::after { min-width: 0; } @media (max-width: 640px){ /* white header bar: tighten and stop forcing desktop width */ header .container-x[style*="min-height"]{ min-height: 68px !important; gap: .5rem !important; } /* logo: allow it to shrink so the menu button stays visible */ header a[href="index.html"].flex{ flex-shrink: 1 !important; min-width: 0 !important; gap: .5rem !important; } header a[href="index.html"].flex img{ width: 46px !important; height: 46px !important; } header a[href="index.html"].flex > span{ min-width: 0; } header a[href="index.html"].flex > span > span:first-child{ font-size: .9rem !important; line-height: 1.1 !important; } header a[href="index.html"].flex > span > span:last-child{ font-size: .62rem !important; letter-spacing: .03em !important; } /* hamburger: compact and never shrink away */ .navtoggle{ padding: .5rem .7rem !important; flex-shrink: 0 !important; } /* media never wider than the screen */ img, iframe, video, table { max-width: 100% !important; } } /* very small phones: hide the county sub-line to save width */ @media (max-width: 380px){ header a[href="index.html"].flex > span > span:last-child{ display: none !important; } } /* mobile: crisis bar — shrink text so the phone number isn't clipped */ @media (max-width: 640px){ .crisis-bar .container-x{ font-size: .74rem !important; } .crisis-bar .container-x [class*="gap-"]{ gap: .5rem !important; } } @media (max-width: 400px){ .crisis-bar .container-x{ font-size: .68rem !important; } } /* ============================================================ HEADER BRANDING EMPHASIS (2026-07-06; enlarged 2026-08-07): the seal + Commission name are the center of who we are — make them prominent. Overrides the inline sizes in the page markup. ============================================================ */ header a[href="index.html"].flex img{ width: 146px !important; height: 146px !important; } header a[href="index.html"].flex > span > span:first-child{ font-size: 1.85rem !important; line-height: 1.1 !important; letter-spacing: .005em !important; } header a[href="index.html"].flex > span > span:last-child{ font-size: 1.10rem !important; letter-spacing: .14em !important; } header .container-x[style*="min-height"]{ min-height: 176px !important; } /* prominent but still on-screen on phones (menu button stays put) */ @media (max-width: 640px){ header .container-x[style*="min-height"]{ min-height: 124px !important; } header a[href="index.html"].flex img{ width: 102px !important; height: 102px !important; } header a[href="index.html"].flex > span > span:first-child{ font-size: 1.38rem !important; } header a[href="index.html"].flex > span > span:last-child{ font-size: .84rem !important; } } @media (max-width: 380px){ header .container-x[style*="min-height"]{ min-height: 106px !important; } header a[href="index.html"].flex img{ width: 86px !important; height: 86px !important; } header a[href="index.html"].flex > span > span:first-child{ font-size: 1.18rem !important; } header a[href="index.html"].flex > span > span:last-child{ display: none !important; } } /* ============================================================ CALLOUT CARDS (2026-07-06): make service cards read clearly as tappable buttons — especially on mobile. ============================================================ */ .service-card{ border:1px solid var(--border) !important; border-top:4px solid var(--gold) !important; border-radius:10px !important; box-shadow:0 3px 12px rgba(27,42,74,.12) !important; } .service-card:hover, .service-card:focus-visible{ box-shadow:0 12px 28px rgba(27,42,74,.22) !important; transform:translateY(-4px) !important; border-color:var(--gold) !important; } .service-card:active{ transform:translateY(-1px) !important; } .service-card:hover h3{ color:var(--gold-text) !important; } .card-cta{ display:inline-block; margin-top:1.1rem; background:var(--gold); color:var(--navy-dark); font-family:'Source Sans 3',sans-serif; font-weight:800; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; padding:.55rem 1.1rem; border-radius:8px; text-decoration:none; box-shadow:0 2px 6px rgba(27,42,74,.15); } .service-card:hover .card-cta{ background:var(--gold-dark); } @media (max-width:640px){ .service-card{ box-shadow:0 4px 16px rgba(27,42,74,.18) !important; } .card-cta{ display:block; text-align:center; margin-top:1rem; } } /* ===== SECONDARY "Learn More" GHOST BUTTONS (How We Serve You cards) ===== */ .card-learn{ display:inline-block; margin-top:.6rem; border:2px solid var(--navy); color:var(--navy); background:transparent; font-family:'Source Sans 3',sans-serif; font-weight:800; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; padding:.45rem 1rem; border-radius:8px; text-decoration:none; transition:background .15s ease,color .15s ease; } .service-card:hover .card-learn, .service-card:focus-visible .card-learn{ background:var(--navy); color:#fff; } @media (max-width:640px){ .card-learn{ display:block; text-align:center; margin-top:.85rem; } } /* ============================================================ SEAL ASPECT-RATIO FIX (2026-07-06): keep the header seal a perfect circle on phones. Flexbox + min-width:0 was squashing its width while height held, making it oblong. Lock it square. ============================================================ */ header a[href="index.html"].flex img{ flex-shrink:0 !important; aspect-ratio:1 / 1 !important; object-fit:contain !important; min-width:0 !important; } /* ============================================================ CARD ACTION LINKS (2026-07-06): reslinks that live INSIDE a service-card become navy-outline buttons so they clearly read as tappable — matching the homepage "Learn More" treatment. Scoped to cards only; inline/prose/email reslinks are untouched. ============================================================ */ .service-card a.reslink:not([href^="mailto:"]){ display:inline-block; margin-top:.85rem; border:2px solid var(--navy); color:var(--navy) !important; background:transparent; font-family:'Source Sans 3',sans-serif; font-weight:800; font-size:.75rem; letter-spacing:.04em; text-transform:uppercase; padding:.45rem 1rem; border-radius:8px; text-decoration:none; transition:background .15s ease,color .15s ease; } .service-card a.reslink:not([href^="mailto:"]):hover, .service-card a.reslink:not([href^="mailto:"]):focus-visible, .service-card:hover a.reslink:not([href^="mailto:"]){ background:var(--navy); color:#fff !important; } @media (max-width:640px){ .service-card a.reslink:not([href^="mailto:"]){ display:block; text-align:center; margin-top:.9rem; } } /* standalone navy-outline buttons (e.g., "Read Our Mission" in Who We Are) fill on their own hover */ a.card-learn:hover, a.card-learn:focus-visible{ background:var(--navy); color:#fff !important; } /* ============================================================ HYPERLINK VISIBILITY (2026-07-07): text links in page content render blue + underlined so they clearly read as clickable. Scoped to
so the header, nav, footer, buttons, and whole-card (.card-b / .service-card) links are untouched. ============================================================ */ main a{ color:#0B57A6; text-decoration:underline; text-underline-offset:2px; } main a:hover{ color:#08417a; } main .reslink{ color:#0B57A6; text-decoration:underline; } main a.card-b{ text-decoration:none; } /* outlined "->" action links become blue boxes (match the link color) */ main .service-card a.reslink:not([href^="mailto:"]), main a.card-learn{ border-color:#0B57A6 !important; color:#0B57A6 !important; text-decoration:none; } main .service-card a.reslink:not([href^="mailto:"]):hover, main .service-card a.reslink:not([href^="mailto:"]):focus-visible, main .service-card:hover a.reslink:not([href^="mailto:"]), main a.card-learn:hover, main a.card-learn:focus-visible{ background:#0B57A6 !important; color:#fff !important; } /* ============================================================ DEVICE-AWARE PHONE LINKS (2026-07-30) Applied by nav.js on desktops and laptops only. On phones and tablets none of these rules match, because the class is never added and the tel: link is left untouched. Purpose: stop the "how do you want to open this?" app-picker that was confusing Veterans into thinking an app was required. ============================================================ */ a.tel-static{ cursor: copy; position: relative; white-space: nowrap; } a.tel-static:hover, a.tel-static:focus-visible{ text-decoration-style: dotted; } a.tel-static:focus-visible{ outline: 3px solid var(--gold); outline-offset: 2px; } .tel-toast{ position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(12px); background: var(--navy, #1B3A6B); color: #fff; font-size: .95rem; font-weight: 700; line-height: 1.2; padding: .7rem 1.15rem; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.28); max-width: calc(100vw - 32px); text-align: center; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 9999; } .tel-toast.show{ opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } @media (prefers-reduced-motion: reduce){ .tel-toast{ transition: opacity .01s linear, visibility .01s; transform: translateX(-50%); } .tel-toast.show{ transform: translateX(-50%); } } @media print{ a.tel-static{ cursor: auto; } .tel-toast{ display: none; } } /* ============================================================ WCAG 2.1 AA CONTRAST REMEDIATION (2026-07-30) ADA Title II requires WCAG 2.1 AA for macvac.org by 26 April 2028 (DOJ interim final rule, 17 Apr 2026). --muted2 darkened #6E7689 -> #676F82: was 4.10:1 on cream, below the 4.5:1 threshold for normal text (SC 1.4.3). Gold is retained as a BACKGROUND with navy text (6.22:1). GOLD AS TEXT IS BACKGROUND-DEPENDENT and this is the trap: on light backgrounds use --gold-text #7C5F14 (5.99:1); on the navy footer that same colour is 2.71:1 and FAILS. Footers use --gold #C9A84C (7.12:1) or --gold-light (11.36:1). Footer link opacity was also blending #DCD9D0 down to #82868c (4.44:1, just under threshold); forced to full opacity below. ============================================================ */ /* Footer sits on --navy-dark #122039. Force legible values there. */ footer a, footer a:visited{ color:#E7D7A6 !important; opacity:1 !important; } footer a:hover, footer a:focus-visible{ color:#FFFFFF !important; } footer, footer p, footer span, footer li, footer div{ opacity:1 !important; } footer [style*="--foot"], footer [style*="var(--foot)"]{ color:#DCD9D0 !important; opacity:1 !important; } footer [style*="--gold-text"], footer .reslink{ color:#C9A84C !important; opacity:1 !important; } /* Small white-on-goldenrod badges: darken the plate to clear 4.5:1 */ /* Goldenrod plate: keep the brand colour, darken the TEXT instead of the plate, because the card also carries dark-on-gold children that a darker plate broke. */ [style*="rgb(184, 134, 11)"], [style*="#b8860b"], [style*="#B8860B"]{ color:#122039 !important; } [style*="rgb(184, 134, 11)"] *, [style*="#b8860b"] *, [style*="#B8860B"] *{ color:#122039 !important; } [style*="rgb(224, 122, 47)"]{ background:#BF590E !important; } /* Gold outline buttons sitting on navy panels: --gold-text is 2.37:1 there. Light gold clears 9.93:1 and keeps the outlined-gold look. */ /* NOT FIXED IN CSS — .btn-outline-gold appears on BOTH light and navy panels and the class alone cannot distinguish them. Three instances (contact.html and the "Call" buttons on community/eras) render --gold-text #7C5F14 on navy at 2.37:1. Fix per instance in the HTML: add style="color:#E7D7A6;border-color:#E7D7A6" to the ones on navy. Do NOT attempt a blanket CSS override — it regresses the light-panel instances. Verified 2026-07-30. */ /* ============================================================ NAV SPACING (2026-08-07): the top-level menu items sat 2px apart with 16px between the wordmark and "Home", which read as crammed once the header seal was enlarged. Scoped to >=1024px so the mobile dropdown (which sets gap:0 and stacks vertically) is untouched. ============================================================ */ @media (min-width: 1024px){ header .container-x[style*="min-height"]{ gap: 2.5rem !important; } .mainnav .navmenu{ gap: .55rem !important; } .mainnav .navmenu > li > a, .mainnav .navmenu .navtop{ padding: .55rem .75rem !important; font-size: .95rem !important; } } /* ============================================================ NAV FIT (2026-08-07): the menu items were being compressed below their content width - "Home" rendered in a 30px box with 24px of padding - so the text overflowed and collided with the next item. Extra gap could not fix that; the header simply needed ~1430px to lay out and had 1280px. Three parts: (1) stop the items shrinking, (2) let the container use a wide monitor, (3) ease the lockup on mid-width screens where the container cannot grow. Scoped >=1024px; mobile untouched. ============================================================ */ @media (min-width: 1024px){ .mainnav .navmenu > li{ flex: 0 0 auto !important; } .mainnav .navmenu > li > a, .mainnav .navmenu .navtop{ white-space: nowrap !important; } } @media (min-width: 1400px){ .container-x{ max-width: 1480px !important; } } @media (min-width: 1024px) and (max-width: 1399px){ header a[href="index.html"].flex img{ width: 118px !important; height: 118px !important; } header a[href="index.html"].flex > span > span:first-child{ font-size: 1.5rem !important; } header a[href="index.html"].flex > span > span:last-child{ font-size: .86rem !important; } header .container-x[style*="min-height"]{ min-height: 150px !important; } } /* ============================================================ NAV OVERLAP FIX (2026-08-07): .mainnav was flex:0 1 auto, so it shrank to 482px while its