/* ============================================================
   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 {
  /* Up to 970px wide so Google can serve a billboard (970x250) on
     wide screens; shrinks with the viewport (max 60%) so it never
     crowds the logo/title. */
  flex: 0 1 970px;
  width: 970px;
  max-width: 60%;
  min-width: 300px;
}

.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: 100%;
  max-width: 970px;
  margin-left: auto;
  /* Reserved space so the page doesn't jump when the ad loads, and
     so there is white space above the photo for dragged assets. */
  min-height: 140px;
}

/* Wide screens: the ad column reaches 970px, so reserve billboard height. */
@media (min-width: 1650px) {
  .sim-top-ad {
    min-height: 250px;
  }
}

/* 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,
#sim-zone .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 {
    flex: 0 0 auto;
    min-width: 0;
    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;
}

/* ---- Simulator nav (below the photo) ---- */
.sim-nav {
  margin: 8px 0 0;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
}
.sim-nav span { margin: 0 4px; color: #666666; }

/* ---- Training text under the simulator (shared across sim pages) ---- */
.sim-article {
  max-width: 900px;
  margin: 24px auto 0;
  padding: 12px 16px;
  box-sizing: border-box;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #333333;
  background: #f9f9f9;
  border-top: 2px solid #cccccc;
}
.sim-article h2 { font-size: 18px; margin: 18px 0 6px; }
.sim-article h2:first-child { margin-top: 4px; }
.sim-article ul, .sim-article ol { margin: 6px 0 6px 22px; padding: 0; }
.sim-article li { margin-bottom: 6px; }
.sim-article .sim-note { font-size: 12px; color: #666666; }

/* ---- Page variant: auto ad on top, no manual header ad ---- */
.sim-header-spacer { flex: 0 0 320px; width: 320px; }   /* mirrors the logo width so the title stays centered */
.sim-wrap.sim-spaced { margin-top: 45px; }               /* white space under the title */
.sim-scene.sim-scene-offset { padding-top: 80px; }       /* extra room above the photo for dragged smoke/fire */

/* ---- Manual bottom ad pair (multiplex left, display right) ---- */
.sim-bottom-ads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  margin-top: 10px;
}
.sim-bottom-ad { min-width: 0; padding: 10px; box-sizing: border-box; }

/* Bottom ads: kept as a grid (not flex) so the existing mobile rule
   below that stacks the pair into one column keeps working.
   align-items:start stops the shorter ad from being stretched to
   match the taller one, which would leave dead space. */
.sim-bottom-ads { gap: 20px; align-items: start; }

.sim-bottom-ad ins.adsbygoogle {
  display: block;
  width: 100%;
}

/* Right-hand display ad only (the multiplex on the left sizes itself).
   250px matches the tallest common rectangle formats (300x250 / 336x280)
   so Google has room to choose a taller creative instead of a short
   banner. Caveat: this reserves space and nudges, it does not force a
   size — the ad unit's own settings and the auction decide the creative. */
.sim-bottom-ad:last-child ins.adsbygoogle {
  min-height: 250px;
}

/* If Google has no ad to serve, collapse the slot instead of leaving
   a blank 250px hole. */
.sim-bottom-ad ins.adsbygoogle[data-ad-status="unfilled"] {
  display: none !important;
}

.sim-footer {
  text-align: center;
  margin: 24px 0 0;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
}
.sim-footer a { color: #666666; }

@media (max-width: 800px) {
  .sim-header-spacer { display: none; }
  .sim-wrap.sim-spaced { margin-top: 10px; }
  .sim-scene.sim-scene-offset { padding-top: 10px; }
  .sim-bottom-ads { grid-template-columns: 1fr; }
}