/*
Theme Name: BTA Legal
Theme URI: https://btalawgroup.com/
Author: BTA Legal
Description: Custom theme for BTA Legal - business, tax, asset protection and
  real estate law. Palette sampled from the firm's globe wordmark.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bta-legal
*/

/* Palette sampled from the wordmark: BTA/LEGAL #000060, globe #0040d0-#0080f0.
   Brass and cream are added as the counterweight - navy, blue and white alone
   read as one continuous family, and the page needs a second temperature. Brass
   carries small marks (rules, labels, markers); cream carries whole sections. */
:root{
  --navy:#000060; --navy-deep:#00003c; --blue:#0b46c8; --blue-hi:#0070f0;
  --brass:#9a6f1f; --brass-hi:#c08f2d; --brass-soft:#efe0c2;
  --cream:#faf5ea; --cream-rule:#e6d8be;
  --ink:#0d1526; --paper:#ffffff; --band:#e6ecf7; --card:#ffffff;
  /* body copy sits darker than a typical "muted" grey: at 17px on white, a light
     grey reads as washed out rather than quiet. */
  --muted:#44526e; --rule:#c3cfe6;
  --solid-head:rgba(255,255,255,.94);
  --shadow:0 1px 2px rgba(0,0,60,.08), 0 10px 30px rgba(0,0,60,.07);
  --serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --head-h:112px;
}

*{box-sizing:border-box}
/* Opt OUT of Chrome/Android "auto dark mode for web contents", which otherwise
   inverts this light palette and renders the site dark for anyone whose OS is in
   dark mode. "only light" is the signal that the page has no dark variant and
   must not be auto-darkened - without it the firm's white pages come out
   near-black on a large share of phones. */
html{scroll-behavior:smooth;color-scheme:only light}
body{color-scheme:only light}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;text-wrap:balance;margin:0}
.wrap{max-width:1020px;margin:0 auto;padding:0 30px}
.measure{max-width:64ch}
/* Eyebrows carry the brass, with a short rule so the colour reads as a deliberate
   mark rather than tinted text. */
.eyebrow{font-family:var(--mono);font-size:.71rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass);margin:0 0 .8rem;
  display:flex;align-items:center;gap:.7rem}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--brass-soft);max-width:78px}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:8px;top:8px;z-index:999;background:#fff;color:var(--navy);
  padding:10px 16px;border-radius:3px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ---------- header ---------- */
.masthead{position:sticky;top:0;z-index:60;height:var(--head-h);display:flex;
  align-items:center;background:transparent;border-bottom:1px solid transparent;
  transition:background .32s ease,border-color .32s ease,box-shadow .32s ease;
  --brand:#fff; --brandsub:rgba(255,255,255,.86); --navlink:rgba(255,255,255,.94)}
.masthead.solid{background:var(--solid-head);border-bottom-color:var(--rule);
  box-shadow:0 2px 18px rgba(0,0,60,.10);
  /* white bar, and the wordmark switches white -> blue. Deliberately #0b46c8
     (from the globe's gradient) not the wordmark's own #000060: at 3rem on
     white, #000060 reads as black and the switch to blue does not register. */
  --brand:#0b46c8; --brandsub:var(--navy); --navlink:var(--ink)}
@supports (backdrop-filter:blur(10px)){
  .masthead.solid{backdrop-filter:blur(10px) saturate(1.4)}
}
/* Fallback: if JS never runs, the bar can never gain .solid, so it would stay
   transparent while scrolling and the white wordmark would land on white
   content. Render it solid by default and let JS opt into transparency. */
html:not(.js) .masthead{background:var(--solid-head);border-bottom-color:var(--rule);
  --brand:#0b46c8; --brandsub:var(--navy); --navlink:var(--ink)}
/* Every page now has a dark band behind the bar (hero on home, navy banner
   elsewhere), so the header starts transparent everywhere and solidifies on
   scroll. One behaviour, no special case. */
.mast-inner{display:flex;align-items:center;justify-content:space-between;gap:26px;
  width:100%;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:16px;text-decoration:none}
.brand-globe{width:78px;height:78px;flex:none}
.brand-type{display:flex;flex-direction:column;line-height:1}
.brand-bta{font-size:3.05rem;font-weight:800;letter-spacing:-.008em;color:var(--brand);
  transition:color .32s ease;font-family:var(--sans)}
.brand-legal{font-size:1.02rem;font-weight:600;letter-spacing:.375em;margin-top:.3rem;
  color:var(--brandsub);transition:color .32s ease}
.mast-right{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.masthead nav ul{list-style:none;display:flex;gap:23px;margin:0;padding:0;flex-wrap:wrap}
.masthead nav a{font-size:.88rem;text-decoration:none;color:var(--navlink);
  padding-bottom:3px;border-bottom:2px solid transparent;transition:color .32s ease}
.masthead nav a:hover,.masthead nav a:focus-visible,
.masthead nav .current-menu-item>a{border-bottom-color:currentColor}
.mast-phone{font-family:var(--mono);font-size:.8rem;color:var(--navlink);
  text-decoration:none;white-space:nowrap;transition:color .32s ease;order:3}
.masthead nav{order:2}

/* hamburger: hidden on desktop, the only nav control on small screens */
.nav-toggle{display:none;order:4;background:none;border:0;padding:8px;cursor:pointer;
  color:var(--navlink);align-items:center;justify-content:center}
.nav-toggle:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.nav-bars{display:block;width:24px}
.nav-bars i{display:block;height:2px;background:currentColor;border-radius:2px;
  margin:5px 0;transition:transform .25s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:860px){
  .nav-toggle{display:flex}
  /* the open panel needs an opaque ground even when the bar itself is transparent */
  .masthead nav{position:absolute;top:100%;left:0;right:0;display:none;
    background:var(--solid-head);border-bottom:1px solid var(--rule);
    box-shadow:0 12px 24px rgba(0,0,60,.12)}
  .masthead nav.open{display:block}
  .masthead nav ul{flex-direction:column;gap:0;padding:6px 30px 14px}
  .masthead nav a{display:block;padding:13px 0;color:var(--ink);
    border-bottom:1px solid var(--rule);border-top:0}
  .masthead nav li:last-child a{border-bottom:0}
  .masthead.nav-open{background:var(--solid-head);border-bottom-color:transparent;
    --brand:#0b46c8; --brandsub:var(--navy); --navlink:var(--ink)}
}

/* ---------- hero slider ---------- */
.slider{position:relative;isolation:isolate;background:var(--navy-deep);
  margin-top:calc(-1 * var(--head-h));padding-top:var(--head-h);
  min-height:clamp(400px,48vw,520px);display:grid}
.slide{grid-area:1/1;position:relative;opacity:0;transition:opacity .9s ease;
  display:flex;align-items:center;pointer-events:none}
.slide.on{opacity:1;pointer-events:auto}
.slide .photo{position:absolute;inset:0;overflow:hidden;z-index:0}
/* The photo URL arrives as --photo on .photo (set inline by the template, which
   is the only place the theme directory is known). Blur is doing real work here,
   not decoration: the source images are 285x190, so it hides the upscale AND
   destroys the caption burned into each original. */
.slide .photo::before{content:"";position:absolute;inset:-8%;
  background-image:var(--photo);background-size:cover;background-position:center;
  filter:blur(7px) saturate(1.15);transform:scale(1.06)}
.slide .veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(0,0,60,.92) 0%,rgba(0,0,60,.74) 46%,
                                     rgba(0,0,60,.36) 100%)}
.slide .copy{position:relative;z-index:2;padding:40px 0 64px;color:#fff;width:100%}
.slide .copy .eyebrow{color:rgba(255,255,255,.72)}
.slide h2{font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.16;margin-bottom:.85rem;
  max-width:19ch;color:#fff}
.slide .copy p{margin:0 0 1.6rem;max-width:52ch;color:rgba(255,255,255,.88);font-size:1.02rem}

.btn{display:inline-block;background:var(--blue-hi);color:#fff;text-decoration:none;
  padding:12px 24px;border-radius:3px;font-size:.9rem;font-weight:600;border:0;
  cursor:pointer;font-family:inherit}
.btn:hover,.btn:focus-visible{background:#fff;color:var(--navy)}
.btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.6);
  font-family:var(--mono);font-weight:400}
.btn.ghost:hover,.btn.ghost:focus-visible{background:rgba(255,255,255,.16);color:#fff}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

.sl-arrow{position:absolute;z-index:4;top:calc(50% + 39px);transform:translateY(-50%);
  width:42px;height:42px;border-radius:50%;cursor:pointer;color:#fff;
  border:1px solid rgba(255,255,255,.42);background:rgba(0,0,60,.32);
  display:flex;align-items:center;justify-content:center;font-size:1.15rem;line-height:1;
  transition:background .25s ease,border-color .25s ease}
.sl-arrow:hover{background:rgba(0,0,60,.72);border-color:rgba(255,255,255,.8)}
.sl-arrow:focus-visible{outline:2px solid #fff;outline-offset:3px}
.sl-prev{left:16px} .sl-next{right:16px}
@media (max-width:820px){.sl-arrow{display:none}}
.sl-nav{position:absolute;z-index:3;bottom:22px;left:0;right:0;display:flex;
  justify-content:center;gap:10px}
.sl-nav button{width:34px;height:4px;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.36);border-radius:2px;transition:background .3s}
.sl-nav button[aria-current="true"]{background:#fff}
.sl-nav button:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---------- stripe ---------- */
.stripe{background:var(--navy);color:#fff;padding:15px 0;font-size:.9rem;
  border-top:2px solid var(--brass);border-bottom:2px solid var(--brass)}
.stripe .wrap{display:flex;gap:10px;justify-content:space-between;align-items:center;
  flex-wrap:wrap}
.stripe a{color:#fff;font-family:var(--mono);font-size:.84rem;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.45)}

/* ---------- pitch (the warm block that breaks up the blue) ---------- */
.pitch{padding:52px 0;background:var(--cream);
  border-top:1px solid var(--cream-rule);border-bottom:1px solid var(--cream-rule)}
.pitch h2{font-size:clamp(1.35rem,2.6vw,1.85rem);line-height:1.22;margin-bottom:.75rem;
  color:var(--navy)}
.pitch p{margin:0;color:#4a4132;font-size:1.01rem}
.pitch .eyebrow{color:var(--brass)}
.pitch .eyebrow::after{background:var(--brass-hi);opacity:.45}

/* ---------- practice areas ---------- */
.areas{padding:34px 0 8px}
.area{display:grid;grid-template-columns:minmax(150px,205px) 1fr;gap:30px;padding:24px 0;
  border-top:1px solid var(--rule);align-items:start}
.area:last-of-type{border-bottom:1px solid var(--rule)}
.area h3{font-size:1.2rem;color:var(--navy);padding-left:14px;position:relative}
.area h3::before{content:"";position:absolute;left:0;top:.28em;bottom:.28em;
  width:3px;background:var(--brass);border-radius:2px}
.area p{margin:.35rem 0 0;color:var(--muted);font-size:.96rem}
.area .more{font-size:.85rem;text-decoration:none;display:inline-block;margin-top:.55rem}
.area .more:hover{text-decoration:underline}

/* ---------- band ---------- */
.band{background:var(--band);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);padding:46px 0;margin-top:50px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:38px}
.cols h3{font-size:1.04rem;margin-bottom:.5rem;color:var(--navy)}
.cols p{color:var(--muted);font-size:.94rem;margin:0}
address{font-style:normal;color:var(--muted);font-size:.94rem;line-height:1.85}
address strong{color:var(--ink);font-family:var(--mono);font-size:.69rem;letter-spacing:.15em;
  text-transform:uppercase;display:block;margin-bottom:.35rem}

/* ---------- interior pages ---------- */
/* Navy banner, with the sticky header floating over it exactly as it does over
   the home hero - it gives interior pages the same weight and keeps one header
   behaviour across the whole site. */
.page-head{background:var(--navy-deep);color:#fff;
  margin-top:calc(-1 * var(--head-h));padding:calc(var(--head-h) + 42px) 0 42px;
  border-bottom:3px solid var(--brass)}
.page-head h1{font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.18;color:#fff}
.page-head p{margin:.7rem 0 0;color:rgba(255,255,255,.82);max-width:70ch}
.page-head .eyebrow{color:var(--brass-hi)}
.page-head .eyebrow::after{background:var(--brass-hi);opacity:.5}
.page-head a{color:#fff}
.entry{padding:44px 0 60px}
.entry .wrap{max-width:820px}
.entry p,.entry li{color:#2b3a54}
.entry h2{font-size:1.5rem;margin:2rem 0 .6rem;color:var(--navy)}
.entry h3{font-size:1.18rem;margin:1.6rem 0 .5rem;color:var(--navy)}
.entry ul,.entry ol{padding-left:1.2rem}
.entry img{margin:1.4rem 0;border-radius:4px}
.entry blockquote{margin:1.6rem 0;padding:.4rem 0 .4rem 1.2rem;
  border-left:3px solid var(--blue);color:var(--muted)}

/* ---------- practice areas page (expanding detail) ---------- */
.pa-list{padding:40px 0 10px}
.pa-item{border-top:1px solid var(--rule);padding:26px 0;
  display:grid;grid-template-columns:210px 1fr;gap:28px;align-items:start}
.pa-item:last-of-type{border-bottom:1px solid var(--rule)}
/* The source photos are 285x190 (bankruptcy 415x336), so they are used small and
   cropped to a common ratio rather than scaled up past what they can carry. */
.pa-thumb{width:210px;height:140px;object-fit:cover;border-radius:4px;
  border:1px solid var(--rule)}
.pa-item h2{font-size:1.32rem;color:var(--navy);margin:0 0 .45rem;
  padding-left:14px;position:relative}
.pa-item h2::before{content:"";position:absolute;left:0;top:.25em;bottom:.25em;
  width:3px;background:var(--brass);border-radius:2px}
.pa-text>p{margin:0;color:var(--muted);font-size:.97rem;max-width:70ch}
details.pa-more{margin-top:.8rem}
details.pa-more>summary{cursor:pointer;font-size:.85rem;color:var(--brass);font-weight:600;
  display:inline-flex;align-items:center;gap:.4rem;list-style:none;padding:2px 0}
details.pa-more>summary::-webkit-details-marker{display:none}
details.pa-more>summary::marker{content:""}
details.pa-more>summary:hover{text-decoration:underline}
details.pa-more>summary:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
details.pa-more>summary::after{content:"\25BE";font-size:.72em;transition:transform .2s ease}
details.pa-more[open]>summary::after{transform:rotate(180deg)}
details.pa-more>summary .lbl-less{display:none}
details.pa-more[open]>summary .lbl-more{display:none}
details.pa-more[open]>summary .lbl-less{display:inline}
.pa-body{margin-top:.9rem;padding:20px 22px;background:var(--cream);
  border-left:3px solid var(--brass);border-radius:0 5px 5px 0}
.pa-body p{margin:0 0 .85rem;color:#3d3728;font-size:.95rem}
.pa-body p:last-child{margin-bottom:0}
.pa-body h4{font-family:var(--sans);font-size:.76rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--brass);margin:1.1rem 0 .45rem}
.pa-body ul{margin:.3rem 0 .9rem;padding-left:1.15rem}
.pa-body li{font-size:.94rem;color:#3d3728;margin-bottom:.35rem}

/* contact-form consent acknowledgement: fine print, not body copy */
.wpcf7 .consent{font-size:.82rem;line-height:1.6;color:var(--muted);
  background:var(--band);border-left:3px solid var(--brass);padding:12px 15px;
  border-radius:0 4px 4px 0}
.wpcf7 .consent a{color:var(--blue)}
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],
.wpcf7 select,.wpcf7 textarea{width:100%;max-width:520px;padding:10px 12px;
  border:1px solid var(--rule);border-radius:3px;font:inherit;font-size:.95rem;
  background:#fff;color:var(--ink)}
.wpcf7 label{display:block;font-size:.9rem;color:var(--ink)}
.wpcf7 .wpcf7-submit{background:var(--blue-hi);color:#fff;border:0;cursor:pointer;
  padding:12px 26px;border-radius:3px;font-weight:600;font-size:.92rem;width:auto}
.wpcf7 .wpcf7-submit:hover{background:var(--navy)}
.wpcf7-not-valid-tip{color:#a6402f;font-size:.82rem}

/* the operating legal entity, stated at the head of the legal pages */
.entry .entity{font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.6rem);
  font-weight:600;color:var(--navy);line-height:1.25;margin:0 0 1.4rem;
  padding-bottom:.85rem;border-bottom:2px solid var(--brass)}
.entry .entity span{font-family:var(--sans);font-size:.62em;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brass);
  vertical-align:.12em;margin:0 .18em}

/* ---------- footer ---------- */
.site-footer{padding:34px 0 30px;font-size:.84rem;color:rgba(255,255,255,.72);
  background:var(--navy-deep);border-top:3px solid var(--brass)}
.site-footer a{color:#fff}
.footer-legal{padding-bottom:20px;margin-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.18)}
.disclaimer{margin:0 0 .9rem;font-size:.78rem;line-height:1.65;
  color:rgba(255,255,255,.62);max-width:92ch}
.disclaimer:last-child{margin-bottom:0}
.disclaimer strong{color:rgba(255,255,255,.9);font-weight:600}
.footer-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  align-items:center}
.footer-links{display:flex;gap:20px;flex-wrap:wrap}
.footer-links a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);
  padding-bottom:1px}
.footer-links a:hover{border-bottom-color:var(--brass-hi);color:var(--brass-hi)}

@media (max-width:680px){
  :root{--head-h:82px}
  .area{grid-template-columns:1fr;gap:6px}
  /* the practice-area rows must drop their fixed thumbnail column too, or a
     210px image plus text is unreadable on a phone */
  .pa-item{grid-template-columns:1fr;gap:14px}
  .pa-thumb{width:100%;height:170px}
  .masthead nav ul{gap:14px}
  .brand-bta{font-size:2rem}
  .brand-globe{width:52px;height:52px}
  .brand-legal{font-size:.72rem;letter-spacing:.32em}
  .footer-bar{flex-direction:column;align-items:flex-start;gap:12px}
  .footer-links{gap:14px}
  .slide .copy{padding:28px 0 56px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}