/*
 * Cedefindo old-site — layout overlap fixes.
 *
 * Kept out of css/app.css on purpose: that file is a scraped, minified bundle
 * with no build step, so a future re-scrape would silently drop edits made
 * inside it. Loaded last via wp_enqueue_scripts (see functions.php), after the
 * hardcoded <link> tags in every template.
 *
 * Measured against staging at the sizes noted on each rule.
 */

/* --- 1. Header is out of flow, so the copy slides up underneath it -------
 *
 * .home #header is position:absolute and reserves no space, while main is
 * bottom-anchored (margin: auto 0 50px). Given a short viewport there is no
 * vertical slack, so the logo and nav land on top of "WELCOME" and the body
 * copy. Confirmed at 836x660, 1024x600, 1200x660 and 1280x600 — this is a
 * HEIGHT problem, not a small-screen one; it fires at 1280px wide.
 *
 * Putting the header back in flow fixes it at every size, and is a no-op when
 * there IS room, because main's auto top margin simply absorbs the header's
 * height (verified: 1440x900 is byte-identical before and after). No media
 * query needed.
 *
 * app.css already does exactly this inside @media (max-width:490px); this just
 * lifts the theme's own fix to all widths.
 */
.home #header { position: relative; }
.home .logo   { position: relative; }   /* logo is absolute at <=768px; push it down too */

/* --- 2. The 35vw photo column slices through the body copy ---------------
 *
 * #slider-home{width:35vw;height:100vh} is only corrected in the theme's
 * <=490px block, so between 491px and ~760px the photo overlaps roughly 150px
 * of every line. Values below are lifted verbatim from that phone block, which
 * turns the photo into a dimmed full-bleed wash behind the text instead of a
 * hard-edged column through it. Confirmed at 500, 600, 700 and 760px; clean at
 * 900px, so 768 is the right ceiling.
 */
@media (max-width: 768px) {
  #slider-home { width: 120%; height: auto; opacity: .3; }
  .slide-item  { background-color: #000; opacity: .5; }
}

/* --- 3. Footer copyright lands on the phone/fax lines --------------------
 *
 * .copyright goes position:absolute in app.css's @media (max-width:1024px)
 * block and nothing reserves its space, so it overlaps .phone by 23px at every
 * width <=1024 (confirmed at 540, 768, 900, 1024; clean at 1025+).
 *
 * .iso-image is NOT included here: it shares the same absolute positioning but
 * .footer-links{padding-top:70px} already reserves its space, and it was
 * measured as overlapping nothing. Adding a rule for it would be a no-op.
 */
@media (max-width: 1024px) {
  #footer .copyright {
    position: static;
    width: auto;
    margin-left: auto;
    text-align: right;
  }
}

/* --- 4. Same header collision on the About page -------------------------
 *
 * app.css has `.about #header,.home #header{position:absolute}` — .about and
 * .home are the ONLY two pages taking the header out of flow; every other page
 * keeps the base `#header{position:relative}` and was never affected.
 *
 * Unlike .home, this one is height-bounded. The home fix could be unconditional
 * because home's `main` is `margin: auto 0 50px`, so the auto top margin simply
 * absorbed the header and desktop came out byte-identical. About's `main` has no
 * such auto margin, so making the header relative at ALL heights pushes content
 * down 60px on desktop — a visible change with no bug to justify it.
 *
 * Measured on live: main's top is 52/96/116 at viewport heights 572/660/700
 * against a header bottom of 120 (overlapping), and 136/216 at 740/900 (clear).
 * So the collision ends around 708px tall; 720 covers it with margin and leaves
 * every real desktop alone. Confirmed unchanged at 740, 900 and 1080.
 *
 * app.css already sets `.about #header{position:relative}` inside
 * @media (max-width:768px) — same fix, just bounded by width instead of height.
 */
@media (max-height: 720px) {
  .about #header { position: relative; }
  .about .logo   { position: relative; }
}

/* --- 5. Breathing room under the header on short viewports ---------------
 *
 * Rules 1 and 4 put the header back in flow, which stops the collision — but
 * when vertical space is tight the content then starts at exactly the header's
 * bottom edge, with a 0px gap (measured: header bottom 120 / main top 120 on
 * About at 1366x500 and 1366x572; 185/185 on Home at 1366x572). Correct, but
 * cramped.
 *
 * Taller viewports already have a natural gap from the auto margins (36px at
 * 660, 96px at 900, 186px at 1080), so this is bounded to the same short-
 * viewport range as rule 4 and changes nothing above it.
 *
 * 30px matches the spacing rhythm the theme already uses (.boxs a{margin:0 30px},
 * the .about-N:before offsets).
 *
 * padding-bottom is 60px rather than 30px because the footer was flush against
 * the cards (main bottom 519 / footer top 519 at 1366x500) AND the decorative
 * squares (.about-N:before) are absolutely positioned at bottom:-30px, so they
 * hang 30px past the card. 30px of padding would only just clear them; 60px
 * leaves a real gap before the footer.
 */
@media (max-height: 720px) {
  .home .flex-container,
  .about .flex-container { padding-top: 30px; padding-bottom: 60px; }
}