/*
Theme Name: Mother DNA
Theme URI: https://motherdna.com
Template: hello-elementor
Author: Mother DNA
Author URI: https://motherdna.com
Description: Dark neon vendor marketplace child theme for Mother DNA. Built for Gutenberg + WooCommerce + multi-vendor plugins (Dokan/WCFM/WC Vendors). No Elementor needed.
Version: 1.3.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: motherdna
*/

/* ===== CSS Variables ===== */
:root {
  --bg:#000814;
  --card:#0b1230;
  --card2:#0a1028;
  --line:#142043;
  --text:#ffffff;
  --muted:#b8c0ff;
  --grad1:#00f0ff;
  --grad2:#a100ff;
  --accent:#66fcf1;
  --radius:14px;
  --shadow:0 0 18px rgba(161,0,255,.25),0 0 28px rgba(0,240,255,.15);
}

/* ===== Base ===== */
html, body {
  background: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body, p {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
  line-height: 1.6;
}

h1,h2,h3,h4,h5,h6 {
  font-family:'Orbitron',sans-serif;
  letter-spacing:.3px;
  background: linear-gradient(90deg,var(--grad1),var(--grad2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  margin:0 0 .6em 0;
}

a {
  color: var(--grad1);
  text-decoration: none;
}
a:hover {
  opacity:.9;
  text-shadow:0 0 10px rgba(0,240,255,.25);
}

/* ===== Layout ===== */
.alignwide { max-width:1200px; margin:0 auto; }
.alignfull { width:100%; margin:0; }

section {
  text-align: center;
  padding: 60px 20px;
  box-sizing: border-box;
}
section.mdna-hero {
  padding: 100px 20px;
  background:
    radial-gradient(600px 300px at 50% -10%, rgba(0,240,255,.15), transparent 60%),
    radial-gradient(500px 260px at 20% 10%, rgba(161,0,255,.12), transparent 60%),
    #000814;
}

/* ===== Components ===== */
.mdna-card {
  background: linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  text-align:center;
  height:100%;
}

.mdna-row {
  display:grid;
  gap:24px;
}

/* Grids */
.mdna-row.cols-1 { grid-template-columns: 1fr; }
.mdna-row.cols-3-md { grid-template-columns: 1fr; }
@media(min-width:600px) {
  .mdna-row.cols-3-md { grid-template-columns: repeat(2,1fr); }
}
@media(min-width:992px) {
  .mdna-row.cols-3-md { grid-template-columns: repeat(3,1fr); }
}

/* Badge */
.mdna-badge {
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  font-size:.85rem;
  color:var(--muted);
}

/* Price text */
.mdna-price { font-size:2rem; font-weight:800; }
.mdna-muted { color:var(--muted); }

/* CTA */
.cta {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
  margin-top:24px;
}

/* Buttons */
.wp-block-button__link,
button,
input[type=button],
input[type=submit],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: linear-gradient(90deg,var(--grad1),var(--grad2));
  color:#fff !important;
  border:none;
  border-radius:10px;
  padding:12px 22px;
  box-shadow: var(--shadow);
  transition: transform .08s ease, box-shadow .2s ease;
}
.wp-block-button__link:hover,
button:hover,
.woocommerce a.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 22px rgba(161,0,255,.35), 0 0 36px rgba(0,240,255,.22);
}

/* ===== WooCommerce / Vendor Tweaks ===== */
.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message {
  background:rgba(255,255,255,.04);
  border-color:var(--line);
  color:#fff;
}
.woocommerce div.product .product_title {
  font-family:'Orbitron',sans-serif;
  background:none;
  color:#fff;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price { color:#fff; }
.woocommerce .star-rating span:before { color: var(--grad2); }
.woocommerce ul.products li.product .button { width:100%; }

.dokan-dashboard, .wcfmmp-store { background:#02091c; color:#fff; }
.dokan-dashboard .dokan-dash-sidebar,
.wcfmmp-store .wcfm-store-content { background:#07122b; }

/* ===== Mobile Fixes ===== */
@media(max-width:600px) {
  section { padding: 40px 16px; }
  section.mdna-hero { padding: 60px 16px; }

  h1 { font-size:1.8rem; }
  h2 { font-size:1.4rem; }
  h3 { font-size:1.1rem; }
  p  { font-size:0.95rem; }

  .mdna-card { padding:16px; }
  .mdna-price { font-size:1.6rem; }

  .mdna-row { grid-template-columns: 1fr !important; }

  .cta { flex-direction:column; gap:12px; }
  .cta a { width:100%; max-width:100%; }
}
/* --- Mobile overflow fixes --- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

.alignwide, .alignfull, section {
  max-width: 100% !important;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Force rows and cards to never exceed width */
.mdna-row,
.mdna-card,
.cta,
.cta a {
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Media fixes for images/iframes */
img, video, iframe {
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* ===== Mobile Centering Fixes ===== */
@media (max-width: 600px) {

  /* Make sure all sections are centered */
  section, .alignwide, .alignfull {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  /* Force rows into a single centered column */
  .mdna-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Cards centered & full width */
  .mdna-card {
    width: 100% !important;
    max-width: 320px;   /* keeps them tidy, not edge-to-edge */
    margin: 0 auto 20px auto !important;
    text-align: center;
  }

  /* Headings and text scale down for smaller screens */
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.4rem; }
  h3 { font-size: 1.1rem; }
  p  { font-size: 0.95rem; }

  /* Buttons stack & center */
  .cta {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px;
  }
  .cta a {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    text-align: center;
  }

  /* Make images and media centered */
  img, video, iframe {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
  }
}

/* Global site background override */
html, body {
  background-color: #000000 !important;
  color: var(--text);
}

/* Force all WordPress block containers to inherit black */
.site,
#page,
#content,
.wp-site-blocks,
.wp-block-group,
.wp-block-cover,
section,
header,
footer {
  background-color: #000000 !important;
}

/* WooCommerce pages */
.woocommerce,
.woocommerce-page {
  background-color: #000000 !important;
}

/* Vendor dashboards (Dokan/WCFM) */
.dokan-dashboard,
.wcfmmp-store {
  background-color: #000000 !important;
}