/* =======================================================
   UPM – Site Styles (Clean, Safe Overrides)
   Notes:
   • Hero styles live in the page template (hero2-*). None here.
   • This file fixes global readability + home page layout only.
   • BuddyBoss variables are normalized for dark theme.
   ======================================================= */

/* ===========================
   Color Tokens
=========================== */
:root{
  --upm-bg:#181d34;
  --upm-panel:#292849;
  --upm-pink:#ff69b4;
  --upm-pink-2:#ff6fb7;
  --upm-lilac:#c67cf7;
  --upm-white:#ffffff;
}

/* BuddyBoss variable corrections (make text readable) */
:root{
  --bb-body-background-color:#1A203A;
  --bb-content-background-color:#1A203A;
  --bb-headings-color: var(--upm-pink);
  --bb-body-text-color: #ffffff;                 /* <-- key fix: text not pink */
  --bb-primary-button-background-regular: var(--upm-pink);
  --bb-primary-button-border-regular: var(--upm-pink);
  --bb-primary-button-text-regular:#ffffff;
  --bb-secondary-button-background-regular: var(--upm-pink);
  --bb-secondary-button-border-regular: var(--upm-pink);
  --bb-secondary-button-text-regular:#ffffff;
  --bb-content-border-color: var(--upm-pink);
}

/* ===========================
   Base
=========================== */
html,body{
  background:var(--upm-bg);
  color:#fff;
  font-family:'Poppins', Arial, Helvetica, sans-serif;
  font-size:16px;
  line-height:1.6875rem;
  margin:0;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:hidden;
}

a{ color:var(--upm-pink); transition:color .2s ease; }
a:hover{ color:var(--upm-lilac); }

h1,h2,h3,h4,h5,h6{ color:var(--upm-pink); margin:.25em 0 .4em; line-height:1.2; }
p{ margin:.35em 0 1em; }

/* ===========================
   Header (subtle)
=========================== */
header.site-header{
  background:var(--upm-bg);
  display:flex; align-items:center; gap:1rem;
  padding:1rem 2rem;
  box-shadow:0 2px 6px #0003;
  position:relative; z-index:999;
}
.logo{ max-height:60px; margin-right:2rem; }
.nav-menu{ display:flex; gap:2rem; align-items:center; }
.nav-menu a{ color:#fff; text-decoration:none; font-weight:500; }
.nav-menu a:hover{ color:var(--upm-pink); }
.menu-toggle{ display:none; }

@media (max-width:800px){
  header.site-header{ justify-content:space-between; padding:.6rem 1rem; }
  .logo{ max-width:155px; max-height:42px; margin-right:0; }
  .nav-menu{
    display:none; flex-direction:column; gap:1.3rem; background:var(--upm-bg);
    position:absolute; top:60px; right:12px; width:170px; padding:1rem;
    border-radius:14px; box-shadow:0 8px 20px #0004; z-index:99;
  }
  .nav-menu.active{ display:flex; }
  .menu-toggle{ display:block; }
}

/* =======================================================
   PAGE LAYOUT HELPERS (scoped to home template)
======================================================= */
body.home-page #content .container,
body.page-template-page-home-php #content .container,
body.home-page #content .bb-grid.site-content-grid,
body.page-template-page-home-php #content .bb-grid.site-content-grid{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
  box-sizing:border-box;
}

/* Stack isolation so later sections never overlap the hero */
body.home-page #upm-hero2,
body.page-template-page-home-php #upm-hero2{
  position:relative; z-index:1;
}
body.home-page .upm-section,
body.page-template-page-home-php .upm-section{
  position:relative; z-index:0;
}
body.home-page #upm-hero2 + .upm-section,
body.page-template-page-home-php #upm-hero2 + .upm-section{
  margin-top:24px;
}

/* As a safety net: kill stray absolute children inside our sections only */
body.home-page .upm-section *[style*="position:absolute"],
body.page-template-page-home-php .upm-section *[style*="position:absolute"]{
  position:static !important;
}

/* ===========================
   Generic Section Wrappers
=========================== */
.upm-section{ padding:48px 0; }
.upm-section-container{
  width:100%; max-width:1100px; margin:0 auto; padding:0 24px; box-sizing:border-box;
}

/* ===========================
   Features Grid
=========================== */
.upm-features-title{
  color:var(--upm-pink-2);
  font-size:2rem; font-weight:700; margin:0 0 1rem;
}
.upm-features-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px;
}
@media (min-width:900px){
  .upm-features-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
.upm-feature-item{
  display:flex; gap:12px; align-items:flex-start;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px; padding:14px;
}
.upm-feature-icon{ font-size:1.15rem; margin-top:2px; opacity:.95; }
.upm-feature-heading{ font-weight:700; color:var(--upm-pink-2); }
.upm-feature-desc{ opacity:.95; }

/* ===========================
   Safety Card
=========================== */
.upm-safety-card{
  background:var(--upm-panel);
  border-radius:16px;
  border:1px solid rgba(255,255,255,.22);
  margin:1.6em auto 0;
  padding:22px;
  box-shadow:0 6px 28px rgba(24,29,52,.18);
}
.upm-safety-heading{
  color:var(--upm-pink);
  font-size:2.1rem; font-weight:700;
  display:flex; align-items:center; gap:.6em;
  margin:0 0 .7em;
}
.upm-safety-heading i{ font-size:1.2em; color:var(--upm-pink); }

.upm-safety-cols{ display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:980px){
  .upm-safety-cols{ grid-template-columns:1fr 1fr; }
}
.upm-safety-left{ font-size:1.08rem; }
.upm-safety-left p{ margin:.3rem 0 1rem; }
.upm-safety-right{ width:100%; }
.upm-safety-list-cols{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.upm-safety-list-cols ul{ margin:0; padding-left:18px; }
.upm-safety-list-cols li{
  margin:6px 0; color:#ffb7e6; font-weight:600;
}
.upm-safety-list-cols li i{ color:var(--upm-pink); margin-right:.6em; }

/* ===========================
   Why Choose
=========================== */
.upm-whychoose-features{
  display:grid; grid-template-columns:1fr; gap:16px;
}
@media (min-width:900px){
  .upm-whychoose-features{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
.upm-whychoose-item{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px; padding:16px;
}
.upm-whychoose-icon{ font-size:1.2rem; }
.upm-whychoose-heading{ color:var(--upm-pink); font-weight:700; margin:.2rem 0 .4rem; }
.upm-whychoose-desc{ opacity:.96; }

/* ===========================
   Age Consent Popup (modal style) – robust centering
=========================== */
#age-consent-overlay{
  display:none;
  position:fixed; inset:0; z-index:9998;
  background:rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
}

/* Hard reset to avoid BuddyBoss modal rules leaking in */
#age-consent-popup{
  all: unset;                 /* wipe inherited styles */
  display: none;              /* hidden by default */
  position: fixed;            /* full-viewport container */
  z-index: 9999;
  inset: 0;
  display: flex;              /* flexbox centering */
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: transparent;    /* overlay handles dimming */
}

/* Guaranteed hide class */
#age-consent-popup.hidden,
#age-consent-overlay.hidden{
  display: none !important;
}

.upm-age-modal{
  width: min(720px, 94vw);
  background: var(--upm-bg);
  color:#fff;
  border-radius: 18px;
  border: 2px solid var(--upm-pink);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  padding: 24px 26px;
}

.upm-age-title{
  margin: 4px 0 8px 0;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: .3px;
  color: var(--upm-pink);
  text-align: left;
}

.upm-age-body{
  text-align:left;
  color:#eae3f7;
  line-height:1.6;
  font-size:1.05rem;
}
.upm-age-body p{ margin: 10px 0; }

.upm-age-link{
  color: var(--upm-pink) !important;
  text-decoration: underline;
  font-weight: 700;
}
.upm-age-link:hover{
  color:#fff !important;
  background: var(--upm-pink);
  border-radius: 4px;
  padding: 0 .2em;
}

.upm-age-divider{
  border: 0;
  border-top: 1px solid rgba(255,255,255,.12);
  margin: 18px 0 14px;
}

.upm-age-actions{
  display:flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

/* Buttons */
.upm-btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-weight: 700;
  border-radius: 14px;
  padding: .8em 1.2em;
  font-size: 1rem;
  cursor: pointer;
  transition: transform .05s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  border: 2px solid transparent;
  text-align:center;
  user-select:none;
}
.upm-btn i{ font-size:1.05em; }

.upm-btn-primary{
  background: var(--upm-pink);
  color:#0e0e15;
  box-shadow: 0 6px 16px rgba(255,105,180,.25);
}
.upm-btn-primary:hover{ transform: translateY(-1px); }

.upm-btn-ghost{
  background: transparent;
  color:#fff;
  border-color: rgba(255,255,255,.9);
}
.upm-btn-ghost:hover{
  color: var(--upm-pink);
  border-color: var(--upm-pink);
}

@media (max-width: 600px){
  .upm-age-modal{ padding:18px; border-radius:16px; }
  .upm-age-title{ font-size:1.35rem; }
  .upm-age-actions{ justify-content: stretch; }
  .upm-btn{ width:100%; }
}

/* ——— Text-only sidebar toggle (kill purple in all states) ——— */
button.upm-sidebar-toggle,
.upm-sidebar-toggle,
.upm-sidebar-toggle:hover,
.upm-sidebar-toggle:focus,
.upm-sidebar-toggle:active {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #fff !important;
  cursor: pointer !important;
  border-radius: 0 !important;
}

/* If your markup has an icon inside, hide it (optional) */
.upm-sidebar-toggle .upm-toggle-icon { display: none !important; }

/* Make the label look like a link */
.upm-sidebar-toggle .upm-toggle-label,
.upm-sidebar-toggle span,
.upm-sidebar-toggle strong {
  display: inline !important;
  font: inherit !important;
  color: #fff !important;
  text-decoration: underline !important;   /* remove if you prefer no underline */
}

/* Keep placement from your previous styles (tweak if needed) */
.upm-sidebar-toggle {
  position: sticky !important;
  top: calc(var(--bb-header-height, 74px) + 10px) !important;
  left: 0 !important;
  z-index: 50 !important;
}


/* ===========================
   Footer
=========================== */
.footer-widget-area,
.bb-footer,
.site-footer{
  background:var(--upm-bg) !important;
  color:#fff;
}

/* Center footer contents safely */
.site-footer .container,
.site-footer .bb-grid.site-content-grid{
  width:100% !important;
  max-width:1200px !important;
  margin:0 auto !important;
  padding:0 20px !important;
  box-sizing:border-box;
}

/* Footer widgets grid (footer scope only) */
.site-footer .bb-grid,
.bb-footer .bb-grid,
.footer-widget-area .bb-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(220px,1fr));
  gap:24px 32px;
  align-items:start;
}
@media (max-width:900px){
  .site-footer .bb-grid,
  .bb-footer .bb-grid,
  .footer-widget-area .bb-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .site-footer .bb-grid,
  .bb-footer .bb-grid,
  .footer-widget-area .bb-grid{ grid-template-columns:1fr; }
}

.footer-widget{ min-width:0; }
.footer-widget-area *{ color:#fff; }
.footer-widget-area .widget-title{ color:#ffb7e6 !important; }
.footer-widget-area .widget_nav_menu li a{ color:#fff !important; }
.footer-widget-area .widget_nav_menu li a:hover{ color:var(--upm-pink) !important; }

.upm-footer-bottom{
  background:var(--upm-bg);
  color:#fff;
  text-align:center;
  padding:1.2em 5% 1em;
  font-size:1em;
  border-top:1px solid #222446;
  margin-top:0;
}