/* =====================================================================
   MAKEE × POROMAGIA  ·  v1.6.2
   ---------------------------------------------------------------------
   Kaikki säännöt on rajattu .mxp-luokan alle. Ainoa poikkeus on etusivun
   pysäkkihaun ankkurin scroll-margin (kiinteä ylätunniste), joka koskee
   vain makee-stops-lisäosan #makee-alue-haku-osiota.

   Värit ja fontit: sivuston nykyiset. Fontit tulevat teemasta (Kadence
   globaalit muuttujat / makee-stops-lisäosan muuttujat) – tämä tiedosto ei
   lataa yhtään uutta fonttia.
   ===================================================================== */

.mxp{
  /* Makeen värit (getmakee.com, tarkistettu 18.10.2026). Kaikki Makeen tekstit
     ovat Makee-sinisiä; punainen vain pienissä korostuksissa. */
  --mxp-blue:   #1a26ba;   /* Makee-sininen: kaikki teksti, otsikot, logo, painike */
  --mxp-pink:   #f5b6dc;   /* Strawberry: pinnat */
  --mxp-red:    #ee3932;   /* Lollipop: vain pienet korostukset */
  --mxp-tint:   #e4d6df;   /* Marshmallow (brändiohjeisto) */
  --mxp-soft:   #f5b6dc;   /* Strawberry: reunat */
  --mxp-ink:    #1a26ba;   /* leipäteksti = Makee-sininen */
  --mxp-muted:  #1a26ba;   /* pienteksti = Makee-sininen */
  --mxp-white:  #fff;

  /* Otsikot: sivuston Antique Olive (ei uutta latausta – fontti tulee teemasta).
     Nimet kattavat yleisimmät tavat, joilla fontti on rekisteröity (Adobe Fonts:
     "antique-olive", itse ladattu: "Antique Olive" / "Antique Olive Std").
     Jos mikään niistä ei löydy, käytetään teeman otsikkofonttia. */
  --mxp-display: "antique-olive", "Antique Olive", "Antique Olive Std", "AntiqueOlive", var(--global-heading-font-family, sans-serif);
  /* Leipäteksti: sivuston Inter. */
  --mxp-body:    var(--global-body-font-family, "Inter", sans-serif);

  --mxp-r-xl: 28px;
  --mxp-r-lg: 20px;
  --mxp-gap:  clamp(16px, 2.6vw, 28px);

  font-family: var(--mxp-body);
  color: var(--mxp-ink);
  box-sizing: border-box;
}

.mxp *,
.mxp *::before,
.mxp *::after{ box-sizing: inherit; }

/* Brändiohjeisto: otsikot Antique Olive medium (Adobe Fonts). Selain ei piirrä
   keinotekoista lihavointia, jos sivustolla ei ole juuri tätä leikkausta. */
.mxp-h1, .mxp-h2, .mxp-kortti-h, .mxp-eyebrow, .mxp-sticker span, .mxp-x,
.mxp-duo-x, .mxp-kortti-keraily-h, .mxp-lockup-inner{
  font-weight: 500 !important;
  font-synthesis: none;
}

/* Kiinteä ylätunniste: ankkurihypyt eivät jää ylätunnisteen alle. */
#makee-alue-haku,
.mxp [id]{
  scroll-margin-top: var(--mxp-header-offset, 110px);
}

/* ----------------------------------------------------------- yhteiset */

.mxp p{ margin: 0 0 .8em; line-height: 1.55; }
.mxp p:last-child{ margin-bottom: 0; }

.mxp-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin-top: 20px;
}

.mxp-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  font-family: var(--mxp-body);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform .15s ease, background-color .15s ease;
  max-width: 100%;
}

.mxp-btn-primary{
  background: var(--mxp-blue);
  color: var(--mxp-white);
}
.mxp-btn-primary:hover{ background: #121b8f; color: var(--mxp-white); transform: translateY(-1px); }

.mxp-btn-light{
  background: var(--mxp-white);
  color: var(--mxp-blue);
}
.mxp-btn-light:hover{ background: var(--mxp-tint); color: var(--mxp-blue); transform: translateY(-1px); }

.mxp-btn-missing{
  background: transparent;
  color: var(--mxp-muted);
  border: 2px dashed var(--mxp-muted);
  cursor: not-allowed;
}

.mxp-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--mxp-blue);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.mxp-link:hover{ color: var(--mxp-blue); text-decoration-color: var(--mxp-red); }

.mxp a:focus-visible,
.mxp-btn:focus-visible{
  outline: 3px solid var(--mxp-blue);
  outline-offset: 3px;
  border-radius: 999px;
}

.mxp-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px !important;
  font-family: var(--mxp-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--mxp-blue);
  letter-spacing: .01em;
}
.mxp-eyebrow::before{
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--mxp-red);
  flex: none;
}

.mxp-x{ color: var(--mxp-red); font-weight: 800; padding: 0 .18em; }

.mxp .screen-reader-text{
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce){
  .mxp-btn, .mxp-kortti-keraily{ transition: none; }
  .mxp-btn:hover, .mxp-kortti-keraily:hover{ transform: none; }
}


/* =====================================================================
   ETUSIVU A — nostolinkki (matala, ei kuvaa, ei popupia)
   ===================================================================== */

.mxp-nosto-wrap{ margin: 14px 0 0; }

.mxp-nosto{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
  min-height: 48px;
  padding: 10px 18px;
  background: var(--mxp-white);
  border: 2px solid var(--mxp-pink);
  border-radius: 16px;
  color: var(--mxp-blue);
  text-decoration: none;
  transition: background-color .15s ease;
}
.mxp-nosto:hover{ background: var(--mxp-tint); color: var(--mxp-blue); }
.mxp-nosto:focus-visible{ outline: 3px solid var(--mxp-blue); outline-offset: 3px; border-radius: 16px; }

.mxp-nosto-msg{
  font-weight: 800;
  font-size: .98rem;
  line-height: 1.35;
}

.mxp-tag{
  display: inline-block;
  margin-right: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--mxp-blue);
  color: var(--mxp-white);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  vertical-align: 1px;
  position: relative;
}
.mxp-tag::after{               /* pieni punainen korostus */
  content: "";
  position: absolute;
  top: -3px; right: -3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--mxp-red);
  border: 2px solid var(--mxp-white);
}

.mxp-nosto-link{
  font-weight: 800;
  font-size: .92rem;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  white-space: nowrap;
}


/* =====================================================================
   ETUSIVU B — yhteistyökortti (v1.6.2)
   Valkoinen kortti kuten makee-stops-pysäkkikortit, sama leveys kuin
   pysäkkilista (--makee-max). Mobiili: yksi palsta. Leveä palsta: teksti
   vasemmalla, oikealla pinkki paneeli, jossa Poromagian logo ja keräyslaatikko.
   ===================================================================== */

.mxp-kortti{
  container: mxpk / inline-size;
  width: 100%;
  max-width: var(--makee-max, 1180px);
  margin: 28px auto 0;
  padding: 20px 18px;
  background: var(--mxp-white);
  border: 2px solid #ffd6ea;
  border-radius: var(--mxp-r-xl);
  box-shadow: 0 14px 34px -20px rgba(23, 27, 110, .45);
}

/* Mobiili: kääreet "katoavat", jotta keräyslaatikko on tekstin ja painikkeiden välissä. */
.mxp-kortti-in{ display: flex; flex-direction: column; }
.mxp-kortti-text, .mxp-kortti-side{ display: contents; }
.mxp-kortti-top{ order: 1; }
.mxp-kortti-h{ order: 2; }
.mxp-kortti-p{ order: 3; }
.mxp-kortti-keraily{ order: 4; }
.mxp-kortti .mxp-actions{ order: 5; }
.mxp-kortti-logo{ display: none; order: 6; line-height: 0; }

.mxp-kortti-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.mxp-kortti .mxp-eyebrow{
  margin: 0 !important;
  font-size: 1.1rem;
  line-height: 1.15;
}
.mxp-kortti .mxp-eyebrow::before{ width: 11px; height: 11px; }

.mxp-kortti-mark{ display: block; height: 46px; width: auto; flex: none; }
.mxp-kortti-logo-img{ display: block; width: clamp(150px, 26cqi, 200px); height: auto; }

.mxp-kortti-h{
  margin: 0 0 8px;
  font-family: var(--mxp-display);
  font-size: clamp(1.7rem, 7cqi, 2.6rem);
  line-height: 1.08;
  color: var(--mxp-blue);
  overflow-wrap: normal;
  word-break: normal;
}

.mxp-kortti-p{
  max-width: 46ch;
  margin: 0 !important;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--mxp-ink);
}

.mxp-kortti .mxp-actions{ margin-top: 16px; }

.mxp-kortti-keraily{
  display: grid;
  gap: 2px;
  margin-top: 14px;
  padding: 12px 16px 12px 18px;
  background: var(--mxp-white);
  border: 2px solid var(--mxp-pink);
  border-left: 5px solid var(--mxp-red);
  border-radius: 14px;
  color: var(--mxp-ink);
  text-decoration: none;
  transition: transform .15s ease;
}
.mxp-kortti-keraily:hover{ transform: translateY(-1px); color: var(--mxp-ink); }
.mxp-kortti-keraily:focus-visible{ outline: 3px solid var(--mxp-blue); outline-offset: 3px; }
.mxp-kortti-keraily-h{
  font-family: var(--mxp-display);
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--mxp-blue);
}
.mxp-kortti-keraily-p{ font-size: .94rem; line-height: 1.45; }
.mxp-kortti-keraily-more{
  margin-top: 2px;
  font-size: .9rem;
  font-weight: 800;
  color: var(--mxp-blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}


/* =====================================================================
   ALASIVU /poromagia/
   ===================================================================== */

.mxp-page{
  container: mxp / inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--mxp-gap);
  padding-bottom: 8px;
}
/* v1.6.2: osiot samaan palstaleveyteen kuin etusivun pysäkkilista myös
   täysleveällä sivupohjalla (rajaus osioihin, ei teeman ohjaamaan kääreeseen). */
.mxp-page > *{
  width: 100%;
  max-width: var(--makee-max, 1180px);
  margin-inline: auto;
}

.mxp-h1{
  margin: 0 0 16px;
  font-family: var(--mxp-display);
  font-size: clamp(2.1rem, 8cqi, 4.4rem);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--mxp-blue);
  overflow-wrap: normal;
  hyphens: manual;
}

.mxp-h2{
  margin: 0 0 14px;
  font-family: var(--mxp-display);
  font-size: clamp(1.6rem, 5cqi, 2.6rem);
  line-height: 1.08;
  color: var(--mxp-blue);
}

.mxp-small{
  font-size: .88rem;
  font-weight: 700;
  color: var(--mxp-muted);
}

/* -------------------------------------------------------------- A. avaus */

.mxp-hero{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 22px 18px 18px;
  background: var(--mxp-pink);
  border-radius: var(--mxp-r-xl);
  overflow: hidden;
}
.mxp-hero.is-text-only{ grid-template-columns: minmax(0, 1fr) !important; }
.mxp-hero.is-text-only .mxp-hero-text{ max-width: 760px; }

.mxp-lockup{ margin: 0 0 16px !important; }

.mxp-lockup-inner{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 0;
  padding: 10px 20px;
  background: var(--mxp-white);
  border-radius: 999px;
  font-family: var(--mxp-display);
  font-size: 1rem;
  font-weight: 800;
  color: var(--mxp-blue);
}
.mxp-lockup-inner .mxp-x{ font-size: 1.3rem; padding: 0 .4em; }
/* v1.6.2: tunnuksen logot luettavan kokoisiksi (mittasuhteet säilyvät: width auto) */
.mxp-logo{ display: block; height: 30px; width: auto; max-width: none; }
.mxp-logo.mxp-logo-poro{ height: 26px; }

.mxp-lead{
  max-width: 40ch;
  font-size: clamp(1.05rem, 2.2vw, 1.22rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--mxp-ink);
}

.mxp-hero-cards{
  max-width: 44ch;
  margin: 16px 0 0 !important;
  padding: 12px 16px;
  background: var(--mxp-white);
  border-left: 5px solid var(--mxp-red);
  border-radius: 14px;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--mxp-blue);
}
.mxp-hero-cards strong{ display: block; margin-bottom: 2px; }
.mxp-hero-cards a{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  font-weight: 800;
  color: var(--mxp-blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.mxp-hero-cards a:hover{ text-decoration-color: var(--mxp-red); }

.mxp-hero-media{ min-width: 0; }
.mxp-truck{
  display: block;
  width: 100%;
  height: auto;
  max-width: 560px;
  margin-inline: auto;
  filter: drop-shadow(0 18px 24px rgba(26, 38, 186, .18));
}

/* -------------------------------------------- B + C + D: sisältölohkot */

.mxp-block{
  padding: clamp(22px, 4vw, 40px);
  border-radius: var(--mxp-r-xl);
}

.mxp-boosters{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px var(--mxp-gap);
  background: var(--mxp-white);
  border: 2px solid var(--mxp-soft);
}
.mxp-boosters .mxp-h2{ max-width: 16ch; }
.mxp-boosters-body{ max-width: 62ch; }

/* "Tule tsekkaamaan autoon!!" – kutsu autolle valikoiman sijaan */
.mxp-sticker{ margin: 18px 0 14px !important; }
.mxp-sticker span{
  display: inline-block;
  padding: 12px 22px 13px;
  background: var(--mxp-pink);
  border-radius: 18px;
  box-shadow: 5px 5px 0 var(--mxp-red);
  transform: rotate(-2deg);
  font-family: var(--mxp-display);
  font-size: clamp(1.35rem, 4.4vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--mxp-blue);
}

.mxp-partners{
  background: var(--mxp-tint);
  text-align: center;
}
.mxp-partners .mxp-h2{ margin-inline: auto; max-width: 22ch; }
.mxp-partners-p{
  max-width: 58ch;
  margin-inline: auto !important;
  font-size: 1.05rem;
}

.mxp-duo{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px clamp(14px, 3vw, 32px);
  margin-top: 18px;
}
.mxp-duo-img{ display: block; width: auto; }
.mxp-duo-makee .mxp-duo-img{ height: clamp(60px, 11vw, 100px); }
.mxp-duo-poro .mxp-duo-img{ height: clamp(84px, 15vw, 140px); }
.mxp-duo-x{
  font-family: var(--mxp-display);
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  color: var(--mxp-red);
}

.mxp-receive{
  /* v1.6.2: valkoinen kortti, ettei osio sulaudu pinkkiin sivupohjaan */
  background: var(--mxp-white);
  border: 2px solid var(--mxp-soft);
}
.mxp-receive-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--mxp-gap);
}
.mxp-receive-text > p{ max-width: 60ch; }
.mxp-receive .mxp-h2{ max-width: 18ch; font-size: clamp(1.8rem, 5vw, 3rem); }
.mxp-receive .mxp-clarify{ background: #fff2f8; }
.mxp-receive-media{ display: none; }
.mxp-receive-mark{ display: block; width: clamp(150px, 17vw, 220px); height: auto; }
.mxp-pending{
  margin-top: 18px !important;
  padding: 14px 18px;
  background: var(--mxp-white);
  border: 2px dashed var(--mxp-blue);
  border-radius: 14px;
  color: var(--mxp-ink);
}
.mxp-pending strong{ display: block; color: var(--mxp-blue); }
.mxp-clarify{
  padding: 12px 16px;
  border-left: 4px solid var(--mxp-red);
  background: var(--mxp-tint);
  border-radius: 0 12px 12px 0;
  font-weight: 700;
}

.mxp-receive.is-preview{
  outline: 3px dashed var(--mxp-red);
  outline-offset: -3px;
}
.mxp-preview-note{
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #fff4d6;
  color: #4a3500;
  font-size: .9rem;
  line-height: 1.4;
}

/* -------------------------------------------------- E. toimintakehotus */

.mxp-cta{
  padding: clamp(24px, 4vw, 40px);
  background: var(--mxp-blue);
  border-radius: var(--mxp-r-xl);
  color: var(--mxp-white);
  text-align: center;
}
.mxp-cta .mxp-h2{ color: var(--mxp-white); }
.mxp-cta-logo{ display: block; height: clamp(46px, 8vw, 70px); width: auto; margin: 0 auto 16px; }
.mxp-cta p{ max-width: 46ch; margin-inline: auto !important; font-size: 1.05rem; }
.mxp-cta .mxp-actions{ justify-content: center; }
.mxp-cta .mxp-btn:focus-visible{ outline-color: var(--mxp-white); }

/* ------------------------------------------------------------ desktop */

/* =====================================================================
   ASETTELU PALSTAN LEVEYDEN MUKAAN (container queries)
   Perusasettelu yllä on yksipalstainen (mobiili). Leveämpi asettelu otetaan
   käyttöön vasta, kun lisäosan OMA palsta on tarpeeksi leveä – toimii myös
   kapealla sisältöleveydellä työpöydällä. Vanha selain = yksipalstainen.
   ===================================================================== */

@container mxp (min-width: 760px){
  .mxp-hero{
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: var(--mxp-gap);
    padding: clamp(28px, 4cqi, 44px);
  }
  .mxp-logo{ height: 38px; }
  .mxp-logo.mxp-logo-poro{ height: 33px; }
  .mxp-lockup-inner{ padding: 11px 22px; }
  .mxp-lockup-inner .mxp-x{ font-size: 1.5rem; }
  .mxp-truck{ max-width: 560px; }
  .mxp-boosters{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .mxp-boosters .mxp-h2{ margin: 0; font-size: clamp(2rem, 4.2cqi, 3rem); }
  .mxp-boosters-body{ padding-top: 6px; font-size: 1.08rem; }
  .mxp-receive-grid{ grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 4cqi, 48px); }
  .mxp-receive-media{ display: block; order: -1; }
  .mxp-receive .mxp-eyebrow{ font-size: 1.4rem; }
  .mxp-receive .mxp-eyebrow::before{ width: 13px; height: 13px; }
}

@container mxp (max-width: 599px){
  .mxp-lockup{ margin-bottom: 12px !important; }
  .mxp-lockup-inner{ padding: 9px 16px; }
  .mxp-h1{ margin-bottom: 12px; }
  .mxp-lead{ font-size: 1.02rem; line-height: 1.45; }
  .mxp-hero-cards{ margin-top: 12px !important; padding: 10px 14px; font-size: .95rem; }
  .mxp-btn{ min-height: 52px; font-size: 1.02rem; }
  .mxp-truck{ max-width: 300px; }
  .mxp-actions{ flex-direction: column; align-items: stretch; gap: 6px; }
  .mxp-actions .mxp-btn{ width: 100%; }
  .mxp-actions .mxp-link{ justify-content: center; }
  .mxp-sticker span{ font-size: 1.3rem; padding: 10px 16px 11px; box-shadow: 4px 4px 0 var(--mxp-red); max-width: calc(100% - 8px); }
  .mxp-duo{ flex-wrap: nowrap; gap: 10px; }
  .mxp-duo-makee .mxp-duo-img{ height: 48px; max-width: 34cqi; object-fit: contain; }
  .mxp-duo-poro .mxp-duo-img{ height: 72px; }
  .mxp-duo-x{ font-size: 1.6rem; }
}

@container mxpk (min-width: 640px){
  .mxp-kortti-in{
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(260px, .88fr);
    align-items: stretch;
    gap: clamp(20px, 4cqi, 40px);
  }
  .mxp-kortti-text{ display: block; align-self: center; }
  .mxp-kortti-side{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px;
    background: var(--mxp-pink);
    border-radius: var(--mxp-r-lg);
  }
  .mxp-kortti-mark{ display: none; }
  .mxp-kortti-logo{ display: block; order: 0; }
  .mxp-kortti-logo-img{ width: clamp(130px, 17cqi, 165px); }
  .mxp-kortti-keraily{ order: 1; width: 100%; margin-top: 0; border-color: var(--mxp-white); border-left-color: var(--mxp-red); }
  .mxp-kortti-top{ margin-bottom: 10px; }
}

@container mxpk (min-width: 900px){
  .mxp-kortti .mxp-eyebrow{ font-size: 1.5rem; }
  .mxp-kortti .mxp-eyebrow::before{ width: 13px; height: 13px; }
}

@container mxpk (max-width: 559px){
  .mxp-kortti .mxp-actions{ flex-direction: column; align-items: stretch; gap: 6px; }
  .mxp-kortti .mxp-btn{ width: 100%; min-height: 52px; }
  .mxp-kortti .mxp-link{ justify-content: center; }
}

@media (min-width: 768px){
  .mxp-kortti{ padding: 26px 28px; }
}

@media (max-width: 767px){
  .mxp-nosto{ padding: 10px 14px; }
  .mxp-nosto-link{ white-space: normal; }
}