/* ============================================================
   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 {
  max-width: 740px;
  width: 100%;
  height: auto;
}

.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 600px;
  width: 600px;
  max-width: 50%;
}

.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. */
.sim-top-logo img {
  display: block;
  width: 220px;
  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: 600px;
  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: 120px;
}

/* 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;
  }
}