/* ==========================================================================
   Travelogue — shell

   Navigation and footer for page-tg.php, which renders the whole document and
   never calls Avada's header or footer.

   Avada's compiled stylesheet is dequeued on that template, so this file also
   carries the small reset the theme used to provide. Nothing here is scoped
   under .tg because on these pages there is no other CSS to collide with.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.tg-body {
  margin: 0;
  background: var(--tg-surface);
  color: var(--tg-ink);
  font-family: var(--tg-body);
  font-size: var(--tg-body-size);
  line-height: var(--tg-lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }

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

.tg-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 12px 20px; background: var(--tg-ink); color: #fff;
}

.tg-skip:focus { left: 12px; top: 12px; }


/* --------------------------------------------------------------------------
   Navigation

   Structurally the reference header: wordmark left, a line of context that
   only appears from lg up, pill links right, hamburger below md opening a
   rounded sheet.
   -------------------------------------------------------------------------- */

.tg-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tg-4);
  padding: 16px var(--tg-5);
  background: var(--tg-surface);
}

@media (min-width: 768px) {
  .tg-nav { padding: 16px 44px; }
}

/* Away on the way down, back on the way up. tg.js sets the attribute; the
   movement is here so a browser with the script blocked simply gets a header
   that is always visible rather than one stuck off screen. */
.tg-nav {
  transition: transform .26s ease, box-shadow .26s ease;
  will-change: transform;
}

.tg-nav[data-away="1"] { transform: translateY(-100%); }

.tg-nav[data-stuck="1"] {
  box-shadow: 0 1px 0 var(--tg-line), 0 10px 28px rgb(17 17 17 / .05);
}

/* Reduced motion keeps the header, and keeps it still: sliding a bar in and
   out of view twice a screen is exactly the movement the setting is asking
   us not to make. tg.js also stops setting the attribute, and this is the
   half that holds if the script is not running. */
@media (prefers-reduced-motion: reduce) {
  .tg-nav { transition: none; }
  .tg-nav[data-away="1"] { transform: none; }
}

.tg-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--tg-2);
  text-decoration: none;
  color: var(--tg-ink);
}

.tg-nav__brand img { width: 40px; height: 40px; }

.tg-nav__wordmark {
  font-family: var(--tg-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

/* Context line.

   The reference absolutely centres this. That works there because its nav
   carries four short links; ours carries five plus a booking button, and an
   absolutely centred line lands on top of them. Kept in the flex flow with an
   auto margin instead: same centred impression, and the layout can never
   collide with itself. */
.tg-nav__context {
  display: none;
  margin: 0;
  font-size: 14px;
  color: var(--tg-ink-2);
  white-space: nowrap;
}

.tg-nav__context span { font-weight: 600; color: var(--tg-ink); }

@media (min-width: 1200px) {
  .tg-nav__context { display: block; margin-inline: auto; }
}

/* Avada adds a search item with no label to the main menu. It renders as an
   empty pill here, so it is hidden rather than left as a mystery gap. */
.tg-nav__links .fusion-custom-menu-item,
.tg-nav__sheet .fusion-custom-menu-item { display: none; }

.tg-nav__links { display: none; }

@media (min-width: 900px) {
  .tg-nav__links {
    display: flex;
    align-items: center;
    gap: var(--tg-2);
    margin-left: auto;
  }
}

@media (min-width: 1200px) {
  .tg-nav__links { margin-left: 0; gap: var(--tg-3); }
}

/* wp_nav_menu with items_wrap '%3$s' emits bare <li> elements and no <ul>,
   so the list styling has to be set on the items themselves. */
.tg-nav__links ul { display: contents; list-style: none; margin: 0; padding: 0; }

.tg-nav__links li,
.tg-nav__sheet li { list-style: none; margin: 0; padding: 0; }

.tg-nav__links a {
  display: inline-block;
  padding: 10px 14px;
  border-radius: var(--tg-r-pill);
  background: var(--tg-surface-2);
  font-size: 13px;
  color: var(--tg-ink);
  text-decoration: none;
  transition: background-color var(--tg-dur-fast) var(--tg-ease),
              color var(--tg-dur-fast) var(--tg-ease);
}

.tg-nav__links a:hover { background: var(--tg-ink); color: #fff; }

/* Avada's menu markup nests a span; flatten it. */
.tg-nav__links .menu-text { display: inline; }

.tg-nav__cta { display: none; min-height: 44px; }

@media (min-width: 900px) {
  .tg-nav__cta { display: inline-flex; margin-left: var(--tg-2); }
}

.tg-nav__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  border-radius: var(--tg-r-pill);
  background: var(--tg-surface-2);
  margin-left: auto;
  cursor: pointer;
}

@media (min-width: 900px) { .tg-nav__toggle { display: none; } }

.tg-nav__toggle-bar {
  height: 2px;
  background: var(--tg-ink);
  border-radius: 2px;
  transition: transform var(--tg-dur) var(--tg-ease),
              opacity var(--tg-dur) var(--tg-ease);
}

.tg-nav__toggle[aria-expanded="true"] .tg-nav__toggle-bar:first-child {
  transform: translateY(3.5px) rotate(45deg);
}

.tg-nav__toggle[aria-expanded="true"] .tg-nav__toggle-bar:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

.tg-nav__sheet {
  position: absolute;
  top: 100%;
  left: var(--tg-4);
  right: var(--tg-4);
  display: flex;
  flex-direction: column;
  gap: var(--tg-2);
  padding: var(--tg-5);
  background: var(--tg-surface);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-r-md);
  box-shadow: var(--tg-card-shadow);
}

.tg-nav__sheet[hidden] { display: none; }

.tg-nav__sheet ul { list-style: none; margin: 0; padding: 0; }

.tg-nav__sheet a {
  display: block;
  padding: 12px 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--tg-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--tg-line);
}

.tg-nav__sheet li:last-child a { border-bottom: 0; }

.tg-nav__sheet .tg-btn { margin-top: var(--tg-3); justify-content: center; }


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

   After the Estaymart reference: a statement and one call to action on the
   left, columns of links on the right, a rule, then a bottom bar. Its animated
   strip along the very bottom is deliberately not reproduced.
   -------------------------------------------------------------------------- */

.tg-foot {
  padding: var(--tg-8) var(--tg-5) calc(var(--tg-6) + env(safe-area-inset-bottom, 0px));
  background: var(--tg-board);
  color: var(--tg-chalk-dim);
}

@media (min-width: 768px) { .tg-foot { padding-inline: 44px; } }

.tg-foot__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--tg-7) var(--tg-5);
  max-width: var(--tg-w-content);
  margin-inline: auto;
}

@media (min-width: 640px) {
  .tg-foot__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tg-foot__brand { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .tg-foot__inner {
    grid-template-columns: minmax(0, 4fr) repeat(4, minmax(0, 2fr));
    gap: var(--tg-8) var(--tg-5);
  }

  .tg-foot__brand { grid-column: auto; padding-right: var(--tg-6); }
}

.tg-foot__eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: var(--tg-track-wide);
  text-transform: uppercase;
  color: var(--tg-chalk-dim);
}

.tg-foot__statement {
  margin: var(--tg-4) 0 0;
  font-family: var(--tg-display);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--tg-chalk);
}

/* Red pill on the dark ground. The reference had it white and turning red on
   hover, which meant the one button in the footer that is asking for the
   booking looked like every other link until you touched it, and on a phone
   nothing hovers. */
.tg-foot__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--tg-4);
  margin-top: var(--tg-6);
  padding: 14px var(--tg-4) 14px var(--tg-6);
  border-radius: var(--tg-r-pill);
  /* --tg-red-ink, not --tg-red: white on the brand red is 3.99:1 and this
     label is 15px, which needs 4.5. The ink red gives 4.90. PRD 32. */
  background: var(--tg-red-ink);
  color: #fff;
  font-family: var(--tg-display);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--tg-dur-fast) var(--tg-ease);
}

.tg-foot__cta svg {
  width: 20px;
  height: 20px;
  flex: none;
  transition: transform var(--tg-dur) var(--tg-ease);
}

@media (hover: hover) {
  .tg-foot__cta:hover { background: var(--tg-red-deep); }
  .tg-foot__cta:hover svg { transform: translateX(3px); }
}

.tg-foot__head {
  margin: 0 0 var(--tg-4);
  font-family: var(--tg-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--tg-track-wide);
  text-transform: uppercase;
  color: var(--tg-chalk-dim);
}

.tg-foot__col ul { list-style: none; margin: 0; padding: 0; }

.tg-foot__col li + li { margin-top: 2px; }

/* inline-flex with a 24px minimum, not a bare inline link. These were 19px
   tall, which is under the 24px a touch target is meant to be, and the
   footer is where somebody on a phone goes when the page has not answered
   them. The row spacing above drops to compensate, so the column is the same
   height it was. PRD 31, touch-friendly. */
.tg-foot__col a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 4px;
  font-size: 15px;
  color: var(--tg-chalk);
  text-decoration: none;
}

@media (hover: hover) {
  .tg-foot__col a:hover { color: #fff; text-decoration: underline; text-underline-offset: .18em; }
}

.tg-foot__head--gap { margin-top: var(--tg-5); }

.tg-foot__social { list-style: none; margin: 0; padding: 0; }
.tg-foot__social li + li { margin-top: 10px; }

.tg-foot__social a {
  font-size: 15px;
  color: var(--tg-chalk);
  text-decoration: none;
}

@media (hover: hover) {
  .tg-foot__social a:hover { color: #fff; text-decoration: underline; text-underline-offset: .18em; }
}

.tg-foot__address {
  margin-top: var(--tg-4);
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  color: var(--tg-chalk-dim);
}

.tg-foot__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--tg-3);
  max-width: var(--tg-w-content);
  margin: var(--tg-8) auto 0;
  padding-top: var(--tg-5);
  border-top: 1px solid rgba(255, 255, 255, .13);
}

.tg-foot__legal { display: flex; flex-direction: column; gap: 4px; }

.tg-foot__copy,
.tg-foot__company,
.tg-foot__credit { margin: 0; font-size: 13px; }

/* The registered name and number. Quieter than the copyright: it is there
   because it has to be, not because anybody reads it. */
.tg-foot__company {
  font-size: 12px;
  /* 4.08:1 on the dark footer. #848484 is the darkest grey
     that clears AA there. PRD 32. */
  color: #848484;
}

/* A7 wants this present, dofollow and visible on mobile, and a 16px tall
   link is none of those things to a thumb. 24px minimum, same as every other
   footer link. PRD 31, touch-friendly. */
.tg-foot__credit a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--tg-chalk);
  text-decoration: underline;
  text-underline-offset: .18em;
}