/* ═══════════════════════════════════════════════════════════════
   MOUNTSMY — Shared Header + Footer Component Styles
   Single source of truth. Loaded by every page via:
     <link rel="stylesheet" href="/assets/site-components.css"/>
   Markup is injected by /assets/site-components.js
   Colours pull from each page's CSS vars (--accent, --bg, etc.)
   with safe fallbacks, so per-page accent theming still works.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --ms-D:'Bricolage Grotesque',sans-serif;
  --ms-B:'DM Sans',sans-serif;
  --ms-M:'JetBrains Mono',monospace;
}

/* ─── NAV ─── */
.ms-nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:1.25rem 2rem;display:flex;align-items:center;justify-content:space-between;transition:all .35s var(--ease,cubic-bezier(.22,1,.36,1));border-bottom:1px solid transparent;}
.ms-nav.scrolled{background:var(--nav-bg,rgba(6,9,20,.85));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-color:var(--border-soft,#141c30);padding:.85rem 2rem;}
.ms-logo{font-family:var(--D,var(--ms-D));font-weight:700;font-size:1.35rem;letter-spacing:-.02em;display:flex;align-items:center;gap:.55rem;color:var(--text,#f0f4fa);}
.ms-logo-mark{width:auto;height:32px;display:flex;align-items:center;}
.ms-logo-mark img{height:100%;width:auto;object-fit:contain;}
.ms-links{display:flex;gap:2rem;list-style:none;font-size:.9rem;font-weight:500;margin:0;padding:0;}
.ms-links>li{position:relative;}
.ms-links a{position:relative;padding:.25rem 0;transition:color .2s;display:inline-flex;align-items:center;gap:.3rem;color:var(--text,#f0f4fa);text-decoration:none;}
.ms-links a::after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:1px;background:var(--accent,#3B7FE0);transition:width .3s var(--ease,cubic-bezier(.22,1,.36,1));}
.ms-links a:hover::after,.ms-links a.active::after{width:100%;}
.ms-links a.active{color:var(--accent,#3B7FE0);}
.ms-chev{width:11px;height:11px;transition:transform .3s var(--ease,cubic-bezier(.22,1,.36,1));}
.ms-has-dd{position:relative;}
.ms-has-dd:hover .ms-chev,.ms-has-dd:focus-within .ms-chev{transform:rotate(180deg);}
.ms-dd{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-8px);min-width:320px;background:var(--surface,#0f1829);border:1px solid var(--border,#1e2a44);border-radius:14px;padding:.5rem;opacity:0;visibility:hidden;pointer-events:none;box-shadow:var(--shadow,0 24px 64px -16px rgba(0,0,0,.8));transition:opacity .25s var(--ease,cubic-bezier(.22,1,.36,1)),transform .25s var(--ease,cubic-bezier(.22,1,.36,1)),visibility .25s;z-index:300;}
.ms-has-dd:hover .ms-dd,.ms-has-dd:focus-within .ms-dd{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.ms-has-dd::before{content:"";position:absolute;top:100%;left:0;right:0;height:14px;}
.ms-dd-ey{font-family:var(--M,var(--ms-M));font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted,#5a6378);padding:.6rem .75rem .3rem;}
.ms-dd-item{display:flex;align-items:center;gap:.85rem;padding:.7rem .75rem;border-radius:9px;transition:background .2s;text-decoration:none;color:inherit;}
.ms-dd-item::after{display:none!important;}
.ms-dd-item:hover{background:var(--bg-2,#0b1222);}
.ms-dd-icon{width:36px;height:36px;border-radius:9px;background:var(--bg-2,#0b1222);color:var(--accent,#3B7FE0);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s,color .2s;}
.ms-dd-item:hover .ms-dd-icon{background:var(--accent,#3B7FE0);color:#fff;}
.ms-dd-icon svg{width:18px;height:18px;}
.ms-dd-name{font-family:var(--D,var(--ms-D));font-weight:600;font-size:.95rem;color:var(--text,#f0f4fa);display:flex;align-items:center;gap:.5rem;}
.ms-dd-pill{font-family:var(--M,var(--ms-M));font-size:.57rem;text-transform:uppercase;letter-spacing:.08em;padding:.12rem .4rem;border-radius:4px;background:rgba(74,222,128,.12);color:var(--ok,#4ade80);border:1px solid rgba(74,222,128,.25);}
.ms-dd-desc{font-size:.78rem;color:var(--text-dim,#8b96b0);margin-top:.12rem;}
.ms-dd-foot{padding:.6rem .75rem .25rem;display:flex;align-items:center;justify-content:space-between;border-top:1px dashed var(--border,#1e2a44);margin-top:.5rem;font-family:var(--M,var(--ms-M));font-size:.63rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted,#5a6378);}
.ms-dd-foot a{color:var(--accent,#3B7FE0);text-decoration:none;}

/* Services mega menu (2-col) */
.ms-mega{min-width:600px!important;left:50%;transform:translateX(-50%) translateY(-6px);padding:1.25rem;}
.ms-has-dd:hover .ms-mega,.ms-has-dd:focus-within .ms-mega{transform:translateX(-50%) translateY(0);}
.ms-mega-head{font-family:var(--M,var(--ms-M));font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted,#5a6378);margin-bottom:.85rem;padding:0 .25rem;}
.ms-mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;}
.ms-mega-item{display:flex;align-items:center;gap:.7rem;padding:.65rem .75rem;border-radius:10px;transition:background .2s;text-decoration:none;color:inherit;}
.ms-mega-item:hover{background:var(--bg-2,#0b1222);}
.ms-mega-item::after{display:none!important;}
.ms-mega-ico{width:34px;height:34px;border-radius:8px;background:var(--bg-2,#0b1222);color:var(--accent,#3B7FE0);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s,color .2s;}
.ms-mega-item:hover .ms-mega-ico{background:var(--accent,#3B7FE0);color:#fff;}
.ms-mega-ico svg{width:16px;height:16px;}
.ms-mega-name{font-weight:600;font-size:.9rem;color:var(--text,#f0f4fa);display:block;line-height:1.2;}
.ms-mega-desc{font-size:.75rem;color:var(--text-dim,#8b96b0);margin-top:.1rem;display:block;}
.ms-mega-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px dashed var(--border,#1e2a44);margin-top:.85rem;padding-top:.65rem;font-family:var(--M,var(--ms-M));font-size:.63rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted,#5a6378);}
.ms-mega-foot a{color:var(--accent,#3B7FE0);text-decoration:none;}

/* Right cluster */
.ms-nav-r{display:flex;align-items:center;gap:.6rem;}
.ms-tt{width:38px;height:38px;border:1px solid var(--border,#1e2a44);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:all .4s var(--ease,cubic-bezier(.22,1,.36,1));position:relative;overflow:hidden;cursor:pointer;background:none;color:var(--text,#f0f4fa);}
.ms-tt:hover{border-color:var(--accent,#3B7FE0);color:var(--accent,#3B7FE0);transform:rotate(25deg);}
.ms-tt svg{width:16px;height:16px;position:absolute;transition:opacity .3s,transform .4s var(--ease,cubic-bezier(.22,1,.36,1));}
.ms-tt .ms-sun{opacity:0;transform:scale(.6) rotate(-90deg);}
.ms-tt .ms-moon{opacity:1;}
[data-theme="light"] .ms-tt .ms-sun{opacity:1;transform:scale(1) rotate(0);}
[data-theme="light"] .ms-tt .ms-moon{opacity:0;transform:scale(.6) rotate(90deg);}
.ms-nav-cta{padding:.6rem 1.1rem;border:1px solid var(--border,#1e2a44);border-radius:999px;font-size:.85rem;font-weight:500;transition:all .3s var(--ease,cubic-bezier(.22,1,.36,1));display:inline-flex;align-items:center;gap:.4rem;color:var(--text,#f0f4fa);text-decoration:none;}
.ms-nav-cta:hover{background:var(--accent,#3B7FE0);color:#fff;border-color:var(--accent,#3B7FE0);}
.ms-nav-cta svg{width:12px;height:12px;transition:transform .3s;}
.ms-nav-cta:hover svg{transform:rotate(-45deg);}
.ms-mtoggle{display:none;width:40px;height:40px;border:1.5px solid rgba(255,255,255,.25);border-radius:10px;align-items:center;justify-content:center;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;}
.ms-mtoggle svg{width:20px;height:20px;stroke-width:2.5;}

/* ─── FOOTER ─── */
.ms-footer{background:var(--bg,#060914);border-top:1px solid var(--border-soft,#141c30);position:relative;overflow:hidden;}
.ms-footer::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(59,127,224,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(59,127,224,.03) 1px,transparent 1px);background-size:60px 60px;pointer-events:none;}
.ms-footer-inner{max-width:1400px;margin:0 auto;padding:1rem 2rem 0;position:relative;z-index:1;}
.ms-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1.15fr;gap:2.5rem 3rem;padding:1.5rem 0;border-bottom:1px solid var(--border-soft,#141c30);}
.ms-footer-col h4{font-size:.62rem;text-transform:uppercase;letter-spacing:.16em;color:var(--accent,#3B7FE0);margin-bottom:1.25rem;display:flex;align-items:center;gap:.5rem;}
.ms-footer-col h4::after{content:"";flex:1;height:1px;background:var(--border-soft,#141c30);}
.ms-footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.6rem;margin:0;padding:0;}
/* Services column: 10 links laid out as 5 + 5 (two columns) on desktop */
.ms-footer-col-services ul{display:grid;grid-auto-flow:column;grid-template-rows:repeat(5,auto);column-gap:1.75rem;row-gap:.6rem;}
.ms-footer-col a{color:var(--text-dim,#8b96b0);font-size:.9rem;transition:color .2s,padding-left .2s;display:block;text-decoration:none;}
.ms-footer-col a:hover{color:var(--accent,#3B7FE0);padding-left:6px;}
.ms-footer-contact-item{display:flex;align-items:center;gap:.7rem;color:var(--text-dim,#8b96b0);font-size:.9rem;text-decoration:none;transition:color .2s;}
.ms-footer-contact-item:hover{color:var(--accent,#3B7FE0);}
.ms-footer-contact-ico{width:30px;height:30px;border-radius:7px;border:1px solid var(--border-soft,#141c30);background:var(--surface,#0f1829);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .2s,background .2s;}
.ms-footer-contact-item:hover .ms-footer-contact-ico{border-color:var(--accent,#3B7FE0);background:rgba(59,127,224,.1);color:var(--accent,#3B7FE0);}
.ms-footer-contact-ico svg{width:13px;height:13px;}
.ms-footer-contact-ico.ms-ico-wa{color:#4ade80;}
.ms-footer-location{display:flex;align-items:center;gap:.7rem;color:var(--text-muted,#5a6378);font-size:.82rem;padding:.65rem .9rem;background:var(--surface,#0f1829);border:1px solid var(--border-soft,#141c30);border-radius:8px;}
.ms-loc-ping{width:8px;height:8px;border-radius:50%;background:var(--accent,#3B7FE0);box-shadow:0 0 8px var(--accent,#3B7FE0);animation:msPing 2.5s ease-in-out infinite;flex-shrink:0;}
@keyframes msPing{0%,100%{opacity:1;}50%{opacity:.5;}}
.ms-footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:1.75rem 0 2rem;font-size:.68rem;color:var(--text-muted,#5a6378);flex-wrap:wrap;gap:1rem;}
.ms-footer-bottom-links{display:flex;gap:1.5rem;}
.ms-footer-bottom-links a{color:var(--text-muted,#5a6378);transition:color .2s;text-decoration:none;}
.ms-footer-bottom-links a:hover{color:var(--accent,#3B7FE0);}
.ms-footer-bottom-socials{display:flex;gap:.5rem;}
.ms-footer-bottom-socials a{width:34px;height:34px;border:1px solid var(--border,#1e2a44);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--text-muted,#5a6378);transition:all .25s;text-decoration:none;}
.ms-footer-bottom-socials a:hover{border-color:var(--accent,#3B7FE0);color:var(--accent,#3B7FE0);background:rgba(59,127,224,.06);}
.ms-footer-bottom-socials svg{width:14px;height:14px;}

/* ─── LIGHT MODE NAV ─── */
[data-theme="light"] .ms-tt{border-color:transparent;}
[data-theme="light"] .ms-nav-cta{border-color:transparent;}
[data-theme="light"] .ms-nav{background:transparent!important;border-bottom-color:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
[data-theme="light"] .ms-nav.scrolled{background:var(--nav-bg,rgba(255,255,255,.92))!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;box-shadow:0 1px 24px rgba(10,22,40,.08)!important;border-bottom-color:transparent!important;}
[data-theme="light"] .ms-mtoggle{color:#0a1628!important;border-color:rgba(10,22,40,.2)!important;background:rgba(10,22,40,.05)!important;}

/* ─── RESPONSIVE ─── */
@media(max-width:900px){.ms-footer-grid{grid-template-columns:1fr 1fr;}.ms-footer-col-services ul{grid-auto-flow:row;grid-template-rows:none;}}
@media(max-width:768px){
  .ms-mtoggle{display:inline-flex;}
  .ms-nav-cta{display:none;}
  .ms-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--surface,#0f1829);border-bottom:1px solid var(--border,#1e2a44);padding:1rem;gap:.5rem;overflow-y:auto;max-height:calc(100vh - 64px);}
  .ms-links.open{display:flex;}
  .ms-links>li{width:100%;}
  .ms-links a{padding:.75rem 1rem;border-radius:8px;}
  .ms-links a:hover{background:var(--bg-2,#0b1222);}
  .ms-has-dd .ms-dd{position:static!important;transform:none!important;opacity:1!important;visibility:visible!important;pointer-events:auto;box-shadow:none;display:none;margin-top:.5rem;background:var(--bg-2,#0b1222);min-width:unset!important;width:100%;border-radius:12px;padding:.75rem;}
  .ms-has-dd.open .ms-dd{display:block!important;}
  .ms-mega{min-width:unset!important;position:static;transform:none!important;}
  .ms-mega-grid{grid-template-columns:1fr;}
  [data-theme="light"] .ms-links.open{background:#fff!important;box-shadow:0 8px 32px rgba(10,22,40,.14)!important;border-bottom:1px solid var(--border,#e1e7f0)!important;}
}
@media(max-width:560px){.ms-footer-grid{grid-template-columns:1fr;}}
@media(max-width:640px){.ms-nav{padding:1rem;}}