/* ============================================================================
   sbn-core / inc/legacy-compat.css
   ----------------------------------------------------------------------------
   Dark-theme skin for LEGACY PLUGIN OUTPUT that still expands inside
   the_content() on the ~255 old shortcode pages (products, courses, membership,
   sales funnels). The 2013 theme CSS that used to style this markup is gone;
   this file re-dresses the plugins' real emitted selectors in the new tokens.

   Plugins covered:
     - WP eStore            (wp-cart-for-digital-products)  buy/cart/product
     - wp-eMember           login + protected-content + dashboard
     - wp-affiliate-platform signup forms + affiliate links
     - mediaelement.js / rtmpplayer2 / s3-media-maestro   video players
     - generic 2013-era inline-styled markup (defensive)

   RULES OF THE ROAD
     - EVERYTHING is scoped under .article-prose so it can never leak onto the
       homepage (front-page.php has no .article-prose) or clash with blog cards.
     - Tokens come from style.css :root (--acc, --ink, --surface, --off ...).
       No new hardcoded hexes where a var already exists.
     - Specificity (the .article-prose prefix) does the overriding, not
       !important. A short list of defensive resets that must beat garish 2013
       inline styles are the only !important uses, and they are commented.
     - style.css already styles .article-prose table / input / button / form.
       This file EXTENDS that (plugin-specific classes) rather than restating it.
   ============================================================================ */

/* ------------------------------------------------------------------ *
 * 0. Shared legacy tokens / spacing rhythm
 * ------------------------------------------------------------------ */
.article-prose .eStore-button-form,
.article-prose .eStore_buy_now_button,
.article-prose .wp_cart_button_wrapper,
.article-prose .wp_emember_login_form,
.article-prose .wp_emember_mailSendForm,
.article-prose .wp_aff_signup_form,
.article-prose .mejs-container,
.article-prose .wp-video{
  margin:1.4rem 0;
}

/* ================================================================== *
 * 1. WP eStore  (wp-cart-for-digital-products)
 * ================================================================== */

/* -- Add-to-cart / buy-now button forms ---------------------------- */
.article-prose .eStore-button-form,
.article-prose .eStore_buy_now_button_form,
.article-prose form.wp_cart_button_form{
  display:inline-block;
  margin:.4rem .6rem .4rem 0;
  vertical-align:middle;
}

/* The actual button — image buttons, submit buttons and <a> buttons all
   become the theme's blue pill. */
.article-prose .eStore-button-form input[type=submit],
.article-prose .eStore-button-form button,
.article-prose input.eStore_buy_now_button,
.article-prose input.eStore_add_to_cart_button,
.article-prose a.eStore_buy_now_button,
.article-prose a.eStore_add_to_cart_button,
.article-prose .wp_cart_button_wrapper input[type=submit],
.article-prose .wp-cart-button{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:var(--acc);
  color:var(--ink);
  border:none;
  border-radius:100px;
  padding:.72rem 1.5rem;
  font-family:var(--fb);
  font-size:.92rem;
  font-weight:800;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 6px 18px var(--acc-glow);
  transition:all .25s var(--ease);
}
.article-prose .eStore-button-form input[type=submit]:hover,
.article-prose .eStore-button-form button:hover,
.article-prose input.eStore_buy_now_button:hover,
.article-prose input.eStore_add_to_cart_button:hover,
.article-prose a.eStore_buy_now_button:hover,
.article-prose a.eStore_add_to_cart_button:hover,
.article-prose .wp_cart_button_wrapper input[type=submit]:hover,
.article-prose .wp-cart-button:hover{
  background:var(--acc-bright);
  transform:translateY(-2px);
  box-shadow:0 10px 28px var(--acc-glow);
}

/* eStore sometimes ships an <input type="image"> button — leave it as an image
   but frame it so it reads as tappable. */
.article-prose .eStore-button-form input[type=image]{
  border-radius:10px;
  transition:transform .2s var(--ease),box-shadow .2s;
  cursor:pointer;
}
.article-prose .eStore-button-form input[type=image]:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,.5);
}

/* -- Product blocks + price --------------------------------------- */
.article-prose .eStore-product,
.article-prose .eStore_product,
.article-prose .eStore_product_display,
.article-prose .eStore_product_details{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:1.4rem;
  margin:0 0 1.4rem;
}
.article-prose .eStore_product_image,
.article-prose .eStore-product img,
.article-prose .eStore_product_details img{
  border-radius:12px;
  margin-bottom:1rem;
}
.article-prose .eStore_product_name,
.article-prose .eStore_product_title{
  font-family:var(--fd);
  font-size:1.15rem;
  font-weight:700;
  color:var(--off);
  line-height:1.3;
  margin-bottom:.4rem;
}
.article-prose .eStore_product_price,
.article-prose .eStore-price,
.article-prose .eStore_price{
  font-family:var(--fd);
  font-size:1.4rem;
  font-weight:700;
  color:var(--acc);
  letter-spacing:-.01em;
  margin:.3rem 0 .8rem;
}

/* Grid of products, if eStore lays them out in a list */
.article-prose .eStore_product_grid,
.article-prose ul.eStore_product_list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1.2rem;
  list-style:none;
  margin:1.4rem 0;
  padding:0;
}
.article-prose ul.eStore_product_list li{
  margin:0;
  padding:0;
  list-style:none;
}
.article-prose ul.eStore_product_list li::before,
.article-prose ul.eStore_product_list li::marker{content:none}

/* -- Quantity input ------------------------------------------------ */
.article-prose .eStore_quantity_input,
.article-prose input.eStore_quantity,
.article-prose .eStore-button-form input[type=text][name*="quantity"],
.article-prose .eStore-button-form input[type=number]{
  width:64px;
  text-align:center;
  padding:.5rem;
  margin:0 .4rem;
}

/* -- Cart tables & the "fancy" cart -------------------------------- */
.article-prose .eStore_cart_fancy,
.article-prose .eStore_fancy_cart_container,
.article-prose #eStore_fancy_cart,
.article-prose .wp_cart_display{
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:14px;
  padding:1.2rem 1.3rem;
  margin:1.6rem 0;
  overflow-x:auto;
}
.article-prose .eStore_cart_fancy table,
.article-prose .eStore_fancy1_table,
.article-prose .eStore_fancy2_table,
.article-prose .eStore_fancy3_table,
.article-prose .wp_cart_display table{
  width:100%;
  border-collapse:collapse;
  background:transparent;
  border-radius:0;
  margin:0;
}
.article-prose .eStore_cart_fancy th,
.article-prose .eStore_cart_fancy td,
.article-prose .wp_cart_display th,
.article-prose .wp_cart_display td{
  border:none;
  border-bottom:1px solid var(--line);
  padding:.7rem .6rem;
  color:var(--mut);
  background:transparent;
}
.article-prose .eStore_cart_fancy th,
.article-prose .wp_cart_display th{
  color:var(--off);
  font-family:var(--fd);
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.article-prose .eStore_cart_total_price,
.article-prose .eStore_cart_subtotal,
.article-prose .wp_cart_display .total_price{
  color:var(--acc);
  font-weight:800;
}
/* eStore "empty cart" / "checkout" secondary links inside the cart box */
.article-prose .eStore_cart_fancy a,
.article-prose .wp_cart_display a{
  color:var(--acc);
  font-weight:600;
}

/* Widget-mode mini cart (sidebar shortcode dropped in content) */
.article-prose .eStore-fancy1-widget-cart,
.article-prose .eStore_widget_cart{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:12px;
  padding:1rem;
}

/* ================================================================== *
 * 2. wp-eMember  (membership: login / protected content / dashboard)
 * ================================================================== */

/* -- Login + forgot-password forms as callout cards ---------------- */
.article-prose .wp_emember_login_form,
.article-prose #wp_emember_login_form,
.article-prose .wp_emember_mailSendForm,
.article-prose #emember_pw_reset_form,
.article-prose form[name="emember_login_form"]{
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:16px;
  padding:1.8rem 1.6rem;
  max-width:440px;
  position:relative;
  overflow:hidden;
}
.article-prose .wp_emember_login_form::before,
.article-prose .wp_emember_mailSendForm::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--acc),transparent);
}

/* eMember often lays its login out as a small table — neutralise its borders */
.article-prose .wp_emember_login_form table,
.article-prose .wp_emember_mailSendForm table,
.article-prose #wp_emember_widget_body table{
  background:transparent;
  border:none;
  margin:0;
  width:100%;
}
.article-prose .wp_emember_login_form td,
.article-prose .wp_emember_mailSendForm td,
.article-prose #wp_emember_widget_body td{
  border:none;
  padding:.4rem .3rem;
  background:transparent;
}

.article-prose .wp_emember_login_form label,
.article-prose #wp_emember_widget_body label,
.article-prose .wp_emember_mailSendForm label{
  display:block;
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--mut);
  margin-bottom:.35rem;
}
.article-prose .wp_emember_login_form input[type=text],
.article-prose .wp_emember_login_form input[type=password],
.article-prose .wp_emember_mailSendForm input[type=text],
.article-prose .wp_emember_mailSendForm input[type=email],
.article-prose input.emember_login_field,
.article-prose input#emember_login_id,
.article-prose input#emember_login_pass{
  width:100%;
  box-sizing:border-box;
}
.article-prose .wp_emember_login_form input[type=submit],
.article-prose .wp_emember_login_button,
.article-prose .wp_emember_mailSendForm input[type=submit],
.article-prose input[name="emember_login_button"]{
  width:100%;
  background:var(--acc);
  color:var(--ink);
  border:none;
  border-radius:10px;
  padding:.9rem 1rem;
  font-family:var(--fb);
  font-size:.95rem;
  font-weight:800;
  cursor:pointer;
  margin-top:.4rem;
  transition:all .25s var(--ease);
}
.article-prose .wp_emember_login_form input[type=submit]:hover,
.article-prose .wp_emember_login_button:hover,
.article-prose .wp_emember_mailSendForm input[type=submit]:hover{
  background:var(--acc-bright);
  transform:translateY(-1px);
  box-shadow:0 8px 22px var(--acc-glow);
}
.article-prose .wp_emember_login_form input[type=checkbox]{accent-color:var(--acc)}
.article-prose .wp_emember_login_form a,
.article-prose #wp_emember_widget_body a{
  color:var(--acc);
  font-weight:600;
}

/* -- "Please Login to view this Content" & other protected notices -
   eMember prints its not-permitted message inside the content. It ships no
   single stable class across versions, so we cover the documented ones and
   the generic message wrappers, and turn them into a callout card. */
.article-prose .emember_msg_dic,
.article-prose .emember_msg,
.article-prose .wp_emember_login_message,
.article-prose .swpm-login-widget-form-message,
.article-prose .emember_protected_msg,
.article-prose p.wp_emember_protected_msg{
  background:rgba(78,168,255,.08);
  border:1px solid rgba(78,168,255,.3);
  border-radius:12px;
  padding:1.1rem 1.3rem;
  color:var(--acc-bright);
  font-weight:600;
  margin:1.4rem 0;
}
.article-prose .emember_msg_dic a,
.article-prose .emember_msg a,
.article-prose .wp_emember_login_message a{
  color:var(--acc);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* -- Membership levels / payment-button grid ----------------------- */
.article-prose .emember_membership_levels,
.article-prose .wp_emember_membership_level,
.article-prose .emember_payment_buttons{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.2rem;
  margin:1.6rem 0;
  padding:0;
  list-style:none;
}
.article-prose .emember_membership_level_item,
.article-prose .wp_emember_membership_level{
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:16px;
  padding:1.6rem 1.4rem;
}

/* -- Member dashboard / account tables ----------------------------- */
.article-prose .emember_dashboard,
.article-prose .wp_emember_member_info,
.article-prose #emember_profile_form,
.article-prose .emember_profile{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:1.6rem;
  margin:1.4rem 0;
}
.article-prose .emember_dashboard table th{
  font-family:var(--fd);
  color:var(--off);
}

/* ================================================================== *
 * 3. wp-affiliate-platform
 * ================================================================== */
.article-prose .wp_aff_signup_form,
.article-prose #wp_aff_signup_form,
.article-prose .wp_affiliate_login_form,
.article-prose .wp_aff_affiliate_area{
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:16px;
  padding:1.8rem 1.6rem;
  margin:1.4rem 0;
}
.article-prose .wp_aff_signup_form label,
.article-prose .wp_affiliate_login_form label{
  display:block;
  font-size:.8rem;
  font-weight:700;
  color:var(--mut);
  margin-bottom:.35rem;
}
.article-prose .wp_aff_signup_form input[type=text],
.article-prose .wp_aff_signup_form input[type=email],
.article-prose .wp_aff_signup_form input[type=password]{
  width:100%;
  box-sizing:border-box;
}
.article-prose .wp_aff_signup_form input[type=submit],
.article-prose .wp_affiliate_login_form input[type=submit]{
  background:var(--acc);
  color:var(--ink);
  border:none;
  border-radius:10px;
  padding:.8rem 1.5rem;
  font-weight:800;
  cursor:pointer;
  transition:all .25s var(--ease);
}
.article-prose .wp_aff_signup_form input[type=submit]:hover{
  background:var(--acc-bright);
  transform:translateY(-1px);
}
/* affiliate banner/link tables */
.article-prose .wp_aff_banner_table td,
.article-prose .wp_aff_link_table td{
  border-color:var(--line);
  word-break:break-word;
}

/* ================================================================== *
 * 4. Video players — mediaelement.js / rtmpplayer2 / s3-media-maestro
 * ================================================================== */

/* Responsive 16:9 frame around whatever wrapper the plugin emits. */
.article-prose .mejs-container,
.article-prose .mejs__container,
.article-prose .wp-video,
.article-prose .wp-video-shortcode,
.article-prose .rtmp-player,
.article-prose .s3mm-video-container,
.article-prose .s3mm-player{
  width:100% !important;      /* plugins hardcode inline pixel widths — override */
  max-width:900px;
  margin:1.6rem auto;
  background:#000;
  border:1px solid var(--line-2);
  border-radius:14px;
  overflow:hidden;
}

/* Give bare <video>/<audio> the same frame. */
.article-prose video,
.article-prose .mejs-mediaelement video,
.article-prose .wp-video video{
  display:block;
  width:100%;
  height:auto;
  border-radius:0;
  margin:0;
  background:#000;
}
.article-prose audio,
.article-prose .mejs-container.mejs-audio{
  width:100% !important;
  max-width:560px;
}

/* Dark, rounded control bar. Plugin ships its own light control CSS; the
   .article-prose prefix out-specifies it without !important. */
.article-prose .mejs-controls,
.article-prose .mejs__controls{
  background:linear-gradient(180deg,rgba(13,13,18,.2),rgba(13,13,18,.92));
  border-top:1px solid var(--line);
}
.article-prose .mejs-controls .mejs-time-rail .mejs-time-total,
.article-prose .mejs-controls .mejs-time-rail .mejs-time-loaded{
  background:var(--surface-3);
}
.article-prose .mejs-controls .mejs-time-rail .mejs-time-current,
.article-prose .mejs-controls .mejs-horizontal-volume-current{
  background:var(--acc);
}
.article-prose .mejs-controls .mejs-time,
.article-prose .mejs-controls .mejs-currenttime,
.article-prose .mejs-controls .mejs-duration{
  color:var(--off);
}
.article-prose .mejs-overlay-button{filter:drop-shadow(0 4px 14px rgba(0,0,0,.6))}
.article-prose .mejs-poster{background-size:cover}

/* iframe embeds (YouTube in funnel pages) already handled by style.css, but
   keep a legacy responsive fallback for raw un-wrapped iframes. */
.article-prose .video-container,
.article-prose .fluid-width-video-wrapper{
  position:relative;
  width:100%;
  max-width:900px;
  margin:1.6rem auto;
  padding-top:56.25%;
  border-radius:14px;
  overflow:hidden;
  background:#000;
}
.article-prose .video-container iframe,
.article-prose .fluid-width-video-wrapper iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  margin:0;
}

/* ================================================================== *
 * 5. Generic 2013-era markup (defensive, additive)
 * ================================================================== */

/* Old alignment classes from the classic editor. */
.article-prose .alignleft{float:left;margin:.3rem 1.4rem 1rem 0;max-width:50%}
.article-prose .alignright{float:right;margin:.3rem 0 1rem 1.4rem;max-width:50%}
.article-prose .aligncenter{display:block;margin-left:auto;margin-right:auto}
.article-prose .alignnone{max-width:100%}
.article-prose .wp-caption{
  max-width:100%;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  padding:.6rem;
}
.article-prose .wp-caption img{margin:0 0 .4rem;border-radius:8px}
.article-prose .wp-caption-text,
.article-prose figcaption{
  font-size:.8rem;
  color:var(--mut-2);
  text-align:center;
  margin-top:.3rem;
}

/* Any image/object the funnel pages drop in stays inside the column & rounded. */
.article-prose object,
.article-prose embed{max-width:100%;border-radius:12px}

/* Old <hr> separators. */
.article-prose hr{
  border:none;
  height:1px;
  background:var(--line-2);
  margin:2.4rem 0;
}

/* Legacy centered "buy" paragraphs frequently wrap a button in <center>. */
.article-prose center{display:block;text-align:center;margin:1.4rem 0}

/* Old inline-font-tag text. */
.article-prose font{font-family:inherit !important;color:inherit !important} /* kill 2013 <font color> */

/* Defensive reset for garish 2013 inline background/color on wrapper divs.
   We DO NOT touch layout (width/margin/padding/float) — only neutralise
   hard-coded light backgrounds & near-black text that would be invisible on
   the dark theme. Targets the common inline-style signatures. */
.article-prose div[style*="background-color:#fff" i],
.article-prose div[style*="background-color: #fff" i],
.article-prose div[style*="background:#fff" i],
.article-prose div[style*="background: #fff" i],
.article-prose div[style*="background-color:#ffffff" i],
.article-prose div[style*="background-color: #ffffff" i]{
  background:var(--surface) !important;         /* white boxes → dark surface */
  border:1px solid var(--line);
  border-radius:12px;
}
.article-prose span[style*="color:#000" i],
.article-prose span[style*="color: #000" i],
.article-prose p[style*="color:#000" i],
.article-prose p[style*="color: #000" i],
.article-prose font[color]{
  color:var(--off) !important;                  /* black-on-dark text → legible */
}

/* Legacy tables that aren't from a known plugin still inherit the themed
   .article-prose table rules in style.css; nothing more needed here. */

/* ================================================================== *
 * 6. Neutralizer output (see inc/legacy-fix.php)
 * ================================================================== */

/* Styled note that replaces the broken eMember payment placeholder and the
   inactive-WooCommerce product-grid shortcodes. */
.article-prose .legacy-note{
  display:block;
  background:linear-gradient(150deg,var(--surface) 0%,var(--surface-2) 100%);
  border:1px solid var(--line-2);
  border-radius:16px;
  padding:1.6rem 1.7rem;
  margin:1.6rem 0;
  position:relative;
  overflow:hidden;
}
.article-prose .legacy-note::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--acc),transparent);
}
.article-prose .legacy-note-title{
  font-family:var(--fd);
  font-size:1.1rem;
  font-weight:700;
  color:var(--off);
  margin:0 0 .35rem;
  letter-spacing:-.005em;
}
.article-prose .legacy-note-text{
  font-size:.92rem;
  color:var(--mut);
  line-height:1.65;
  margin:0 0 1rem;
}
.article-prose .legacy-note-text:last-child{margin-bottom:0}
.article-prose .legacy-note-btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background:var(--acc);
  color:var(--ink);
  font-size:.86rem;
  font-weight:800;
  text-decoration:none;
  padding:.7rem 1.4rem;
  border-radius:100px;
  transition:all .25s var(--ease);
}
.article-prose .legacy-note-btn:hover{
  background:var(--acc-bright);
  transform:translateY(-2px);
  box-shadow:0 8px 22px var(--acc-glow);
  color:var(--ink);
  text-decoration:none;
}

/* ================================================================== *
 * 7. Responsive
 * ================================================================== */
@media (max-width:720px){
  .article-prose .eStore-button-form input[type=submit],
  .article-prose .eStore-button-form button,
  .article-prose a.eStore_buy_now_button,
  .article-prose a.eStore_add_to_cart_button,
  .article-prose .wp-cart-button{
    width:100%;
    justify-content:center;
  }
  .article-prose .eStore-button-form{display:block;margin-right:0}
  .article-prose .wp_emember_login_form,
  .article-prose .wp_emember_mailSendForm,
  .article-prose .wp_aff_signup_form{max-width:100%;padding:1.4rem 1.2rem}
  .article-prose .eStore_product_grid,
  .article-prose .emember_membership_levels{grid-template-columns:1fr}
  .article-prose .alignleft,
  .article-prose .alignright{float:none;display:block;margin:1rem auto;max-width:100%}
}