/* =====================================================================
   ITL 2026 redesign - override layer for the OTM theme (getinjuryanswers)
   Phase 2 build 10/12/26 for WP Engine STAGING. Loads after assets/css/main.css.
   Path in theme: assets/css/itl-2026.css   Fonts: assets/fonts/itl/
   ===================================================================== */

/* ---- Fonts (self-hosted, SIL OFL 1.1; licenses in assets/fonts/itl/) ---- */
@font-face{font-family:"ITL Marcellus";src:url("../fonts/itl/marcellus-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"ITL Mulish";src:url("../fonts/itl/mulish-var-latin.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"ITL Mulish";src:url("../fonts/itl/mulish-italic-var-latin.woff2") format("woff2");font-weight:400 800;font-style:italic;font-display:swap}
/* Metric-matched fallbacks: reduce layout shift while web fonts load (tune on staging) */
@font-face{font-family:"ITL Head Fallback";src:local("Georgia");size-adjust:97%;ascent-override:95%;descent-override:28%}
@font-face{font-family:"ITL Body Fallback";src:local("Arial");size-adjust:106%;ascent-override:95%;descent-override:24%}

:root{
  --itl-navy:#00194A; --itl-gold:#B6944F; --itl-cta:#A8411B; --itl-cta-hover:#8A3516; --itl-cta-active:#6E2A12;
  --itl-ink:#1B2333; --itl-slate:#4E5A6E; --itl-ivory:#F7F4EE; --itl-white:#FFFFFF; --itl-error:#B42318;
  --itl-font-head:"ITL Marcellus","ITL Head Fallback",Georgia,serif;
  --itl-font-body:"ITL Mulish","ITL Body Fallback",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --itl-s1:4px;--itl-s2:8px;--itl-s3:12px;--itl-s4:16px;--itl-s5:24px;--itl-s6:32px;--itl-s7:48px;--itl-s8:64px;--itl-s9:96px;
  --itl-r1:4px;--itl-r2:8px;
  --itl-fs-display:clamp(2.125rem,1.4rem + 3.1vw,3.625rem);
  --itl-fs-h1:clamp(1.875rem,1.4rem + 2vw,2.875rem);
  --itl-fs-h2:clamp(1.625rem,1.3rem + 1.4vw,2.25rem);
  --itl-fs-h3:clamp(1.375rem,1.25rem + .5vw,1.625rem);
  --itl-fs-body:clamp(1.0625rem,1.03rem + .15vw,1.125rem);
  --itl-fs-small:.875rem;
  --itl-sticky-h:62px;
}

/* ---- Base ---- */
body{font-family:var(--itl-font-body);font-size:var(--itl-fs-body);line-height:1.65;color:var(--itl-ink);-webkit-font-smoothing:antialiased}
h1,h2,h3,.h1,.h2,.h3,.page-title{font-family:var(--itl-font-head);font-weight:400;color:var(--itl-navy);letter-spacing:.005em;line-height:1.15}
h1,.h1,.page-title{font-size:var(--itl-fs-h1)} h2,.h2{font-size:var(--itl-fs-h2)} h3,.h3{font-size:var(--itl-fs-h3)}
h4,h5,h6{font-family:var(--itl-font-body);font-weight:800;color:var(--itl-navy)}
p,li{max-width:70ch}
a{color:var(--itl-navy);text-decoration-color:var(--itl-gold);text-underline-offset:3px}
a:hover{color:#0B2B6B}
:focus-visible{outline:3px solid var(--itl-navy);outline-offset:3px}
.bg-primary :focus-visible,.header :focus-visible,.footer .bg-primary :focus-visible{outline-color:var(--itl-gold)}
/* Phone numbers and buttons always in Mulish (Marcellus numerals are old-style) */
a[href^="tel:"]{font-family:var(--itl-font-body);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---- Bootstrap 4 colour hooks used by the OTM theme ---- */
.bg-primary{background-color:var(--itl-navy)!important}
.bg-dark{background-color:#000F33!important}
.text-primary{color:var(--itl-navy)!important}
.text-secondary{color:var(--itl-gold)!important} /* only on navy */

/* ---- Buttons ---- */
.btn{font-family:var(--itl-font-body);font-weight:800;border-radius:var(--itl-r1);min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:background-color .15s,color .15s,transform .15s}
/* Orange = call/CTA only: tel buttons, form submits, sticky call. Other .btn-secondary = navy (gold on navy bands). */
.btn-secondary{background:var(--itl-navy)!important;border-color:var(--itl-navy)!important;color:#fff!important}
.btn-secondary:hover{background:#0B2B6B!important;border-color:#0B2B6B!important}
.bg-primary .btn-secondary,.bg-dark .btn-secondary,.footer .btn-secondary{background:var(--itl-gold)!important;border-color:var(--itl-gold)!important;color:var(--itl-navy)!important}
.btn-itl-call,.wpcf7 input.wpcf7-submit,a.btn[href^="tel:"]{background:var(--itl-cta)!important;border-color:var(--itl-cta)!important;color:#fff!important}
.btn-itl-call:hover,.wpcf7 input.wpcf7-submit:hover,a.btn[href^="tel:"]:hover{background:var(--itl-cta-hover)!important;border-color:var(--itl-cta-hover)!important}
.btn-itl-call:active,.wpcf7 input.wpcf7-submit:active,a.btn[href^="tel:"]:active{background:var(--itl-cta-active)!important;transform:translateY(1px)}
.btn-itl-outline{background:transparent;border:2px solid var(--itl-navy);color:var(--itl-navy)}
.btn-itl-outline:hover{background:var(--itl-navy);color:#fff}
.bg-primary .btn-itl-outline,.itl-hero .btn-itl-outline{border-color:var(--itl-gold);color:#fff}
.bg-primary .btn-itl-outline:hover,.itl-hero .btn-itl-outline:hover{background:var(--itl-gold);color:var(--itl-navy)}
.wpcf7 form.submitting .wpcf7-submit{background:#C9CCD3!important;border-color:#C9CCD3!important;color:var(--itl-slate)!important}
@media (prefers-reduced-motion:reduce){.btn,.itl-card{transition:none}}

/* ---- Header (works with Max Mega Menu) ---- */
.header.bg-primary{border-bottom:2px solid var(--itl-gold)}
.header .small-phone-text{font-family:var(--itl-font-body);font-weight:800;letter-spacing:.14em;font-size:.6875rem;color:#C9CFDC}
#mega-menu-wrap-main-menu #mega-menu-main-menu>li.mega-menu-item>a.mega-menu-link{font-family:var(--itl-font-body)!important;font-weight:700!important}

/* ---- Hero (front page) ---- */
.itl-hero{background:var(--itl-navy);color:#fff}
.itl-hero .itl-kicker{font-family:var(--itl-font-head);font-size:var(--itl-fs-display);line-height:1.05;color:#fff;margin:0 0 var(--itl-s4)}
.itl-hero h1{font-family:var(--itl-font-body);font-weight:800;font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;color:var(--itl-gold);margin:0 0 var(--itl-s4)}
.itl-hero .itl-lead{font-size:clamp(1.125rem,1.05rem + .3vw,1.25rem);color:#E6E9F0;max-width:36rem}

/* ---- Trust bar ---- */
.itl-trust{display:grid;grid-template-columns:repeat(2,1fr);background:#000F33;border-top:1px solid rgba(182,148,79,.45)}
@media (min-width:992px){.itl-trust{grid-template-columns:repeat(4,1fr)}}
.itl-trust>div{display:flex;gap:12px;align-items:center;padding:16px 20px;color:#E6E9F0;font-size:.9375rem}
.itl-trust b{display:block;color:#fff}
.itl-trust svg{color:var(--itl-gold);flex:none}

/* ---- Practice cards ---- */
.itl-card{position:relative;background:#fff;border:1px solid #E3DDCF;border-radius:var(--itl-r2);padding:var(--itl-s5);display:flex;flex-direction:column;gap:10px;transition:box-shadow .2s,border-color .2s}
.itl-card:hover,.itl-card:focus-within{box-shadow:0 14px 30px rgba(0,25,74,.14);border-color:var(--itl-gold)}
.itl-card .itl-card-icon{width:52px;height:52px;border-radius:var(--itl-r2);background:var(--itl-navy);color:var(--itl-gold);display:flex;align-items:center;justify-content:center}
.itl-card a.stretched-link::after{content:"";position:absolute;inset:0}

/* ---- Forms (CF7 2846) ---- */
.wpcf7 .form-control{border:1.5px solid var(--itl-slate);border-radius:var(--itl-r1);min-height:46px;font-family:var(--itl-font-body);font-size:1rem;color:var(--itl-ink)}
.wpcf7 .form-control:focus{border-color:var(--itl-navy);box-shadow:0 0 0 3px rgba(0,25,74,.18)}
.wpcf7 label{font-weight:700;font-size:.875rem;color:var(--itl-ink)}
.wpcf7-not-valid-tip{color:var(--itl-error);font-size:.875rem}
.itl-form-card{background:#fff;border-radius:var(--itl-r2);border-top:4px solid var(--itl-gold);padding:var(--itl-s5);box-shadow:0 18px 40px rgba(0,0,0,.22);color:var(--itl-ink)}
.itl-form-card--short textarea.form-control{min-height:72px;height:72px}
.itl-disclaimer{font-size:var(--itl-fs-small);color:var(--itl-slate);line-height:1.5}

/* ---- Sticky mobile call bar ---- */
.itl-sticky-call{position:fixed;left:0;right:0;bottom:0;z-index:1030;display:grid;grid-template-columns:2fr 1fr;min-height:var(--itl-sticky-h);padding-bottom:env(safe-area-inset-bottom);background:var(--itl-navy);box-shadow:0 -4px 14px rgba(0,25,74,.25)}
.itl-sticky-call a{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800;color:#fff;text-decoration:none;min-height:var(--itl-sticky-h)}
.itl-sticky-call .itl-sc-call{background:var(--itl-cta)}
.itl-sticky-call .itl-sc-form{border-left:1px solid rgba(255,255,255,.25);font-size:.875rem;text-align:center;line-height:1.15}
@media (max-width:991.98px){body{padding-bottom:calc(var(--itl-sticky-h) + env(safe-area-inset-bottom))}}
body.itl-form-focus .itl-sticky-call{transform:translateY(110%)}
@media (min-width:992px){.itl-sticky-call{display:none}}
/* keep the chat launcher above the bar on phones (selector to confirm on staging) */
@media (max-width:991.98px){[id*="clientchat"],[class*="clientchat"]{bottom:calc(var(--itl-sticky-h) + 12px)!important}}

/* ---- Footer ---- */
.footer .bg-primary{border-top:3px solid var(--itl-gold)}
.itl-ad-line{font-size:var(--itl-fs-small);color:#D7DBE6}

/* =====================================================================
   Phase 2 additions (10/12/26)
   ===================================================================== */
.itl-skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:#fff;color:var(--itl-navy);padding:12px 16px;font-weight:800}
.itl-skip-link:focus{left:12px;top:12px}
.itl-ico{flex:none;vertical-align:middle}
.header .phone-wrapper .btn{gap:8px}
.header .phone-wrapper .btn .itl-ico{width:18px;height:18px}

/* ---- Hero with real <img> (LCP) ---- */
.hero.itl-hero{position:relative;overflow:hidden;padding:0!important;background:var(--itl-navy)!important;background-image:none!important;min-height:0}
.itl-hero-media{display:block}
.itl-hero-media img{display:block;width:100%;height:auto;aspect-ratio:1152/1124}
.itl-hero-inner{position:relative;z-index:1}
.itl-hero-copy{margin-top:-30vw;padding-bottom:var(--itl-s6)}
.itl-hero .itl-eyebrow{margin:0 0 var(--itl-s3)}
.itl-hero .itl-kicker span{display:block;font-size:.62em;color:#F1E7D2;margin-top:6px}
.itl-hero .itl-lead{margin:0 0 var(--itl-s5)}
.itl-hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.itl-hero-ctas .btn{min-height:52px;padding:12px 22px;font-size:1.0625rem}
.itl-hero-fee{font-size:var(--itl-fs-small);color:#D7DBE6;max-width:34rem;margin:var(--itl-s4) 0 var(--itl-s2)}
.itl-hero-lang{display:flex;align-items:center;gap:8px;font-size:.9375rem;margin:0;color:var(--itl-gold)}
.itl-hero-lang a{color:#fff;text-decoration:underline;text-decoration-color:var(--itl-gold)}
@media (min-width:576px){
  .itl-hero-media,.itl-hero-media img{position:absolute;inset:0;width:100%;height:100%}
  .itl-hero-media img{object-fit:cover;object-position:65% 30%;max-width:none;aspect-ratio:auto}
  .itl-hero-copy{margin-top:0;padding-top:var(--itl-s8);padding-bottom:var(--itl-s8)}
  .hero.itl-hero{min-height:560px;display:flex;align-items:center}
  .hero.itl-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,25,74,.92) 0,rgba(0,25,74,.75) 45%,rgba(0,25,74,0) 70%);z-index:0}
}
@media (min-width:992px){.hero.itl-hero{min-height:620px}.itl-hero-copy{padding-top:96px;padding-bottom:96px}}

/* ---- Home content block + form ---- */
.itl-home-main .content-container{border-radius:0}
.vertical-form.itl-form-card-wrap{border-top:4px solid var(--itl-gold);border-radius:var(--itl-r2);scroll-margin-top:24px}
.vertical-form .itl-form-title{font-family:var(--itl-font-head);font-weight:400;color:#fff}

/* ---- Practice cards ---- */
.itl-practice{background:var(--itl-ivory)}
.itl-practice .content-container{background:transparent}
.itl-card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:768px){.itl-card-grid{grid-template-columns:repeat(3,1fr);gap:16px}}
@media (min-width:1200px){.itl-card-grid{grid-template-columns:repeat(4,1fr)}}
.itl-card-link{font-weight:800;color:var(--itl-navy);text-decoration:none;line-height:1.3}

/* ---- Reviews (static) ---- */
.itl-review-grid{display:grid;gap:16px}
@media (min-width:768px){.itl-review-grid{grid-template-columns:repeat(2,1fr)}}
.itl-review{margin:0;background:#fff;border:1px solid #E3DDCF;border-left:4px solid var(--itl-gold);border-radius:var(--itl-r2);padding:var(--itl-s5)}
.itl-review blockquote{font-size:1.0625rem;margin:0 0 var(--itl-s4)}
.itl-review figcaption{display:flex;flex-direction:column;gap:4px}
.itl-review-name{font-weight:800;color:var(--itl-navy)}
.testimonial-disclaimer{color:var(--itl-slate);max-width:none}

/* ---- As seen on ---- */
.itl-seen{background:#fff;padding:var(--itl-s7) 0;border-top:1px solid #E3DDCF}
.itl-seen-title{font-size:var(--itl-fs-h3);margin-bottom:var(--itl-s3)}
.itl-seen-list{list-style:none;padding:0;margin:0 0 var(--itl-s3);display:flex;flex-wrap:wrap;gap:8px 28px}
.itl-seen-list li{font-family:var(--itl-font-head);font-size:1.375rem;color:var(--itl-navy)}
.itl-seen-note{font-size:var(--itl-fs-small);color:var(--itl-slate)}
.itl-yt{position:relative;aspect-ratio:16/9;background:var(--itl-navy);border-radius:var(--itl-r2);overflow:hidden}
.itl-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.itl-yt-btn{position:absolute;inset:0;width:100%;border:0;background:linear-gradient(135deg,#00194A,#0B2B6B);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;cursor:pointer;padding:16px}
.itl-yt-play{width:68px;height:68px;border-radius:50%;background:var(--itl-gold);position:relative}
.itl-yt-play::after{content:"";position:absolute;left:27px;top:21px;border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent #fff}
.itl-yt-label{font-weight:700;max-width:28rem;text-align:center}

/* ---- CTA band ---- */
.itl-cta-band{padding:var(--itl-s7) 0;border-top:3px solid var(--itl-gold)}
.itl-cta-title{font-family:var(--itl-font-head);font-size:var(--itl-fs-h2);color:#fff;margin:0 0 6px}
.itl-cta-sub{color:#D7DBE6;margin:0}
.itl-cta-band .btn-itl-outline{border-color:var(--itl-gold);color:#fff}

/* ---- Section rhythm for existing blocks ---- */
.why-choose,.why-hire,.compensation,.faq-section,.why-you-might-need{font-family:var(--itl-font-body)}
.itl-ad-line{max-width:none}
.itl-practice-more{list-style:none;padding:0;margin:var(--itl-s5) 0 0;columns:2;column-gap:24px}
@media (min-width:768px){.itl-practice-more{columns:3}}
@media (min-width:1200px){.itl-practice-more{columns:4}}
.itl-practice-more li{break-inside:avoid;padding:6px 0;border-bottom:1px solid #E3DDCF;font-size:.9375rem}
.itl-practice-more a{text-decoration:none;font-weight:700}

/* Hero/CTA buttons: natural width, side by side (override theme full-width .btn rules) */
.itl-hero-ctas .btn{width:auto!important;flex:0 0 auto;display:inline-flex!important;margin:0!important}
@media (max-width:575.98px){.itl-hero-ctas .btn{flex:1 1 100%}}
.itl-review-grid--single{grid-template-columns:1fr!important;max-width:720px;margin:0 auto}
.itl-review-grid--single .itl-review{text-align:left}

/* ITL 2026 consultation CTA (header) */
.itl-hdr-consult{background:transparent!important;border:1px solid rgba(255,255,255,.7)!important;color:#fff!important;font-weight:700;white-space:nowrap}
.itl-hdr-consult:hover,.itl-hdr-consult:focus{background:#fff!important;color:var(--itl-navy)!important}

/* ITL 2026 logo (no APC, Evoke 10.5.26 package) */
a.logo{width:220px;max-width:100%;flex:0 0 auto} /* the link is a flex item; give it a real width */
.logo .itl-logo{display:block;width:100%;max-width:100%;height:auto}

/* ITL 10/12 QA P1: mobile logo sat flush on the header's top edge (looked clipped); give it breathing room */
@media (max-width:767.98px){.header .header-container{padding-top:12px}a.logo{width:200px}}
/* ITL 10/12 QA P1: Turnstile widget is a fixed 300px; the desktop sidebar form is 250px wide. Scale it down only when its box is narrower than 300px */
.wpcf7 form{container-type:inline-size}
@container (max-width:299.98px){.wpcf7 .cf-turnstile{transform:scale(.83);transform-origin:0 0;height:54px;overflow:visible}}