/*
 * Palette follows the old Vacations To Go pages: green banner, yellow headings.
 * Layout and the day-by-day itineraries are Bootstrap grid rows (they wrap on phones).
 */
:root {
  --trip-green: #009966;
  --trip-green-dark: #007a52;
  --trip-yellow: #ffff33;
  --trip-heading-yellow: #ffff00;
  --trip-heading-green: #009900;
}

body.public {
  font-family: "Times New Roman", Times, serif;
  font-size: 1.15rem;
}

.site-navbar { background: var(--trip-green); padding: .5rem 1rem; }
.site-brand {
  color: var(--trip-yellow);
  font: 1.6rem "Comic Sans MS", "Chalkboard SE", cursive;
}
.site-brand:hover, .site-brand:focus { color: var(--trip-yellow); }
/* Home page: the header stays put. The (also sticky) left menu has to start below it, not under it.
   --site-header-height is measured by the sticky-header controller. */
@media (min-width: 992px) {
  body.sticky-header .sidebar {
    top: var(--site-header-height, 4.5rem);
    max-height: calc(100vh - var(--site-header-height, 4.5rem));
  }
}
.site-admin-link { color: var(--trip-yellow); font: bold 1rem Verdana, Arial, Helvetica, sans-serif; text-decoration: none; margin-left: 1rem; }
.site-admin-link:hover, .site-admin-link:focus { color: #fff; text-decoration: underline; }
@media (min-width: 992px) {
  .site-navbar { padding: .75rem 1rem; }
  .site-brand { font-size: 2.25rem; }
  /* Keep the title centered on the page; the Admin link sits at the right edge. */
  .site-admin-link { position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); margin-left: 0; }
}

.admin-strip { background: #fff3cd; padding: .35rem 1rem; font: .9rem system-ui, sans-serif; }

.sidebar { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: .95rem; }
.sidebar a { color: var(--trip-green); font-weight: bold; text-decoration: none; }
.sidebar a:hover, .sidebar a.active { text-decoration: underline; }
.sidebar .nav-link { display: inline; padding: 0; --bs-nav-link-hover-color: var(--trip-green-dark); }
.sidebar .nav-item { padding: .3rem 0; }
.sidebar-heading {
  background: var(--trip-heading-yellow);
  color: var(--trip-heading-green);
  font-weight: bold;
  padding: 6px;
  margin: 1rem 0 .5rem;
}
.sidebar-heading a { color: var(--trip-heading-green); }

/* Days of the open trip, under its name in the sidebar (large screens). */
.sidebar .day-nav { margin: .25rem 0 .5rem .5rem; border-left: 2px solid var(--bs-border-color); }
.sidebar .day-nav .nav-link {
  display: block; padding: .15rem .5rem; margin-left: -2px; border-left: 2px solid transparent;
  font-size: .85rem; font-weight: 400; color: #555; text-decoration: none;
}
.sidebar .day-nav .nav-link:hover { color: var(--trip-green-dark); text-decoration: none; }
.sidebar .day-nav .nav-link.active {
  background: #e8f6f0; border-left-color: var(--trip-green); color: var(--trip-green-dark); font-weight: 600; text-decoration: none;
}
@media (min-width: 992px) {
  /* Keep the menu (and the day list) on screen while a long trip scrolls. */
  .sidebar { position: sticky; top: 0; align-self: flex-start; max-height: 100vh; overflow-y: auto; }
}

/* Phones: bottom sheet of days, opened from the day bar or from the sticky day header. */
.offcanvas.day-sheet { --bs-offcanvas-height: auto; max-height: 70vh; font-family: Verdana, Arial, Helvetica, sans-serif; }
.day-sheet .nav-link { padding: .5rem .25rem; border-bottom: 1px solid var(--bs-border-color-translucent); color: #333; font-weight: 600; font-size: .95rem; }
.day-sheet .nav-link small { color: #666; font-weight: 400; }
.day-sheet .nav-link.active { background: #e8f6f0; color: var(--trip-green-dark); }
.day-bar .btn { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: .95rem; }
.day-jump-btn { background: none; border: 0; padding: 0 .5rem; font-weight: bold; color: inherit; }
.day-jump-btn::before { content: "▾"; }
@media (max-width: 991.98px) {
  /* The caret is pinned to the right edge so it never pushes the date or title onto another line. */
  .itinerary .day-head { cursor: pointer; padding-right: 2.25rem; }
  .itinerary .day-head .day-jump-btn { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); }
}

.site-footer { border-top: 1px solid #ddd; color: #555; font-size: .95rem; }
.footer-link { color: #999; font-size: .8rem; }

.trip-title { text-align: center; margin-bottom: 1.5rem; }
.banner { max-height: 320px; }
.home-body blockquote, .trip-intro blockquote { margin: 1rem 2rem; }

/* Itineraries: Bootstrap grid rows, so long details wrap instead of forcing a wide table. */
/* No overflow:hidden here: it would stop the sticky day header from sticking to the page. */
.itinerary { border: 1px solid var(--bs-border-color); border-radius: .375rem; }
.itinerary .day-head { background: #e8f6f0; font-size: 1.05rem; font-weight: bold; margin: 0; border-radius: .375rem .375rem 0 0; border-bottom: 1px solid #c9e4d8; }
.itinerary .entry { border-top: 1px solid var(--bs-border-color-translucent); font-size: 1.05rem; }
.itinerary .entry > * { padding-top: .1rem; padding-bottom: .1rem; }
/* Compact fixed-width columns; the details column fills the rest. */
.itinerary .c-time { width: 5.75rem; padding-left: .5rem; padding-right: .5rem; }
.itinerary .c-label { width: 5rem; padding-left: .5rem; padding-right: .5rem; }
.itinerary .c-miles { width: 4rem; padding-left: .5rem; padding-right: .5rem; }
.itinerary .entry-time { font-weight: 600; }
.itinerary .entry-label { color: #444; }
.itinerary .entry-miles { color: #555; font-size: .95rem; }
.itinerary .entry p, .itinerary .entry span p { margin: 0; }
.itinerary .entry-directions em { color: #333; }
@media (max-width: 991.98px) {
  .itinerary .entry-label { font-weight: 600; margin-right: .25rem; }
  .itinerary .entry-directions em { border-left: 3px solid #cfe9dd; padding-left: .75rem; }
}

.back-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1030; /* above the sticky day headers (1020) */
  width: 3rem;
  height: 3rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media print {
  .back-to-top, .day-bar, .day-sheet, .day-nav, .day-jump-btn { display: none !important; }
  .sidebar, .site-navbar, .admin-strip, .site-footer, .alert { display: none; }
  body.public { font-size: 11pt; }

  /* A printed day header is just a header: no sticking, and keep its background (browsers drop
     backgrounds when printing unless asked). */
  .itinerary .day-head.sticky-top { position: static !important; }
  .itinerary .day-head { -webkit-print-color-adjust: exact; print-color-adjust: exact; break-after: avoid; padding-right: .75rem; }
  /* Never split a row across two pages. */
  .itinerary .entry { break-inside: avoid; }

  /* The admin's print view (body.print-days): each day starts on its own page. The first day shares
     page one with the title and introduction. Normal printing of the public page flows on. */
  body.print-days .itinerary + .itinerary { break-before: page; page-break-before: always; }
  body.print-days .itinerary { border: 0; margin-bottom: 0 !important; }
}

/* Admin */
/* Trip Plans list: tint the row under the pointer, so it is easy to tell which row's buttons you
   are about to click. */
.trip-rows > .list-group-item:hover { background-color: #e3f1ea; }
.admin-tile:hover { border-color: var(--trip-green); box-shadow: 0 0 0 1px var(--trip-green); }
.admin-tile h2 { color: var(--trip-green-dark); }
body.admin { background: #f6f7f8; font-size: 1rem; }
.builder-day { border-left: 5px solid var(--trip-green); }
.builder-toggle::before { content: "▾"; display: inline-block; width: 1.25rem; }
.builder-toggle.collapsed::before { content: "▸"; }
.builder-entry { border-bottom: 1px solid #e3e3e3; padding: .4rem .25rem; }
.builder-entry:hover { background: #fafcfb; }
.builder-entry.kind-directions { background: #f7f7f2; }
.builder-entry-form.autosave-failed { box-shadow: -4px 0 0 var(--bs-danger); }
.builder-entry-tools { flex: 0 0 auto; }
.builder-entry.kind-group { background: #eef6ff; }
.inline-editor {
  min-height: 2.4rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .375rem;
  padding: .375rem .75rem;
  background: #fff;
  overflow-wrap: anywhere;
}
.inline-editor:focus { outline: 0; border-color: #86b7a1; box-shadow: 0 0 0 .25rem rgba(0, 153, 102, .2); }
.inline-editor-tools { display: none; }
.inline-editor-wrap:focus-within .inline-editor-tools { display: flex; }
.save-bar { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid #ddd; }
trix-editor { background: #fff; min-height: 10rem; }

/* Keep the rich text toolbar to what she needs, and let it wrap on narrow screens. */
trix-toolbar .trix-button-row { flex-wrap: wrap; }
trix-toolbar .trix-button--icon-strike,
trix-toolbar .trix-button--icon-code,
trix-toolbar .trix-button--icon-decrease-nesting-level,
trix-toolbar .trix-button--icon-increase-nesting-level { display: none; }