/* ============================================================
   OPEN MAKER LABS — Elementor "bridge" stylesheet
   Paste ALL of this into:  Appearance → Customize → Additional CSS
   (works in Elementor Free AND Pro)

   It does two jobs:
   1. Sets the global blueprint background + base typography so
      every Elementor page inherits the look automatically.
   2. Defines helper CLASSES you add to widgets via
      Advanced → CSS Classes  (e.g. type "oml-card" into that box).
   ============================================================ */

:root{
  --oml-bg:#16202e; --oml-panel:#232c3a; --oml-panel-2:#2a3445;
  --oml-ink:#e9eef3; --oml-muted:#9aa6b4; --oml-faint:#6b7686;
  --oml-line:rgba(125,195,220,.14); --oml-line-2:rgba(125,195,220,.08);
  --oml-lime:#b6f23d; --oml-cyan:#3dd7f0; --oml-orange:#ff9d3d;
  --oml-mono:"JetBrains Mono",ui-monospace,monospace;
}

/* ---- 1. global page background: dark + blueprint grid ---- */
body{
  background-color:var(--oml-bg)!important;
  color:var(--oml-muted);
  background-image:
    linear-gradient(rgba(125,195,220,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(125,195,220,.05) 1px,transparent 1px),
    linear-gradient(rgba(125,195,220,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(125,195,220,.07) 1px,transparent 1px);
  background-size:34px 34px,34px 34px,170px 170px,170px 170px;
  background-attachment:fixed;
}
/* let the grid show through Elementor's wrappers */
.elementor-section,.e-con,.e-con-inner{background-color:transparent;}

h1,h2,h3,h4,h5,h6{color:var(--oml-ink);}
a{color:var(--oml-cyan);}

/* ---- 2. helper classes (add via Advanced → CSS Classes) ---- */

/* mono text */
.oml-mono{font-family:var(--oml-mono)!important;letter-spacing:.06em;}

/* eyebrow pill — put on a Heading/Text widget */
.oml-eyebrow{
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  font-family:var(--oml-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--oml-muted);border:1px solid var(--oml-line);background:rgba(35,44,58,.6);
  padding:7px 13px;border-radius:100px;
}
.oml-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--oml-lime);box-shadow:0 0 8px var(--oml-lime);}

/* category tag pill */
.oml-tag{
  display:inline-block;font-family:var(--oml-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 9px;border:1px solid var(--oml-cyan);color:var(--oml-cyan);
  border-radius:100px;
}

/* datasheet CARD — put on a Container */
.oml-card{
  background:var(--oml-panel)!important;border:1px solid var(--oml-line)!important;
  border-radius:14px!important;transition:transform .2s,border-color .2s,box-shadow .2s;
}
.oml-card:hover{transform:translateY(-3px);border-color:rgba(125,195,220,.32)!important;
  box-shadow:0 16px 40px rgba(8,12,20,.5)!important;}

/* callout panel — Container; add oml-callout-cyan / -orange to recolour */
.oml-callout{background:var(--oml-panel)!important;border:1px solid var(--oml-line)!important;
  border-left:2px solid var(--oml-lime)!important;border-radius:12px!important;}
.oml-callout-cyan{border-left-color:var(--oml-cyan)!important;}
.oml-callout-orange{border-left-color:var(--oml-orange)!important;}

/* CTA band — Container */
.oml-cta{
  border:1px solid var(--oml-line)!important;border-radius:18px!important;
  background:
    radial-gradient(120% 140% at 85% 10%,rgba(40,80,110,.35),transparent 55%),
    radial-gradient(90% 120% at 5% 100%,rgba(40,70,40,.25),transparent 50%),
    var(--oml-panel)!important;
}

/* panel surface (generic lighter card) */
.oml-panel{background:var(--oml-panel)!important;border:1px solid var(--oml-line)!important;border-radius:14px!important;}

/* button looks — add oml-btn + (oml-btn-primary | oml-btn-ghost) to a Button widget */
.oml-btn-primary .elementor-button,.oml-btn-primary a.elementor-button{
  background:var(--oml-lime)!important;color:#16202e!important;border-radius:100px!important;font-weight:600!important;
}
.oml-btn-ghost .elementor-button,.oml-btn-ghost a.elementor-button{
  background:transparent!important;color:var(--oml-ink)!important;border:1px solid var(--oml-line)!important;border-radius:100px!important;font-weight:600!important;
}

/* spec row with dotted leader — for a product/spec table built as a Container per row:
   structure:  <div class="oml-spec"><span>LABEL</span><b>VALUE</b></div>  (HTML widget) */
.oml-spec{display:flex;align-items:baseline;gap:8px;font-family:var(--oml-mono);font-size:12.5px;
  padding:10px 0;border-bottom:1px solid var(--oml-line-2);}
.oml-spec span{color:var(--oml-faint);} 
.oml-spec b{color:var(--oml-ink);font-weight:500;margin-left:auto;}
.oml-spec::after{content:none;}

/* stock LED dot — span class */
.oml-led{display:inline-flex;align-items:center;gap:7px;font-family:var(--oml-mono);font-size:10px;letter-spacing:.1em;color:var(--oml-muted);}
.oml-led::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--oml-lime);box-shadow:0 0 8px var(--oml-lime);}

/* ============================================================
   3. GUIDES / PROJECTS — Loop Item card + shortcode output
      • Put .oml-gcard on the Loop Item's outer Container.
      • Drop [oml_topic] [oml_difficulty] [oml_meta] as Shortcode
        widgets; these classes style their output.
   ============================================================ */
.oml-extra{ --oml-violet:#b18cff; --oml-amber:#f5c542; }

/* coloured category chip — colour comes from the Topic term (via --c) */
.oml-cat{
  display:inline-block;font-family:var(--oml-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 9px;border-radius:100px;
  color:var(--c,#3dd7f0);
  border:1px solid color-mix(in srgb, var(--c,#3dd7f0) 42%, transparent);
}

/* difficulty meter (schematic bars) */
.oml-diff{display:inline-flex;align-items:center;gap:9px;font-family:var(--oml-mono);font-size:10px;letter-spacing:.08em;color:var(--oml-faint);}
.oml-diff .oml-bars{display:inline-flex;gap:3px;}
.oml-diff .oml-bars i{width:4px;height:11px;border-radius:1px;background:rgba(120,135,160,.45);display:inline-block;}
.oml-diff--beginner     .oml-bars i:nth-child(1){background:var(--oml-lime);box-shadow:0 0 6px rgba(182,242,61,.5);}
.oml-diff--intermediate .oml-bars i:nth-child(-n+2){background:var(--oml-cyan);box-shadow:0 0 6px rgba(61,215,240,.5);}
.oml-diff--advanced     .oml-bars i{background:var(--oml-orange);box-shadow:0 0 6px rgba(255,157,61,.5);}

/* meta row (time + steps) */
.oml-gmeta{display:inline-flex;align-items:center;gap:16px;font-family:var(--oml-mono);font-size:10.5px;letter-spacing:.06em;color:var(--oml-faint);flex-wrap:wrap;}
.oml-gmeta .mi{display:inline-flex;align-items:center;gap:6px;}
.oml-gmeta .mi svg{width:13px;height:13px;opacity:.8;}
.oml-gmeta b{color:var(--oml-muted);font-weight:500;}

/* the loop card itself (Container) */
.oml-gcard{
  background:var(--oml-panel)!important;border:1px solid var(--oml-line)!important;border-radius:14px!important;
  overflow:hidden!important;transition:transform .2s,border-color .2s,box-shadow .2s;
}
.oml-gcard:hover{transform:translateY(-4px);border-color:rgba(125,195,220,.32)!important;box-shadow:0 16px 40px rgba(8,12,20,.5)!important;}

/* prose / single article — body content typography for guides */
.oml-prose p,.oml-prose li{color:var(--oml-muted);line-height:1.7;}
.oml-prose h2{margin-top:2em;}
.oml-prose a{color:var(--oml-cyan);text-underline-offset:3px;}