/* ===========================================================================
   Sullishak reservation calendar - the only styles it needs.
   Loaded only on pages whose settings say  calendar: true  or  calendar: admin.
   Colours come from site.css; the two new ones are amber (asked for) and
   sea glass (booked, which is the site's own link colour).
   =========================================================================== */

:root {
  --cal-pending-bg:     #fbeedb;
  --cal-pending-line:   #d9a24e;
  --cal-pending-text:   #7a5116;
  --cal-booked-bg:      #dceae4;
  --cal-booked-line:    #3f7d6b;
  --cal-booked-text:    #24594a;
  --cal-blocked-bg:     #e6e2dc;
  --cal-blocked-line:   #9a9184;
  --cal-blocked-text:   #524b42;
}

.calendar {
  margin: 1.6em 0 2em;
  padding: 16px 16px 14px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 6px;
}

/* --------------------------------------------------- the line at the top -- */

/* What the family is told about the calendar itself. While Barb is still
   putting the old bookings in, this is the first thing on the page, and it
   says plainly that an empty square is not yet a promise. */
.cal-banner {
  margin: 0 0 14px;
  padding: 11px 13px;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--rule);
  border-radius: 4px;
  background: var(--shade);
  font-size: var(--caption);
  line-height: 1.45;
}
.cal-banner-rebuild {
  background: var(--cal-pending-bg);
  border-color: var(--cal-pending-line);
  color: var(--cal-pending-text);
  font-weight: 600;
}
.cal-banner-live {
  background: var(--cal-booked-bg);
  border-color: var(--cal-booked-line);
  color: var(--cal-booked-text);
}
.cal-banner-offline {
  background: var(--cal-blocked-bg);
  border-color: var(--cal-blocked-line);
  color: var(--cal-blocked-text);
  font-weight: 600;
}

/* ------------------------------------------------------ month and arrows -- */

.cal-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.cal-month {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  margin: 0;
  flex: 1 1 auto;
  text-align: center;
  line-height: 1.2;
}
.cal-nav {
  flex: 0 0 auto;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}
.cal-nav:hover:not(:disabled) { border-color: var(--link); color: var(--link); }
.cal-nav:disabled { opacity: .35; cursor: default; }

/* ----------------------------------------------------------------- grid -- */

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.cal-dow {
  text-align: center;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--muted);
  padding-bottom: 4px;
}
.cal-blank { min-height: 10px; }

.cal-day {
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 48px;
  padding: 3px 2px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  text-align: center;
}
.cal-num { font-size: 15px; line-height: 1.1; }
.cal-who {
  font-size: 10px;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-who-long { display: none; }
.cal-who-short { font-size: 9.5px; letter-spacing: -.01em; }

/* on a narrow phone every pixel of cell width counts, so the box
   gives some of its padding back to the grid */
@media (max-width: 480px) {
  .calendar { padding: 14px 10px 12px; }
  .cal-grid { gap: 3px; }
  .cal-day { padding: 3px 1px; }
}
@media (min-width: 560px) {
  .cal-day { min-height: 60px; }
  .cal-num { font-size: 16px; }
  .cal-who { font-size: 11.5px; }
  .cal-who-long { display: block; }
  .cal-who-short { display: none; }
}

.cal-free:hover { border-color: var(--link); background: #f2f8f6; }

.cal-pending {
  background: var(--cal-pending-bg);
  border-color: var(--cal-pending-line);
  color: var(--cal-pending-text);
}
.cal-booked {
  background: var(--cal-booked-bg);
  border-color: var(--cal-booked-line);
  color: var(--cal-booked-text);
}
/* dates Barb has marked unavailable - the cabin itself, not a guest */
.cal-blocked {
  background: var(--cal-blocked-bg);
  border-color: var(--cal-blocked-line);
  color: var(--cal-blocked-text);
  background-image: repeating-linear-gradient(
    -45deg, transparent 0 5px, rgba(0, 0, 0, .05) 5px 10px);
}
.cal-past {
  background: none;
  border-color: transparent;
  color: #b3aba1;
  cursor: default;
}
.cal-today { box-shadow: inset 0 0 0 2px var(--accent); }

/* the days you have picked. The nights you sleep there are solid;
   the morning you leave is the same colour, lightly washed. */
.cal-day.cal-pick-start, .cal-day.cal-pick-mid {
  background: var(--accent);
  border-color: var(--accent-dark);
  color: #fff;
  font-weight: 600;
}
.cal-day.cal-pick-end {
  background: #f4e1cd;
  border-color: var(--accent);
  color: var(--accent-dark);
  font-weight: 600;
}

/* --------------------------------------------------- hint, key and list -- */

.cal-hint {
  margin: 12px 0 0;
  font-size: var(--caption);
  color: var(--muted);
  min-height: 1.5em;
}
/* Both days picked. The line stops being a hint and becomes the instruction,
   because the form below the calendar is easy to miss altogether. */
.cal-hint-ready {
  margin-top: 14px;
  padding: 11px 13px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--cal-booked-text);
  background: var(--cal-booked-bg);
  border: 1px solid var(--cal-booked-line);
  border-left: 4px solid var(--cal-booked-line);
  border-radius: 4px;
}
.cal-hint-lead { font-weight: 700; }
.cal-hint-dates { display: block; margin-top: 3px; }
.cal-hint-say { color: var(--cal-pending-text); font-weight: 600; }

/* The colour key. Plain words with a small round dot each - no boxes, no
   borders, nothing that looks like a button. Barb tapped the old "Booked"
   square expecting it to book her dates. */
.cal-legend-box { margin: 14px 0 0; }
.cal-legend-title {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 3px;
}
.cal-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 18px;
  margin: 0;
  padding: 0;
  font-size: var(--caption);
  color: var(--muted);
}
.cal-legend li { display: flex; align-items: center; margin: 0; }
.cal-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  margin-right: 7px;
  flex: 0 0 auto;
}
/* a free day is white, so that one dot needs a hairline ring to be seen */
.cal-dot-free    { box-shadow: inset 0 0 0 1px var(--cal-blocked-line); }
.cal-dot-pending { background: var(--cal-pending-line); }
.cal-dot-booked  { background: var(--cal-booked-line); }
.cal-dot-blocked { background: var(--cal-blocked-line); }

.cal-list { margin-top: 14px; border-top: 1px solid var(--rule); padding-top: 12px; }
.cal-list-items { list-style: none; margin: 0; padding: 0; font-size: 15.5px; }
.cal-list-items li { display: flex; align-items: flex-start; margin: 0 0 6px; }
/* the same dots as the key above, so the list is plainly a list and not a
   row of little boxes waiting to be ticked */
.cal-list-items .cal-dot { margin-top: 6px; }
.cal-list-empty, .cal-fallback { margin: 0; font-size: var(--caption); color: var(--muted); }

.cal-note { font-size: var(--caption); color: var(--muted); }

/* ------------------------------------------------------------ the form -- */

/* site.css styles every field on a .stay-form except a password box */
.stay-form input[type=password] {
  width: 100%;
  max-width: 22em;
  font: inherit;
  padding: 9px 10px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: #fff;
  color: var(--text);
  margin-bottom: 14px;
}

.form-status { margin: 0 0 14px; font-size: 16px; }
.form-status:empty { display: none; }
.form-status-bad {
  color: #8c2f2f;
  background: #fbeceb;
  border: 1px solid #e3bcb8;
  border-radius: 4px;
  padding: 10px 12px;
}
.form-status-good { color: var(--cal-booked-text); }

.stay-done {
  margin: 1.6em 0;
  padding: 20px 22px;
  background: var(--cal-booked-bg);
  border: 1px solid var(--cal-booked-line);
  border-radius: 6px;
}
.stay-done h3, .stay-done-lead {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.35;
  margin: 0 0 .5em;
  color: var(--cal-booked-text);
}
.stay-done p { margin: 0 0 .9em; }
.stay-done p:last-child { margin-bottom: 0; }
.cal-warn { color: var(--cal-pending-text); font-weight: 600; }
/* the one thing on the thank-you that is worth keeping: a copy of the ask */
.stay-keep a { font-weight: 600; }

/* ---------------------------------------------------------- Barb's page -- */

.barb-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin: 0 0 20px;
}
/* The top of Barb's page: the stay somebody arranged on the telephone goes
   in here, above the list, where she sees it first. */
.barb-top { margin: 0; }
.barb-lead { margin: 0 0 10px; font-size: 17px; line-height: 1.45; }
.barb-top .barb-bar { margin-bottom: 0; }
.barb-top .barb-add { margin-top: 16px; }
/* the two she needs least often, kept out of the way at the foot */
.barb-bar-quiet {
  margin: 2.2em 0 24px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.barb-link {
  font: inherit;
  font-size: 15px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--link);
  text-decoration: underline;
  cursor: pointer;
}
.barb-error {
  color: #8c2f2f;
  background: #fbeceb;
  border: 1px solid #e3bcb8;
  border-radius: 4px;
  padding: 10px 12px;
  margin: 0 0 14px;
}
.barb-group {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  margin: 1.8em 0 .6em;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--rule);
}
.barb-empty { color: var(--muted); }

.barb-card {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 5px solid var(--rule);
  border-radius: 6px;
  padding: 14px 16px;
  margin: 0 0 12px;
}
.barb-pending   { border-left-color: var(--cal-pending-line); }
.barb-confirmed { border-left-color: var(--cal-booked-line); }
.barb-blocked   { border-left-color: var(--cal-blocked-line); }
.barb-declined  { border-left-color: #c9c2b8; }
.barb-card h3 {
  font-family: var(--serif);
  font-size: 19px;
  margin: 0 0 .3em;
  line-height: 1.3;
}
.barb-meta, .barb-status { margin: 0 0 .4em; font-size: 15px; color: var(--muted); }
.barb-note {
  margin: .5em 0;
  padding: 8px 12px;
  background: var(--shade);
  border-radius: 4px;
  font-size: 15.5px;
}
.barb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
}
.barb-btn {
  font: inherit;
  font-size: 16px;
  padding: 11px 18px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}
.barb-btn:hover { border-color: var(--link); color: var(--link); }
.barb-danger:hover { border-color: #a33; color: #a33; }
.barb-actions .button { font-size: 16px; padding: 11px 18px; }
.barb-mailto { margin: 10px 0 0; font-size: 15px; }
.barb-edit, .barb-add { margin-top: 12px; }
.barb-form { margin: 0; }
.barb-form h3 { font-family: var(--serif); font-size: 19px; margin: 0 0 .6em; }

/* Barb's one switch: what the Stay page tells the family about the calendar */
.barb-ready {
  margin: 0 0 4px;
  padding: 0 0 14px;
}
.barb-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 17px;
  line-height: 1.4;
  margin: 0 0 .5em;
  cursor: pointer;
}
.barb-choice input[type=checkbox] {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  flex: 0 0 auto;
}
.barb-ready .barb-meta { margin: 0; }

/* ---------------------------------------------------------------- print -- */

@media print {
  .calendar, .stay-form, .barb-bar, .barb-actions, .cal-hint { display: none !important; }
}
.admin-only[hidden] { display: none; }