/*
Theme Name: Slaeb (Elementor child)
Theme URI: https://slaeb.com
Description: Slaeb brand-styled child theme for Hello Elementor. Registers Slaeb design tokens (colors, fonts), nav/footer styles, and per-page module styles. Pair with the Elementor JSON templates included in this kit.
Author: Slaeb
Author URI: https://slaeb.com
Template: hello-elementor
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: slaeb-child
*/

/* ═══════════════════════════════════════════════════════
   SLAEB DESIGN SYSTEM — globals
   ═══════════════════════════════════════════════════════ */

:root {
  --p:    #18A0FB;
  --p2:   #2F80ED;
  --c1:   #444EED;
  --c2:   #132F60;
  --ok:   #27AE60;
  --warn: #E2893B;
  --teal: #0EA472;
  --ms:   #00A4EF;
  --ink:  #0F1923;
  --ink2: #374151;
  --ink3: #6B7280;
  --ink4: #9CA3AF;
  --line: #E5E7EB;
  --bg:   #FFFFFF;
  --bg2:  #F9FAFB;
  --bg3:  #F3F4F6;
  --fd:   'DM Sans',  sans-serif;
  --fb:   'Inter',    sans-serif;
  --fm:   'DM Mono',  monospace;
  --rs: 8px; --rm: 16px; --rl: 24px; --rxl: 48px;
  --sh:  0 1px 3px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.05);
  --sh2: 0 8px 40px rgba(15,25,35,.10);
  --sh3: 0 24px 80px rgba(15,25,35,.14);
}

/* Base typography on the body — Hello Elementor doesn't impose much, but force Inter */
body {
  font-family: var(--fb);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ── Tags / pills ── */
.slaeb-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(24,160,251,.07);color:var(--p);font-size:11px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;padding:5px 13px;border-radius:100px;border:1px solid rgba(24,160,251,.15);font-family:var(--fb)}
.slaeb-tag-green{background:rgba(39,174,96,.07);color:var(--ok);border-color:rgba(39,174,96,.18)}
.slaeb-tag-dark {background:rgba(15,25,35,.06);color:var(--ink2);border-color:rgba(15,25,35,.12)}
.slaeb-tag-ms   {background:rgba(0,164,239,.08);color:var(--ms);border-color:rgba(0,164,239,.20)}
.slaeb-tag-amber{background:rgba(226,137,59,.07);color:var(--warn);border-color:rgba(226,137,59,.18)}
.slaeb-tag-teal {background:rgba(14,164,114,.07);color:var(--teal);border-color:rgba(14,164,114,.18)}
.slaeb-tag-indigo{background:rgba(68,78,237,.07);color:var(--c1);border-color:rgba(68,78,237,.15)}

/* ── Slaeb buttons (override Elementor defaults when class present) ── */
.elementor-button.slaeb-btn-primary,
a.slaeb-btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;font-family:var(--fb);font-size:14px;font-weight:600;padding:13px 26px;border-radius:100px;border:none;cursor:pointer;text-decoration:none;transition:background .2s,transform .15s,box-shadow .15s;box-shadow:0 2px 12px rgba(15,25,35,.22)}
.elementor-button.slaeb-btn-primary:hover,
a.slaeb-btn-primary:hover{background:var(--c2);transform:translateY(-1px);box-shadow:0 6px 24px rgba(15,25,35,.28);color:#fff}
.elementor-button.slaeb-btn-blue,
a.slaeb-btn-blue{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;font-family:var(--fb);font-size:14px;font-weight:600;padding:13px 26px;border-radius:100px;border:none;cursor:pointer;text-decoration:none;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 18px rgba(24,160,251,.30)}
.elementor-button.slaeb-btn-blue:hover,
a.slaeb-btn-blue:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(24,160,251,.40);color:#fff}
.elementor-button.slaeb-btn-ghost,
a.slaeb-btn-ghost{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--ink2);font-family:var(--fb);font-size:14px;font-weight:500;padding:13px 26px;border-radius:100px;border:1.5px solid var(--line);cursor:pointer;text-decoration:none;transition:border-color .2s,color .2s}
.elementor-button.slaeb-btn-ghost:hover,
a.slaeb-btn-ghost:hover{border-color:var(--ink4);color:var(--ink)}
.elementor-button.slaeb-btn-white,
a.slaeb-btn-white{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--ink);font-family:var(--fb);font-size:14px;font-weight:700;padding:13px 26px;border-radius:100px;border:none;cursor:pointer;text-decoration:none;box-shadow:0 2px 16px rgba(0,0,0,.14);transition:transform .2s}
.elementor-button.slaeb-btn-white:hover,
a.slaeb-btn-white:hover{transform:translateY(-2px)}

/* ── Card style ── */
.slaeb-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--rm);transition:box-shadow .2s,transform .15s}
.slaeb-card:hover{box-shadow:var(--sh2);transform:translateY(-2px)}

/* ── Reveal animation ── */
.slaeb-reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.slaeb-reveal.visible{opacity:1;transform:translateY(0)}

/* ── Section headlines (when used inside Elementor HTML widgets) ── */
.slaeb-section-headline{font-family:var(--fd);font-size:clamp(26px,3.5vw,42px);font-weight:800;letter-spacing:-.035em;color:var(--ink);margin:12px 0 14px;line-height:1.12}
.slaeb-section-sub{font-size:15px;color:var(--ink3);line-height:1.75}

/* ── Microsoft logo grid (CSS-only, no image) ── */
.slaeb-ms-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;flex-shrink:0;width:fit-content}
.slaeb-ms-sq{border-radius:1px}

/* ── Float / pulse animations ── */
@keyframes slaebFloatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes slaebPulse{0%,100%{opacity:1}50%{opacity:.35}}
.slaeb-float{animation:slaebFloatY 4.5s ease-in-out infinite}

/* ── Container constraints (when inside HTML widgets) ── */
.slaeb-container{max-width:1160px;margin:0 auto;padding:0 40px}
@media(max-width:960px){ .slaeb-container{padding:0 24px} }
@media(max-width:600px){ .slaeb-container{padding:0 20px} }