/* Header logo: keep it in proportion (never squeezed) */
img.nav-logo-right{height:56px!important;width:auto!important;max-width:none!important;object-fit:contain}
.nav-links li:has(> .nav-logo-right), .nav-links li:has(> a > .nav-logo-right){flex-shrink:0}

/* Narrower desktop and laptop screens: tighten the menu so every item, the Book button and the logo fit */
@media (min-width: 969px) and (max-width: 1399px){
  .nav-links{gap:0.4rem!important}
  .nav-links > li > a, .nav-links .dropdown-toggle{font-size:0.8rem!important;letter-spacing:0!important}
  .nav-links > li > a:not(.nav-cta){padding-left:3px!important;padding-right:3px!important}
  .nav-links .nav-cta{padding:0.55rem 0.8rem!important;font-size:0.8rem!important}
  img.nav-logo-right{height:46px!important}
}
@media (min-width: 969px) and (max-width: 1099px){
  .nav-links{gap:0.25rem!important}
  .nav-links > li > a, .nav-links .dropdown-toggle{font-size:0.74rem!important}
  .nav-links .dropdown-toggle svg{width:10px!important;height:10px!important}
  img.nav-logo-right{height:40px!important}
}

/* Thank-you check mark: keep it a true circle (it was being squashed into an oval) */
.confirmation-icon, .success-icon{width:80px!important;height:80px!important;min-width:80px!important;min-height:80px!important;max-height:none!important;aspect-ratio:1/1;flex:0 0 auto;border-radius:50%!important;display:flex!important;align-items:center;justify-content:center;margin-left:auto!important;margin-right:auto!important;padding:0!important}
.confirmation-icon svg, .success-icon svg{width:40px!important;height:40px!important}

/* PNA-FIX-6 (1 October 2026) — the Share menu on the Forms page opened BEHIND the
   neighbouring card. Cause: .form-card carried `content-visibility:auto`, which applies
   PAINT CONTAINMENT. Paint containment does two things at once: it clips descendants to
   the card's padding box, and it makes the card a new stacking context — so the menu's
   z-index:200 was trapped inside the card and could never rise above a sibling card.
   The menu opens upward and sticks out 114px above the card, so the top choices
   (Copy Link, Email, and on the shorter cards Text Message) were drawn underneath.
   `content-visibility` is removed from .form-card where the rule is declared; this is the
   guard that stops any containment being reintroduced on a card that holds a popover.
   Cards keep their layout and appearance — containment is a paint hint, not a layout rule. */
.form-card{content-visibility:visible!important;contain:none!important}

/* PNA-FIX-6, part 2 — phone and small-tablet widths (<=900px).
   The mobile rule `.form-card-actions .share-wrapper{display:contents}` removes the
   wrapper's box entirely. `position:relative` then has nothing to apply to, so the
   absolutely positioned menu anchored to section.main-content instead (12,672px tall) and
   `bottom:110%` threw it ~1,329px ABOVE the top of the page — off-screen, not merely covered.
   Keeping the wrapper as a real positioned block makes it a normal grid item that fills its
   cell (so the Share button still looks identical) and gives the menu something to anchor to. */
@media (max-width:900px){
  .form-card-actions .share-wrapper{display:block!important;position:relative!important}
  .form-card-actions .share-wrapper>.btn{width:100%!important}
}

/* PNA-FIX-15 (1 October 2026) - phone layout only.
   At phone width the two fixed round buttons sit 150px and 204px up from the
   bottom of the viewport (48px tall, so the stack reaches 252px). Scrolled to
   the foot of a page, that band lands on top of the footer disclaimer and
   covers it - on every page.
   The footer makes room for them rather than the buttons moving or hiding:
   enough bottom padding that the last line of the footer always clears the
   top of the upper button, plus a 16px gap. Desktop is untouched - this is
   inside the same breakpoint that shows the phone menu and bottom bar. */
@media (max-width: 968px){
  /* PNA-FIX-16: reserve whatever is actually fixed at the bottom - the notice
     bar as well as the two floating buttons. The 316px fallback covers the
     measured worst case (299px at 320px wide) if the measuring script never runs. */
  footer{ padding-bottom: calc(var(--pna-bottom-clear, 300px) + 16px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* PNA-FIX-17 (1 October 2026) - phone layout only, disclaimers.html.
   "Related Legal Documents" is laid out by an inline style on #legalDocsGrid as
   grid-template-columns:1fr 1fr. At 390px that makes each column 167px, with a
   165px content box - narrower than the longest words in two of the titles
   ("Client Rights & Responsibilities" needs 189px, "Confidentiality and Its
   Limits" needs 181px), so those titles spilled out of their card.
   One column at phone width gives each card the full page width, so every title
   wraps onto as many lines as it needs and the card grows to fit. No title is
   shortened, no card removed, no link changed. Desktop keeps its two columns. */
@media (max-width: 600px){
  #legalDocsGrid{ grid-template-columns: 1fr !important; }
  #legalDocsGrid > a{ overflow-wrap: break-word; }
}

/* PNA-FIX-18 (1 October 2026) - stay-connected.html topic list.
   Two faults in one control. (1) The checkboxes were 12x12px - about a quarter
   of the 44x44 minimum - so they were hard to hit on a phone. (2) On four
   topics the glossary link WRAPPED the topic name, so tapping the name opened
   the glossary instead of ticking the box, losing whatever had been filled in.
   The name is now plain text inside the label (so it ticks the box) and the
   glossary link is a small separate marker beside it. The whole row is the tap
   target, at least 44px tall, and the marker is excluded from it so it still
   opens the glossary. Checkbox drawn size is unchanged. */
.topic-item{
  display:flex; align-items:center; gap:.5rem;
  min-height:44px; padding:6px 4px; cursor:pointer;
}
.topic-item input[type="checkbox"]{ flex-shrink:0; margin:0; }
.topic-item .glossary-marker{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; min-width:22px; margin-left:6px;
  border:1px solid currentColor; border-radius:50%;
  font-size:12px; font-weight:700; line-height:1;
  text-decoration:none !important; flex-shrink:0;
}
.topic-item .glossary-marker:hover,
.topic-item .glossary-marker:focus-visible{ background:rgba(0,139,142,.12); }
@media (max-width: 968px){
  .topic-item{ min-height:48px; padding:8px 4px; }
  .topic-item .glossary-marker{ width:28px; height:28px; min-width:28px; }
}