/* =====================================================================
   Bugbee Law — Elementor custom CSS
   Paste into Elementor > Site Settings > Custom CSS (or child-theme style.css).
   Requires tokens/design-tokens.css loaded first (or paste it above this).
   Every class here is applied via Elementor > Advanced > CSS Classes.
   ===================================================================== */

/* ---------- Base ---------- */
body { margin:0; background:#FFFFFF; color:var(--bb-ink); font-family:var(--bb-font-body); }
*, *::before, *::after { box-sizing:border-box; }
a { color:var(--bb-blue); } a:hover { color:var(--bb-navy); }
::selection { background:var(--bb-blue); color:#fff; }
.bb-balance { text-wrap:balance; } .bb-pretty { text-wrap:pretty; }

/* ---------- Eyebrows ---------- */
.bb-eyebrow { margin:0; font:600 13px/1.4 var(--bb-font-body); letter-spacing:.16em; text-transform:uppercase; color:var(--bb-blue); }
.bb-eyebrow--navy { color:var(--bb-sky-2); }                 /* on navy sections */
.bb-eyebrow--hero { display:flex; align-items:center; gap:14px; font-size:14px; letter-spacing:.18em; color:var(--bb-sky); }
.bb-eyebrow--hero::before { content:""; width:40px; height:1px; background:currentColor; flex:none; }

/* ---------- Section H2 (global "H2") ---------- */
.bb-h2 { margin:0; font:700 clamp(30px,2.9vw,44px)/1.12 var(--bb-font-display); letter-spacing:.01em; text-transform:uppercase; text-wrap:balance; }

/* =====================================================================
   HERO — photo blended into navy (Home + every inner page)
   Structure (Elementor):
     Container .bb-hero  [.bb-hero--home on Home]
       Container .bb-hero__media   (Background: Classic image = hero photo, size Cover,
                                    position = the page's object-position value)
       Container .bb-hero__content (boxed 1400, holds eyebrow/H1/sub/buttons/trust list)
   ===================================================================== */
.bb-hero { position:relative; overflow:hidden; background:#0B1F3A; display:flex; min-height:clamp(520px,62vh,680px); }
.bb-hero--home { min-height:clamp(680px,calc(100vh - 88px),940px); }
/* layer 1: hex pattern, fading out to the right */
.bb-hero::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url(../assets/backgrounds/pattern-light.png) 0 0/330px 286px repeat; opacity:.4;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.55) 30%,rgba(0,0,0,0) 58%);
          mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.55) 30%,rgba(0,0,0,0) 58%); }
/* layer 2: photo, right-anchored, feathered into the navy on its left edge */
.bb-hero__media { position:absolute !important; top:0; right:0; bottom:0; width:72%; min-width:72%; z-index:1;
  background-size:cover; background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 8%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.62) 28%,rgba(0,0,0,.88) 38%,#000 48%);
          mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 8%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.62) 28%,rgba(0,0,0,.88) 38%,#000 48%);
  animation:bb-kenburns 22s ease-in-out infinite alternate; will-change:transform; }
.bb-hero--home .bb-hero__media { width:80%; min-width:80%; }
/* layer 3: navy scrim (L→R) + blue glow + bottom fade, top-most first */
.bb-hero::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(0deg,rgba(8,24,46,.55) 0%,rgba(8,24,46,0) 40%),
    radial-gradient(ellipse 45% 70% at 8% 50%,rgba(2,119,198,.28),rgba(2,119,198,0) 70%),
    linear-gradient(90deg,rgba(11,31,58,.96) 0%,rgba(11,31,58,.93) 14%,rgba(11,31,58,.86) 24%,rgba(11,31,58,.74) 33%,rgba(11,31,58,.58) 42%,rgba(11,31,58,.4) 51%,rgba(11,31,58,.24) 60%,rgba(11,31,58,.11) 70%,rgba(11,31,58,.03) 80%,rgba(11,31,58,0) 90%); }
/* layer 4 (< 1100px only): extra full-width darkening so copy stays readable over the photo */
@media (max-width:1099px) {
  .bb-hero::after { background:
    linear-gradient(90deg,rgba(8,24,46,.82) 0%,rgba(8,24,46,.72) 60%,rgba(8,24,46,.4) 100%),
    linear-gradient(0deg,rgba(8,24,46,.55) 0%,rgba(8,24,46,0) 40%),
    radial-gradient(ellipse 45% 70% at 8% 50%,rgba(2,119,198,.28),rgba(2,119,198,0) 70%),
    linear-gradient(90deg,rgba(11,31,58,.96) 0%,rgba(11,31,58,.93) 14%,rgba(11,31,58,.86) 24%,rgba(11,31,58,.74) 33%,rgba(11,31,58,.58) 42%,rgba(11,31,58,.4) 51%,rgba(11,31,58,.24) 60%,rgba(11,31,58,.11) 70%,rgba(11,31,58,.03) 80%,rgba(11,31,58,0) 90%); }
  .bb-hero__media { width:100%; }
}
.bb-hero__content { position:relative; z-index:3; flex:1; width:100%; max-width:1400px; margin:0 auto;
  padding:clamp(40px,5vw,64px) var(--bb-gutter) clamp(56px,7vw,96px); display:flex; align-items:center; }
.bb-hero--home .bb-hero__content { padding:clamp(80px,10vw,150px) var(--bb-gutter); }
.bb-hero__copy { flex:0 1 720px; min-width:0; display:flex; flex-direction:column; gap:24px; }
.bb-hero--home .bb-hero__copy { flex-basis:700px; gap:28px; }
@keyframes bb-kenburns { from { transform:scale(1.02) translate(0,0); } to { transform:scale(1.1) translate(-1.6%,-1.2%); } }
@media (prefers-reduced-motion:reduce) { .bb-hero__media { animation:none; } }

/* Hero H1 */
.bb-h1 { margin:0; font:700 clamp(34px,3.8vw,56px)/1.06 var(--bb-font-display); letter-spacing:.01em; text-transform:uppercase; color:#FFFFFF; text-wrap:balance; }
.bb-h1--home { font-size:clamp(40px,5vw,74px); line-height:1.04; }
.bb-h1--lg   { font-size:clamp(38px,4.4vw,64px); }   /* Criminal Defense, Attorney Profile, Contact, Blog */
.bb-h1--xl   { font-size:clamp(44px,5.4vw,80px); }   /* Case Results */
.bb-hero__sub { margin:0; font:italic 400 clamp(21px,1.9vw,27px)/1.35 var(--bb-font-display); color:#DCEBF8; max-width:600px; text-wrap:balance; }
.bb-hero--home .bb-hero__sub { font-size:clamp(22px,2.1vw,30px); }
/* Trust list under hero buttons */
.bb-trust { list-style:none; margin:10px 0 0; padding:24px 0 0; border-top:1px solid rgba(255,255,255,.16);
  display:flex; flex-wrap:wrap; gap:14px 34px; font:500 15.5px/1.4 var(--bb-font-body); color:#E6EDF5; }
.bb-hero--home .bb-trust { margin-top:18px; padding-top:26px; }
.bb-trust li { display:flex; align-items:center; gap:8px; }
.bb-trust svg, .bb-trust i { width:18px; height:18px; font-size:18px; color:#9FCBF0; }

/* =====================================================================
   BUTTONS (apply class to Elementor Button widget wrapper)
   ===================================================================== */
/* 1. Primary pill — 64px, white circle w/ arrow at right */
.bb-pill .elementor-button { display:inline-flex; align-items:center; gap:16px; height:64px; padding:0 8px 0 30px; border-radius:999px;
  background:#0277C6; color:#fff; font:600 17px/1 var(--bb-font-body); letter-spacing:.005em; white-space:nowrap;
  box-shadow:var(--bb-sh-pill-blue); transition:background .3s ease,transform .3s ease,box-shadow .3s ease; }
.bb-pill .elementor-button:hover { background:#1486D4; color:#fff; transform:translateY(-2px); box-shadow:var(--bb-sh-pill-blue-hover); }
.bb-pill .elementor-button:active { transform:translateY(0); }
.bb-pill .elementor-button-content-wrapper { gap:16px; align-items:center; }
.bb-pill .elementor-button-icon { order:2; width:48px; height:48px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; flex:none; margin:0 !important; }
.bb-pill .elementor-button-icon svg, .bb-pill .elementor-button-icon i { width:19px; height:19px; font-size:19px; color:#0277C6; fill:none; stroke:#0277C6; }

/* 2. Call pill — 64px, icon disc at left, two-line label (use HTML widget snippet `call-pill`) */
.bb-call { display:inline-flex; align-items:center; gap:14px; height:64px; padding:0 28px 0 7px; border-radius:999px; text-decoration:none; white-space:nowrap;
  transition:background .3s ease,border-color .3s ease,transform .3s ease; }
.bb-call:hover { transform:translateY(-2px); } .bb-call:active { transform:translateY(0); }
.bb-call__disc { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; }
.bb-call__disc svg { width:18px; height:18px; }
.bb-call__text { display:flex; flex-direction:column; gap:4px; line-height:1; }
.bb-call__label { font:600 11.5px/1 var(--bb-font-body); letter-spacing:.16em; }
.bb-call__num { font:600 17px/1 var(--bb-font-body); }
/* 2a ghost on dark (heroes, Spokane band, Why Choose) */
.bb-call--ghost { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.32); color:#fff; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.bb-call--ghost:hover { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.7); color:#fff; }
.bb-call--ghost .bb-call__disc { background:rgba(255,255,255,.12); color:#fff; } .bb-call--ghost .bb-call__label { color:#9FCBF0; }
/* 2b navy solid (Home quick-links intro) */
.bb-call--navy { background:#0B1F3A; color:#fff; box-shadow:var(--bb-sh-pill-navy); }
.bb-call--navy:hover { background:#0277C6; color:#fff; }
.bb-call--navy .bb-call__disc { background:rgba(255,255,255,.12); } .bb-call--navy .bb-call__label { color:#9FCBF0; }
/* 2c light (footer CTA band) */
.bb-call--light { background:#fff; border:1px solid #CFDDEB; color:#0B1F3A; }
.bb-call--light:hover { border-color:#0B1F3A; color:#0B1F3A; }
.bb-call--light .bb-call__disc { background:#EAF3FB; color:#0277C6; } .bb-call--light .bb-call__label { color:#0277C6; }

/* 3. Rectangular buttons (8px radius) */
.bb-btn .elementor-button { display:inline-flex; align-items:center; gap:8px; height:50px; padding:0 22px; border-radius:8px; font:600 15px/1 var(--bb-font-body); white-space:nowrap; transition:background .25s, border-color .25s, color .25s; }
.bb-btn .elementor-button-content-wrapper { gap:8px; }
.bb-btn--blue .elementor-button { background:#0277C6; color:#fff; } .bb-btn--blue .elementor-button:hover { background:#0B1F3A; color:#fff; }
.bb-btn--navy .elementor-button { background:#0B1F3A; color:#fff; } .bb-btn--navy .elementor-button:hover { background:#0277C6; color:#fff; }
.bb-btn--outline .elementor-button { background:#fff; border:1px solid #CFDDEB; color:#0B1F3A; } .bb-btn--outline .elementor-button:hover { border-color:#0B1F3A; color:#0B1F3A; }
.bb-btn--warm .elementor-button { background:#fff; border:1px solid #DAD5CB; color:#0B1F3A; } .bb-btn--warm .elementor-button:hover { border-color:#0B1F3A; }
.bb-btn--sm .elementor-button { height:48px; padding:0 20px; }
.bb-btn--lg .elementor-button { height:52px; font-size:16px; gap:10px; }
.bb-btn--block .elementor-button { width:100%; justify-content:center; }

/* 4. Text link w/ arrow */
.bb-textlink { display:inline-flex; align-items:center; gap:8px; color:#0277C6; font:600 15px/1 var(--bb-font-body); text-decoration:none; transition:color .2s; }
.bb-textlink:hover { color:#0B1F3A; }
.bb-textlink--ink { color:#0B1F3A; font-size:16px; } .bb-textlink--ink:hover { color:#0277C6; }

/* =====================================================================
   CARDS / IMAGES
   ===================================================================== */
.bb-card { background:#fff; border:1px solid #E3E9F0; border-radius:8px; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.bb-card--link:hover { transform:translateY(-4px); box-shadow:var(--bb-sh-card-hover); border-color:#9CC6EA; }
.bb-icon-chip { width:52px; height:52px; border-radius:50%; background:#EAF3FB; color:#0277C6; display:flex; align-items:center; justify-content:center; flex:none; }
.bb-icon-chip svg { width:22px; height:22px; }
.bb-img-zoom img { transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }
.bb-img-zoom:hover img { transform:scale(1.03); }
/* Offset frame behind portraits: pale-blue block 78% × 82%, offset to bottom-left (or --right) */
.bb-offset { position:relative; padding:0 0 clamp(16px,2.4vw,32px) clamp(16px,2.4vw,32px); }
.bb-offset::before { content:""; position:absolute; left:0; bottom:0; width:78%; height:82%; background:#EAF3FB; border-radius:8px; z-index:0; }
.bb-offset--right { padding:0 clamp(16px,2.4vw,32px) clamp(16px,2.4vw,32px) 0; }
.bb-offset--right::before { left:auto; right:0; }
.bb-offset > * { position:relative; z-index:1; }

/* Hex pattern utilities */
.bb-bg-pattern-light { background-image:url(../assets/backgrounds/pattern-light.png); background-size:330px 286px; background-repeat:repeat; }
.bb-bg-pattern-dark  { background-image:url(../assets/backgrounds/pattern-dark.png);  background-size:330px 286px; background-repeat:repeat; }

/* =====================================================================
   SCROLL REVEAL (only if using code/reveal.js instead of Elementor Entrance Animations)
   Add attribute data-reveal="up|fade|left|right|scale|img" via Advanced > Attributes.
   ===================================================================== */
@media (prefers-reduced-motion:reduce) { [data-reveal] { opacity:1 !important; transform:none !important; } }

/* =====================================================================
   HEADER (Theme Builder header; add classes shown)
   ===================================================================== */
.bb-header { position:sticky; top:0; z-index:50; }
.bb-utility { background:#F4F8FC; border-bottom:1px solid #E3E9F0; height:38px; overflow:hidden; transition:height .3s ease; font-size:13px; color:#3A4553; }
.bb-mainbar { background:rgba(255,255,255,.97); -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid #E3E9F0; transition:box-shadow .3s ease; }
.bb-mainbar__inner { height:88px; transition:height .3s ease; }
.bb-logo img { width:56px; height:56px; transition:width .3s ease, height .3s ease; }
body.bb-scrolled .bb-utility { height:0; border-bottom-width:0; }
body.bb-scrolled .bb-mainbar { box-shadow:var(--bb-sh-header); }
body.bb-scrolled .bb-mainbar__inner { height:72px; }
body.bb-scrolled .bb-logo img { width:46px; height:46px; }
/* Active top-level menu item: blue text + 3px bar on bottom edge of the bar */
.bb-nav .elementor-item { position:relative; font:500 15px/1 var(--bb-font-body); color:#0B1F3A; transition:color .2s; }
.bb-nav .elementor-item:hover, .bb-nav .elementor-item.elementor-item-active, .bb-nav .current-menu-ancestor > .elementor-item { color:#0277C6; }
.bb-nav .elementor-item.elementor-item-active::after, .bb-nav .current-menu-ancestor > .elementor-item::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; border-radius:3px 3px 0 0; background:#0277C6; }
/* Dropdown motion */
.bb-nav .sub-menu { opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .22s ease, transform .22s ease, visibility .22s; border:1px solid #E3E9F0; border-radius:8px; box-shadow:var(--bb-sh-dropdown); }
.bb-nav .menu-item:hover > .sub-menu, .bb-nav .menu-item:focus-within > .sub-menu { opacity:1; visibility:visible; transform:translateY(0); }
.bb-nav .sub-arrow svg, .bb-nav .sub-arrow i { transition:transform .25s ease; }
.bb-nav .menu-item:hover > a .sub-arrow svg, .bb-nav .menu-item:hover > a .sub-arrow i { transform:rotate(180deg); }

/* Back to top */
.bb-totop { position:fixed; right:clamp(16px,2.4vw,32px); bottom:28px; z-index:80; width:52px; height:52px; border-radius:50%; background:#0B1F3A; color:#fff; border:0;
  display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--bb-sh-totop);
  opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .3s ease, transform .3s ease, visibility .3s, background .25s; }
.bb-totop:hover { background:#0277C6; }
body.bb-totop-on .bb-totop { opacity:1; visibility:visible; transform:translateY(0); }
@media (max-width:1299px) { .bb-totop { bottom:86px; } }

/* Mobile sticky call bar (<1300px) */
.bb-callbar { position:fixed; left:0; right:0; bottom:0; z-index:70; display:grid; grid-template-columns:1fr 1fr; gap:8px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.96); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-top:1px solid #E3E9F0; }
.bb-callbar a { display:flex; align-items:center; justify-content:center; gap:8px; height:50px; border-radius:999px; font:600 15px/1 var(--bb-font-body); text-decoration:none; }
.bb-callbar__call { background:#EAF3FB; color:#0B1F3A; } .bb-callbar__consult { background:#0277C6; color:#fff; }
@media (min-width:1300px) { .bb-callbar { display:none; } }
@media (max-width:1299px) { body { padding-bottom:70px; } }

/* =====================================================================
   FORMS (Elementor Form widget, class .bb-form on the widget)
   ===================================================================== */
.bb-form .elementor-field-label { font:600 14px/1.3 var(--bb-font-body); color:#0B1F3A; margin-bottom:7px; }
.bb-form .elementor-mark-required .elementor-field-label::after { color:#0277C6; }
.bb-form .elementor-field-textual { height:52px; border:1px solid #D6DEE8; border-radius:8px; background:#fff; padding:0 14px; font:400 16px/1.4 var(--bb-font-body); color:#0B1F3A; transition:border-color .2s, box-shadow .2s; }
.bb-form textarea.elementor-field-textual { height:auto; padding:14px; resize:vertical; }
.bb-form .elementor-field-textual:focus { border-color:#0277C6; box-shadow:var(--bb-focus-ring); outline:none; }
.bb-form .elementor-button { height:56px; padding:0 30px; border-radius:999px; background:#0277C6; font:600 15px/1 var(--bb-font-body); box-shadow:var(--bb-sh-submit); transition:background .25s, transform .25s; }
.bb-form .elementor-button:hover { background:#1486D4; transform:translateY(-2px); }

/* =====================================================================
   ACCORDION (Elementor Accordion / Nested Accordion, class .bb-faq)
   ===================================================================== */
.bb-faq .e-n-accordion-item, .bb-faq .elementor-accordion-item { border:1px solid #E3E9F0 !important; border-radius:8px; background:#fff; margin-bottom:10px; transition:background .3s, border-color .3s; overflow:hidden; }
.bb-faq .e-n-accordion-item[open], .bb-faq .elementor-accordion-item:has(.elementor-active) { border-color:#CFDDEB !important; background:#F9FBFD; }
.bb-faq .e-n-accordion-item-title, .bb-faq .elementor-tab-title { padding:22px 24px; font:600 clamp(17px,1.4vw,19px)/1.4 var(--bb-font-body); letter-spacing:-.005em; color:#0B1F3A; }
.bb-faq .e-n-accordion-item > [role="region"], .bb-faq .elementor-tab-content { padding:0 72px 24px 24px; font:400 17px/1.7 var(--bb-font-body); color:#3A4553; border:0; }