/* -----------------------------------------------------------------------
   rebuild-responsive.css - the rebuild's layout changes to live.

   Sections 1, 2 and 4 fix content live CLIPS, HIDES or OVERLAPS - kit §O /
   §S8 and Josh's standing call: fixed, not replicated. Section 3 is Josh's
   phone requests. Measured on live 2026-09-11 (kit audit-clipped + a header
   probe). At 1250px and up only section 4's /contact-us/ form applies; the
   rest of the page is live's.
   ----------------------------------------------------------------------- */

/* 1. The page overflows its own viewport below 1250px (FLAGS F19).
      The theme gives BOTH #wrapper_three divs `width:100%` (max 1200px) and the
      custom CSS adds `padding:50px !important` under the content-box model, so
      the content box starts 50px in and runs up to 100px past the right edge -
      hidden, not scrolled, by the ancestors' `overflow:auto` (kit §O "overflow
      that does not scroll"). Live clips the sidebar 14px @1199 and 17px @1100,
      the content 19px @1024, the logo/tagline/content 27px @768 and 38px @390.
      A visitor on live sees the 50px left padding and content running into the
      right edge, so this keeps the left padding and drops the right: the content
      box ends at the viewport edge instead of past it. */
@media screen and (max-width: 1249px) {
  #wrapper_three {
    width: auto;
    padding-right: 0 !important; /* beats style.css's `padding: 50px !important` - same id specificity, later file */
  }
  /* The header form is absolutely positioned `right:169px` from its wrapper's
     edge. On live that edge sits past the viewport, so the form's right side
     lands at min(width, 1200) - 69px; with the wrapper now ending at the
     viewport, 69px puts it back exactly there - clear of the tagline. */
  #logo_section_container #tucson-divorce-law-consultation-form {
    right: 69px;
  }
  /* The sidebar's map iframe has no size, so it takes the browser default
     300x150 - wider than the sidebar on a phone. Capped to its column. */
  #sidebar .textwidget iframe {
    max-width: 100%;
  }
  /* The six YouTube embeds in page copy are a fixed 560x315 (their HTML
     attributes), so on a phone they ran 200-270px past the screen edge (kit
     audit-clipped @320/@390, launch checklist 2026-09-11). Capped to the
     column; the height follows at the embeds' own 16:9. */
  .entry iframe[width="560"][height="315"] {
    max-width: 100%;
    height: auto;
    aspect-ratio: 560 / 315;
  }
}

/* 2. The header consultation form (FLAGS F16): a 400px box absolutely
      positioned by the theme's style.css. It covers the tagline from 1024px,
      the business name from 900px, and runs off the left edge from 480px
      ("dule Your Free Consultation!"). Below 1100px - the first width at which
      it collides with the logo block - it joins the header's normal flow,
      under the logo, centered. */
@media screen and (max-width: 1099px) {
  #logo_section_container > #wrapper_three {
    display: flex;
    flex-direction: column;
  }
  #logo_section_container #tucson-divorce-law-consultation-form {
    order: 2;
    position: static;
    width: auto;
    max-width: 400px;
    height: auto;
    margin: 20px auto 0;
    padding-bottom: 5px;
  }
}

/* 3. Phones - under 600px, the theme's own breakpoint (where TinyNav's
      <select> replaces the menu). Josh, 2026-09-11 (DECISIONS V18):
      · 20px left and right padding on both #wrapper_three divs. Live's 50px
        left, with the right edge running off-screen, pushed the whole column
        right - "that was an issue for the old site". Later in this file than
        section 1, so it wins over its padding-right:0.
      · 15px top padding on the header instead of 50px ("reduce the top
        padding") - ~60px of empty tan sat above the business name. */
@media screen and (max-width: 599px) {
  #wrapper_three {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  #logo_section_container > #wrapper_three {
    padding-top: 15px !important; /* beats style.css's `padding: 50px !important` */
  }

  /* Josh, 2026-09-11: "remove the extra left and right padding or margin, only
     leave 20px ... and for the internal box add left and right padding 10px".
     The theme's mobile rules stack percentage margins inside the wrapper:
     #inner_content_section 3%, then the content and sidebar panels 5% - the
     panels sat at x≈42 on a 320px screen. All zeroed, so every panel sits on
     the wrapper's 20px. Inside, text sits exactly 10px from the panel edge (the
     theme's own ~2.7% insets become 10px); the darker title strip stays full
     width within its panel. Search-template panels (the 404, search results,
     the prenuptial page) take the 10px as their own padding. */
  /* Measured at 320px (scratch chain probe): the theme sets both a percentage
     WIDTH and a percentage MARGIN at every level, so each box here gets
     `width: auto` (or 100% where it floats) as well as its margins. */
  #inner_content_section {
    width: auto; /* theme: 94% - the panels stopped ~17px short of the right edge */
    margin-left: 0;
    margin-right: 0;
  }
  #main_content_section,
  #sidebar_section,
  #main_content_section_search_title,
  #main_content_section_search {
    width: 100%; /* these float: left, so 100% rather than auto */
    margin-left: 0;
    margin-right: 0;
  }
  #main_content_section_search_title,
  #main_content_section_search {
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
  }
  #main_content_section .actual_post_title_page,
  #main_content_section .actual_post_title,
  #main_content_section .archiveheading h2 {
    width: auto;
    margin-left: 10px;
    margin-right: 10px;
  }
  #main_content_section .post_entry {
    width: auto; /* theme: ~94.6% + its padding = wider than the panel */
    padding-left: 10px;
    padding-right: 10px;
  }
  #sidebar .sidebar_widget,
  #sidebar_facebook,
  #sidebar_twitter {
    width: auto;
    margin-left: 10px;
    margin-right: 10px;
  }
  /* Search-template pages (search results, the 404, the prenuptial page): the
     panel's own 10px padding is the only inset, so their children lose theirs. */
  #main_content_section_search_title .main_content_section_search_title,
  #main_content_section_search .fouroh {
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }
  #main_content_section_search .magthree_left_individual_post {
    width: 100%; /* floats */
    margin-left: 0;
    margin-right: 0;
  }
}

/* 4. The consultation form's two 200px field columns (inline styles, hence
      !important where they are overridden). Wherever the columns stack, each
      one's <br> between its two fields would be an empty line (hidden), and
      CF7's hidden spinner would still hold 72px beside the button and pull it
      ~36px off centre (taken out of the line flow; it still shows while
      sending).

      · /contact-us/ carries a copy of the form in its content column
        (FLAGS F22). The theme sizes only the HEADER copy's fields, so on live
        these keep the browser's ~286px and overrun their 200px columns at
        every width: Email runs under Phone, Date & Time sits a line lower than
        Email, the Cloudflare box sits above the heading at the left, and the
        button hangs off-centre below an empty [recaptcha] line - and under
        600px the fields run past the screen edge (audit-clipped @540).
        Josh, 2026-09-11: "fix form design (old site issue)" (DECISIONS V20).
        At every width:
          - the form keeps its authored 400px (two 200px columns), centred in
            the content column and never wider than it;
          - each field fills its column less the header copy's 4px side
            margins, so the two columns line up; the <br>s are hidden and the
            fields wrap on their own;
          - the Turnstile box sits in the [recaptcha] slot above the button
            (moved in the markup by gen-routes.mjs, so the keyboard order
            matches), centred;
          - the button is centred, the spinner out of the line flow.
        Below 600px the columns stack, each field the form's full width. */
.entry .wpcf7-form {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.entry .wpcf7-form .tucson-divorce-law-consult {
  box-sizing: border-box;
  width: calc(100% - 8px);
  margin-left: 4px;
  margin-right: 4px;
}
.entry .wpcf7-form > div[style*="width:200px"] br {
  display: none;
}
.entry .wpcf7-form > .cf-turnstile {
  display: flex;
  justify-content: center;
  margin-bottom: 22px; /* the slot's own <p> margin - the button stays 25px below it, as on live */
}
.entry .wpcf7-form > div[style*="position: relative"] {
  text-align: center;
}
.entry .wpcf7-form .schedule-consult {
  margin-left: 0;
}
.entry .wpcf7-form .wpcf7-spinner {
  position: absolute;
}
@media screen and (max-width: 599px) {
  .entry .wpcf7-form > div[style*="width:200px"] {
    float: none !important;
    width: auto !important;
  }
  .entry .wpcf7-form .tucson-divorce-law-consult {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  /* Stacked, the first column's 22px paragraph margin would open a gap between
     Email and Phone three times the 10px between the other fields. */
  .entry .wpcf7-form > div[style*="width:200px"]:has(+ div[style*="width:200px"]) > p {
    margin-bottom: 0;
  }
}

/*    · The header copy's fields are sized to its columns (theme: 175px), so
        they fit side by side down to 481px and stack below that. */
@media screen and (max-width: 480px) {
  #tucson-divorce-law-consultation-form form > div[style*="width:200px"] {
    float: none !important;
    width: auto !important;
  }
  #tucson-divorce-law-consultation-form .tucson-divorce-law-consult {
    float: none;
    box-sizing: border-box;
    width: calc(100% - 8px);
    height: 25px;
  }
  #tucson-divorce-law-consultation-form form > div[style*="width:200px"] br {
    display: none;
  }
  #tucson-divorce-law-consultation-form form > div[style*="position: relative"] {
    text-align: center;
  }
  #tucson-divorce-law-consultation-form .schedule-consult {
    margin-left: 0;
  }
  #tucson-divorce-law-consultation-form .wpcf7-spinner {
    position: absolute;
  }
  /* The header's content box sits inside its 20px phone padding (section 3);
     the box reaches 5px into it on each side, so it sits 15px from both screen
     edges and has room for Turnstile's widget. */
  #logo_section_container #tucson-divorce-law-consultation-form {
    max-width: none;
    margin-left: -5px;
    margin-right: -5px;
  }
}