/* MARKER-WINSCP-1701 */

/*
Theme Name: XEPEP Child
Theme URI: https://example.com/
Description: Custom child theme for XEPEP
Author: XEPEP
Author URI: https://example.com/
Template: twentytwentyfive
Version: 1.0.0
Text Domain: xepep-child
*/

/* ============================================
   CSS VARIABLES - Theme Colors
   ============================================ */
:root{
  --xe-bg-dark:#0a1628;
  --xe-bg-card:#112240;
  --xe-bg-overlay:rgba(10,22,40,.96);
  --xe-border:rgba(255,255,255,.18);
  --xe-border-strong:rgba(255,255,255,.35);
  --xe-text:#ffffff;
  --xe-text-muted:rgba(255,255,255,.75);
  --xe-accent:#55c0df;
  --xe-accent-2:#2aa3c8;
  --xe-danger:#d06b6b;

  --xe-radius:18px;
  --xe-radius-sm:12px;

  --xe-shadow:0 18px 48px rgba(0,0,0,.35);
}

/* ============================================
   BASE
   ============================================ */
html, body{
  background:var(--xe-bg-dark);
  color:var(--xe-text);
}

a{ color:inherit; }
a:hover{ opacity:.92; }
img{ max-width:100%; height:auto; }

/* Avoid accidental global "disable click" rules from breaking menus */
.wp-site-blocks,
.wp-site,
.wp-block-template-part{
  pointer-events:auto;
}

/* ============================================
   DISCLAIMER BAR (injected via functions.php)
   Class: research-disclaimer-banner
   ============================================ */
.research-disclaimer-banner{
  color: #ff4d4d !important;
  text-align:center;
  padding:10px 14px;
  border-bottom:1px solid rgba(255,77,77,.35);
  background:linear-gradient(180deg, rgba(255,77,77,.10), rgba(255,77,77,0));
  font-size:14px;
  line-height:1.35;
}

/* If anything inside tries to override */
.research-disclaimer-banner *{
  color:#ff4d4d !important;
}

/* ============================================
   BUTTONS (site look) - keep these scoped
   ============================================ */
.wp-block-button__link,
button,
input[type="button"],
input[type="submit"]{
  border-radius:999px;
}

/* ============================================
   "FANCY" GLASS CARD / PANEL LOOK
   (use via: Group block -> Additional CSS class: xe-card
    or style: is-style-xe-card if you have it)
   ============================================ */
.xe-card,
.wp-block-group.is-style-xe-card{
  background:rgba(17,34,64,.55);
  border:1px solid var(--xe-border);
  border-radius:var(--xe-radius);
  box-shadow:var(--xe-shadow);
  backdrop-filter:blur(8px);
}

/* Optional: if your homepage hero is inside a Group and you want
   the light-blue “surround” back without editing blocks,
   this targets the first big Group under site blocks. */
@media (max-width: 782px){
  body.home .wp-site-blocks > .wp-block-group:first-of-type{
    background:rgba(17,34,64,.50);
    border:1px solid var(--xe-border);
    border-radius:var(--xe-radius);
    box-shadow:var(--xe-shadow);
    backdrop-filter:blur(8px);
    margin:16px !important;
    padding:18px !important;
  }
}

/* ============================================
   Hide page title ("Home") on the homepage only
   ============================================ */
body.home .wp-block-post-title{
  display:none !important;
}

/* ============================================
   MOBILE OVERLAY MENU FIXES (WP Navigation block)
   ============================================ */

/* 1) Ensure overlay container covers screen and receives clicks */
.wp-block-navigation__responsive-container{
  display:none;
}

.wp-block-navigation__responsive-container.is-menu-open{
  display:flex !important;
  position:fixed !important;
  inset:0 !important;

  background:var(--xe-bg-overlay) !important;
  z-index:99999 !important;

  pointer-events:auto !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* Stop page behind from scrolling weirdly */
body.has-modal-open,
body.is-menu-open,
body.menu-open{
  overflow:hidden !important;
}

/* 2) Content area inside overlay */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content{
  position:relative !important;
  width:100% !important;
  height:100% !important;

  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-end !important;

  padding:
    calc(env(safe-area-inset-top, 0px) + 24px)
    calc(env(safe-area-inset-right, 0px) + 16px)
    calc(env(safe-area-inset-bottom, 0px) + 24px)
    calc(env(safe-area-inset-left, 0px) + 16px) !important;
}

/* 3) The actual nav list “panel” */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content
.wp-block-navigation__container{
  width:min(420px, 92vw) !important;
  max-height:calc(100vh - 120px) !important;

  overflow:auto !important;
  -webkit-overflow-scrolling:touch;

  background:rgba(10,22,40,.92) !important;
  border:1px solid var(--xe-border-strong) !important;
  border-radius:var(--xe-radius) !important;
  box-shadow:var(--xe-shadow) !important;

  padding:18px 18px 8px !important;
  margin:0 !important;

  z-index:100000 !important;
  pointer-events:auto !important;
}

/* 4) Make each menu item clearly tappable */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container > li{
  width:100% !important;
  margin:0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item a{
  display:block !important;
  width:100% !important;

  color:var(--xe-text) !important;
  font-size:20px !important;
  line-height:1.2 !important;

  padding:14px 12px !important;
  border-radius:12px !important;

  text-decoration:none !important;
  pointer-events:auto !important;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item a:hover,
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item a:active{
  background:rgba(255,255,255,.08) !important;
}

/* 6) Open (hamburger) button stability */
.wp-block-navigation__responsive-container-open{
  border-radius:12px !important;
  border:1px solid var(--xe-border) !important;
  background:rgba(10,22,40,.35) !important;
  padding:10px !important;
}

/* Make sure the open button doesn't get pseudo-icon junk */
.wp-block-navigation__responsive-container-open::before,
.wp-block-navigation__responsive-container-open::after{
  content:none !important;
}

/* ============================================
   MOBILE TUNING
   ============================================ */
@media (max-width: 600px){
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item a{
    font-size:19px !important;
    padding:13px 12px !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content{
    padding:
      calc(env(safe-area-inset-top, 0px) + 18px)
      calc(env(safe-area-inset-right, 0px) + 14px)
      calc(env(safe-area-inset-bottom, 0px) + 20px)
      calc(env(safe-area-inset-left, 0px) + 14px) !important;
  }
}

/* ============================================
   SAFETY: prevent random “box-sizing” issues
   ============================================ */
*, *::before, *::after{
  box-sizing:border-box;
}

/* =========================================================
   Desktop glass surround (keep the fancy look on desktop too)
   ========================================================= */
body.home .wp-site-blocks > .wp-block-group:first-of-type{
  background:rgba(17,34,64,.50) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:18px !important;
  box-shadow:0 18px 48px rgba(0,0,0,.35) !important;
  backdrop-filter:blur(8px) !important;

  margin:24px auto !important;
  padding:28px !important;
  max-width:1200px !important;
}

@media (max-width: 782px){
  body.home .wp-site-blocks > .wp-block-group:first-of-type{
    margin:16px !important;
    padding:18px !important;
    max-width:none !important;
  }
}

/* =========================================================
   FINAL: Close button shows a real X (drawn, not a font glyph)
   This avoids blank icons on Android.
   ========================================================= */

/* Target both common DOM shapes:
   A) button.wp-block-navigation__responsive-container-close
   B) .wp-block-navigation__responsive-container-close > button
*/
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close > button{
  position:fixed !important;
  top:calc(env(safe-area-inset-top, 0px) + 12px) !important;
  right:calc(env(safe-area-inset-right, 0px) + 12px) !important;

  width:44px !important;
  height:44px !important;
  padding:0 !important;

  border-radius:12px !important;
  border:1px solid rgba(255,255,255,.35) !important;
  background:rgba(7,16,30,.85) !important;

  z-index:100001 !important;
  pointer-events:auto !important;

  /* ensure pseudo elements can render */
  overflow:visible !important;

  /* hide any text */
  font-size:0 !important;
  line-height:0 !important;
  color:transparent !important;
}

/* Hide any svg/icons inside */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close svg,
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close > button svg,
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close span,
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close > button span{
  display:none !important;
}

/* Draw X using two diagonal strokes */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close::after,
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close > button::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  margin:auto !important;

  width:22px !important;
  height:22px !important;

  background:
    linear-gradient(45deg, transparent 46%, #fff 47%, #fff 53%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, #fff 47%, #fff 53%, transparent 54%) !important;

  opacity:1 !important;
}

/* Remove any other pseudo content that might interfere */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close::before,
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close > button::before{
  content:none !important;
}

@media (max-width: 480px){
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close,
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close > button{
    top:calc(env(safe-area-inset-top, 0px) + 10px) !important;
    right:calc(env(safe-area-inset-right, 0px) + 10px) !important;
  }
}

/* =========================================================
   SITE-WIDE AGE GATE
   ========================================================= */

html.xe-age-gate-open,
body.xe-age-gate-open{
  overflow:hidden !important;
}

.xe-age-gate{
  position:fixed;
  inset:0;
  z-index:1000000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.xe-age-gate.is-active{
  display:flex;
}

.xe-age-gate__backdrop{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top left, rgba(6,182,212,.12), transparent 30%),
    radial-gradient(circle at bottom right, rgba(139,92,246,.14), transparent 30%),
    rgba(3,7,18,.88);
  backdrop-filter:blur(6px);
}

.xe-age-gate__dialog{
  position:relative;
  width:100%;
  max-width:580px;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(10,22,40,.96), rgba(8,15,29,.98));
}

.xe-age-gate__content{
  padding:34px 30px;
  text-align:center;
  color:#e5eefc;
}

.xe-age-gate__eyebrow{
  margin:0 0 10px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#7dd3fc;
  font-weight:700;
}

.xe-age-gate__title{
  margin:0 0 14px;
  font-size:32px;
  line-height:1.15;
  color:#ffffff;
}

.xe-age-gate__text{
  margin:0 auto 24px;
  max-width:470px;
  font-size:16px;
  line-height:1.75;
  color:#cbd5e1;
}

.xe-age-gate__actions{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:16px;
}

.xe-age-gate__btn{
  appearance:none;
  border:0;
  border-radius:999px;
  padding:14px 24px;
  min-width:170px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}

.xe-age-gate__btn:hover{
  transform:translateY(-1px);
}

.xe-age-gate__btn:focus-visible{
  outline:2px solid #7dd3fc;
  outline-offset:3px;
}

.xe-age-gate__btn--confirm{
  background:linear-gradient(135deg, #06b6d4, #8b5cf6);
  color:#ffffff;
  box-shadow:0 10px 30px rgba(6,182,212,.22);
}

.xe-age-gate__btn--exit{
  background:rgba(255,255,255,.06);
  color:#e2e8f0;
  border:1px solid rgba(255,255,255,.12);
}

.xe-age-gate__note{
  margin:0;
  font-size:13px;
  line-height:1.6;
  color:#94a3b8;
}

@media (max-width: 640px){
  .xe-age-gate{
    padding:16px;
  }

  .xe-age-gate__content{
    padding:26px 20px;
  }

  .xe-age-gate__title{
    font-size:26px;
  }

  .xe-age-gate__text{
    font-size:15px;
  }

  .xe-age-gate__btn{
    width:100%;
    min-width:0;
  }
}