/*
 * site.css — our own rules, loaded AFTER the captured theme so they win.
 * Keep this small: the captured CSS is the design of record. [DEC-110]
 */

/*
 * Slider arrow placement. [DEC-194]
 *
 * Slick's default is top:50%, which centres the arrow on the TRACK — and the track is as tall as
 * the TALLEST slide. Measured on /miami/classes/adults the reviews run 227px to 744px, so the
 * arrows landed 360px down, level with the middle of the longest review and near the bottom of
 * every short one. With adaptiveHeight they also moved as slides rotated.
 *
 * Cenay's call: pin them a fixed distance from the top of the slider instead. The arrow is then
 * always in the same place, always in the upper reading area, and never has to be hunted for.
 *
 * A single custom property so the value is stated once and can be overridden per widget.
 */
:root {
  --slider-arrow-top: 200px;
}

.slick-slider .slick-prev,
.slick-slider .slick-next {
  top: var(--slider-arrow-top);
}

/*
 * Mega-dropdown width — fit the content instead of a fixed 27.5rem. [DEC-110 override]
 *
 * The captured theme pins every dropdown to `width: var(--mega-width) !important` with
 * --mega-width: 27.5rem, inside @media (min-width:992px). That fixed width is what wraps a label
 * once a "coming soon" badge is added after it.
 *
 * ★ NO CHANGE TO THE CAPTURED FILE, and no !important war: the theme reads the width from a
 * custom property, so redefining --mega-width is enough — its own `!important` then applies OUR
 * value. That is the whole reason this override is three lines instead of a fork of items.166.css.
 *
 * min-width keeps the current proportions for the short dropdowns (Classes, Parties), so only the
 * ones that actually need room grow. max-width is the guard: max-content has no upper bound, and
 * a long label would otherwise push the panel past the viewport.
 *
 * ⚠️ Scoped to the same breakpoint as the rule it overrides. Below 992px the panel is the mobile
 * drawer, which is full-width and must not be content-sized.
 */
@media (min-width: 992px) {
  header .main-nav .items nav .level-2 {
    --mega-width: max-content;
    min-width: 27.5rem;
    max-width: min(calc(100vw - 2.5rem), 56rem);
  }
}

/*
 * "Coming soon" nav badge — <span class="badge-soon"> in site-nav-link.blade.php.
 *
 * The class comes from our own component contract, never from the captured theme, so there was
 * no rule to inherit and the badge rendered as bare inline text. [DEC-148] gives it its meaning:
 * a menu row with `coming_soon = 1` is offered at that location but not yet bookable.
 *
 * ⚠️ The yellows are LITERALS, not brand tokens, and that is deliberate: the captured palette has
 * no yellow (--primary/--secondary are greens, --tertiary is orange), and an orange chip reads as
 * a warning rather than a tag. Add them as tokens if a second component ever needs the same pair.
 *
 * ⛔ margin-right:auto is LOAD-BEARING, and it is the whole reason the badge sits by its label.
 * The captured theme lays .child-page out as `display:flex; justify-content:space-between`
 * (measured on the live element, not read out of the minified file). Text and badge are therefore
 * two flex items, and space-between pushed the badge to the panel's right edge — a 142px gap once
 * the panel started sizing to its content. `auto` hands the free space to the badge's right, so
 * space-between has nothing left to distribute and margin-left alone sets the distance.
 *
 * align-self:center for the same reason: as a flex item the badge was stretching to the anchor's
 * full height instead of hugging its own text.
 *
 * ⚠️ font-size is 0.85em — RELATIVE, by Cenay's call, so the chip is 13.6px beside a .child-page
 * and 11.9px beside a .child-page.grand. That is a deliberate reversal of what this comment used
 * to argue (one absolute size everywhere); the badge now tracks the label it belongs to. padding
 * is in em to match, so both sizes keep the same proportions.
 *
 * Legibility rests on contrast: #4a3800 on #fdf3c7 measures 10.1:1, well past WCAG AA. Keep that
 * ratio if the yellows are ever retuned.
 */
.badge-soon {
  display: inline-block;
  align-self: center;
  margin-left: 20px;
  margin-right: auto;
  padding: 0.15em 0.45em;
  border: 1px solid #e8d48a;
  border-radius: 5px;
  background: #fdf3c7;
  color: #4a3800;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.03rem;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

/* Empty state for a Bookeo category with no bookable products (DEC-305, desk Q4).
 *
 * Replaces the blank page DEC-247 was ruled knowing it would produce. Deliberately
 * plain: it borrows the theme's own `.item` / `.details` / `.title` card styling from
 * items.166.css rather than introducing a new visual language, so it reads as part of
 * the page instead of as an error box.
 *
 * ⚠️ The copy this styles is placeholder wording by Cenay's call (2026-09-05) and is
 * expected to change; keep the rules here about SPACING, not about the words.
 */
.catalog-coming-soon {
  padding: 3rem 1rem;
}

.catalog-coming-soon .details {
  max-width: 46rem;
  margin: 0 auto;
}

.catalog-coming-soon .details p {
  margin-bottom: 1.5rem;
}

.catalog-coming-soon .buttons {
  display: flex;
  justify-content: center;
}