/* securemyoffer.com header + footer for the static pages on this site: the buyer quote page (/surety) and the broker
   training page (/training). The app pages build the same chrome in /app/core.js and style it in /app/app.css.
   Everything is scoped to .sc-* so it never touches the quote widget (.dgx) or the training page styles.
   Colours, radii and fonts are the securemyoffer.com site kit (Nov 2026). No JavaScript: the phone-size menu is a
   <details> element. Link lists must match SITE_NAV / SITE_FOOTER in /app/core.js (test/pages-other.test.mjs). */

.sc-header,.sc-footer,.sc-skip{
  --sc-gold:#CCA565; --sc-bronze:#7D6649; --sc-charcoal:#242424; --sc-ink:#0A080B; --sc-cream:#F0EAE1; --sc-beige:#E1D6C2;
  --sc-radius:15px; --sc-font:"Inter",sans-serif; --sc-eyebrow:"Syne","Inter",sans-serif;
  font-family:var(--sc-font); box-sizing:border-box;
}
.sc-header *,.sc-footer *{box-sizing:border-box}
.sc-header :focus-visible,.sc-footer :focus-visible,.sc-skip:focus-visible{outline:2px solid var(--sc-bronze);outline-offset:2px;box-shadow:0 0 0 3px rgba(204,165,101,.45)}
.sc-footer :focus-visible{outline-color:var(--sc-gold)}

.sc-skip{position:absolute;left:16px;top:-80px;z-index:100;background:var(--sc-charcoal);color:#fff;padding:12px 18px;border-radius:10px;font-weight:800;text-decoration:none}
.sc-skip:focus{top:12px;color:#fff}

/* ---- header ---- */
.sc-header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--sc-beige);color:var(--sc-charcoal);font-size:16px;line-height:1.5}
.sc-inner{position:relative;max-width:1140px;margin:0 auto;display:flex;align-items:center;gap:24px;min-height:74px;padding:12px 24px}
.sc-logo{display:flex;align-items:center;flex:none;border-radius:var(--sc-radius)}
.sc-logo img{display:block;height:26px;width:auto}
.sc-nav{display:flex;align-items:center;gap:4px;margin:0 auto}
.sc-nav a,.sc-menu summary{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--sc-radius);font-weight:600;color:var(--sc-charcoal);text-decoration:none;white-space:nowrap}
.sc-nav a:hover,.sc-menu summary:hover,.sc-menu[open] summary{background:var(--sc-cream);color:var(--sc-charcoal)}
.sc-right{display:flex;align-items:center;gap:12px;margin-left:auto;min-width:0}
.sc-phone{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;font-weight:800;color:var(--sc-charcoal);text-decoration:none;white-space:nowrap}
.sc-phone:hover{color:var(--sc-bronze)}
.sc-phone svg{flex:none}
.sc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.sc-menu{display:none}
.sc-menu summary{list-style:none;cursor:pointer;border:1px solid var(--sc-beige)}
.sc-menu summary::-webkit-details-marker{display:none}
.sc-menu-panel{position:absolute;left:0;right:0;top:100%;z-index:61;background:#fff;border-bottom:1px solid var(--sc-beige);box-shadow:0 2px 10px rgba(11,24,24,.07);padding:8px 16px 16px}
.sc-menu-panel a{display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--sc-beige);font-size:17px;color:var(--sc-charcoal);text-decoration:none}
.sc-menu-panel a:last-child{border-bottom:0}
@media(max-width:1023px){.sc-nav{display:none}.sc-menu{display:block}}
@media(max-width:639px){.sc-inner{gap:12px;min-height:64px;padding:8px 16px}.sc-logo img{height:24px}}
@media(max-width:479px){.sc-phone{min-width:44px}.sc-phone .sc-num{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}}

/* ---- footer ---- */
.sc-footer{background:var(--sc-ink);color:var(--sc-beige);font-size:16px;line-height:1.6}
.sc-footer a{color:var(--sc-beige)}
.sc-footer a:hover{color:#fff}
.sc-foot-top{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px;padding:56px 24px 40px}
.sc-foot-brand img{display:block;height:28px;width:auto}
.sc-foot-brand p{margin:16px 0 0;max-width:330px}
.sc-foot-contact{display:grid;gap:4px}
.sc-foot-contact .sc-num{font-size:20px;font-weight:800;color:#fff;text-decoration:none}
.sc-footer h2{margin:0 0 12px;font-family:var(--sc-eyebrow);font-size:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sc-gold)}
.sc-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sc-footer ul a{display:inline-block;padding:2px 0;text-decoration:none}
.sc-footer ul a:hover{text-decoration:underline;text-underline-offset:3px}
.sc-foot-legal{max-width:1140px;margin:0 auto;padding:24px 24px 40px;border-top:1px solid rgba(225,214,194,.2);font-size:14px;line-height:1.7}
.sc-foot-legal p{margin:0 0 8px;max-width:1100px}
.sc-foot-legal a{text-decoration:underline;text-decoration-color:var(--sc-bronze)}
.sc-foot-bottom{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
@media(max-width:1023px){.sc-foot-top{grid-template-columns:repeat(3,minmax(0,1fr))}.sc-foot-brand{grid-column:1/-1}}
@media(max-width:639px){.sc-foot-top{grid-template-columns:minmax(0,1fr);gap:28px;padding:40px 16px 28px}.sc-foot-legal{padding:24px 16px 32px}}