/*
Theme Name: JB Le Roux Insurance
Theme URI: https://www.jbleroux.co.za
Author: JB Le Roux Brokers
Author URI: https://www.jbleroux.co.za
Description: Custom theme for JB Le Roux Insurance Brokers. Site-wide navigation, footer, and brand styling. Build pages with the Custom HTML block and they appear full-width automatically.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: jbleroux
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  --blue:#1a52c8;
  --blue-nav:#0a3580;
  --navy:#0a2050;
  --navy-ink:#0a1a40;
  --gold:#f0c040;
  --gold-hover:#f7d060;
  --grey-bg:#f0f0f0;
  --tile-blue:#eef3ff;
  --tile-border:#dce6ff;
  --card-border:#e3e3e3;
  --text:#444;
  --text-soft:#666;
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body.jbl{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--grey-bg);
  color:#111;
  margin:0;
  overflow-x:hidden;
}
.jbl a{text-decoration:none;color:inherit}
.jbl ul{list-style:none;margin:0;padding:0}
.jbl svg{display:block}
.jbl img{max-width:100%;display:block}

/* Remove theme/Gutenberg default content constraints so HTML blocks run full-width */
.jbl .site-content,
.jbl .entry-content,
.jbl .wp-block-post-content{
  max-width:none;
  margin:0;
  padding:0;
}

/* ============================================================
   SITE HEADER / NAV  (rendered by header.php)
   ============================================================ */
.jbl-nav{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 5%;height:64px;background:var(--blue-nav);
}
.jbl-nav-logo{font-size:1.3rem;font-weight:800;color:#fff;letter-spacing:-0.02em}
.jbl-nav-logo span{color:var(--gold)}
.jbl-nav-links{display:flex;align-items:center;gap:2.5rem}
.jbl-nav-links a{font-size:0.9rem;font-weight:500;color:rgba(255,255,255,0.75);transition:color .18s}
.jbl-nav-links a:hover,.jbl-nav-links a.current{color:#fff}
.jbl-nav-cta{
  background:var(--gold);color:var(--navy);font-weight:700;font-size:0.875rem;
  padding:0.55rem 1.4rem;border-radius:100px;transition:background .18s;
}
.jbl-nav-cta:hover{background:var(--gold-hover)}

/* mobile menu toggle */
.jbl-nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
.jbl-nav-toggle span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;transition:.2s}

/* push page content below the fixed nav */
.jbl-main{padding-top:0}

/* ============================================================
   SITE FOOTER  (rendered by footer.php)
   ============================================================ */
.jbl-footer{background:#111;padding:64px 5% 36px}
.jbl-footer-top{
  display:grid;grid-template-columns:2.5fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem;
  border-bottom:1px solid rgba(255,255,255,0.08);padding-bottom:3rem;
}
.jbl-footer-brand .logo{font-size:1.2rem;font-weight:900;color:#fff;letter-spacing:-0.02em;margin-bottom:1rem}
.jbl-footer-brand .logo span{color:var(--gold)}
.jbl-footer-brand p{font-size:0.8rem;color:rgba(255,255,255,0.3);line-height:1.75;max-width:260px}
.jbl-fcol h5{font-size:0.7rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.35);margin-bottom:1.25rem}
.jbl-fcol a{display:block;font-size:0.875rem;color:rgba(255,255,255,0.5);margin-bottom:0.65rem;transition:color .18s}
.jbl-fcol a:hover{color:#fff}
.jbl-footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.75rem}
.jbl-footer-bottom p{font-size:0.78rem;color:rgba(255,255,255,0.2);margin:0}
.jbl-fsp-pill{
  font-size:0.72rem;font-weight:600;background:rgba(240,192,64,0.1);
  border:1px solid rgba(240,192,64,0.2);color:var(--gold);padding:0.3rem 0.85rem;border-radius:100px;
}

/* ============================================================
   SHARED PAGE-SECTION STYLES
   (use these classes inside any Custom HTML block)
   ============================================================ */
.jbl-hero{background:var(--blue);padding:150px 5% 90px;display:flex;flex-direction:column;justify-content:center}
.jbl-hero-tag{font-size:0.78rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.55);margin-bottom:1.5rem}
.jbl-hero h1{font-size:clamp(2.8rem,6vw,5.5rem);font-weight:900;line-height:0.98;letter-spacing:-0.04em;color:#fff;margin:0 0 1.5rem;max-width:850px}
.jbl-hero h1 em{font-style:normal;color:var(--gold)}
.jbl-hero-sub{font-size:1.15rem;font-weight:400;line-height:1.65;color:rgba(255,255,255,0.65);max-width:560px;margin:0}

.jbl-label{font-size:0.78rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--blue);margin-bottom:0.6rem}
.jbl-h{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:900;letter-spacing:-0.03em;color:var(--navy-ink);line-height:1.1;margin:0 0 1.75rem}
.jbl-h span{color:var(--blue)}

.jbl-section{padding:90px 5%}
.jbl-section-white{background:#fff}
.jbl-section-grey{background:var(--grey-bg)}
.jbl-section-navy{background:var(--navy)}
.jbl-section-blue{background:var(--blue)}

/* the curved transition panel used at the top of content */
.jbl-curve-wrap{background:var(--blue);padding:0 5%}
.jbl-curve-inner{background:var(--grey-bg);border-radius:24px 24px 0 0;padding:70px 5% 60px}

/* icon tiles */
.jbl-tile{width:54px;height:54px;border-radius:13px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}
.jbl-tile svg{width:26px;height:26px}
.jbl-tile-sm{width:38px;height:38px;border-radius:9px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.jbl-tile-sm svg{width:19px;height:19px}
.jbl-tile-soft{width:34px;height:34px;border-radius:8px;background:var(--tile-blue);color:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.jbl-tile-soft svg{width:18px;height:18px}

/* buttons */
.jbl-btn-white{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--navy);font-weight:800;font-size:1rem;padding:1rem 2.5rem;border-radius:100px;transition:background .18s,transform .15s}
.jbl-btn-white:hover{background:var(--tile-blue);transform:translateY(-2px)}
.jbl-btn-blue{display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff;font-weight:700;font-size:0.95rem;padding:0.85rem 1.75rem;border-radius:100px;transition:background .18s}
.jbl-btn-blue:hover{background:#0d3eaa}

/* cards */
.jbl-card{background:#f6f8ff;border:1.5px solid var(--tile-border);border-radius:18px;padding:2rem 1.75rem;transition:border-color .2s,transform .2s,box-shadow .2s}
.jbl-card:hover{border-color:var(--blue);transform:translateY(-4px);box-shadow:0 12px 32px rgba(26,82,200,0.1)}
.jbl-card h3{font-size:1.1rem;font-weight:800;color:var(--navy-ink);margin:0 0 0.5rem;letter-spacing:-0.02em}
.jbl-card p{font-size:0.9rem;color:var(--text-soft);line-height:1.6;margin:0}

.jbl-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.jbl-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:960px){
  .jbl-grid-3{grid-template-columns:1fr 1fr}
  .jbl-grid-4{grid-template-columns:1fr 1fr}
  .jbl-footer-top{grid-template-columns:1fr 1fr}
}
@media(max-width:780px){
  .jbl-nav-links{
    position:fixed;top:64px;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--blue-nav);padding:0 5%;
    max-height:0;overflow:hidden;transition:max-height .25s ease;
  }
  .jbl-nav-links.open{max-height:400px;padding:1rem 5%}
  .jbl-nav-links li{width:100%}
  .jbl-nav-links a{display:block;padding:0.85rem 0;width:100%}
  .jbl-nav-toggle{display:block}
}
@media(max-width:640px){
  .jbl-hero{padding:120px 5% 60px}
  .jbl-hero h1{font-size:2.6rem}
  .jbl-grid-3,.jbl-grid-4{grid-template-columns:1fr}
  .jbl-footer-top{grid-template-columns:1fr}
  .jbl-footer-bottom{flex-direction:column;text-align:center}
}