/* predictable hidden behaviour */
[hidden] { display: none !important; }

/* ===== Auto-scroll gallery strip ===== */
.scroll-box { position: relative; margin-top: 1rem; }

.scroll-box-viewport {
  overflow: hidden;                /* hide native scrollbar for the auto-scroller */
  white-space: nowrap;
  border: 2px solid var(--primary-color);
  border-radius: 10px;
  background-color: var(--overlay-color);
  padding: .5rem .75rem;
}

.scroll-box-inner {
  display: inline-flex;            /* horizontal row of images */
  gap: 10px;
  will-change: transform;
}

.scroll-image {
  height: 240px;
  width: auto;
  border-radius: 8px;
  border: 0px solid var(--primary-color);
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
  cursor: zoom-in;
  object-fit: cover;
  display: block;
}

/* Left/right arrows */
.scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--primary-color);
  background: rgba(30,20,15,.6);
  color: var(--primary-color);
  font-size: 22px; line-height: 30px;
  text-align: center;
  cursor: pointer; z-index: 2; z-index: 3;
}
.scroll-arrow.left  { left: 6px; }
.scroll-arrow.right { right: 6px; }
.scroll-arrow:hover { background: rgba(30,20,15,.8); }

/* Fallback note */
.gallery-fallback { text-align: center; color: var(--accent-color); margin-top: .75rem; }

/* ===== Enlarged overlay ===== */
.enlarged-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.85);
  display: grid; place-items: center;
}
.enlarged-overlay img {
  max-width: 92vw; max-height: 82vh;
  border-radius: 10px;
  border: 2px solid var(--primary-color);
  box-shadow: 0 8px 24px rgba(0,0,0,.8);
  background: #000;
}
.close-btn {
  position: absolute; top: 16px; right: 16px;
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid var(--primary-color);
  background: rgba(30,20,15,.6);
  color: var(--primary-color);
  font-size: 26px; line-height: 34px;
  cursor: pointer;
}

/* --- Our story: paragraph rhythm & readable line height --- */
#our-story p {
  margin: 0 0 1.1rem;      /* increased paragraph spacing */
  line-height: 1.75;       /* more comfortable reading */
}
#our-story p:last-child {
  margin-bottom: 0;
}

/* --- Our story: links match body text, with subtle hover --- */
#our-story a,
#our-story a:visited {
  color: var(--primary-color);            /* same white as body text */
  text-decoration: underline;
  text-underline-offset: 2px;
}
#our-story a:hover,
#our-story a:focus {
  color: var(--accent-color);             /* subtle contrast on hover/focus */
  text-decoration-thickness: 2px;
}
#our-story a:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 3px;
}


/* ===== Featured logos (scoped) ===== */
.featured-header,
.featured-logos {
  background-color: var(--light-white);
  border-radius: 5px;
  padding: .5rem;
  margin: 0 auto 1rem;
  max-width: 800px;
}
.featured-header { display: flex; align-items: center; gap: 1rem; }
.featured-header .line { flex: 1; height: 1px; background-color: var(--accent-color); border: none; }
.featured-header .header-text { color: var(--accent-color); font-weight: 500; white-space: nowrap; }

#featured .featured-logos {
  display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;
}
#featured .featured-logos img {
  height: 60px; width: auto; object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
  transition: transform var(--transition);
}
#featured .featured-logos img:hover,
#featured .featured-logos img:focus { transform: scale(1.05); outline: none; cursor: pointer; }

/* ===== Section reveal ===== */
.wrap.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.wrap.revealed { opacity: 1; transform: translateY(0); }

/* Small screens */
@media (max-width: 600px) {
  .scroll-image { height: 110px; }
  .scroll-arrow { display: none; }
}
/* Thank-you page card */
#thankyou {
  display: flex;
  justify-content: center;
  padding-block: 2rem;
}

#thankyou .thank-card {
  max-width: 720px;
  width: min(90vw, 720px);
  padding: 1.75rem 1.5rem;
  border-radius: 16px;
  background: rgba(20, 12, 8, 0.65);            /* translucent dark */
  border: 1px solid rgba(255, 178, 66, 0.35);    /* subtle amber line */
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  text-align: center;
  color: #fff;                                   /* ensure readable text */
}

#thankyou .thank-card h2 {
  color: var(--primary-color, #fff);
  margin: 0 0 .75rem;
}

/* Make links readable on the card */
#thankyou .thank-card a,
#thankyou .thank-card a:visited {
  color: var(--primary-color, #fff);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#thankyou .thank-card a:hover,
#thankyou .thank-card a:focus {
  color: var(--accent-color, #f7b74a);
  text-decoration-thickness: 2px;
}

/* Button contrast tweak (only if needed) */
#thankyou .btn {
  background: var(--primary-color, #fff);
  color: #3b2a1f;
  border-color: transparent;
}
#thankyou .btn:hover { filter: brightness(0.95); }

#thankyou .btn.btn-outline {
  background: transparent;
  border-color: var(--primary-color, #fff);
  color: var(--primary-color, #fff);
}
#thankyou .btn.btn-outline:hover {
  background: rgba(255,255,255,0.08);
}