/* ==========================================================================
   Harry Jackson Travel — "the world's worst travel agents"
   Tacky, loud, comedic one-off site theme.
   ========================================================================== */

:root {
  --color-yellow: #ffd400;
  --color-orange: #ff6a00;
  --color-red: #e8112d;
  --color-navy: #001f4d;
  --color-navy-light: #013a7a;
  --color-black: #14100c;
  --color-cream: #fff6df;
  --color-white: #ffffff;

  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body: "Poppins", "Segoe UI", Tahoma, sans-serif;

  --shadow-hard: 4px 4px 0 rgba(0, 0, 0, 0.85);
  --marquee-height: 42px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-cream);
  color: var(--color-black);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

/* Emoji glyphs render with their own font metrics (extra ascent/descent)
   that make text-relative tricks like vertical-align unreliable across
   fonts and browsers. Instead, every place an emoji sits next to text uses
   a flex row with align-items: center, so the emoji is centered against the
   actual rendered height of the text beside it rather than guessed offsets. */
.emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-0.06em);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Sliding marquee banner
   -------------------------------------------------------------------------- */

.marquee {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--marquee-height);
  background: repeating-linear-gradient(
    45deg,
    var(--color-black),
    var(--color-black) 12px,
    #000 12px,
    #000 24px
  );
  border-bottom: 3px dashed var(--color-yellow);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.marquee__track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: marquee-scroll 65s linear infinite;
  will-change: transform;
}

.marquee__track > span {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0 1.5rem;
  font-family: var(--font-display);
  letter-spacing: 0.05em;
  font-size: 0.95rem;
  color: var(--color-yellow);
  text-transform: uppercase;
}

.marquee__track > span:nth-child(even) {
  color: var(--color-white);
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: var(--marquee-height);
  z-index: 20;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  background: var(--color-navy);
  border-bottom: 4px solid var(--color-orange);
}

.navbar__brand {
  font-family: var(--font-display);
  color: var(--color-yellow);
  text-decoration: none;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}

.navbar__links {
  display: flex;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar__links a {
  text-decoration: none;
  color: var(--color-white);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.navbar__links a:hover,
.navbar__links a:focus-visible {
  border-color: var(--color-yellow);
  color: var(--color-yellow);
}

.navbar__links a.is-active {
  background: var(--color-orange);
  color: var(--color-black);
}

@media (max-width: 420px) {
  .navbar {
    flex-direction: column;
    gap: 0.6rem;
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: calc(100svh - var(--marquee-height));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.hero__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  filter: blur(35px) brightness(0.55) saturate(1.2);
  transform: scale(1.15);
  z-index: 1;
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center 8%;
  z-index: 2;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(
    to bottom,
    rgba(0, 10, 30, 0.75) 0%,
    rgba(0, 10, 30, 0.35) 18%,
    rgba(0, 10, 30, 0) 38%,
    rgba(0, 10, 30, 0) 58%,
    rgba(0, 10, 30, 0.55) 82%,
    rgba(0, 10, 30, 0.88) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 5;
  padding: 1.75rem 1.25rem 1rem;
  text-align: center;
}

.hero__headline {
  font-family: var(--font-display);
  color: var(--color-yellow);
  text-transform: uppercase;
  font-size: clamp(1.9rem, 8vw, 3.4rem);
  line-height: 1.05;
  margin: 0 auto;
  max-width: 20ch;
  -webkit-text-stroke: 2px var(--color-black);
  paint-order: stroke fill;
  text-shadow: var(--shadow-hard);
  transform: rotate(-1.5deg);
}

.hero__bottom {
  position: relative;
  z-index: 5;
  padding: 1.25rem 1.25rem 2.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.hero__tagline {
  color: var(--color-white);
  font-weight: 600;
  font-size: clamp(0.95rem, 3.6vw, 1.15rem);
  max-width: 42ch;
  margin: 0;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9);
}

.hero__tagline strong {
  color: var(--color-yellow);
}

.hero__badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--color-black);
  color: var(--color-yellow);
  border: 1px dashed var(--color-yellow);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
}

/* Tacky CTA button */
.btn {
  font-family: var(--font-display);
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.15rem;
  padding: 0.85rem 2.2rem;
  border-radius: 999px;
  border: 3px solid var(--color-black);
  background: linear-gradient(180deg, var(--color-yellow), var(--color-orange));
  color: var(--color-black);
  box-shadow: var(--shadow-hard);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  animation: pulse-btn 1.8s ease-in-out infinite;
}

.btn:hover,
.btn:focus-visible {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.85);
}

@keyframes pulse-btn {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.035);
  }
}

/* Floating sale stickers are pinned (via .sticker's own absolute positioning)
   relative to this inner wrapper rather than the full-width hero, so on wide
   screens they stay near the centered content column instead of drifting out
   towards the edges of the image. */
.hero__stickers-outer {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
}

.hero__stickers-inner {
  max-width: 900px;
  position: relative;
  width: 100%;
  height: 100%;
}

/* Floating sale stickers */
.sticker {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-red);
  border: 3px dashed var(--color-yellow);
  border-radius: 50%;
  box-shadow: var(--shadow-hard);
  padding: 0.4rem;
  line-height: 1.05;
}

.sticker--sale {
  top: 8%;
  left: 4%;
  width: 92px;
  height: 92px;
  font-size: 1.2rem;
  transform: rotate(-14deg);
  animation: float-a 4.5s ease-in-out infinite;
}

.sticker--deal {
  top: 12%;
  right: 4%;
  width: 78px;
  height: 78px;
  font-size: 1rem;
  transform: rotate(10deg);
  background: var(--color-navy);
  animation: float-b 5.2s ease-in-out infinite;
}

.sticker--new {
  bottom: 22%;
  right: 5%;
  width: 84px;
  height: 84px;
  font-size: 1rem;
  transform: rotate(-8deg);
  background: var(--color-orange);
  color: var(--color-black);
  animation: float-a 5s ease-in-out infinite reverse;
}

/* On narrow screens the headline and tagline both run near full-width, so
   pull the stickers into the clear band in the middle of the hero (beside
   his body) instead of letting them sit behind the text. Anchored with fixed
   units (not percentages of the hero's height) so they stay clear of the
   text on both short and tall phone screens. */
@media (max-width: 700px) {
  .sticker--sale {
    top: 7rem;
    left: 2%;
    bottom: auto;
    right: auto;
  }

  .sticker--deal {
    top: 7rem;
    right: 2%;
    bottom: auto;
    left: auto;
  }

  .sticker--new {
    bottom: 26rem;
    left: 3%;
    top: auto;
    right: auto;
  }
}

/* Short/compact phone screens don't have enough clear vertical space for a
   third sticker without it colliding with the headline or tagline, so drop
   it rather than risk covering the copy. */
@media (max-width: 700px) and (max-height: 700px) {
  .sticker--new {
    display: none;
  }
}

@keyframes float-a {
  0%,
  100% {
    transform: translateY(0) rotate(-14deg);
  }
  50% {
    transform: translateY(-10px) rotate(-8deg);
  }
}

@keyframes float-b {
  0%,
  100% {
    transform: translateY(0) rotate(10deg);
  }
  50% {
    transform: translateY(-8px) rotate(16deg);
  }
}

/* --------------------------------------------------------------------------
   Reviews
   -------------------------------------------------------------------------- */

.reviews {
  padding: 3rem 1.25rem 3.5rem;
  background: var(--color-cream);
  text-align: center;
}

.reviews__eyebrow {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-navy);
  font-size: 0.8rem;
}

.reviews__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  color: var(--color-black);
  margin: 0.35rem 0 0.5rem;
  text-transform: uppercase;
}

.reviews__stars {
  color: var(--color-red);
  font-size: 1.5rem;
  letter-spacing: 0.15em;
}

.reviews__score {
  font-weight: 700;
  color: var(--color-navy);
  margin: 0.25rem 0 2rem;
}

.reviews__grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
}

@media (min-width: 640px) {
  .reviews__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .reviews__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.review-card {
  background: var(--color-white);
  border: 2px solid var(--color-black);
  border-radius: 10px;
  padding: 1.1rem 1.15rem;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.review-card__stars {
  color: var(--color-red);
  letter-spacing: 0.1em;
}

.review-card__quote {
  margin: 0;
  font-weight: 600;
  font-size: 0.98rem;
}

.review-card__author {
  margin: 0;
  font-size: 0.82rem;
  color: #555;
}

.review-card__author strong {
  color: var(--color-black);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--color-black);
  color: var(--color-cream);
  padding: 2.25rem 1.25rem 1.5rem;
  text-align: center;
}

.site-footer__brand {
  font-family: var(--font-display);
  color: var(--color-yellow);
  font-size: 1.3rem;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.site-footer p {
  margin: 0.3rem 0;
  font-size: 0.85rem;
  color: #cfc6ae;
}

.site-footer__disclaimer {
  display: inline-block;
  margin-top: 0.75rem;
  font-weight: 700;
  color: var(--color-orange);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  border: 1px dashed var(--color-orange);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
}

.site-footer__links {
  margin-top: 1rem;
}

.site-footer__links a {
  color: var(--color-yellow);
  text-decoration: underline;
  font-size: 0.85rem;
}

.site-footer__copyright {
  margin-top: 1.25rem;
  font-size: 0.72rem;
  color: #746c56;
}

/* --------------------------------------------------------------------------
   Gallery page
   -------------------------------------------------------------------------- */

.gallery-hero {
  background: var(--color-navy);
  background-image: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
  color: var(--color-white);
  text-align: center;
  padding: 2.5rem 1.25rem 2rem;
  border-bottom: 4px solid var(--color-orange);
}

.gallery-hero__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.8rem, 6vw, 2.8rem);
  color: var(--color-yellow);
  margin: 0 0 0.5rem;
  text-shadow: var(--shadow-hard);
}

.gallery-hero__subtitle {
  margin: 0 auto;
  max-width: 46ch;
  font-weight: 500;
  color: #e6ecf7;
}

.gallery-hero__count {
  display: inline-block;
  margin-top: 0.9rem;
  background: var(--color-orange);
  color: var(--color-black);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
}

.gallery-wrap {
  padding: 1.75rem 1rem 3rem;
  max-width: 1400px;
  margin: 0 auto;
}

.gallery-masonry {
  column-count: 2;
  column-gap: 0.6rem;
}

@media (min-width: 560px) {
  .gallery-masonry {
    column-count: 3;
  }
}

@media (min-width: 860px) {
  .gallery-masonry {
    column-count: 4;
  }
}

@media (min-width: 1180px) {
  .gallery-masonry {
    column-count: 5;
  }
}

.gallery-item {
  break-inside: avoid;
  margin-bottom: 0.6rem;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--color-black);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.7);
  cursor: zoom-in;
  background: #ddd;
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.25s ease;
}

.gallery-item:hover img {
  transform: scale(1.04);
}

.gallery-empty {
  text-align: center;
  padding: 3.5rem 1.5rem;
  color: var(--color-navy);
}

.gallery-empty__title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(5, 5, 10, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.lightbox.is-open {
  display: flex;
}

.lightbox__img {
  max-width: 100%;
  max-height: 88vh;
  border: 3px solid var(--color-white);
  border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  background: var(--color-orange);
  color: var(--color-black);
  border: 2px solid var(--color-black);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__close {
  top: 1rem;
  right: 1rem;
}

.lightbox__prev {
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__next {
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__counter {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-white);
  font-size: 0.85rem;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
}