/*
Theme Name: SVX Classic
Version: 1.0
*/

body{
  margin:0;
  padding:0;
  background:#000 url('/main/bggif.gif') repeat;
  font-family: Verdana, Arial, Helvetica, sans-serif,
               "Apple Color Emoji",
               "Segoe UI Emoji",
               "Segoe UI Symbol",
               "Noto Color Emoji";
}

a{ text-decoration:none; }
a:hover{ color:#fff; background:#000; text-decoration:none; }
a:visited, a:active, a:link{ color:#fff; text-decoration:none; }

.svx-white { color:#fff; }

/* --- SVX feed: make Gutenberg gallery uniform + sharp --- */
#svx-feed .wp-block-gallery,
#svx-feed .blocks-gallery-grid {
  margin: 0;
}

#svx-feed .wp-block-gallery.has-nested-images figure.wp-block-image,
#svx-feed .blocks-gallery-grid .blocks-gallery-item {
  overflow: hidden;
}

#svx-feed .wp-block-gallery.has-nested-images figure.wp-block-image {
  aspect-ratio: 1 / 1;
}

#svx-feed .wp-block-gallery.has-nested-images figure.wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ========= Mobile scaling fix for classic 800px tables ========= */
table[width="800"]{
  width: 100%;
  max-width: 100% !important;
}

table[width="800"] img{
  max-width: 100% !important;
  height: auto !important;
}

@media (min-width: 821px){
  table[width="800"]{
    width: 800px !important;
    max-width: 800px !important;
    margin: 0 auto !important;
  }
}

/* ========= Feed page mobile width override ========= */
#svx-feed {
  width: 100% !important;
  max-width: 800px !important;
  margin: 0 auto !important;
}

#svx-feed img,
#svx-feed iframe,
#svx-feed video,
#svx-feed table {
  max-width: 100% !important;
}

#svx-feed iframe {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
}

html, body {
  overflow-x: hidden !important;
}

/* ========= Mobile nav: keep ONE ROW ========= */
@media (max-width: 820px){
  td[background="/main/navbar_bg_left.gif"],
  td[background="/main/navbar_bg2.gif"],
  td[background="/main/navbar_bg_right.gif"]{
    width: 20% !important;
  }

  td[background="/main/navbar_bg_left.gif"] a,
  td[background="/main/navbar_bg2.gif"] a,
  td[background="/main/navbar_bg_right.gif"] a{
    white-space: nowrap !important;
    display: inline-block;
  }

  td[background="/main/navbar_bg_left.gif"] font,
  td[background="/main/navbar_bg2.gif"] font,
  td[background="/main/navbar_bg_right.gif"] font{
    font-size: 16px !important;
  }
}

@media (max-width: 420px){
  td[background="/main/navbar_bg_left.gif"] font,
  td[background="/main/navbar_bg2.gif"] font,
  td[background="/main/navbar_bg_right.gif"] font{
    font-size: 14px !important;
  }
}

/* ========= Feed footer post ========= */
.svx-feed-footerpost{
  margin: 0 auto 22px;
  max-width: 800px;
}

/* ==========================================================
   FEED CTA BAR  JOIN / NEXT PAGE
   (PNG arrow version)
   ========================================================== */

.svx-feed-bottomnav{
  margin: 20px auto 24px;
  padding: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  background: #000;
  border-top: 1px solid rgba(255,255,255,0.15);
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.svx-feed-bottomnav .svx-cta{
  position: relative;
  display: inline-flex;
  align-items: center;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #ffffff;
  text-decoration: none;

  min-height: 56px;
  line-height: 56px;

  padding: 0 64px 0 0;

  background-image: url("/home/wp-content/themes/svx/assets/myvid_bgarrowrnext.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 56px 56px;

  white-space: nowrap;
}

.svx-feed-bottomnav .svx-cta:hover{
  color: #ff0000;
}

.svx-nextpage-disabled{
  opacity: 0.45;
  cursor: default;
}

/* ===== CTA mobile scaling ===== */
@media (max-width: 600px){
  .svx-feed-bottomnav{
    gap: 26px;
    padding: 14px 0;
  }

  .svx-feed-bottomnav .svx-cta{
    font-size: 22px;
    min-height: 38px;
    line-height: 38px;
    padding-right: 44px;
    background-size: 38px 38px;
    letter-spacing: 1px;
  }
}

.svx-feed-bottomnav.svx-only-join{
  justify-content: center;
  gap: 0;
}

/* =========================
   JOIN PAGE (SVX STATIC) UI
   ========================= */

.svx-join {
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 14px 26px;
  color: #fff;
}

.svx-join h1,
.svx-join h2,
.svx-join h3 {
  margin: 0 0 10px 0;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0.5px;
}

.svx-join .svx-join-sub {
  margin: 0 0 16px 0;
  color: rgba(255,255,255,0.80);
  font-size: 13px;
  line-height: 1.5;
}

.svx-join .svx-panel {
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  padding: 14px;
  margin: 0 0 14px 0;
}

.svx-join .svx-billing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 700px){
  .svx-join .svx-billing-grid { grid-template-columns: 1fr; }
}

.svx-join .svx-plan {
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  padding: 14px;
}

.svx-join .svx-plan-title {
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 6px 0;
}

.svx-join .svx-plan-meta {
  font-size: 12px;
  color: rgba(255,255,255,0.80);
  margin: 0 0 10px 0;
  line-height: 1.45;
}

.svx-join .svx-btn {
  display: inline-block;
  padding: 12px 14px;
  border-radius: 10px;
  font-weight: 900;
  letter-spacing: 0.6px;
  background: #b00000;
  color: #fff !important;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.svx-join .svx-btn:hover { background: #ff0000; }

.svx-join .svx-trust {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  color: rgba(255,255,255,0.78);
  font-size: 12px;
}

.svx-join .svx-pill {
  border: 1px solid rgba(255,255,255,0.18);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
}

.svx-join .svx-fineprint {
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
}

.svx-join .svx-required { border-left: 4px solid rgba(255,0,0,0.7); }

/* JOIN PAGE OVERRIDES */
#svx-feed .svx-join .svx-panel{
  background: rgba(0,0,0,0.70) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin: 0 0 16px 0 !important;
}

#svx-feed .svx-join .svx-trust .svx-pill{
  display: inline-block !important;
  margin: 6px 8px 0 0 !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  background: rgba(0,0,0,0.40) !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.85) !important;
}

/* =========================
   REACTIONS (POST-LEVEL)  ICON IMAGES (SMALL)
   ========================= */

#svx-feed .svx-react{
  margin-top: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}

#svx-feed .svx-react-btn{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;

  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;

  cursor: pointer !important;
  color: rgba(255,255,255,0.70) !important;
}

#svx-feed .svx-react-btn:hover{
  color: #fff !important;
}

#svx-feed .svx-react-img{
  width: 16px !important;
  height: 16px !important;
  display: inline-block !important;
  opacity: 0.88 !important;
}

#svx-feed .svx-react-count{
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  margin: 0 !important;
}

#svx-feed .svx-react.svx-locked .svx-react-btn{
  cursor: default !important;
  opacity: 0.6 !important;
}

#svx-feed .svx-react-btn.svx-selected{
  color: #ff0000 !important;
}

#svx-feed .svx-react-btn.svx-selected .svx-react-img{
  opacity: 1 !important;
}

/* screen-reader only text */
#svx-feed .svx-sr{
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}


/* FORCE PNG ICONS, HIDE ANY OLD SVG */
#svx-feed .svx-react-icon{
  display: none !important;
}



/* =========================
   Comments + Email signup
   ========================= */
.svx-post-tools{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
}

/* keep reactions left + comments button right on mobile */
.svx-post-tools .svx-react{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  flex:1 1 auto;
  min-width:0;
}

@media (max-width: 560px){
  .svx-post-tools{
    align-items:center;
    gap:8px;
  }

/* COMMENTS(#) button — modern pill style */
.svx-comments-toggle{
  flex:0 0 auto;
  margin-left:auto;
  border: 1px solid rgba(255,255,255,0.22);
  background: transparent;
  color:#fff;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.3px;
  padding: 6px 10px;
  border-radius: 999px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.95;
}

.svx-comments-toggle:hover{
  background: rgba(255,255,255,0.08);
}

.svx-comments-toggle:active{
  transform: translateY(1px);
}

  .svx-post-tools .svx-react{ gap:8px; }
}

.svx-comments-wrap{
  margin-top:10px;
  padding:10px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.12);
}

.svx-comment{
  padding:8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.svx-comment:last-child{ border-bottom:0; }

.svx-comment-meta{
  display:flex;
  gap:10px;
  font-size:11px;
  opacity:0.85;
}
.svx-comment-author{ font-weight:bold; }
.svx-comment-body{ font-size:13px; line-height:1.45; }

.svx-commentform input,
.svx-commentform textarea{
  width:100%;
  box-sizing:border-box;
  background:#000;
  color:#fff;
  border:1px solid rgba(255,255,255,0.18);
  padding:8px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}
.svx-commentform textarea{ resize:vertical; }

.svx-commentform .form-submit input,
.svx-commentform button,
.svx-commentform input[type="submit"]{
  margin-top:8px;
  width:auto;
  cursor:pointer;
  font-weight:bold;
  padding:8px 12px;
  background:#c00;
  color:#fff;
  border:1px solid rgba(255,255,255,0.18);
}



/* Comments signup + gated comment form */
.svx-signup-box{
  margin-top:10px;
  padding:10px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
}

.svx-signup-title{
  color:#fff;
  font-weight:bold;
  font-size:12px;
  margin-bottom:8px;
}

.svx-signup-form{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.svx-signup-name,
.svx-signup-email,
.svx-comment-text{
  background:#000;
  color:#fff;
  border:1px solid rgba(255,255,255,0.18);
  padding:7px 8px;
  font-size:12px;
}

.svx-signup-name{ width:160px; max-width:100%; }
.svx-signup-email{ width:220px; max-width:100%; }
.svx-comment-text{ width:100%; max-width:100%; }

.svx-signup-btn,
.svx-comment-btn{
  cursor:pointer;
  font-weight:bold;
  padding:7px 10px;
  background:#c00;
  color:#fff;
  border:1px solid rgba(255,255,255,0.18);
}

.svx-signup-msg,
.svx-comment-msg{
  font-size:11px;
  opacity:0.85;
}

.svx-signup-note{
  margin-top:6px;
  font-size:11px;
  opacity:0.8;
  color:#fff;
}

.svx-commenter-badge{
  margin-top:10px;
  font-size:12px;
  color:#fff;
  opacity:0.95;
}

.svx-commenter-email{
  display:inline-block;
  margin-left:8px;
  font-size:11px;
  opacity:0.75;
}


/* never show email publicly */
.svx-commenter-email{display:none !important;}