/*

Theme Name: Anonymous Membership Theme

Theme URI: https://example.com

Author: (Your Name)

Description: Anonymous-first membership theme with tier-aware dashboards, explore directory, and optional MemberPress/WPUF integrations.

Version: 1.0.0
License: GPL-2.0-or-later

Text Domain: saydat

Tags: custom-menu, featured-images, one-column, two-columns, right-sidebar, block-styles

*/



:root{

  --bg: #070a14;

  --surface: rgba(15,20,36,.82);

  --surface-2: rgba(15,20,36,.92);

  --text: rgba(240,245,255,.92);

  --muted: rgba(240,245,255,.62);

  --line: rgba(255,255,255,.10);

  --brand: #7c5cff;

  --brand-2: #31c7ff;

  --accent: #ff7ac6;

  --good: #21c45a;

  --warn: #ffb020;

  --bad: #ff4d4d;

  --shadow: 0 24px 80px rgba(0, 0, 0, .45);

  --shadow-sm: 0 10px 30px rgba(0, 0, 0, .40);

  --radius: 18px;

  --radius-sm: 12px;

  --max: 1160px;

}





/* Color schemes: default is dark; light overrides vars when body has .saydat-light */

body.saydat-dark{

  /* Explicitly map to dark defaults for clarity */

  --bg: #070a14;

  --surface: rgba(15,20,36,.82);

  --surface-2: rgba(15,20,36,.92);

  --text: rgba(240,245,255,.92);

  --muted: rgba(240,245,255,.62);

  --line: rgba(255,255,255,.10);

  --shadow: 0 24px 80px rgba(0, 0, 0, .45);

  --shadow-sm: 0 10px 30px rgba(0, 0, 0, .40);

}



/* Light mode keeps the same brand/accent colors but flips surfaces/text for readability */

body.saydat-light{

  --bg: #f5f7ff;

  --surface: #ffffff;

  --surface-2: #eef1ff;

  --text: #111322;

  --muted: rgba(17,19,34,.72);

  --line: rgba(0,0,0,.08);

  --shadow: 0 24px 80px rgba(15,23,42,.15);

  --shadow-sm: 0 10px 30px rgba(15,23,42,.12);

}



/* Slightly softer background gradients in light mode */

body.saydat-light{

  background: radial-gradient(1200px 700px at 18% 10%, rgba(124,92,255,.16), transparent 58%),

              radial-gradient(1200px 700px at 82% 12%, rgba(49,199,255,.10), transparent 58%),

              radial-gradient(1200px 700px at 50% 92%, rgba(255,122,198,.10), transparent 62%),

              var(--bg);

}



html{scroll-behavior:smooth}

body{

  margin:0;

  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";

  color: var(--text);

  background: radial-gradient(1200px 700px at 18% 10%, rgba(124,92,255,.22), transparent 58%),

              radial-gradient(1200px 700px at 82% 12%, rgba(49,199,255,.16), transparent 58%),

              radial-gradient(1200px 700px at 50% 92%, rgba(255,122,198,.14), transparent 62%),

              var(--bg);

}



a{color:inherit; text-decoration:none}

a:hover{opacity:.92}

img{max-width:100%; height:auto}



/* Layout */

.sd-wrap{max-width: var(--max); margin: 0 auto; padding: 18px 16px 56px}

.sd-grid{

  display:grid !important;

  grid-template-columns: 260px 1fr 320px;

  gap: 16px;

  align-items:start;

}



/* Sidebar lock: keep left/right rails stable on desktop */
@media (min-width: 1101px){
  .sd-grid > .sd-left,
  .sd-grid > .sd-right{
    position: sticky;
    top: 16px;
    align-self: start;
  }
}

/* Prevent grid children from forcing layout shifts/overflow */
.sd-grid > .sd-left,
.sd-grid > .sd-main,
.sd-grid > .sd-right{
  min-width: 0;
}

@media (max-width: 1100px){

  .sd-grid{grid-template-columns: 260px 1fr}

  .sd-right{display:none}

}

@media (max-width: 880px){

  .sd-grid{grid-template-columns: 1fr}

  .sd-left{position:static}

}



/* Top nav */

.sd-topbar{

  position: sticky;

  top:0;

  z-index: 50;

  backdrop-filter: blur(14px);

  background: rgba(7,10,20,.65);

  border-bottom: 1px solid var(--line);

}

.sd-topinner{max-width: var(--max); margin:0 auto; padding: 10px 16px; display:flex; align-items:center; gap:14px}

.sd-brand{display:flex; align-items:center; gap:10px; min-width: 220px}

.sd-brand img{width:38px; height:38px; border-radius: 12px; box-shadow: var(--shadow-sm)}

.sd-brand .sd-title{font-weight: 800; letter-spacing:.2px}

.sd-brand .sd-sub{font-size: 12px; color: var(--muted)}

.sd-nav{display:flex; gap: 12px; flex-wrap:wrap; align-items:center}

/* WP menus often output <li> items; make sure they lay out cleanly */

.sd-nav li{list-style:none; margin:0; padding:0; display:inline-flex}

.sd-nav a{display:inline-flex; align-items:center; padding: 8px 10px; border-radius: 999px; border: 1px solid transparent; color: var(--text); opacity: .86}

.sd-nav a:hover{background: rgba(255,255,255,.08); border-color: var(--line); opacity: 1}

.sd-nav .current-menu-item > a,

.sd-nav a[aria-current="page"]{background: rgba(106,92,255,.18); border-color: rgba(106,92,255,.28); opacity: 1}

.sd-topspacer{flex:1}

.sd-chip{display:inline-flex; align-items:center; gap:8px; padding: 8px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface)}

.sd-chip b{font-size: 12px}

.sd-chip small{font-size: 12px; color: var(--muted)}



.sd-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); box-shadow: var(--shadow-sm); cursor:pointer; transition: transform .08s ease, filter .12s ease, background .12s ease, border-color .12s ease}
.sd-btn:hover{background: var(--surface); border-color: rgba(255,255,255,.16)}
.sd-btn:active{transform: translateY(1px)}
.sd-btn[disabled], .sd-btn.is-disabled{opacity:.55; cursor:not-allowed; transform:none}

.sd-btn:hover{transform: translateY(-1px)}

.sd-btn-primary{border-color: transparent; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: white}

.sd-btn-danger{border-color: transparent; background: linear-gradient(135deg, #b71c1c, #e53935); color: #fff}
.sd-btn-danger:hover{filter: brightness(1.05)}

.sd-btn-ghost{background: var(--surface)}

/* Login page: button-style menu under the Login title */
.sd-login-actions{list-style:none; padding:0; margin: 10px 0 0; display:flex; gap:10px; flex-wrap:wrap}
.sd-login-actions li{margin:0; padding:0}
.sd-login-actions a{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); box-shadow: var(--shadow-sm); text-decoration:none; transition: transform .08s ease, filter .12s ease, background .12s ease, border-color .12s ease}
.sd-login-actions a:hover{background: var(--surface); border-color: rgba(255,255,255,.16); transform: translateY(-1px)}
.sd-login-actions a:active{transform: translateY(1px)}
.sd-login-actions li:first-child a{border-color: transparent; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: white}



/* Cards */

.sd-card{

  border: 1px solid var(--line);

  border-radius: var(--radius);

  background: linear-gradient(180deg, var(--surface-2), var(--surface));

  box-shadow: var(--shadow);

}

.sd-card .sd-pad{padding: 16px}

.sd-h{margin:0 0 8px; font-size: 16px; letter-spacing:.2px}

.sd-p{margin: 0; color: var(--muted); line-height: 1.55}

.sd-kbd{font-size: 12px; padding: 3px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface)}



/* Sidebar */

.sd-left{position: sticky; top: 70px}

.sd-side{

  padding: 10px;

}

.sd-side a{

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding: 10px 12px;

  border-radius: 14px;

  border: 1px solid transparent;

  color: var(--text);

}

.sd-side a:hover{background: var(--surface); border-color: var(--line)}

.sd-side a.is-active{background: rgba(106,92,255,.12); border-color: rgba(106,92,255,.25)}

.sd-badge{font-size: 12px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: rgba(245,247,255,.85)}

.sd-badge.good{background: rgba(33,196,90,.12); border-color: rgba(33,196,90,.25)}

.sd-badge.warn{background: rgba(255,176,32,.12); border-color: rgba(255,176,32,.25)}



/* Main */

.sd-main{min-width: 0}

.sd-hero{

  --sd-banner-h: 200px;

  overflow:hidden;

  position:relative;

}

.sd-hero::before{

  content:"";

  position:absolute;

  inset:-1px;

  background: radial-gradient(900px 380px at 18% 12%, rgba(124,92,255,.28), transparent 55%),

              radial-gradient(900px 380px at 82% 12%, rgba(49,199,255,.20), transparent 55%),

              radial-gradient(900px 420px at 50% 120%, rgba(255,122,198,.18), transparent 55%);

  pointer-events:none;

}

.sd-hero .sd-pad{position:relative}

/* Front-page banner ad (small, flat, non-overlapping) */
.sd-hero-banner{
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: min(600px, calc(100% - 28px));
  height: var(--sd-banner-h);
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(20,24,35,.55);
  overflow: hidden;
  z-index: 2;
}

.sd-hero-content{
  padding-top: calc(var(--sd-banner-h) + 12px);
}

.sd-bannerrotator-link{display:block; width:100%; height:100%}
.sd-bannerrotator-img{width:100%; height:100%; object-fit:cover; display:block; transition: opacity .25s ease}
.sd-bannerrotator-img.is-fading{opacity:.35}
.sd-bannerrotator-empty{height:100%; display:flex; align-items:center; justify-content:center; text-align:center}

.sd-hero-grid{display:grid; grid-template-columns: 1.25fr .75fr; gap: 16px; align-items:center}

@media (max-width: 880px){.sd-hero-grid{grid-template-columns:1fr}}

.sd-display{font-size: 34px; line-height: 1.05; margin:0 0 10px; letter-spacing: -0.8px}

.sd-lead{margin:0; color: var(--muted); font-size: 15px; line-height: 1.7}

.sd-cta{margin-top: 14px; display:flex; gap:10px; flex-wrap:wrap}

.sd-pillrow{margin-top: 14px; display:flex; gap:8px; flex-wrap:wrap}

.sd-pill{font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: rgba(240,245,255,.78)}



.sd-bento{display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px}

@media (max-width: 880px){.sd-bento{grid-template-columns:1fr}}

.sd-mini{border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface)}

.sd-mini .sd-pad{padding: 14px}



.sd-metrics{display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px}

@media (max-width: 880px){.sd-metrics{grid-template-columns:1fr}}

.sd-metric{border-radius: 16px; border: 1px solid var(--line); background: var(--surface)}

.sd-metric .sd-pad{padding: 12px}

.sd-metric b{font-size: 18px}

.sd-metric small{display:block; color: var(--muted); margin-top: 2px}



/* Tables / lists */

.sd-table{width:100%; border-collapse: collapse; font-size: 14px}

.sd-table th, .sd-table td{border-bottom: 1px solid var(--line); padding: 10px 8px; text-align:left; vertical-align:top}

.sd-table th{color: rgba(240,245,255,.78); font-weight: 700}



/* Footer */

.sd-footer{margin-top: 22px; color: var(--muted); font-size: 13px}



/* Compact WP content */

.entry-content p{line-height: 1.7}

.entry-content{max-width: 72ch}



/* Utility */

.sd-row{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}

.sd-sep{height:1px; background: var(--line); margin: 12px 0}

.sd-note{font-size: 13px; color: var(--muted)}



/* Reduce excessive WP margins */

.wp-block{margin-top: .6em; margin-bottom: .6em}





/* Dashboard quick actions: membership buttons */

.sd-qa{

  display:flex;

  gap:10px;

  flex-wrap:wrap;

  margin-bottom:10px;

}



/* MemberPress: pricing (group price boxes) */

.mepr-price-boxes,

.mepr-group-price-boxes{

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

  gap: 16px;

  margin-top: 16px;

}



.mepr-price-box,

.mepr-group-price-box{

  background: var(--card);

  border: 1px solid var(--line);

  border-radius: 18px;

  padding: 18px;

  box-shadow: 0 12px 28px rgba(0,0,0,.18);

}



.mepr-price-box-title{font-size:18px;font-weight:800;margin:0 0 6px}

.mepr-price-box-price{font-size:26px;font-weight:900;margin:0 0 10px;letter-spacing:-.02em}

.mepr-price-box-description{color:var(--muted)}



/* Some MemberPress templates output a list */

.mepr-price-boxes ul,

.mepr-group-price-boxes ul{list-style:none;padding:0;margin:0}



.mepr-price-box-button,

.mepr-group-price-box-button{margin-top:14px}



.mepr-price-box-button a,

.mepr-group-price-box-button a,

.mepr-price-box-button input[type="submit"],

.mepr-group-price-box-button input[type="submit"]{

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 10px 14px;

  border-radius: 12px;

  border: 1px solid rgba(255,255,255,.12);

  color: #fff !important;

  text-decoration: none;

  font-weight: 800;

  background: linear-gradient(135deg, rgba(99,102,241,1), rgba(236,72,153,1));

  box-shadow: 0 10px 20px rgba(99,102,241,.25);

}



.mepr-price-box-button a:hover,

.mepr-group-price-box-button a:hover{filter:brightness(1.02)}



/* MemberPress: account/checkout helper bar */

.sd-mp-nav{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}

.sd-mp-nav a{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(15,20,36,.55);color:var(--text);text-decoration:none;font-weight:800}

.sd-mp-nav a:hover{background:rgba(99,102,241,.12)}





/* Light mode overrides for top bar, navigation, and pills */

body.saydat-light .sd-topbar{

  background: rgba(255,255,255,.9);

  border-bottom-color: rgba(15,23,42,.08);

}



body.saydat-light .sd-nav a{

  color: var(--text);

  opacity: .9;

}



body.saydat-light .sd-nav a:hover{

  background: rgba(15,23,42,.04);

  border-color: var(--line);

}



body.saydat-light .sd-nav .current-menu-item > a,

body.saydat-light .sd-nav a[aria-current="page"]{

  background: rgba(124,92,255,.14);

  border-color: rgba(124,92,255,.30);

}



body.saydat-light .sd-pill{

  color: var(--muted);

}



body.saydat-light .sd-table th{

  color: var(--muted);

}



/* Explore directory */
.sd-directory{margin-top: 14px}
.sd-directory-head{margin-bottom: 12px}
.sd-directory-grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px}
.sd-directory-card{text-decoration:none; color: inherit; overflow:hidden}
.sd-directory-thumb{height: 140px; background-size: cover; background-position:center; border-bottom: 1px solid var(--line)}
.sd-directory-meta{justify-content:space-between}
.sd-directory-body{display:block}
.sd-directory-section{margin-top:18px}
.sd-directory-section:first-child{margin-top:0}






/* MemberPress Login Styling */

.mepr-login-form,
#mepr_loginform {
  max-width: 100%;
}

.mepr-login-form label,
#mepr_loginform label {
  display: block;
  margin: 14px 0 6px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.mepr-login-form input[type="text"],
.mepr-login-form input[type="email"],
.mepr-login-form input[type="password"],
.mepr-login-form input[type="number"],
#mepr_loginform input[type="text"],
#mepr_loginform input[type="email"],
#mepr_loginform input[type="password"],
#mepr_loginform input[type="number"] {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.20);
  color: inherit;
  outline: none;
}

.mepr-login-form input:focus,
#mepr_loginform input:focus {
  border-color: rgba(255,255,255,0.35);
}

.mepr-login-form .mepr-remember-me,
#mepr_loginform .mepr-remember-me,
.mepr-login-form .mepr_checkbox,
#mepr_loginform .mepr_checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 10px;
}

.mepr-login-form input[type="checkbox"],
#mepr_loginform input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
}

.mepr-login-form input[type="submit"],
.mepr-login-form button[type="submit"],
#mepr_loginform input[type="submit"],
#mepr_loginform button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.14);
  color: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  width: auto;
}

.mepr-login-form input[type="submit"]:hover,
.mepr-login-form button[type="submit"]:hover,
#mepr_loginform input[type="submit"]:hover,
#mepr_loginform button[type="submit"]:hover {
  background: rgba(255,255,255,0.18);
}

.mepr-login-form .mepr-forgot-password,
#mepr_loginform .mepr-forgot-password,
.mepr-login-form a[href*="lostpassword"],
#mepr_loginform a[href*="lostpassword"] {
  display: inline-block;
  margin-top: 14px;
  opacity: 0.9;
  text-decoration: none;
}

.mepr-login-form .mepr-forgot-password:hover,
#mepr_loginform .mepr-forgot-password:hover,
.mepr-login-form a[href*="lostpassword"]:hover,
#mepr_loginform a[href*="lostpassword"]:hover {
  text-decoration: underline;
  opacity: 1;
}

/* WP Cerber math challenge spacing */
.mepr-login-form .cerber-humtest,
#mepr_loginform .cerber-humtest {
  margin-top: 10px;
}



/* Tier stamp overlay + membership featured image */
.sd-avatar-wrap{ position:relative; display:inline-block; }
.sd-tier-stamp{ position:absolute; right:-4px; bottom:-4px; width:28px; height:28px; border-radius:999px; object-fit:contain; border:2px solid rgba(255,255,255,.9); box-shadow:0 2px 10px rgba(0,0,0,.25); background:#fff; }
.sd-membership-featured-wrap{ overflow:hidden; border-radius:14px; }
.sd-membership-featured{ width:100%; height:auto; display:block; object-fit:contain; }


/* Dashboard avatar + tier stamp: prevent global img rules from collapsing avatar */
.sd-avatar-wrap{ width:64px; height:64px; flex:0 0 64px; }
.sd-avatar-wrap img{ width:64px; height:64px; border-radius:16px; object-fit:cover; display:block; }


/* Stack cards vertically (dashboard/community safe layout) */
.sd-stack{display:grid; gap:12px;}


/* Header chip media (membership badge / avatar) */
.sd-chip-stamp,
.sd-chip-avatar{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  display:block;
  object-fit: cover;
}

/* =========================
   PRICING PAGE CLEANUP
   ========================= */
body.page-pricing .mepr-price-boxes,
body.page-pricing .mepr_price_box,
body.page-pricing .mepr-price-box { box-sizing: border-box; }

body.page-pricing .mepr-price-box,
body.page-pricing .mepr_price_box {
  border-radius: 18px;
  overflow: hidden;
}

body.page-pricing .mepr-price-box .mepr-price-box-content,
body.page-pricing .mepr_price_box .mepr_price_box_content {
  padding: 18px 18px 20px;
}

body.page-pricing .mepr-price-box a,
body.page-pricing .mepr_price_box a,
body.page-pricing .mepr-price-box .mepr-price-box-button a,
body.page-pricing .mepr_price_box .mepr_price_box_button a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 140px;
  padding: 10px 18px !important;
  line-height: 1 !important;
  height: auto !important;
  border-radius: 14px !important;
  text-decoration: none;
  white-space: nowrap;
}

body.page-pricing .mepr-price-box .mepr-price-box-button,
body.page-pricing .mepr_price_box .mepr_price_box_button {
  display: flex;
  justify-content: center;
}