/* What the new site has that the live site (static/css/live.css) doesn't style, written with the
   live site's tokens (docs/design-standards.md §2, §11). Everything the live site has is built
   with its own classes, not here. */

/* The mobile menu opens without JavaScript (#menu :target); menu.js uses .is-open. */
.mobile-sheet { display: none; }
.mobile-sheet:target, .mobile-sheet.is-open { display: block; }
html.menu-is-open { overflow: hidden; }

/* Privacy, Terms and Contact bodies are flatpage HTML, so the live PostBody's classes go on
   their elements here: paragraphs and lists `text-base leading-relaxed text-neutral-700`, h2
   `mt-4 text-subheading font-bold text-neutral-800`, h3 `mt-2 text-subheading-compact font-bold`,
   lists `list-disc space-y-2 pl-6`, links `font-semibold text-brand-700 underline
   underline-offset-4 hover:text-brand-800`. */
.page-body p, .page-body ul, .page-body ol { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-neutral-700); }
.page-body h2 { margin-top: calc(var(--spacing) * 4); font-size: var(--text-subheading); line-height: var(--text-subheading--line-height); font-weight: var(--font-weight-bold); color: var(--color-neutral-800); }
.page-body h3 { margin-top: calc(var(--spacing) * 2); font-size: var(--text-subheading-compact); line-height: var(--text-subheading-compact--line-height); font-weight: var(--font-weight-bold); color: var(--color-neutral-800); }
.page-body ul { list-style-type: disc; padding-left: calc(var(--spacing) * 6); }
.page-body ol { list-style-type: decimal; padding-left: calc(var(--spacing) * 6); }
.page-body li + li { margin-top: calc(var(--spacing) * 2); }
.page-body a { font-weight: var(--font-weight-semibold); color: var(--color-brand-700); text-decoration-line: underline; text-underline-offset: 4px; }
.page-body a:hover { color: var(--color-brand-800); }

/* The live site's sideways card rows (Radix ScrollArea): Radix hides the native scrollbar with a
   style tag it injects at runtime, so the same rule is here. */
[data-slot=scroll-area-viewport] { overflow: scroll; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
[data-slot=scroll-area-viewport]::-webkit-scrollbar { display: none; }

/* A native <select> drawn as the live Select trigger (text, then the chevron at the end, 6px
   apart: its gap-1.5), so phones get their own picker. */
.native-select { position: relative; }
.native-select > select { appearance: none; padding-right: calc(var(--spacing) * 5.5); cursor: pointer; }
.native-select > svg { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }

/* The filter sheet opens without JavaScript (#filters :target; search.js adds focus and Escape).
   Its chips are labels around radio buttons and checkboxes, so the live toggle's "on" look
   (data-[state=on]:border-brand-600 bg-brand-100 text-neutral-800) follows the checked input. */
.filter-sheet { display: none; }
.filter-sheet:target { display: block; }
[data-slot=toggle-group-item]:has(input:checked) { border-color: var(--color-brand-600); background-color: var(--color-brand-100); color: var(--color-neutral-800); }
[data-slot=toggle-group-item]:has(input:focus-visible) { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
[data-slot=toggle-group-item] { cursor: pointer; }
/* Above 1024px the sheet takes the live right-hand sheet's place and width (its
   data-[side=right]:sm:max-w-sm): full height, from the right edge. */
@media (min-width: 64rem) {
  .filter-sheet [data-slot=sheet-content] { left: auto; width: 100%; max-width: var(--container-sm); border-left: 1px solid var(--border); border-top: 0; }
}

/* Landing-page FAQs (design §9; the live site has none): a <details> per question with the live
   chevron, turned when open. */
.faq > summary { list-style: none; cursor: pointer; }
.faq > summary::-webkit-details-marker { display: none; }
.faq[open] > summary > svg { transform: rotate(180deg); }

/* The venue photo gallery ("See all photos (N)", docs/design-standards.md §8): full screen on
   neutral-900, one photo per screen width, swiped sideways with scroll snap. It opens through
   #photos :target without JavaScript; gallery.js uses .is-open. */
.photo-all { position: absolute; right: calc(var(--spacing) * 3); bottom: calc(var(--spacing) * 3); box-shadow: var(--shadow-panel); }
.photo-gallery { display: none; position: fixed; inset: 0; z-index: 60; flex-direction: column; background: var(--color-neutral-900); color: var(--color-neutral-0); outline: none; }
.photo-gallery:target, .photo-gallery.is-open { display: flex; }
.photo-gallery-bar { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--spacing) * 4); padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 4); }
.photo-gallery-button { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--spacing) * 11); height: calc(var(--spacing) * 11); border-radius: var(--radius-DEFAULT); color: var(--color-neutral-0); background: transparent; cursor: pointer; }
.photo-gallery-button:hover { background: var(--color-neutral-700); }
.photo-gallery-button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus); }
.photo-gallery-track { display: flex; flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.photo-gallery-track::-webkit-scrollbar { display: none; }
.photo-gallery-slide { flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; padding: 0 calc(var(--spacing) * 4) calc(var(--spacing) * 4); }
.photo-gallery-slide img { width: 100%; height: 100%; object-fit: contain; }
.photo-gallery-prev, .photo-gallery-next { position: absolute; top: 50%; transform: translateY(-50%); background: var(--color-neutral-800); }
.photo-gallery-prev { left: calc(var(--spacing) * 4); }
.photo-gallery-next { right: calc(var(--spacing) * 4); }
@media not all and (min-width: 64rem) { .photo-gallery-prev, .photo-gallery-next { display: none; } }

/* List your venue: design-standards §7.2. */
.native-select.is-field > svg { right: calc(var(--spacing) * 3); }
.native-select.is-field > select { padding-right: calc(var(--spacing) * 9); }
.lyv-check { flex: none; width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); margin: 0; accent-color: var(--color-brand-700); cursor: pointer; }
.lyv-drop { cursor: pointer; }
.lyv-drop.is-over { border-color: var(--color-brand-600); background-color: var(--color-brand-100); }
[data-price]:has(input[name=priceMode][value=ask]:checked) [data-price-fields] { display: none; }

/* Its wizard: §7.2. */
.lyv-progress { height: calc(var(--spacing) * 2); overflow: hidden; border-radius: var(--radius-pill); background-color: var(--color-neutral-200); }
.lyv-progress > span { display: block; width: 0; height: 100%; border-radius: var(--radius-pill); background-color: var(--color-brand-700); }
@media not all and (min-width: 64rem) { [data-wizard-root][data-step-now]:not([data-step-now="1"]) > aside { display: none; } }

/* Request a quote: design-standards §7.1. */
.quote-close { display: none; }
.quote-more { display: none; }
[data-quote-form]:has(input[name=quote-services][value="Catering"]:checked) [data-needs="Catering"],
[data-quote-form]:has(input[name=quote-services][value="Bar / drinks"]:checked) [data-needs="Bar / drinks"],
[data-quote-form]:has(input[name=quote-services][value="Decorations"]:checked) [data-needs="Decorations"] { display: flex; }
@media not all and (min-width: 64rem) {
  .quote-sheet { display: none; position: fixed; inset: 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain; background-color: var(--color-neutral-0); }
  .quote-sheet:target, .quote-sheet.is-open { display: block; }
  .quote-sheet > [data-slot=card] { min-height: 100%; border-radius: 0; box-shadow: none; }
  .quote-close { display: inline-flex; }
}
/* Venue page columns: §7.1. */
@media (min-width: 64rem) {
  .venue-layout { grid-template-columns: minmax(0, 1fr) calc(var(--spacing) * 96); }
  .venue-layout .venue-row { grid-template-columns: calc(var(--spacing) * 40) minmax(0, 1fr); }
  .venue-layout > .quote-sheet { position: sticky; top: calc(var(--spacing) * 6); align-self: start; }
  .venue-layout > .quote-sheet > [data-slot=card] { max-height: calc(100dvh - var(--spacing) * 12); overflow-y: auto; }
}