/* Site chrome: the header pill, the menu overlay behind it, and the footer.
   Geometry for the pill is the design system's Site Header (220 x 56, 24
   padding, a 124 x 40 logo and a 24 menu glyph). The homepage hero draws the
   same pill itself, so the header reads as the same object on every template. */

.dea-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------- header ---------------- */
/* No band of its own: the pill floats on whatever the page starts with, the
   way it floats on the photograph in the hero, one gutter from the top. */
.dea-hdr {
  background: transparent;
  padding: var(--dea-page-top) var(--dea-gutter) 0;
}

.dea-hdr__pill {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 220px; height: 56px;
  margin-inline: auto;
  padding: 0 24px;
  border-radius: var(--dea-radius-full);
  background: var(--dea-bg-card);
}

.dea-hdr__brand { display: block; line-height: 0; }
/* Over-specified for the same reason as the hero: Elementor ships
   ".elementor img { height: auto }" at (0,1,1). */
.dea-mod .dea-hdr__logo { display: block; width: 124px; height: 40px; object-fit: contain; }

/* A 40 hit area around the 24 glyph, pulled back so the glyph sits 24 from
   the edge as designed. */
.dea-hdr__menu {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-right: -8px;
  padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--dea-action-dark); cursor: pointer;
}
.dea-hdr__menu:hover { background-color: rgba(17, 17, 17, .07); }
.dea-hdr__menu:focus-visible { outline: 3px solid var(--dea-border-focus); outline-offset: 2px; }

/* ---------------- the burger ---------------- */
/* Not scoped to .dea-mod: the homepage hero's button lives outside it, and
   both buttons have to fold the same way. Drawn to the design's 24 glyph:
   three 18 x 2 bars, 6 apart. The ease is spelled out as a fallback for
   the same reason. */
.dea-burger { display: block; position: relative; width: 24px; height: 24px; }
.dea-burger i {
  position: absolute; left: 3px; right: 3px;
  height: 2px; border-radius: 1px;
  background: currentColor;
  transition: transform .34s var(--dea-ease, cubic-bezier(.16, 1, .3, 1)), opacity .18s ease;
}
.dea-burger i:nth-child(1) { top: 5px; }
.dea-burger i:nth-child(2) { top: 11px; }
.dea-burger i:nth-child(3) { top: 17px; }

/* 6px moves the outer bars onto the middle one; .9 pulls the 18px stroke in
   so the cross sits inside the box like the design's X glyph. */
[aria-expanded="true"] .dea-burger i:nth-child(1),
.dea-menu.is-open .dea-menu__close .dea-burger i:nth-child(1) { transform: translateY(6px) rotate(45deg) scaleX(.9); }
[aria-expanded="true"] .dea-burger i:nth-child(2),
.dea-menu.is-open .dea-menu__close .dea-burger i:nth-child(2) { opacity: 0; transform: scaleX(.2); }
[aria-expanded="true"] .dea-burger i:nth-child(3),
.dea-menu.is-open .dea-menu__close .dea-burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg) scaleX(.9); }

/* ---------------- menu overlay ---------------- */
html.dea-menu-open { overflow: hidden; }

.dea-menu { position: fixed; inset: 0; z-index: 9999; }
.dea-menu[hidden] { display: none; }

.dea-menu__scrim {
  position: absolute; inset: 0;
  background: rgba(20, 10, 6, .5);
  opacity: 0;
  transition: opacity .3s ease;
}
.dea-menu.is-open .dea-menu__scrim { opacity: 1; }

/* Placed over the pill that was clicked, in viewport coordinates, by
   site-nav.js. The values here are only what it looks like before that runs. */
.dea-menu__group { position: absolute; top: var(--dea-gutter); left: 50%; width: 220px; margin-left: -110px; }

.dea-menu__pill {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; height: 56px;
  padding: 0 24px;
  border-radius: var(--dea-radius-full);
  background: var(--dea-bg-card);
}
.dea-menu__brand { display: block; line-height: 0; }
.dea-mod .dea-menu__logo { display: block; width: 124px; height: 40px; object-fit: contain; }

.dea-menu__close {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-right: -8px;
  padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--dea-action-dark); cursor: pointer;
}
.dea-menu__close:hover, .dea-menu__close:focus { background-color: rgba(17, 17, 17, .07); color: var(--dea-action-dark); }
.dea-menu__close:focus-visible { outline: 3px solid var(--dea-border-focus); outline-offset: 2px; }

/* Wider than the pill, and centred on it. The panel itself is restyled with
   the menu page. */
.dea-menu__panelwrap {
  position: relative; left: 50%;
  width: min(660px, calc(100vw - 36px));
  margin-top: 12px;
  transform: translateX(-50%);
}

.dea-menu__panel {
  position: relative; z-index: 1;
  display: grid; gap: 22px;
  grid-template-columns: minmax(0, 1fr);
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  /* An unroll rather than a scaleY, which would squash the type on the way. */
  clip-path: inset(0 0 100% 0 round 24px);
  transition: clip-path .44s var(--dea-ease);
}
@media (min-width: 620px) {
  /* The card is sized to hold the contact address on one line. */
  .dea-menu__panel { grid-template-columns: minmax(0, 1fr) 268px; gap: 26px; padding: 26px 28px 28px; }
}
.dea-menu.is-open .dea-menu__panel { clip-path: inset(0 0 0 0 round 24px); }

.dea-menu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; align-content: start; }
.dea-menu__list-link {
  display: block; padding: 7px 6px;
  font-family: var(--dea-font-head);
  font-size: clamp(22px, 2.4vw, 26px);
  font-weight: 700; line-height: 1.2; letter-spacing: -.024em;
  color: var(--dea-ink); text-decoration: none;
  opacity: 0; transform: translateY(10px);
  /* The per-item delay is set in JS so the list stays data-driven. */
  transition: opacity .34s ease, transform .34s var(--dea-ease), color .2s ease;
}
.dea-menu.is-open .dea-menu__list-link { opacity: 1; transform: none; }
.dea-menu__list-link:hover, .dea-menu__list-link:focus { color: var(--dea-orange); }
.dea-menu__list-link[aria-current] { color: var(--dea-orange); }
.dea-menu__list-link:focus-visible { outline: 3px solid var(--dea-orange); outline-offset: 2px; border-radius: 8px; }

.dea-menu__card {
  display: grid; align-content: start; gap: 13px;
  padding: 20px 22px 22px;
  border-radius: 18px;
  background: var(--dea-orange); color: #fff;
  opacity: 0; transform: scale(.97);
  transition: opacity .3s ease .26s, transform .3s var(--dea-ease) .26s;
}
.dea-menu.is-open .dea-menu__card { opacity: 1; transform: none; }
.dea-menu__eyebrow { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }

/* Dinosaur Week card: the module's own colours, at the size this card allows. */
.dea-menu__card--dw {
  gap: 16px; padding: 24px 22px 26px;
  background: var(--dea-peach); color: var(--dea-ink);
  justify-items: center; text-align: center;
}
.dea-menu__card--dw .dea-menu__cta { justify-self: center; }
.dea-menu__card--dw .dea-menu__eyebrow { font-size: 15px; letter-spacing: .17em; color: var(--dea-orange); }
.dea-mod .dea-menu__wordmark { display: block; width: 100%; max-width: 224px; height: auto; }
.dea-menu__cta {
  justify-self: start;
  display: inline-block; margin-top: 2px;
  padding: 0 26px; height: 46px; line-height: 46px;
  border-radius: 999px;
  background: var(--dea-plum); color: #fff;
  font-size: 16px; font-weight: 500; text-decoration: none;
  transition: transform .25s var(--dea-ease), background .25s ease;
}
.dea-menu__cta:hover { background: var(--dea-navy); color: #fff; transform: translateY(-2px); }
.dea-menu__cta:focus-visible { outline: 3px solid var(--dea-orange); outline-offset: 3px; }
.dea-menu__email {
  justify-self: start;
  color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.45; letter-spacing: -.005em; text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .45);
  overflow-wrap: anywhere;
}
.dea-menu__email:hover { color: #fff; border-bottom-color: #fff; }
.dea-menu__social .dea-social__link { background: rgba(255, 255, 255, .18); color: #fff; }
.dea-menu__social .dea-social__link:hover { background: #fff; color: var(--dea-orange); }

/* Behind the panel so the unroll cannot clip it, and late enough that the
   panel lands first and then glows. */
.dea-menu__halo { position: absolute; inset: 0; border-radius: 24px; opacity: 0; }
.dea-menu.is-open .dea-menu__halo { animation: dea-menu-bloom .95s var(--dea-ease) .3s forwards; }
@keyframes dea-menu-bloom {
  0%   { opacity: 0; box-shadow: 0 0 0 0 rgba(201, 82, 15, 0), 0 0 0 0 rgba(201, 82, 15, 0); }
  45%  { opacity: 1; box-shadow: 0 0 0 6px rgba(201, 82, 15, .26), 0 0 70px 12px rgba(201, 82, 15, .34); }
  100% { opacity: 1; box-shadow: 0 0 0 3px rgba(201, 82, 15, .32), 0 0 34px 0 rgba(201, 82, 15, .16); }
}

/* ---------------- shared: social buttons ---------------- */
/* The design system's Icon Button, white, 48 with a 24 glyph. */
.dea-social { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; }
.dea-social__link {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--dea-bg-card); color: var(--dea-action-dark);
  transition: background .2s ease, color .2s ease, transform .2s var(--dea-ease);
}
.dea-social__link svg { display: block; width: 24px; height: 24px; }
.dea-social__link:hover { background: var(--dea-action-dark); color: var(--dea-action-on-action); transform: translateY(-2px); }
.dea-social__link:focus-visible { outline: 3px solid var(--dea-border-focus); outline-offset: 3px; }

/* ---------------- footer ---------------- */
/* A contained card on the page rather than a band across it. From the design
   system's Site Footer: sand, the md radius, 64 / 80 padding, the brand column
   (logo, socials, copyright) on the left and the links on the right; stacked
   logo, links, socials, copyright on a phone. The band above it is the
   section gap, the band below is the page's bottom padding. */
.dea-ftr {
  background: var(--dea-bg-page);
  padding: var(--dea-section-gap) var(--dea-gutter) var(--dea-page-bottom);
}

.dea-ftr__card {
  max-width: var(--dea-max);
  margin-inline: auto;
  padding: 64px 80px;
  border-radius: var(--dea-radius-md);
  background: var(--dea-bg-sand);
}

.dea-ftr__inner { display: grid; gap: 24px; }
@media (min-width: 768px) {
  .dea-ftr__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: start; }
}

.dea-ftr__brand { display: grid; gap: 24px; justify-items: start; }
.dea-ftr__brandlink { display: block; line-height: 0; }
.dea-mod .dea-ftr__logo { display: block; width: 198px; height: auto; object-fit: contain; }

.dea-ftr__social { margin: 0; }
.dea-ftr__copy { margin: 0; font: var(--dea-type-body-xs); color: var(--dea-text-meta); }

.dea-ftr__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.dea-ftr__list-link {
  font: var(--dea-type-cta-md);
  color: var(--dea-text-strong); text-decoration: none;
}
.dea-ftr__list-link:hover { color: var(--dea-text-link); }
.dea-ftr__list-link[aria-current] { color: var(--dea-text-link); }
.dea-ftr__list-link:focus-visible { outline: 3px solid var(--dea-border-focus); outline-offset: 3px; }

.dea-ftr__ack {
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid rgba(35, 31, 32, .14);
  max-width: 62ch;
  font: var(--dea-type-body-sm); color: var(--dea-text-meta);
}
.dea-ftr__ack p { margin: 0; }

@media (max-width: 1023px) {
  .dea-ftr__card { padding: 48px; }
}

@media (max-width: 767px) {
  .dea-ftr__card { padding: 32px 24px; }
  /* The brand wrapper steps out of the way so its children join the footer
     grid and take the design's order. */
  .dea-ftr__brand { display: contents; }
  .dea-ftr__brandlink { order: 1; }
  .dea-ftr__nav { order: 2; }
  .dea-ftr__social { order: 3; }
  .dea-ftr__copy { order: 4; }
  .dea-mod .dea-ftr__logo { width: 160px; }
  .dea-ftr__list { gap: 12px; }
  .dea-menu__panelwrap { width: calc(100vw - 28px); }
}

/* Inner pages close with the page gap above the footer, not the homepage's
   section gap. */
.single-dea_experience .dea-ftr, .single-dea_itinerary .dea-ftr, .single-dea_trail_location .dea-ftr, .dea-trail-page .dea-ftr { padding-top: var(--dea-page-gap); }