/* ============================================================
   Fire Scene Simulator — shared layout + drag/drop styles
   Used ONLY by pages in /Pages/simulations/ (drag-and-drop
   fireground scenes). Not a site-wide stylesheet — keep it
   scoped to this folder, alongside sim-drag.js.
   ============================================================ */

.style1 { font-family: Verdana, Arial, Helvetica, sans-serif; }

.sim-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  width: 99%;
  margin: 0 auto;
}

.sim-scene {
  width: 56%;
  text-align: center;
  /* visible (not hidden) so a dragged smoke/flame asset can be
     pulled up above the photo without being clipped off */
  overflow: visible;
}

.sim-scene img.scene-photo {
  /* No "width" rule here on purpose — that lets each photo's own
     width="" HTML attribute on the img tag control its real display
     size, so you can set each one individually (e.g. ~730 for most).
     height:auto keeps the aspect ratio correct if max-width ever has
     to shrink it on a narrow screen. max-width:100% is purely a
     mobile safety net so a photo never overflows its column. */
  height: auto;
  max-width: 100%;
}

.sim-palette {
  width: 44%;
  padding: 0 10px;
  box-sizing: border-box;
}

/* Header row: three columns spanning the full page width —
   logo far left, title/subtitle centered, ad far right. Independent
   of the 56%/44% photo/palette split below it. */
.sim-header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  width: 99%;
  margin: 10px auto 10px;
  gap: 16px;
}

.sim-header-left {
  flex: 0 0 auto;
}

.sim-header-center {
  flex: 1 1 auto;
  text-align: center;
  min-width: 220px;
}

.sim-header-right {
  flex: 0 0 728px;
  width: 728px;
  max-width: 55%;
}

.sim-top-logo {
  display: inline-block;
  line-height: 0;
}

/* Width only (no fixed height) so the gif scales without distorting —
   it's a wide, short banner shape, not a square icon. Sized up to
   read at a similar visual weight to the title next to it; the ad
   column is already taller than this, so growing the logo doesn't
   add any extra height to the row. */
.sim-top-logo img {
  display: block;
  width: 320px;
  height: auto;
}

.sim-title {
  margin: 0 0 2px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 28px;
}

.sim-subtitle {
  margin: 0;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #333333;
}

.sim-top-ad {
  width: 728px;
  max-width: 100%;
  /* Reserve room for a bigger horizontal banner even before any ad
     has loaded, so the space above the photo/palette row looks
     intentional whether or not an ad is currently rendering here. */
  min-height: 140px;
}

/* Keep Auto ads out of the photo + drag-and-drop gif palette.
   Google's Auto ads script wraps every ad it inserts in an element
   with the class "google-auto-placed" — this hides any of those that
   land inside .sim-wrap, so an ad never breaks up the gif assets or
   sits on top of the photo. Auto ads keeps running everywhere else on
   the page as normal (as seen further down the page and on other
   pages) — this only ever collapses an ad that would have appeared
   inside this specific block.

   This was removed for a round while we were debugging why NO ads
   were showing anywhere (that turned out to be stale cached CSS, not
   this rule) — now that cache-busting (?v=4 on the file links) is
   confirmed working, this is back in and testable for real. Still
   worth pairing with the "Excluded areas" tool in the AdSense
   dashboard (Ads > By site > Ad settings > Excluded areas) — that's
   the one mechanism Google actually documents for keeping Auto ads
   out of a region, versus this CSS which just cleans up after an
   insertion Google already made. */
.sim-noauto .google-auto-placed {
  display: none !important;
}

/* ---- Draggable elements: works for mouse AND touch via Pointer Events ---- */
.drag {
  position: relative;
  cursor: grab;
  z-index: 100;
  touch-action: none;   /* stops the browser from scrolling the page while dragging on touch */
  -webkit-user-select: none;
  user-select: none;
}
.drag:active { cursor: grabbing; }
.drag.dragging { z-index: 1000; }

/* ---- Mobile layout: stack scene above palette, shrink drag icons a bit ---- */
@media (max-width: 800px) {
  .sim-scene, .sim-palette {
    width: 100%;
  }
  .sim-palette img.drag {
    transform: scale(0.85);
    transform-origin: top left;
  }
  .sim-header-row {
    flex-direction: column;
    margin: 6px auto 2px;
    gap: 6px;
  }
  .sim-header-left,
  .sim-header-center,
  .sim-header-right {
    width: 100%;
    max-width: 100%;
    padding: 0;
    text-align: center;
  }
  .sim-top-logo img {
    width: 150px;
  }
  .sim-top-ad {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    /* Mobile horizontal responsive ads render shorter than the
       desktop reserve above, so shrink the placeholder space to
       match instead of leaving a gap before the ad loads. */
    min-height: 50px;
  }
}

/* Reserves space at the bottom of the page for the AdSense Anchor Ad.
   Honest caveat: this only stops the anchor ad from sitting over the
   very end of the page content (footer/last elements) once someone
   scrolls all the way down. It does NOT stop the anchor ad from
   covering the simulator mid-page while someone is actively dragging
   near the bottom of their current browser view — that's inherent to
   a position:fixed anchor ad and can't be fixed with padding. If that
   overlap during actual drag-and-drop use turns out to be the bigger
   annoyance, the more complete fix is excluding Anchor ads on the
   simulation pages specifically via AdSense's Auto ads format/URL
   settings, rather than trying to out-code a fixed-position ad. */
body {
  padding-bottom: 100px !important;
}

/* Wide-screen-only side rail ad. Your columns are percentage-based
   rather than a fixed max-width container, so how much true empty
   gutter exists varies by monitor size — this is gated to very wide
   viewports (1600px+) specifically so it never has a chance to
   crowd the layout on laptops or tablets, where there isn't room.
   You'll need to create a manual ad unit in AdSense and swap in its
   real slot ID below (currently a placeholder). Test the exact
   breakpoint/offset live — I can't verify actual pixel margins on
   your screen from here. */
.sim-side-rail-ad {
  display: none;
}

@media (min-width: 1600px) {
  .sim-side-rail-ad {
    display: block;
    position: fixed;
    top: 120px;
    right: 12px;
    width: 160px;
    z-index: 10;
  }
}