/* A Students' Lawyer - consolidated WPCode CSS snippets. Generated 2026-10-16. */

/* ---- snippet 84844 ---- */
/* ------------------------------------------------------------------
   Homepage "Start here" router — the six doors under the hero.
   Paired with the PHP snippet "ASL: Homepage — Start here router".
   ------------------------------------------------------------------ */

.asl-router{
  background: #0A2238;
  padding: 74px 20px 78px;
  border-top: 1px solid rgba(197,150,63,0.20);
}
.asl-router-in{
  max-width: 1240px;
  margin: 0 auto;
}
.asl-router-eyebrow{
  font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #D9B65C;
  margin: 0 0 14px;
}
.asl-router-h{
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.08;
  font-size: clamp(30px, 3.4vw, 42px);
  color: #F5F2EB;
  margin: 0 0 14px;
}
.asl-router-sub{
  font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #A2AEBC;
  margin: 0 0 38px;
  max-width: 62ch;
}

.asl-router-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 1023px){
  .asl-router-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px){
  .asl-router-grid{ grid-template-columns: 1fr; }
  .asl-router{ padding: 52px 18px 56px; }
}

.asl-door{
  display: flex;
  flex-direction: column;
  padding: 26px 24px 22px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(197,150,63,0.22);
  text-decoration: none !important;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.asl-door:hover,
.asl-door:focus-visible{
  background: rgba(255,255,255,0.075);
  border-color: rgba(197,150,63,0.65);
  transform: translateY(-2px);
}
.asl-door-kicker{
  font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #C4963F;
  margin-bottom: 12px;
}
.asl-door-title{
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 21px;
  line-height: 1.22;
  letter-spacing: -0.008em;
  color: #F5F2EB;
  margin-bottom: 10px;
}
.asl-door-body{
  font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: #9AA7B6;
  margin-bottom: 20px;
}
.asl-door-go{
  font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: #D9B65C;
  margin-top: auto;
}
.asl-door:hover .asl-door-go{ color: #E8CC7F; }

.asl-door-cta{
  background: rgba(197,150,63,0.10);
  border-color: rgba(197,150,63,0.45);
}
.asl-door-cta:hover{
  background: rgba(197,150,63,0.17);
  border-color: rgba(197,150,63,0.85);
}

.asl-router-foot{
  font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  color: #8D9AAA;
  margin: 30px 0 0;
}
.asl-router-foot a{
  color: #D9B65C;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.asl-router-foot a:hover{ text-decoration: underline; }

/* ------------------------------------------------------------------
   asl-hero-tighten — the homepage hero was running 1,069px tall on a
   900px screen, so nothing actionable was visible without scrolling.
   ------------------------------------------------------------------ */
@media (min-width: 993px){
  .fl-node-xa43qmizpbhd .fl-heading-text,
  .fl-node-xa43qmizpbhd .fl-heading,
  .fl-node-xa43qmizpbhd h1{
    font-size: clamp(38px, 3.9vw, 54px) !important;
    line-height: 1.08 !important;
  }
  .fl-node-xa43qmizpbhd > .fl-row-content-wrap{
    padding-top: 24px !important;
    padding-bottom: 30px !important;
  }
}

/* ------------------------------------------------------------------
   Published fees, immediately under the six doors. The numbers were
   already on the fees page; this puts them where the second question
   gets asked. Paper ground so it reads as a change of subject from
   the navy router above it.
   ------------------------------------------------------------------ */
.asl-fees{
  background: #F6F3EA;
  padding: 70px 20px 74px;
}
.asl-fees-in{ max-width: 1240px; margin: 0 auto; }
.asl-fees-eyebrow{
  font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
  font-weight: 600; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: #A97F2E; margin: 0 0 14px;
}
.asl-fees-h{
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-weight: 500; letter-spacing: -0.015em; line-height: 1.08;
  font-size: clamp(28px, 3.1vw, 40px); color: #0A2238; margin: 0 0 14px;
}
.asl-fees-sub{
  font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.6; color: #55606E;
  margin: 0 0 34px; max-width: 62ch;
}
.asl-fees-list{ list-style: none; margin: 0; padding: 0; }
.asl-fee{
  display: grid;
  grid-template-columns: minmax(220px, max-content) 1fr max-content;
  grid-template-areas: "name rule price" "note note note";
  align-items: baseline;
  column-gap: 14px;
  padding: 16px 0 14px;
  border-top: 1px solid #DED6C6;
}
.asl-fee:last-child{ border-bottom: 1px solid #DED6C6; }
.asl-fee-name{
  grid-area: name;
  font-family: "Newsreader", Georgia, serif;
  font-size: 20px; font-weight: 500; color: #0A2238;
}
.asl-fee-rule{
  grid-area: rule;
  border-bottom: 1px dotted #C6BCA8;
  transform: translateY(-4px);
}
.asl-fee-price{
  grid-area: price;
  font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
  font-size: 17px; font-weight: 600; color: #0A2238;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.asl-fee-note{
  grid-area: note;
  font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
  font-size: 13.5px; line-height: 1.5; color: #6B7684;
  margin-top: 5px; max-width: 78ch;
}
.asl-fees-foot{
  font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
  font-size: 14.5px; line-height: 1.6; color: #55606E;
  margin: 26px 0 0; max-width: 78ch;
}
.asl-fees-foot a{ color: #A97F2E; font-weight: 600; text-decoration: none; }
.asl-fees-foot a:hover{ text-decoration: underline; }

@media (max-width: 639px){
  .asl-fees{ padding: 50px 18px 54px; }
  .asl-fee{
    grid-template-columns: 1fr max-content;
    grid-template-areas: "name price" "note note";
    column-gap: 12px;
  }
  .asl-fee-rule{ display: none; }
  .asl-fee-name{ font-size: 18px; }
}

/* ------------------------------------------------------------------
   Homepage practice-area grids.

   The cards were floated onto the beige section ground, so every gutter
   and every card shorter than its neighbour showed a band of beige, and
   an incomplete last row left an empty beige box. The grid is now one
   continuous field the colour of the cards, ruled by hairlines, with
   rows of equal height. A missing card at the end of a row now shows
   nothing at all.
   ------------------------------------------------------------------ */
.fl-node-1q62z5dx4y9r .fl-post-grid > ul{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: #FBF9F3 !important;
  border-top: 1px solid #E6DFD0 !important;
  border-left: 1px solid #E6DFD0 !important;
}
.fl-node-1q62z5dx4y9r .fl-post-grid > ul::before,
.fl-node-1q62z5dx4y9r .fl-post-grid > ul::after{ content: none !important; display: none !important; }

.fl-node-1q62z5dx4y9r .fl-post-grid > ul > li.fl-post-column{
  float: none !important;
  clear: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  display: flex !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #FBF9F3 !important;
  border-right: 1px solid #E6DFD0 !important;
  border-bottom: 1px solid #E6DFD0 !important;
}
.fl-node-1q62z5dx4y9r .fl-post-grid > ul > li.fl-post-column > .fl-post-grid-post{
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 900px){
  .fl-node-1q62z5dx4y9r .fl-post-grid > ul{ grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px){
  .fl-node-1q62z5dx4y9r .fl-post-grid > ul{ grid-template-columns: 1fr !important; }
}

/* ------------------------------------------------------------------
   "Where are you in this?" — the stage strip.
   A measuring rail rather than a set of cards: five stops on one
   hairline, each with the one thing that is true about time at that
   point. Darker than the router above it so it reads as a different
   instrument, not more of the same.
   ------------------------------------------------------------------ */
.asl-stage{
  background: #071A2B;
  padding: 66px 20px 62px;
  border-top: 1px solid rgba(197,150,63,0.20);
}
.asl-stage-in{ max-width: 1240px; margin: 0 auto; }
.asl-stage-eyebrow{
  font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
  font-weight: 600; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: #C4963F; margin: 0 0 12px;
}
.asl-stage-h{
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-weight: 500; letter-spacing: -0.015em; line-height: 1.08;
  font-size: clamp(28px, 3.2vw, 40px); color: #F5F2EB; margin: 0 0 12px;
}
.asl-stage-sub{
  font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
  font-size: 15.5px; line-height: 1.6; color: #93A0B0;
  margin: 0 0 42px; max-width: 60ch;
}

.asl-stage-rail{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0 22px;
  counter-reset: none;
}
.asl-stop{ margin: 0; padding: 0; }
.asl-stop > a{
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 0 0;
  border-top: 1px solid rgba(197,150,63,0.30);
  text-decoration: none !important;
  position: relative;
  transition: border-color .18s ease;
}
/* the stop on the rail */
.asl-stop > a::before{
  content: "";
  position: absolute;
  top: -4.5px;
  left: 0;
  width: 9px;
  height: 9px;
  background: #071A2B;
  border: 1px solid #C4963F;
  border-radius: 50%;
  transition: background .18s ease;
}
.asl-stop > a:hover,
.asl-stop > a:focus-visible{ border-top-color: rgba(197,150,63,0.85); }
.asl-stop > a:hover::before,
.asl-stop > a:focus-visible::before{ background: #C4963F; }

.asl-stop-n{
  font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
  font-weight: 600; font-size: 10.5px; letter-spacing: 0.18em;
  color: #C4963F; margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.asl-stop-name{
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-weight: 500; font-size: 18px; line-height: 1.22;
  letter-spacing: -0.008em; color: #F5F2EB; margin-bottom: 9px;
}
.asl-stop-body{
  font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
  font-size: 12.5px; line-height: 1.55; color: #8F9CAC;
  margin-bottom: 16px;
}
.asl-stop-cta{
  font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
  font-weight: 600; font-size: 11.5px; color: #D9B65C;
  margin-top: auto;
}
.asl-stop > a:hover .asl-stop-cta{ color: #E8CC7F; }

.asl-stage-foot{
  font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
  font-size: 14px; line-height: 1.6; color: #8D9AAA;
  margin: 34px 0 0;
}
.asl-stage-foot a{ color: #D9B65C; font-weight: 600; text-decoration: none; }
.asl-stage-foot a:hover{ text-decoration: underline; }

@media (max-width: 1000px){
  .asl-stage-rail{ grid-template-columns: repeat(2, 1fr); gap: 30px 24px; }
}
@media (max-width: 560px){
  .asl-stage{ padding: 48px 18px 46px; }
  .asl-stage-rail{ grid-template-columns: 1fr; gap: 26px; }
}

/* On the family hubs the strip sits inside the page column, so it
   breaks out to full width and loses the section padding. */
.page .asl-stage{
  margin: 0 0 42px;
  padding: 44px 34px 42px;
  border-top: none;
}
.page .asl-stage .asl-stage-in{ max-width: none; }

/* ---- snippet 85224 ---- */
/* ============================================================
   ASL — phone layer  ·  v1
   Everything here is scoped to <= 640px. Desktop is untouched.
   ============================================================ */
@media (max-width: 640px) {

  /* --- 1. One gutter, everywhere -------------------------------
     --asl-measure was min(1480px, calc(100vw - 60px)). On a phone
     that is a 30px inset per side, and .asl-hero-in adds 20px more
     on top of it — 50px of margin on a 390px screen, and a 29px
     horizontal overflow at 320px. Reset it and let the 20px
     padding be the only gutter.                                  */
  :root { --asl-measure: 100%; }
  .asl-hero-in,
  .asl-strip-in,
  .asl-router, .asl-stage, .asl-fees {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .asl-hero-in { padding-top: 32px !important; padding-bottom: 40px !important; }

  /* The builder row wrapping the hero carries a 50px top pad on top of the
     hero's own. Two stacked paddings = ~95px of empty navy before the first
     word. Collapse the outer one (matched by content, not by node id, so it
     survives a rebuild). */
  .fl-row:has(.asl-hero) > .fl-row-content-wrap > .fl-row-content { padding-top: 0 !important; }


  /* safety net: nothing may be wider than the screen */
  .fl-row-content.fl-row-fixed-width { max-width: 100% !important; }
  footer .fl-module, footer .fl-module-content { max-width: 100% !important; }
  /* one footer heading module is laid out at 100vw inside a padded column,
     which pushed the document 20px past a 320px screen and made the browser
     zoom the whole page out. clip (not hidden) leaves position:sticky alone. */
  html, body { max-width: 100%; overflow-x: clip; }
  img, iframe, table, pre, video { max-width: 100% !important; }


  /* --- 2. Header: 104px -> ~74px -------------------------------
     15% of the screen was permanently spent on a logo. The mark
     and wordmark still read fine at 168px.                       */
  .fl-node-5c9xk6dfzp8w .pp-photo-img { max-width: 168px !important; height: auto !important; }
  .fl-node-tmef5ci8dpnx > .fl-row-content-wrap { padding-top: 0 !important; padding-bottom: 0 !important; }

  /* The identity bar (phone + email) costs 47px at the top of every phone
     screen and now duplicates the sticky Call / Email bar at the bottom.
     Hide it on phones; it is untouched on desktop.                       */
  .asl-topbar { display: none !important; }

  /* hamburger to a 44x44 target */
  .uabb-offcanvas-trigger,
  .uabb-offcanvas-trigger > * {
    min-width: 44px; min-height: 44px;
    display: flex !important; align-items: center; justify-content: center;
  }


  /* --- 3. Reading rhythm ---------------------------------------
     The theme skin sets body { color:#6f6f6f; line-height:1.8 }.
     #6f6f6f on the cream is 4.53:1 — it scrapes AA and fails in
     sunlight. And a 16px paragraph at 1.8 with only 16px between
     paragraphs means the gap BETWEEN paragraphs is smaller than
     the gap between lines, so paragraphs visually merge.         */
  body { color: #3A3A3A; line-height: 1.62; }

  /* article body only. The homepage's own asl-* sections already have
     deliberate spacing, and widening their paragraph gaps here made an
     already very long page about 3,000px longer.                       */
  .fl-post-content p,
  .fl-module-fl-post-content p {
    line-height: 1.62 !important;
    margin-bottom: 1.4em !important;
  }
  .fl-rich-text p,
  .fl-module-rich-text p { line-height: 1.62 !important; }
  .fl-post-content li,
  .fl-module-fl-post-content li,
  .fl-rich-text li { line-height: 1.62 !important; margin-bottom: .55em; }


  /* --- 4. Headlines: stop the 1.08 leading -----------------------
     1.08 is a desktop display setting. On a 3-line phone headline
     the descenders of one line touch the caps of the next.       */
  .asl-hero-h1 {
    font-size: clamp(1.75rem, 7.6vw, 2.2rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.012em;
  }
  h1, h2, h3, .asl-hero-h1 { text-wrap: balance; }
  p { text-wrap: pretty; }

  .fl-post-content h2, .fl-module-fl-post-content h2 { line-height: 1.22 !important; }
  .fl-post-content h3, .fl-module-fl-post-content h3 { line-height: 1.25 !important; }


  /* --- 5. Labels back above the legibility floor ----------------
     10.5px–12.5px uppercase with 0.1em tracking is below what a
     phone renders cleanly.                                        */
  .asl-box-label, .asl-cell-label, .asl-router-eyebrow,
  .asl-stage-eyebrow, .asl-fees-eyebrow, .asl-p-head {
    font-size: 12px !important;
    letter-spacing: .11em !important;
  }
  .asl-door-kicker { font-size: 12px !important; letter-spacing: .1em !important; }
  /* at .07em this wrapped and orphaned "· NATIONWIDE" onto a second line */
  .asl-hero-eyebrow { font-size: 12px !important; letter-spacing: .035em !important; text-wrap: balance; }
  .asl-stop-body   { font-size: 14px !important; }
  .asl-stop-cta, .asl-door-go { font-size: 13px !important; }


  /* --- 6. Buttons and standalone links --------------------------
     A thumb needs 44px. "Read this ->" links were 20–22px tall.   */
  .asl-hero-btn {
    display: block; width: 100%;
    text-align: center;
    font-size: 16px; padding: 17px 24px;
  }
  .asl-hero-act { gap: 16px; }

  .asl-router-foot > a, .asl-stage-foot > a, .asl-fees-foot > a,
  .asl-box-foot > a, .fl-post-grid-more, .asl-door-go {
    display: inline-block;
    padding-top: 12px; padding-bottom: 12px;
    margin-top: -12px; margin-bottom: -12px;   /* hit area grows, layout does not */
  }
  .fl-post-grid-title a, .fl-post-feed-title a {
    display: inline-block; padding: 8px 0; margin: -8px 0;
  }


  /* --- 7. The off-canvas menu -----------------------------------
     300px of a 390px screen, centred grey-on-navy items with a
     16px tap height.                                              */
  /* NOTE: do not set the drawer's width here. The plugin parks it off-screen
     with right:-300px, so widening it in CSS pushes 40px of panel over the
     page. Change the width in the Off-Canvas module's own settings instead. */
  .uabb-offcanvas .uabb-creative-menu > li > a,
  .uabb-offcanvas .menu-item > a {
    display: block !important;
    padding: 11px 22px !important;
    text-align: left !important;
    font-size: 17px !important;
    line-height: 1.3 !important;
    color: #F2EEE4 !important;
    border-bottom: 1px solid rgba(182,157,116,.16);
  }
  .uabb-offcanvas .menu-item.current-menu-item > a { color: #D9B65C !important; }
  .uabb-offcanvas .uabb-offcanvas-content { padding-top: 8px !important; }
  .uabb-offcanvas-close-icon-wrapper { min-width: 44px; min-height: 44px; }


  /* --- 8. Cookie banner in the site's own colours ----------------
     The Accept button ships as #3B29FF. Also cap the banner so it
     stops taking 40% of the first screen.                         */
  :root {
    --cmplz_button_accept_background_color: #B8862F !important;
    --cmplz_button_accept_border_color:     #B8862F !important;
    --cmplz_button_accept_text_color:       #0A2238 !important;
  }
  #cmplz-cookiebanner-container .cmplz-cookiebanner {
    max-height: 46vh; overflow-y: auto;
    border-radius: 4px 4px 0 0;
  }
  #cmplz-cookiebanner-container .cmplz-body { font-size: 13px; line-height: 1.5; }
  #cmplz-cookiebanner-container .cmplz-btn { border-radius: 2px; }


  /* --- 9. Select control matched to the other fields ------------- */
  .gform_wrapper select { -webkit-appearance: none; appearance: none;
    background-color: #fff; border: 1px solid #0A2238;
    background-image: linear-gradient(45deg, transparent 50%, #0A2238 50%),
                      linear-gradient(135deg, #0A2238 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
    background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
    padding-right: 40px; height: 58px;
  }

  /* --- 10. Sticky contact bar, phones only ----------------------
     Markup comes from the "ASL: mobile contact bar" HTML snippet, which
     hides itself by default; this rule is what reveals it on phones.
     Hidden above 640px, so it never appears on desktop.           */
  .asl-callbar{
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
    display: grid !important; grid-template-columns: 1fr 1fr; gap: 1px;
    background: rgba(182,157,116,.35);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -6px 22px rgba(4,16,28,.30);
    font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
  }
  .asl-cb{
    display: flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 54px; padding: 0 10px;
    font-size: 15px; font-weight: 600; letter-spacing: .01em;
    text-decoration: none !important;
  }
  .asl-cb svg{ width: 18px; height: 18px; fill: currentColor; flex: none; }
  .asl-cb.cb-call{ background: #B8862F; color: #0A2238 !important; }
  .asl-cb.cb-mail{ background: #0A2238; color: #F0E9DB !important; }
  .asl-cb:active{ filter: brightness(.93); }
  .asl-cb:focus-visible{ outline: 2px solid #D9B65C; outline-offset: -4px; }

  /* keep the bar from covering the last of the footer */
  body{ padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px)) !important; }

  /* the cookie banner and the nav drawer both sit above it */
  #cmplz-cookiebanner-container{ z-index: 99998; }


  /* --- 11. Small mobile-browser correctness ---------------------- */

  /* in-page anchors were landing underneath the sticky header */
  html{ scroll-padding-top: 74px; }

  /* stop iOS inflating text when the phone is turned sideways */
  html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  /* long addresses and case citations were pushing their containers */
  a[href^="mailto:"], a[href^="tel:"], .fl-post-content a{ overflow-wrap: anywhere; }

  /* the grey flash on tap belongs to the brand, not to Chrome */
  a, button, [role="button"]{ -webkit-tap-highlight-color: rgba(184,134,47,.22); }

}


/* ---- snippet 85318 ---- */
/* ============================================================
   ASL - header breakpoint and collision guard

   The desktop mega menu used to hand over to the hamburger at 768px, which
   left 769-1023px rendering a two-row, 160px-tall header. It now hands over
   at 1000px, and the six labels get tighter padding on narrow laptops so the
   row can never run out of room and slide under the logo or the button.
   ============================================================ */

@media (max-width: 999px) {
  /* the desktop mega menu module */
  .fl-node-4u8q69h0tpc1 { display: none !important; }

  /* the off-canvas trigger module */
  .fl-node-5u8gtrlaf6q4 { display: block !important; }
  .uabb-offcanvas-trigger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}



@media (min-width: 1000px) {
  #mega-menu-wrap-header #mega-menu-header { flex-wrap: nowrap; }
  .fl-node-4u8q69h0tpc1 { min-width: 0; }
}

/* ------------------------------------------------------------
   Header logo: reserve the right box before the image arrives.
   Beaver Builder ships the logo with a 3x2 pixel placeholder in src and the
   real 640x232 file in srcset, so the browser had nothing to reserve and the
   header jumped on every load.
   ------------------------------------------------------------ */
.fl-node-5c9xk6dfzp8w .pp-photo-img {
  aspect-ratio: 640 / 232;
  width: 190px;
  height: auto;
}
@media (max-width: 640px) {
  .fl-node-5c9xk6dfzp8w .pp-photo-img { width: 168px; }
}

/* ------------------------------------------------------------
   The licensure note that now sits near the top of every state page.
   ------------------------------------------------------------ */
.asl-licensure {
  border-left: 3px solid #B8862F;
  background: rgba(184, 134, 47, .06);
  padding: 14px 18px;
  margin: 22px 0 26px;
  font-size: .95em;
  line-height: 1.55;
  border-radius: 0 3px 3px 0;
}
.asl-licensure strong { color: #0A2238; }
.asl-licensure a { text-decoration: underline; }

/* =====================================================================
   ASL: nine-label fit ladder            added 27 Aug 2026, revised same day
   ---------------------------------------------------------------------
   Re-measured against the RENDERED header, which cost 128px more than the
   text alone: eight of the nine labels carry a mega-indicator arrow
   (5px margin + ~11px glyph). Real requirement:

     need(15px, pad12) = 605 text + 216 padding + 128 arrows = 949px
     need(14px, pad10) = 564 text + 180 padding + 128 arrows = 872px

     budget = box - logo - button - 2 x gap,  box = min(1480, 100vw-60) - 40

       viewport   box    logo  btn  gap   budget   verdict
       1540+     1440    190   196   24    1006    15px, 28px clear
       1440      1380    190   196   24     946    14px, 37px clear
       1360      1300    172   156   18     936    14px, 32px clear
       1280      1220    172   156   18     856    14px needs 872 -> two rows
       1024       964     -     -     -      964    two rows, own line

   So: 15px above 1540, 14px from 1360 to 1539, two rows from 1000 to 1359,
   drawer below 1000 (block above, untouched).
   To undo the whole thing: deactivate this snippet.
   ===================================================================== */

/* Home never shows in the desktop row - the logo already goes home. */
html #mega-menu-wrap-header #mega-menu-header > li.asl-hide-desktop{ display:none !important; }

/* ---- 1540px and up: full size ---- */
@media (min-width:1540px){
  html #mega-menu-wrap-header #mega-menu-header > li.mega-menu-item > a.mega-menu-link{
    font-size:15px !important; padding:0 12px !important;
  }
  html #mega-menu-wrap-header #mega-menu-header > li.mega-menu-item > a.mega-menu-link::after{
    left:12px !important; right:12px !important;
  }
}

/* ---- 1440-1539px: one row, 14px, chrome untouched ---- */
@media (min-width:1440px) and (max-width:1539px){
  html #mega-menu-wrap-header #mega-menu-header > li.mega-menu-item > a.mega-menu-link{
    font-size:14px !important; padding:0 10px !important;
  }
  html #mega-menu-wrap-header #mega-menu-header > li.mega-menu-item > a.mega-menu-link::after{
    left:10px !important; right:10px !important;
  }
}

/* ---- 1360-1439px: one row, 14px, logo and button pulled in ---- */
@media (min-width:1360px) and (max-width:1439px){
  html #mega-menu-wrap-header #mega-menu-header > li.mega-menu-item > a.mega-menu-link{
    font-size:14px !important; padding:0 10px !important;
  }
  html #mega-menu-wrap-header #mega-menu-header > li.mega-menu-item > a.mega-menu-link::after{
    left:10px !important; right:10px !important;
  }
  html .fl-node-1x0mr8f9s76e{ gap:18px !important; }
  html .fl-node-1x0mr8f9s76e > .fl-module-pp-image{ max-width:172px !important; }
  html .fl-node-odgumterjny6 a.fl-button{ padding:11px 18px !important; font-size:13px !important; }
}

/* ---- 1000-1359px: the nav takes its own row ----
   Nine labels plus their arrows need 872px. Below about 1340px the strip
   between logo and button is narrower than that, so rather than drop to
   11px type or hide the nav behind a hamburger, the labels wrap to a
   full-width centred row underneath. Costs about 46px of height. */
@media (min-width:1000px) and (max-width:1359px){
  html .fl-node-1x0mr8f9s76e{
    flex-wrap:wrap !important;
    row-gap:0 !important;
    column-gap:20px !important;
    min-height:0 !important;
    padding-bottom:2px !important;
  }
  html .fl-node-1x0mr8f9s76e > .fl-module-pp-image{ order:1 !important; max-width:168px !important; }
  html .fl-node-1x0mr8f9s76e > .fl-module-button-group{ order:2 !important; margin-left:auto !important; }
  html .fl-node-1x0mr8f9s76e > .fl-module-html{
    order:3 !important; flex:0 0 100% !important; width:100% !important;
    border-top:1px solid rgba(245,242,235,.10) !important;
  }
  html #mega-menu-wrap-header #mega-menu-header{ justify-content:center !important; }
  html #mega-menu-wrap-header #mega-menu-header > li.mega-menu-item > a.mega-menu-link{
    font-size:14px !important; padding:0 10px !important;
    height:46px !important; line-height:46px !important;
  }
  html #mega-menu-wrap-header #mega-menu-header > li.mega-menu-item > a.mega-menu-link::after{
    left:10px !important; right:10px !important;
  }
  html .fl-node-odgumterjny6 a.fl-button{ padding:10px 18px !important; font-size:13px !important; }

  html .asl-shrunk .fl-node-1x0mr8f9s76e > .fl-module-pp-image{ max-width:140px !important; }
  html .asl-shrunk #mega-menu-wrap-header #mega-menu-header > li.mega-menu-item > a.mega-menu-link{
    height:40px !important; line-height:40px !important;
  }
}


/* ---- Oct 2 2026 re-fit ----
   The labels and arrows grew (Accommodations, Records & Status, Discrimination,
   and dropdown arrows on Fees and Blog), so at 1360-1439, 1440-1539 and 1540+
   the one-row menu ran 1-33px into the logo and the Get Your Game Plan button.
   These three blocks restore a 15px+ gap at every width from 1360 to 2560.
   Measured live before/after on Oct 2 2026. Delete this block to revert. */
@media (min-width:1360px) and (max-width:1439px){
  html body #mega-menu-wrap-header #mega-menu-header > li.mega-menu-item > a.mega-menu-link{ font-size:13.5px !important; padding:0 6px !important; }
  html body #mega-menu-wrap-header #mega-menu-header > li.mega-menu-item > a.mega-menu-link::after{ left:6px !important; right:6px !important; }
}
@media (min-width:1440px) and (max-width:1539px){
  html body #mega-menu-wrap-header #mega-menu-header > li.mega-menu-item > a.mega-menu-link{ font-size:13.5px !important; padding:0 7px !important; }
  html body #mega-menu-wrap-header #mega-menu-header > li.mega-menu-item > a.mega-menu-link::after{ left:7px !important; right:7px !important; }
}
@media (min-width:1540px){
  html body #mega-menu-wrap-header #mega-menu-header > li.mega-menu-item > a.mega-menu-link{ padding:0 9px !important; }
  html body #mega-menu-wrap-header #mega-menu-header > li.mega-menu-item > a.mega-menu-link::after{ left:9px !important; right:9px !important; }
}


/* ---- snippet 85654 ---- */
/* =====================================================================
   ASL: four-column mega panels — buy back the column width
   ---------------------------------------------------------------------
   Allegations, Dismissed and Blog now run four columns. With the rail at
   340px and a 34px gutter each column measured 231px at a 1440 box, which
   wrapped nearly every label to two lines. Narrowing the rail, tightening
   the gutter and trimming the body padding gives roughly 252px per column
   without touching the header row measure or the three-column panels.
   To undo: deactivate this snippet. 28 Aug 2026.
   ===================================================================== */

@media (min-width: 993px){

  /* only panels that actually have four columns */
  #mega-menu-wrap-header #mega-menu-header > li.mega-menu-item > ul.mega-sub-menu:has(.asl-p-cols[data-n="4"]) > .asl-p-rail{
    flex: 0 0 296px !important;
  }
  #mega-menu-wrap-header #mega-menu-header > li.mega-menu-item > ul.mega-sub-menu:has(.asl-p-cols[data-n="4"]) > .asl-p-body{
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  .asl-p-cols[data-n="4"]{
    column-gap: 26px !important;
    grid-template-columns: repeat(4, minmax(0, 320px)) !important;
  }

  .asl-p-cols[data-n="4"] > .asl-p-col > ul > li > a{
    font-size: 13.5px !important;
    line-height: 1.32 !important;
    letter-spacing: -0.004em !important;
    padding: 5px 0 !important;
    hyphens: none;
  }
}

/* =====================================================================
   asl-head-hierarchy — 2026-09-04
   ---------------------------------------------------------------------
   The column headings were 11px / weight 400 / uppercase / 1.54px tracking
   in #8A6420, sitting above 15px navy links. The links were therefore the
   loudest thing in the panel and the headings read as faint labels, so the
   eye had nothing to scan across before scanning down.

   Fix inverts it: the heading takes the brand navy at 700, and the gold
   moves out of the text and into the rule underneath, where an accent
   belongs. Tracking comes down because bold uppercase does not need it.
   ===================================================================== */
.asl-p-head{
  color: #0E1F47 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1.05px !important;
  text-transform: uppercase !important;
  padding-bottom: 9px !important;
  margin-bottom: 13px !important;
  border-bottom: 2px solid #C79842 !important;
}

/* the phone drawer uses the same class on a dark ground, so flip it there */
.uabb-offcanvas-content .asl-p-head,
.asl-drawer .asl-p-head,
[class*="offcanvas"] .asl-p-head{
  color: #F5F2EB !important;
  border-bottom-color: #C79842 !important;
}


/* asl-readability v2 — measured line length, fold, phone bar */

/* 1. Reading measure: cap the body column so lines land near 80 characters.
      Applies at every width; below the cap it simply has no effect. */
.fl-module-fl-post-content > .fl-module-content{ max-width: 600px !important; }

/* 2. Fold: tighten hero and content-row padding so the first H2 is visible. */
@media (min-width: 993px){
  .fl-row:has(.fl-module-fl-post-content) > .fl-row-content-wrap{ padding-top: 44px !important; }
  .fl-row:has(> .fl-row-content-wrap h1) > .fl-row-content-wrap{
    padding-top: 34px !important; padding-bottom: 34px !important; }
}

/* 3. Top-bar phone number: legible, tappable, gold pill. */
.asl-topbar-contact a.asl-tb-phone{
  font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.2px !important;
  color: #FFFFFF !important; padding: 3px 10px !important;
  border: 1px solid rgba(199,152,66,0.55) !important; border-radius: 4px !important;
  text-decoration: none !important;
}
.asl-topbar-contact a.asl-tb-phone:hover, .asl-topbar-contact a.asl-tb-phone:focus-visible{
  background: #C79842 !important; border-color: #C79842 !important; color: #0E1F47 !important;
}

/* 4. Sticky call bar on phones and small tablets. */
@media (max-width: 900px){
  html body .asl-callbar{
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    align-items: stretch !important;
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    height: 54px !important; min-height: 54px !important; max-height: 54px !important;
    z-index: 99990 !important; gap: 1px; background: #0E1F47;
    box-shadow: 0 -2px 14px rgba(0,0,0,0.28); padding: 0 !important; margin: 0 !important;
  }
  html body .asl-callbar .asl-cb{
    flex: 1 1 0 !important; display: flex !important; align-items: center !important;
    justify-content: center !important;
    height: 54px !important; min-height: 54px !important; max-height: 54px !important;
    font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0.2px !important;
    text-decoration: none !important; line-height: 1 !important; padding: 0 !important;
  }
  html body .asl-callbar .cb-call{ background: #C79842 !important; color: #0E1F47 !important; }
  html body .asl-callbar .cb-mail,
  html body .asl-callbar .cb-email{ background: #14294F !important; color: #F5F2EB !important; }
  body{ padding-bottom: 54px !important; }
}
@media (min-width: 901px){
  html body .asl-callbar{ display: none !important; }
  body{ padding-bottom: 0 !important; }
}


/* ---- snippet 85918 ---- */
/* ============================================================
   ASL — phone top bar fixes · 1 Sep 2026
   Four things, all scoped away from the desktop header (>= 992px).
   ============================================================ */

/* --- 1. The grey boxes -------------------------------------------
   The BB theme skin styles every bare <button>:
     button:hover, button:focus, button:active { background:#6f6f6f;
     color:#fff; border:1px solid #505050 }
   Those beat '.asl-nav-close { background:none }' on specificity, so
   the moment a visitor taps the hamburger, the drawer's close X — and
   every chevron they touch after it — paints as a grey block with a
   dark border. Reset the whole family at button+class specificity. */
button.asl-nav-toggle, button.asl-nav-close,
button.asl-dnav-x, button.asl-dtoggle,
button.asl-jump-toggle, button.asl-fgroup-btn,
.uabb-offcanvas button, .asl-dnav button,
button.asl-nav-toggle:hover, button.asl-nav-close:hover,
button.asl-dnav-x:hover, button.asl-dtoggle:hover,
button.asl-jump-toggle:hover, button.asl-fgroup-btn:hover,
.uabb-offcanvas button:hover, .asl-dnav button:hover,
button.asl-nav-toggle:focus, button.asl-nav-close:focus,
button.asl-dnav-x:focus, button.asl-dtoggle:focus,
button.asl-jump-toggle:focus, button.asl-fgroup-btn:focus,
.uabb-offcanvas button:focus, .asl-dnav button:focus,
button.asl-nav-toggle:active, button.asl-nav-close:active,
button.asl-dnav-x:active, button.asl-dtoggle:active,
button.asl-jump-toggle:active, button.asl-fgroup-btn:active,
.uabb-offcanvas button:active, .asl-dnav button:active {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  color: inherit;
}
.uabb-offcanvas .uabb-offcanvas-close,
.uabb-offcanvas .uabb-offcanvas-close:hover,
.uabb-offcanvas .uabb-offcanvas-close:focus,
.uabb-offcanvas .uabb-offcanvas-close:active { color: #D9B65C !important; }
.uabb-offcanvas .uabb-offcanvas-close-icon { color: #D9B65C !important; }
button.asl-nav-toggle:focus-visible,
button.asl-nav-close:focus-visible,
.uabb-offcanvas button:focus-visible {
  outline: 3px solid #D9B65C !important; outline-offset: 2px;
}


/* --- 2. The homepage jolt ----------------------------------------
   "Jump to a section · 12" is injected into the homepage a second or
   two after first paint and pushes everything below it down ~85px.
   The homepage already opens with six situation doors, so the strip
   earns nothing there. Hidden by CSS, so it never takes space and
   never shifts the page. Long guide and practice-area pages keep it. */
body.home .asl-jump,
body.page-id-30 .asl-jump { display: none !important; }


/* --- 3. The top bar itself, phones and landscape -------------------
   The header row is a flex box:  logo | mega menu | button group |
   hamburger.  Beaver Builder hides the button group below 769px
   (fl-visible-desktop/large/medium), which is why a phone gets only a
   logo and a hamburger, and why 641-768px shows a wide empty gap.
   Selectors are prefixed with 'header' so they outrank the phone
   layer's own rules whatever order WPCode prints the snippets in.   */
@media (max-width: 768px) {

  /* put the button group back */
  header .fl-node-1x0mr8f9s76e > .fl-module-button-group.fl-node-odgumterjny6 {
    display: flex !important;
    flex: 0 0 auto;
    width: auto !important;
    margin: 0 !important;
  }
  header .fl-node-odgumterjny6 .fl-button-group-button { width: auto !important; }
  header .fl-node-odgumterjny6 .fl-button-wrap {
    width: auto !important; display: block !important; margin: 0 !important;
  }
  header .fl-node-odgumterjny6 a.fl-button {
    display: inline-flex !important; align-items: center; justify-content: center;
    white-space: nowrap;
    min-height: 40px;
    padding: 9px 13px !important;
    font-size: clamp(11px, 3vw, 13px) !important;
    letter-spacing: .01em !important;
    line-height: 1.1 !important;
  }
  header .fl-node-odgumterjny6 a.fl-button .fl-button-text { white-space: nowrap; }

  /* the row: tighter gutters, and it keeps its height */
  header .fl-node-1x0mr8f9s76e { gap: 8px !important; min-height: 62px !important; }
  header .fl-node-tmef5ci8dpnx > .fl-row-content-wrap > .fl-row-content {
    padding-left: 14px !important; padding-right: 14px !important;
  }
  /* the logo must not be squeezed by the new neighbour - fix its width */
  header .fl-node-5c9xk6dfzp8w { flex: 0 0 auto !important; }
  header .fl-node-5c9xk6dfzp8w .pp-photo,
  header .fl-node-5c9xk6dfzp8w .pp-photo-content,
  header .fl-node-5c9xk6dfzp8w .pp-photo-content-inner { width: auto !important; }
}

/* Phones. The bottom bar already carries Call and Email, so the header
   keeps just the one gold action. */
@media (max-width: 640px) {
  header .fl-node-odgumterjny6 .fl-button-group-button-odgumterjny6-0 { display: none !important; }
  header .fl-node-5c9xk6dfzp8w .pp-photo-img {
    width: 128px !important; max-width: 128px !important; height: auto !important;
  }
}
@media (max-width: 374px) {
  header .fl-node-5c9xk6dfzp8w .pp-photo-img { width: 96px !important; max-width: 96px !important; }
  header .fl-node-odgumterjny6 a.fl-button { padding: 9px 8px !important; font-size: 10px !important; }
  header .fl-node-1x0mr8f9s76e { gap: 6px !important; }
  header .fl-node-tmef5ci8dpnx > .fl-row-content-wrap > .fl-row-content {
    padding-left: 8px !important; padding-right: 8px !important;
  }
}

/* 641-768px - a large phone sideways, or a small tablet. Room for the
   number too, and the identity bar folds away so the bar stays one row. */
@media (min-width: 641px) and (max-width: 768px) {
  .asl-topbar { display: none !important; }
  header .fl-node-tmef5ci8dpnx > .fl-row-content-wrap { padding-top: 0 !important; padding-bottom: 0 !important; }
  header .fl-node-5c9xk6dfzp8w .pp-photo-img {
    width: 168px !important; max-width: 168px !important; height: auto !important;
  }
  header .fl-node-odgumterjny6 { gap: 8px !important; }
  header .fl-node-odgumterjny6 a.fl-button { font-size: 13px !important; padding: 10px 14px !important; }
}

/* A phone held sideways at 769-991px wide but under ~500px tall. The
   two-tier bar was taking 141px of a 393px screen. Fold the identity bar
   and slim the row; a tall tablet at the same width is untouched. */
@media (min-width: 769px) and (max-width: 991px) and (max-height: 500px) {
  .asl-topbar { display: none !important; }
  header .fl-node-tmef5ci8dpnx > .fl-row-content-wrap { padding-top: 0 !important; padding-bottom: 0 !important; }
  header .fl-node-1x0mr8f9s76e { min-height: 62px !important; }
  header .fl-node-5c9xk6dfzp8w .pp-photo-img {
    width: 150px !important; max-width: 150px !important; height: auto !important;
  }
  header .fl-node-odgumterjny6 a.fl-button { font-size: 13px !important; padding: 10px 16px !important; }
}


/* ---- snippet 85925 ---- */
/* ASL: Sep 2 2026 audit fixes (CSS)
   1. Reserve the identity bar's height before the script injects it, so desktop pages do not jolt (CLS).
   2. "How an engagement actually works" - four equal step columns instead of 195/501/236/238px.
   Deactivate this snippet and both revert. */

/* 1. identity-bar placeholder (same breakpoints under which the bar is shown) */
@media (min-width: 769px) {
  header.fl-builder-content-23529:not(:has(> .asl-topbar))::before {
    content: "";
    display: block;
    height: 47px;
    background: var(--asl-navy-900, #0a2238);
  }
}
@media (min-width: 769px) and (max-width: 991px) and (max-height: 500px) {
  header.fl-builder-content-23529::before { display: none !important; }
}

/* 2. equal step columns */
@media (min-width: 768px) {
  .fl-node-2mylr91q53tn { align-items: flex-start !important; }
  .fl-node-2mylr91q53tn > .fl-module-pp-heading {
    flex: 1 1 0%;
    min-width: 0;
  }
}

/* 3. Phone-only fold for the homepage opening essay (the PHP snippet adds the checkbox + label) */
.asl-intro-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.asl-intro-more { display: none; }
@media (max-width: 640px) {
  .asl-hero-lead .asl-intro { display: none; }
  .asl-hero-lead .asl-intro-more {
    display: inline-flex; align-items: center; gap: .6em;
    margin: 14px 0 4px; padding: 12px 18px; min-height: 44px;
    border: 1px solid rgba(217, 182, 92, .65); border-radius: 6px;
    color: #d9b65c; font-family: var(--asl-font-body, Inter, sans-serif); font-size: 15px; font-weight: 600; line-height: 1.2;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .asl-hero-lead .asl-intro-more::after { content: "\2193"; font-size: 16px; }
  .asl-intro-toggle:focus-visible ~ .asl-intro-more { outline: 3px solid #d9b65c; outline-offset: 2px; }
  .asl-intro-toggle:checked ~ .asl-intro { display: block; }
  .asl-intro-toggle:checked ~ .asl-intro-more { display: none; }
}

/* 4. Homepage practice-area list (PHP snippet "ASL: Homepage practice-area list" prints it; this hides the old grid) */
/* the row holds five category headings + five paginated grids; keep only the first col-group (the section heading) */
body.home .fl-node-1q62z5dx4y9r .fl-col-group:not(.fl-node-sifhxr8e57d4) { display: none !important; }
.asl-pa-list { margin: 8px 0 12px; }
.asl-pa-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 32px; }
.asl-pa-h { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(184, 134, 47, .45); font-family: var(--asl-font-display, "Newsreader", Georgia, serif); font-size: 19px; font-weight: 500; line-height: 1.25; }
.asl-pa-h a { color: #0e1f47; text-decoration: none; }
.asl-pa-h a:hover { color: #8a6420; }
.asl-pa-ul { list-style: none; margin: 0; padding: 0; }
.asl-pa-ul li { margin: 0; padding: 0; }
.asl-pa-ul a { display: block; padding: 6px 0; color: #0e1f47; font-size: 15px; line-height: 1.35; text-decoration: none; border-bottom: 1px solid rgba(14, 31, 71, .08); }
.asl-pa-ul a:hover { color: #8a6420; }
.asl-pa-all { margin: 26px 0 0; font-size: 16px; }
.asl-pa-all a { color: #8a6420; font-weight: 600; }
@media (max-width: 1100px) { .asl-pa-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .asl-pa-cols { grid-template-columns: 1fr; gap: 22px; } .asl-pa-ul a { padding: 11px 0; font-size: 16px; } .asl-pa-h { font-size: 21px; } }

/* Sep 2 2026 — keyboard focus ring on the logo links (header photo module + phone top bar) */
.pp-photo-content-inner a:focus-visible, .asl-topbar a:focus-visible, .asl-topbar-in a:focus-visible, .asl-tb-phone:focus-visible { outline: 3px solid #8A6420 !important; outline-offset: 3px; border-radius: 4px; }

/* Sep 2 2026 — blog index blocks: geometry in the head.
   The full styling lives in snippet 85582, which loads in the FOOTER; the
   guides/topic blocks are now rendered server-side, so without these rules
   they paint full-width and unstyled first and then snap into place (CLS).
   Keep these in sync with 85582 if that block is restyled. */
.asl-bx{max-width:1240px;margin:0 auto;padding:0 20px;}
.asl-bx-label{margin:0 0 14px;font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;}
.asl-bx-guides{padding:26px 20px 6px;}
.asl-bx-topics{padding:26px 20px 0;}
.asl-bx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid #E4DECC;border-left:1px solid #E4DECC;}
.asl-bx-g{display:flex;flex-direction:column;padding:24px 24px 26px;border-right:1px solid #E4DECC;border-bottom:1px solid #E4DECC;}
.asl-bx-g-k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:11px;}
.asl-bx-g-t{font-size:20px;font-weight:500;line-height:1.22;margin-bottom:9px;}
.asl-bx-g-d{font-size:14px;line-height:1.55;margin:0 0 16px;}
.asl-bx-g-go{margin-top:auto;font-size:13.5px;font-weight:600;}
.asl-bx-chips{list-style:none;margin:0;padding:0 0 22px;display:flex;flex-wrap:wrap;gap:8px 10px;border-bottom:1px solid #E4DECC;}
.asl-bx-chips li{margin:0;padding:0;}
.asl-bx-chips button{display:inline-block;padding:8px 15px;border:1px solid #E4DECC;background:#fff;font-family:inherit;font-size:14px;line-height:1.2;}
.asl-bx-count{margin:16px 0 0;font-size:14px;}
@media (max-width:1024px){.asl-bx-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.asl-bx-grid{grid-template-columns:1fr;}}

/* ===== Sep 2 2026, audit round 2 =====================================
   1. Keyboard focus was invisible on the main nav, the mega panels and the
      phone drawer (WCAG 2.4.7). Gold ring on light grounds, cream on navy.
   2. The mega-panel column labels (.asl-p-head) were #B8862F on white =
      3.24:1 at 11px; moved to the same deep gold used elsewhere (5.35:1).
   3. Top-bar phone/email links were 22-23px tall; WCAG 2.2 wants 24px.  */
#mega-menu-wrap-main a:focus-visible,
.mega-menu a:focus-visible,
.mega-sub-menu a:focus-visible,
.asl-p-col a:focus-visible,
.fl-page-content a:focus-visible,
.fl-post-content a:focus-visible,
.asl-bx-chips button:focus-visible {
  outline: 3px solid #8A6420 !important; outline-offset: 2px; border-radius: 3px;
}
.asl-topbar a:focus-visible,
.asl-drawer a:focus-visible,
.asl-drawer button:focus-visible,
.uabb-offcanvas-close:focus-visible,
.asl-dnav-x:focus-visible,
.fl-page-footer a:focus-visible,
footer a:focus-visible {
  outline: 3px solid #F5F2EB !important; outline-offset: 2px; border-radius: 3px;
}
.asl-p-head { color: #8A6420 !important; }
.asl-topbar .asl-tb-phone,
.asl-topbar .asl-tb-email,
.asl-topbar .asl-tb-link {
  min-height: 24px; display: inline-flex; align-items: center;
}


/* ---- snippet 85926 ---- */
/* ASL: Sep 2 2026 contrast (CSS)
   Small gold text on light backgrounds moves from #B8862F / #B69D74 to a deeper gold (#8A6420, 5:1 on white),
   and the gold-filled buttons on the practice-area and article templates get navy text.
   Logo, headings, and gold-on-navy are untouched. Deactivate to revert. */

/* 1. Links in page and post content (theme default #B69D74 is 2.6:1 on white) */
.fl-page-content a, .fl-post-content a { color: #8a6420; }
.fl-page-content a:hover, .fl-post-content a:hover { color: #6f4f18; }
/* leave the styled controls alone (they carry their own colours) */
.fl-page-content a.fl-button, .fl-page-content a.asl-door, .fl-page-content a.asl-hero-btn,
.fl-page-content a.asl-bx-chip { color: inherit; }
.fl-page-content .asl-related a { color: #0e1f47; }
/* ...and not where the link sits on navy or gold: page-hero breadcrumbs and sub-headings,
   the homepage stage and router footers, and the gold licensure band on the state pages */
.fl-page-content .pp-breadcrumbs a, .fl-page-content .pp-sub-heading a,
.fl-page-content .asl-stage-foot a, .fl-page-content .asl-router-foot a { color: #d9b65c; }
.fl-page-content .pp-breadcrumbs a:hover, .fl-page-content .pp-sub-heading a:hover,
.fl-page-content .asl-stage-foot a:hover, .fl-page-content .asl-router-foot a:hover { color: #f5f2eb; }
.fl-post-content .asl-licensure a { color: #0a2238; text-decoration: underline; }

/* 2. Small gold labels and metadata on light backgrounds */
.fl-page-content .fl-row:not(.fl-node-3enxpov0ha6d) .pp-heading-prefix,
.asl-bx .asl-bx-label, .asl-bx-grid .asl-bx-g-k, .fl-post-grid-text .asl-bx-meta,
.asl-related .asl-related-k, .asl-fees .asl-fees-eyebrow, .asl-fees .asl-fees-foot a,
.uabb-info-list-content .uabb-info-list-title,
.fl-page-content h4.fl-heading,
.asl-summary li > span,
.page-numbers a.page-numbers, .page-numbers .next, .page-numbers .prev {
  color: #8a6420 !important;
}
.asl-fees .asl-fee-note { color: #5b6572 !important; }

/* 3. Gold-filled buttons: navy text (5:1) instead of white (3.2:1) */
.fl-node-ltyvrf8debwx a.fl-button, .fl-node-ltyvrf8debwx a.fl-button .fl-button-text,
.fl-node-3axriy2wekob a.fl-button, .fl-node-3axriy2wekob a.fl-button .fl-button-text {
  color: #0a2238 !important;
}

/* 4. Two leftovers: pagination on the darker beige band, and the gold licensure band on state pages */
.page-numbers a.page-numbers, .page-numbers .next, .page-numbers .prev { color: #6f4f18 !important; }
.fl-post-content .asl-licensure { color: #0a2238; }


/* ---- snippet 86471 ---- */
/* ASL typographic rhythm v1 — 4 Sep 2026
   D5: content h2 was 40px on pages carrying up to 16 of them, which read as
   sixteen page titles. 32px holds the hierarchy without shouting.
   D4: standalone links under the 24px minimum tap target. Inline links
   inside running prose are exempt under WCAG 2.5.8 and are left alone.
   html/body prefixes are there only to outrank Beaver Builder's per-layout
   inline CSS, which prints after this snippet in the head. */

html body .fl-module-fl-post-content .fl-module-content h2 {
    font-size: clamp(26px, 1.1vw + 20px, 32px);
    line-height: 1.25;
}

html body a.asl-r-cta,
html body a.asl-p-all {
    min-height: 24px;
    padding-top: 2px;
    padding-bottom: 2px;
}

html body a.asl-related-all,
html body .fl-post-feed-title a {
    display: inline-block;
    min-height: 24px;
}

/* Homepage hero: 104px of fixed top padding put the deadline box and half the
   lead paragraph below the fold on a laptop. Fluid now — still airy on a tall
   monitor, ~41px on a 690px viewport, which brings both back above the fold. */
html body .asl-hero-in {
    padding-top: clamp(32px, 6vh, 104px);
}

/* ---- snippet 86481 ---- */
/* ASL: Sep 4 conversion fixes — Claude session */
/* 1. Homepage: remove the 84px navy gap between header and hero (row + wrap padding) */
html body .fl-node-xa43qmizpbhd .fl-row-content { padding-top: 0 !important; }
html body .fl-node-xa43qmizpbhd > .fl-row-content-wrap { padding-top: 0 !important; }

/* 2. Contact page: lift the form toward the fold */
html body.page-id-79843 .fl-node-us2k3hretpl0 .fl-row-content { padding-top: 0 !important; }
html body.page-id-79843 .fl-node-us2k3hretpl0 > .fl-row-content-wrap { padding-top: 12px !important; padding-bottom: 16px !important; }
html body.page-id-79843 .fl-row:has(.gform_wrapper) > .fl-row-content-wrap { padding-top: 24px !important; }

/* 3. Empty headings: remove from layout and accessibility tree */
html body .uabb-info-list-title:empty { display: none; }
html body h1.heading-title:has(> .title-text:empty),
html body h2.heading-title:has(> .title-text:empty),
html body h3.heading-title:has(> .title-text:empty),
html body h4.heading-title:has(> .title-text:empty) { display: none; }

/* Contact hero: tighten inner module spacing */
html body.page-id-79843 .fl-node-us2k3hretpl0 .fl-module-content { margin-top: 8px !important; margin-bottom: 8px !important; }
html body.page-id-79843 .fl-node-us2k3hretpl0 .pp-sub-heading { margin-top: 10px !important; }

/* Category archives: term description under the title */
html body .asl-term-desc { max-width: 680px; margin: 14px 0 4px; }
html body .asl-term-desc p { font-size: 17px; line-height: 1.65; margin: 0 0 10px; }

/* Contact hero: direct-contact card in the empty right half */
html body.page-id-79843 .fl-node-us2k3hretpl0 > .fl-row-content-wrap { position: relative; }
html body.page-id-79843 .asl-chc { border: 1px solid #B8862F; padding: 18px 22px; max-width: 340px; }
@media (min-width: 1100px) {
  html body.page-id-79843 .asl-chc { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); }
}
@media (max-width: 1099px) {
  html body.page-id-79843 .asl-chc { margin: 18px 0 4px; }
}
html body.page-id-79843 .asl-chc-label { color: #B8862F; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 8px; font-weight: 700; }
html body.page-id-79843 .asl-chc-line { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
html body.page-id-79843 .asl-chc-line a { color: #fff; text-decoration: none; }
html body.page-id-79843 .asl-chc-line a:hover { color: #B8862F; }
html body.page-id-79843 .asl-chc-note { color: rgba(255,255,255,.75); font-size: 13.5px; margin: 8px 0 0; line-height: 1.5; }

/* ---- snippet 88046 ---- */
/* ASL menu panels: packed columns for panels with exactly 6 headings (Sep 12, 2026).
   Sep 12 revision: the 5-heading rule was removed. Schools & Programs has 5 headings
   of 9-13 links each; column-flowing them made the block 1064px tall inside an 824px
   panel, which clipped Florida-Idaho and Nevada-Pennsylvania. Five tall groups belong
   in the normal 5-column grid. Never applies to the rail layout. */
@media (min-width: 993px) {
  .asl-p-cols[data-n="6"]:not(.asl-p-cols--topics) {
    display: block !important;
    column-width: 230px;
    column-gap: 40px;
  }
  .asl-p-cols[data-n="6"]:not(.asl-p-cols--topics) > .asl-p-col {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    display: inline-block;
    width: 100%;
    margin: 0 0 26px;
  }
}

/* ---- snippet 88513 ---- */
/* ASL 2026-09-19 — center the reading column (approved Option A).
   The Sep 11 readability fix capped default-template text at 38rem
   (~80 characters a line) but left the column pinned to the left edge
   of the 1280px content box, leaving a large blank right side on wide
   screens. This centers the title + text column. Beaver Builder pages
   (.fl-builder), the homepage, and the blog index are untouched;
   practice-area and blog-post layouts already fill that space with a
   sidebar. Deactivate this snippet to revert. */
body.page-template-default:not(.home):not(.fl-builder):not(.blog) .fl-content-full .fl-post-header,
body.page-template-default:not(.home):not(.fl-builder):not(.blog) .fl-content-full .fl-post-content {
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
}

/* Sep 23 2026 - blog posts showed the "How I can help" section twice: Themer layout 79924
   (Blog 2 Singular) has two identical rows. Hide the second copy. Permanent fix: delete
   row txslm8idq2wg in that layout, then remove this rule. */
.fl-builder-content-79924 .fl-node-txslm8idq2wg { display: none !important; }


/* ---- snippet 89863 ---- */
/* ===== Sep 25 2026 — Schools panel (programs + every state), Blog panel, phone drawer ===== */

/* Desktop: Schools panel = narrow program column + wide state grid */
#mega-menu-wrap-header ul.mega-sub-menu[data-asl-panel="/nationwide/"] .asl-p-cols{
  display:grid !important;
  grid-template-columns:240px minmax(0,1fr) !important;
  column-gap:48px !important;
}
#mega-menu-wrap-header ul.mega-sub-menu[data-asl-panel="/nationwide/"] .asl-p-col:has(a[href$="-student-defense/"]) > ul{
  columns:4 130px !important;
  column-gap:22px !important;
}
#mega-menu-wrap-header ul.mega-sub-menu[data-asl-panel="/nationwide/"] .asl-p-col:has(a[href$="-student-defense/"]) > ul > li{
  break-inside:avoid;
}
#mega-menu-wrap-header ul.mega-sub-menu[data-asl-panel="/nationwide/"] .asl-p-col:has(a[href$="-student-defense/"]) > ul > li > a{
  font-size:14px !important;
  line-height:1.3 !important;
  padding:4px 0 !important;
  white-space:nowrap;
}

/* Desktop: Blog panel = topics + popular guides */
#mega-menu-wrap-header ul.mega-sub-menu[data-asl-panel="/blog/"] .asl-p-cols{
  grid-template-columns:repeat(3,minmax(0,280px)) !important;
}

/* Phone drawer: states as a two-column grid inside Schools */
.asl-dnav-sub:not([hidden]):has(> a[href$="-student-defense/"]){
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:2px;
}
.asl-dnav-sub:has(> a[href$="-student-defense/"]) > *{ grid-column:1 / -1; }
/* Oct 8 2026 — a collapsed drawer section must stay collapsed: the hidden attribute wins over any display rule. (An unscoped display:grid here is what pinned the states list open.) */
.asl-dnav-sub[hidden]{ display:none !important; }
.asl-dnav-sub > a[href$="-student-defense/"],
.asl-dnav-sub > a[href$="/florida-schools/"]{
  grid-column:auto !important;
  font-size:14.5px !important;
  line-height:1.3 !important;
  padding:8px 0 8px 20px !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  hyphens:none !important;
}

/* Phone drawer: the orphaned "describe it in the email" link (Email sits in the bar below),
   and the desktop-only "Recent" cards in the Blog panel, which flatten into run-on text */
.asl-dnav-sub > a[href^="mailto:"],
.asl-dnav-sub > a[href="/accused-of-using-ai-on-an-assignment/"],
.asl-dnav-sub > a[href="/do-not-underestimate-your-school/"],
.asl-dnav-sub > a[href="/transcripts-disciplinary-records-what-follows-you/"]{ display:none !important; }

/* Phone drawer: Call / Email bar stays pinned to the bottom instead of
   scrolling up over the menu when a section is opened */
.uabb-offcanvas > .asl-dqa{
  position:sticky !important;
  top:auto !important;
  bottom:0 !important;
}

/* Narrower desktops/tablets (header on two rows): give the state grid the rail's room */
@media (max-width:1379px){
  #mega-menu-wrap-header ul.mega-sub-menu[data-asl-panel="/nationwide/"] > .asl-p-rail{ display:none !important; }
  #mega-menu-wrap-header ul.mega-sub-menu[data-asl-panel="/nationwide/"] .asl-p-col:has(a[href$="-student-defense/"]) > ul{ columns:4 118px !important; column-gap:18px !important; }
}

/* Keep phone numbers from breaking across lines (About team card) */
.asl-team-body a[href^="tel:"]{ white-space:nowrap; }


/* ===== Sep 26 2026 — Fees panel: Representation & Advocacy is the typical engagement ===== */
@media (min-width:993px){
#mega-menu-wrap-header #mega-menu-header ul.mega-sub-menu[data-asl-panel="/fees-scope-of-services/"] li.mega-menu-item-89959 > a{ font-weight:700 !important; }
#mega-menu-wrap-header #mega-menu-header ul.mega-sub-menu[data-asl-panel="/fees-scope-of-services/"] li.mega-menu-item-89959 > a::after{
  content:"Most common" !important; display:inline-block !important; margin-left:8px; padding:1px 8px 2px;
  border:1px solid #d9b65c; border-radius:999px; font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:#8a6420; background:rgba(217,182,92,.14); vertical-align:middle; font-weight:600;
}
#mega-menu-wrap-header #mega-menu-header ul.mega-sub-menu[data-asl-panel="/fees-scope-of-services/"] li.mega-menu-item-89959::after{
  content:"Starts as soon as you sign — usually the same week." !important; display:block !important; font-size:12px;
  color:#8a6420; line-height:1.35; margin:1px 0 7px;
}
}

/* ===== Sep 27 2026 — fees ladder strip across the top of the Fees panel ===== */
@media (min-width:993px){
#mega-menu-wrap-header #mega-menu-header ul.mega-sub-menu[data-asl-panel="/fees-scope-of-services/"]::before{
  content:"Almost everything is a flat fee, set in writing first \00a0\00b7\00a0 Full Read + Game Plan $1,000 \00a0\00b7\00a0 Representation from $5,000 \00a0\00b7\00a0 Hearings from $10,000 \00a0\00b7\00a0 Litigation quoted" !important;
  display:block !important; width:100%; flex:0 0 100%;
  font-size:12.5px; font-weight:600; letter-spacing:.02em; color:#8a6420;
  padding:10px 22px 9px; border-bottom:1px solid #e4decc;
  background:rgba(217,182,92,.10);
}
}

/* ===== Oct 13 2026 — accessibility audit fixes (axe-core WCAG 2.2 AA) ===== */
/* 1. Homepage "Read the full picture" checkbox is a phone-only fold. On wider screens the
      full essay is already shown and the label is hidden, so remove the unnamed checkbox
      from the tab order and the accessibility tree there (axe: label, critical). */
@media (min-width: 641px) { .asl-intro-toggle { display: none !important; } }
/* 2. WCAG 1.4.3 - pale-gold links (#d9b65c) on light cards measured 1.84-1.94:1.
      Dark gold #8a6420 = 5.1:1 on cream, 5.3:1 on white. Contact form intro + About cards. */
[class*="fl-node-zcyb38xhsv0o"] .pp-sub-heading a,
.fl-node-bqhd1aimrnz2 .pp-sub-heading a,
.fl-node-q6sdhmg9fae7 .pp-sub-heading a { color: #8a6420 !important; }
/* 3. FAQ accordion: open/hovered title #c89d66 on cream = 2.35:1 -> #8a6420. */
.fl-node-bjoeqw3az9g8 .pp-accordion-item-active .pp-accordion-button-label,
.fl-node-bjoeqw3az9g8 .pp-accordion-button:hover .pp-accordion-button-label { color: #8a6420 !important; }
/* 4. For-parents caption label on navy #162b3c: #b8862f = 4.49:1 -> #c4963f = 5.4:1. */
.asl-cap-label { color: #c4963f !important; }

/* ===== Oct 13 2026 — menu panel labels (axe WCAG 1.4.3, seen only with a panel open) ===== */
#mega-menu-header .asl-p-rail .asl-r-label,
#mega-menu-header .asl-rc .asl-rc-label { color: #8a6420 !important; }