/* ============================================================
   gwimagenew.css - BAWSCA garden photo view (GWImage.php)
   Loads on top of toursnew.css, which supplies the navigation,
   base type, skip link and footer. Nothing here needs Foundation,
   Spry or jQuery.
   ============================================================ */

/* Visually hidden but available to screen readers */
.gw-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.gw-wrap { max-width: 1100px; }

/* White card, like the tips below - #1779ba only reaches 4.49:1 against the
   #fafafa page background, but a clean 4.69:1 on white. */
.gw-empty {
  padding: 1.25rem;
  font-size: 1.05rem;
  background: #fff;
  border: 1px solid #ddd;
}
.gw-empty a { color: #1779ba; }

/* ============================================================
   Toolbar above the photo
   ============================================================ */
.gw-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
}

.gw-count {
  margin: 0;
  font-size: 0.9rem;
  color: #545454;
}

.gw-prevnext {
  display: flex;
  gap: 0.5rem;
}

/* Push the Add button to the far right on wide screens */
.gw-btn--add { margin-left: auto; }

.gw-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.5rem 0.9rem;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
  line-height: 1.2;
  color: #1779ba;
  background: #fff;
  border: 1px solid #cacaca;
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
  /* 24px minimum target height (WCAG 2.5.8) */
  min-height: 40px;
}

.gw-btn:hover {
  background: #1779ba;
  color: #fefefe;
  border-color: #1779ba;
}

.gw-btn:focus-visible,
.gw-btn:focus {
  outline: 3px solid #1779ba;
  outline-offset: 2px;
}

/* Disabled Prev / Next are not links, so they are not focusable either */
.gw-btn.is-disabled {
  color: #6b6b6b;              /* 4.85:1 on the #f4f4f4 fill - WCAG exempts
                                  inactive controls, but it costs nothing to pass */
  background: #f4f4f4;
  border-color: #ddd;
  cursor: default;
}
.gw-btn.is-disabled:hover {
  background: #f4f4f4;
  color: #6b6b6b;
  border-color: #ddd;
}

/* ---- "Added to My List" confirmation ----
   Sits on its own line under the toolbar. The height is reserved even when
   empty so the page does not jump when the message appears. Neutral colour on
   purpose: the wording carries the meaning, so nothing depends on colour
   (WCAG 1.4.1). #545454 on #fafafa is 7.26:1. */
.gw-addstatus {
  flex-basis: 100%;
  margin: 0;
  min-height: 1.4em;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #545454;
}

.gw-addstatus.is-visible::before {
  content: '\2713\00a0';       /* check mark, decorative - the text says the same */
  font-weight: 600;
}

/* ---- Show / hide markers switch ---- */
.gw-switch {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  color: #545454;
}

.gw-switch input {
  width: 20px;
  height: 20px;
  accent-color: #1779ba;
  cursor: pointer;
  margin: 0;
}

.gw-switch label {
  cursor: pointer;
  /* keeps the clickable label at a comfortable target size */
  padding: 0.5rem 0;
}

.gw-switch input:focus-visible,
.gw-switch input:focus {
  outline: 3px solid #1779ba;
  outline-offset: 2px;
}

/* ============================================================
   The photo and its hotspot markers

   Markers are placed with the percentages already stored in the
   hotspots table (HOT_LEFT / HOT_TOP / HOT_WIDTH / HOT_HEIGHT),
   so the photo and its markers scale together at any width and
   at any zoom level. Nothing is measured in fixed pixels.
   ============================================================ */
.gw-stage {
  position: relative;
  display: block;
  width: 100%;
  /* Never upscale past the photo's natural size */
  max-width: 1000px;
  margin: 0 0 0.75rem;
  background: #f0f0f0;
}

.gw-photo {
  display: block;
  width: 100%;
  height: auto;
}

.gw-spot {
  position: absolute;   /* left / top / width / height come from the inline style */
  margin: 0;
}

.gw-hide-spots .gw-spot { display: none; }

.gw-spot-btn {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border: 2px solid #fff;
  /* A dark halo on both sides of the coloured border keeps the marker
     visible over a light sky or a dark shrub alike - photos can be any
     colour, so a single-colour outline could not be guaranteed to show. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75),
              inset 0 0 0 1px rgba(0, 0, 0, 0.75);
}

/* Marker colours carried over from the original: white = plant,
   green = text hotlink, light blue = note */
.gw-spot--plant .gw-spot-btn { border-color: #ffffff; }
.gw-spot--text  .gw-spot-btn { border-color: #35d435; }
.gw-spot--note  .gw-spot-btn { border-color: #4fd6d6; border-radius: 5px; }

.gw-spot-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* A white ring inside a dark halo reads against any photograph */
.gw-spot-btn:focus-visible,
.gw-spot-btn:focus {
  outline: 3px solid #ffffff;
  outline-offset: 0;
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.85),
              inset 0 0 0 1px rgba(0, 0, 0, 0.85);
}

.gw-spot.is-open .gw-spot-btn {
  background: rgba(23, 121, 186, 0.35);
  border-color: #ffffff;
}

/* ---- The details panel ---- */
.gw-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  width: 300px;
  max-width: 78vw;
  padding: 0.9rem 1rem 1rem;
  background: #fff;
  border: 1px solid #cacaca;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
  font-size: 0.9rem;
  color: #444;
  text-align: left;
}

.gw-panel[hidden] { display: none; }

/* Markers on the right half open their panel to the left so it
   cannot run off the edge of the photo */
.gw-spot--flip .gw-panel {
  left: auto;
  right: 0;
}

/* Markers low in the photo open their panel upward so it stays
   over the image instead of pushing below the fold */
.gw-spot--up .gw-panel {
  top: auto;
  bottom: calc(100% + 8px);
}

.gw-panel p { margin: 0 0 0.6rem; line-height: 1.45; }
.gw-panel p:last-child { margin-bottom: 0; }

.gw-panel-title {
  margin: 0 0 0.25rem;
  padding-right: 1.75rem;      /* clear of the close button */
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #222;
}

.gw-panel-bot {
  font-style: italic;
  color: #555;
}

.gw-panel-img {
  display: block;
  width: 184px;
  max-width: 100%;
  height: auto;
  margin: 0 0 0.6rem;
}

.gw-panel-link {
  color: #1779ba;
  text-decoration: underline;
}
.gw-panel-link:focus-visible,
.gw-panel-link:focus {
  outline: 3px solid #1779ba;
  outline-offset: 2px;
}

.gw-panel-close {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  line-height: 1;
  color: #444;
  background: none;
  border: 0;
  cursor: pointer;
}
.gw-panel-close:hover { color: #1779ba; }
.gw-panel-close:focus-visible,
.gw-panel-close:focus {
  outline: 3px solid #1779ba;
  outline-offset: -3px;
}

.gw-hint {
  margin: 0 0 1.25rem;
  font-size: 0.85rem;
  color: #545454;
}

/* ============================================================
   Credits - was a layout <table>, now flex
   ============================================================ */
.gw-credits {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  padding: 0.6rem 0 1rem;
  border-top: 1px solid #ddd;
  margin-bottom: 1.5rem;
}

.gw-credit {
  flex: 1 1 12rem;
  margin: 0;
  font-size: 0.85rem;
  color: #545454;
}

.gw-credit--right { text-align: right; }

.gw-caption {
  flex: 2 1 16rem;
  margin: 0;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: #333;
}

/* ============================================================
   Tips
   ============================================================ */
.gw-tips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #ddd;
}

/* White card: keeps the one blue (#1779ba) above 4.5:1, which it is not
   against the #fafafa page background (4.49:1). */
.gw-tip {
  background: #fff;
  border: 1px solid #ddd;
  padding: 1rem 1.1rem 1.1rem;
}

.gw-tip h2 {
  margin: 0 0 0.4rem;
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #333;
}

.gw-tip p {
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #545454;
}

.gw-tip a { color: #1779ba; }

.gw-tip a:focus-visible,
.gw-tip a:focus {
  outline: 3px solid #1779ba;
  outline-offset: 2px;
}

/* ============================================================
   Small screens - the panel becomes a sheet pinned to the bottom
   of the viewport so it can never be clipped by the photo edge.
   ============================================================ */
@media screen and (max-width: 39.9375em) {

  .gw-toolbar { gap: 0.5rem; }
  .gw-btn--add { margin-left: 0; }
  .gw-count { width: 100%; }

  .gw-panel,
  .gw-spot--flip .gw-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    max-width: none;
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 0;
    border-top: 3px solid #1779ba;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.3);
    padding: 1rem 1.1rem 1.25rem;
    z-index: 120;
  }

  .gw-panel-close {
    width: 44px;
    height: 44px;
    top: 4px;
    right: 4px;
  }

  .gw-credit,
  .gw-credit--right,
  .gw-caption { text-align: left; flex-basis: 100%; }
}

/* Respect a reduced-motion preference (no animations are used, but
   this keeps any future transition from firing) */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}