/* Summitsoft v2 skin for OceanWP (LDS + MLS) — brand consistency: black+gold, Archivo/Figtree */
:root{--ss-ink:#141310;--ss-ink2:#1e1b16;--ss-gold:#f5a300;--ss-gold-d:#d98e00;--ss-paper:#faf8f4;--ss-line:#e7e2d8;--ss-mut:#8a8276;}
body,.oceanwp-default,#site-navigation .dropdown-menu a{font-family:"Figtree",system-ui,-apple-system,sans-serif;}
h1,h2,h3,h4,h5,.title,.entry-title,.page-header-title{font-family:"Archivo","Figtree",sans-serif !important;font-weight:800 !important;letter-spacing:-.01em;}
/* header dark */
#site-header,#site-header.fixed-scroll,.oceanwp-top-bar,#site-header-wrap{background:var(--ss-ink) !important;border:0 !important;}
#site-header .oceanwp-mobile-menu-icon a,#site-navigation-wrap .dropdown-menu>li>a{color:#f3efe8 !important;font-family:"Archivo",sans-serif;font-weight:600;}
#site-navigation-wrap .dropdown-menu>li>a:hover,#site-navigation-wrap .dropdown-menu>li.current-menu-item>a{color:var(--ss-gold) !important;}
#site-navigation-wrap .dropdown-menu ul{background:var(--ss-ink2) !important;}
.top-bar-content,#top-bar-content a{color:#cfc9bd !important;}
/* buttons -> gold */
.theme-button,button,input[type=submit],input[type=button],.button,.wp-block-button__link,.single_add_to_cart_button,.mepr-checkout-button,.woocommerce a.button,.woocommerce button.button{background:var(--ss-gold) !important;background-image:none !important;color:#1a1710 !important;border:0 !important;border-radius:9px !important;font-family:"Archivo",sans-serif !important;font-weight:700 !important;text-transform:none !important;box-shadow:none !important;}
.theme-button:hover,button:hover,.button:hover,input[type=submit]:hover,.single_add_to_cart_button:hover,.mepr-checkout-button:hover{background:var(--ss-gold-d) !important;color:#1a1710 !important;}
a{color:var(--ss-gold-d);}
a:hover{color:var(--ss-gold);}
/* footer dark */
#footer,#footer-widgets,.footer-widgets{background:var(--ss-ink) !important;color:#c9c3b7 !important;}
#footer-widgets .widget-title,#footer .widget-title{color:#fff !important;font-family:"Archivo",sans-serif;}
#footer a,#footer-widgets a{color:#c9c3b7 !important;}
#footer a:hover{color:var(--ss-gold) !important;}
#footer-bottom{background:#0f0d0a !important;color:#8a8276 !important;border:0 !important;}
/* accents */
.page-header,.single .entry-header{border-bottom:2px solid var(--ss-gold);}
::selection{background:var(--ss-gold);color:#1a1710;}
/* LDS/MLS custom hero buttons -> v2 */
.buy-button-a,a.buy-button-a{background:var(--ss-gold) !important;background-image:none !important;color:#1a1710 !important;border-radius:9px !important;font-family:"Archivo",sans-serif !important;font-weight:700 !important;border:0 !important;}
.buy-button-a:hover{background:var(--ss-gold-d) !important;color:#1a1710 !important;}
.black-button-a,a.black-button-a{background:var(--ss-ink) !important;color:#fff !important;border-radius:9px !important;font-family:"Archivo",sans-serif !important;font-weight:700 !important;border:1px solid rgba(255,255,255,.15) !important;}
/* ===== SSX-OCEAN-FORMS: stop MemberPress/WPForms stretching + consistent styling ===== */
#mepr_loginform,.mepr-login-form,.mp_wrapper .mepr-form,form.mepr-signup-form,.mepr-signup-form,
.woocommerce-form-login,.wpforms-form,.mepr-account-form{max-width:460px;margin:12px 0 26px;}
#mepr_loginform input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
.mepr-signup-form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
.mp_wrapper input[type=text],.mp_wrapper input[type=email],.mp_wrapper input[type=password],
.mepr-account-form input[type=text],.mepr-account-form input[type=email],.mepr-account-form input[type=password],
.wpforms-form input[type=text],.wpforms-form input[type=email],.wpforms-form input[type=tel],
.wpforms-form input[type=url],.wpforms-form textarea,.wpforms-form select{
  width:100%!important;max-width:100%!important;box-sizing:border-box;padding:11px 14px;
  border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#18181b;font-size:15px;line-height:1.4;
}
#mepr_loginform input:focus,.mepr-signup-form input:focus,.mp_wrapper input:focus,.wpforms-form input:focus,.wpforms-form textarea:focus{
  outline:none;border-color:#f5a300;box-shadow:0 0 0 3px rgba(245,163,0,.2);
}
#mepr_loginform label,.mepr-signup-form label,.mp_wrapper label{font-weight:600;display:block;margin:0 0 4px;}

/* ===== SSX-OCEAN-CONTENT: consistent readable typography on content pages ===== */
.content-area .entry-content{font-size:16px;line-height:1.7;}
.content-area .entry-content p{margin:0 0 1em;}
.content-area .entry-content h1,.content-area .entry-content h2,.content-area .entry-content h3,.content-area .entry-content h4{
  font-family:"Archivo","Figtree",Arial,sans-serif;font-weight:800;line-height:1.2;
}
.content-area .entry-content h2{margin:1.15em 0 .5em;}
.content-area .entry-content h3{margin:1em 0 .4em;}
.content-area .entry-content ul,.content-area .entry-content ol{margin:0 0 1em 1.4em;}
/* ===== SSX-OCEAN-LAYOUT: page gutters + site width =====
   OceanWP ships .container{max-width:100%} and expects the customizer's site-width
   value to override it. That setting never migrated, so every page rendered
   edge-to-edge with zero gutter — the page title, body copy and form all sat flush
   against the left viewport edge and the nav was jammed into the right edge.
   Restore a centered, padded column. Scoped so the home page and the logo designer
   (both page-template-landing, full-bleed by design) keep their full width. */
#site-header .container,
.page-header .container,
#footer .container,
#footer-widgets .container,
#footer-bottom .container{
  max-width:1280px;margin-left:auto;margin-right:auto;
  padding-left:30px;padding-right:30px;box-sizing:border-box;
}
body.page-template-default #content-wrap.container{
  max-width:1280px;margin-left:auto;margin-right:auto;
  padding-left:30px;padding-right:30px;box-sizing:border-box;
}
@media only screen and (max-width:782px){
  #site-header .container,.page-header .container,#footer .container,
  #footer-widgets .container,#footer-bottom .container,
  body.page-template-default #content-wrap.container{padding-left:18px;padding-right:18px;}
}
/* header logo: keep it sane now that one is set */
#site-logo #site-logo-inner img,#site-logo img{max-height:46px;width:auto;}
/* page title band: a little breathing room */
.page-header{padding-top:26px;padding-bottom:26px;}
.page-header .page-header-title{margin:0;}
/* ===== SSX-OCEAN-LANDING-TEXT =====
   Several real content pages (MLS /support/ FAQ, /logo-examples/, LDS equivalents)
   use the full-bleed landing template, so plain paragraphs ran ~1810px per line.
   Constrain only the DIRECT text children of .entry-content to a readable measure,
   leaving nested designed sections (hero bars, pricing blocks, galleries) full-bleed. */
body.page-template-landing .entry-content > p,
body.page-template-landing .entry-content > h1,
body.page-template-landing .entry-content > h2,
body.page-template-landing .entry-content > h3,
body.page-template-landing .entry-content > h4,
body.page-template-landing .entry-content > h5,
body.page-template-landing .entry-content > ul,
body.page-template-landing .entry-content > ol,
body.page-template-landing .entry-content > blockquote,
body.page-template-landing .entry-content > table{
  max-width:880px;margin-left:auto;margin-right:auto;
  padding-left:20px;padding-right:20px;box-sizing:border-box;
}
/* ===== SSX-OCEAN-LANDING-BOX =====
   On landing-template pages the wrapper is #content-wrap.container-custom (not
   .container), so it escaped the gutter fix above and ran the full 1850px — the
   MLS /support/ FAQ was rendering ~1810px paragraph lines.
   Box these pages, but keep the HOME page and the logo DESIGNER (LDS id 6,
   MLS id 10) full-bleed, since their layouts are designed edge-to-edge. */
body.page-template-landing:not(.home):not(.page-id-6):not(.page-id-10) #content-wrap.container-custom{
  max-width:1280px;margin-left:auto;margin-right:auto;
  padding-left:30px;padding-right:30px;box-sizing:border-box;
}
/* Readable measure for body copy on those pages. max-width only (no auto margins)
   so designed narrow columns, which are already under this width, never shift. */
body.page-template-landing:not(.home):not(.page-id-6):not(.page-id-10) .entry-content p,
body.page-template-landing:not(.home):not(.page-id-6):not(.page-id-10) .entry-content h2,
body.page-template-landing:not(.home):not(.page-id-6):not(.page-id-10) .entry-content h3,
body.page-template-landing:not(.home):not(.page-id-6):not(.page-id-10) .entry-content h4,
body.page-template-landing:not(.home):not(.page-id-6):not(.page-id-10) .entry-content ul,
body.page-template-landing:not(.home):not(.page-id-6):not(.page-id-10) .entry-content ol{
  max-width:900px;
}
@media only screen and (max-width:782px){
  body.page-template-landing:not(.home) #content-wrap.container-custom{padding-left:18px;padding-right:18px;}
}
/* LDS uses #content-wrap.container on landing pages where MLS uses .container-custom,
   so match the wrapper regardless of class (home + designer still excluded). */
body.page-template-landing:not(.home):not(.page-id-6):not(.page-id-10) #content-wrap{
  max-width:1280px;margin-left:auto;margin-right:auto;
  padding-left:30px;padding-right:30px;box-sizing:border-box;
}
@media only screen and (max-width:782px){
  body.page-template-landing:not(.home):not(.page-id-6):not(.page-id-10) #content-wrap{padding-left:18px;padding-right:18px;}
}
/* ===== SSX-OCEAN-NAV-FOOTER: dropdown + footer polish ===== */
/* Header dropdown panel (OceanWP renders sub-menus natively). */
#site-navigation-wrap .dropdown-menu ul.sub-menu{
  background:#15130f !important;border:1px solid rgba(255,255,255,.10);
  border-radius:10px;box-shadow:0 18px 42px rgba(0,0,0,.45);
  padding:8px 0;min-width:232px;
}
#site-navigation-wrap .dropdown-menu ul.sub-menu li a{
  color:#e8e3d9 !important;font-family:"Figtree",sans-serif !important;font-weight:500 !important;
  font-size:14px;line-height:1.35;padding:10px 18px !important;border:0 !important;
}
#site-navigation-wrap .dropdown-menu ul.sub-menu li a:hover{
  background:rgba(245,163,0,.14);color:var(--ss-gold) !important;
}
/* caret on parents */
#site-navigation-wrap .dropdown-menu > li.menu-item-has-children > a > span:after{
  content:"";display:inline-block;margin-left:7px;vertical-align:middle;opacity:.65;
  border:4px solid transparent;border-top-color:currentColor;
}

/* Footer: was a single bare copyright line. Give the footer menu real presence. */
#footer-bottom{padding:22px 0 !important;}
#footer-bottom .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;}
#footer-bottom #copyright{color:#8a8276 !important;font-size:13px;margin:0;}
#footer-bottom #footer-bottom-menu,
#footer-bottom .footer-bottom-menu{margin:0;}
#footer-bottom ul{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;padding:0;list-style:none;justify-content:flex-end;}
#footer-bottom ul li{margin:0;padding:0;border:0;}
#footer-bottom ul li a{
  color:#c9c3b7 !important;font-family:"Figtree",sans-serif;font-size:13.5px;font-weight:500;
  padding:2px 0 !important;border:0 !important;
}
#footer-bottom ul li a:hover{color:var(--ss-gold) !important;}
@media only screen and (max-width:782px){
  #footer-bottom .container{flex-direction:column;text-align:center;}
  #footer-bottom ul{justify-content:center;}
}
/* SSX-OCEAN-GUTTER-ALL: the earlier rule only covered page-template-default, so
   other singular views (e.g. the MemberPress signup pages, which are
   single-memberpressproduct) still ran flush to the viewport edge.
   Box every view EXCEPT the full-bleed home and designer. */
body:not(.page-template-landing) #content-wrap,
body.page-template-landing:not(.home):not(.page-id-6):not(.page-id-10) #content-wrap{
  max-width:1280px;margin-left:auto;margin-right:auto;
  padding-left:30px;padding-right:30px;box-sizing:border-box;
}
@media only screen and (max-width:782px){
  body:not(.page-template-landing) #content-wrap{padding-left:18px;padding-right:18px;}
}
/* ===== SSX-OCEAN-BRAND-FIX: bring the landing-page utility classes onto the v2 palette.
   The child theme shipped a harsh pure yellow (#ffea00) for headings, an off-brand
   #202020 for section bands, and justified body copy (which creates rivers). ===== */
.font-color-yellow{color:#f5a300 !important;}
.background-color-dark-gray{background-color:#141310 !important;}
.background-color-black{background-color:#0f0d0a !important;}
[class*="text-align-justify"],[class*="text-align-justify"] p,[class*="text-align-justify"] li{
  text-align:left !important;
}
/* keep body copy on the brand face at a readable measure inside those bands */
.grid-display-2-in-row p,.display-in-column p{line-height:1.7;}
/* ===== SSX-OCEAN-CHROME-BLEND: match summitsoft's header/footer treatment.
   Flat ink read as a hard black slab; use a warm gradient, lighter at the top,
   resolving darker at the bottom so it blends into the page. ===== */
#site-header,#site-header.fixed-scroll,#site-header-wrap,.oceanwp-top-bar{
  background:linear-gradient(180deg,#332f28 0%,#241f1a 55%,#1a1713 100%) !important;
  border:0 !important;border-bottom:1px solid rgba(245,163,0,.20) !important;
}
#footer,#footer-widgets,.footer-widgets{
  background:linear-gradient(180deg,#242019 0%,#191612 60%,#141210 100%) !important;
  border-top:1px solid rgba(245,163,0,.18) !important;
}
#footer-bottom{background:#100e0b !important;border-top:1px solid rgba(255,255,255,.07) !important;}
#footer-widgets .widget-title,#footer .widget-title{
  font-family:"Archivo","Figtree",Arial,sans-serif !important;
  font-size:12.5px !important;font-weight:800 !important;letter-spacing:.14em !important;
  text-transform:uppercase !important;color:#f5a300 !important;
}
#footer a,#footer-widgets a{font-family:"Figtree",sans-serif !important;font-size:14.5px !important;color:#cfc9bd !important;}
#footer a:hover,#footer-widgets a:hover{color:#f5a300 !important;}

/* ===== SSX-MEPR-SIGNUP: the MemberPress registration and payment screens.
   These are the pages that take the money on LDS/MLS and they had never been
   styled. Measured at 1440x900 before this: the form was 460px wide, pinned to
   the left of an 838px wrapper, ~900px of empty page to its right, and 1218px
   tall because every field - including First/Last name and City/State/ZIP -
   was its own full-width row. The Next button was 72px.
   ===================================================================== */

/* -- centre and constrain ------------------------------------------------ */
.mepr-signup-form,
.mepr-form{
  max-width:640px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* -- pair the fields that belong together -------------------------------
   The form is a flat list of .mp-form-row elements, so a two-column grid with
   everything full-width by default lets specific rows be paired without
   touching the markup. */
@media (min-width:720px){
  .mepr-signup-form{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    column-gap:16px !important;
    row-gap:0 !important;
    align-items:start !important;
  }
  .mepr-signup-form > *{ grid-column:1 / -1 !important; }

  /* Only pair fields that are ADJACENT in the DOM. City and ZIP are separated
     by Country and State, so pairing them left City alone in a half-width cell
     with a hole beside it. Reordering with grid `order` would fix the picture
     but would desync the visual order from the tab order, so the address block
     stays full width. */
  .mepr-signup-form > .mepr_first_name,
  .mepr-signup-form > .mepr_last_name,
  .mepr-signup-form > .mepr_user_password,
  .mepr-signup-form > .mepr_user_password_confirm{
    grid-column:span 1 !important;
  }
}

/* -- rhythm -------------------------------------------------------------- */
.mepr-signup-form .mp-form-row{ margin:0 0 14px !important; }
.mepr-signup-form label,
.mepr-form label{
  display:block !important; margin:0 0 5px !important;
  font-weight:600 !important; font-size:13.5px !important;
  letter-spacing:.005em !important;
}

/* -- inputs -------------------------------------------------------------- */
.mepr-signup-form input[type=text],
.mepr-signup-form input[type=email],
.mepr-signup-form input[type=password],
.mepr-signup-form input[type=tel],
.mepr-signup-form select,
.mepr-form input[type=text],
.mepr-form input[type=email],
.mepr-form input[type=password],
.mepr-form select{
  width:100% !important; box-sizing:border-box !important;
  min-height:46px !important; padding:11px 13px !important;
  border:1px solid #d9d9de !important; border-radius:9px !important;
  font-size:15px !important; background:#fff !important;
  transition:border-color .14s ease, box-shadow .14s ease !important;
}
.mepr-signup-form input:focus,
.mepr-signup-form select:focus,
.mepr-form input:focus,
.mepr-form select:focus{
  border-color:#f5a300 !important;
  box-shadow:0 0 0 3px rgba(245,163,0,.18) !important;
  outline:none !important;
}

/* -- the price / terms line --------------------------------------------- */
.mepr-signup-form .mepr_price,
.mepr-signup-form .mepr_bold{
  background:#faf8f4 !important;
  border:1px solid #ecdfc6 !important;
  border-radius:10px !important;
  padding:13px 15px !important;
  margin-bottom:20px !important;
  font-size:15px !important;
}

/* -- payment method radios ---------------------------------------------- */
.mepr-signup-form .mepr-payment-methods-radios,
.mepr-signup-form .mepr_payment_method_label{ margin:4px 0 !important; }

/* -- the button that takes the money ------------------------------------ */
.mepr-signup-form input.mepr-submit,
.mepr-form input.mepr-submit,
.mepr-signup-form button.mepr-submit{
  width:100% !important; min-height:52px !important;
  background:#f5a300 !important; border:1px solid #f5a300 !important;
  color:#1a1710 !important; border-radius:10px !important;
  font-weight:700 !important; font-size:16px !important;
  letter-spacing:.01em !important; cursor:pointer !important;
  margin-top:6px !important;
  box-shadow:0 6px 18px rgba(245,163,0,.24) !important;
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease !important;
}
.mepr-signup-form input.mepr-submit:hover,
.mepr-form input.mepr-submit:hover{
  background:#ffb524 !important; transform:translateY(-1px) !important;
  box-shadow:0 10px 26px rgba(245,163,0,.32) !important;
}
.mepr-signup-form input.mepr-submit:focus-visible{
  outline:2px solid #9a6300 !important; outline-offset:2px !important;
}

/* -- the payment step (order table + card fields) ------------------------
   Same page family, different template: a DESCRIPTION/AMOUNT table, the card
   name, the Stripe element, then Submit. It inherited no table styling. */
.mepr-checkout-table,
.mp_wrapper table{
  width:100% !important; border-collapse:collapse !important;
  margin:0 0 22px !important; font-size:15px !important;
}
.mp_wrapper table th{
  text-align:left !important; font-size:11.5px !important;
  letter-spacing:.12em !important; text-transform:uppercase !important;
  color:#6b6b73 !important; font-weight:700 !important;
  padding:11px 13px !important; border-bottom:1px solid #e6e6ea !important;
}
.mp_wrapper table td{
  padding:13px !important; border-bottom:1px solid #f0f0f3 !important;
}
.mp_wrapper table tr:last-child td{
  font-weight:800 !important; font-size:16px !important; border-bottom:0 !important;
}

/* the Stripe card element on the payment step */
.mepr-stripe-card-element,
#mepr_stripe_card_element,
.mepr-payment-form .mepr-stripe-elements{
  border:1px solid #d9d9de !important; border-radius:9px !important;
  padding:13px !important; background:#fff !important; min-height:48px !important;
}

@media (max-width:719px){
  .mepr-signup-form{ max-width:100% !important; }
}

/* ===== SSX-MEPR-PAYSTEP: the second step, where the card is actually entered.
   Verified live on 2026-09-20 by driving a real registration to this screen.
   The card element and order table were already picked up (.mp_wrapper table),
   but the SUBMIT BUTTON was not: this step renders as #mepr-stripe-payment-form,
   NOT .mepr-signup-form, so every rule in SSX-MEPR-SIGNUP scoped to the signup
   form missed it. Measured: 88x40, browser-default grey - a tiny unstyled button
   as the final action on a payment page, directly after an amber, fully styled
   first step. ===================================================================== */

#mepr-stripe-payment-form,
.mp_payment_form_wrapper form,
.mepr-payment-form{
  max-width:640px !important;
  margin-left:auto !important; margin-right:auto !important;
}
.mp_payment_form_wrapper,
.mp_wrapper.mp_payment_form_wrapper{
  max-width:640px !important;
  margin-left:auto !important; margin-right:auto !important;
}

/* card-name field, to match the first step's inputs */
#mepr-stripe-payment-form input[type=text],
.mepr-payment-form input[type=text]{
  width:100% !important; box-sizing:border-box !important;
  min-height:46px !important; padding:11px 13px !important;
  border:1px solid #d9d9de !important; border-radius:9px !important;
  font-size:15px !important; background:#fff !important;
}
#mepr-stripe-payment-form input[type=text]:focus,
.mepr-payment-form input[type=text]:focus{
  border-color:#f5a300 !important;
  box-shadow:0 0 0 3px rgba(245,163,0,.18) !important;
  outline:none !important;
}
#mepr-stripe-payment-form label,
.mepr-payment-form label{
  display:block !important; margin:0 0 5px !important;
  font-weight:600 !important; font-size:13.5px !important;
}
#mepr-stripe-payment-form .mp-form-row{ margin:0 0 16px !important; }

/* the Stripe card element itself */
#mepr-stripe-payment-form .mepr-stripe-card-element,
.mepr-stripe-card-element{
  border:1px solid #d9d9de !important; border-radius:9px !important;
  padding:14px 13px !important; background:#fff !important;
  min-height:48px !important; box-sizing:border-box !important;
}
#mepr-stripe-payment-form .mepr-stripe-card-element.StripeElement--focus{
  border-color:#f5a300 !important;
  box-shadow:0 0 0 3px rgba(245,163,0,.18) !important;
}
#mepr-stripe-payment-form .mepr-stripe-card-element.StripeElement--invalid{
  border-color:#d33 !important;
}

/* THE BUTTON THAT TAKES THE MONEY - was 88x40 and unstyled */
#mepr-stripe-payment-form input[type=submit],
#mepr-stripe-payment-form button[type=submit],
.mepr-payment-form input[type=submit],
.mp_payment_form_wrapper input[type=submit]{
  width:100% !important; min-height:52px !important;
  background:#f5a300 !important; border:1px solid #f5a300 !important;
  color:#1a1710 !important; border-radius:10px !important;
  font-weight:700 !important; font-size:16px !important;
  letter-spacing:.01em !important; cursor:pointer !important;
  margin-top:8px !important; padding:0 24px !important;
  box-shadow:0 6px 18px rgba(245,163,0,.24) !important;
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease !important;
}
#mepr-stripe-payment-form input[type=submit]:hover,
.mp_payment_form_wrapper input[type=submit]:hover{
  background:#ffb524 !important; transform:translateY(-1px) !important;
  box-shadow:0 10px 26px rgba(245,163,0,.32) !important;
}
#mepr-stripe-payment-form input[type=submit]:focus-visible{
  outline:2px solid #9a6300 !important; outline-offset:2px !important;
}