/*
 * BA Golf Core: the booking block (bagolf/booking, "Boka i Sweetspot").
 * Loaded only where the block renders, and in the block editor.
 *
 * A sheet card in the site's brand colours (as on /verkstad/ and in the
 * forms): green pills with cream text, outline pills for the days, a 44px
 * target for every link and a green focus ring. Selectors carry the block
 * class twice where the theme styles the same elements (h2, p, ul, a and
 * `.site-main button`, which sets black, a 230px max-width and an ellipsis).
 * The card lays itself out by its own width (a container query): stacked in
 * narrow columns, the days beside the intro from 56rem.
 */

.bagolf-booking {
  --bagolf-booking-ink: #13241b;
  --bagolf-booking-green: #1c3a2a;
  --bagolf-booking-green-hover: #285039;
  --bagolf-booking-cream: #f7f6e5;
  --bagolf-booking-sheet: #fffefa;
  --bagolf-booking-stone: #f3f0e5;
  --bagolf-booking-line: #dfdacb;
  /* Outlines of the day pills: 3.6:1 on white (WCAG 1.4.11). */
  --bagolf-booking-control: #8c8672;
  /* Secondary text: 6.5:1 on the sheet. */
  --bagolf-booking-muted: #566057;
  --bagolf-booking-ease: cubic-bezier(0.16, 1, 0.3, 1);

  box-sizing: border-box;
  container: bagolf-booking / inline-size;
  width: 100%;
  max-width: 72rem;
  margin: clamp(2rem, 5vw, 3.5rem) auto;
  padding: 0;
  color: var(--bagolf-booking-ink);
  font-family: var(--typography-family-main, "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;
}

/*
 * The card is an inline-size container, so its own content gives it no
 * width. Inside a Group that shrinks to fit (live centres the page column's
 * children), it collapsed to a sliver. Groups that hold the block take the
 * full column instead.
 */
:where(.wp-block-group):has(.bagolf-booking) {
  align-self: stretch;
  box-sizing: border-box;
  width: 100%;
}

.bagolf-booking *,
.bagolf-booking *::before,
.bagolf-booking *::after {
  box-sizing: border-box;
}

.bagolf-booking [hidden] {
  display: none !important;
}

/* The homepage column is full-bleed: sit in the theme's 72rem column with
 * its gutters, like the activity cards and the map. */
.home.page .site-main > .bagolf-booking {
  padding-inline: var(--spacing-container-padding-inline, 1.25rem);
}

@media (max-width: 600px) {
  .home.page .site-main > .bagolf-booking {
    padding-inline: 1rem;
  }
}

.bagolf-booking .bagolf-booking__sheet {
  --bagolf-booking-pad: clamp(1.5rem, 1rem + 2.5vw, 3rem);

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
  padding: var(--bagolf-booking-pad);
  border: 1px solid var(--bagolf-booking-line);
  border-radius: 1.5rem;
  background-color: var(--bagolf-booking-sheet);
}

/* ---- Heading, lede and the main actions ---------------------------- */

.bagolf-booking .bagolf-booking__intro {
  min-width: 0;
}

.bagolf-booking .bagolf-booking__title {
  margin: 0;
  color: var(--bagolf-booking-ink);
  font-family: inherit;
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  text-wrap: balance;
}

.bagolf-booking .bagolf-booking__lede {
  max-width: 36rem;
  margin: 0.75rem 0 0;
  color: var(--bagolf-booking-muted);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.bagolf-booking .bagolf-booking__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  margin-top: 1.5rem;
}

.bagolf-booking .bagolf-booking__title + .bagolf-booking__actions {
  margin-top: 1.25rem;
}

.bagolf-booking .bagolf-booking__intro > .bagolf-booking__actions:first-child {
  margin-top: 0;
}

/* The brand pill: green with cream text, as the forms and /verkstad/. */
.bagolf-booking .bagolf-booking__primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3.25rem;
  margin: 0;
  padding: 0.75rem 1.625rem;
  /* Transparent, so Windows contrast themes still draw the pill. */
  border: 2px solid transparent;
  border-radius: 999px;
  background-color: var(--bagolf-booking-green);
  color: var(--bagolf-booking-cream);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}

.bagolf-booking .bagolf-booking__icon {
  display: block;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}

/* "eller ring 08-480 014 25", as next to /verkstad/'s button. */
.bagolf-booking .bagolf-booking__call {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-height: 2.75rem;
  border-radius: 0.25rem;
  color: var(--bagolf-booking-muted);
  font-size: 0.9375rem;
  text-decoration: none;
}

.bagolf-booking .bagolf-booking__phone {
  color: var(--bagolf-booking-ink);
  font-weight: 600;
  font-variant-numeric: lining-nums proportional-nums;
  text-decoration: underline;
  text-decoration-color: var(--bagolf-booking-control);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  white-space: nowrap;
}

/* ---- The days ------------------------------------------------------ */

.bagolf-booking .bagolf-booking__days {
  min-width: 0;
}

/* A small label, like the footer's column labels. */
.bagolf-booking .bagolf-booking__days-label {
  margin: 0 0 0.75rem;
  color: var(--bagolf-booking-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
}

/* At most 28rem wide, so the days wrap four and three, never with one left
 * over: in every week of 2026–2028 the first four pills need 27.2rem and the
 * first five 28.9rem (measured with the site's font). Phones wrap as they fit. */
.bagolf-booking .bagolf-booking__dates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: auto;
  max-width: 28rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bagolf-booking .bagolf-booking__dates > li {
  margin: 0;
  padding: 0;
}

/* Outline pills, 44px tall. */
.bagolf-booking .bagolf-booking__date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--bagolf-booking-control);
  border-radius: 999px;
  background-color: #fff;
  color: var(--bagolf-booking-ink);
  font-size: 0.9375rem;
  font-variant-numeric: lining-nums proportional-nums;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

/* ---- Passes and the note ------------------------------------------- */

.bagolf-booking .bagolf-booking__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--bagolf-booking-line);
}

.bagolf-booking .bagolf-booking__passes {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  border-radius: 0.25rem;
  color: var(--bagolf-booking-green);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--bagolf-booking-control);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.bagolf-booking .bagolf-booking__passes .bagolf-booking__icon {
  width: 1.125rem;
  height: 1.125rem;
}

.bagolf-booking .bagolf-booking__note {
  margin: 0;
  padding-block: 0.5rem;
  color: var(--bagolf-booking-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* ---- The desktop frame (frame: true) ------------------------------- */

/* Desktops only, the same query as DESKTOP in blocks/booking/view.js, which
 * removes `hidden` once it runs. Phones and tablets never see the button. */
.bagolf-booking .bagolf-booking__embed {
  display: none;
}

@media (min-width: 1030px) and (hover: hover) and (pointer: fine) {
  .bagolf-booking .bagolf-booking__embed:not([hidden]) {
    display: block;
  }
}

/* The button with its notice beside it, on up to two lines no taller than the
 * button; where less than 16rem is left, the notice goes under the button. */
.bagolf-booking .bagolf-booking__embed-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
}

.bagolf-booking .bagolf-booking__notice {
  flex: 1 1 16rem;
  max-width: 36rem;
  margin: 0;
  color: var(--bagolf-booking-muted);
  font-size: 0.875rem;
  line-height: 1.4;
}

/* An outline pill, out-ranking the theme's `.site-main button`. */
.bagolf-booking button.bagolf-booking__toggle {
  appearance: none;
  display: inline-flex;
  position: static;
  align-items: center;
  gap: 0.5rem;
  width: auto;
  max-width: none;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.5rem 1.25rem 0.5rem 1rem;
  overflow: visible;
  border: 2px solid var(--bagolf-booking-green);
  border-radius: 999px;
  background-color: transparent;
  box-shadow: none;
  color: var(--bagolf-booking-green);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  text-overflow: clip;
  text-transform: none;
  white-space: normal;
  cursor: pointer;
}

.bagolf-booking .bagolf-booking__toggle[aria-expanded="true"] .bagolf-booking__icon {
  transform: rotate(180deg);
}

/* Open, the frame is the card's bottom section, edge to edge: the widest it
 * can be in the column (1070px in the theme's 1200px column, where Sweetspot
 * switches to its full desktop layout from 1024px). */
.bagolf-booking .bagolf-booking__frame {
  position: relative;
  margin: 1.5rem calc(-1 * var(--bagolf-booking-pad)) calc(-1 * var(--bagolf-booking-pad));
}

.bagolf-booking .bagolf-booking__frame-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  padding: 0.375rem calc(var(--bagolf-booking-pad) - 0.75rem) 0.375rem var(--bagolf-booking-pad);
  border-block: 1px solid var(--bagolf-booking-line);
  background-color: var(--bagolf-booking-stone);
}

.bagolf-booking .bagolf-booking__frame-note {
  margin: 0;
  color: var(--bagolf-booking-muted);
  font-size: 0.875rem;
  line-height: 1.4;
}

.bagolf-booking .bagolf-booking__frame-open {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border-radius: 0.25rem;
  color: var(--bagolf-booking-green);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--bagolf-booking-control);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.bagolf-booking .bagolf-booking__frame-open .bagolf-booking__icon {
  width: 1rem;
  height: 1rem;
}

/* Hidden until focused: lets keyboard users past the frame's many controls. */
.bagolf-booking .bagolf-booking__skip {
  position: absolute;
  z-index: 1;
  top: 4.5rem;
  left: var(--bagolf-booking-pad);
  padding: 0.625rem 1rem;
  border-radius: 999px;
  background-color: var(--bagolf-booking-green);
  color: var(--bagolf-booking-cream);
  font-weight: 600;
  text-decoration: none;
}

.bagolf-booking .bagolf-booking__skip:not(:focus) {
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* At most 760px tall, at least 480px, and short enough that the button, the
 * bar and the whole frame fit under the sticky header together (7rem of
 * scroll padding and 0.75rem spare, plus what sits above the frame): view.js
 * scrolls them into view as one. Above the frame are the button row, a 1.5rem
 * gap and the bar, 7.75rem in all; in a narrow column they wrap and grow, so
 * view.js measures them on open. Sweetspot sends no size, and lays out its
 * sign-in and payment dialogs in the frame's own viewport, so the frame
 * can't grow to its content. */
.bagolf-booking .bagolf-booking__viewport {
  position: relative;
  height: min(47.5rem, calc(100vh - 7.75rem - var(--bagolf-booking-chrome, 7.75rem)));
  height: min(47.5rem, calc(100svh - 7.75rem - var(--bagolf-booking-chrome, 7.75rem)));
  min-height: 30rem;
  overflow: hidden;
  border-radius: 0 0 calc(1.5rem - 1px) calc(1.5rem - 1px);
  background-color: var(--bagolf-booking-stone);
}

.bagolf-booking .bagolf-booking__loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--bagolf-booking-muted);
  font-size: 0.9375rem;
}

.bagolf-booking .bagolf-booking__iframe {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
}

.bagolf-booking .bagolf-booking__after:focus {
  outline: none;
}

/* ---- States -------------------------------------------------------- */

.bagolf-booking a:focus-visible,
.bagolf-booking button.bagolf-booking__toggle:focus-visible {
  outline: 2px solid var(--bagolf-booking-green);
  outline-offset: 3px;
}

.bagolf-booking .bagolf-booking__primary:focus-visible {
  background-color: var(--bagolf-booking-green-hover);
  color: var(--bagolf-booking-cream);
}

@media (hover: hover) {
  .bagolf-booking .bagolf-booking__primary:hover {
    background-color: var(--bagolf-booking-green-hover);
    color: var(--bagolf-booking-cream);
  }

  .bagolf-booking .bagolf-booking__primary:hover .bagolf-booking__icon--arrow,
  .bagolf-booking .bagolf-booking__passes:hover .bagolf-booking__icon--arrow {
    transform: translateX(3px);
  }

  .bagolf-booking .bagolf-booking__call:hover {
    color: var(--bagolf-booking-ink);
  }

  .bagolf-booking .bagolf-booking__call:hover .bagolf-booking__phone,
  .bagolf-booking .bagolf-booking__passes:hover,
  .bagolf-booking .bagolf-booking__frame-open:hover {
    text-decoration-color: currentColor;
  }

  .bagolf-booking .bagolf-booking__date:hover,
  .bagolf-booking button.bagolf-booking__toggle:hover {
    border-color: var(--bagolf-booking-green);
    background-color: var(--bagolf-booking-green);
    color: var(--bagolf-booking-cream);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .bagolf-booking .bagolf-booking__primary,
  .bagolf-booking .bagolf-booking__date,
  .bagolf-booking button.bagolf-booking__toggle {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, scale 0.15s ease-out;
  }

  .bagolf-booking .bagolf-booking__phone,
  .bagolf-booking .bagolf-booking__passes,
  .bagolf-booking .bagolf-booking__frame-open {
    transition: text-decoration-color 0.2s ease;
  }

  .bagolf-booking .bagolf-booking__icon {
    transition: transform 0.3s var(--bagolf-booking-ease);
  }

  .bagolf-booking .bagolf-booking__primary:active,
  .bagolf-booking .bagolf-booking__date:active,
  .bagolf-booking button.bagolf-booking__toggle:active {
    scale: 0.97;
  }
}

/* ---- Layout by the card's width ------------------------------------ */

/* Narrow columns (phones): the button takes the row, the phone line goes under it. */
@container bagolf-booking (max-width: 30rem) {
  .bagolf-booking .bagolf-booking__primary {
    flex: 1 1 100%;
  }
}

/* Wide columns: the days beside the intro, level with its buttons, in the
 * list's own 28rem; passes, the note and the frame span the card. From 56rem
 * the intro keeps about 19rem, so the button stays on one line. */
@container bagolf-booking (min-width: 56rem) {
  .bagolf-booking--dates .bagolf-booking__sheet {
    grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
    align-items: end;
    column-gap: clamp(2rem, 5cqi, 4rem);
  }

  .bagolf-booking .bagolf-booking__meta,
  .bagolf-booking .bagolf-booking__embed {
    grid-column: 1 / -1;
  }
}

/* The editor shows the frame's button as desktops see it (its preview is
 * not interactive, and the view script does not run there). */
.editor-styles-wrapper .bagolf-booking .bagolf-booking__embed,
.editor-styles-wrapper .bagolf-booking .bagolf-booking__embed[hidden] {
  display: block !important;
}

.editor-styles-wrapper .bagolf-booking .bagolf-booking__embed .bagolf-booking__frame[hidden] {
  display: none !important;
}