/* =======================================================================
   rebuild-responsive.css — the responsive retrofit (Josh, 2026-09-09).

   Live is a fixed 1200px layout with NO viewport meta and ZERO media queries,
   so on a phone it renders desktop-width and the user pinch-zooms. Josh signed
   off on a retrofit: desktop stays byte-faithful to live, and everything below
   1240px is new work that live has no counterpart for.

   Loaded AFTER wp-content/themes/10-13/style.css, from an explicit <link> in
   Layout.astro. Unlayered, so it also outranks Tailwind's layered utilities.

   RULES THIS FILE FOLLOWS (fleet standing rules):
     · Nothing outside a media query touches desktop geometry, EXCEPT the two
       type rules below, which exist because live's flat px sizes are what clip
       its own headings on a phone.
     · Type is sized ONCE with clamp() against the house floors (28px display,
       18px sub-heading). There are deliberately NO font-size overrides inside
       the breakpoints — a media-query font-size beats the clamp and reopens
       the bug the clamp closes.
     · line-height is unitless everywhere, so it scales with the clamp.
     · Images are capped with `width` + `max-width:100%`, never a px max-width.
     · No `overflow-x:hidden` and no `max-width:100vw` band-aids on the layout
       containers — they hide overflow instead of fixing it, and no gate can
       see the damage. Each offending element is fixed where it sits.
     · Desktop pixel values from live are a MAXIMUM, never a floor, so fixed
       widths become `min(<live px>, 100%)`.
   ======================================================================= */

/* -----------------------------------------------------------------------
   1. Type — sized once, for every viewport.

   Live: h2 is a flat 30px and the social card a flat 28px/26px. Both overflow
   their own boxes below ~420px on live today.
   ----------------------------------------------------------------------- */
/* The masthead h2 is the ONE piece of type on this site that actually clips:
   "TUCSON BANKRUPTCY ATTORNEY REVIEWS" is 34 characters of Arial Black at a flat
   30px, and live runs it off the edge of its own box below ~420px.

   line-height is unitless so it tracks the clamp, and 0.667 is not a taste
   choice — it is live's own computed value (a 20px line box inherited from
   `body` on 30px text). Anything larger makes the masthead block taller than
   live's 134px and walks it down into the nav, which sits at 72.5% of the
   banner. Relaxed once at the narrow breakpoint below, where the heading is
   stacked and genuinely wraps to two lines. */
#bankruptcy-lawyers-tucson h2 {
  font-size: clamp(28px, 2.5vw, 30px);
  line-height: 0.667;
}

/* h3 and the social card are deliberately NOT touched. Neither can clip — the
   h3 already wraps at live's own <br>, and the social card holds one short line
   — so overriding them buys nothing and costs exact parity. The house type rule
   exists to stop clipped headings, not to restyle type that fits. */

/* -----------------------------------------------------------------------
   1a. The masthead social card, after the contest lines came out.

   Live fixes this card at height:188px to hold four lines: "Like Us On", the
   Facebook badge, "And You Could Win / A Free iPad!", and the contest-rules
   line. With the last three gone (Josh, 2026-09-09) that height leaves ~78px of
   empty white below the badge, which reads as a broken card rather than a
   deliberate one.

   height:auto lets it wrap its content. This does NOT move anything: the card
   totals 247px against the banner's 262px + margins, so the banner governs the
   header row height and #header measures the same as live either way — verified
   with the geometry probe, not assumed.
   ----------------------------------------------------------------------- */
#bankruptcy-lawyer-review-social-media {
  height: auto;
}

/* -----------------------------------------------------------------------
   1b. Video embeds.

   Two YouTube iframes (both on /law-firms/bornmann-law-group-pllc) carry live's
   hard-coded width="560" height="315". The content column is 700px wide, so
   this is INERT on desktop — 560 is already under the cap — and it stops the
   embed running 277px past a 320px viewport. aspect-ratio reproduces live's own
   560:315 (16:9), so the frame is never letterboxed.

   Live embeds from youtube.com, not youtube-nocookie.com. Left as live has it
   (a migration changes the platform, not the content); flagged for post-launch.
   ----------------------------------------------------------------------- */
#leftcolumn iframe {
  max-width: 100%;
  height: auto;
  aspect-ratio: 560 / 315;
}

/* -----------------------------------------------------------------------
   2. < 1240px — the fixed 1200px frame becomes fluid.

   `width:auto` on a block keeps the content-box math intact: the element fills
   its container minus its own padding and border, which is exactly what the
   1200px value was doing inside a 1200px viewport.
   ----------------------------------------------------------------------- */
@media (max-width: 1239px) {
  #mainwrapper,
  #header,
  #mainmiddle,
  #mainbottom,
  #footer {
    width: auto;
    max-width: 1200px;
  }

  #mainwrapper {
    padding: 0 10px;
  }

  /* Live floats a 781px banner beside a 300px card inside 1200px. Below that,
     share the row proportionally rather than letting the card wrap early. */
  #bankruptcy-lawyer-review-header {
    width: min(781px, 68%);
    height: auto;
  }

  #bankruptcy-lawyer-review-social-media {
    width: min(300px, 26%);
  }

  /* The banner drives the header's height once it is fluid. */
  #bankruptcy-lawyer-review-header img {
    width: 781px;
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* The overlay is absolute against #mainwrapper on live, using pixel offsets
     measured off the 781x262 banner. Re-anchor it to the banner itself and
     express the same offsets as percentages so it tracks the image as it
     scales: 25/262, 50/781, 700/781, 190/262. */
  #bankruptcy-lawyer-review-header {
    position: relative;
  }

  #bankruptcy-lawyers-tucson {
    top: 9.54%;
    left: 6.4%;
    width: 89.6%;
  }

  #navigation {
    top: 72.5%;
    left: 6.4%;
  }

  #bankruptcy-lawyers-tucson h2 {
    margin-top: 0;   /* live's 55px is a spacer inside a 262px-tall fixed box */
  }
}

/* -----------------------------------------------------------------------
   3. < 1024px — the two content columns stack.

   700 + 300 + their padding and margins stop fitting well before the columns
   themselves do, and a squeezed 300px sidebar beside a squeezed body is worse
   than a stack.
   ----------------------------------------------------------------------- */
@media (max-width: 1023px) {
  #leftcolumn,
  #rightcolumn {
    float: none;
    width: auto;
    margin-left: 10px;
    margin-right: 10px;
  }

  #leftcolumn {
    margin-bottom: 20px;
  }

  /* Live's body copy is 700px wide; keep that measure but let it shrink. */
  #leftcolumn img {
    max-width: 100%;
    height: auto;
  }
}

/* -----------------------------------------------------------------------
   4. < 700px — the header row stops being a row.
   ----------------------------------------------------------------------- */
@media (max-width: 699px) {
  #bankruptcy-lawyer-review-header,
  #bankruptcy-lawyer-review-social-media {
    float: none;
    width: auto;
    margin-left: 10px;
    margin-right: 10px;
  }

  #bankruptcy-lawyer-review-social-media {
    height: auto;
    margin-top: 20px;
  }
}

/* -----------------------------------------------------------------------
   5. < 600px — the overlay comes off the banner.

   Below this the banner is under ~340px wide and ~115px tall; a two-line
   tagline plus a three-item nav cannot sit on top of it without clipping.
   White text with live's own shadow reads cleanly on the black body ground,
   so the block simply moves below the photo.
   ----------------------------------------------------------------------- */
@media (max-width: 599px) {
  #bankruptcy-lawyers-tucson,
  #navigation {
    position: static;
    width: auto;
  }

  /* The masthead text is white with live's 1px shadow, which works on desktop
     because it sits on the DARK half of the banner photo. Once it moves below
     the photo it lands on the body texture, whose lower two-thirds is a light
     tan — white on that measures ~2.8:1, under the 3:1 that even large bold
     text needs, and text-shadow earns no WCAG credit.
     ⚠️ This is a contrast problem the RETROFIT created, not one live has, so
     fixing it is not normalising live's design. The scrim is confined to this
     breakpoint and uses black at the same weight the theme's own shadows do;
     desktop never sees it. */
  #bankruptcy-lawyer-review-header {
    background: rgba(0, 0, 0, 0.62);
    padding-bottom: 10px;
  }

  #bankruptcy-lawyers-tucson {
    text-align: center;
    margin-top: 14px;
  }

  /* Live's 0.667 line box is tighter than the glyphs once the heading wraps,
     so the two lines would overlap. This is the only line-height override, and
     it is a wrapping fix, not a restyle. */
  #bankruptcy-lawyers-tucson h2 {
    line-height: 1.15;
  }

  #navigation {
    margin-top: 4px;
  }

  #navigation ul {
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  #navigation ul li {
    float: none;   /* floats cannot wrap predictably; flex can */
  }

  /* Live's columns carry 25px of padding on a 700px box. At 360px that is 14%
     of the viewport spent on padding. */
  #leftcolumn,
  #rightcolumn {
    padding: 18px;
    margin-left: 6px;
    margin-right: 6px;
  }

  #mainwrapper {
    padding: 0 4px;
  }

  /* The firm contact blocks print bare URLs as plain text
     (`http://bankruptcylawtucson.com`, `http://www.meinerslaw.com`), and a URL
     has no break opportunity, so at 320px it runs 8px past the card edge.
     Scoped to the element that actually overflows — a `max-width:100vw` or an
     `overflow-x:hidden` on a layout container would hide this instead of fixing
     it, and no gate can see content that has been clipped away. */
  #lawyer-contact-info span,
  #leftcolumn [itemprop="url"] {
    overflow-wrap: anywhere;
  }
}