/*
Theme Name: MyQuotie Coming Soon
Theme URI: https://www.myquotie.nl
Author: Joyo Media
Author URI: https://www.joyomedia.com
Description: Tijdelijke coming soon-pagina in de huisstijl van MyQuotie. Toont op elk adres dezelfde pagina, zodat de site nog niet zichtbaar is. Pas de instellingen bovenin functions.php aan.
Version: 1.5.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: myquotie-coming-soon
*/

html, body { margin: 0; padding: 0; }

.mq-cs{
  /* Merkkleuren uit de brand guidelines */
  --mq-navy:#131f38;
  --mq-blue:#4d90f4;
  --mq-graphite:#6e7180;
  --mq-space:#9da2b3;
  --mq-pad:clamp(28px,7vw,110px);

  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-sizing:border-box;
  color:var(--mq-navy);
  font-family:"Poppins",Arial,sans-serif;
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  isolation:isolate;

  /* Lichte verloop-achtergrond: blauw linksboven, warm wit in het midden, blauw rechtsonder */
  background:
    radial-gradient(75% 70% at 0% 0%, rgba(77,144,244,.42) 0%, rgba(77,144,244,0) 58%),
    radial-gradient(48% 52% at 88% 78%, rgba(77,144,244,.30) 0%, rgba(77,144,244,0) 70%),
    radial-gradient(50% 45% at 22% 62%, rgba(255,252,244,.95) 0%, rgba(255,252,244,0) 70%),
    linear-gradient(135deg,#e9f0fd 0%,#fbfaf7 46%,#e8eefb 100%);
}
.mq-cs *,.mq-cs *::before,.mq-cs *::after{box-sizing:border-box}

/* Het beeldmerk in de rechteronderhoek, tegen de randen aan */
.mq-cs__mark{
  position:absolute;
  right:0;
  bottom:0;
  width:min(34vw,420px);
  height:auto;
  z-index:0;
  opacity:.22;
  pointer-events:none;
}

/* Heel fijne korrel voor papiergevoel */
.mq-cs__grain{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.16;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

/* Header met het logo */
.mq-cs__header{
  position:relative;
  z-index:2;
  flex:0 0 auto;
  padding:clamp(20px,3.2vw,36px) var(--mq-pad);
  background:transparent;
}
.mq-cs__logo{
  display:block;
  width:clamp(190px,22vw,290px);
  height:auto;
}

/* Middenblok, verticaal gecentreerd */
.mq-cs__main{
  position:relative;
  z-index:2;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  padding:clamp(28px,5vw,64px) var(--mq-pad);
}
.mq-cs__inner{width:100%;max-width:760px}

.mq-cs__title{
  margin:0;
  font-size:clamp(2.7rem,8.5vw,5.6rem);
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.035em;
  color:var(--mq-navy);
}
.mq-cs__title span{color:var(--mq-blue)}

.mq-cs__tagline{
  margin:22px 0 0;
  font-size:clamp(1.05rem,2.3vw,1.5rem);
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--mq-navy);
}

.mq-cs__text{
  margin:20px 0 0;
  max-width:52ch;
  font-size:clamp(1rem,1.5vw,1.125rem);
  color:var(--mq-graphite);
}

.mq-cs__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin:clamp(30px,4vw,44px) 0 0;
}
.mq-cs__btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:14px 24px;
  border-radius:999px;
  font-size:15px;
  font-weight:500;
  text-decoration:none;
  transition:transform .25s cubic-bezier(.2,.7,.3,1),background-color .25s,border-color .25s,box-shadow .25s;
}
.mq-cs__btn--primary{
  background:var(--mq-blue);
  color:#fff;
  box-shadow:0 16px 30px -16px rgba(77,144,244,.85);
}
.mq-cs__btn--primary:hover{transform:translateY(-2px);background:#3f83ee}
.mq-cs__btn:focus-visible{outline:2px solid var(--mq-navy);outline-offset:3px}
.mq-cs__arrow{transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.mq-cs__btn:hover .mq-cs__arrow{transform:translateX(4px)}

.mq-cs__socials{display:flex;align-items:center;gap:10px}
.mq-cs__social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid rgba(19,31,56,.14);
  background:rgba(255,255,255,.7);
  color:var(--mq-navy);
  transition:transform .25s cubic-bezier(.2,.7,.3,1),background-color .25s,border-color .25s,color .25s;
}
.mq-cs__social svg{width:19px;height:19px;display:block}
.mq-cs__social:hover{transform:translateY(-2px);background:var(--mq-navy);border-color:var(--mq-navy);color:#fff}
.mq-cs__social:focus-visible{outline:2px solid var(--mq-navy);outline-offset:3px}

/* Voettekst */
.mq-cs__foot{
  position:relative;
  z-index:2;
  flex:0 0 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 18px;
  padding:clamp(16px,2.4vw,30px) var(--mq-pad);
  font-size:13px;
  color:var(--mq-space);
}
.mq-cs__foot a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(19,31,56,.18)}
.mq-cs__foot a:hover{color:var(--mq-navy)}

/* Rustige, gespreide opkomst */
.mq-cs__reveal{opacity:0;transform:translateY(18px);animation:mq-rise .9s cubic-bezier(.2,.7,.3,1) forwards}
.mq-cs__reveal:nth-child(1){animation-delay:.05s}
.mq-cs__reveal:nth-child(2){animation-delay:.18s}
.mq-cs__reveal:nth-child(3){animation-delay:.30s}
.mq-cs__reveal:nth-child(4){animation-delay:.42s}
.mq-cs__header .mq-cs__reveal{animation-delay:0s}

@keyframes mq-rise{to{opacity:1;transform:translateY(0)}}

@media (max-width:820px){
  /* Telefoon: alles past op één scherm, geen scrollbalk, tekst verticaal in het midden. */
  .mq-cs{
    --mq-pad:clamp(24px,6vw,40px);
    height:100svh;
    min-height:100svh;
    overflow:hidden;
  }
  .mq-cs__header{padding:16px var(--mq-pad)}
  .mq-cs__logo{width:min(52vw,210px)}
  .mq-cs__main{padding:clamp(20px,5vw,34px) var(--mq-pad)}
  .mq-cs__title{font-size:clamp(2.35rem,11.6vw,3.6rem);letter-spacing:-.04em}
  .mq-cs__tagline{margin-top:16px;font-size:1.02rem}
  .mq-cs__text{margin-top:14px;font-size:.97rem}
  .mq-cs__actions{margin-top:26px;gap:12px}
  .mq-cs__btn{padding:13px 20px}
  .mq-cs__social{width:42px;height:42px}
  .mq-cs__foot{
    flex-wrap:nowrap;
    gap:8px;
    padding:14px var(--mq-pad);
    font-size:11px;
    white-space:nowrap;
  }
  .mq-cs__foot span:last-child{overflow:hidden;text-overflow:ellipsis}
  .mq-cs__mark{width:min(46vw,220px);opacity:.16}
}

@media (prefers-reduced-motion:reduce){
  .mq-cs__reveal{animation:none;opacity:1;transform:none}
  .mq-cs__btn,.mq-cs__arrow{transition:none}
}