/* Gut Pathways: ways into the IBS quiz (1.7.41). Header button, home line, landing box, pop-up, end-of-article line. */

/* the button: the orange of the quiz start button, ink text */
.gp-quizbtn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:40px;padding:.5em 1.15em;border-radius:999px;background:var(--signal);color:#12403F;font:650 .9375rem/1.2 var(--font-sans);text-decoration:none;white-space:nowrap;transition:transform .15s ease,box-shadow .15s ease}
.gp .gp-quizbtn, .gp .gp-quizbtn:visited{color:#12403F;text-decoration:none}
.gp-quizbtn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgb(232 136 63 / .35)}
.gp-quizbtn:focus-visible{outline:2px solid var(--paper);outline-offset:2px;box-shadow:0 0 0 4px #12403F}
.gp-quizbtn--lg{min-height:52px;padding:.8em 1.6em;font-size:1.0625rem}

/* header: right of the menu, and next to the burger on phones */
.hx-quiz{flex:none;margin-left:auto}
.hx-head .gp-nav + .hx-social{margin-left:0}
.np-quiz{display:none}
@media (max-width:48rem){
.hx-head{column-gap:10px}
.hx-quiz{min-height:36px;padding:.4em .9em;font-size:.8125rem}
.gp .hx .nav-panel a.np-quiz{display:flex;justify-content:center;margin:0 0 6px;background:var(--signal);color:#12403F;font-weight:650}
}
@media (max-width:22rem){
.hx-quiz{padding:.4em .7em;font-size:.75rem}
}

/* home: line and button under the ten patterns */
.bx-quiz{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px;margin:28px auto 0;max-width:46rem;text-align:center}
.bx-quiz p{margin:0;font:400 1.0625rem/1.5 var(--font-sans);color:inherit}

/* box on the two landings */
.gpqx-box{max-width:42rem;margin:40px auto;padding:28px 24px;border-radius:20px;background:#12403F;color:#F9F5EC;text-align:center}
.gpqx-beads{display:block;width:min(236px,70%);height:auto;margin:0 auto 14px;color:#F9F5EC}
.gp .gpqx-box .gpqx-box__t, .gpqx-box__t{margin:0 0 10px;color:#F9F5EC;font:600 clamp(1.35rem,4vw,1.75rem)/1.25 var(--font-serif)}
.gpqx-box__p{margin:0 auto 18px;max-width:34rem;color:rgb(249 245 236 / .86);font:400 1.0625rem/1.55 var(--font-sans)}
.gpqx-box__n{margin:12px 0 0;color:rgb(249 245 236 / .7);font:400 .875rem/1.4 var(--font-sans)}
.bd .gpqx-box{margin-top:0}

/* end of articles and case studies */
.gpqx-end{margin-top:40px;margin-bottom:8px}
.gpqx-end p{margin:0;padding:18px 20px;border-radius:16px;border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);background:color-mix(in srgb,var(--signal) 10%,var(--paper));font:400 1.0625rem/1.55 var(--font-sans);color:var(--ink)}
.gp .gpqx-end a{font-weight:650;color:var(--accent);white-space:nowrap}

/* pop-up: centered window on a computer, a card from the bottom on a phone */
.gpqp{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px}
.gpqp__scrim{position:absolute;inset:0;background:rgb(18 64 63 / .45)}
.gpqp__card{position:relative;width:min(440px,100%);padding:28px 24px 20px;border-radius:20px;background:#F9F5EC;color:#12403F;text-align:center;box-shadow:0 20px 60px rgb(0 0 0 / .25);animation:gpqp-in .3s ease both}
.gpqp .gpqx-beads{color:#12403F}
.gpqp__t{margin:0 0 8px;font:600 1.375rem/1.25 var(--font-serif);color:#12403F}
.gpqp__p{margin:0 0 18px;font:400 1rem/1.5 var(--font-sans);color:#46605D}
.gpqp__x{position:absolute;top:8px;right:8px;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:#46605D;font-size:1.6rem;line-height:1;cursor:pointer}
.gpqp__x:hover{background:rgb(18 64 63 / .08)}
.gpqp__no{display:block;margin:12px auto 0;padding:8px;border:0;background:none;color:#46605D;font:500 .9rem var(--font-sans);text-decoration:underline;cursor:pointer}
.gpqp--sheet{align-items:flex-end;padding:0}
.gpqp--sheet .gpqp__scrim{background:rgb(18 64 63 / .25)}
.gpqp--sheet .gpqp__card{width:100%;max-height:40vh;max-height:40svh;overflow:auto;padding:18px 18px 14px;border-radius:20px 20px 0 0;animation-name:gpqp-up}
.gpqp--sheet .gpqx-beads{width:150px;margin-bottom:8px}
.gpqp--sheet .gpqp__t{font-size:1.15rem}
.gpqp--sheet .gpqp__p{margin-bottom:12px;font-size:.9375rem}
@keyframes gpqp-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes gpqp-up{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
.gpqp__card{animation:none}
.gp-quizbtn{transition:none}
.gp-quizbtn:hover{transform:none}
}
.gpqx-wrap{padding-block:8px 40px}
/* very narrow phones (up to 360 px): a slightly smaller logo makes room for the quiz button */
@media (max-width:22.5rem){
.hx-brand{gap:8px}
.hx-brand > svg{width:40px;height:auto}
.hx-brand .wm{font-size:1.1rem}
}
/* inside an article (.mcs-blog) the article link and paragraph styles must not reach the box */
.gp .mcs-blog .gpqx-box, .mcs-blog .gpqx-box{max-width:42rem;margin:40px auto;text-align:center}
.mcs-blog .gpqx-box p.gpqx-box__p, .mcs-blog .gpqx-box p.gpqx-box__n{text-align:center;margin-left:auto;margin-right:auto}
.mcs-blog .gpqx-box p.gpqx-box__p{margin-bottom:18px;color:rgb(249 245 236 / .86);font:400 1.0625rem/1.55 var(--font-sans)}
.mcs-blog .gpqx-box p.gpqx-box__n{margin-top:12px;color:rgb(249 245 236 / .7);font:400 .875rem/1.4 var(--font-sans)}
.gp .mcs-blog a.gp-quizbtn, .mcs-blog a.gp-quizbtn{display:inline-flex;background:var(--signal);color:#12403F;font:650 1.0625rem/1.2 var(--font-sans);text-decoration:none;border:0}
.gp .mcs-blog a.gp-quizbtn:hover{color:#12403F}
/* home: room under the button before the next band */
.bx-quiz{padding-bottom:56px}
body.gp .mcs-blog .gpqx-box a.gp-quizbtn{display:inline-flex;align-items:center;min-height:52px;padding:.8em 1.6em;border-radius:999px;background:var(--signal);color:#12403F;font:650 1.0625rem/1.2 var(--font-sans);text-decoration:none;box-shadow:none;border:0}
/* the article skin sets every link with !important, so the button answers in kind */
body.gp .mcs-blog .gpqx-box a.gp-quizbtn, body.gp .mcs-blog .gpqx-box a.gp-quizbtn:hover{color:#12403F!important;background:var(--signal)!important;font:650 1.0625rem/1.2 var(--font-sans)!important;text-decoration:none!important}

/* 1.7.49: on phones the header keeps logo, quiz button and burger on one line, nothing pushed off screen.
   The social icons stay in the menu panel. */
.hx-head .burger{flex:none}
@media (max-width:36rem){.hx-head .hx-social{display:none}}
@media (max-width:26rem){.hx-brand{gap:10px}.hx-brand svg{width:52px;height:auto}.hx-brand .wm{font-size:1.15rem}.hx-quiz{padding:.4em .75em;font-size:.78rem}}
@media (max-width:22.5rem){.hx-head{column-gap:8px;padding-inline:16px}.hx-brand svg{width:46px}.hx-brand .wm{font-size:1.05rem}.hx-quiz{padding:.4em .6em;font-size:.72rem}}