/* =============================================================================
   Bristol Dockyards rebrand for Global Stories
   Loaded after the upstream stylesheet (which the proxy has already recoloured),
   so equal-specificity selectors here win by source order.
   Tokens mirror BristolDockyards/bd/app/globals.css.
   ============================================================================= */

@font-face {
  font-family: "BD Gellix";
  src: url("/__bd/fonts/Gellix-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "BD Gellix";
  src: url("/__bd/fonts/Gellix-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "BD Perfektta";
  src: url("/__bd/fonts/Perfektta-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "BD Quadrant";
  src: url("/__bd/fonts/QuadrantText-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  --bd-mainMastBrown: #3c3021;
  --bd-breakerWhite: #f8f5e1;
  --bd-offWhite: #fffdef;
  --bd-dockyardPink: #ff84fd;
  --bd-mediumBrown: #9c9789;
  --bd-limeyGreen: #aaff65;
  --bd-hairline: #d3cfbe;
  --bd-shadow: 0 4px 16px 0 rgba(60, 48, 33, 0.08);

  --bd-arrow-brown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 5h7.5M5.25 1.5 8.75 5l-3.5 3.5' fill='none' stroke='%233c3021' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --bd-arrow-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 5h7.5M5.25 1.5 8.75 5l-3.5 3.5' fill='none' stroke='%23f8f5e1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --bd-arrow-brown-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M9 5H1.5M4.75 1.5 1.25 5l3.5 3.5' fill='none' stroke='%233c3021' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --bd-map-duotone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='d' color-interpolation-filters='sRGB'%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='table' tableValues='.235 .235 .235 .867 .867'/%3E%3CfeFuncG type='table' tableValues='.188 .188 .188 .820 .820'/%3E%3CfeFuncB type='table' tableValues='.129 .129 .129 .682 .682'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3C/svg%3E#d");
  --bd-corner-pink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35'%3E%3Cpath d='M35 0v35H0z' fill='%23ff84fd'/%3E%3C/svg%3E");
}

/* --- Base ------------------------------------------------------------------ */

/* Body only: giving html a background too stops body's propagating to the canvas,
   which then paints over the homepage map on body::after (z-index: -1). */
body {
  background-color: var(--bd-breakerWhite);
  font-family: "BD Gellix", Arial, sans-serif;
  font-weight: 600;
  color: var(--bd-mainMastBrown);
}

p {
  line-height: 1.5;
}

a {
  color: var(--bd-mainMastBrown);
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

h1 {
  font-family: "BD Perfektta", "BD Gellix", Arial, sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--bd-mainMastBrown);
  margin-bottom: 0.4em;
  text-wrap: balance;
}

::selection {
  background: var(--bd-dockyardPink);
  color: var(--bd-mainMastBrown);
}

/* --- Buttons --------------------------------------------------------------- */

.btn,
button span {
  background: var(--bd-dockyardPink);
  color: var(--bd-mainMastBrown);
  border: 1px solid var(--bd-dockyardPink);
  border-radius: 8px;
  box-shadow: none;
  font-family: "BD Gellix", Arial, sans-serif;
  font-weight: 700;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.btn:hover,
.btn:focus-visible,
button span:hover {
  background: var(--bd-mainMastBrown);
  border-color: var(--bd-mainMastBrown);
  color: var(--bd-breakerWhite);
}

.btn.with-arrow::after,
button span.with-arrow::after {
  background-image: var(--bd-arrow-brown);
}

.btn.with-arrow:hover::after,
.btn.with-arrow:focus-visible::after,
button span.with-arrow:hover::after {
  background-image: var(--bd-arrow-cream);
}

.btn-grey {
  background: transparent;
  border-color: var(--bd-mainMastBrown);
  color: var(--bd-mainMastBrown);
}

.btn-grey.with-arrow::after {
  background-image: var(--bd-arrow-brown);
}

.btn-on-edge,
.homepage-intro ul a.btn {
  border-radius: 8px;
}

.curator-tag {
  border-radius: 0 0 8px 8px;
}

/* Fixed on map/modal pages, in normal flow on list pages */
.btn-start-again.loading {
  left: 1em;
}

.btn-start-again:not(.loading) {
  margin-left: 1em;
}

/* --- Homepage -------------------------------------------------------------- */

.homepage-intro {
  border-radius: 8px;
}

.homepage-intro .logo {
  width: 168px;
  height: 48px;
  background: url("/__bd/logo.svg") no-repeat center center;
  background-size: contain;
  margin: 0 auto 1.75em;
}

/* Static map image behind the homepage, duotoned to match the branded Google map the proxy
   injects elsewhere: dark (water) -> mainMastBrown, light (land) -> MAP_LAND (#ddd1ae).
   Not applied to voyage route thumbnails: their red route has the same luminance as the
   water, so it vanishes. */
body::after {
  filter: var(--bd-map-duotone);
}

.homepage-intro ul {
  margin-left: 0;
  margin-right: 0;
}

/* Upstream moves the curator tag inside the card at these sizes */
@media (max-width: 500px), (max-height: 750px) {
  .homepage-intro .curator-tag {
    border-radius: 8px;
  }
}

/* --- Cards, corner tabs, pagination --------------------------------------- */

.corner-button {
  background-image: var(--bd-corner-pink);
  border-bottom-right-radius: 0;
}

.corner-button::before {
  background-image: var(--bd-arrow-brown);
}

.prev-page-arrow::before {
  background-image: var(--bd-arrow-brown-left);
}

.next-page-arrow::after {
  background-image: var(--bd-arrow-brown);
}

.homepage-intro,
.traveller-card,
.artefact-card {
  box-shadow: var(--bd-shadow);
}

/* --- Forms ----------------------------------------------------------------- */

select,
input,
textarea {
  font-family: "BD Gellix", Arial, sans-serif;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--bd-hairline);
  border-radius: 8px;
}

select:focus,
input:focus,
textarea:focus {
  box-shadow: inset 0 0 0 2px var(--bd-mainMastBrown);
}

::placeholder {
  color: var(--bd-mediumBrown);
}