/* Guest-facing blocks that are shared by the homepage and the personal pages.
 *
 * Loaded AFTER site.css. That ordering is deliberate and it is the reason this
 * file still exists rather than having been folded into site.css: these rules
 * used to be the only definitions of .tool-card, .faq-list, .calendar-item and
 * .urgent-banner, and they were written against the previous design - a
 * lighter, more compact one. site.css now defines those same components for the
 * new design, and because this file comes later in the <head> its properties
 * would win on every shared selector, quietly undoing the redesign wherever
 * the two overlapped.
 *
 * So the rule for this file from here on: define a selector here ONLY if it is
 * unique to it. Anything site.css also styles belongs in site.css, where the
 * new design lives. The selectors left below are the ones that exist nowhere
 * else.
 */

/* The travel / calendar / FAQ band. The hairline top and bottom edges are what
   separate it from the sand-coloured sections around it. */
.guest-tools {
  border-block: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 45%, var(--background));
}

/* --------------------------------------------------------------------------
   Urgent announcement banner.

   The one place on the site that uses RED rather than the couple's palette,
   and that is a considered exception. An urgent notice is the couple's own
   word for "this must be read before the rest of the page" - a time change,
   where to park, where to find them - and it is the one message that has to
   interrupt whatever the guest was doing.

   The accent cannot carry that: it is a colour the couple picked against their
   own background, it is used for eyebrows and links all over the site, and
   "important" that looks like every other label is not important. The red is
   fixed so it means the same thing whatever palette is configured, and
   check_contrast.py is asserted against it in tests/admin_contrast.test.py.

   The red itself is --urgent rather than a literal in these three rules, even
   though this file is not the only place that uses it. At night the site has
   a second value for it - #b3261e on a dark card measures 2.6:1, which is not
   an urgent notice any more - and a theme cannot be applied to a colour that
   a rule owns. --urgent is defined in site.css because that file is loaded
   FIRST, and a value it defined for the night would be overruled by the same
   --urgent redefinition here.
   -------------------------------------------------------------------------- */
.urgent-banner {
  display: grid; gap: .6rem;
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin: 1.5rem auto 0;
}
.urgent-banner__item {
  display: flex; gap: 1rem; align-items: baseline;
  padding: 1.1rem 1.3rem;
  border-radius: calc(var(--radius) * .6);
  background: color-mix(in srgb, var(--urgent) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--urgent) 28%, transparent);
}
.urgent-banner__label {
  flex: none;
  font-size: .58rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--urgent);
}
.urgent-banner__item strong { font-weight: 600; }
.urgent-banner__item p { margin: .3rem 0 0; font-size: .92rem; line-height: 1.6; opacity: .82; }
@media (max-width: 38rem) { .urgent-banner__item { flex-direction: column; gap: .5rem; } }

/* --------------------------------------------------------------------------
   Guest-tools specific pieces. site.css owns .tool-grid, .tool-card, .faq-list,
   .calendar-daybar, .calendar-list, .calendar-item, .btn-row and .chip.
   -------------------------------------------------------------------------- */

/* The name-and-time block of a calendar item.
 *
 * This class was used in a 4.2 template and never had a rule. The Tailwind
 * coverage check (§5.1) is what surfaced it: the text still rendered, it just
 * rendered with no layout of its own, which is the kind of thing a visual review
 * walks straight past. Without a build-time check it would still be here.
 */
.calendar-item__when { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.calendar-item__when small { font-size: .8rem; opacity: .6; }
.calendar-item__actions { display: grid; gap: .5rem; }