/*
Theme Name: XealBrax Freelance
Theme URI: https://xealbrax.com
Author: XealBrax
Author URI: https://xealbrax.com
Description: Lightweight, fast, SEO-optimized WordPress theme for XealBrax (Elementor-friendly).
Version: 1.0.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: xealbrax
*/

/* =========================================================
   XEALBRAX BASE (White / Black / Blue + subtle teal accent)
========================================================= */

/* Basic reset */
html, body { margin: 0; padding: 0; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Slightly nicer font rendering */
body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root{
  --xb-white:#ffffff;
  --xb-black:#000000;
  --xb-blue:#1e5eff;
  --xb-accent:#22c1c3; /* subtle teal */
  --xb-muted:#555555;
  --xb-border:#eeeeee;
  --xb-soft:#f6f8ff;

  --xb-max-width:1200px;
  --xb-radius:12px;
  --xb-transition: all .25s ease;
}

/* Base */
body{
  background: var(--xb-white);
  color: var(--xb-black);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size:16px;
  line-height:1.6;
}

img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; }
a:focus{ outline: 2px dashed var(--xb-blue); outline-offset: 3px; }

/* Better focus for keyboard users only */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible){
  outline: none;
}
a:focus-visible,
button:focus-visible{
  outline: 2px dashed var(--xb-blue);
  outline-offset: 3px;
}

/* Global container (theme-wide) */
.container{
  max-width: var(--xb-max-width);
  margin:0 auto;
  padding:0 20px;
}

/* Typography */
h1,h2,h3,h4{
  font-weight:800;
  letter-spacing:-.4px;
  color: var(--xb-black);
  margin:0;
}

p{
  font-size:18px;
  color: var(--xb-muted);
  margin: 0 0 18px;
}

@media (max-width: 768px){
  p{ font-size:16px; }
}

/* =========================================================
   BUTTONS
========================================================= */

.xb-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:12px 22px;
  border:2px solid var(--xb-black);
  background: var(--xb-white);
  color: var(--xb-black);

  text-decoration:none;
  font-weight:800;
  border-radius: var(--xb-radius);

  transition: var(--xb-transition);
  cursor:pointer;

  /* nicer mobile tap feel */
  -webkit-tap-highlight-color: transparent;
}

.xb-btn:hover,
.xb-btn:focus{
  background: var(--xb-blue);
  border-color: var(--xb-blue);
  color: var(--xb-white);
  outline:none;
}

/* Primary */
.xb-btn--primary{
  background: var(--xb-blue);
  border-color: var(--xb-blue);
  color: var(--xb-white);
}
.xb-btn--primary:hover,
.xb-btn--primary:focus{
  background: var(--xb-black);
  border-color: var(--xb-black);
  color: var(--xb-white);
}

/* Ghost */
.xb-btn--ghost{
  background: transparent;
}
.xb-btn--ghost:hover,
.xb-btn--ghost:focus{
  background: rgba(30,94,255,.08);
  border-color: var(--xb-blue);
  color: var(--xb-black);
}

.xb-btn--full{
  display:flex;
  width:100%;
  justify-content:center;
  margin-top:14px;
}

/* =========================================================
   HEADER (Sticky + Mobile menu)
========================================================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 9999;

  background: var(--xb-white);
  border-bottom:1px solid var(--xb-border);
  transition: var(--xb-transition);
}

.site-header.is-scrolled{
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 0;
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  text-decoration:none;
  color: var(--xb-black);
}

.brand-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-right:12px;
}

.brand-logo img,
.brand-logo .custom-logo{
  width:auto !important;
  height:56px !important;
  max-height:60px !important;
  object-fit:contain;
  display:block;
}

.brand-name{
  font-size:20px;
  font-weight:900;
  letter-spacing:-.6px;
  line-height:1;
}

/* Nav */
.primary-nav{ display:flex; align-items:center; }

.nav-menu{
  list-style:none;
  display:flex;
  align-items:center;
  gap:26px;
  margin:0;
  padding:0;
}

.nav-menu a{
  text-decoration:none;
  font-weight:800;
  font-size:14px;
  padding:8px 0;
  position:relative;
  color: var(--xb-black);
}

.nav-menu a:hover{ color: var(--xb-blue); }

.nav-menu a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:2px;
  width:0%;
  height:2px;
  background: var(--xb-blue);
  transition: var(--xb-transition);
}

.nav-menu a:hover::after{ width:100%; }

.header-right{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Header CTA micro-line */
.header-cta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}

.header-cta__note{
  font-size:12px;
  font-weight:800;
  color: var(--xb-muted);
  line-height:1.2;
}

.header-cta__note strong{
  color: var(--xb-black);
  font-weight:900;
}

/* Mobile nav CTA note spacing */
.header-cta__note--mobile{
  display:block;
  margin-top:10px;
}

/* Mobile toggle */
.menu-toggle{
  display:none;
  width:44px;
  height:44px;

  border:2px solid var(--xb-black);
  background: var(--xb-white);
  color: var(--xb-black);

  border-radius: var(--xb-radius);
  cursor:pointer;
  transition: var(--xb-transition);
  -webkit-tap-highlight-color: transparent;
}

.menu-toggle:hover{
  background: var(--xb-blue);
  border-color: var(--xb-blue);
  color: var(--xb-white);
}

.menu-toggle .bars{
  width:18px;
  height:14px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.menu-toggle .bars span{
  height:2px;
  background: currentColor;
  border-radius:2px;
  display:block;
}

/* Mobile nav panel */
.mobile-nav{
  display:none;
  background: var(--xb-white);
  border-top:1px solid var(--xb-border);
}

.mobile-nav.is-open{ display:block; }

.mobile-nav .nav-menu{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  padding: 8px 0;
}

.mobile-nav .nav-menu li{ border-bottom:1px solid #f2f2f2; }
.mobile-nav .nav-menu a{ display:block; padding:14px 20px; }
.mobile-cta{ padding:14px 20px 20px; }

@media (max-width:980px){
  .primary-nav{ display:none; }
  .menu-toggle{ display:inline-flex; align-items:center; justify-content:center; }
}

/* Tablet + Mobile logo sizing */
@media (max-width:1024px){
  .brand-logo img, .brand-logo .custom-logo{ height:46px !important; max-height:50px !important; }
}
@media (max-width:768px){
  .brand-logo img, .brand-logo .custom-logo{ height:40px !important; max-height:44px !important; }
}

/* =========================================================
   FOOTER
========================================================= */
.site-footer{
  border-top:1px solid var(--xb-border);
  padding:40px 0;
  text-align:center;
  color: var(--xb-muted);
  font-size:14px;
}

/* Calendly embed helper */
.xb-calendly-wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 10px 0 0;
}

/* =========================================================
   SHARED PAGE SYSTEM (Home + Services)
========================================================= */

.xb-section{ padding: clamp(56px, 6vw, 96px) 0; }
.xb-section--muted{ background: var(--xb-soft); }

.xb-section__head{ margin-bottom: 18px; }

.xb-center{ text-align:center; }
.xb-mt{ margin-top: 22px; }

/* Grids (default) */
.xb-grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}

/* Cards */
.xb-card{
  border:1px solid var(--xb-border);
  border-radius: 16px;
  padding: 22px;
  background: var(--xb-white);
  transition: transform .2s ease, box-shadow .2s ease;
}
.xb-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
}

.xb-list{
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--xb-muted);
}
.xb-list li{ margin: 0 0 8px; }

.xb-link{
  display:inline-block;
  margin-top:12px;
  font-weight:900;
  text-decoration:none;
}
.xb-link:hover{ color: var(--xb-blue); }

/* =========================================================
   HOME PAGE (Standalone)
========================================================= */

.xb-home{ overflow-x:hidden; }

/* Responsive headings */
.xb-home .xb-h1{
  font-size: clamp(30px, 4.2vw, 54px);
  line-height: 1.06;
  letter-spacing: -.8px;
  margin: 0 0 14px;
}
.xb-home .xb-h2{
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.15;
  letter-spacing: -.5px;
  margin: 0 0 10px;
}
.xb-home .xb-h3{
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -.3px;
  margin: 0 0 8px;
}

.xb-home .xb-eyebrow{
  font-weight: 900;
  font-size: 13px;
  text-transform: uppercase;
  margin: 0 0 10px;
  letter-spacing: -.2px;
}

.xb-home .xb-lead{
  font-size: 18px;
  margin: 0 0 18px;
  max-width: 70ch;
}
.xb-home .xb-sublead{
  font-size: 18px;
  margin: 0 0 18px;
  max-width: 80ch;
}

/* HERO */
.xb-hero{
  padding: clamp(76px, 8vw, 124px) 0 clamp(60px, 6vw, 96px);
  position: relative;
  background:
    radial-gradient(900px 420px at 15% 10%, rgba(30,94,255,.12), transparent 60%),
    radial-gradient(900px 420px at 85% 0%, rgba(34,193,195,.10), transparent 60%),
    linear-gradient(180deg, #f6f8ff 0%, #ffffff 60%);
}

.xb-hero__grid{
  display:grid;
  grid-template-columns: 1.15fr 0.9fr;
  gap: clamp(18px, 3vw, 34px);
  align-items: center;
}

.xb-cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}

.xb-note{
  margin-top:14px;
  font-size:14px;
  color: var(--xb-muted);
}

/* Proof chips */
.xb-proof{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.xb-proof__item{
  border:1px solid var(--xb-border);
  background: var(--xb-white);
  border-radius: 999px;
  padding: 10px 12px;
  display:flex;
  gap:8px;
  align-items:center;
}
.xb-proof__k{ font-weight: 900; font-size: 12px; color: var(--xb-black); }
.xb-proof__v{ font-weight: 800; font-size: 12px; color: var(--xb-muted); }

/* Media cards (images) */
.xb-mediaCard{
  border:1px solid var(--xb-border);
  border-radius: 18px;
  overflow:hidden;
  background: var(--xb-white);
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
  position: relative;
}
.xb-mediaCard__img{
  width:100%;
  height:auto;
  display:block;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  transform: scale(1.01);
}
.xb-mediaCard--tall .xb-mediaCard__img{ aspect-ratio: 4 / 5; }

.xb-mediaCard__overlay{
  position:absolute;
  left:14px;
  top:14px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  max-width: 100%;
}
.xb-chip{
  font-size: 12px;
  font-weight: 900;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  border:1px solid rgba(0,0,0,.06);
  backdrop-filter: blur(8px);
}

.xb-mediaCard__caption{
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.xb-caption__title{
  margin:0 0 4px;
  font-weight: 900;
  color: var(--xb-black);
}
.xb-caption__text{
  margin:0;
  font-size: 14px;
  color: var(--xb-muted);
}

/* Split section (copy + image) */
.xb-split{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(18px, 3vw, 34px);
  align-items:start;
}

/* Steps */
.xb-steps{
  display:grid;
  gap: 12px;
  margin-top: 16px;
}
.xb-step{
  border:1px solid rgba(30,94,255,.14);
  background: var(--xb-white);
  border-radius: 16px;
  padding: 16px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
.xb-step__n{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .8px;
  color: var(--xb-blue);
  border: 1px solid rgba(30,94,255,.2);
  background: rgba(30,94,255,.08);
  border-radius: 999px;
  padding: 6px 10px;
  height: fit-content;
}
.xb-step p{ margin: 6px 0 0; font-size: 16px; }

/* FAQ */
.xb-faq{
  display:grid;
  gap: 12px;
  margin-top: 16px;
}
.xb-faq__item{
  border:1px solid var(--xb-border);
  background: var(--xb-white);
  border-radius: 14px;
  padding: 14px 16px;
}
.xb-faq__item summary{
  cursor:pointer;
  font-weight:900;
  color: var(--xb-black);
  list-style:none;
}
.xb-faq__item summary::-webkit-details-marker{ display:none; }
.xb-faq__item p{ margin: 12px 0 0; font-size: 16px; }

/* Final CTA */
.xb-final__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
  border:1px solid var(--xb-border);
  border-radius: 18px;
  padding: 22px;
  background: linear-gradient(135deg, rgba(30,94,255,.06), rgba(34,193,195,.06));
}
.xb-final__cta{ display:flex; gap:12px; flex-wrap:wrap; }

/* Optional: tiny lift on hero image (desktop hover) */
.xb-hero__media .xb-mediaCard{
  transform: translateY(0);
  transition: transform .35s ease;
}
@media (min-width: 981px){
  .xb-hero__media .xb-mediaCard:hover{
    transform: translateY(-6px);
  }
}

/* =========================================================
   ANIMATIONS (home.js toggles .is-visible)
========================================================= */
.xb-anim{
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.xb-anim.is-visible{
  opacity: 1;
  transform: translate3d(0,0,0);
}

/* helper modifiers (safe even if not used) */
.xb-anim--fade{ transform: none; }
.xb-anim--up{ transform: translate3d(0, 14px, 0); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .xb-anim{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .xb-card{ transition:none; }
  .xb-card:hover{ transform:none; box-shadow:none; }
}

/* =========================================================
   SERVICES PAGE (Standalone, No Elementor)
========================================================= */

.xb-services{ overflow-x:hidden; }

/* Slightly different hero tint for services */
.xb-hero--services{
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(30,94,255,.10), transparent 60%),
    radial-gradient(900px 420px at 80% 0%, rgba(34,193,195,.10), transparent 60%),
    linear-gradient(180deg, #f6f8ff 0%, #ffffff 60%);
}

/* Services: 4 cards looks best as 2 columns on desktop */
@media (min-width: 981px){
  .xb-grid3--services{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Keep packages as 3 columns desktop */
.xb-grid3--packages{ gap: 16px; }

.xb-card--service .xb-card__meta{
  margin-top: 14px;
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.xb-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 12px;
  border-radius: 999px;
  padding: 8px 10px;
  border: 1px solid rgba(30,94,255,.22);
  background: rgba(30,94,255,.08);
  color: var(--xb-black);
  white-space: nowrap;
}

.xb-meta{
  font-size: 14px;
  color: var(--xb-muted);
  font-weight: 800;
  line-height: 1.35;
}

/* Packages */
.xb-card--package{ position: relative; }

.xb-card--packageFeatured{
  border-color: rgba(30,94,255,.25);
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
  background: linear-gradient(135deg, rgba(30,94,255,.06), rgba(34,193,195,.05));
}

.xb-packageTag{
  position:absolute;
  top: 14px;
  right: 14px;
  font-weight: 900;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(0,0,0,.06);
  backdrop-filter: blur(8px);
}

/* =========================================================
   MOBILE / TABLET FIXES (prevents jam-packed look)
========================================================= */
@media (max-width: 980px){
  .xb-hero__grid{ grid-template-columns: 1fr; }
  .xb-split{ grid-template-columns: 1fr; }
  .xb-grid3{ grid-template-columns: 1fr; }
  .xb-final__inner{ flex-direction: column; align-items:flex-start; }

  /* CTAs stack */
  .xb-cta{ gap:10px; }
  .xb-cta .xb-btn{ width:100%; }

  /* Breathing room tweaks */
  .xb-proof{ gap:8px; }
  .xb-proof__item{ padding:10px 12px; }

  .xb-card{ padding:18px; }
  .xb-list{ padding-left:20px; }
  .xb-list li{ margin-bottom:10px; }

  .xb-mediaCard__caption{ padding:14px 14px 16px; }

  /* Services meta stacks */
  .xb-card--service .xb-card__meta{ flex-direction: column; }
  .xb-packageTag{
    position: static;
    display:inline-flex;
    width: fit-content;
    margin-bottom: 10px;
  }
}