/* ============================================================
   Consent styling — Rosie Rapp
   Themes vanilla-cookieconsent (#cc-main) and iframemanager
   (--im-* variables) to match the editorial look of the site:
   cream paper, hairline rules, Playfair headings, Barlow
   Condensed pill buttons, terracotta accents.

   Must be linked AFTER cookieconsent.css and iframemanager.css.

   The site's design tokens live in each page's inline <style>.
   index.html carries a slightly smaller token set than the rest,
   so every var() below has a literal fallback and the theme
   renders correctly on every page either way.
   ============================================================ */


/* ============================================================
   1. Consent banner and preferences dialog
   ============================================================ */
#cc-main {
  --cc-font-family: var(--sans, 'Open Sans', system-ui, sans-serif);

  --cc-bg: var(--paper, #FBF9F8);
  --cc-primary-color: var(--ink, #534F51);
  --cc-secondary-color: rgba(83, 79, 81, .82);

  /* Both "Accept all" and "Reject all" use this one style.
     equalWeightButtons:true drops the --secondary class in the
     banner, so the two choices are visually identical — which is
     what makes the banner defensible. Do not give either one a
     louder treatment. */
  --cc-btn-primary-bg: var(--ink, #534F51);
  --cc-btn-primary-color: var(--cream, #F5F2F1);
  --cc-btn-primary-border-color: var(--ink, #534F51);
  --cc-btn-primary-hover-bg: var(--apricot, #EDA57D);
  --cc-btn-primary-hover-color: var(--ink-deep, #353233);
  --cc-btn-primary-hover-border-color: var(--apricot, #EDA57D);

  /* Ghost variant — only used inside the preferences dialog */
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: var(--ink, #534F51);
  --cc-btn-secondary-border-color: var(--ink-faint, #423D3F);
  --cc-btn-secondary-hover-bg: var(--blush, #E6D8CF);
  --cc-btn-secondary-hover-color: var(--ink-deep, #353233);
  --cc-btn-secondary-hover-border-color: var(--tan, #A98570);

  --cc-separator-border-color: rgba(83, 79, 81, .16);
  --cc-section-category-border: rgba(83, 79, 81, .16);

  --cc-toggle-on-bg: var(--terracotta, #C4633C);
  --cc-toggle-off-bg: #B3ABA6;
  --cc-toggle-on-knob-bg: #FFFFFF;
  --cc-toggle-off-knob-bg: #FFFFFF;
  --cc-toggle-readonly-bg: var(--dune, #E7DCD3);
  --cc-toggle-readonly-knob-bg: #FFFFFF;
  --cc-toggle-readonly-knob-icon-color: var(--tan, #A98570);
  --cc-toggle-enabled-icon-color: var(--cream, #F5F2F1);
  --cc-toggle-disabled-icon-color: var(--cream, #F5F2F1);

  --cc-cookie-category-block-bg: rgba(83, 79, 81, .04);
  --cc-cookie-category-block-border: rgba(83, 79, 81, .12);
  --cc-cookie-category-block-hover-bg: rgba(83, 79, 81, .07);
  --cc-cookie-category-block-hover-border: rgba(196, 99, 60, .45);
  --cc-cookie-category-expanded-block-bg: rgba(83, 79, 81, .03);
  --cc-cookie-category-expanded-block-hover-bg: rgba(83, 79, 81, .07);

  --cc-footer-bg: var(--sand, #EFE7E1);
  --cc-footer-color: rgba(83, 79, 81, .8);
  --cc-footer-border-color: rgba(83, 79, 81, .14);

  --cc-overlay-bg: rgba(38, 34, 31, .58);
  --cc-modal-border-radius: 6px;
  /* The library reuses this one variable for the buttons AND for the
     category blocks (.pm__section, .pm__section--toggle and the expanded
     description wrapper). A pill value here turns those blocks into
     lozenges and pushes the expanded text outside its own box, so keep it
     square-ish and give the buttons their pill shape explicitly below. */
  --cc-btn-border-radius: 6px;
  --cc-pm-toggle-border-radius: 999px;

  --cc-link-color: var(--terracotta, #C4633C);

  --cc-webkit-scrollbar-bg: rgba(83, 79, 81, .22);
  --cc-webkit-scrollbar-hover-bg: rgba(83, 79, 81, .4);
}

/* Headings in the display serif, like the rest of the site */
#cc-main .cm__title,
#cc-main .pm__title {
  font-family: var(--serif, Georgia, serif);
  font-weight: 400;
  letter-spacing: -.02em;
  font-size: 1.32em;
  line-height: 1.14;
}
#cc-main .pm__section-title {
  font-family: var(--cond, 'Barlow Condensed', sans-serif);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .92em;
}
#cc-main .cm__desc,
#cc-main .pm__section-desc {
  font-weight: 300;
  line-height: 1.7;
}

/* Buttons in the site's pill style. Applied here rather than through
   --cc-btn-border-radius, which the category blocks also read. */
#cc-main .cm__btn,
#cc-main .pm__btn {
  font-family: var(--cond, 'Barlow Condensed', sans-serif);
  font-weight: 500;
  font-size: .92em;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 1em 1.6em;
  border-radius: 999px;
  transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}
#cc-main .pm__close-btn {
  border-radius: 999px;
}

/* Paper edge rather than a drop shadow, to match the site's cards */
#cc-main .cm,
#cc-main .pm {
  border: 1px solid rgba(83, 79, 81, .16);
  box-shadow: 0 40px 80px -50px rgba(38, 34, 31, .55);
}

/* The library ships a dark-mode block; this site is light only,
   so pin the scheme and stop the browser from restyling controls. */
#cc-main { color-scheme: light; }


/* ============================================================
   2. Booking calendar (Google Calendar, via iframemanager)
   Nothing is fetched from Google until the visitor asks for it —
   before that this is a local placeholder only.
   ============================================================ */
/* Wide enough that Google shows a useful run of days at once — it drops
   day columns as the frame narrows — while staying inside the page's
   content measure. */
.booking-wrap {
  max-width: 1080px;
  margin-inline: auto;
}

.booking-frame[data-service] {
  /* iframemanager's own colours, restated in the site palette */
  --im-font-family: var(--sans, 'Open Sans', system-ui, sans-serif);
  --im-bg: var(--paper, #FBF9F8);
  --im-color: var(--ink-soft, #1E1B1C);
  --im-link-color: var(--terracotta, #C4633C);
  --im-link-hover-color: var(--tan, #A98570);

  --im-btn-color: var(--cream, #F5F2F1);
  --im-btn-bg: var(--ink, #534F51);
  --im-btn-hover-bg: var(--apricot, #EDA57D);
  --im-btn-active-box-shadow: 0 0 0 .25em rgba(196, 99, 60, .28);

  --im-btn-s-color: var(--ink, #534F51);
  --im-btn-s-bg: transparent;
  --im-btn-s-hover-bg: var(--blush, #E6D8CF);
  --im-btn-s-active-bg: var(--dune, #E7DCD3);

  display: block;
  width: 100%;
  position: relative;
  /* Unloaded, this only holds a short notice and two buttons, so it
     stays compact. It grows to the calendar's real height below, on
     .c-h-n. The jump only ever happens right after the visitor has
     clicked to load, so there is no surprise reflow. */
  height: 460px;
  min-height: 460px;
  border-radius: 6px;
  overflow: hidden;
  /* Dashed while it is still a placeholder, matching the site's
     other "not filled in yet" slots. Turns solid once loaded. */
  border: 1.5px dashed var(--tan, #A98570);
  transition: border-color .4s ease;
}

/* Kill the 16:9 spacer. Higher specificity than div[data-service]:before,
   and !important as a belt-and-braces guard. */
.booking-frame[data-service]::before {
  display: none !important;
  padding-top: 0 !important;
}

/* c-h-n is set by iframemanager once the notice is dismissed and the
   iframe is in place — swap to a plain solid frame, and give the
   calendar the height it needs so nothing scrolls inside the iframe.
   This replaces iframemanager's 16:9 ratio, which crops it badly. */
.booking-frame[data-service].c-h-n {
  height: 720px;
  min-height: 720px;
  border-style: solid;
  border-color: rgba(83, 79, 81, .16);
  background: #FFFFFF;
}

.booking-frame[data-service] iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #FFFFFF;
}

/* ---- The waiting moment -------------------------------------
   Google answers in roughly two to three seconds, and until it
   does the iframe is held at opacity:0 — so the frame is an empty
   rectangle with nothing to say for itself.

   iframemanager already covers exactly that window: it puts a
   spinner (.c-ld) in the frame when loading starts (.c-h-n) and
   takes it away again when the iframe fires load (.c-h-b). Its own
   spinner is white, meant for the dark default background this
   theme replaces with paper — white on white, 1.25em wide, down in
   the corner. Restated here as a captioned panel in the middle of
   the frame, which is where someone who just clicked is looking.

   Only the appearance is changed. The two states above still do
   the showing and hiding, so nothing new has to know when the
   calendar is ready. */
.booking-frame[data-service] .cll .c-ld {
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.15em;
  /* Covers the blank iframe rather than sitting beside it. Both
     are z-index:1 in the library, and this one has to win. */
  z-index: 2;
  background: var(--paper, #FBF9F8);
}

/* The ring. The library's is a white 3/4 circle; this is a faint
   full circle with one terracotta quarter turning through it. */
.booking-frame[data-service] .cll .c-ld::after {
  position: static;
  order: 1;
  flex: none;
  width: 2.1em;
  height: 2.1em;
  border: 2px solid rgba(83, 79, 81, .18);
  border-top-color: var(--terracotta, #C4633C);
  /* spin is iframemanager's own keyframes, already loaded. */
}

.booking-frame[data-service] .cll .c-ld::before {
  content: "Loading the booking calendar\2026";
  order: 2;
  font-family: var(--cond, 'Barlow Condensed', sans-serif);
  font-weight: 500;
  font-size: .82em;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.4;
  text-align: center;
  color: var(--ink, #534F51);
  padding-inline: 1.25em;
}

/* Placeholder copy */
.booking-frame[data-service] .cll .c-n-t {
  max-width: 40em;
  font-size: .92em;
  line-height: 1.7;
  font-weight: 300;
}
.booking-frame[data-service] .cll .c-n-t a {
  border-bottom-color: currentColor;
}

/* Load buttons in the site's pill style. The library's own rules
   sit at (0,3,1); including .cll here puts these at (0,4,0). */
.booking-frame[data-service] .cll .c-l-b,
.booking-frame[data-service] .cll .c-la-b {
  font-family: var(--cond, 'Barlow Condensed', sans-serif);
  font-weight: 500;
  font-size: .82em;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: none;
  padding: 1.05em 1.9em;
  cursor: pointer;
}
.booking-frame[data-service] .cll .c-la-b {
  border: 1px solid var(--ink-faint, #423D3F);
}
/* The default "load" button carries a play triangle meant for video
   embeds — wrong icon for a calendar. (0,4,1) beats the library's (0,3,2). */
.booking-frame[data-service] .cll .c-l-b::before {
  display: none;
}

@media (max-width: 640px) {
  .booking-frame[data-service] {
    height: 500px;
    min-height: 500px;
  }
  /* Below ~640px the calendar stacks the date picker above the time
     list. Measured against the embed's own scrollHeight (1154px) so
     nothing scrolls inside the iframe; the rest is breathing room. */
  .booking-frame[data-service].c-h-n {
    height: 1180px;
    min-height: 1180px;
  }
  /* Side by side, the two labels wrap to three lines each in a pill.
     Stack them and let align-self:stretch make them full width. */
  .booking-frame[data-service] .cll .c-n-a {
    flex-direction: column;
  }
  .booking-frame[data-service] .cll .c-n-a button + button {
    margin-left: 0;
    margin-top: .7em;
  }
  /* The middle of a 1180px-tall frame is well past the bottom of a
     phone screen, so a centred spinner would be out of sight for
     the whole wait. Sit it near the top of the frame instead. */
  .booking-frame[data-service] .cll .c-ld {
    justify-content: flex-start;
    padding-top: clamp(4rem, 20vw, 7rem);
  }
}

/* A spinning ring is the one thing here that has to stop when
   motion is turned down. The pages set animation-duration to
   .001ms globally, which would leave this jittering rather than
   still, so the ring goes and the caption stays — it was the part
   carrying the message anyway. */
@media (prefers-reduced-motion: reduce) {
  .booking-frame[data-service] .cll .c-ld::after {
    display: none;
  }
}


/* ============================================================
   3. "Cookie settings" control in the footer
   A <button> so it reads as an action, styled to sit flush with
   the legal links beside it.
   ============================================================ */
.cookie-prefs-link {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: color .35s ease;
}
.cookie-prefs-link:hover {
  color: var(--apricot, #EDA57D);
}