/*
Theme Name: PopQuest
Description: Centered logo + right hamburger + slide-in panel.
Version: 4.6.35
Text Domain: popquest
*/

/* PopQuest homepage wrapper (keeps plugin hub aligned with theme width) */
.pq-themeHome {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

.pq-themeHome__below {
  margin-top: 24px;
}

:root{
  --pq-white:#ffffff;
  --pq-black:#0f172a;
  --pq-panel:#ffffff;
  --pq-border: rgba(15,23,42,0.12);
  --pq-overlay: rgba(15,23,42,0.45);
  --pq-muted: #64748b;
  --pq-soft: #f8fafc;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  font-family:"Archivo Black", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--pq-black);
  background: var(--pq-white);
}

a{ color: inherit; }

/* HEADER */
.pq-header{
  position: sticky;
  top:0;
  z-index: 999;
  background: var(--pq-white);
  border-bottom: 1px solid var(--pq-border);
}

.pq-header__inner{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding: 12px 16px;
  display:grid;
  grid-template-columns: 1fr auto 1fr; /* keeps logo centered */
  align-items:center;
}

.pq-logo{
  grid-column:2;
  justify-self:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  line-height:1;
}

.pq-logo img{
  height:40px;
  width:auto;
  display:block;
}

/* BURGER */
.pq-burger{
  grid-column:3;
  justify-self:end;

  width:46px;
  height:42px;
  border: 1px solid var(--pq-border);
  background: var(--pq-white);
  border-radius: 12px;
  padding:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.pq-burger:focus{
  outline: 2px solid rgba(15,23,42,0.35);
  outline-offset: 2px;
}

.pq-burger__icon{
  display:inline-flex;
  flex-direction:column;
  gap:5px;
}

.pq-burger__icon span{
  display:block;
  width:18px;
  height:2px;
  background: var(--pq-black);
  border-radius:2px;
}

/* OVERLAY */
.pq-menu-overlay{
  position:fixed;
  inset:0;
  background: var(--pq-overlay);
  opacity:0;
  pointer-events:none;
  transition: opacity 180ms ease;
  z-index: 998;
}
.pq-menu-overlay.is-open{
  opacity:1;
  pointer-events:auto;
}

/* SLIDE-IN PANEL */
.pq-menu-panel{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width: min(380px, 92vw);
  background: var(--pq-panel);
  color: var(--pq-black);
  border-left: 1px solid var(--pq-border);
  box-shadow: -12px 0 30px rgba(0,0,0,0.12);
  transform: translateX(102%);
  transition: transform 220ms ease;
  z-index: 999;
  padding: 14px 14px 22px 14px;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
}
.pq-menu-panel.is-open{ transform: translateX(0); }

.pq-menu-panel__top{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin-bottom: 8px;
}

.pq-menu-close{
  border: 1px solid var(--pq-border);
  background: var(--pq-white);
  border-radius: 10px;
  height: 38px;
  width: 42px;
  cursor:pointer;
  font-family:inherit;
  font-size:16px;
}

/* NAV */
.pq-nav ul{ list-style:none; padding:0; margin: 8px 0 14px 0; }
.pq-nav li{ margin:0; }

.pq-nav a{
  display:block;
  padding: 14px 10px;
  text-decoration:none;
  font-size: 18px;
  border-radius: 12px;
}

.pq-nav a:hover{
  background: var(--pq-soft);
}

.pq-nav a.is-active{
  text-decoration: underline;
}

/* Panel extra */
.pq-panel-extra{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--pq-border);
}

.pq-panel-extra__title{
  margin: 0 0 10px 0;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pq-muted);
}

/* Stats / cards */
.pq-stats{ display:grid; gap:10px; }

.pq-stat{
  border: 1px solid var(--pq-border);
  border-radius: 14px;
  padding: 12px 12px;
  background: var(--pq-soft);
}

.pq-stat__label{
  font-size: 12px;
  color: var(--pq-muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing:.08em;
}

.pq-stat__value{
  font-size: 16px;
  font-weight: 900;
  color: var(--pq-black);
  margin-top: 6px;
}

/* NOTE (logged out only) */
.pq-stat--hint{
  opacity: .95;
}
.pq-stat--hint .pq-stat__value{
  font-size: 14px;
  font-weight: 700;
  color: #475569;
}

/* Tabs */
.pq-tabs{
  display:flex;
  gap:8px;
  margin: 0 0 12px 0;
}

.pq-tab{
  border:1px solid var(--pq-border);
  background: var(--pq-white);
  color: var(--pq-black);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-family:inherit;
  font-size:13px;
  line-height:1;
}

.pq-tab[aria-selected="true"]{
  border-color: rgba(15,23,42,0.55);
}

/* Leaderboard list */
.pq-lb{ margin:0; padding:0; list-style:none; }
.pq-lb li{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding: 10px 10px;
  border: 1px solid var(--pq-border);
  border-radius: 12px;
  background: var(--pq-soft);
  font-size:14px;
  margin-bottom: 8px;
}
.pq-lb__name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width: 70%;
}
.pq-lb__pts{ flex:0 0 auto; }

/* PAGE LAYOUT */
.pq-container{
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 16px;
}

.pq-footer{
  padding:24px 16px;
  border-top: 1px solid var(--pq-border);
  text-align:center;
  font-size:14px;
}

/* Welcome/date line helper (for the quiz header area) */
.pq-welcome-date{
  margin: 6px 0 0 0;
  font-family: "Archivo Black", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.35;
  color: var(--pq-black);
}

/* Responsive */
@media (max-width: 560px){
  .pq-header__inner{
    grid-template-columns: auto 1fr auto;
  }
  .pq-logo img{ height: 32px; }
  .pq-themeHome{ padding:10px; }
}



/* Full-bleed container for PopQuest templates */
.pq-fullbleed{
  margin:0;
  padding:0;
  max-width:none;
  width:100%;
  box-sizing:border-box;
}

/* Don't break full-bleed pages */
body.pq-fullbleed .pq-container,
body.page-template-template-fullbleed .pq-container,
body.page-template-template-fullbleed-php .pq-container,
body.page-template-fullbleed .pq-container,
body.page-template-full-bleed .pq-container{
  max-width:none !important;
  width:100% !important;
  padding:0 !important;
}
/* ==========================================
   MOBILE GAP BELOW HEADER (full-bleed pages)
   Ensure content doesn't touch the header on mobile.
   Does NOT affect bell/notification styling.
   ========================================== */
@media (max-width: 768px){
  body.pq-fullbleed .pq-container,
  body.pq-fullbleed .pq-container#content,
  body.pq-fullbleed main.pq-container{
    padding-top: 16px !important;
  }
}


/* Ensure no theme rules constrain the news card on mobile */
body.single-popquest_news_card .pq-card-single{
  max-width: none !important;
}

/* PopQuest skin layer enqueued to apply colours + typography without changing layout/behaviour. */


/* Fix: prevent unexpected whitespace below footer */
html, body{height:auto;}
body{margin:0;}
.mfb-footer{margin-bottom:0;}

/* =========================================================
   POPQUEST — CONTAINER STABILITY + STOP FULL-WIDTH HERO
   Ensures the site doesn't "flash resize" and keeps CSE hero
   constrained to the normal content width.
   ========================================================= */

.pq-container{
  width:100% !important;
  max-width:900px !important;
  margin:0 auto !important;
  padding:18px 18px 36px !important;
  box-sizing:border-box !important;
}
@media (max-width: 960px){
  .pq-container{ padding-left:16px !important; padding-right:16px !important; }
}

/* CSE entity pages: prevent any 100vw/negative-margin hero */
body.single-cse_entity .cse-entity-header,
body.single-cse_entity .pqehd-trade-under-hero,
body.single-cse_entity .cse-entity-main{
  width:auto !important;
  margin-left:0 !important;
  margin-right:0 !important;
  max-width:none !important;
}

body.single-cse_entity .cse-entity-inner{
  width:100% !important;
  max-width:900px !important;
  margin:0 auto !important;
  padding-left:18px !important;
  padding-right:18px !important;
  box-sizing:border-box !important;
}
@media (max-width: 960px){
  body.single-cse_entity .cse-entity-inner{ padding-left:16px !important; padding-right:16px !important; }
}

/* =========================================
   PopQuest Theme Hotfixes (v4.5.3)
   - Remove black borders around content area
   - Fix occasional white-on-white text in article/feed blocks
   ========================================= */

/* Kill dividers that read as “black borders” */
.pq-sidebar{ border-right: none !important; }
.pq-app, .pq-app-content, .pq-container{ box-shadow:none !important; outline:none !important; }

/* Remove borders/frames from common content cards */
.pqn-article,
.pqn-article-top,
.pqn-article-media-wrap,
.pqn-article-media,
.pqn-media,
.pqn-bybox,
.pqn-tipbox,
.pqn-cse-top10__card,
.pqn-latest-news__item{
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Guarantee readable text colour inside content area */
.pq-container,
.pqn-article-root,
.pqn-article,
.pqn-article-content,
.pqn-bybox,
.pqn-tipbox,
.pqn-cse-top10,
.pqn-latest-news{
  color: #000 !important;
}

/* Keep links readable (but still “PopQuest clean” – no underlines) */
.pq-container a,
.pq-container a:link,
.pq-container a:visited{
  color:#000 !important;
  text-decoration:none !important;
}
.pq-container a:hover,
.pq-container a:focus{
  text-decoration:none !important;
}


/* ======================
   HEADER RIGHT (acct + burger)
   ====================== */
.pq-header__right{
  grid-column:3;
  justify-self:end;
  display:flex;
  align-items:center;
  gap:8px;
}

/* remove grid column from burger when wrapped */
.pq-burger{ grid-column:auto; justify-self:auto; }

/* Account icon button (mobile only) */
.pq-acctBtn{
  width:46px;
  height:42px;
  border: 1px solid var(--pq-border);
  background: var(--pq-white);
  border-radius: 12px;
  padding:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.pq-acctBtn__icon{
  width:20px;
  height:20px;
  fill: var(--pq-black);
  display:block;
}

@media (min-width: 1024px){
  .pq-acctBtn{ display:none; }
}

/* Optional: keep header clean on small screens */
@media (max-width: 1023px){
  .pq-cse-pill{ display:none; }
  /* Mobile header should be logo-only */
  .pq-header__right{ display:none !important; }
}

/* ======================
   MOBILE ACCOUNT SHEET
   ====================== */
.pq-mobileSheet{
  position:fixed;
  inset:0;
  z-index: 2000;
  pointer-events:none;
  display:block;
}

@media (min-width: 1024px){
  .pq-mobileSheet{ display:none !important; }
}

.pq-mobileSheet__backdrop{
  position:absolute;
  inset:0;
  background: transparent; /* no black overlay */
  border:0;
  padding:0;
  margin:0;
  cursor: default;
}

.pq-mobileSheet__card{
  position:absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 520px;

  background: var(--pq-white);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border: 1px solid var(--pq-border);
  border-bottom: 0;

  /* Default (minimised) state: a small "peek" like Instagram */
  transform: translateY(calc(100% - 64px));
  transition: transform .28s ease;
  pointer-events:auto;

  max-height: 76vh;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}

.pq-mobileSheet.is-open{
  pointer-events:auto;
}
.pq-mobileSheet.is-open .pq-mobileSheet__card{
  transform: translateY(0);
}

/* Backdrop only clickable when open (prevents blocking page taps) */
.pq-mobileSheet__backdrop{ pointer-events:none; }
.pq-mobileSheet.is-open .pq-mobileSheet__backdrop{ pointer-events:auto; }

/* Peek bar (sticky) */
.pq-mobileSheet__peek{
  position: sticky;
  top: 0;
  background: var(--pq-white);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  padding-bottom: 6px;
  z-index: 2;
}
.pq-mobileSheet__peekRow{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 4px 12px 10px 12px;
}
.pq-mobileSheet__peekBtn{
  flex: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius: 14px;
  border: 1px solid var(--pq-border);
  background: #fff;
  height: 34px;
  padding: 0 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.pq-mobileSheet__peekBtn.is-active{
  background: var(--pq-green);
  border-color: var(--pq-green);
}

/* Safety: never show green (active) states while the sheet is closed */
.pq-mobileSheet:not(.is-open) .pq-mobileSheet__peekBtn.is-active{
  background: #fff;
  border-color: var(--pq-border);
}
.pq-mobileSheet__peekIcon{
  width:18px;
  height:18px;
  fill: var(--pq-black);
}
.pq-mobileSheet__peekText{
  font-size: 10px;
}
.pq-mobileSheet__burger{
  width:18px;
  display:inline-flex;
  flex-direction:column;
  gap:4px;
}
.pq-mobileSheet__burger span{
  display:block;
  height:2px;
  width:100%;
  background: var(--pq-black);
  border-radius:2px;
}

.pq-mobileSheet__peekClose{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--pq-border);
  background: var(--pq-white);
  cursor:pointer;
  font-size: 20px;
  line-height: 1;
  flex: 0 0 auto;
}

/* Only show the X when the sheet is open */
.pq-mobileSheet:not(.is-open) .pq-mobileSheet__peekClose{ display:none; }

/* When open, show full head + content normally */
.pq-mobileSheet:not(.is-open) .pq-mobileSheet__content{
  display:none;
}
.pq-mobileSheet.is-open .pq-mobileSheet__content{
  display:block;
}

/* Menu inside sheet */
.pq-mobileSheet__menu{
  display:grid;
  gap:8px;
  margin-bottom: 12px;
}
.pq-mobileSheet__menuItem,
.pq-mobileSheet__menuSubItem{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius: 14px;
  border: 1px solid var(--pq-border);
  background: #fff;
  height: 42px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--pq-black);
}
.pq-mobileSheet__menuItem--login{
  background: var(--pq-green);
  border-color: var(--pq-green);
}
.pq-mobileSheet__menuGroup > summary::-webkit-details-marker{display:none;}
.pq-mobileSheet__menuGroup > summary::marker{content:"";}
.pq-mobileSheet__menuSub{
  display:grid;
  gap:8px;
  margin-top:8px;
}

.pq-mobileSheet__handle{
  width: 52px;
  height: 5px;
  border-radius: 999px;
  background: var(--pq-border);
  margin: 10px auto 6px auto;
}

.pq-mobileSheet__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 8px 14px 10px 14px;
  border-bottom: 1px solid var(--pq-border);
}

.pq-mobileSheet__tabs{
  display:flex;
  align-items:center;
  gap:8px;
}

.pq-mobileSheet__tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--pq-border);
  background: #fff;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 11px;
  cursor: pointer;
}

.pq-mobileSheet__tab.is-active{
  background: var(--pq-green);
  border-color: var(--pq-green);
}

/* Safety: never show green (active) states while the sheet is closed */
.pq-mobileSheet:not(.is-open) .pq-mobileSheet__tab.is-active{
  background: #fff;
  border-color: var(--pq-border);
}

/* Title kept for compatibility (not used in the new tabs header) */
.pq-mobileSheet__title{
  font-weight: 900;
  letter-spacing: .02em;
}

.pq-mobileSheet__close{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--pq-border);
  background: var(--pq-white);
  cursor:pointer;
  font-size: 22px;
  line-height: 1;
}

.pq-mobileSheet__content{
  padding: 14px;
}

/* Panels (Account vs Menu) */
.pq-mobileSheet__panel{ display:block; }
.pq-mobileSheet[data-panel="account"] .pq-mobileSheet__panel--menu{ display:none; }
.pq-mobileSheet[data-panel="menu"] .pq-mobileSheet__panel--account{ display:none; }

.pq-mobileSheet__grid{
  display:grid;
  gap:10px;
}

.pq-mobileSheet__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding: 12px 12px;
  border: 1px solid var(--pq-border);
  border-radius: 14px;
}

.pq-mobileSheet__label{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pq-muted);
}

.pq-mobileSheet__value{
  font-weight: 900;
  color: var(--pq-black);
  text-align:right;
}

.pq-sheetOpen{
  overflow:hidden;
}

/* =========================================================
   HOTFIX: remove mystery "arc/circle" overlay on mobile sheet
   Reported as appearing when mobile header/sheet kicks in.
   Targets common sources: pseudo-elements + backdrop wrappers.
   ========================================================= */
#pqMobileSheet::before,
#pqMobileSheet::after,
.pq-mobileSheet::before,
.pq-mobileSheet::after,
.pq-mobileSheet__backdrop::before,
.pq-mobileSheet__backdrop::after,
.pq-mobileSheet__card::before,
.pq-mobileSheet__card::after,
.pq-appShell::before,
.pq-appShell::after,
.pq-container::before,
.pq-container::after {
  content: none !important;
  display: none !important;
}

#pqMobileSheet,
.pq-mobileSheet,
.pq-mobileSheet__backdrop,
.pq-mobileSheet__card {
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
  border: 0 !important;
  filter: none !important;
  backdrop-filter: none !important;
}

/* If something is drawing a stroked circle as an SVG, hide ONLY huge svg inside the mobile sheet */
#pqMobileSheet svg {
  max-width: 100% !important;
  max-height: 100% !important;
}
#pqMobileSheet svg[width][height] {
  /* allow small icons; hide only very large ones */
}