/* Trafalgar Park Community Hub — the Clubhouse look (0.63.0, 6 Oct 2026)
   Loaded by lib/look.php AFTER type.css, and only while the look is "clubhouse".
   Switch it off at Appearance → Site look and this file is simply not sent.

   Where it comes from: the brand kit's round 4, "Clubhouse in the Hub's green and gold"
   (marketing/brand-kit/templates/round4.html). Same pieces, same numbers:
     · round lettering (Fredoka 700) for every heading and button
     · the sunburst: cream rays on cream for everyday, green rays on green for the big moments
     · the logo's arch, thin line and three stars as the photo's window
     · the gold price sticker
     · one green family and one gold, the website's own

   Rules this file keeps:
     1. Nothing here hides content. Every effect starts from the finished page; motion is added on
        top and is all inside `prefers-reduced-motion: no-preference`.
     2. Text never sits on a pair that was not measured. The pairs are listed beside the tokens.
     3. Hooks are Elementor element ids (`[class*="hero0001"]`), the same convention as type.css.
        An id renamed in the editor loses its styling; it never breaks the page. */

/* --- Tokens ------------------------------------------------------------------------------------ */
:root {
  /* The kit's warm cream replaces the cooler one. Green and gold do not move. */
  --cream:        #FBF4E2;
  --cream-deep:   #F5EACB;   /* alternate band */
  --cream-card:   #FFFCF3;   /* cards and the header */
  --ray-cream:    #F2E2B8;   /* sunburst rays on cream */
  --ray-green:    #2B6149;   /* sunburst rays on deep green */
  --gold-light:   #F3BE62;
  --ink-on-gold:  #1E3F30;   /* 5.38:1 on gold, 6.83:1 on gold-light */
  --head-on-dark: #FFF6E0;   /* 8.09:1 on deep green, 6.71:1 on a green ray */
  --line:         #EADDBB;
  --hairline:     #E9DDBF;

  --font-heading: "Fredoka", "Poppins", "Segoe UI", system-ui, sans-serif;
  --ls-head: -0.005em;

  /* 🔴 One number for every button corner. 12px, not a pill: Jeremy reads fully round buttons as
     machine-made (6 Oct 2026). The round lettering carries the friendliness; change this one
     value to 999px and every button on the site is a pill again. */
  --radius-btn: 12px;
  --radius-md: 16px;

  --green-tint: rgba(46, 107, 79, .08);
  --shadow-sm: 0 2px 6px rgba(36, 84, 62, .08);
  --shadow-md: 0 8px 20px rgba(36, 84, 62, .12);
  --shadow-lg: 0 16px 40px rgba(36, 84, 62, .16);

  --star: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 26 26%22%3E%3Cpath d=%22M13 0C14 8 18 12 26 13C18 14 14 18 13 26C12 18 8 14 0 13C8 12 12 8 13 0Z%22/%3E%3C/svg%3E");
}

/* Elementor and the theme each keep their own copy of the palette and the fonts. Answer them here
   instead of rewriting their settings, so switching the look off puts every value back. */
body.pan-look-clubhouse[class*="elementor-kit-"] {
  --e-global-typography-primary-font-family: "Fredoka";
  --e-global-typography-secondary-font-family: "Fredoka";
  --e-global-typography-accent-font-family: "Fredoka";
  --e-global-typography-primary-letter-spacing: -0.2px;
  --e-global-typography-secondary-letter-spacing: -0.1px;
  --e-global-typography-secondary-font-weight: 700;
  --e-global-color-creambg: #FBF4E2;
  --e-global-color-creamdp: #F5EACB;
  --e-global-color-hairline: #E9DDBF;
  background-color: var(--cream);
}

body.pan-look-clubhouse {
  --theme-palette-color-5: #E9DDBF;
  --theme-palette-color-6: #F5EACB;
  --theme-palette-color-7: #FBF4E2;
  background-color: var(--cream);
}

/* --- Lettering ---------------------------------------------------------------------------------- */
.pan-look-clubhouse :is(h1, h2, h3, h4, h5, h6),
.pan-look-clubhouse .elementor-heading-title {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: var(--ls-head);
}

.pan-look-clubhouse :is(h1, h2),
.pan-look-clubhouse .elementor-widget-heading :is(h1, h2).elementor-heading-title {
  color: var(--deep-green, #24543E);
}

.pan-look-clubhouse h1,
.pan-look-clubhouse .elementor-widget-heading h1.elementor-heading-title {
  font-size: clamp(2.3rem, 1.6rem + 3vw, 3.4rem);
  line-height: 1.06;
}

.pan-look-clubhouse h2,
.pan-look-clubhouse .elementor-widget-heading h2.elementor-heading-title {
  font-size: clamp(1.85rem, 1.45rem + 1.7vw, 2.5rem);
  line-height: 1.12;
}

/* The logo's star marks each section heading. Drawn with a mask so it takes the gold from one
   token and scales with the heading. */
.pan-look-clubhouse .elementor-widget-heading h2.elementor-heading-title::before {
  content: "";
  display: inline-block;
  width: .5em;
  height: .5em;
  margin-right: .34em;
  vertical-align: .12em;
  background: var(--warm-amber, #E8A33D);
  -webkit-mask: var(--star) center / contain no-repeat;
  mask: var(--star) center / contain no-repeat;
}

/* --- Buttons: flat, gold, one corner ------------------------------------------------------------ */
.pan-look-clubhouse .elementor-widget-button .elementor-button,
.pan-look-clubhouse .entry-content .elementor-button,
.pan-look-clubhouse .ct-button,
.pan-look-clubhouse .wpbc_button,
.pan-look-clubhouse .wpbc_button_light,
.pan-look-clubhouse .entry-content button[type="submit"],
.pan-look-clubhouse .entry-content input[type="submit"] {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: .005em;
  border-radius: var(--radius-btn);
  box-shadow: none;
  color: var(--ink-on-gold);
}

.pan-look-clubhouse .elementor-widget-button .elementor-button,
.pan-look-clubhouse .entry-content .elementor-button,
.pan-look-clubhouse .ct-header-cta .ct-button {
  background-color: var(--warm-amber, #E8A33D);
  /* The hover is a lighter gold drawn across from the left. Darkening instead measured 4.46:1
     under the label, just short; lightening measures 6.83:1. */
  background-image: linear-gradient(var(--gold-light), var(--gold-light));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size .28s var(--ease, ease), transform .12s var(--ease, ease);
}

.pan-look-clubhouse .elementor-widget-button .elementor-button:is(:hover, :focus-visible),
.pan-look-clubhouse .entry-content .elementor-button:is(:hover, :focus-visible),
.pan-look-clubhouse .ct-header-cta .ct-button:is(:hover, :focus-visible) {
  background-color: var(--warm-amber, #E8A33D);
  background-size: 100% 100%;
  color: var(--ink-on-gold);
  transform: none;
  box-shadow: none;
  filter: none;
}

.pan-look-clubhouse .elementor-widget-button .elementor-button:active,
.pan-look-clubhouse .entry-content .elementor-button:active,
.pan-look-clubhouse .ct-button:active {
  transform: translateY(1px);
}

/* The same label colour inside the dark bands, where type.css pins it with !important. */
.pan-look-clubhouse .e-con[class*="ctasec"] .elementor-button,
.pan-look-clubhouse .e-con[class*="cta001"] .elementor-button,
.pan-look-clubhouse .e-con[class*="ctasec"] .elementor-button :is(span, p),
.pan-look-clubhouse .e-con[class*="cta001"] .elementor-button :is(span, p),
.pan-look-clubhouse .e-con[class*="hero0001"] .elementor-button,
.pan-look-clubhouse .e-con[class*="hero0001"] .elementor-button :is(span, p) {
  color: var(--ink-on-gold) !important;
}

/* Fluent Forms prints its own button rules in the page body, after every stylesheet, which is why
   type.css uses !important on this one element. Same element, same reason. */
.pan-look-clubhouse .frm-fluent-form .ff-btn.ff-btn-submit {
  font-weight: 700 !important;
  border-radius: var(--radius-btn) !important;
  color: var(--ink-on-gold) !important;
  box-shadow: none;
}

/* --- Header ------------------------------------------------------------------------------------- */
body.pan-look-clubhouse[data-header] {
  --header-height: 92px;
}

/* The header stays with you down the page, so "Book" is always one tap away. Plain `position:
   sticky`, no script: tested by scrolling 1200px at 1440 and at 390 and reading where the header
   was (0 both times). Anything a link jumps to stops below it, not under it. */
.pan-look-clubhouse #header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 60;
}

html:has(body.pan-look-clubhouse) {
  scroll-padding-top: calc(var(--pan-header, 92px) + 20px);
}

@media (max-width: 999px) {
  html:has(body.pan-look-clubhouse) { --pan-header: 70px; }
}

/* On a phone the admin bar scrolls away with the page, so a signed-in committee member's header
   must not leave a gap for it. */
@media (max-width: 600px) {
  .pan-look-clubhouse #header { top: 0; }
}

.pan-look-clubhouse #header [data-row*="middle"] {
  --height: 92px;
  background-color: var(--cream-card);
  border-bottom: 1px solid var(--hairline);
}

.pan-look-clubhouse #header [data-id="logo"] .site-logo-container {
  --logo-max-height: 64px;
}

.pan-look-clubhouse #header [data-id="logo"] .site-title {
  --theme-font-family: var(--font-heading);
  --theme-font-weight: 700;
  --theme-font-size: 1.5rem;
  --theme-line-height: 1.1;
  --theme-link-initial-color: var(--deep-green, #24543E);
  --theme-link-hover-color: var(--hub-green, #2E6B4F);
  font-family: var(--font-heading);
  letter-spacing: -.005em;
}

.pan-look-clubhouse #header [data-id="menu"] > ul > li > a {
  --theme-font-size: 13px;
  --theme-link-initial-color: var(--charcoal, #2B2B2B);
  --theme-link-hover-color: var(--deep-green, #24543E);
  --theme-link-active-color: var(--deep-green, #24543E);
  letter-spacing: .07em;
  position: relative;
}

.pan-look-clubhouse .ct-header-cta .ct-button {
  padding: 12px 24px;
  font-size: 1rem;
  --theme-button-text-initial-color: var(--ink-on-gold);
  --theme-button-text-hover-color: var(--ink-on-gold);
}

/* Small laptops. The theme folds menu items it cannot fit into "More", and measured at 1200px the
   new lettering folded two that the old look showed. Tighter here, so nothing folds that did not
   fold before: counted at 1000, 1024, 1100, 1200, 1280 and 1366 in both looks. */
@media (min-width: 1000px) and (max-width: 1279px) {
  .pan-look-clubhouse #header [data-id="logo"] .site-title { --theme-font-size: 1.22rem; }
  .pan-look-clubhouse #header [data-id="logo"] .site-logo-container { --logo-max-height: 56px; }
  .pan-look-clubhouse #header [data-id="menu"] { --menu-items-spacing: 18px; }
  .pan-look-clubhouse #header [data-id="menu"] > ul > li > a { --theme-font-size: 12px; letter-spacing: .04em; }
  .pan-look-clubhouse .ct-header-cta .ct-button { padding: 11px 18px; }
  .pan-arch--hero { --aw: 330px; --gap: 20px; }
}

@media (max-width: 999px) {
  body.pan-look-clubhouse[data-header] { --header-height: 70px; }
  .pan-look-clubhouse #header [data-row*="middle"] { --height: 70px; }
  .pan-look-clubhouse #header [data-id="logo"] .site-logo-container { --logo-max-height: 44px; }
}

/* Phones. Measured, not eyeballed: with the wider emblem in place the name was left a 90px column
   and broke onto FOUR lines, one word each. It needs 7.4em to sit as "Trafalgar Park / Community
   Hub", so it is given exactly that and the button beside it gives up the room. */
@media (max-width: 600px) {
  .pan-look-clubhouse #header [data-id="logo"] .site-title {
    --theme-font-size: 15px;
    display: block;
    width: 7.4em;
    font-size: 15px;
    line-height: 1.12;
  }

  .pan-look-clubhouse #header [data-id="logo"] .site-logo-container { --logo-max-height: 40px; }
  .pan-look-clubhouse #header .site-branding { gap: 10px; }
  .pan-look-clubhouse .ct-header-cta .ct-button { padding: 11px 16px; }
}

@media (max-width: 370px) {
  .pan-look-clubhouse #header [data-id="logo"] .site-title { --theme-font-size: 14px; font-size: 14px; }
  .pan-look-clubhouse .ct-header-cta .ct-button { padding: 11px 12px; }
}

/* The phone menu was a near-black sheet. It is the Hub's green now; every link state on it is
   already set for a dark ground in type.css (white at rest, pale gold on hover, a gold bar on the
   page you are on). White on this green measures above 10:1. */
body.pan-look-clubhouse #offcanvas .ct-panel-inner {
  background-color: rgba(27, 67, 49, .985);
}

/* 48px rows: they measured 43px, a pixel under the 44 a thumb needs. */
.pan-look-clubhouse #offcanvas [data-id="mobile-menu"] a {
  font-family: var(--font-heading);
  min-height: 48px;
}

/* --- The sunburst ------------------------------------------------------------------------------- */

/* Home hero: the "green starburst". The photograph moves out of the background and into the arch
   beside the words (lib/look.php prints it), so the words sit on plain green, not on a picture. */
.pan-look-clubhouse .elementor .elementor-element.e-con[class*="hero0001"] {
  --sun-x: 74%;
  --sun-y: 64%;
  background-image: none;
  background-color: var(--deep-green, #24543E);
  overflow: hidden;
  min-height: clamp(540px, 76vh, 740px);
  --padding-top: 72px;
  --padding-bottom: 72px;
}

/* The rays: one square of stripes centred on the point behind the arch. On a wide screen it turns,
   very slowly (see Motion). The square is sized to reach the hero's right-hand corners; the left
   third is plain green anyway, under the words. */
.pan-look-clubhouse .e-con[class*="hero0001"]::before {
  content: "";
  position: absolute;
  inset: auto;
  left: var(--sun-x);
  top: var(--sun-y);
  width: clamp(1100px, 104vw, 2000px);
  height: clamp(1100px, 104vw, 2000px);
  margin: 0;
  translate: -50% -50%;
  background: repeating-conic-gradient(from -3deg, var(--ray-green) 0deg 6deg, transparent 6deg 12deg);
  opacity: 1;
  z-index: 0;
  pointer-events: none;
}

/* …and a plain-green fade over them where the words are. */
.pan-look-clubhouse .e-con[class*="hero0001"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(98deg, #24543E 0%, #24543E 26%, rgba(36, 84, 62, .72) 44%, rgba(36, 84, 62, 0) 66%);
}

.pan-look-clubhouse .e-con[class*="hero0001"] > .e-con-inner {
  position: relative;
  z-index: 1;
  align-items: center;
  justify-content: space-between;
}

.pan-look-clubhouse .elementor .elementor-element.e-con[class*="herocol1"] {
  --width: auto;
  flex: 1 1 0;
  min-width: 0;
  max-width: 640px;
}

.pan-look-clubhouse .e-con[class*="hero0001"] h1 {
  color: var(--head-on-dark);
  font-size: clamp(2.35rem, 1.3rem + 3.6vw, 3.7rem);
  line-height: 1.03;
  letter-spacing: -.01em;
}

.pan-look-clubhouse .e-con[class*="hero0001"] .elementor-widget-heading:first-of-type .elementor-heading-title {
  font-family: var(--font-body, "Lato", sans-serif);
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--amber-on-dark, #F7D9AC);
}

.pan-look-clubhouse .e-con[class*="hero0001"] .pan-hero-alt a {
  font-family: var(--font-heading);
  font-weight: 700;
}

/* --- The arch ----------------------------------------------------------------------------------- */
.pan-arch {
  --aw: 380px;          /* the window's width */
  --gap: 22px;          /* window to line */
  --arch-line: var(--head-on-dark);
  --arch-ground: var(--deep-green, #24543E);
  position: relative;
  flex: 0 0 auto;
  /* It is printed before the words it sits beside (see lib/look.php); this puts it after them. */
  order: 2;
  width: calc(var(--aw) + var(--gap) * 2);
  margin: 0;
  padding: var(--gap) var(--gap) 0;
  box-sizing: border-box;
  z-index: 1;
}

.pan-arch-win {
  display: block;
  width: var(--aw);
  aspect-ratio: 38 / 46;
  overflow: hidden;
  border-radius: calc(var(--aw) / 2) calc(var(--aw) / 2) 18px 18px;
  background: var(--hub-green, #2E6B4F);
  box-shadow: 0 22px 44px rgba(12, 34, 24, .34);
}

.pan-arch-win .pan-arch-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 38% 50%;
}

.pan-arch-line {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 64%;
  box-sizing: border-box;
  border: 4px solid var(--arch-line);
  border-bottom: 0;
  border-radius: calc(var(--aw) / 2 + var(--gap)) calc(var(--aw) / 2 + var(--gap)) 0 0;
  pointer-events: none;
}

.pan-star {
  position: absolute;
  z-index: 1;
  width: 32px;
  height: 32px;
  color: var(--warm-amber, #E8A33D);
  pointer-events: none;
}

.pan-star svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* A disc of the ground colour behind each star, so the line stops short of it as it does in the logo. */
.pan-star::before {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: -1;
  border-radius: 50%;
  background: var(--arch-ground);
}

.pan-star--top { left: 50%; top: 2px; translate: -50% -50%; }
.pan-star--l   { left: 2px; top: 64%; translate: -50% -50%; }
.pan-star--r   { right: 2px; top: 64%; translate: 50% -50%; }

@media (min-width: 1200px) {
  .pan-arch--hero { --aw: 420px; --gap: 24px; }
}

@media (max-width: 999px) {
  .pan-arch--hero { --aw: 290px; --gap: 18px; }
  .pan-star { width: 26px; height: 26px; }
}

/* Phones: the words first, then the window, centred. The sun moves down behind it. */
@media (max-width: 767px) {
  .pan-look-clubhouse .elementor .elementor-element.e-con[class*="hero0001"] {
    --sun-x: 50%;
    --sun-y: 78%;
    --padding-top: 44px;
    --padding-bottom: 48px;
    min-height: 0;
  }

  .pan-look-clubhouse .e-con[class*="hero0001"]::before {
    width: 1500px;
    height: 1500px;
  }

  .pan-look-clubhouse .e-con[class*="hero0001"]::after {
    background: linear-gradient(to bottom, #24543E 0%, #24543E 34%, rgba(36, 84, 62, .6) 52%, rgba(36, 84, 62, 0) 70%);
  }

  .pan-look-clubhouse .e-con[class*="hero0001"] > .e-con-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .pan-look-clubhouse .elementor .elementor-element.e-con[class*="herocol1"] {
    flex: 0 0 auto;
    max-width: none;
  }

  .pan-arch--hero {
    --aw: min(68vw, 300px);
    --gap: 16px;
    align-self: center;
    margin-top: 18px;
  }
}

/* --- Inner pages: the cream sunburst behind the page title ---------------------------------------
   Every page opens with one band holding its title. It gets the everyday ground: cream, rays
   rising from behind the bottom-right, fading out before they reach the words. */
.pan-look-clubhouse .elementor > .e-con:first-child:not([class*="hero0001"]) {
  position: relative;
  /* Its own layer, one above the bands that follow, so a sticker can hang over its lower edge. */
  z-index: 1;
  isolation: isolate;
  background-color: var(--cream) !important;
  border-bottom: 1px solid var(--hairline);
  /* Where the page's 1140px column ends, measured in from the band's right edge. */
  --col-right: max(24px, calc((100% - 1140px) / 2));
}

.pan-look-clubhouse .elementor > .e-con:first-child:not([class*="hero0001"])::before {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  z-index: -1;
  opacity: 1;
  pointer-events: none;
  background: repeating-conic-gradient(from -90deg at 84% 112%, var(--ray-cream) 0deg 6deg, transparent 6deg 12deg);
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 22%, transparent 72%);
  mask-image: linear-gradient(to left, #000 0%, #000 22%, transparent 72%);
}

/* 🔁 An arch and three stars, drawn in line only, stood here on the short title bands (Spaces,
   Privacy, the regulars' page, What's On). Jeremy, on first sight: "out of place". Removed the same
   evening. The arch belongs to the one place it frames a photograph, Home's hero. */

@media (max-width: 999px) {
  .pan-look-clubhouse .elementor > .e-con:first-child:not([class*="hero0001"])::before {
    background: repeating-conic-gradient(from -90deg at 100% 118%, var(--ray-cream) 0deg 6deg, transparent 6deg 12deg);
    -webkit-mask-image: linear-gradient(to top left, #000 0%, #000 12%, transparent 58%);
    mask-image: linear-gradient(to top left, #000 0%, #000 12%, transparent 58%);
  }
}

/* Pages that are not built in Elementor (Book, the page after a request, "page not found") have
   no title band to dress, so the page itself gets the same opening: room above the title, the
   opening words lined up under it instead of floating in the middle, and the sun in the corner. */
.pan-look-clubhouse:not(.elementor-page) #main {
  position: relative;
  isolation: isolate;
}

.pan-look-clubhouse:not(.elementor-page) #main::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 460px;
  z-index: -1;
  pointer-events: none;
  background: repeating-conic-gradient(from 90deg at 92% -14%, var(--ray-cream) 0deg 6deg, transparent 6deg 12deg);
  -webkit-mask-image: linear-gradient(to bottom left, #000 0%, #000 14%, transparent 62%);
  mask-image: linear-gradient(to bottom left, #000 0%, #000 14%, transparent 62%);
}

.pan-look-clubhouse.page:not(.elementor-page) .entry-content {
  padding-top: clamp(36px, 5vw, 64px);
}

/* WordPress centres every block in this kind of page with `margin: auto !important`, so lining the
   opening words up under the title has to say so just as firmly. The left margin is the same sum
   the theme does for the title: half of whatever the page column leaves over. (A plain `0` put
   the words against the edge of the screen: the content box here is the full width of the page.) */
.pan-look-clubhouse.page:not(.elementor-page) .entry-content > :is(.pan-measure, .pan-lead) {
  margin-left: calc((100% - min(var(--theme-block-width, 100%), var(--theme-block-max-width, 1140px))) / 2) !important;
  margin-right: auto !important;
}

/* Bands that were plain white are the kit's card colour now, the same as the header, so nothing on
   the page is a colder white than the cream around it. Home's hero is left out: its ground is set
   without !important.
   🔴 The two conditions are inside :where() so they add NO weight. Written as ordinary selectors
   this rule out-weighed the green closing band's own rule and painted that band cream on every
   page, cream words and all (1.05:1). "Written first so the others win" is only true between
   rules of equal weight, and it was not one. tools/check-contrast.mjs was written that evening
   and fails on exactly this. */
.pan-look-clubhouse .elementor > .e-con:where([data-settings*="classic"]):where(:not([class*="hero0001"])) {
  background-color: var(--cream-card) !important;
}

/* The other tinted bands move from the old grey-beige to the warm cream. Their colour is written
   into each page as a literal, so they are named here. */
.pan-look-clubhouse .elementor > .e-con:is(
  [class*="regsec01"], [class*="oshonor1"], [class*="osmore01"], [class*="spgear01"],
  [class*="hpexcl01"], [class*="pvnever1"]
) {
  background-color: var(--cream-deep) !important;
}

/* --- The closing band: the green starburst again ------------------------------------------------- */
.pan-look-clubhouse .elementor > .e-con:is([class*="ctasec"], [class*="cta001"]) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--deep-green, #24543E) !important;
}

.pan-look-clubhouse .elementor > .e-con:is([class*="ctasec"], [class*="cta001"])::before {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  z-index: -1;
  opacity: 1;
  pointer-events: none;
  background: repeating-conic-gradient(from -90deg at 82% 118%, var(--ray-green) 0deg 6deg, transparent 6deg 12deg);
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 30%, transparent 80%);
  mask-image: linear-gradient(to left, #000 0%, #000 30%, transparent 80%);
}

.pan-look-clubhouse .e-con:is([class*="ctasec"], [class*="cta001"]) :is(h2, h3).elementor-heading-title {
  color: var(--head-on-dark);
}

/* The emblem signs the band, as it signs every post in the kit. */
.pan-look-clubhouse .elementor > .e-con:is([class*="ctasec"], [class*="cta001"]) > .e-con-inner {
  position: relative;
}

.pan-look-clubhouse .elementor > .e-con:is([class*="ctasec"], [class*="cta001"]) > .e-con-inner::after {
  content: "";
  position: absolute;
  right: 40px;
  top: 50%;
  width: 219px;
  height: 176px;
  translate: 0 -50%;
  pointer-events: none;
  background: url("../img/hub-emblem-cream.png") center / contain no-repeat;
}

@media (max-width: 999px) {
  .pan-look-clubhouse .elementor > .e-con:is([class*="ctasec"], [class*="cta001"]) > .e-con-inner::after {
    display: none;
  }
}

/* --- The sticker --------------------------------------------------------------------------------
   Three placements, one sticker:
     wide screen, short title band   at the right of the band, level with its middle
     wide screen, band with a panel  at the right of the opening paragraph, above the panel
     narrow screen                   in the flow, pinned beside the page title */
.pan-sticker {
  --stick: 148px;
  position: absolute;
  z-index: 3;
  right: calc(var(--col-right, 24px) + 64px);
  top: 50%;
  width: var(--stick);
  height: var(--stick);
  margin: 0;
  translate: 0 -50%;
  rotate: -9deg;
  filter: drop-shadow(0 8px 12px rgba(20, 50, 36, .24));
}

/* The market sticker carries three lines, so it gets a little more room. */
.pan-sticker--date { --stick: 164px; }

@media (min-width: 1000px) {
  .pan-look-clubhouse .elementor > .e-con:first-child:has(> .e-con-inner > .elementor-element ~ .elementor-element ~ .elementor-element) .pan-sticker {
    top: 236px;
    translate: none;
  }
}

.pan-sticker-in {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  background: var(--warm-amber, #E8A33D);
  color: var(--ink-on-gold);
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1;
  clip-path: polygon(100.00% 50.00%, 92.63% 55.61%, 98.30% 62.94%, 89.73% 66.46%, 93.30% 75.00%, 84.11% 76.18%, 85.36% 85.36%, 76.18% 84.11%, 75.00% 93.30%, 66.46% 89.73%, 62.94% 98.30%, 55.61% 92.63%, 50.00% 100.00%, 44.39% 92.63%, 37.06% 98.30%, 33.54% 89.73%, 25.00% 93.30%, 23.82% 84.11%, 14.64% 85.36%, 15.89% 76.18%, 6.70% 75.00%, 10.27% 66.46%, 1.70% 62.94%, 7.37% 55.61%, 0.00% 50.00%, 7.37% 44.39%, 1.70% 37.06%, 10.27% 33.54%, 6.70% 25.00%, 15.89% 23.82%, 14.64% 14.64%, 23.82% 15.89%, 25.00% 6.70%, 33.54% 10.27%, 37.06% 1.70%, 44.39% 7.37%, 50.00% 0.00%, 55.61% 7.37%, 62.94% 1.70%, 66.46% 10.27%, 75.00% 6.70%, 76.18% 15.89%, 85.36% 14.64%, 84.11% 23.82%, 93.30% 25.00%, 89.73% 33.54%, 98.30% 37.06%, 92.63% 44.39%);
}

.pan-sticker-top  { font-size: calc(var(--stick) * .088); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .28em; }
.pan-sticker-main { font-size: calc(var(--stick) * .31); letter-spacing: -.01em; }
.pan-sticker-sub  { font-size: calc(var(--stick) * .112); margin-top: .22em; }

/* A date is longer than a price, so it is set a little smaller. */
.pan-sticker--date .pan-sticker-top  { font-size: calc(var(--stick) * .078); margin-bottom: .34em; }
.pan-sticker--date .pan-sticker-main { font-size: calc(var(--stick) * .25); }
.pan-sticker--date .pan-sticker-sub  { font-size: calc(var(--stick) * .088); margin-top: .3em; }

@media (max-width: 999px) {
  .pan-look-clubhouse .elementor > .e-con:first-child .pan-sticker,
  .pan-sticker {
    --stick: 108px;
    position: relative;
    right: auto;
    top: auto;
    bottom: auto;
    translate: none;
    align-self: flex-end;
    /* Up beside the title (one heading line and the gap under it), so only the paragraph moves down.
       108px and 8px out into the page edge: "Hire & pricing" is the longest title that has one,
       and at 116px the sticker sat on its last letter. */
    margin: -84px -8px -4px 0;
  }

  /* "What's on" is a short title, so its three-line sticker can be bigger and still clear it. */
  .pan-look-clubhouse .elementor > .e-con:first-child .pan-sticker--date,
  .pan-sticker--date {
    --stick: 128px;
    margin-top: -96px;
  }
}

/* --- Cards: each photo in its own small window ---------------------------------------------------- */
.pan-look-clubhouse .elementor .elementor-element.e-con[class*="wygcard"] {
  background-color: var(--cream-card);
  border-color: var(--line);
  --border-radius: 20px;
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}

/* Not the inner boxes, which share the prefix (`wygcardqb`). */
.pan-look-clubhouse .elementor .elementor-element.e-con[class*="wygcard"] .e-con {
  background-color: transparent;
  border: 0;
  box-shadow: none;
}

.pan-look-clubhouse .e-con[class*="wygcard"] > .elementor-widget-image,
.pan-look-clubhouse .e-con[class*="wygcard"] > .e-con-inner > .elementor-widget-image {
  padding: 16px 16px 0;
}

.pan-look-clubhouse .e-con[class*="wygcard"] .elementor-widget-image img {
  aspect-ratio: 10 / 9;
  border-radius: 999px 999px 12px 12px;
}

.pan-look-clubhouse .e-con[class*="hbwstep"],
.pan-look-clubhouse .pan-glance,
.pan-look-clubhouse .pan-event,
.pan-look-clubhouse .wpbc_structure_form,
.pan-look-clubhouse .frm-fluent-form {
  background-color: var(--cream-card);
  border-color: var(--line);
}

/* --- The booking form and its calendar ----------------------------------------------------------
   Booking Calendar draws itself from its own colour settings (custom properties), so the look sets
   those rather than painting over what they produce. Two places hold them: the calendar's are on
   the page root, the form's are written into the form's own tag (which only !important outranks).

   The colour code, unchanged in meaning (type.css, 0.40.0: "Green = nothing booked. Tan = partly
   booked. Red = gone."), moved onto the look's palette and measured:
     free           deep green, cream number        8.09:1
     partly booked  sand, charcoal number           9.57:1, plus a green ring, so it is not told
                                                    apart by a pale tint alone (sand on the card
                                                    is only 1.44:1 as a shape)
     booked         deep clay, cream number         5.50:1
     pending        pale straw, charcoal number    12.55:1
     picked         gold, ink number                5.38:1, with its ring (type.css, 0.53.0)
   Fills are 100% now, not 80% see-through: a colour measured is the colour shown. */
body.pan-look-clubhouse {
  --wpbc_cal-main-background-color: var(--cream-card);
  --wpbc_cal-day-bg-color-opacity: 100%;
  --wpbc_cal-selected-day-bg-color-opacity: 100%;
  --wpbc_cal-day-cell-border-radius: 8px;
  --wpbc_cal-header-text-color: #24543E;
  --wpbc_cal-text-prev-next-links-color: #24543E;
  --wpbc_cal-text-weekdays-color: #5A5A5A;
  --wpbc_cal-available-day-color: #24543E;
  --wpbc_cal-available-text-color: #FFF6E0;
  --wpbc_cal-timespartly-day-color: #E6D3A0;
  --wpbc_cal-timespartly-text-color: #2B2B2B;
  --wpbc_cal-approved-day-color: #A8452A;
  --wpbc_cal-approved-text-color: #FFF6E0;
  --wpbc_cal-pending-day-color: #FFF1C2;
  --wpbc_cal-pending-text-color: #2B2B2B;
  --wpbc_cal-selected-day-color: #E8A33D;
  --wpbc_cal-selected-text-color: #1E3F30;
  --wpbc_cal-hover-day-color: #F3BE62;
  --wpbc_cal-hover-text-color: #1E3F30;
}

/* type.css paints a free day Hub Green with !important (it had to, to beat the plugin). Same weight,
   one more class, the look's green. The picked-day rule there is longer still, so it keeps winning. */
.pan-look-clubhouse td.date_available:not(.date_approved):not(.date2approve) .wpbc-cell-box {
  background-color: #24543E !important;
}

.pan-look-clubhouse td.date_available:not(.date_approved):not(.date2approve) .date-cell-content,
.pan-look-clubhouse td.date_available:not(.date_approved):not(.date2approve) .date-cell-content a,
.pan-look-clubhouse td.date_available:not(.date_approved):not(.date2approve) .date-cell-content * {
  color: #FFF6E0 !important;
}

/* The ring on a partly booked day. Both of the plugin's names for that state (grid and key), and
   never on the day that is picked, which has its own. */
.pan-look-clubhouse td.date_available:is(.date_approved, .date2approve):not(.datepick-current-day) .wpbc-cell-box {
  box-shadow: inset 0 0 0 2px #24543E;
}

.pan-look-clubhouse .datepick-inline {
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.pan-look-clubhouse .datepick-inline .datepick-header {
  font-family: var(--font-heading);
  font-weight: 700;
}

/* The form: its panel, its fields, its buttons and its time chips all read these. */
.pan-look-clubhouse .wpbc_bfb_form.wpbc_wizard__border_container {
  --wpbc-bfb-form-background: var(--cream-card) !important;
  --wpbc-bfb-form-border-color: var(--line) !important;
  --wpbc-bfb-form-border-radius: 16px !important;
  --wpbc-bfb-form-box-shadow: 0 2px 6px rgba(36, 84, 62, .08) !important;
  --wpbc_form-label-color: #2B2B2B !important;
  --wpbc_form-label-sublabel-color: #5A5A5A !important;
  --wpbc_form-field-background-color: #FFFFFF !important;
  /* 3.3:1 on white: a field's edge has to be findable, and the plugin's own grey was 1.8:1. */
  --wpbc_form-field-border-color: #9C8C5A !important;
  --wpbc_form-field-border-color-spare: #9C8C5A !important;
  --wpbc_form-field-focus-border-color: #24543E !important;
  --wpbc_form-field-focus-shadow-color: #2E6B4F !important;
  --wpbc_form-field-text-color: #2B2B2B !important;
  --wpbc_form-field-border-radius: 8px !important;
  --wpbc_form-choice-checked-border-color: #24543E !important;
  --wpbc_form-choice-checked-color: #24543E !important;
  --wpbc_form-choice-focus-color: #2E6B4F !important;
  --wpbc_form-accent-color: #24543E !important;
  --wpbc_form-accent-hover-color: #2E6B4F !important;
  --wpbc_form-accent-contrast-color: #FFF6E0 !important;
  --wpbc_form-page-break-color: #E8A33D !important;
  /* One corner for buttons and time chips alike: the chips take this value too. */
  --wpbc_form-button-border-radius: var(--radius-btn) !important;
  --wpbc_form-button-text-color: var(--ink-on-gold) !important;
  --wpbc_form-button-text-color-alt: var(--ink-on-gold) !important;
  --wpbc_form-button-hover-background-color: var(--gold-light) !important;
  --wpbc_form-button-hover-border-color: var(--gold-light) !important;
  --wpbc_form-button-hover-text-color: var(--ink-on-gold) !important;
  --wpbc_form-button-primary-hover-border-color: var(--gold-light) !important;
  --wpbc_form-button-light-text-color: #24543E !important;
  --wpbc_form-button-light-hover-text-color: #24543E !important;
  --wpbc_form-button-light-hover-border-color: #24543E !important;
}

/* "Next": the look's label colour and its lighter-gold hover (type.css gave it charcoal and a darker gold). */
.pan-look-clubhouse .wpbc_bfb_form a.wpbc_wizard_step_button.wpbc_wizard_step_2 {
  --wpbc_form-button-light-text-color: var(--ink-on-gold);
  --wpbc_form-button-light-hover-background-color: var(--gold-light);
  --wpbc_form-button-light-hover-border-color: var(--gold-light);
  --wpbc_form-button-light-hover-text-color: var(--ink-on-gold);
  font-family: var(--font-heading);
  font-weight: 700;
}

/* The picked time. type.css pins it Hub Green with !important; the look's green, the same way. */
.pan-look-clubhouse .wpbc_time_selected,
.pan-look-clubhouse .wpbc_time_selector .wpbc_time_selected {
  background-color: #24543E !important;
  border-color: #24543E !important;
  color: #FFF6E0 !important;
}

/* The questions were in the visitor's system font, the one piece of plugin lettering left on the
   site. A question is a label that does not wrap its own tick-box or radio button; the answers
   beside those stay in the body font. */
.pan-look-clubhouse .wpbc_bfb_form label:not(:has(input, select, textarea)) {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  color: #24543E;
}

.pan-look-clubhouse .wpbc_bfb_form :is(input, select, textarea, label, .wpbc_times_selector div) {
  font-family: var(--font-body, "Lato", sans-serif);
}

/* …written after the rule above on purpose, so a question keeps the heading lettering. */
.pan-look-clubhouse .wpbc_bfb_form label:not(:has(input, select, textarea)) {
  font-family: var(--font-heading);
}

/* Back, Next and Send request in one lettering ("Next" was the only one of the three set in it). */
.pan-look-clubhouse .wpbc_bfb_form :is(a.wpbc_button_light, .wpbc_button, button, input[type="button"], input[type="submit"]) {
  font-family: var(--font-heading);
  font-weight: 700;
}

/* "Back" needs the plugin's own five-class rule out-weighed, and it measured 41px tall: 44 is the
   floor for anything a thumb presses. */
.pan-look-clubhouse .wpbc_container.wpbc_form .wpbc_bfb_form a.wpbc_wizard_step_button {
  font-family: var(--font-heading);
  font-weight: 700;
  min-height: 44px;
}

/* The link to the conditions of hire sits inside the sentence a hirer agrees to. Colour alone does
   not say "link" to everyone, so it is underlined like every other link in running text. */
.pan-look-clubhouse .wpbc_bfb_form label a {
  text-decoration: underline;
  text-underline-offset: .18em;
}

/* --- Small pieces in the kit's language ---------------------------------------------------------- */

/* The date on an event row is the kit's gold day-chip. On a phone it sits above the event's name:
   side by side, the chip took the width and the name broke one word to a line. */
@media (max-width: 600px) {
  .pan-look-clubhouse .pan-event { grid-template-columns: 1fr; gap: 8px; }
  .pan-look-clubhouse .pan-event-when { grid-row: auto; justify-self: start; }
}

.pan-look-clubhouse .pan-event-when {
  background: var(--warm-amber, #E8A33D);
  color: var(--ink-on-gold);
  border-radius: 12px;
}

.pan-look-clubhouse .pan-glance li::before {
  width: 13px;
  height: 13px;
  top: .42em;
  border-radius: 0;
  -webkit-mask: var(--star) center / contain no-repeat;
  mask: var(--star) center / contain no-repeat;
}

.pan-look-clubhouse .pan-table thead th {
  background: var(--cream-deep);
}

.pan-look-clubhouse .pan-table tbody tr:nth-child(even) td {
  background: rgba(251, 244, 226, .6);
}

.pan-look-clubhouse .pan-gal-slide img {
  border-radius: 16px;
}

/* --- Footer ------------------------------------------------------------------------------------- */
.pan-look-clubhouse .ct-footer [data-row] {
  background-color: var(--cream-deep);
}

.pan-look-clubhouse .ct-footer [data-row="middle"] > .ct-container {
  position: relative;
  padding-top: 132px;
}

.pan-look-clubhouse .ct-footer [data-row="middle"] > .ct-container::before {
  content: "";
  position: absolute;
  left: 0;
  top: 44px;
  width: 92px;
  height: 74px;
  background: url("../img/hub-emblem-green.png") left center / contain no-repeat;
}

.pan-look-clubhouse .ct-footer .ct-menu-link {
  letter-spacing: .07em;
}

/* ================================================================================================
   Motion
   Everything below is decoration on a page that is already complete, and all of it is off for
   anyone who has asked their device for less motion. Only `transform`, `opacity`, `rotate`,
   `scale`, `translate`, `clip-path` and `background-size` are animated: nothing that moves the
   layout, nothing that delays a word.
   ================================================================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* Moving between pages: a short cross-fade instead of a white flash, with the header held still.
     Browsers without it just load the page as before. */
  @view-transition { navigation: auto; }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .22s;
  }

  .pan-look-clubhouse #header { view-transition-name: pan-header; }

  /* The sunburst turns: one full turn every six minutes, which is slower than a clock's minute
     hand looks. Wide screens with a mouse only; on a phone the rays stay still, so there is no
     large moving layer to carry. */
  @media (min-width: 1000px) and (hover: hover) {
    .pan-look-clubhouse .e-con[class*="hero0001"]::before {
      animation: pan-sun-turn 360s linear infinite;
      will-change: rotate;
    }
  }

  @keyframes pan-sun-turn {
    to { rotate: 360deg; }
  }

  /* The hero's window opens and the photo settles; then it drifts, barely, for as long as it is
     on screen. The words beside it never wait for any of this. */
  .pan-arch--hero .pan-arch-win {
    animation: pan-arch-open .9s cubic-bezier(.2, .7, .2, 1) both;
  }

  .pan-arch--hero .pan-arch-img {
    animation: pan-arch-drift 26s ease-in-out 1s infinite alternate;
  }

  .pan-arch--hero .pan-arch-line {
    animation: pan-line-draw 1s cubic-bezier(.3, .6, .2, 1) .15s both;
  }

  /* The clip keeps the arch's own round top the whole way up. Letting it relax to square put a
     flat edge across the window for a moment (seen in a frame held at 0.6s). */
  @keyframes pan-arch-open {
    from { clip-path: inset(100% 0 0 0 round 999px 999px 18px 18px); translate: 0 14px; }
    to   { clip-path: inset(0 0 0 0 round 999px 999px 18px 18px); translate: 0 0; }
  }

  @keyframes pan-arch-drift {
    from { scale: 1; }
    to   { scale: 1.07; }
  }

  @keyframes pan-line-draw {
    from { clip-path: inset(100% 0 0 0); opacity: 0; }
    to   { clip-path: inset(-10px -10px 0 -10px); opacity: 1; }
  }

  /* The three stars land one after another, then twinkle now and then. The landing moves the
     whole star, backing disc included: with only the drawing animated, three dark discs sat on
     the rays for most of a second before anything arrived in them. */
  .pan-arch .pan-star {
    animation: pan-star-in .5s cubic-bezier(.3, 1.5, .5, 1) both;
  }

  .pan-arch .pan-star svg {
    animation: pan-twinkle 5.5s ease-in-out infinite;
  }

  .pan-arch .pan-star--top { animation-delay: .75s; }
  .pan-arch .pan-star--l   { animation-delay: .95s; }
  .pan-arch .pan-star--r   { animation-delay: 1.1s; }
  .pan-arch .pan-star--top svg { animation-delay: 2.4s; }
  .pan-arch .pan-star--l svg   { animation-delay: 4.1s; }
  .pan-arch .pan-star--r svg   { animation-delay: 5.8s; }

  @keyframes pan-star-in {
    from { scale: 0; rotate: -90deg; }
    to   { scale: 1; rotate: 0deg; }
  }

  @keyframes pan-twinkle {
    0%, 78%, 100% { scale: 1; rotate: 0deg; }
    86%           { scale: 1.32; rotate: 45deg; }
    93%           { scale: .92; rotate: 90deg; }
  }

  /* The sticker is pressed on, then rocks a little, like something stuck to a window. */
  .pan-sticker {
    animation:
      pan-stick-on .55s cubic-bezier(.3, 1.4, .5, 1) .35s both,
      pan-stick-rock 6s ease-in-out 1.2s infinite alternate;
  }

  @keyframes pan-stick-on {
    from { scale: 1.5; opacity: 0; }
    to   { scale: 1; opacity: 1; }
  }

  @keyframes pan-stick-rock {
    from { rotate: -9deg; }
    to   { rotate: -4deg; }
  }

  /* Section headings: the star turns into place as its heading comes up the screen. */
  @supports (animation-timeline: view()) {
    .pan-look-clubhouse .elementor-widget-heading h2.elementor-heading-title::before {
      animation: pan-star-turn linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }

    @keyframes pan-star-turn {
      from { rotate: -180deg; scale: .2; }
      to   { rotate: 0deg; scale: 1; }
    }

    /* Cards in a row come up one after the other instead of as one slab. */
    .pan-look-clubhouse .e-con[class*="navrow"] > .e-con[class*="wygcard"]:nth-child(3n + 2) {
      animation-range: entry 0% entry 70%;
    }

    .pan-look-clubhouse .e-con[class*="navrow"] > .e-con[class*="wygcard"]:nth-child(3n + 3) {
      animation-range: entry 0% entry 95%;
    }

    /* The header gains a shadow once the page has moved under it. */
    .pan-look-clubhouse #header [data-row*="middle"] {
      animation: pan-header-lift linear both;
      animation-timeline: scroll(root);
      animation-range: 0px 140px;
    }

    @keyframes pan-header-lift {
      from { box-shadow: 0 0 0 rgba(36, 84, 62, 0); }
      to   { box-shadow: 0 6px 22px rgba(36, 84, 62, .12); }
    }
  }

  /* Menu: a gold line grows under the word you are pointing at. The page you are on keeps its
     solid bar from type.css. */
  .pan-look-clubhouse #header [data-id="menu"] > ul > li:not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor) > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 3px;
    border-radius: 999px;
    background: var(--warm-amber, #E8A33D);
    scale: 0 1;
    transform-origin: left center;
    transition: scale .22s var(--ease, ease);
  }

  .pan-look-clubhouse #header [data-id="menu"] > ul > li > a:is(:hover, :focus-visible)::after {
    scale: 1 1;
  }

  /* Cards lift and their window leans in. */
  .pan-look-clubhouse .e-con[class*="wygcard"]:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
  }

  .pan-look-clubhouse .e-con[class*="wygcard"]:hover .elementor-widget-image img {
    transform: scale(1.045);
  }

  /* The emblem in the closing band breathes. */
  .pan-look-clubhouse .elementor > .e-con:is([class*="ctasec"], [class*="cta001"]) > .e-con-inner::after {
    animation: pan-breathe 7s ease-in-out infinite alternate;
  }

  @keyframes pan-breathe {
    from { scale: 1; }
    to   { scale: 1.045; }
  }
}