/* ==================================================================
   Ghostkeeper component layer
   ------------------------------------------------------------------
   Small, additive stylesheet loaded AFTER style.css. It defines the
   explicit .gk-* components the templates use, so the haunted frame
   is a deliberate component rather than a global .container override.
   Legacy rules in style.css are left untouched.
   ================================================================== */

/* --- Framed panel: the carved-border haunted frame ---------------- */
.gk-frame {
  display: block;
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  border: 15px solid transparent;
  -o-border-image: url(../images/border-image.png) 15 stretch;
  border-image: url(../images/border-image.png) 15 stretch;
}

@media (max-width: 600px) {
  .gk-frame {
    border-width: 7px;
    -o-border-image: url(../images/border-image.png) 7 stretch;
    border-image: url(../images/border-image.png) 7 stretch;
  }
}

/* Content rhythm inside a frame (matches the old .container look). */
.gk-main {
  padding-bottom: 1.5em;
}

.gk-main p {
  width: 75%;
  margin: 0 auto;
  padding: 2% 0;
  text-align: center;
}

/* Lower homepage copy: slightly tighter paragraph gaps (Gary request). */
.gk-home-copy p {
  padding: 0.8% 0;
  margin: 0.4em auto;
}

.gk-home-copy .gk-award {
  margin: 1rem 0 0.5rem;
}

.gk-home-copy blockquote {
  margin: 0.6em auto;
}

/* --- Buttons ------------------------------------------------------ */
.gk-btn {
  display: inline-block;
  padding: 10px 24px;
  background: rgba(0, 0, 0, 0.75);
  border: 2px solid #F24900;
  border-radius: 4px;
  color: #fff;
  letter-spacing: 1px;
  text-decoration: none;
  text-shadow: none;
  transition: all .3s ease;
}

.gk-btn:hover,
.gk-btn:focus {
  background: #F24900;
  color: #fff;
  text-decoration: none;
}

/* --- Header / navigation ------------------------------------------ */
.gk-header {
  margin-bottom: 0;
}

.gk-header__brand img {
  margin: 0 auto;
}

.gk-nav {
  padding: 10px 0 6px;
  text-align: center;
}

.gk-menu .sidebar-nav-item {
  display: inline-block;
  margin: 0 .6em;
  padding: 4px 2px;
  color: rgba(255, 255, 255, 0.9);
}

.gk-menu .sidebar-nav-item:hover,
.gk-menu .sidebar-nav-item:focus {
  color: #F24900;
}

.gk-nav .gk-btn {
  margin: 0 .6em;
  padding: 4px 16px;
}

.gk-page {
  overflow-x: hidden;
}

/* --- Hero --------------------------------------------------------- */
.gk-hero {
  overflow: hidden;
}

/* style.css anchors the hero heading and facts at negative offsets,
   which pushes their first lines above the frame. Re-anchor them
   inside the panel; title sits higher for a cleaner composition. */
.gk-hero #text h1 {
  top: 0%;
}

/* Desktop/tablet: #marcon h1 is 5vw and right:50%, so at wide viewports
   the title grows into the schedule half. Keep it ~20–25% smaller and
   centred entirely within the left visual zone (facts stay at right:0). */
@media (min-width: 601px) {
  .gk-hero #text h1 {
    right: auto;
    left: 0;
    width: 48%;
    text-align: center;
    font-size: clamp(1.6rem, 3.85vw, 3rem);
  }
}

.gk-hero #text p {
  top: 2%;
}

/* Right-hand facts: keep block within the right half (right:0 unchanged). */
.gk-hero .gk-facts {
  width: 48%;
  font-size: 2.4vw;
  line-height: 3.15vw;
}

@media only screen and (min-width: 1400px) {
  .gk-hero .gk-facts {
    font-size: 1.7vw;
    line-height: 2.45vw;
  }
}

/* Stacking without changing the title/facts containing block.
   Do NOT position #text — style.css places h1 (right:50%) and
   facts (right:0) against #marcon; a full-panel #text overlay
   made #text the containing block and caused title/facts overlap.
   #images fills #marcon so moon/ghosts position correctly, and
   stays behind the absolutely positioned text via z-index. */
.gk-hero #images {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.gk-hero #text h1,
.gk-hero #text p.gk-facts {
  z-index: 2;
}

/* Title: lighter shadow (already readable). */
.gk-hero #text h1 {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.85),
    0 0 6px rgba(0, 0, 0, 0.45);
}

/* Facts: stronger shadow — sits over pale stone and ghost figures. */
.gk-hero #text p.gk-facts {
  text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.95),
    0 0 8px rgba(0, 0, 0, 0.65);
}

/* On small screens the hero is too short for the full facts block,
   and the booking panel repeats it immediately below — keep just the
   heading. */
@media (max-width: 600px) {
  .gk-hero #text h1 {
    top: 2%;
  }

  .gk-hero .gk-facts {
    display: none;
  }
}

.gk-hero #images img {
  position: absolute;
}

.gk-ghost--moon   { width: 15%; top: 0;    left: 20px; }
.gk-ghost--gary   { width: 25%; bottom: 0; left: 5%; }
/* Couple left of centre, facing toward the right-hand facts/noticeboard. */
.gk-ghost--couple { width: 20%; bottom: 0; left: 32%; }
/* Mother-and-child clear of the right-hand facts/pricing area. */
.gk-ghost--mother { width: 10%; bottom: 0; left: 48%; }

/* Ghosts drift into view; timings echo the old LayerSlider entrances. */
@media (prefers-reduced-motion: no-preference) {
  .gk-ghost,
  .gk-figure {
    opacity: 0;
    animation: gk-appear 2s ease-out forwards;
  }

  .gk-ghost--moon   { animation-delay: .3s; animation-duration: 1s; }
  .gk-ghost--gary   { animation-delay: .5s; animation-duration: 1.5s; }
  .gk-ghost--couple { animation-delay: 4.5s; }
  .gk-ghost--mother { animation-delay: 7s; }

  .gk-ghost {
    animation-name: gk-appear-drift;
  }
}

/* Desktop/tablet only: reveal ghosts sooner before users scroll past. */
@media (prefers-reduced-motion: no-preference) and (min-width: 601px) {
  .gk-ghost--moon   { animation-delay: .12s; animation-duration: .75s; }
  .gk-ghost--gary   { animation-delay: .25s; animation-duration: 1.05s; }
  .gk-ghost--couple { animation-delay: 2.2s; }
  .gk-ghost--mother { animation-delay: 3.6s; }
}

@keyframes gk-appear {
  to { opacity: 1; }
}

@keyframes gk-appear-drift {
  from { transform: translateY(25px); }
  to   { opacity: 1; transform: none; }
}

.gk-btn--hero {
  position: absolute;
  right: 4%;
  bottom: 6%;
  font-size: .8em;
}

/* --- Booking panel ------------------------------------------------ */
.gk-booking {
  margin: 0 auto;
  padding: 1em 0 .5em;
}

.gk-booking__title {
  margin-top: 1rem;
}

.gk-booking__actions {
  margin: .75em 0;
  text-align: center;
}

/* Lower schedule is secondary to the skyline panel facts. */
.gk-booking .gk-facts--lower {
  font-size: 0.95em;
  line-height: 1.45;
  width: 85%;
  margin: 0.5em auto;
  padding: 0.4em 0;
  text-align: center;
}

.gk-main .gk-booking__fallback,
.gk-booking__fallback {
  font-size: .8em;
}

.gk-main .gk-pending-note,
.gk-pending-note {
  font-size: .6em;
  font-style: italic;
  opacity: .65;
  line-height: 1.4;
}

/* --- Footer ------------------------------------------------------- */
.gk-footer {
  margin-top: 1em;
  padding: 1em 0;
}

.gk-footer__social {
  margin: .5em 0;
}

.gk-footer .sitemap {
  font-size: .7em;
}

/* --- Mobile containment pass (375–430 and nearby widths) ---------- */
@media (max-width: 430px) {
  .gk-frame {
    max-width: 100%;
  }

  .gk-nav {
    padding: 8px 0 6px;
  }

  .gk-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2px 8px;
    line-height: 1.2;
  }

  .gk-menu .sidebar-nav-item {
    margin: 0 .2em;
    padding: 3px 4px;
    letter-spacing: .2px;
    font-size: .92rem;
  }

  .gk-nav .gk-btn {
    margin: .3em .2em;
    padding: 6px 12px;
    font-size: .88rem;
  }

  .gk-btn--hero {
    right: 3%;
    bottom: 5%;
    font-size: .72em;
    padding: 8px 12px;
  }

  .gk-main p,
  .gk-home-copy p,
  .gk-footer p {
    width: 92%;
    line-height: 1.4;
  }

  .gk-booking .gk-facts--lower {
    width: 92%;
    font-size: .92rem;
    line-height: 1.5;
  }

  .gk-main img {
    max-width: 100%;
    height: auto;
  }
}

/* --- Smoke -------------------------------------------------------- */
/* style.css animates the smoke strip by -100% of its own width, which
   leaves a blank gap at the end of each cycle. Widen the strip and
   loop at -50% (a whole number of tile widths) for a seamless drift. */
.tech-slideshow,
.tech-slideshow3 {
  pointer-events: none;
}

.tech-slideshow > div.mover-1,
.tech-slideshow3 > div.mover-1 {
  width: 11840px;
  animation: gk-smoke 200s linear infinite;
}

.tech-slideshow3 > div.mover-1 {
  animation-duration: 130s;
}

@keyframes gk-smoke {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .tech-slideshow > div.mover-1,
  .tech-slideshow3 > div.mover-1 {
    animation: none;
  }
}