/* ==========================================================================
   Corrections to bugs inherited from the exported stylesheet.
   Loaded last so it wins without editing the vendor files.
   Nothing here changes the desktop design — each rule was verified against a
   before/after snapshot of every element at 1440px and 375px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FAQ accordion clipped its own chevron on mobile.

   framework.css sets [data-accordion-header] { width: 100% } and then adds
   --accordion-inner-space of horizontal padding. With the default
   content-box sizing the header ends up 100% + 32px wide inside a parent that
   is overflow:hidden, so ~30px is cut off — and the chevron lives on that
   right edge, so it disappeared. Measured at 375px: icon right edge 375px vs
   parent right edge 360px.
   -------------------------------------------------------------------------- */
[data-accordion-header],
[data-accordion-content] {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   2. Quote popup opens faster.

   form-popup.js sets an inline transition of .18s on the overlay, so even
   with the form pre-rendered the modal still spent ~166ms fading in after a
   tap. The frame underneath is already laid out and painted by then, so the
   fade is the only thing left between the click and the form — halved, which
   still reads as an animation rather than a snap. Inline styles need the
   !important to be overridden.
   -------------------------------------------------------------------------- */
div[role="dialog"][aria-label="Form"] {
  transition: opacity .08s ease !important;
}

/* --------------------------------------------------------------------------
   3. Sticky bar breakpoint alignment.

   The page's own mobile layout ends at 763px, but the sticky bar was written
   against 767px. Between 764 and 767 the desktop layout rendered with the
   mobile bar over it. Handing the bar the same boundary the page uses.
   -------------------------------------------------------------------------- */
@media (min-width: 764px) and (max-width: 767px) {
  .drc-sticky-cta {
    display: none;
  }
  body {
    padding-bottom: 0;
  }
}

/* ------------------------------------------------------------------
   Hero area line ("Covering Kanata: ...") - desktop and tablet only.
   Tablets get this same fixed 1200px layout, scaled to the screen, so one
   rule covers both; phones have their own layout and are untouched.

   At 24px the longer city lists (Kanata, Manotick) wrapped onto a second
   line and ran ~20px into the quote button, and even one-line versions sat
   11px above the button against ~40px below the headline. 22px keeps every
   current list on one line - the longest, Kanata at 84 characters, needs
   ~1012px of the 1059px box - and lifting the line and its maple leaf 13px
   together splits the space evenly, ~27px above and below. transform rather
   than top, so layout.css's stored positions and the rest of the hero stay
   exactly where they are. _build/build-pages.js warns if a list gets longer.
   ------------------------------------------------------------------ */
@media (min-width: 764px) {
  #sIeqGPgrzM0UqKhTaVQBfwczAXTy76df,
  #sIeqGPgrzM0UqKhTaVQBfwczAXTy76df h2,
  #sIeqGPgrzM0UqKhTaVQBfwczAXTy76df span {
    font-size: 1.375rem !important;
  }
  #sIeqGPgrzM0UqKhTaVQBfwczAXTy76df,
  #wvqD50ky2T2kBO7fcCCgJ4W1LCdCfgT6 {
    transform: translateY(-13px);
  }
}