/* ==========================================================================
 * Cookie settings — the footer button, the dialog it opens, and the page.
 *
 * Two surfaces for one question. The footer button and its dialog are on every
 * page; /cookie-settings/ is a page the same copy and the same two choices are
 * rendered onto, so the choice has a URL that can be linked to. The page section
 * is at the foot of this sheet.
 *
 * Loaded on every page after main.css (see the zouma-cookies enqueue in
 * functions.php) and deliberately not a build target: there is no
 * cookies.min.css and none is to be generated, so a fix here reaches the site
 * without deploy/build-assets.mjs having to run first.
 *
 * Nothing on this page is gated by the choice. The dialog records a preference
 * for later; assets/js/cookies.js writes it and mirrors it onto the root
 * element as data-zouma-consent.
 * ========================================================================== */

/* One size, held on the root so every measurement on the button can be the
 * client's own proportion of it — their tile is 68 units across, so /68 reads
 * straight off the raster.
 *
 * The inset beside it is how far the tile stands off the footer's own corner,
 * and it is deliberately smaller than .zouma-shell's padding-inline: half of
 * that gutter, on the same --zouma-vw scale, capped at the 16px the client's
 * screenshot reads. Half rather than all of it so the tile sits outside the
 * content column at every width instead of lining up with the copyright — a
 * flat 16px matches the gutter exactly below 533px, which is where the tile
 * came from. */
:root {
  --zouma-cookie-size: 56px;
  --zouma-cookie-inset: clamp(0.5rem, calc(1.5 * var(--zouma-vw)), 1rem);
}

/* The footer button -------------------------------------------------------- */

/* The row the tile has to itself, the last in-flow child of .zouma-footer and
 * outside .zouma-shell. That is where the corner actually is: the shell is
 * capped and centred, so from inside it the tile can never reach the footer's
 * own edge on a wide screen — at 1440 the shell's content starts 80px in. A
 * negative margin cancels the shell's gutter but not its centring, and the
 * centring is only expressible in vw, which counts the scrollbar and would land
 * the tile half a scrollbar out. Out here one padding does it exactly, at every
 * width. See footer.php for the markup side of the same decision.
 *
 * In flow, not pinned: the tile reserves its own height, so nothing above it can
 * be overlapped however far the bottom row wraps, and nothing is held against
 * .zouma-footer's overflow: hidden for the clip to take.
 *
 * padding-inline-start rather than a side, so the tile follows the reading
 * direction and mirrors to the bottom-right corner under dir="rtl".
 *
 * The 40px of clear space above the tile is the bottom row's own padding-block,
 * so only the space below is wanted here — and that 16px is load-bearing:
 * .zouma-footer is overflow: hidden, and without it the tile's
 * outline-offset: 3px ring and the lower half of its drop shadow are cut off at
 * the footer's bottom edge. 16px clears both without main.css having to change.
 * It stays a flat 16px rather than taking the inset above, which halves to 8px
 * on a phone: the ring alone wants 5px of it, and the bottom edge is the one
 * the client's screenshot has the tile sitting on. */
.zouma-cookie-corner {
  /* .zouma-footer__glow is positioned and this wrapper is not, so the glow
   * paints over it rather than under it. The corner is out at the transparent
   * edge of that gradient, so the wash measures only a few levels deep there —
   * but it is on the tile, over 438 pixels of it at 360. Inside .zouma-shell
   * the shell's own position: relative was holding the order. */
  position: relative;
  padding-block: 0 16px;
  padding-inline-start: var(--zouma-cookie-inset);
}

/* The grey tile and its drop shadow live here rather than inside
 * icon-cookie.svg, which is where the client drew them. Three reasons, all
 * practical: this element is the hit target, so it is the one that needs a
 * 44px-plus box and a focus ring following its own rounded corners; the icon
 * is then a single tone and takes the hover colour from currentColor for free;
 * and the shadow is one line that scales with the button, where the client's
 * feGaussianBlur would have been fixed at the size they exported.
 *
 * Every number is measured off their 128x124 raster, where the tile is 68x68:
 * #d0d0d0, an 8px corner on a 68px side (11.76%), and a shadow that fits
 * 0 4.25px 38.5px 1px rgba(0,0,0,0.08) to 0.5/255 on the alpha channel. Those
 * are written below as the same proportions of this button's 56px side.
 *
 * style.css paints every bare button with a filled primary background, padding,
 * a radius and a transition, and repaints it on button:hover. A plain
 * .zouma-cookie-btn rule loses that hover outright, so the element is named in
 * the selector here and in every state below — the same reason
 * button.zouma-cal__day is written that way in main.css. */
button.zouma-cookie-btn {
  /* In the footer's flow, not pinned to the viewport. The client asked for a
   * control that scrolls with the page and is only on screen once the footer is,
   * so there is nothing left to stack against: no part of the page passes under
   * this tile any more, and the header, an open mega menu and the booking dialog
   * are never near it. Hence no position and no z-index at all.
   *
   * Nothing has to defend its size either, now that it is no longer a flex item.
   * A block-level box with an explicit width sits at the start of its line in
   * .zouma-cookie-corner and keeps all 56px of it, and the start of a line is
   * the inline start — so the tile is at the correct edge under dir="rtl" by
   * construction, with nothing here having to name a side. */
  display: grid;
  place-items: center;
  width: var(--zouma-cookie-size);
  height: var(--zouma-cookie-size);
  padding: 0;
  background: #d0d0d0;
  color: var(--zouma-cyan);
  border: 0;
  /* An 8px corner on their 68px tile. Written as a calc rather than the 11.76%
   * it works out to, so it stays a real length in the computed style and can
   * be checked against the button's width. */
  border-radius: calc(var(--zouma-cookie-size) * 8 / 68);
  box-shadow:
    0
    calc(var(--zouma-cookie-size) * 4.25 / 68)
    calc(var(--zouma-cookie-size) * 38.5 / 68)
    calc(var(--zouma-cookie-size) / 68)
    rgba(0, 0, 0, 0.08);
  font-weight: inherit;
  line-height: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.18s ease, color 0.18s ease;
}

/* The tile darkens and the ink deepens to the theme's own ink. Neither is
 * --zouma-color-primary or --zouma-color-primary-dark, for the reason given on
 * the dialog buttons below: wearing either on hover is exactly what the leak
 * this reset exists to stop looks like. */
button.zouma-cookie-btn:hover,
button.zouma-cookie-btn:focus-visible {
  background: #c0c0c0;
  color: #042634;
}

button.zouma-cookie-btn:focus-visible {
  outline: 2px solid var(--zouma-cyan);
  outline-offset: 3px;
}

/* 44 of the client's 68, so the cookie sits on the tile at the proportion they
 * drew it. zouma_icon() stamps width="32" height="32" onto the element; this
 * overrides both. */
button.zouma-cookie-btn .zouma-icon--cookie {
  width: calc(var(--zouma-cookie-size) * 44 / 68);
  height: calc(var(--zouma-cookie-size) * 44 / 68);
}

/* The dialog --------------------------------------------------------------- */

.zouma-cookie {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(4, 26, 32, 0.72);
  /* The from-pose, and only the from-pose. The transition lives on .is-open
   * below: a from-state and its transition declared together animate the
   * element *into* the pose on the way in. Removing .is-open therefore closes
   * it instantly, which is why cookies.js can set hidden on the next frame
   * rather than waiting on a transitionend that would never arrive. */
  opacity: 0;
}

/* Outranks the display: grid above, which would otherwise hold a hidden dialog
 * on screen. */
.zouma-cookie[hidden] {
  display: none;
}

.zouma-cookie.is-open {
  opacity: 1;
  transition: opacity 0.24s ease;
}

.zouma-cookie__panel {
  position: relative;
  /* Grid items carry min-width: auto and refuse to shrink below their content,
   * so one long unbroken word in the body copy would push this past the
   * viewport, where .zouma-site clips it with no scrollbar to reveal it. */
  min-width: 0;
  /* The gutter is in the width, not in padding: padding on a scroll container
   * does not clip what overflows it, so a max-width of 100% plus a padded
   * parent would still let the panel reach the screen edge. */
  max-width: min(32rem, calc(100vw - 2rem));
  max-height: 100%;
  /* auto on both axes rather than overflow-y alone: overflow-y: auto would
   * force the x axis to auto anyway, and overflow-x: hidden is the form that
   * turns an element into a scroll container and kills sticky descendants.
   * Nothing here is sticky, and the max-width above means the x axis never
   * actually has anything to scroll. */
  overflow: auto;
  padding: 1.75rem 1.5rem 1.5rem;
  background: var(--zouma-color-bg);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.36);
  text-align: start;
  transform: translateY(12px);
}

.zouma-cookie.is-open .zouma-cookie__panel {
  transform: none;
  transition: transform 0.24s ease;
}

.zouma-cookie__title {
  margin-block: 0 0.75rem;
  /* Clearance for the close control, logical rather than physical: the close
   * sits at inset-inline-end, so under dir="rtl" it moves to the other side
   * and a right margin here would hold the gap open on the wrong one. */
  margin-inline: 0 2.25rem;
  color: var(--zouma-color-text);
  font-family: var(--zouma-font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
}

.zouma-cookie__text {
  margin: 0 0 0.75rem;
  color: var(--zouma-color-muted);
  font-family: var(--zouma-font-body);
  font-size: var(--zouma-size-body);
  line-height: var(--zouma-leading);
}

/* The panel's own voice, not a third paragraph of body copy: it is an
 * instruction about this dialog rather than more of what the CMS has to say
 * about cookies. Hence the text colour instead of the muted one above it, the
 * heavier weight, and a rule at the inline start — logical, so it mirrors under
 * dir="rtl" — which marks it as the panel speaking to anyone skimming past the
 * wording.
 *
 * Hidden unless cookies.js found nothing on file. The class it keys off sits on
 * the dialog, which is what lets one toggle there drive this and the
 * aria-describedby together. */
.zouma-cookie__required {
  display: none;
  margin: 0;
  padding-inline-start: 0.75rem;
  border-inline-start: 3px solid var(--zouma-cyan);
  color: var(--zouma-color-text);
  font-family: var(--zouma-font-body);
  font-size: var(--zouma-size-body);
  font-weight: 600;
  line-height: var(--zouma-leading);
  text-align: start;
}

.zouma-cookie.is-required .zouma-cookie__required {
  display: block;
}

.zouma-cookie__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* Same reset as the floating button, and for the same reason: without the
 * element in the selector button:hover repaints both of these the theme's
 * primary colour on the way past. */
button.zouma-cookie__btn {
  flex: 1 1 10rem;
  /* Flex items have the same min-width: auto floor as grid items; a long
   * label would otherwise stop the pair wrapping and widen the panel. */
  min-width: 0;
  width: auto;
  padding: 0.7rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--zouma-font-body);
  font-size: var(--zouma-size-body);
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* The hover tones deliberately avoid --zouma-color-primary and
 * --zouma-color-primary-dark. Those are the two colours style.css paints a
 * bare button with, so a cookie button wearing either on hover would be
 * indistinguishable from the leak these resets exist to stop — by eye and in a
 * computed-style check alike. #042634 is the theme's own deep ink, already the
 * header and footer ground. */
button.zouma-cookie__btn--accept {
  background: var(--zouma-cyan);
  color: #042634;
}

button.zouma-cookie__btn--accept:hover,
button.zouma-cookie__btn--accept:focus-visible {
  background: #042634;
  color: #fff;
}

button.zouma-cookie__btn--reject {
  background: transparent;
  color: var(--zouma-color-text);
  border-color: var(--zouma-color-border);
}

button.zouma-cookie__btn--reject:hover,
button.zouma-cookie__btn--reject:focus-visible {
  background: var(--zouma-blue-tint);
  color: var(--zouma-color-text);
  border-color: var(--zouma-cyan);
}

/* The stored choice, so "update your preferences at any time" is true of the
 * dialog rather than only of the copy. Set by cookies.js alongside
 * aria-pressed, which is what carries it to a screen reader. An inset ring
 * rather than a fill, so it reads on the cyan button and the white one. */
button.zouma-cookie__btn.is-current {
  box-shadow: inset 0 0 0 2px #042634;
}

button.zouma-cookie__btn:focus-visible {
  outline: 2px solid var(--zouma-cyan);
  outline-offset: 2px;
}

/* The close control is an empty button with an aria-label — there is no text
 * node to style, so the cross is drawn here as two bars. The third element
 * that needs the style.css reset, and the one easiest to forget. */
button.zouma-cookie__close {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-end: 0.75rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  color: var(--zouma-color-muted);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.18s ease, color 0.18s ease;
}

button.zouma-cookie__close::before,
button.zouma-cookie__close::after {
  content: "";
  grid-area: 1 / 1;
  width: 15px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

button.zouma-cookie__close::before {
  transform: rotate(45deg);
}

button.zouma-cookie__close::after {
  transform: rotate(-45deg);
}

button.zouma-cookie__close:hover,
button.zouma-cookie__close:focus-visible {
  background: var(--zouma-blue-tint);
  color: var(--zouma-color-text);
}

button.zouma-cookie__close:focus-visible {
  outline: 2px solid var(--zouma-cyan);
  outline-offset: 2px;
}

/* No way out but an answer, so there is nothing for a close control to do. One
 * declaration takes it out of sight, out of the accessibility tree and out of
 * the tab ring at once: focusable() in cookies.js drops anything whose
 * offsetParent is null, which is every display: none element. visibility:
 * hidden or opacity: 0 would each have left it tabbable and still named, and
 * needed a tabindex and an aria-hidden alongside to say the same thing. */
.zouma-cookie.is-required .zouma-cookie__close {
  display: none;
}

/* The settings page -------------------------------------------------------- */

/* /cookie-settings/, rendered by page-cookie-settings.php from the same CMS copy
 * the dialog reads: the title, both paragraphs and the same two choices, as a
 * page the footer and a privacy notice can link to. The dialog is unchanged and
 * the footer button still opens it on every page, including this one — the two
 * surfaces answer the same question, and cookies.js keeps whichever of them is
 * in the document showing the same stored choice.
 *
 * The page is a destination, so it is laid out as one: a reading column with the
 * controls on the same left edge as the copy, not a notice centred in a screen
 * of nothing. */

.zouma-cookiepage__inner {
  /* The opt-out from the floor at the foot of main.css. `main > section` is
   * (0,0,2) and gives every band min-height: 100svh with display: grid and
   * align-content: center; a title, two paragraphs and two buttons under that
   * floor sit marooned in the middle of an empty screen, and the footer is
   * pushed a screenful down. A class outranks that selector, so the opt-out is
   * stated rather than implied — the same way .zouma-whois and .zouma-stats
   * state it. Both halves are needed: dropping only the min-height leaves the
   * grid centring behind. */
  min-height: auto;
  display: block;
  padding-block: clamp(3rem, calc(6 * var(--zouma-vw)), 5rem);
  /* The same gutter .zouma-shell carries, so this page's column lines up with
   * every other page's. Measured without it the copy ran edge to edge at 360. */
  padding-inline: clamp(1rem, calc(3 * var(--zouma-vw)), 2.5rem);
  background: var(--zouma-color-bg);
}

/* One measure and one left edge for every row, so the title, the copy, the
 * buttons and the status line read as a single block. Stated on the children
 * because the interface has no inner wrapper to hang it on — and the section
 * keeps its full width, so a background set on it still runs edge to edge. */
.zouma-cookiepage__title,
.zouma-cookiepage__text,
.zouma-cookiepage__actions,
.zouma-cookiepage__status {
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
}

/* The same clamp the legal pages give their title, so the utility pages share a
 * scale; the brand's one-size-for-every-section-heading rule is about h2s in a
 * composition, and this is a page name. */
.zouma-cookiepage__title {
  margin-block: 0 1rem;
  color: var(--zouma-color-text);
  font-family: var(--zouma-font-heading);
  font-size: clamp(2rem, 1.3rem + calc(2.2 * var(--zouma-vw)), 3.25rem);
  font-weight: 700;
  line-height: 1.15;
}

/* The lede size rather than the 14px body size the dialog uses. The dialog's
 * copy is read in a 32rem panel at a glance; here it is the page's content and
 * carries the measure above, where 14px would run too long a line. */
.zouma-cookiepage__text {
  margin-block: 0 0.875rem;
  color: var(--zouma-color-muted);
  font-family: var(--zouma-font-body);
  font-size: var(--zouma-size-lede);
  line-height: var(--zouma-leading);
  /* Start, not left: the copy is translated, and under dir="rtl" this edge has
   * to follow the column rather than stay on the left of the screen. */
  text-align: start;
}

.zouma-cookiepage__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: 2rem;
}

/* The third reset of style.css's bare-button paint in this sheet, and the same
 * reason as the other two: a plain .zouma-cookiepage__btn rule loses to
 * `button:hover`, which would repaint both of these --zouma-color-primary-dark
 * on the way past. The element is in the selector here and in every state
 * below. */
button.zouma-cookiepage__btn {
  /* Sized by its label, not stretched across the 34rem measure — but flex items
   * carry the same min-width: auto floor as grid items, so a long translated
   * label would refuse to shrink and push the pair past the column. */
  flex: 0 1 auto;
  min-width: 0;
  width: auto;
  padding: 0.8rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--zouma-font-body);
  font-size: var(--zouma-size-body);
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* The hover tones avoid --zouma-color-primary and --zouma-color-primary-dark
 * for the reason given on the dialog buttons: those two are what the leak looks
 * like, so a cookie control wearing either on hover cannot be told apart from
 * the bug these resets exist to stop — by eye or in a computed-style check.
 *
 * Written out rather than grouped with the dialog's selectors. The two surfaces
 * share a look today, but they sit on different grounds and the client may want
 * the page's pair to grow without the panel's pair following. */
button.zouma-cookiepage__btn--accept {
  background: var(--zouma-cyan);
  color: #042634;
}

button.zouma-cookiepage__btn--accept:hover,
button.zouma-cookiepage__btn--accept:focus-visible {
  background: #042634;
  color: #fff;
}

button.zouma-cookiepage__btn--reject {
  background: transparent;
  color: var(--zouma-color-text);
  border-color: var(--zouma-color-border);
}

button.zouma-cookiepage__btn--reject:hover,
button.zouma-cookiepage__btn--reject:focus-visible {
  background: var(--zouma-blue-tint);
  color: var(--zouma-color-text);
  border-color: var(--zouma-cyan);
}

/* The stored choice. An inset ring rather than a fill, so it reads on the cyan
 * button and on the outlined one alike; cookies.js sets aria-pressed alongside
 * it, which is what carries the same state to a screen reader. */
button.zouma-cookiepage__btn.is-current {
  box-shadow: inset 0 0 0 2px #042634;
}

button.zouma-cookiepage__btn:focus-visible {
  outline: 2px solid var(--zouma-cyan);
  outline-offset: 2px;
}

/* The receipt for the choice on file, filled and unhidden by cookies.js and
 * left hidden while nothing is stored. Tinted rather than set as another
 * paragraph, so it reads as the page answering back rather than as more copy. */
.zouma-cookiepage__status {
  margin-block: 1.25rem 0;
  padding: 0.75rem 1rem;
  background: var(--zouma-blue-tint);
  border-radius: 10px;
  color: var(--zouma-color-text);
  font-family: var(--zouma-font-body);
  font-size: var(--zouma-size-body);
  line-height: var(--zouma-leading);
  text-align: start;
}

/* Narrow viewports. One choice per row below this width: side by side the two
 * labels wrap to several lines each and the pair stops reading as a choice,
 * which is the same thing that happens in the dialog at the same width. */
@media (max-width: 480px) {
  button.zouma-cookiepage__btn {
    flex: 1 1 100%;
  }
}

/* Motion ------------------------------------------------------------------- */

/* style.css already pins every transition-duration on the page to 0.01ms under
 * this query, so what is left to do here is the pose itself: the panel's
 * travel comes off in both states, which leaves the dialog appearing and
 * disappearing on opacity alone and nothing anywhere that moves. */
@media (prefers-reduced-motion: reduce) {
  .zouma-cookie__panel,
  .zouma-cookie.is-open .zouma-cookie__panel {
    transform: none;
    transition: none;
  }
}

/* Nothing in this sheet styles a footer element any more. The bottom row went
 * back to main.css's own two-item layout the moment the tile left it. */

/* Narrow viewports --------------------------------------------------------- */

@media (max-width: 480px) {
  :root {
    --zouma-cookie-size: 48px;
  }

  .zouma-cookie__panel {
    padding: 1.5rem 1.25rem 1.25rem;
  }

  /* One per row below this width: side by side the two labels wrap to three
   * lines each and the pair stops reading as a choice. */
  button.zouma-cookie__btn {
    flex: 1 1 100%;
  }
}