/* JavaSense Lux Theme Styles (pairs with JavaSense UI Kit tokens) */

/* Fallback tokens when UI Kit plugin is not active */
:root{
  --js-bg:#050607;
  --js-surface:rgba(10,12,14,.92);
  --js-surface2:rgba(8,10,12,.92);
  --js-text:#EEEAE1;
  --js-muted:rgba(238,234,225,.70);
  --js-gold:#D0A233;
  --js-gold2:#D6B04C;
  --js-gold-bright:#FFE99A;
  --js-gold-foil-a:#FFE99A;
  --js-gold-foil-b:#FFFDF5;
  --js-gold-foil-c:#FFD86B;
  --js-border:rgba(208,162,51,.22);
  --js-shadow:0 14px 45px rgba(0,0,0,.35);
  --js-radius-lg:22px;
  --js-radius-md:16px;
}

/* Use the same “page” class as the landing */
body.js-page{
  background: var(--js-bg);
  color: var(--js-text);
}

/* Make sure WP logo inherits landing sizing when theme logo uses custom-logo */
.js-brand .custom-logo{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display:block;
}
@media (min-width: 900px){
  .js-brand .custom-logo{ width: 91px; height: 91px; border-radius: 18px; }
}

/* Wordmark text fallback */
.jslx-brand-wordmark{
  font-weight: 800;
  letter-spacing: .2px;
  background: linear-gradient(120deg,#b57d1b,#ffe29a,#d0a233);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
  font-size: 18px;
  line-height: 1;
}

/* Layout wrappers */
.jslx-main{ position: relative; z-index: 1; }

/* Hero */
.jslx-hero{ padding: 32px 0 18px; }
.jslx-hero-panel{
  background: linear-gradient(180deg, rgba(10,12,14,.72), rgba(10,12,14,.45));
  border: 1px solid rgba(208,162,51,.18);
  border-radius: var(--js-radius-lg);
  box-shadow: var(--js-shadow);
  padding: 26px 22px;
  backdrop-filter: blur(14px);
  position: relative;
  overflow:hidden;
}
.jslx-hero-panel::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(700px 320px at 18% 10%, rgba(255,226,154,.12), transparent 60%),
              radial-gradient(680px 360px at 78% 20%, rgba(208,162,51,.14), transparent 65%);
  pointer-events:none;
}
.jslx-hero-kicker{ margin:0 0 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--js-muted); }
.jslx-hero-title{ margin:0; font-size: clamp(28px, 3.3vw, 44px); line-height:1.08; }
.jslx-hero-sub{ margin: 10px 0 0; color: var(--js-muted); max-width: 62ch; }
.jslx-hero-cta{ display:flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }

.jslx-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(208,162,51,.30);
  background: rgba(12,14,16,.75);
  color: var(--js-text);
  text-decoration:none;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.jslx-btn:hover{ transform: translateY(-1px); border-color: rgba(255,226,154,.38); }
.jslx-btn--ghost{ background: rgba(10,12,14,.35); }

/* Sections */
.jslx-section{ padding: 18px 0 34px; }
.jslx-section-head{ display:flex; align-items:baseline; justify-content: space-between; gap: 14px; margin: 10px 0 16px; }
.jslx-section-title{ margin:0; font-size: 18px; letter-spacing:.2px; }
.jslx-section-sub{ color: var(--js-muted); font-size: 13px; }

/* Grid cards */
.jslx-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 980px){
  .jslx-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .jslx-grid{ grid-template-columns: 1fr; gap: 22px; }
}

.jslx-card{
  border-radius: var(--js-radius-lg);
  background: rgba(10,12,14,.60);
  border: 1px solid rgba(208,162,51,.16);
  box-shadow: 0 14px 40px rgba(0,0,0,.30);
  overflow:hidden;
  position: relative;
}
.jslx-card::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(520px 280px at 18% 10%, rgba(255,226,154,.10), transparent 60%);
  opacity:.8;
  pointer-events:none;
}
.jslx-card-link{ display:block; color: inherit; text-decoration:none; }
.jslx-card-media img{ width:100%; height:auto; display:block; }
.jslx-card-body{ padding: 16px 16px 14px; position:relative; z-index:1; }
.jslx-card-meta{ display:flex; align-items:center; gap: 8px; color: var(--js-muted); font-size: 12px; }
.jslx-dot{ opacity:.6; }
.jslx-card-title{ margin: 10px 0 6px; font-size: 16px; line-height:1.28; }
.jslx-card-excerpt{ margin: 0; color: var(--js-muted); font-size: 13px; line-height: 1.55; }
.jslx-card-cta{ display:inline-block; margin-top: 12px; font-size: 12px; letter-spacing:.12em; text-transform: uppercase; background: linear-gradient(120deg,#d6b04c,#fff2d2,#ffd86b); -webkit-background-clip:text; background-clip:text; color:transparent; }

.jslx-card:hover{ transform: translateY(-2px); border-color: rgba(255,226,154,.28); }

.jslx-card--compact .jslx-card-body{ padding: 14px 14px 12px; }

.jslx-chip{
  display:inline-flex; align-items:center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(208,162,51,.24);
  background: rgba(0,0,0,.20);
  color: rgba(255,233,154,.92);
}

/* Pagination */
.jslx-pagination{ margin-top: 18px; }
.jslx-pagination .page-numbers{
  display:inline-flex; gap:10px; align-items:center;
}
.jslx-pagination a, .jslx-pagination span{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(208,162,51,.18);
  text-decoration:none;
  color: var(--js-text);
  background: rgba(10,12,14,.35);
}
.jslx-pagination .current{ background: rgba(208,162,51,.14); }

/* Article */
.jslx-article-head{ padding: 22px 0 8px; }
.jslx-article-kicker{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; color: var(--js-muted); font-size: 12px; }
.jslx-article-title{ margin: 12px 0 0; font-size: clamp(28px, 3.4vw, 46px); line-height:1.08; }
.jslx-article-sub{ margin: 10px 0 0; color: var(--js-muted); max-width: 70ch; }

.jslx-article{ padding: 10px 0 30px; }
.jslx-article-body{
  background: rgba(10,12,14,.50);
  border: 1px solid rgba(208,162,51,.14);
  border-radius: var(--js-radius-lg);
  box-shadow: var(--js-shadow);
  padding: 18px;
}

.jslx-article-heroimg{ margin:0 0 16px; overflow:hidden; border-radius: 18px; border: 1px solid rgba(208,162,51,.16); }
.jslx-article-heroimg img{ width:100%; height:auto; display:block; }

/* Content typography */
.jslx-content{ line-height: 1.75; font-size: 16px; }
.jslx-content p{ color: rgba(238,234,225,.86); }
.jslx-content h2, .jslx-content h3, .jslx-content h4{ margin-top: 1.8em; }
.jslx-content a{ color: rgba(255,233,154,.92); text-decoration: none; border-bottom: 1px solid rgba(255,233,154,.28); }
.jslx-content a:hover{ border-bottom-color: rgba(255,233,154,.55); }

/* Headings: gold foil (match landing luxury) */
.jslx-page-title,
.jslx-article-title,
.jslx-content h1,
.jslx-content h2,
.jslx-content h3,
.jslx-content h4{
  color: rgba(255,233,154,.98);
  text-shadow: 0 1px 0 rgba(0,0,0,.55), 0 0 26px rgba(255,226,154,.10);
}
@supports (-webkit-background-clip: text){
  .jslx-page-title,
  .jslx-article-title,
  .jslx-content h1,
  .jslx-content h2,
  .jslx-content h3,
  .jslx-content h4{
    background: linear-gradient(120deg,var(--js-gold-foil-a),var(--js-gold-foil-b),var(--js-gold-foil-c));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* FAQ / Details accordion (make questions gold, answers white) */
.jslx-content details{
  margin: 14px 0;
  border-radius: 18px;
  border: 1px solid rgba(208,162,51,.18);
  background: rgba(10,12,14,.40);
  box-shadow: 0 16px 50px rgba(0,0,0,.30);
  overflow:hidden;
}
.jslx-content details summary{
  list-style: none;
  cursor: pointer;
  padding: 14px 44px 14px 16px;
  font-weight: 700;
  letter-spacing: .15px;
  color: var(--js-gold-bright) !important;
  position: relative;
}
.jslx-content details summary::-webkit-details-marker{ display:none; }
.jslx-content details summary::after{
  content:"+";
  position:absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,233,154,.95);
  font-weight: 800;
}
.jslx-content details[open] summary::after{ content:"–"; }

@supports (-webkit-background-clip:text){
  .jslx-content details summary{
    background: linear-gradient(120deg,var(--js-gold-foil-a),var(--js-gold-foil-b),var(--js-gold-foil-c));
    -webkit-background-clip:text;
    background-clip:text;
    color: transparent !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.55), 0 0 30px rgba(255,226,154,.16);
  }
}

.jslx-content details > *:not(summary){
  padding: 0 16px 14px;
}
.jslx-content details p,
.jslx-content details li{
  color: rgba(238,234,225,.92) !important;
}

/* Luxury image framing (bolder, more visible) */
.jslx-content figure.wp-block-image,
.jslx-content .wp-block-image{
  margin: 20px 0;
  position: relative;
  padding: 8px;
  border-radius: 22px;
  border: 1px solid rgba(208,162,51,.20);
  background: rgba(0,0,0,.14);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.jslx-content figure.wp-block-image::before,
.jslx-content .wp-block-image::before{
  content:"";
  position:absolute; inset:0;
  border-radius: 22px;
  border: 1px solid rgba(255,226,154,.26);
  box-shadow: 0 0 0 1px rgba(208,162,51,.14) inset, 0 0 34px rgba(255,226,154,.06);
  pointer-events:none;
}

.jslx-content figure.wp-block-image img,
.jslx-content .wp-block-image img,
.jslx-content img:not(.js-brand-logo):not(.js-drawer-logo):not(.js-authorbox-avatar){
  border-radius: 18px;
  border: 2px solid rgba(255,226,154,.30);
  box-shadow: 0 18px 55px rgba(0,0,0,.45), 0 0 0 1px rgba(208,162,51,.18) inset, 0 0 28px rgba(255,226,154,.06);
  background: rgba(0,0,0,.18);
}

/* Author box image should stay crisp and not over-styled */
.js-authorbox-avatar{ border-radius: 18px; }

/* TOC */
.jslx-toc{
  margin: 14px 0 18px;
  border: 1px solid rgba(208,162,51,.18);
  border-radius: 18px;
  background: rgba(8,10,12,.55);
  box-shadow: 0 12px 34px rgba(0,0,0,.25);
  backdrop-filter: blur(12px);
  overflow:hidden;
  clear: both;
}
.jslx-toc-toggle{
  width:100%;
  background: transparent;
  color: var(--js-text);
  border: 0;
  padding: 12px 14px;
  text-align:left;
  font-weight: 700;
  letter-spacing:.06em;
  text-transform: uppercase;
  cursor:pointer;
}
.jslx-toc-body{ padding: 10px 14px 14px; }
.jslx-toc-list{ margin:0; padding-left: 16px; }
.jslx-toc-item{ margin: 6px 0; list-style: none; padding-left: calc(var(--lvl) * 10px); }
.jslx-toc-item a{ border-bottom: 0; color: rgba(238,234,225,.84); }
.jslx-toc-item a:hover{ color: rgba(255,233,154,.95); }
.jslx-toc-item a.is-active{ color: rgba(255,233,154,.98); text-shadow: 0 0 18px rgba(255,226,154,.12); }

@media (min-width: 1040px){
  /* Desktop: keep TOC in the article flow (no sticky sidebar overlay). */
  .jslx-toc{
    float: none;
    width: 100%;
    margin: 14px 0 18px;
    position: static;
    top: auto;
  }
}

/* Related */
.jslx-related{ margin-top: 18px; }
.jslx-related-title{ margin: 0 0 12px; font-size: 16px; }
.jslx-grid--related{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 980px){ .jslx-grid--related{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .jslx-grid--related{ grid-template-columns: 1fr; } }

/* Author + Disclaimer */
.jslx-author, .jslx-disclaimer{ margin-top: 16px; }
.jslx-author-card, .jslx-disclaimer-card{
  border: 1px solid rgba(208,162,51,.18);
  border-radius: 18px;
  background: rgba(8,10,12,.55);
  box-shadow: 0 12px 34px rgba(0,0,0,.25);
  backdrop-filter: blur(12px);
  padding: 14px;
}
.jslx-author-card{ display:flex; gap: 12px; align-items:flex-start; }
.jslx-author-avatar{ width: 54px; height: 54px; border-radius: 16px; object-fit: cover; border: 1px solid rgba(255,226,154,.22); }
.jslx-author-top{ display:flex; gap: 10px; flex-wrap:wrap; align-items:center; }
.jslx-author-badge{
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(208,162,51,.24);
  background: rgba(0,0,0,.20);
  color: rgba(255,233,154,.92);
}
.jslx-author-updated{ font-size: 12px; color: var(--js-muted); }
.jslx-author-name{ margin: 10px 0 0; font-size: 16px; }
.jslx-author-role{ margin: 6px 0 0; color: var(--js-muted); }
.jslx-author-bio{ margin-top: 8px; color: rgba(238,234,225,.82); font-size: 14px; }
.jslx-author-links{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 10px; }
.jslx-link{ color: rgba(255,233,154,.92); text-decoration:none; border-bottom: 1px solid rgba(255,233,154,.28); }

/* When using UI Kit authorbox shortcode, ensure spacing matches article flow */
.jslx-author .js-authorbox{ margin: 0; }

.jslx-disclaimer-title{ display:block; margin-bottom: 6px; background: linear-gradient(120deg,#d6b04c,#fff2d2,#ffd86b); -webkit-background-clip:text; background-clip:text; color:transparent; }
.jslx-disclaimer-body{ color: rgba(238,234,225,.82); font-size: 14px; }

/* Ads wrappers */
.jslx-ad{ margin: 14px 0; padding: 12px; border-radius: 16px; border: 1px dashed rgba(208,162,51,.22); background: rgba(0,0,0,.18); overflow:hidden; }
.jslx-ad-sticky{ position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 99999; }
@media (min-width: 900px){ .jslx-ad-sticky{ display:none; } }

/* Quote block style */
.wp-block-quote.is-style-javasense-gold{
  border-left: 0;
  margin: 16px 0;
  padding: 16px 16px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,226,154,.22);
  background: rgba(8,10,12,.55);
  box-shadow: 0 12px 34px rgba(0,0,0,.25);
  position: relative;
  overflow:hidden;
}
.wp-block-quote.is-style-javasense-gold::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(520px 240px at 20% 10%, rgba(255,226,154,.14), transparent 60%),
              radial-gradient(520px 240px at 78% 30%, rgba(208,162,51,.12), transparent 65%);
  pointer-events:none;
}
.wp-block-quote.is-style-javasense-gold p{
  margin:0;
  font-style: italic;
  color: rgba(238,234,225,.88);
}
.wp-block-quote.is-style-javasense-gold cite{
  display:block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--js-muted);
}

/* Group style: glass panel */
.wp-block-group.is-style-javasense-glass{
  border: 1px solid rgba(208,162,51,.18);
  border-radius: 18px;
  background: rgba(8,10,12,.55);
  box-shadow: 0 12px 34px rgba(0,0,0,.25);
  backdrop-filter: blur(12px);
  padding: 16px;
}

/* Utilities */
.jslx-empty{
  border: 1px solid rgba(208,162,51,.14);
  border-radius: 18px;
  background: rgba(10,12,14,.45);
  padding: 22px;
  color: var(--js-muted);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
  .jslx-card:hover, .jslx-btn:hover{ transform:none; }
}

/* FAQ: brighter gold questions + white answers */
.js-faq-qtext{
  background: linear-gradient(120deg, rgba(255,233,154,1), rgba(255,255,250,1), rgba(255,210,90,1)) !important;
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.55), 0 0 30px rgba(255,226,154,.18) !important;
}
.js-faq-a,
.js-faq-a p,
.js-faq-a li{
  color: rgba(255,255,255,.88) !important;
}
\n\n/* === Theme overrides merged from style.css (v0.2.0) === */\n

/* ============================================================
   Footer Social Icons (match JavaSense landing)
   ============================================================ */
.js-footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.js-footer-social{ display:flex; align-items:center; }

.social-login-icons{
  display:flex;
  align-items:center;
  gap:12px;
  -webkit-box-reflect: below 10px linear-gradient(transparent, #00000033);
  padding: 0;
}

.socialcontainer{
  position:relative;
  height:46px;
  width:46px;
  overflow:hidden;
  border-radius:999px;
  cursor:pointer;
  text-decoration:none;
}

.social-icon-1, .social-icon-1-1,
.social-icon-2, .social-icon-2-2,
.social-icon-3, .social-icon-3-3,
.social-icon-4, .social-icon-4-4,
.social-icon-5, .social-icon-5-5{
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  margin:0;
}

.social-icon-1, .social-icon-2, .social-icon-3, .social-icon-4, .social-icon-5{
  transition-duration: .4s;
  transition-timing-function: cubic-bezier(0.46, -0.78, 0.5, 1.56);
  transform: translateY(0);
}

.socialcontainer:hover .social-icon-1,
.socialcontainer:hover .social-icon-2,
.socialcontainer:hover .social-icon-3,
.socialcontainer:hover .social-icon-4,
.socialcontainer:hover .social-icon-5{
  transform: translateY(-52px);
}

.social-icon-1 svg, .social-icon-2 svg, .social-icon-3 svg, .social-icon-4 svg, .social-icon-5 svg{
  opacity:0;
  transition-duration:.5s;
  transition-delay:.2s;
}
.socialcontainer:hover .social-icon-1 svg,
.socialcontainer:hover .social-icon-2 svg,
.socialcontainer:hover .social-icon-3 svg,
.socialcontainer:hover .social-icon-4 svg,
.socialcontainer:hover .social-icon-5 svg{
  opacity:1;
}

/* Brand colors */
.social-icon-1{ background:#000000; } /* X */
.social-icon-1-1{ background:transparent; }

.social-icon-2{ background: linear-gradient(72.44deg, #ff7a00 11.92%, #ff0169 51.56%, #d300c5 85.69%); } /* IG */
.social-icon-2-2{ background:transparent; }

.social-icon-3{ background:#316ff6; } /* FB */
.social-icon-3-3{ background:transparent; }

.social-icon-4{ background:#010101; } /* TikTok */
.social-icon-4-4{ background:transparent; }

.social-icon-5{ background:#ff0000; } /* YouTube */
.social-icon-5-5{ background:transparent; }

@media (max-width: 640px){
  .js-footer-bottom{ justify-content:center; text-align:center; }
  .js-footer-social{ width:100%; justify-content:center; }
  .social-login-icons{ -webkit-box-reflect: below 8px linear-gradient(transparent, #00000022); }
}

/* === TOC: keep in normal flow (no floating / no fixed) === */
#toc_container,
.toc_container,
.toc,
.table-of-contents,
.ez-toc-container,
.ez-toc-widget-container,
.ez-toc-sticky-container,
.ez-toc-widget-sticky-container,
.ez-toc-widget-sticky,
.lwptoc,
.lwptoc_i,
.lwptoc-fixed,
.lwptoc-floating,
.rank-math-toc,
.wp-block-rank-math-toc-block,
.jslx-toc {
  position: static !important;
  float: none !important;
  clear: both !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 18px 0 !important;
}

/* Optional: make TOC match lux panels */
#toc_container,
.ez-toc-container,
.lwptoc,
.rank-math-toc {
  background: linear-gradient(180deg, rgba(14,14,14,.75), rgba(10,10,10,.55));
  border: 1px solid rgba(212,175,55,.18);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}

/* === JavaSense: TOC + Table fixes (auto) === */
:root {
  /* Align with theme's champagne/foil tokens (avoid “flat basic gold”). */
  --js-gold: #D0A233;
  --js-gold-soft: rgba(208,162,51,.22);
  --js-gold-softer: rgba(208,162,51,.14);
  --js-ink: #0b0b0b;
  --js-ink2: #111;
  --js-text: rgba(238,234,225,.90);
  --js-text-dim: rgba(238,234,225,.72);
}

/* ===== TOC (support: EasyTOC, LuckyWP, RankMath, toc_container) ===== */
#ez-toc-container,
#toc_container,
.lwptoc,
.rank-math-toc {
  background: linear-gradient(180deg, rgba(17,17,17,.78), rgba(10,10,10,.62));
  border: 1px solid var(--js-gold-soft);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--js-text);
  padding: 14px 16px;
}

#ez-toc-container .ez-toc-title,
#toc_container .toc_title,
.lwptoc_header,
.rank-math-toc .rank-math-toc-title {
  color: #f1d592;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 10px 0;
}

#ez-toc-container a,
#toc_container a,
.lwptoc a,
.rank-math-toc a {
  color: rgba(241,213,146,.92);
  text-decoration: none;
}

#ez-toc-container a:hover,
#toc_container a:hover,
.lwptoc a:hover,
.rank-math-toc a:hover {
  color: #fff;
  text-shadow: 0 0 10px rgba(212,175,55,.35);
}

#ez-toc-container ul,
#toc_container ul,
.lwptoc_items,
.rank-math-toc ul {
  margin: 0;
  padding-left: 18px;
}

#ez-toc-container li,
#toc_container li,
.lwptoc_items li,
.rank-math-toc li {
  color: var(--js-text-dim);
  line-height: 1.55;
  margin: 6px 0;
}

/* Desktop: make TOC static (no sticky/fixed) + not too top */
@media (min-width: 1024px) {
  #ez-toc-container,
  #toc_container,
  .lwptoc,
  .rank-math-toc {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin-top: 18px !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Mobile: push TOC a bit lower so it doesn't feel glued to the top */
@media (max-width: 768px) {
  #ez-toc-container,
  #toc_container,
  .lwptoc,
  .rank-math-toc {
    margin-top: 14px !important;
  }
}

/* ===== Tables: Luxury treatment (match JavaSense dark glass + gold foil) ===== */
/* Remove extra “card frame” around WP table blocks so content isn't cramped. */
.jslx-content figure.wp-block-table,
.entry-content figure.wp-block-table,
.jslx-content .wp-block-table,
.entry-content .wp-block-table{
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Base table look */
.jslx-content table,
.entry-content table,
.wp-block-table table,
.tablepress table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 18px 0 26px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,226,154,.16);
  background: linear-gradient(180deg, rgba(12,14,16,.62), rgba(10,12,14,.38));
  box-shadow: 0 18px 60px rgba(0,0,0,.38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Subtle inner highlight */
.jslx-content table,
.entry-content table,
.wp-block-table table,
.tablepress table{
  position: relative;
}
.jslx-content table::before,
.entry-content table::before,
.wp-block-table table::before,
.tablepress table::before{
  content:"";
  position:absolute; inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(520px 220px at 14% 0%, rgba(255,226,154,.12), transparent 60%),
    radial-gradient(520px 220px at 86% 0%, rgba(208,162,51,.12), transparent 62%);
  opacity:.9;
}

/* Some editors/plugins don't output <thead>. Make the first row behave like a header. */
.jslx-content table tr:first-child > th,
.jslx-content table tr:first-child > td,
.entry-content table tr:first-child > th,
.entry-content table tr:first-child > td,
.wp-block-table table tr:first-child > th,
.wp-block-table table tr:first-child > td,
.tablepress table tr:first-child > th,
.tablepress table tr:first-child > td {
  background: linear-gradient(120deg, var(--js-gold-foil-a, #FFE99A), var(--js-gold-foil-b, #FFFDF5), var(--js-gold-foil-c, #FFD86B)) !important;
  background-color: var(--js-gold) !important;
  background-image: none !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.45);
}

.jslx-content thead th,
.entry-content thead th,
.wp-block-table thead th,
.tablepress thead th,
.jslx-content th,
.entry-content th,
.wp-block-table th,
.tablepress th {
  background: linear-gradient(120deg, var(--js-gold-foil-a, #FFE99A), var(--js-gold-foil-b, #FFFDF5), var(--js-gold-foil-c, #FFD86B)) !important;
  background-color: var(--js-gold) !important;
  background-image: none !important;
  color: #ffffff !important;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: none;
  position: relative;
  text-shadow: 0 1px 0 rgba(0,0,0,.45);
}

/* Header “shine” overlay (lux feel) */
.jslx-content thead th::after,
.entry-content thead th::after,
.wp-block-table thead th::after,
.tablepress thead th::after,
.jslx-content table tr:first-child > th::after,
.jslx-content table tr:first-child > td::after,
.entry-content table tr:first-child > th::after,
.entry-content table tr:first-child > td::after,
.wp-block-table table tr:first-child > th::after,
.wp-block-table table tr:first-child > td::after,
.tablepress table tr:first-child > th::after,
.tablepress table tr:first-child > td::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.22) 35%, transparent 70%);
  opacity:.35;
}

.jslx-content td,
.entry-content td,
.wp-block-table td,
.tablepress td {
  color: var(--js-text) !important;
  background: rgba(0,0,0,.18);
}

/* Ensure header cells always win against inline styles from editors/plugins */
.jslx-content thead th,
.entry-content thead th,
.wp-block-table thead th,
.tablepress thead th,
.jslx-content th,
.entry-content th,
.wp-block-table th,
.tablepress th {
  background: linear-gradient(120deg, var(--js-gold-foil-a, #FFE99A), var(--js-gold-foil-b, #FFFDF5), var(--js-gold-foil-c, #FFD86B)) !important;
  background-color: var(--js-gold) !important;
  background-image: none !important;
  color: #ffffff !important;
}

/* Prev/Next post cards */
.jslx-grid--navposts{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px){ .jslx-grid--navposts{ grid-template-columns: 1fr; } }

.jslx-card--nav .jslx-chip{ border-color: rgba(255,226,154,.22); background: rgba(0,0,0,.18); }

.jslx-content th,
.jslx-content td,
.entry-content th,
.entry-content td,
.wp-block-table th,
.wp-block-table td,
.tablepress th,
.tablepress td {
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,226,154,.10);
  border-right: 1px solid rgba(255,226,154,.08);
  vertical-align: top;
}

.jslx-content tr > *:last-child,
.entry-content tr > *:last-child,
.wp-block-table tr > *:last-child,
.tablepress tr > *:last-child{
  border-right: 0;
}

.jslx-content tbody tr:nth-child(even) td,
.entry-content tbody tr:nth-child(even) td,
.wp-block-table tbody tr:nth-child(even) td,
.tablepress tbody tr:nth-child(even) td {
  background: rgba(0,0,0,.12);
}

/* ===== Mobile table: don't squeeze columns; remove grid lines ===== */
.jslx-content .wp-block-table,
.entry-content .wp-block-table,
.jslx-content .tablepress,
.entry-content .tablepress {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px){
  /* Make ANY table horizontally scrollable (even classic editor tables without wrapper) */
  .jslx-content table,
  .entry-content table{
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Remove inner grid lines so table doesn't feel “tight” */
  .jslx-content th,
  .jslx-content td,
  .entry-content th,
  .entry-content td,
  .wp-block-table th,
  .wp-block-table td,
  .tablepress th,
  .tablepress td{
    border-right: 0 !important;
    border-bottom: 0 !important;
  }

  /* Remove outer frame on mobile to widen space */
  .jslx-content table,
  .entry-content table,
  .wp-block-table table,
  .tablepress table{
    border: 0 !important;
    border-radius: 16px;
  }
}

/* Mobile: remove article “card outline” so content isn't cramped */
@media (max-width: 768px){
  .jslx-article-body{
    border: 0 !important;
    box-shadow: none !important;
    padding: 12px 10px !important;
    background: rgba(10,12,14,.38);
  }
}

/* ===== TOC title bar: avoid “white strip” in some plugins ===== */
.ez-toc-title-container,
.lwptoc_header,
.rank-math-toc .rank-math-toc-title{
  background: transparent !important;
}