/* Tizbi ticketed improvements layered over the faithful production port.
   Each rule maps to an RND ticket; nothing here alters content. */

/* RND-14/15 click-to-call: phone anchors inherit the surrounding look. */
#header .custom-info a[href^="tel:"],
#header .site-phone a[href^="tel:"],
#footer a[href^="tel:"] {
  color: inherit;
  text-decoration: none;
}

/* Squarespace marks this block invalid and its JS refuses to render it
   (lorem-ipsum "Featured" placeholder). Match production's visible output. */
.sqs-block-summary-v2:has(.sqs-blockStatus) { display: none; }

/* RND-16 sticky navigation.
   #topNav lives inside #header, so position:sticky would scroll away with its
   parent; instead improvements.js sets body.nav-stuck once the nav (or the
   mobile Menu bar) scrolls out, and these rules pin it to the viewport. */
.nav-call-btn { display: none; }

@media (min-width: 641px) {
  body.nav-stuck #topNav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 950;
    margin: 0;
    padding: 6px 70px 6px 20px;
    background: #f6f5f1;
    border-bottom: 1px solid #d9d5cc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
  }
  body.nav-stuck #topNav .page-divider { display: none; }
  body.nav-stuck #topNav .main-nav > ul > li,
  body.nav-stuck #topNav .main-nav > ul > li > a {
    height: auto;
    line-height: 1.3;
    padding-top: 12px;
    padding-bottom: 12px;
    margin-top: 0;
    margin-bottom: 0;
  }
  body.nav-stuck #topNav .main-nav > ul > li > a { padding-top: 0; padding-bottom: 0; }
  body.nav-stuck #topNav .nav-call-btn {
    display: block;
    color: #fff !important;
    text-decoration: none !important;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: #c0392b;
    color: #fff;
    font: 700 14px/1 "Varela Round", arial, sans-serif;
    padding: 9px 14px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  body.nav-stuck #mobileMenuLink {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 950;
    margin: 0;
    background: #f6f5f1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    /* The template's own padding (0 0 15px) is meant for a bar sitting at the top
       of the document; once the bar is pinned it leaves "Menu" against its upper
       edge. Centre the label in the bar, same overall height as before. */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0;
  }
  /* RND-16: the panel has to pin together with the bar. #mobileNav sits *before*
     #mobileMenuLink in the markup, at the very top of the document, so while the
     bar is fixed the panel still opens at document top — above the viewport for a
     visitor who has scrolled, and scroll anchoring then pushes it further out of
     sight. The class toggles, the panel gains its height, and nothing appears on
     screen: Alina's "the button is pinned but after clicking it happens nothing".
     --menubar-h is the measured bar height, set from improvements.js. */
  body.nav-stuck #mobileNav {
    position: fixed;
    top: var(--menubar-h, 38px);
    left: 0;
    right: 0;
    z-index: 949;
    margin: 0;
    background: #f6f5f1;
  }
  body.nav-stuck #mobileNav.menu-open {
    max-height: calc(100vh - var(--menubar-h, 38px));
    overflow-y: auto;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .25);
  }
}

/* RND-14 floating call button — desktop AND mobile, ticket wording per language. */
.floating-call-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  position: fixed;
  bottom: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  right: 18px;
  z-index: 1000;
  background: #c0392b;
  color: #fff;
  padding: 12px 18px;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  text-decoration: none;
  text-align: center;
  max-width: 280px;
}
.floating-call-btn, .floating-call-btn:visited, .floating-call-btn:hover,
.floating-call-btn .fcb-label, .floating-call-btn .fcb-num {
  color: #fff !important;
  text-decoration: none !important;
}
.floating-call-btn .fcb-label { font: 700 14px/1.25 "Varela Round", arial, sans-serif; }
.floating-call-btn .fcb-num { font: 700 13px/1 "Varela Round", arial, sans-serif; opacity: .95; }
@media (max-width: 640px) {
  .floating-call-btn { padding: 10px 14px; max-width: 230px; bottom: 14px; right: 14px; }
  .floating-call-btn { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .floating-call-btn .fcb-label { font-size: 12.5px; }
  .floating-call-btn .fcb-num { font-size: 12px; }
}

/* RND-14 (QA 2026-08-20): at phone widths the labelled pill was wide enough to
   cover page text at some scroll positions, so below 480px it collapses to a
   round icon button. The wording stays in the accessible name and comes back
   in full above 480px. */
@media (max-width: 479px) {
  .floating-call-btn {
    width: 56px;
    height: 56px;
    max-width: none;
    padding: 0;
    gap: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .floating-call-btn::before {
    content: "";
    width: 26px;
    height: 26px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.15 6.59 6.59l2.2-2.2c.28-.28.68-.36 1.03-.25 1.12.37 2.32.57 3.56.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .floating-call-btn .fcb-label,
  .floating-call-btn .fcb-num {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
  }
}

/* RND-27: the migrated markup sizes the video by padding-bottom on the wrapper,
   so the injected iframe has to fill that box absolutely. */
.embed-block-wrapper { position: relative; }
.sqs-video-wrapper { position: absolute; inset: 0; width: 100%; height: 100%; }
.sqs-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* RND-31: the two halves of the four-section grid are independent stacks, so the
   lower pair begins wherever the upper text happens to end. Once For Families moved
   to the right half — a line shorter than what stood there — the lower two headings
   sat 24px apart. Laying the row out as a real grid makes both halves share their
   row heights, at any width. Below 768px the halves stack and there is nothing to
   align. The clearfix boxes must be dropped or they would claim grid cells of their
   own. The first selector is the home page and Services, which share a body id;
   the second is the Spanish Services page, whose halves were out of line before
   this ticket and were reported separately. */
@media (min-width: 768px) {
  body#collection-56a3f48c2399a37868dc8d43 .sqs-row:has(> .col.span-6 + .col.span-6),
  body#collection-56b6744737013b54bd9e0719 .sqs-row:has(> .col.span-6 + .col.span-6) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(8, auto);
    grid-auto-flow: column;
  }
  body#collection-56a3f48c2399a37868dc8d43 .sqs-row:has(> .col.span-6 + .col.span-6)::before,
  body#collection-56a3f48c2399a37868dc8d43 .sqs-row:has(> .col.span-6 + .col.span-6)::after,
  body#collection-56b6744737013b54bd9e0719 .sqs-row:has(> .col.span-6 + .col.span-6)::before,
  body#collection-56b6744737013b54bd9e0719 .sqs-row:has(> .col.span-6 + .col.span-6)::after {
    display: none;
  }
  body#collection-56a3f48c2399a37868dc8d43 .sqs-row:has(> .col.span-6 + .col.span-6) > .col,
  body#collection-56b6744737013b54bd9e0719 .sqs-row:has(> .col.span-6 + .col.span-6) > .col {
    display: contents;
  }
}

/* RND-15 mobile layout on the two Criminal Defense cover pages.
   These pages are Squarespace cover pages whose layout is normally computed by
   the slides JS we do not load, so each page carries an inline <style> block
   that reproduces the desktop 50/50 split. That block has no breakpoint: below
   1020px the theme widens the copy column to 100% but its margin-right:50%
   stays, pushing the text - and the phone number in it - off the left edge.
   Below the theme's own 1020px breakpoint, stack the two halves the way
   production does: image first at its 50vh minimum, copy underneath. */
@media all and (max-width: 1020px) {
  body#collection-56b66c4460b5e92ad235ff88 .sqs-slide-layer.split-fifty > .sqs-slide-layer-content.content-copy,
  body#collection-56f8270537013bcd642c8acb .sqs-slide-layer.split-fifty > .sqs-slide-layer-content.content-copy {
    width: 100%;
    margin-right: 0;
    min-height: 0;
  }
  body#collection-56b66c4460b5e92ad235ff88 .sqs-slide-layer.split-fifty > .sqs-slide-layer-content.content-gallery,
  body#collection-56f8270537013bcd642c8acb .sqs-slide-layer.split-fifty > .sqs-slide-layer-content.content-gallery {
    position: relative;
    width: 100%;
    height: auto;
  }
}


/* RND-31: the right half of the Spanish Services page carried one spacer more than
   the left - 68px, put there by hand on the old site to nudge the two halves level.
   It is what left the lower headings 34px apart, and with the grid above doing the
   aligning it now only makes the two halves a different number of rows. Dropping it
   leaves both halves with the same eight blocks in the same order. */
body#collection-56b6744737013b54bd9e0719 #block-yui_3_17_2_6_1459100232277_80627 {
  display: none;
}

/* RND-31: reading order on a phone - 1 For Individuals, 2 For Families,
   3 For Businesses, 4 Permanent Residence. On a wide screen the four sections sit in
   two columns and read across the rows, which already gives that order. On a phone
   the columns stack whole, so both left-hand sections come first and For Families
   falls to third. The row is laid out as one single-column grid and each section is
   placed by hand. Only the two pages whose sections were swapped carry this class;
   the English Services page keeps the original arrangement, which stacks in the
   asked-for order on its own. The columns are told apart by adjacency rather than by
   position, so nothing else in the row can shift the match. */
@media (max-width: 767px) {
  body.sections-swapped .sqs-row:has(> .col.span-6 + .col.span-6) {
    display: grid;
    grid-template-columns: 1fr;
  }
  body.sections-swapped .sqs-row:has(> .col.span-6 + .col.span-6)::before,
  body.sections-swapped .sqs-row:has(> .col.span-6 + .col.span-6)::after {
    display: none;
  }
  body.sections-swapped .sqs-row:has(> .col.span-6 + .col.span-6) > .col {
    display: contents;
  }
  body.sections-swapped .sqs-row:has(> .col.span-6 + .col.span-6) > .col.span-6:has(+ .col.span-6) > :nth-child(-n+4) {
    order: 1;
  }
  body.sections-swapped .sqs-row:has(> .col.span-6 + .col.span-6) > .col.span-6 + .col.span-6 > :nth-child(-n+4) {
    order: 2;
  }
  body.sections-swapped .sqs-row:has(> .col.span-6 + .col.span-6) > .col.span-6:has(+ .col.span-6) > :nth-child(n+5) {
    order: 3;
  }
  body.sections-swapped .sqs-row:has(> .col.span-6 + .col.span-6) > .col.span-6 + .col.span-6 > :nth-child(n+5) {
    order: 4;
  }
}