/* Matthew Annable — components shared by both page shells.
 *
 * base.html (booking, confirm, admin) and public_base.html (landing, About,
 * terms) have their own stylesheets and their own token sets, and neither may
 * reach into the other. Anything that has to look the same on both lives
 * here, and both shells load it.
 *
 * Colours carry literal fallbacks rather than relying on tokens: --dark is
 * defined in landing.css but not in style.css, so a bare var(--dark) would
 * render a transparent pill with unreadable text on the booking pages.
 */

/* ------------------------------------------------------- header and buttons */
/* Shared because the site header now appears on the booking pages too, which
   are built on style.css rather than landing.css. Every custom property used
   below is defined in both stylesheets, and carries a literal fallback anyway
   so the header can never render as invisible text on an invisible bar. */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--amber, #F7A630); color: var(--ink, #2E2A28); font-weight: 700;
  padding: 12px 20px; border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; color: var(--ink, #2E2A28); }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 248, 243, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line, #E3DCD1);
}
.site-header .shell {
  max-width: 1080px; margin: 0 auto;
  padding: 10px clamp(16px, 4cqi, 40px);
  display: flex; align-items: center;
  gap: clamp(10px, 2cqi, 24px); justify-content: space-between;
}
/* The booking pages have no container-query context, so cqi units there fall
   back to their minimum — hence fixed padding. They are also 880px wide
   rather than 1080px, and a header wider than the page beneath it reads as a
   mistake, so match .wrap exactly. */
.site-header--plain .shell { max-width: 880px; padding: 10px 20px; }

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; }
.brand svg { height: 17px; width: auto; flex: none; display: block; }

/* Wraps rather than overflows: three links plus a call to action is more than
   a 320px phone can hold on one line. */
.header-links { display: flex; flex-wrap: wrap; align-items: center;
                justify-content: flex-end; gap: 4px clamp(10px, 2cqi, 22px); }
.header-link {
  flex: none; white-space: nowrap;
  font-size: clamp(13px, 1.6cqi, 15px); font-weight: 600; color: var(--accent, #4C6D47);
  min-height: 44px; display: inline-flex; align-items: center;
}
.header-link:hover { color: var(--plum, #6F4B52); }

.btn {
  flex: none; white-space: nowrap;
  font-weight: 700; color: var(--ink, #2E2A28); background: var(--amber, #F7A630);
  border: none; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; text-decoration: none;
  transition: background .14s ease;
}
.btn:hover { background: var(--amber-hover, #FFB544); color: var(--ink, #2E2A28); }

.btn--sm  { font-size: clamp(13px, 1.6cqi, 15px); padding: 12px 18px; min-height: 44px;
            box-shadow: 0 8px 18px -12px rgba(247, 166, 48, 1); }
.btn--md  { font-size: 16px; padding: 16px 28px; min-height: 52px; }
.btn--lg  { font-size: clamp(16px, 2cqi, 18px); padding: 16px 32px; min-height: 56px;
            box-shadow: 0 14px 30px -16px rgba(247, 166, 48, 0.95); }
.btn--xl  { font-size: clamp(17px, 2.2cqi, 19px); padding: 18px 36px; min-height: 60px;
            box-shadow: 0 16px 32px -16px rgba(247, 166, 48, 0.95); }

.btn--ghost {
  background: var(--card, #FFFFFF); border: 1px solid var(--line-strong, #C9BFB0);
  font-size: 16px; padding: 16px 28px; min-height: 56px;
}
.btn--ghost:hover { background: var(--card, #FFFFFF); border-color: var(--accent, #4C6D47);
                    color: var(--accent, #4C6D47); }

/* -------------------------------------------------------------- mail toast */
/* Shown only when a mailto: link went nowhere — see static/js/contact.js.
   Fixed, so it never disturbs the layout underneath. */
.mail-toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translate(-50%, 12px);
  z-index: 200;
  max-width: min(92vw, 30rem);
  padding: 14px 20px;
  background: var(--dark, #1C211A);
  color: var(--paper, #FBF8F3);
  border-radius: 999px;
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  box-shadow: 0 12px 30px -10px rgba(28, 33, 26, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.mail-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Only the landing page has a sticky call-to-action to clear; everywhere
   else the toast sits lower. contact.js decides which. */
.mail-toast--low { bottom: 28px; }

@media (prefers-reduced-motion: reduce) {
  .mail-toast { transition: none; }
}