/*
 * Les Hauts de Bélézy: additions to the Danland theme (loaded after style.css).
 *
 * From 980px wide, Danland's fixed 950px layout is unchanged.
 * From 641px to 979px the same layout becomes fluid.
 * Up to 640px (phones) the sidebar moves under the content and the menu
 * opens from a button.
 */

.clear-both {
  clear: both;
}

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

a:focus-visible,
button:focus-visible {
  outline: 2px solid #cc6600;
  outline-offset: 2px;
}

/* Menu button: phones only. */
.menu-toggle {
  display: none;
}

/* Home page slideshow: every photo fills the 950×355 frame (the old site
   stretched the two that are a few pixels shorter). */
.slideshow img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slideshow.is-cycling img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slideshow.is-cycling img.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .slideshow.is-cycling img {
    transition: none;
  }
}

/* ------------------------------------------------------------------
 * Bastidon page
 * ------------------------------------------------------------------ */

/* The yellow banner of the old bastidon template. */
.contact-banner {
  background-color: yellow;
}

.owner-tools {
  padding: 0.4em 0.6em;
  background: #fff4f4;
  border: 1px solid #e0c0c0;
}

.field-name-field-calendrier .cal {
  margin: 0 -6px;
}

/* Dates chosen on the calendar (the old widget showed them as "Réservé provisoirement"). */
.cal td.cal-chosen > div,
.cal td.cal-chosen > span > span {
  background-color: #999999;
  color: #fff;
  border-color: #555;
}

.booking-formlet .form-item {
  display: inline-block;
  margin: 0.5em 1.5em 0.5em 0;
}

.booking-formlet .form-submit {
  margin: 0.3em 0.5em 0.3em 0;
}

.bastidon-map {
  width: 600px;
  max-width: 100%;
  height: 400px;
  margin-top: 1em;
}

.map-link {
  font-size: 0.9em;
}

.field-name-field-tarifs table,
.owners-directory {
  width: auto;
  max-width: 100%;
}

/* Photo thumbnails (bastidon page, listing, sidebar): every photo fills the same
   4:3 frame, given by its width and height attributes, cropped around its
   centre. The viewer shows the photo whole. */
img.photo-frame {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  height: auto;
}

/* Home page: the bastidons under the text. */
.home-locations {
  clear: both;
  margin-top: 2em;
}

/* Listing page: photos one under the other in each cell. */
.views-view-grid td {
  vertical-align: top;
  padding: 0.5em;
}

/* Stay dates above the grid (home page and listing page). */
.stay-search {
  margin: 0.8em 0 0.4em;
}

.stay-search .form-item {
  display: inline-block;
  margin: 0.3em 1.5em 0.3em 0;
}

.stay-search .form-submit {
  margin: 0.3em 0.8em 0.3em 0;
}

.stay-summary {
  margin: 0.4em 0;
}

.stay-summary .availability {
  margin-right: 1em;
}

/* Availability for the chosen dates: a coloured dot and a word. */
.availability {
  display: inline-block;
  font-size: 0.85em;
  font-weight: normal;
  white-space: nowrap;
}

.views-field-title .availability {
  margin-left: 0.5em;
}

.availability-dot {
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-right: 0.3em;
  border-radius: 50%;
  border: 2px solid transparent;
  vertical-align: -0.05em;
}

.availability-available .availability-dot {
  background: #2e9e3e;
}

.availability-available {
  color: #237a30;
}

.availability-provisional .availability-dot {
  background: #e69500;
}

.availability-provisional {
  color: #a86d00;
}

.availability-full .availability-dot {
  background: #888;
}

.availability-full,
.availability-unknown {
  color: #666;
}

.availability-unknown .availability-dot {
  border-color: #888;
}

/* Room between the "Les locations" title and the grid (home page and listing page). */
.view-les-locations .views-view-grid {
  margin-top: 1.2em;
}

/* The bastidon's name above its photos. */
.views-view-grid .views-field-title {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 0.3em;
}

.views-view-grid .views-field-field-photo img {
  display: block;
  margin: 3px 0;
}

/* Park access included: the Bélézy badge in the lower right corner of the
   (first) photo, a fifth of its width. */
a.park-included {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 3px 0;
}

a.park-included img.photo-frame,
.views-view-grid .views-field-field-photo a.park-included img.photo-frame {
  display: block;
  margin: 0;
}

img.park-badge,
.views-view-grid .views-field-field-photo img.park-badge {
  position: absolute;
  right: 3%;
  bottom: 3%;
  width: 20%;
  height: auto;
  margin: 0;
  border: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* Photo viewer. */
dialog.lightbox {
  max-width: 96vw;
  max-height: 96vh;
  padding: 0;
  border: 0;
  background: #111;
  color: #fff;
}

dialog.lightbox::backdrop {
  background: rgba(0, 0, 0, 0.85);
}

dialog.lightbox figure {
  margin: 0;
}

dialog.lightbox img {
  display: block;
  max-width: 96vw;
  max-height: calc(96vh - 2.5em);
  width: auto;
  height: auto;
}

dialog.lightbox figcaption {
  padding: 0.5em 1em;
  font-size: 0.9em;
}

dialog.lightbox button {
  position: absolute;
  border: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 32px;
  line-height: 1;
  width: 48px;
  height: 48px;
  cursor: pointer;
}

dialog.lightbox .lightbox-prev { left: 0; top: 40%; }
dialog.lightbox .lightbox-next { right: 0; top: 40%; }
dialog.lightbox .lightbox-close { right: 0; top: 0; }

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

/* Spam trap: invisible to people, filled by robots. */
.form-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-error {
  color: #b00;
}

.inline-form {
  display: inline;
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: #005a8c;
  font: inherit;
  cursor: pointer;
}

.link-button:hover {
  color: #cc6600;
}

.button-link {
  display: inline-block;
  padding: 0.3em 0.9em;
  background: #f4f4f4;
  border: 1px solid #bbb;
}

.impersonation {
  font-style: italic;
}

.copy-emails {
  margin: 1em 0;
}

.copy-button {
  display: none;
}

.js .copy-button {
  display: inline-block;
}

.copy-result {
  margin-left: 0.5em;
}

.copy-emails textarea {
  width: 100%;
  box-sizing: border-box;
}

.account h2 {
  margin: 1.2em 0 0.4em;
}

.account table,
.request-details {
  width: auto;
  max-width: 100%;
}

.public-switch {
  display: inline;
  font-weight: normal;
  margin-left: 0.5em;
}

.edit-form .form-item > label:first-child {
  margin-bottom: 0.2em;
}

.edit-form trix-editor {
  min-height: 12em;
  background: #fff;
}

/* No files inside rich text: photos have their own page. */
.trix-button-group--file-tools {
  display: none;
}

.price-grid-wrapper {
  overflow-x: auto;
}

.price-grid {
  width: auto;
}

.price-grid td {
  padding: 2px;
  border: 0;
}

.price-grid input {
  width: 9em;
}

.price-grid tr:first-child input {
  font-weight: bold;
}

.price-row-tools button {
  border: 1px solid #bbb;
  background: #f4f4f4;
  cursor: pointer;
}

.map-editor .bastidon-map {
  margin: 0.5em 0;
}

.publish-form p {
  padding: 0.5em 0.8em;
  background: #f4f4f4;
  border: 1px solid #ddd;
}

.photo-manager {
  list-style: none;
  padding: 0;
  margin: 1em 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.photo-manager li {
  list-style: none;
  margin: 0;
  width: 220px;
}

.photo-manager img {
  display: block;
}

.photo-tools .form-submit {
  margin: 4px 4px 0 0;
}

.photo-delete {
  color: #b00;
}

.calendar-copy {
  margin-top: 1.5em;
}

.calendar-copy-warning {
  color: #b00;
}

.state-choices,
.calendar-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0.5em 0;
}

.state-choice {
  font-weight: normal;
}

.state-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  border: 1px solid #555;
}

/* ------------------------------------------------------------------
 * Admin pages
 * ------------------------------------------------------------------ */

.admin-shortcut {
  padding: 0.4em 0.6em;
  background: #f4f4f4;
  border: 1px solid #ddd;
}

.admin-list li {
  margin-bottom: 0.5em;
}

.account-disabled td {
  color: #888;
}

.invite-link input {
  width: 100%;
  font-family: monospace;
}

.inline-actions .form-submit {
  margin-right: 0.5em;
}

.menu-admin td {
  padding: 4px 0;
}

.menu-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.menu-row .weight {
  width: 4.5em;
}

/* Tablets and small screens: fluid instead of 950px fixed. */
@media (max-width: 979px) {
  #header,
  #menu,
  #wrapper,
  #footer-wrapper,
  #footer,
  #preface-wrapper,
  #bottom-teaser,
  #bottom-wrapper {
    width: auto;
    max-width: 950px;
  }

  #header,
  #menu,
  #wrapper,
  #footer-wrapper {
    margin-left: 12px;
    margin-right: 12px;
  }

  #slideshow-wrapper {
    height: auto;
    margin-bottom: 0;
    background: none;
  }

  .slideshow-inner,
  .slideshow {
    width: auto;
    height: auto;
    aspect-ratio: 950 / 355;
  }

  .slideshow-inner {
    margin: 0 12px;
  }

  .slideshow {
    height: 100%;
  }
}

/* Phones. */
@media (max-width: 640px) {
  body {
    font-size: 94%;
  }

  #header {
    height: auto;
    padding: 8px 0;
  }

  #header-wrapper {
    overflow: hidden;
  }

  #logo-wrapper,
  #branding-wrapper {
    float: none;
  }

  .logo {
    margin: 0 0 4px;
  }

  #branding-wrapper {
    margin: 0;
  }

  .site-slogan {
    display: block;
    margin: 0;
    font-size: 0.9em;
    line-height: 1.35;
  }

  /* The menu becomes a full-width bar with a button and a vertical list. */
  #menu {
    height: auto;
    margin: 0;
    background: #1f4a7a url(../danland/images/menu-bg.gif) repeat-x;
  }

  #rounded-menu-left,
  #rounded-menu-right {
    display: none;
  }

  .js .menu-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 44px;
    padding: 0 16px;
    border: 0;
    background: transparent;
    color: #fff;
    font: bold 13px/1 Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    cursor: pointer;
  }

  .js .menu-toggle::before {
    content: "";
    width: 18px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
  }

  .js #nav {
    display: none;
  }

  .js #menu.is-open #nav {
    display: block;
  }

  #nav {
    float: none;
    height: auto;
    background: none;
  }

  #nav li {
    float: none;
    height: auto;
    padding: 0;
    background: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  #nav li a {
    display: block;
    height: auto;
    padding: 12px 16px;
  }

  #nav li a:hover,
  #nav li.active-trail a {
    background: #163155;
  }

  .slideshow-inner {
    margin: 0;
  }

  #slideshow-wrapper {
    margin-top: 0;
  }

  /* Content, then the list of bastidons underneath. */
  .one-sidebar #content,
  #layout-type-1 #sidebar-right {
    float: none;
    width: auto;
    margin-left: 0;
  }

  #layout-type-1 #sidebar-right {
    margin-top: 20px;
    font-size: 14px;
  }

  .view-les-locations .view-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
  }

  .field-item table,
  .account table,
  .views-view-grid {
    display: block;
    overflow-x: auto;
  }

  .bastidon-map {
    height: 300px;
  }

  #authorize {
    float: none;
    margin: 4px 0 0;
  }

  #subnav-wrapper {
    text-align: center;
  }

  /* Calendar months one under the other, centred. */
  .cal-month {
    float: none;
    display: inline-block;
    vertical-align: top;
  }
}

/* Above the grid: what the badge on the photos means. */
.park-legend {
  margin: 0.4em 0;
}

.park-legend img {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin-right: 0.4em;
}

/* Listing page, under the bastidon's name: park access included or not. */
.views-view-grid .park-access {
  font-size: 0.9em;
  /* With the photo's own 3px, about 20% more space than before (0.3em). */
  margin-bottom: 0.4em;
}

.views-view-grid .park-access-inclus {
  color: #237a30;
}

.views-view-grid .park-access-exclu {
  color: #666;
}

/* /les-locations: every bastidon on one map, above the grid. */
.locations-map {
  width: 100%;
  height: 420px;
  margin: 1em 0 0.5em;
}

.map-popup a {
  display: block;
  text-decoration: none;
}

.map-popup img {
  display: block;
  width: 160px;
  height: 120px;
  object-fit: cover;
  margin-bottom: 0.3em;
}

@media (max-width: 640px) {
  .locations-map {
    height: 300px;
  }
}

/* Bastidon page: the park access, prices and calendar sections stand apart,
   each under a bigger heading. */
.node-bastidon .field-label-above {
  margin-top: 2.2em;
}

.node-bastidon .field-label-above > .field-label {
  font-size: 1.35em;
  font-weight: bold;
  margin-bottom: 0.5em;
}