/* MASPIK page frame - header, footer, and the document surface itself.
   Loaded on every page. Depends on tokens.css. */

/* ---------- document surface ----------
   The cream background and the body font used to come from Elementor's global
   kit stylesheet. With Elementor deactivated that stylesheet is gone and the
   page falls back to white with a system font, so the theme states both. */
html{background:var(--mspk-cream);}
body{
  background:var(--mspk-cream);
  color:var(--mspk-ink);
  font-family:var(--mspk-bd);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body h1,body h2,body h3,body h4,body h5,body h6{
  font-family:var(--mspk-hd);
  color:var(--mspk-ink);
}


.mspk-skip{
  position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--mspk-green);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;font-weight:700;
}
.mspk-skip:focus{left:0;}

/* ---------- header ---------- */
.mspk-header{
  position:sticky;top:0;z-index:900;
  background:var(--mspk-green);
  font-family:var(--mspk-bd);
}
.mspk-header__inner{
  max-width:1560px;margin:0 auto;padding:14px 28px;
  display:flex;align-items:center;gap:28px;
}
.mspk-logo{display:flex;align-items:center;flex:0 0 auto;}
.mspk-logo img{display:block;height:36px;width:auto;}
.mspk-logo__text{color:#fff;font-family:var(--mspk-hd);font-size:24px;}

.mspk-nav{display:flex;align-items:center;gap:28px;margin-left:auto;}
.mspk-nav__list{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;}
.mspk-nav__list a{
  color:rgba(255,255,255,.88);font-size:15px;font-weight:500;text-decoration:none;
  padding:6px 0;border-bottom:2px solid transparent;transition:color .16s ease,border-color .16s ease;
}
.mspk-nav__list a:hover{color:#fff;border-bottom-color:var(--mspk-orange);}
.mspk-nav__list a[aria-current="page"]{color:#fff;border-bottom-color:var(--mspk-orange);}

.mspk-nav__actions{display:flex;align-items:center;gap:16px;}
.mspk-nav__account{
  display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.88);
  font-size:15px;font-weight:500;text-decoration:none;transition:color .16s ease;
}
.mspk-nav__account:hover{color:#fff;}
.mspk-btn--sm{padding:11px 22px;font-size:15px;border-radius:11px;}

.mspk-burger{
  display:none;margin-left:auto;flex-direction:column;gap:5px;
  background:none;border:0;padding:8px;cursor:pointer;
}
.mspk-burger span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:transform .2s ease,opacity .2s ease;}
.mspk-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.mspk-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.mspk-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- footer ---------- */
.mspk-footer{
  background:var(--mspk-green);color:rgba(255,255,255,.8);
  font-family:var(--mspk-bd);margin-top:clamp(64px,9vw,120px);
}
.mspk-footer__inner{
  max-width:1560px;margin:0 auto;padding:clamp(44px,5vw,72px) 28px clamp(32px,4vw,52px);
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;
}
.mspk-footer__brand img{display:block;height:38px;width:auto;}
.mspk-footer__brand p{margin-top:18px;font-size:14.5px;line-height:1.65;max-width:42ch;}
.mspk-footer__wa{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  background:rgba(255,255,255,.1);color:#fff;padding:10px 18px;border-radius:999px;
  font-size:14px;font-weight:600;text-decoration:none;transition:background .18s ease;
}
.mspk-footer__wa:hover{background:rgba(255,255,255,.18);}

/* Headings on the dark footer must be set explicitly - inherited colour loses
   to any theme rule that targets h2/h3 directly. */
.mspk-footer__h{
  color:var(--mspk-orange);font-family:var(--mspk-hd);font-size:15px;
  letter-spacing:.08em;text-transform:uppercase;margin:0 0 16px;
}
.mspk-footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.mspk-footer__col a{color:rgba(255,255,255,.8);font-size:14.5px;text-decoration:none;transition:color .16s ease;}
.mspk-footer__col a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;}

.mspk-footer__bar{
  border-top:1px solid rgba(255,255,255,.14);
  max-width:1560px;margin:0 auto;padding:22px 28px;
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  font-size:13px;color:rgba(255,255,255,.6);
}
.mspk-footer__bar a{color:rgba(255,255,255,.75);text-decoration:none;}
.mspk-footer__bar a:hover{color:#fff;text-decoration:underline;}
.mspk-footer__bar p{margin:0;}

@media (max-width:1080px){
  .mspk-footer__inner{grid-template-columns:1fr 1fr;gap:34px;}
}
@media (max-width:900px){
  .mspk-burger{display:flex;}
  .mspk-nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--mspk-green);padding:8px 20px 24px;
    border-top:1px solid rgba(255,255,255,.12);
  }
  .mspk-nav.is-open{display:flex;}
  .mspk-nav__list{flex-direction:column;align-items:stretch;gap:0;}
  .mspk-nav__list a{display:block;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);}
  .mspk-nav__list a:hover,.mspk-nav__list a[aria-current="page"]{border-bottom-color:rgba(255,255,255,.1);}
  .mspk-nav__actions{flex-direction:column;align-items:stretch;gap:12px;margin-top:18px;}
  .mspk-nav__account{justify-content:center;}
  .mspk-header__inner{position:relative;padding:12px 18px;}
}
@media (max-width:620px){
  .mspk-footer__inner{grid-template-columns:1fr;gap:30px;padding-left:18px;padding-right:18px;}
  .mspk-footer__bar{padding-left:18px;padding-right:18px;flex-direction:column;}
}

/* ---------- button styles, unscoped ----------
   home.css defines these under #mspk, which does not cover the header or
   footer. Defining them here too means .mspk-btn works anywhere on the site. */
.mspk-btn{
  display:inline-block;padding:16px 30px;border-radius:13px;font-weight:700;font-size:16px;
  text-decoration:none;line-height:1.2;border:2px solid transparent;
  transition:background .18s ease,transform .12s ease,border-color .18s ease;
}
/* The element-qualified selectors are there to out-specify the Elementor kit's
   `a { color }` rule; button.* is needed too, or form submit buttons render
   unstyled. */
a.mspk-btn--primary,
button.mspk-btn--primary,
#mspk .mspk-btn--primary,
.mspk-header .mspk-btn--primary,
.mspk-footer .mspk-btn--primary{background:var(--mspk-orange);color:#fff;}
a.mspk-btn--primary:hover,
button.mspk-btn--primary:hover,
#mspk .mspk-btn--primary:hover,
.mspk-header .mspk-btn--primary:hover{background:var(--mspk-orange-dk);color:#fff;transform:translateY(-2px);}
a.mspk-btn--ghost,
button.mspk-btn--ghost,
#mspk .mspk-btn--ghost{background:transparent;color:var(--mspk-green);border-color:#CFDCD3;}
.mspk-btn--sm{padding:11px 22px;font-size:15px;border-radius:11px;}

/* ---------- link colours ----------
   The Elementor kit sets `a { color: #2D2D2D }` at (0,1,1). Single-class rules
   tie or lose against it depending on stylesheet order, so every link on our
   dark chrome states its colour at (0,2,x) to win outright. */
.mspk-header .mspk-nav__list a,
.mspk-header a.mspk-nav__account{color:rgba(255,255,255,.88);}
.mspk-header .mspk-nav__list a:hover,
.mspk-header .mspk-nav__list a[aria-current="page"],
.mspk-header a.mspk-nav__account:hover{color:#fff;}
.mspk-header a.mspk-logo,
.mspk-header .mspk-logo__text{color:#fff;}

.mspk-footer .mspk-footer__col a{color:rgba(255,255,255,.8);}
.mspk-footer .mspk-footer__col a:hover{color:#fff;}
.mspk-footer a.mspk-footer__wa{color:#fff;}
.mspk-footer .mspk-footer__bar a{color:rgba(255,255,255,.75);}
.mspk-footer .mspk-footer__bar a:hover{color:#fff;}
.mspk-footer .mspk-footer__h{color:var(--mspk-orange);}
.mspk-footer .mspk-footer__brand p,
.mspk-footer .mspk-footer__bar p{color:rgba(255,255,255,.72);}