/* TimeNet Law site chrome: the shared header and footer.
   Link this file on every page, then paste header.html and footer.html between the markers.
   Everything is namespaced tnl- so it sits on top of any page's own stylesheet. */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:wght@500;600&family=Source+Sans+3:wght@400;500;600;700&display=swap");

:root{
  --tnl-cream:#f5f3ef;
  --tnl-paper:#fffefb;
  --tnl-navy:#1a2b4a;
  --tnl-navy-deep:#132038;
  --tnl-ink:#16233b;
  --tnl-ink-2:#47536a;
  --tnl-ink-3:#6f788a;
  --tnl-forest:#2d5a3d;
  --tnl-forest-deep:#20452e;
  --tnl-line:#dcd8cf;
  --tnl-on-navy:#f5f3ef;
  --tnl-on-navy-2:#cdd3de;
  --tnl-on-navy-line:rgba(245,243,239,.18);
  --tnl-display:"Newsreader",Georgia,"Times New Roman",serif;
  --tnl-body:"Source Sans 3","Helvetica Neue",Arial,sans-serif;
  --tnl-header-h:70px;
}
html{scroll-padding-top:calc(var(--tnl-header-h) + 16px)}
.tnl-header *,.tnl-footer *{box-sizing:border-box}
.tnl-header .tnl-wrap,.tnl-footer .tnl-wrap{max-width:1200px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}

/* The live style.css styles nav and footer by tag (nav is position:fixed there). These undo that inside the chrome. */
.tnl-header .tnl-nav{position:static;margin-right:6px;top:auto;left:auto;right:auto;z-index:auto;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;box-shadow:none;padding:0;margin:0 0 0 auto;height:auto;width:auto}
.tnl-footer{padding:0;margin:0}
.tnl-footer .tnl-wrap{display:block}
/* header */
.tnl-header{position:sticky;top:0;z-index:50;background:rgba(245,243,239,.93);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--tnl-line);font-family:var(--tnl-body);font-size:16px;line-height:1.3;color:var(--tnl-ink)}
.tnl-header .tnl-wrap{display:flex;align-items:center;gap:16px;height:var(--tnl-header-h)}
.tnl-brand{display:flex;align-items:center;gap:11px;color:var(--tnl-ink);text-decoration:none;font-family:var(--tnl-display);font-weight:600;font-size:23px;letter-spacing:-.01em;white-space:nowrap}
.tnl-brand img{width:32px;height:32px;border-radius:7px;display:block}
.tnl-nav{margin-left:auto}
.tnl-nav ul,.tnl-menu-panel ul{display:flex;gap:34px;list-style:none;margin:0;padding:0}
.tnl-nav li,.tnl-menu-panel li,.tnl-cols li{margin:0;padding:0;line-height:inherit}
.tnl-nav a,.tnl-menu-panel a{color:var(--tnl-ink-2);text-decoration:none;font-weight:600;font-size:17px;letter-spacing:.005em}
.tnl-nav a:hover,.tnl-menu-panel a:hover{color:var(--tnl-ink)}
.tnl-nav a[aria-current="page"],.tnl-menu-panel a[aria-current="page"]{color:var(--tnl-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--tnl-forest);text-underline-offset:6px;text-decoration-thickness:2px}
.tnl-btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--tnl-body);font-weight:700;font-size:16px;padding:.65em 1.15em;margin-left:10px;border-radius:8px;background:var(--tnl-forest);color:#fff;text-decoration:none;white-space:nowrap;border:1px solid transparent;transition:background .15s ease}
.tnl-btn:hover{background:var(--tnl-forest-deep);color:#fff}
.tnl-header a:focus-visible,.tnl-footer a:focus-visible,.tnl-menu summary:focus-visible{outline:2px solid var(--tnl-forest);outline-offset:3px}

/* phone menu: a <details> so it works with no script */
.tnl-menu{display:none;position:static}
.tnl-menu summary{list-style:none;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--tnl-line);border-radius:8px;background:var(--tnl-paper)}
.tnl-menu summary::-webkit-details-marker{display:none}
.tnl-menu summary .tnl-ico{display:block;width:18px;height:14px;position:relative}
.tnl-menu summary .tnl-ico i{position:absolute;left:0;width:18px;height:2px;background:var(--tnl-ink);border-radius:1px}
.tnl-menu summary .tnl-ico i:nth-child(1){top:0}
.tnl-menu summary .tnl-ico i:nth-child(2){top:6px}
.tnl-menu summary .tnl-ico i:nth-child(3){top:12px}
.tnl-menu summary .tnl-x{display:none;font-size:26px;line-height:1;color:var(--tnl-ink);font-family:var(--tnl-body)}
.tnl-menu.is-open summary .tnl-ico{display:none}
.tnl-menu.is-open summary .tnl-x{display:block}
.tnl-menu-panel{position:absolute;left:0;right:0;top:100%;background:var(--tnl-cream);border-bottom:1px solid var(--tnl-line);box-shadow:0 18px 30px -20px rgba(19,32,56,.35)}
.tnl-menu-panel ul{flex-direction:column;gap:0;max-width:1200px;margin:0 auto;padding:8px max(20px,env(safe-area-inset-left,0px)) 14px}
.tnl-menu-panel li{border-top:1px solid var(--tnl-line)}
.tnl-menu-panel li:first-child{border-top:0}
.tnl-menu-panel a{display:block;padding:14px 0;font-size:19px}

@media (max-width:900px){
  .tnl-nav{display:none}
  .tnl-btn.tnl-header-btn{margin-left:auto}
  .tnl-menu{display:block}
}
@media (max-width:420px){
  .tnl-brand{font-size:19px}
  .tnl-btn.tnl-header-btn{font-size:14px;padding:.5em .8em}
}

/* footer */
.tnl-footer{background:var(--tnl-navy-deep);color:var(--tnl-on-navy-2);font-family:var(--tnl-body);font-size:15px;line-height:1.5;border-top:1px solid var(--tnl-on-navy-line)}
.tnl-footer .tnl-wrap{padding-top:56px;padding-bottom:28px}
.tnl-cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;gap:36px 40px}
.tnl-cols h3{margin:0 0 12px;font-family:var(--tnl-body);font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--tnl-on-navy-2)}
.tnl-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tnl-cols a{color:var(--tnl-on-navy);text-decoration:none}
.tnl-cols a:hover{text-decoration:underline;text-underline-offset:3px}
.tnl-about .tnl-brand{color:#fff;margin-bottom:12px}
.tnl-footer p{margin:0;color:var(--tnl-on-navy-2);font-size:15px;line-height:1.5}
.tnl-about p{max-width:22em;color:#d6dbe5}
.tnl-about .tnl-phone{display:block;margin-top:14px;font-family:var(--tnl-display);font-size:24px;color:#fff;text-decoration:none;font-variant-numeric:tabular-nums}
.tnl-about .tnl-phone small{display:block;font-family:var(--tnl-body);font-size:14px;color:var(--tnl-on-navy-2)}
.tnl-bottom{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;margin-top:44px;padding-top:20px;border-top:1px solid var(--tnl-on-navy-line);font-size:14px}
.tnl-bottom a{color:inherit;text-decoration:none}
.tnl-bottom a:hover{text-decoration:underline}
@media (max-width:900px){
  .tnl-cols{grid-template-columns:1fr 1fr}
  .tnl-about{grid-column:1 / -1}
}
@media (max-width:540px){
  .tnl-cols{grid-template-columns:1fr;gap:28px}
  .tnl-footer .tnl-wrap{padding-top:44px}
}