/* =========================================================
   MyNineIron — MNI v14 "Ocean Card" + Mobile Safeguards (ONE BLOCK)
   Paste as the ONLY block in Additional CSS (no stacking).
   ========================================================= */

/* ---------- Global mobile safety (prevents squish/overflow) ---------- */
html, body{ max-width:100%; overflow-x:hidden; }
*, *::before, *::after{ box-sizing:border-box; }
img, video, iframe{ max-width:100%; height:auto; }
table{ max-width:100%; }
.wp-block-table, .table-responsive, .elementor-widget-container table{
  display:block;
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
a, p, li{ overflow-wrap:anywhere; word-break:break-word; }

/* My9Iron – restore dark site-wide backdrop */
body:not(.wp-admin){
  background:#0a1020 !important;
  color:#f5f8ff;
}

/* make theme wrappers stop forcing a white background */
body:not(.wp-admin) #page,
body:not(.wp-admin) .site,
body:not(.wp-admin) .site-content,
body:not(.wp-admin) .content-area,
body:not(.wp-admin) .entry-content,
body:not(.wp-admin) .wp-site-blocks{
  background:transparent !important;
}

/* ---------- Optional: simple grid (4 / 2 / 1) ---------- */
.mni-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
@media (max-width:1024px){ .mni-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){  .mni-grid{ grid-template-columns:1fr; } }

/* Elementor editor: show hidden items so you can edit */
.elementor-editor-active .elementor-hidden-desktop,
.elementor-editor-active .elementor-hidden-tablet,
.elementor-editor-active .elementor-hidden-mobile{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* ---------- Headshots: consistent crop ---------- */
.mni-headshot img,
.mni-golfer-headshot img{
  width:100%;
  height:auto;
  aspect-ratio: 1 / 1;
  object-fit:cover;
  object-position:50% 18%;
  border-radius:14px;
}

/* =========================================================
   MNI v14 page look
   ========================================================= */
:root{
  /* Cleaner deep navy background (less gray) */
  --mni-bg-top:#061a2a;
  --mni-bg-bot:#050f18;

  /* Card: brighter “ocean glass” (more pop, less dull) */
  --mni-card-top: rgba(10, 78, 132, .88);
  --mni-card-bot: rgba(8, 44, 78,  .86);

  /* Border + text */
  --mni-border: rgba(125, 211, 255, .20);
  --mni-text:   #eef8ff;
  --mni-muted:  rgba(238, 248, 255, .86);
  --mni-link:   #7dd3ff;
}

/* Background ONLY on pages that contain .mni-v14 (nice-to-have)
   Fallback is already handled by the global dark body background above. */
body:has(.mni-v14){
  background:
    radial-gradient(900px 620px at 52% -12%, rgba(80, 190, 255, .20), transparent 62%),
    radial-gradient(700px 520px at 15% 22%, rgba(40, 140, 255, .14), transparent 60%),
    linear-gradient(180deg, var(--mni-bg-top), var(--mni-bg-bot));
  background-attachment: fixed;
  color: var(--mni-text);
}

/* Kill the “theme title above the card” on MNI pages */
body:has(.mni-v14) .entry-title,
body:has(.mni-v14) .wp-block-post-title,
body:has(.mni-v14) .page-title,
body:has(.mni-v14) header.entry-header,
body:has(.mni-v14) .page-header{
  display:none !important;
}

/* Wrapper spacing */
.mni-v14{
  padding:24px 14px 52px;
  font-size:17px;
  line-height:1.65;
}

/* The content card */
.mni-v14 .mni-body{
  max-width:980px;
  margin:0 auto;
  padding:26px 26px;

  background:
    radial-gradient(900px 520px at 26% 18%, rgba(125,211,255,.10), transparent 60%),
    linear-gradient(180deg, var(--mni-card-top), var(--mni-card-bot));
  border:1px solid var(--mni-border);
  border-radius:18px;

  /* premium depth */
  box-shadow:
    0 18px 46px rgba(0,0,0,.58),
    0 0 14px rgba(90, 210, 255, .08),
    inset 0 1px 0 rgba(255,255,255,.06);

  /* blur is optional; keep OFF by default for speed */
  backdrop-filter:none;
}

/* Tiny glass effect only when supported (lightweight) */
@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))){
  body:has(.mni-v14) .mni-v14 .mni-body{
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
}

/* Typography */
.mni-v14 p,
.mni-v14 li{ color: var(--mni-muted); }

.mni-v14 h1,
.mni-v14 h2,
.mni-v14 h3{
  color: var(--mni-text);
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
}

.mni-v14 h1{
  font-size: clamp(30px, 3.2vw, 44px);
  line-height:1.12;
  margin:0 0 14px;
}

.mni-v14 h2{ margin-top:26px; }
.mni-v14 h3{ margin-top:18px; }

.mni-v14 a{
  color: var(--mni-link);
  text-decoration: underline;
  text-decoration-color: rgba(125, 211, 255, .45);
  text-underline-offset:3px;
}
.mni-v14 a:hover{
  text-decoration-color: rgba(125, 211, 255, .85);
}

/* Lists */
.mni-v14 ul{ margin-left:1.2em; }
.mni-v14 li{ margin:8px 0; }

/* ---------- Mobile optimization (REAL fixes) ---------- */
@media (max-width:640px){
  /* avoid “mobile layout but squished” */
  .mni-v14{ padding:18px 12px 40px; font-size:16px; }
  .mni-v14 .mni-body{
    padding:18px 16px;
    border-radius:16px;
    box-shadow: 0 12px 28px rgba(0,0,0,.55);
  }
  /* fixed backgrounds can feel janky on mobile */
  body:has(.mni-v14){ background-attachment: scroll; }
}

/* =========================================================
   CMB wrapper safety (only affects .cmb-v14 pages)
   Consolidated (no duplicates)
   ========================================================= */
.cmb-v14{
  background:#0a1020;
  color:#f5f8ff;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  padding:28px 16px 46px;
}
.cmb-v14 .cmb-body{
  max-width:1100px;
  margin:0 auto;
  line-height:1.65;
}
.cmb-v14 h1,.cmb-v14 h2,.cmb-v14 h3{
  color:#ffffff;
  line-height:1.15;
  margin:0 0 12px;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
}
.cmb-v14 h1{font-size:clamp(28px,3.2vw,44px);font-weight:900}
.cmb-v14 h2{font-size:clamp(20px,2.4vw,30px);font-weight:850;margin-top:22px}
.cmb-v14 h3{font-size:clamp(17px,1.9vw,22px);font-weight:800;margin-top:18px}
.cmb-v14 p{margin:0 0 12px}
.cmb-v14 a{color:#44e1ff;text-decoration:underline;text-underline-offset:3px}
.cmb-v14 a:hover{opacity:.9}
.cmb-v14 ul,.cmb-v14 ol{padding-left:20px;margin:0 0 14px}
.cmb-v14 li{margin:6px 0}
.cmb-v14 .cmb-card,
.cmb-v14 blockquote,
.cmb-v14 .card{
  background:#0f1a38;
  border:1px solid #2c3a6e;
  border-radius:16px;
  padding:16px;
  margin:14px 0;
}
@media (max-width:768px){
  .cmb-v14{padding:18px 14px 38px}
  .cmb-v14 .cmb-body{max-width:100%}
}
/* Subtle outer glow for My9Iron content card */
.mni-v14 .mni-body {
  box-shadow:
    0 18px 46px rgba(0,0,0,.58),
    0 0 18px rgba(80, 190, 255, .35); /* soft blue glow */
}

/* Same idea for CMB wrapper, if you want it too */
.cmb-v14 .cmb-body {
  box-shadow:
    0 18px 46px rgba(0,0,0,.52),
    0 0 16px rgba(68, 225, 255, .30);
}
/* MNI v14 – subtle outer glow + rounder corners on content card */
.mni-v14 .mni-body{
  border-radius: 22px; /* a bit rounder than before */
  box-shadow:
    0 26px 60px rgba(0,0,0,.75),                 /* deeper drop shadow */
    0 0 0 1px rgba(125,211,255,.30),             /* thin cyan border */
    0 0 40px rgba(56,189,248,.40);               /* soft outer glow */
}

/* Slightly soften the page edges so the card feels “floating” */
body:has(.mni-v14){
  box-shadow: inset 0 0 120px rgba(0,0,0,.45);
}