@charset "UTF-8";
/*
Theme Name: Chester County Kiosk (PHP)
Theme URI: https://chestercountykiosk.com
Author: Miller Designworks
Description: Lightweight classic PHP theme for the Chester County Kiosk network (fixed 1080×1920 portrait). POI/interest maps render via MapPress (Leaflet) mashups fed by the local cc-locations sync; the Explore Chester County section is derived from the category taxonomy. MapSVG tours and events pages are per-kiosk.
Version: 0.31.1
License: GPL-2.0-or-later
Text Domain: cck-kiosk
*/
/* Type + colour come from the original theme (src/sass/pieces/global.scss), not
   from anything invented here: body is canada-type-gibson, every headline is
   pill-gothic-300mg uppercase in orange. Both faces load from the Typekit kit
   (eab1tpm) enqueued in functions.php — without it the fallbacks are wrong, so
   the kit is not optional. */
:root {
  --cck-maroon: #6C2B3D;
  --cck-nav-bg: #000000;
  --cck-nav-active: #2C74B3;
  --cck-orange: #F5A623;
  --cck-orange-dark: #DE941B;
  --cck-brown: #645146;
  --cck-brown-lite: rgba(255, 255, 255, .06);
  --cck-brown-lite-active: rgba(255, 255, 255, .12);
  --cck-brown-panel: #6E5C52;
  --cck-panel-ink: var(--cck-orange);
  --cck-panel-hover-bg: var(--cck-orange);
  --cck-panel-hover-ink: #8B572A;
  --cck-on-dark: var(--cck-white);
  --cck-orange-alt: #F6931D;
  --cck-orange-alt-hover: #D38C16;
  --cck-topic-scrim: rgba(0, 0, 0, 1);
  --cck-timeline-ink: #5f554c;
  --cck-paper: #e8e4e2;
  --cck-pill-border: rgba(255, 255, 255, .7);
  --cck-pill-ink: #3a2410;
  --cck-bv-green: #59A254;
  --cck-bv-green-active: #4A8A46;
  --cck-bv-blue: #31578B;
  --cck-bv-grey: #cccccc;
  --cck-white: #ffffff;
  --cck-black: #000000;
  --cck-surface: #ffffff;
  --cck-letterbox: #000000;
  --cck-ink: #1c1c1c;
  --cck-body-copy: #333333;
  --cck-muted: #6b6b6b;
  --cck-meta: #9B9B9B;
  --cck-hairline: #989898;
  --cck-cvb-cream: #E2DDBC;
  --cck-cvb-rule: #c2ad9b;
  --cck-tour-west: rgb(241, 90, 41);
  --cck-tour-east: rgb(0, 174, 239);
  --cck-head: "pill-gothic-300mg", sans-serif;
  --cck-body: "canada-type-gibson", sans-serif;
  --cck-tabbar-h: 150px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  height: 100%;
}

/* WHITE is the default backdrop; individual pages override it (see the page
   backdrops in _content.scss — brown, parchment and grey groups, plus Home and
   Explore). The original arrived at white by accident: it set no background at
   all and loaded Bootstrap after its own stylesheet, so Reboot's white body won,
   and only certain page groups painted over it. Same result, stated on purpose —
   History of Marshallton is white precisely because it's in none of the groups. */
body {
  color: var(--cck-ink);
  background: var(--cck-surface);
  font-family: var(--cck-body);
  font-size: 22px;
  line-height: 1.6;
  font-weight: 400;
}

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

/* Headline defaults, ported verbatim. Templates that need a different colour or
   case (event titles, popups) override — they don't restate the family. */
h1, h2, h3, h4, h5 {
  font-family: var(--cck-head);
  color: var(--cck-orange);
  text-transform: uppercase;
  letter-spacing: 0.06px;
  margin: 0;
}

h1 {
  font-size: 6.76vw;
}

a {
  color: var(--cck-orange);
}

.container {
  width: 100vw;
  max-width: 100vw;
}

.cck-frame {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  /* Ad-strip iframe wrapper (matches the original theme). 20.83333vw == 225/1080,
     so the strip scales with the viewport instead of being pinned to 225px.
     Scoped to .cck-frame so it can't leak into the iframe document, which reuses
     the .ad-block-wrapper class for the Slick track. */
}
.cck-frame > .ad-block-wrapper {
  flex: 0 0 auto;
  height: 20.83333vw;
  overflow: hidden;
  position: relative;
  background: var(--cck-letterbox);
}

/* position+z-index makes the viewport its own stacking context, which is what
   keeps the nav on top of the map. Leaflet layers its panes and controls up to
   z-index 1000 and MapPress goes to 10002; without a stacking context here
   those values compete directly with the nav's in the root context and win, so
   the map paints over the nav — which overlaps it by design (the curve). With
   one, the whole map subtree resolves inside .cck-viewport and the nav, as a
   later sibling with a higher z-index, sits above all of it. Applies to any
   viewport content, not just MapPress. */
.cck-viewport {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 0;
}

.cck-adstrip {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---- Fixed bottom nav (prod markup: curved footer + circular buttons) ----
   Pulled up so the curve overlaps the content beneath it. The footer-bg SVG is
   transparent above its curve, so the map/content shows through the dip instead
   of stopping at a straight edge above the nav. -3.4vw ≈ the curve's depth
   (the path dips ~36 of 1080 viewBox units). */
.nav-wrapper {
  flex: 0 0 auto;
  position: relative;
  height: 200px;
  margin-top: -3.4vw;
  z-index: 2;
}

.footer-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  line-height: 0;
}

.footer-bg-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.footer-bg-svg path {
  fill: var(--cck-nav-bg);
}

.nav-btns {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  padding: 0 5rem;
}
.nav-btns .button {
  text-align: center;
}
.nav-btns .button a {
  text-decoration: none;
  color: var(--cck-white);
  display: block;
}
.nav-btns .button.is-active .cck-badge {
  fill: var(--cck-nav-active);
}
.nav-btns .SVGInline {
  display: block;
}
.nav-btns .SVGInline-svg {
  width: 118px;
  height: 118px;
  display: block;
  margin: 0 auto;
}
.nav-btns .label {
  margin: 0.4rem 0 0;
  color: var(--cck-white);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.15;
  text-transform: uppercase;
}

.btn-cc .label,
.btn-welcome .label {
  max-width: 8em;
  margin-left: auto;
  margin-right: auto;
}

/* LOCAL content runs the reversed scheme: an orange band with a maroon top
   border and a maroon title. That's the original's `.fom-pages` default — every
   local page, the events page and the walking tour share it. County-facing
   Explore is the one that stays maroon-banded (see .cck-group-head), which is
   what visually separates local content from county content. */
.title-block {
  height: 130px;
  display: block;
  overflow: visible;
  background-color: var(--cck-orange);
  border-top: 15px solid var(--cck-maroon);
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 50;
}
.title-block h1 {
  font-size: 58px;
  color: var(--cck-maroon);
  line-height: 115px;
  display: inline-block;
  padding-top: 5px;
}
.title-block .nav-back {
  width: 108px;
  height: 100%;
  background-color: var(--cck-orange-dark);
  font-family: var(--cck-head);
  font-size: 58px;
  line-height: 115px;
  display: inline-block;
  float: left;
}
.title-block .nav-back a {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--cck-maroon);
  text-decoration: none;
}
.title-block .nav-back + h1 {
  margin-left: -108px;
}

.content-wrapper {
  padding-top: 3rem;
}
.content-wrapper .container {
  padding-bottom: 250px;
}
.content-wrapper.history-of-marshallton {
  padding-top: 0;
}

.alignleft {
  float: left;
  margin-right: 15px;
  margin-bottom: 25px;
}

.alignright {
  float: right;
  margin-left: 15px;
  margin-bottom: 25px;
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.cck-entry a {
  color: var(--cck-orange);
}

.cck-entry__meta {
  color: var(--cck-muted);
  font-size: 0.8em;
}

.cck-entry__thumb {
  margin-bottom: 1.5rem;
}

.cck-card-grid {
  background: var(--cck-surface);
  padding: 1.5rem 2rem;
}

.single .cck-entry {
  background: var(--cck-surface);
  padding: 1.5rem 2rem;
}

.cck-entry__title {
  margin: 0 0 0.75rem;
}

/* A standalone 640×1080 TV display, not kiosk chrome. The two panels are
   stacked and cross-faded by toggling .active — scoped under .cck-board so
   .events-wrapper here can't collide with the kiosk's event panes, which reuse
   that class at a different size. */
body.cck-board {
  width: 640px;
  height: 1080px;
  margin: 0;
  overflow: hidden;
  background: var(--cck-cvb-cream);
}

.cck-board .events-wrapper {
  position: absolute;
  inset: 0;
  opacity: 0;
  display: none;
  width: 640px;
  height: 1080px;
  padding: 45px;
  background: var(--cck-cvb-cream) url("images/cvb-scrolly-detail.svg") no-repeat 0 bottom;
  transition: opacity 1s linear;
}
.cck-board .events-wrapper.active {
  opacity: 1;
  display: block;
}
.cck-board .events-heading {
  margin: -45px -45px 0;
  padding: 21px 30px 20px 45px;
  height: 110px;
  background-color: var(--cck-maroon);
  overflow: hidden;
  position: relative;
}
.cck-board .events-heading h2 {
  font-family: var(--cck-body);
  font-size: 41px;
  line-height: 42px;
  margin-bottom: 0;
  text-transform: capitalize;
  color: var(--cck-cvb-cream);
  font-weight: 500;
}
.cck-board .events-heading p {
  font-size: 20px;
  margin-bottom: 0;
  font-weight: 300;
}
.cck-board .event-list {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 925px;
  margin-top: 30px;
}
.cck-board .event {
  flex: 1;
  padding: 0 5px 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--cck-cvb-rule);
  color: var(--cck-maroon);
}
.cck-board .event-date {
  font-size: 24px;
  margin-bottom: 0;
  font-weight: 600;
  font-style: italic;
}
.cck-board .event-title {
  font-size: 28px;
  line-height: 35px;
}

.cck-walking-tour-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.cck-walking-tour-page .title-block {
  flex: 0 0 auto;
  position: relative;
}

.walking-tour-iframe {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  border: 0;
  display: block;
  background: var(--cck-surface);
}

/* Inside the map document. The map is deliberately 150% wide and scrolled
   horizontally (see cck-walking-tour.js) — that is how the original showed it. */
body.walking-tour {
  background: var(--cck-surface);
  color: var(--cck-ink);
}

.walking-tour .tour-wrapper .mapsvg-wrap {
  width: 100%;
  height: auto;
  overflow-x: scroll;
}
.walking-tour .tour-wrapper .mapsvg-wrap .mapsvg {
  width: 150% !important;
  height: 475px !important;
}
.walking-tour .tour-legend h2 {
  color: var(--cck-white);
  text-align: center;
  padding: 15px 0;
  font-size: 2rem;
}
.walking-tour .tour-legend .west {
  background-color: var(--cck-tour-west);
}
.walking-tour .tour-legend .east {
  background-color: var(--cck-tour-east);
}
.walking-tour #location-info,
.walking-tour #intro-info {
  text-align: center;
}
.walking-tour #location-info h2.west,
.walking-tour #intro-info h2.west {
  color: var(--cck-tour-west);
}
.walking-tour #location-info h2.east,
.walking-tour #intro-info h2.east {
  color: var(--cck-tour-east);
}
.walking-tour #intro-info {
  padding: 1rem 0 2rem;
}
.walking-tour #intro-info h2 {
  margin-bottom: 0.5rem;
}
.walking-tour p {
  color: var(--cck-black);
}
.walking-tour .map-image {
  max-height: 540px;
  max-width: 640px;
  height: auto;
  width: auto;
  margin: 0 auto;
  display: block;
}
.walking-tour .mapsvg-controller-view-content {
  padding: 0;
  color: var(--cck-black);
  text-align: center;
}

/* The Explore views run the tourism bureau's OWN Brandywine Valley identity —
   white ground, green buttons, the bv logo — the same on every kiosk, so they
   deliberately DON'T inherit the per-kiosk palette (which is why cck-explore-view
   is not in the brown backdrop group; see _content.scss). */
body.cck-explore-view {
  background: var(--cck-white);
  color: var(--cck-bv-blue);
}

.cck-explore-landing {
  padding: 2.5rem 3rem 3rem;
  text-align: center;
}

.cck-explore-hero {
  margin-bottom: 2.5rem;
}

.cck-explore-logo {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: 1rem auto 0;
}

.cck-group-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cck-group-btn {
  font-family: var(--cck-head);
  display: block;
  background: var(--cck-bv-green);
  color: var(--cck-white);
  text-decoration: none;
  font-size: 3.2rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 1.25rem 1.5rem;
  border-radius: 6px;
}
.cck-group-btn:hover, .cck-group-btn:focus, .cck-group-btn:active {
  background: var(--cck-bv-green-active);
  color: var(--cck-white);
  text-decoration: none;
}

.cck-explore-group {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cck-group-head {
  background: var(--cck-white);
  color: var(--cck-bv-blue);
  padding: 1rem 2rem 1.25rem;
  position: relative;
  flex: 0 0 auto;
  border-top: 15px solid var(--cck-bv-blue);
  border-bottom: 2px solid var(--cck-bv-blue);
}

.cck-group-head__back {
  position: absolute;
  left: 0;
  top: 0;
  width: 108px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cck-bv-green);
  color: var(--cck-white);
  text-decoration: none;
}
.cck-group-head__back svg {
  width: 3.4rem;
  height: 3.4rem;
  display: block;
}
.cck-group-head__back:hover, .cck-group-head__back:focus {
  color: var(--cck-white);
  text-decoration: none;
  background: var(--cck-bv-green-active);
}

.cck-group-head__title {
  text-align: center;
  color: var(--cck-bv-blue);
  font-size: 3.2rem;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
}

.cck-viewtoggle {
  text-align: center;
  margin: 0.5rem 0 1rem;
  font-size: 1.4rem;
}
.cck-viewtoggle a {
  color: var(--cck-muted);
  text-decoration: none;
  padding: 0 0.4rem;
}
.cck-viewtoggle a.is-active {
  color: var(--cck-bv-green);
  font-weight: 700;
}
.cck-viewtoggle .sep {
  color: var(--cck-bv-grey);
}

.cck-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.cck-pill {
  border: 1px solid var(--cck-bv-grey);
  background: var(--cck-white);
  color: var(--cck-bv-blue);
  border-radius: 8px;
  padding: 0.55rem 1.1rem;
  font-size: 1.15rem;
  font-weight: 400;
  text-decoration: none;
}
.cck-pill:hover, .cck-pill:focus {
  color: var(--cck-bv-blue);
  text-decoration: none;
}
.cck-pill.is-active, .cck-pill.is-active:hover, .cck-pill.is-active:focus {
  background: var(--cck-bv-green);
  border-color: var(--cck-bv-green);
  color: var(--cck-white);
}

.cck-map-wrap {
  flex: 1 1 auto;
  min-height: 0;
  background: var(--cck-surface);
  /* MapPress writes an inline style="width:...;height:350px" on <mappress-map>,
     and reads a % height as an aspect-ratio — so the only way to fill the space
     is to override the inline style. */
}
.cck-map-wrap mappress-map,
.cck-map-wrap .mapp-layout {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
}

.cck-popup {
  width: 380px;
  max-width: 90vw;
}

.cck-popup__img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  margin: 0 0 0.85rem;
}

.cck-popup__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cck-ink);
  line-height: 1.25;
  margin: 0 0 0.5rem;
}

.cck-popup__addr {
  font-size: 0.95rem;
  color: var(--cck-body-copy);
  margin: 0 0 0.6rem;
  line-height: 1.4;
}
.cck-popup__addr:empty {
  display: none;
}

.cck-popup__body {
  font-size: 0.95rem;
  color: var(--cck-body-copy);
  max-height: 220px;
  overflow-y: auto;
}
.cck-popup__body p {
  margin: 0 0 0.5rem;
}

.cck-popup__qr {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--cck-hairline);
  text-align: center;
}
.cck-popup__qr img {
  display: block;
  margin: 0 auto;
  width: 100px;
  height: 100px;
}

.cck-popup__qr-label {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
  color: var(--cck-ink);
}

.mapp-dir-wrapper {
  display: none;
}

.mapp-leaflet-fullscreen,
.mapp-google-fullscreen,
.mapp-leaflet-geolocate,
.mapp-google-geolocate {
  display: none;
}

.cck-list {
  background: var(--cck-surface);
  padding: 1.5rem 2rem 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem 2.5rem;
}

.cck-poi {
  display: grid;
  grid-template-columns: 1fr 118px;
  gap: 1rem;
}

.cck-poi__title {
  grid-column: 1/-1;
  color: var(--cck-bv-blue);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
  text-transform: uppercase;
}

.cck-poi__img {
  grid-column: 2;
  grid-row: 2;
}
.cck-poi__img img {
  width: 118px;
  height: 118px;
  object-fit: cover;
}

.cck-poi__body {
  grid-column: 1;
  grid-row: 2;
}

.cck-poi__addr {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  color: var(--cck-body-copy);
  white-space: pre-line;
}

.cck-poi__desc {
  margin: 0;
  font-size: 1rem;
  color: var(--cck-body-copy);
}

.cck-empty {
  color: var(--cck-muted);
  text-align: center;
  padding: 2rem;
}

.cck-home .content-wrapper {
  padding-top: 85px;
}
.cck-home .container {
  text-align: center;
}
.cck-home .home-title-block {
  margin-top: -15px;
  margin-bottom: 95px;
}
.cck-home .home-title-block img {
  margin-top: 100px;
}
.cck-home p {
  font-family: var(--cck-head);
  font-size: 50px;
  text-align: center;
  color: var(--cck-white);
}
.cck-home p:empty {
  display: none;
}
.cck-home h1 {
  font-family: Georgia, serif;
  font-size: 100px;
  font-weight: normal;
  letter-spacing: -1px;
  line-height: 1.05;
  text-transform: none;
  margin-top: -0.9rem;
  text-align: center;
  color: var(--cck-white);
}
.cck-home h1 span {
  font-family: var(--cck-body);
  font-size: 34px;
  letter-spacing: 14px;
  text-transform: uppercase;
  display: block;
}
.cck-home .topic-box {
  height: 164px;
  background-color: var(--cck-brown-panel);
  overflow: hidden;
  position: relative;
  text-align: center;
  margin-bottom: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cck-home .topic-box::after {
  display: none;
}
.cck-home .topic-box > div {
  width: 100%;
}
.cck-home .topic-box a {
  text-decoration: none;
  display: block;
  color: inherit;
}
.cck-home .topic-box p,
.cck-home .topic-box br {
  display: none;
}
.cck-home .topic-box h2 {
  font-size: 58px;
  line-height: 1.1;
  margin: 0;
}
.cck-home .topic-box:hover, .cck-home .topic-box:active {
  background-color: var(--cck-panel-hover-bg);
}
.cck-home .topic-box:hover h2, .cck-home .topic-box:active h2 {
  color: var(--cck-panel-hover-ink);
}

.cck-content .topic-box {
  overflow: hidden;
  position: relative;
  text-align: center;
}
.cck-content .topic-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 15px;
  width: calc(100% - 30px);
  height: 100%;
  background-color: var(--cck-topic-scrim);
  opacity: 0.65;
  z-index: 1;
}
.cck-content .topic-box:hover::after {
  opacity: 0.8;
}
.cck-content .topic-box > * {
  z-index: 100;
}
.cck-content .topic-box h3, .cck-content .topic-box p, .cck-content .topic-box button {
  margin: 0 auto;
  z-index: 41;
}
.cck-content .topic-box h3 {
  font-size: 30px;
  font-weight: 600;
  text-transform: none;
  margin-top: 50px;
  margin-bottom: 10px;
  color: var(--cck-orange-alt);
}
.cck-content .topic-box p {
  font-size: 17px;
  font-weight: 300;
  width: 80%;
  color: var(--cck-white);
}
.cck-content .topic-box .topic-box-bg {
  min-height: 250px;
  background-repeat: no-repeat;
  background-size: cover;
}
.cck-content .topic-box .btn-page-nav {
  padding: 0 16px 0;
}
.cck-content .topic-box .btn-default {
  border-radius: 4px;
  margin-bottom: 20px !important;
}
.cck-content .col-12.topic-box.topic-intro {
  margin-top: -100px;
  text-align: left;
  background-color: var(--cck-maroon);
  padding: 20px;
}
.cck-content .col-12.topic-box.topic-intro::after {
  display: none;
}
.cck-content .col-12.topic-box.topic-intro .row > .col-4 {
  z-index: 42;
}
.cck-content .page-landing .container .row {
  margin-bottom: 2rem;
}
.cck-content .page-landing .container .row:last-of-type {
  margin-bottom: 0;
}
.cck-content .subtitle-block {
  text-align: center;
  margin-bottom: 44px;
}
.cck-content .subtitle-block h2 {
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.4px;
  margin: 0 auto;
  text-transform: none;
}
.cck-content .pull-top {
  margin-top: -140px;
}
.cck-content figure {
  margin: 0 0 2rem;
}
.cck-content .caption {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 0.8rem;
  margin-bottom: 0;
  color: var(--cck-orange);
}
.cck-content .box-blockquote {
  color: var(--cck-maroon);
  background-color: var(--cck-orange-alt);
  font-family: var(--cck-body);
  font-size: 36px;
  font-style: italic;
  font-weight: 600;
  line-height: 1.3;
  padding: 1.4rem 2.2rem;
}
.cck-content .box-callout {
  color: var(--cck-orange);
  background-color: var(--cck-maroon);
  font-family: var(--cck-body);
  font-weight: 200;
  text-align: center;
  padding: 2.4rem 2rem;
}
.cck-content .box-callout > div {
  margin-bottom: 3rem;
}
.cck-content .box-callout > div:last-child {
  margin-bottom: 0;
}
.cck-content .box-callout .callout-intro {
  font-size: 24px;
  line-height: 1;
}
.cck-content .box-callout .callout-large {
  font-size: 72px;
  line-height: 1;
  margin-bottom: 0.7rem;
}
.cck-content .box-callout .callout-small {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 0;
}
.cck-content .box-callout p {
  font-size: 36px;
}
.cck-content .page-nav-wrapper {
  overflow: hidden;
  margin-top: 4rem;
}
.cck-content .page-nav-wrapper .page-nav-btns {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.cck-content .page-nav-wrapper .page-nav-btns.right {
  justify-content: flex-end;
}
.cck-content .btn-page-previous {
  padding: 0 16px 0 0;
}
.cck-content .btn-page-next {
  padding: 0 0 0 16px;
}
.cck-content img {
  max-width: 100%;
}
.cck-content .modal-expand {
  position: relative;
  cursor: pointer;
}
.cck-content .modal-expand-trigger {
  position: absolute;
  left: 20px;
  bottom: 20px;
  cursor: pointer;
}
.cck-content p:empty {
  display: none;
}
.cck-content .full-width,
.cck-content .topic-box.topic-intro {
  padding-left: 0;
  padding-right: 0;
}
.cck-content .btn-default {
  color: var(--cck-white);
  display: inline-block;
  font-family: var(--cck-body);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 40px;
  text-transform: uppercase;
  background-color: var(--cck-orange-alt);
  border-radius: 3px;
  height: 40px;
  padding: 0 16px;
}
.cck-content .btn-default:hover {
  color: var(--cck-white);
  background-color: var(--cck-orange-alt-hover);
  text-decoration: none;
}
.cck-content .btn-default span {
  padding: 0 16px;
}
.cck-content .hero-container {
  height: 400px;
  overflow: hidden;
  position: relative;
}
.cck-content .hero-container .col-5 {
  position: absolute;
  right: 0;
}
.cck-content .hero-container .col-5::after {
  content: "";
  position: absolute;
  left: 15px;
  bottom: 0;
  width: calc(100% - 42px);
  height: 50%;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 50%, rgb(255, 255, 255) 95%);
}
.cck-content .hero-container .card {
  background-color: rgba(255, 255, 255, 0.7);
  border: none;
  border-radius: 0;
}
.cck-content .hero-container .card-body {
  font-size: 20px;
}
.cck-content .hero-container .card-body p {
  color: var(--cck-black);
}
.cck-content .hero-container .scrollbar {
  position: relative;
  overflow-y: scroll;
  height: 400px;
}
.cck-content .hero-container .scrollbar::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #F5F5F5;
  border-radius: 0;
}
.cck-content .hero-container .scrollbar::-webkit-scrollbar {
  width: 12px;
  background-color: #F5F5F5;
}
.cck-content .hero-container .scrollbar::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-image: linear-gradient(120deg, #ccc 0%, #fff 100%);
}
.cck-content .img-button {
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
}
.cck-content .img-button > a {
  width: 100%;
  height: 100%;
  max-height: 250px;
  display: block;
}
.cck-content .img-button img {
  height: 100%;
  width: auto;
}
.cck-content .img-button h3 {
  position: absolute;
  top: 20%;
  text-transform: capitalize;
  text-align: center;
  font-size: 30px;
  font-weight: 900;
  width: 100%;
}
.cck-content .img-button p.description {
  position: absolute;
  top: 100px;
  right: 50px;
  text-align: center;
  font-size: 17px;
  font-weight: 300;
  width: 80%;
  color: var(--cck-white);
  line-height: 1.2em;
}
.cck-content .img-button .btn-default {
  position: absolute;
  top: 70%;
  left: 50%;
  margin-left: -71px;
}
.cck-content.history-of-marshallton .topic-box.topic-timeline .topic-box-bg {
  background-image: url("images/history-marshallton/Timeline_bg.jpg");
  background-position: center 22%;
}
.cck-content.history-of-marshallton .topic-box.topic-people .topic-box-bg {
  background-image: url("images/history-marshallton/adrian_martinez_meeting_at_martins_tavern_sz-1030x742.png");
  background-position: center 22%;
}
.cck-content.history-of-marshallton .topic-box.topic-villages-hamlets .topic-box-bg {
  background-image: url("images/history-marshallton/Marshallton-CCHS.jpg");
  background-position: center 22%;
}
.cck-content.history-of-marshallton .cck-entry .row {
  margin-top: 25px;
}
.cck-content.battle-of-brandywine .topic-box.humphry-marshall .topic-box-bg {
  background-image: url("images/battle-brandywine/martinez-quakers.jpg");
  background-position: center 22%;
}
.cck-content.battle-of-brandywine .topic-box.lenni-lenape .topic-box-bg {
  background-image: url("images/battle-brandywine/strodes-mill-2.jpg");
  background-position: center 22%;
}
.cck-content.battle-of-brandywine .topic-box.quaker-compassion .topic-box-bg {
  background-image: url("images/battle-brandywine/bob-2-sm.jpg");
  background-position: center 22%;
}
.cck-content.battle-of-brandywine .topic-box.indian-hannah .topic-box-bg {
  background-image: url("images/battle-brandywine/bob-1-sm.jpg");
  background-position: center 22%;
}
.cck-content.battle-of-brandywine .topic-box.john-beale-bordle .topic-box-bg {
  background-image: url("images/battle-brandywine/am-rev-2.jpg");
  background-position: center 22%;
}
.cck-content.battle-of-brandywine .topic-box.mason-dixon .topic-box-bg {
  background-image: url("images/battle-brandywine/re-enactors-shooting.jpg");
  background-position: center 22%;
}
.cck-content.villages-hamlets .topic-box.marshallton .topic-box-bg {
  background-image: url("images/villages-hamlets/bradford-meeting.jpg");
  background-position: center 22%;
}
.cck-content.villages-hamlets .topic-box.northbrook .topic-box-bg {
  background-image: url("images/villages-hamlets/three-dr-moses-marshalls-home-northbrook-hd.jpg");
  background-position: center 22%;
}
.cck-content.villages-hamlets .topic-box.trimblesville .topic-box-bg {
  background-image: url("images/villages-hamlets/trimbleville.jpg");
  background-position: center 22%;
}
.cck-content.villages-hamlets .topic-box.copesville .topic-box-bg {
  background-image: url("images/villages-hamlets/copesville-edge-cope-mill-1900-cchs.jpg");
  background-position: center 22%;
}
.cck-content.villages-hamlets .topic-box.romansville .topic-box-bg {
  background-image: url("images/villages-hamlets/romansville-placeholder.jpg");
  background-position: center 22%;
}
.cck-content.people .topic-humphry-marshall .topic-box-bg {
  background-image: url("images/people/humphry-marshall.jpg");
  background-position: center 14%;
}
.cck-content.people .topic-lenni-lenape .topic-box-bg {
  background-image: url("images/people/ll-village-kraft.jpg");
  background-position: center 22%;
}
.cck-content.people .topic-quaker-compassion .topic-box-bg {
  background-image: url("images/people/martinez-quakers.png");
  background-position: center 22%;
}
.cck-content.people .topic-indian-hannah .topic-box-bg {
  background-image: url("images/people/amartinez-portrait-indian-hannah.jpg");
  background-position: center 48%;
}
.cck-content.people .topic-john-beale-bordle .topic-box-bg {
  background-image: url("images/people/john-beale-bordley-portrait-by-peale-nga.jpg");
  background-position: center 3%;
}
.cck-content.people .topic-mason-dixon .topic-box-bg {
  background-image: url("images/people/mason-dixon-stone.jpg");
  background-position: center 22%;
}
.cck-content.iron-steel-heritage {
  padding-top: 0;
}
.cck-content.iron-steel-heritage .hero__image {
  flex: 0 0 100%;
}
.cck-content.iron-steel-heritage .hero__image img {
  display: block;
  width: 100%;
  height: auto;
}
.cck-content.iron-steel-heritage .hero__logo {
  display: block;
  width: 100%;
}
.cck-content.iron-steel-heritage .hero__logo img {
  display: block;
  margin: -142px auto 2.5rem;
}
.cck-content.iron-steel-heritage p {
  line-height: 1;
}
.cck-content.iron-steel-heritage .page__links {
  margin-top: 2.5rem;
}
.cck-content.iron-steel-heritage .page__links br {
  display: none;
}
.cck-content.iron-steel-heritage .page__links .img-button > p:not(.description) {
  margin: 0;
}
.cck-content.iron-steel-heritage .page__links .img-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.7);
}
.cck-content.iron-steel-heritage .page__links .img-button a:not(.btn-default) {
  max-height: 300px;
}
.cck-content.iron-steel-heritage .page__links .img-button a.btn {
  background-image: linear-gradient(180deg, #BE4207 0%, #891F03 100%);
  border-radius: 5px;
}
.cck-content.iron-steel-heritage .page__links .img-button img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
}
.cck-content.iron-steel-heritage .page__links .img-button h3 {
  color: var(--cck-on-dark);
  font-size: 45px;
  font-weight: 400;
  max-width: 300px;
  margin: 0 auto;
  top: 20px;
  left: 100px;
}
.cck-content.iron-steel-heritage .page__links .img-button p.description {
  top: 140px;
  color: var(--cck-on-dark);
}

body.cck-page-home,
body.cck-page-iron-steel-heritage,
body.cck-page-people,
body.cck-page-humphry-marshall,
body.cck-page-indian-hannah,
body.cck-page-john-beale-bordley,
body.cck-page-lenni-lenape,
body.cck-page-charles-mason-jeremiah-dixon,
body.cck-page-hannah-freeman,
body.cck-page-quaker-compassion,
body.cck-page-villages-hamlets,
body.cck-page-copesville,
body.cck-page-marshallton,
body.cck-page-northbrook,
body.cck-page-romansville,
body.cck-page-trimblesville {
  background-color: var(--cck-brown);
  color: var(--cck-on-dark);
}
body.cck-page-home .subtitle-block h2,
body.cck-page-iron-steel-heritage .subtitle-block h2,
body.cck-page-people .subtitle-block h2,
body.cck-page-humphry-marshall .subtitle-block h2,
body.cck-page-indian-hannah .subtitle-block h2,
body.cck-page-john-beale-bordley .subtitle-block h2,
body.cck-page-lenni-lenape .subtitle-block h2,
body.cck-page-charles-mason-jeremiah-dixon .subtitle-block h2,
body.cck-page-hannah-freeman .subtitle-block h2,
body.cck-page-quaker-compassion .subtitle-block h2,
body.cck-page-villages-hamlets .subtitle-block h2,
body.cck-page-copesville .subtitle-block h2,
body.cck-page-marshallton .subtitle-block h2,
body.cck-page-northbrook .subtitle-block h2,
body.cck-page-romansville .subtitle-block h2,
body.cck-page-trimblesville .subtitle-block h2 {
  color: var(--cck-orange);
}
body.cck-page-home .subtitle-block hr,
body.cck-page-iron-steel-heritage .subtitle-block hr,
body.cck-page-people .subtitle-block hr,
body.cck-page-humphry-marshall .subtitle-block hr,
body.cck-page-indian-hannah .subtitle-block hr,
body.cck-page-john-beale-bordley .subtitle-block hr,
body.cck-page-lenni-lenape .subtitle-block hr,
body.cck-page-charles-mason-jeremiah-dixon .subtitle-block hr,
body.cck-page-hannah-freeman .subtitle-block hr,
body.cck-page-quaker-compassion .subtitle-block hr,
body.cck-page-villages-hamlets .subtitle-block hr,
body.cck-page-copesville .subtitle-block hr,
body.cck-page-marshallton .subtitle-block hr,
body.cck-page-northbrook .subtitle-block hr,
body.cck-page-romansville .subtitle-block hr,
body.cck-page-trimblesville .subtitle-block hr {
  background-color: var(--cck-orange);
}

body.cck-page-battle-of-brandywine,
body.cck-page-washingtons-retreat,
body.cck-page-unprepared-locals-face-devastation,
body.cck-page-testimony-of-peace,
body.cck-page-taverns-mills-militia,
body.cck-page-march-to-philadelphia,
body.cck-page-ford-to-ford {
  background-color: var(--cck-paper);
  color: var(--cck-ink);
}
body.cck-page-battle-of-brandywine .subtitle-block h2,
body.cck-page-washingtons-retreat .subtitle-block h2,
body.cck-page-unprepared-locals-face-devastation .subtitle-block h2,
body.cck-page-testimony-of-peace .subtitle-block h2,
body.cck-page-taverns-mills-militia .subtitle-block h2,
body.cck-page-march-to-philadelphia .subtitle-block h2,
body.cck-page-ford-to-ford .subtitle-block h2 {
  color: var(--cck-maroon);
}
body.cck-page-battle-of-brandywine hr,
body.cck-page-washingtons-retreat hr,
body.cck-page-unprepared-locals-face-devastation hr,
body.cck-page-testimony-of-peace hr,
body.cck-page-taverns-mills-militia hr,
body.cck-page-march-to-philadelphia hr,
body.cck-page-ford-to-ford hr {
  background-color: var(--cck-maroon);
}

body.cck-page-timeline,
body.cck-page-marshallton-timeline-test {
  background-image: url("images/timeline/timeline-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
}
body.cck-page-timeline .cck-content,
body.cck-page-marshallton-timeline-test .cck-content {
  padding-top: 0;
}
body.cck-page-timeline h3, body.cck-page-timeline p,
body.cck-page-marshallton-timeline-test h3,
body.cck-page-marshallton-timeline-test p {
  color: var(--cck-timeline-ink);
}
body.cck-page-timeline h3,
body.cck-page-marshallton-timeline-test h3 {
  font-family: Georgia, serif;
  font-size: 60px;
  line-height: 1.1;
  text-transform: none;
  margin-bottom: 0.8rem;
}
body.cck-page-timeline .container article,
body.cck-page-marshallton-timeline-test .container article {
  padding-top: 25px;
}
body.cck-page-timeline p + .row,
body.cck-page-marshallton-timeline-test p + .row {
  margin-top: -16px;
}
body.cck-page-timeline .col-6,
body.cck-page-marshallton-timeline-test .col-6 {
  padding-top: 25px;
  padding-bottom: 25px;
}
body.cck-page-timeline .col-6 iframe,
body.cck-page-timeline .col-6 img,
body.cck-page-marshallton-timeline-test .col-6 iframe,
body.cck-page-marshallton-timeline-test .col-6 img {
  z-index: 40;
}
body.cck-page-timeline .col-6.video::after,
body.cck-page-marshallton-timeline-test .col-6.video::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 10px;
  width: 34px;
  background-color: var(--cck-orange);
  display: block;
  z-index: 30;
}
body.cck-page-timeline .col-6.video.right,
body.cck-page-marshallton-timeline-test .col-6.video.right {
  border-left: 10px solid var(--cck-orange);
  margin-left: -10px;
}
body.cck-page-timeline .col-6.video.right::after,
body.cck-page-marshallton-timeline-test .col-6.video.right::after {
  left: 0;
}
body.cck-page-timeline .col-6.video.right iframe,
body.cck-page-timeline .col-6.video.right img,
body.cck-page-marshallton-timeline-test .col-6.video.right iframe,
body.cck-page-marshallton-timeline-test .col-6.video.right img {
  margin-left: 19px;
}
body.cck-page-timeline .col-6.video.left,
body.cck-page-marshallton-timeline-test .col-6.video.left {
  border-right: 10px solid var(--cck-orange);
  margin-right: -10px;
}
body.cck-page-timeline .col-6.video.left::after,
body.cck-page-marshallton-timeline-test .col-6.video.left::after {
  right: 0;
  width: 34px;
}
body.cck-page-timeline .col-6.video.left iframe,
body.cck-page-timeline .col-6.video.left img,
body.cck-page-marshallton-timeline-test .col-6.video.left iframe,
body.cck-page-marshallton-timeline-test .col-6.video.left img {
  margin-right: 19px;
}
body.cck-page-timeline .modal .modal-body,
body.cck-page-marshallton-timeline-test .modal .modal-body {
  padding: 0;
}
body.cck-page-timeline .modal .modal-body .close,
body.cck-page-marshallton-timeline-test .modal .modal-body .close {
  color: var(--cck-white);
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 100;
}
body.cck-page-timeline .modal .modal-body p,
body.cck-page-marshallton-timeline-test .modal .modal-body p {
  display: none;
}
body.cck-page-timeline .modal .modal-body video,
body.cck-page-marshallton-timeline-test .modal .modal-body video {
  margin-top: -35px;
}

.modal .modal-dialog {
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.modal .modal-content {
  border: 0;
}
.modal .modal-body {
  padding: 0;
}
.modal .modal-body iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  border: 0;
}
.modal .modal-body img {
  display: block;
  width: 100%;
  height: auto;
}

body.cck-site-foundry .cck-home .topic-box {
  border: 2px solid var(--cck-panel-ink);
  height: 136px;
  margin-bottom: 32px;
}

/* Ported from the original kiosk view (React event-frame + the cc-events-kiosk /
   marshallton-events templates), so the values here are the originals:
   title-block = orange band w/ 15px maroon top border and 58px maroon headings;
   event title #6C2B3D 20px bold; date #9B9B9B 15px; description clamped to 3.5em
   until "Show more" adds .open; button #F5A623 uppercase. */
.cck-events-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.cck-events-page .title-block {
  flex: 0 0 auto;
  display: flex;
}
.cck-events-page .title-block .col {
  flex: 1 1 50%;
}

.cck-events-split {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.events-iframe {
  flex: 1 1 50%;
  width: 50%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--cck-surface);
}
.events-iframe.local-events {
  border-right: 1px solid var(--cck-hairline);
}

body.cck-embed {
  margin: 0;
  padding: 0;
  background: var(--cck-surface);
}

.cck-embed .events-wrapper {
  display: block;
  width: 100%;
  padding: 45px;
  background: var(--cck-surface) none;
}
.cck-embed .event-thumb {
  flex: 0 0 100px;
}
.cck-embed .event-thumb img {
  display: block;
  width: 100px;
  height: 100px;
  object-fit: cover;
}
.cck-embed .event-body {
  flex: 1 1 auto;
  min-width: 0;
}
.cck-embed .single-event {
  display: flex;
  gap: 20px;
  margin-bottom: 10px;
}
.cck-embed .single-event h1 {
  font-size: 20px;
  font-weight: bold;
  color: var(--cck-maroon);
  text-transform: none;
  margin: 0 0 4px;
  line-height: 1.2;
}
.cck-embed .single-event h2 {
  font-family: var(--cck-body);
  font-size: 15px;
  color: var(--cck-meta);
  text-transform: none;
  font-weight: normal;
  margin: 0 0 10px;
}
.cck-embed .single-event p {
  font-family: var(--cck-body);
  font-size: 15px;
  color: var(--cck-black);
  overflow: hidden;
  height: 3.5em; /* clamped until "Show more" */
  line-height: 1.2em;
  margin: 0 0 10px;
  transition: height 0.5s;
}
.cck-embed .single-event p.open {
  height: auto;
}
.cck-embed .single-event button.btn.btn-default {
  margin-bottom: 40px;
  color: var(--cck-white);
  background-color: var(--cck-orange);
  text-transform: uppercase;
  border: 0;
  border-radius: 3px;
  padding: 8px 14px;
  font-family: var(--cck-body);
  font-size: 14px;
  cursor: pointer;
}
.cck-embed .kce-empty {
  font-family: var(--cck-body);
  color: var(--cck-muted);
}

.cck-hin-page {
  background: var(--cck-surface);
}
.cck-hin-page .cck-hin-page-inner {
  padding: 2.5rem 3rem 3rem;
}
.cck-hin-page h1, .cck-hin-page h2, .cck-hin-page .cck-hin__h {
  font-family: var(--cck-head);
  color: var(--cck-bv-blue);
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.01em;
  font-size: 3.1rem;
  margin: 0 0 1.4rem;
}
.cck-hin-page h2 {
  margin-top: 2.6rem;
}
.cck-hin-page p {
  color: var(--cck-body-copy);
  font-size: 1.25rem;
  line-height: 1.5;
}
.cck-hin-page .wp-block-columns {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
  margin: 0 0 1rem;
}
.cck-hin-page .wp-block-column {
  flex: 1 1 0;
  min-width: 0;
}

.cck-hin-page .wp-block-gallery {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 0.9rem;
}
.cck-hin-page .wp-block-gallery .wp-block-image {
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
  display: block;
}
.cck-hin-page .wp-block-gallery .wp-block-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.cck-hin-page .wp-block-gallery .wp-block-image:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}
.cck-hin-page .wp-block-gallery .wp-block-image:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}
.cck-hin-page .wp-block-gallery .wp-block-image:nth-child(1) img,
.cck-hin-page .wp-block-gallery .wp-block-image:nth-child(2) img {
  height: auto;
  aspect-ratio: 4/3;
}
.cck-hin-page .wp-block-gallery .wp-block-image:nth-child(3) {
  grid-column: 2;
  grid-row: 1/3;
}

.cck-hin-map {
  width: 100%;
}

.cck-hin__toggle {
  text-align: left;
  margin: 0 0 1rem;
  font-family: var(--cck-head);
  text-transform: uppercase;
}
.cck-hin__toggle .cck-hin__tab {
  appearance: none;
  border: 0;
  background: none;
  padding: 0 0.2rem;
  cursor: pointer;
  font: inherit;
  font-size: 2rem;
  letter-spacing: 0.01em;
  color: var(--cck-bv-blue);
}
.cck-hin__toggle .cck-hin__tab.is-active {
  color: var(--cck-bv-green);
  font-weight: 700;
}
.cck-hin__toggle .sep {
  color: var(--cck-bv-grey);
  margin: 0 0.5rem;
  font-size: 1.8rem;
}

.cck-hin__pane {
  width: 100%;
}

.cck-hin__pane[hidden] {
  display: none;
}

.cck-hin__pane--map {
  height: 780px;
  background: var(--cck-surface);
}
.cck-hin__pane--map mappress-map,
.cck-hin__pane--map .mapp-layout {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
}

.cck-hin__pane--list .cck-list {
  grid-template-columns: 1fr;
  padding: 0;
}

.cck-hin__cards {
  gap: 2rem;
}
.cck-hin__cards .cck-poi + .cck-poi {
  border-top: 1px solid var(--cck-hairline);
  padding-top: 2rem;
}

.cck-hin-legend {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
}

.cck-hin-legend__item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1rem;
}

.cck-hin-legend__icon {
  display: inline-flex;
  justify-content: center;
  width: 34px;
}
.cck-hin-legend__icon svg {
  display: block;
  height: 34px;
  width: auto;
}

.cck-hin-legend__label {
  font-family: var(--cck-head);
  color: var(--cck-bv-blue);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
}

.cck-hin-map-view .mapp-iw .mapp-thumbnail {
  display: none;
}
.cck-hin-map-view .mapp-iw.mapp-thumb-left,
.cck-hin-map-view .mapp-iw.mapp-thumb-right {
  flex-direction: column;
}

.cck-popup__kiosk-btn + .cck-popup__qr--dir {
  margin-top: 0.5rem;
}

.mapp-iw a.cck-popup__kiosk-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  background: var(--cck-orange);
  color: var(--cck-white) !important;
  font-family: var(--cck-head);
  text-transform: uppercase;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  padding: 1.15rem 1rem;
  border-radius: 6px;
  margin-top: 0.4rem;
}
.mapp-iw a.cck-popup__kiosk-btn:hover, .mapp-iw a.cck-popup__kiosk-btn:focus, .mapp-iw a.cck-popup__kiosk-btn:active {
  background: var(--cck-orange-alt-hover);
  color: var(--cck-white) !important;
  text-decoration: none !important;
}

.cck-visit-page {
  margin: 0;
}

.cck-visit {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #000;
}

.cck-visit__back {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  padding: 1rem 6rem;
  background: #000;
  color: var(--cck-white);
  text-decoration: none;
}
.cck-visit__back:hover, .cck-visit__back:focus, .cck-visit__back:active {
  color: var(--cck-white);
  text-decoration: none;
}

.cck-visit__chev {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  font-size: 2.6rem;
  line-height: 1;
}

.cck-visit__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.06;
  font-family: var(--cck-head);
  text-transform: uppercase;
}

.cck-visit__pre {
  font-size: 1rem;
  letter-spacing: 0.08em;
  opacity: 0.9;
}

.cck-visit__title {
  font-size: 1.9rem;
  letter-spacing: 0.02em;
}

.cck-visit__frame {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  display: block;
}

.cck-poi__tag,
.cck-popup__soon {
  display: inline-block;
  vertical-align: middle;
  background: var(--cck-orange);
  color: var(--cck-white);
  font-family: var(--cck-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.18em 0.6em;
  border-radius: 4px;
  cursor: default;
}

.cck-poi__tag {
  margin-left: 0.6rem;
}

.mapp-iw .cck-popup__body .cck-popup__soon {
  font-size: 0.8rem;
  margin-bottom: 0.35rem;
}

.cck-kiosk-locations-btn {
  display: inline-block;
  background: var(--cck-bv-green);
  color: var(--cck-white);
  font-family: var(--cck-head);
  text-transform: uppercase;
  font-size: 1.8rem;
  letter-spacing: 0.5px;
  text-decoration: none;
  padding: 1.1rem 2.4rem;
  border-radius: 8px;
}
.cck-kiosk-locations-btn:hover, .cck-kiosk-locations-btn:focus, .cck-kiosk-locations-btn:active {
  background: var(--cck-bv-green-active);
  color: var(--cck-white);
  text-decoration: none;
}

/* Ads use the hard-cropped 270x225 'advertisement' image size; 4 across =
   1080x225. Sized in vw (225/1080 = 20.83333vw tall, 270/1080 = 25vw per ad)
   so the strip stays proportional to the outer .ad-block-wrapper at any zoom.
   Rotator is js/cck-ads.js (no Slick, no jQuery) — it translates .ad-track by
   one slide, then recycles the first slide to the end for an infinite loop. */
body.cck-ads-embed {
  margin: 0;
  padding: 0;
  background: var(--cck-letterbox);
}

.cck-ads-embed .kiosk.ads {
  width: 100%;
  height: 20.83333vw;
  overflow: hidden;
}
.cck-ads-embed .kiosk.ads .ad-block-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.cck-ads-embed .kiosk.ads .ad-track {
  display: flex;
  height: 100%;
  will-change: transform;
}
.cck-ads-embed .kiosk.ads .ad {
  flex: 0 0 25%;
  height: 100%;
}
.cck-ads-embed .kiosk.ads .ad img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px black inset;
}