/* =============================================================================
   Visit Citrusdal — the noticeboard (/whats-on/ and the preview on /whats-on/add/)
   -----------------------------------------------------------------------------
   One stylesheet for the cork, the pins, the paper and the doodles, so the live
   preview on the form is exactly what the board will show. Built by
   brand/board.js; nothing here needs JavaScript to be readable.

   COLOUR: every ink colour is a palette token. The cork and the wooden frame are
   MATERIAL colours, not brand colours, and exist nowhere else on the site, so
   they are defined once below as --cork-* / --wood-* rather than as tokens in
   palettes.css. Category colours map onto the raw Valley Combo tokens
   (--vermilion, --green, --red, --navy, --mustard) via --c on each pin.

   MOTION: pins tilt by --r and straighten on hover. Everything that moves is
   switched off under prefers-reduced-motion, including the tilt on hover.
   ============================================================================= */

.board-zone{position:relative;
  --cork-1:#C99A63; --cork-2:#B98A56; --cork-ink:rgba(74,45,18,.55);
  --wood-1:#86552F; --wood-2:#A46C3E; --wood-3:#6E4424;
  --paper:#FFFDF7; --shade:rgba(40,24,8,.28);}

/* ---- the frame and the cork ---------------------------------------------- */
.frame{position:relative;border-radius:16px;padding:clamp(10px,1.6vw,16px);
  background:linear-gradient(100deg,var(--wood-1),var(--wood-2) 18%,var(--wood-3) 40%,var(--wood-2) 64%,var(--wood-1) 86%,var(--wood-3));
  box-shadow:0 24px 50px -24px rgba(22,32,74,.55),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 0 rgba(0,0,0,.25);}
.cork{position:relative;border-radius:8px;min-height:520px;padding:clamp(22px,3.4vw,44px) clamp(14px,3vw,40px) clamp(28px,3.4vw,48px);
  background-color:var(--cork-1);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .22 0 0 0 0 .09 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .28 0 0 0 0 .12 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 30% 20%,rgba(255,236,200,.35),transparent 60%);
  box-shadow:inset 0 3px 16px rgba(0,0,0,.38),inset 0 0 0 1px rgba(0,0,0,.25);}

/* a paper banner stuck to the cork with two bits of tape: the group headings */
.strip{position:relative;display:inline-block;margin:6px 0 20px;padding:8px 20px 7px;background:var(--paper);
  font-family:var(--font-logo);font-weight:600;font-size:clamp(17px,2vw,21px);color:var(--dark);letter-spacing:.01em;
  transform:rotate(var(--r,-1deg));box-shadow:0 3px 8px var(--shade);}
.strip::before,.strip::after{content:"";position:absolute;top:-9px;width:44px;height:18px;
  background:color-mix(in srgb,var(--mustard) 55%,transparent);transform:rotate(-8deg);}
.strip::before{left:-14px;} .strip::after{right:-14px;transform:rotate(9deg);}
.strip small{font-family:var(--font-body);font-weight:500;font-size:12px;color:var(--text-soft);margin-left:8px;letter-spacing:0;}
.group + .group{margin-top:18px;}

.pins{display:grid;gap:clamp(22px,2.6vw,34px) clamp(16px,2.2vw,30px);align-items:start;list-style:none;margin:0;padding:0;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,212px),1fr));}
@media (max-width:560px){.pins{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px;}}
.pins > li{min-width:0;}

/* ---- a pin: shared ------------------------------------------------------- */
.pin{--r:0deg;--c:var(--navy);position:relative;display:block;color:var(--text);text-decoration:none;
  transform:rotate(var(--r));transition:transform .28s cubic-bezier(.2,.8,.2,1.2),box-shadow .28s;
  box-shadow:0 2px 3px rgba(0,0,0,.18),0 12px 20px -10px var(--shade);-webkit-tap-highlight-color:transparent;}
.pin:hover,.pin:focus-visible{transform:rotate(0deg) translateY(-5px) scale(1.025);z-index:3;
  box-shadow:0 4px 6px rgba(0,0,0,.16),0 24px 34px -14px var(--shade);}
.pin:focus-visible{outline:3px solid var(--on-dark);outline-offset:4px;}

/* the push-pin */
.tack{position:absolute;left:50%;top:-9px;width:20px;height:20px;margin-left:-10px;border-radius:50%;z-index:2;
  background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--c) 30%,#fff) 0 18%,var(--c) 52%,color-mix(in srgb,var(--c) 70%,#000) 100%);
  box-shadow:2px 5px 5px -1px rgba(0,0,0,.4);}
.tack::after{content:"";position:absolute;left:8px;top:15px;width:3px;height:7px;border-radius:2px;background:rgba(0,0,0,.25);filter:blur(1px);}

/* ---- poster pin ---------------------------------------------------------- */
.pin.poster{background:var(--paper);padding:6px 6px 0;}
.pin.poster img{display:block;width:100%;height:auto;background:var(--ground-alt);}
.pin.poster .cap{display:block;padding:8px 4px 9px;font-size:13px;line-height:1.3;}
.pin.poster .cap b{display:block;font-family:var(--font-logo);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--c);}
.pin .ttl{display:block;font-family:var(--font-display);font-weight:600;overflow-wrap:anywhere;}
.pin.poster .ttl{font-size:14.5px;}

/* ---- note pin (no poster): an index card with a date block --------------- */
.pin.note{background:color-mix(in srgb,var(--c) 17%,var(--paper));padding:22px 16px 16px;min-height:170px;
  background-image:repeating-linear-gradient(transparent 0 25px,color-mix(in srgb,var(--c) 18%,transparent) 25px 26px);
  background-position:0 58px;}
.pin.note .tape{position:absolute;top:-10px;left:50%;width:78px;height:22px;margin-left:-39px;transform:rotate(-3deg);
  background:color-mix(in srgb,var(--c) 38%,rgba(255,255,255,.55));box-shadow:0 1px 2px rgba(0,0,0,.12);}
.datebox{display:flex;align-items:center;gap:9px;margin-bottom:10px;font-family:var(--font-logo);color:var(--dark);}
.datebox b{font-weight:600;font-size:40px;line-height:.9;color:var(--c);}
.datebox span{font-weight:500;font-size:13px;line-height:1.1;text-transform:uppercase;letter-spacing:.08em;}
.pin.note .ttl{font-size:17px;line-height:1.2;margin-bottom:6px;}
.pin .meta{display:block;font-size:13px;color:var(--text-soft);line-height:1.35;}
.pin .kind{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dark);border-bottom:2px solid var(--c);margin-bottom:8px;}
.pin .rep{display:inline-block;margin-top:9px;font-family:var(--font-logo);font-weight:500;font-size:12px;color:var(--dark);
  background:rgba(255,255,255,.65);border-radius:99px;padding:2px 10px;}
.pin .from{display:block;margin-top:8px;font-size:11.5px;color:var(--text-soft);font-style:italic;}

/* Mustard and green are too light to be text; use them as colour, not as ink. */
.pin.poster .cap b{filter:brightness(.72) saturate(1.2);}

/* ---- decorations pinned to the cork ------------------------------------- */
.polaroid{position:relative;margin:0;background:var(--paper);padding:8px 8px 0;width:100%;
  transform:rotate(var(--r,2deg));box-shadow:0 2px 3px rgba(0,0,0,.18),0 14px 22px -12px var(--shade);}
.polaroid img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;}
.polaroid figcaption{font-family:var(--font-logo);font-size:14px;color:var(--dark);padding:8px 4px 10px;text-align:center;}
.polaroid::before{content:"";position:absolute;top:-10px;left:50%;width:70px;height:20px;margin-left:-35px;transform:rotate(4deg);
  background:color-mix(in srgb,var(--green) 30%,rgba(255,255,255,.55));}

/* The tear-off flyer: the "add yours" card, in the one format every village
   noticeboard has. One tab is already torn off. */
.flyer{--c:var(--vermilion);position:relative;display:flex;flex-direction:column;background:var(--paper);color:var(--text);
  text-decoration:none;padding:20px 16px 0;transform:rotate(var(--r,1.4deg));
  box-shadow:0 2px 3px rgba(0,0,0,.18),0 12px 20px -10px var(--shade);transition:transform .28s cubic-bezier(.2,.8,.2,1.2);}
.flyer:hover,.flyer:focus-visible{transform:rotate(0) translateY(-5px);}
.flyer .big{font-family:var(--font-logo);font-weight:600;font-size:23px;line-height:1.1;color:var(--vermilion);}
.flyer p{font-size:13.5px;margin:8px 0 14px;color:var(--text-soft);line-height:1.4;}
.flyer .go{align-self:flex-start;font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--on-dark);
  background:var(--dark);border-radius:99px;padding:7px 15px;margin-bottom:16px;}
.flyer .tabs{display:flex;border-top:1.5px dashed var(--text-soft);margin:0 -16px;}
.flyer .tabs span{flex:1 1 0;min-width:0;height:108px;writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:10px;font-weight:500;letter-spacing:.02em;padding:8px 0;text-align:left;overflow:hidden;white-space:nowrap;
  border-left:1.5px dashed var(--text-soft);display:flex;align-items:center;}
.flyer .tabs span.gone{visibility:hidden;}
.flyer .tabs span:last-child{border-left:0;}

.empty-note{grid-column:1/-1;max-width:420px;background:var(--paper);padding:22px 22px 20px;transform:rotate(-1deg);
  box-shadow:0 12px 20px -10px var(--shade);font-size:15px;}
.empty-note b{display:block;font-family:var(--font-logo);font-weight:600;font-size:21px;color:var(--dark);margin-bottom:6px;}

/* skeleton pins while the board loads, so nothing shifts when it arrives */
.pin.ghost{background:color-mix(in srgb,var(--paper) 55%,transparent);min-height:240px;box-shadow:none;}
.pin.ghost:hover{transform:rotate(var(--r));}

/* ---- doodles in the margins ---------------------------------------------- */
.doodle{position:absolute;height:auto;pointer-events:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;z-index:1;}
@media (max-width:760px){.doodle.wide-only{display:none;}}

/* ---- wall calendar (calendar view) ---------------------------------------
   Rebuilt 24 Sept 2026 after a connected town calendar rendered as a grey wall.
   Each week is one CSS grid (see weekHtml in whats-on/index.html): day numbers,
   then one lane per multi-day event drawn as a single bar, then the day's timed
   entries. Entries carry their kind's colour as a tint plus a solid edge, so the
   text stays dark and readable on every colour. --------------------------- */
.wallcal{position:relative;background:var(--paper);border-radius:4px;padding:34px clamp(10px,2vw,26px) 24px;--lane-h:22px;
  box-shadow:0 3px 4px rgba(0,0,0,.18),0 22px 34px -16px var(--shade);}
/* spiral binding */
.wallcal::before{content:"";position:absolute;top:-10px;left:6%;right:6%;height:24px;
  background:radial-gradient(circle at 50% 60%,transparent 0 4px,var(--dark) 4.5px 6px,transparent 6.5px) 0 0/26px 24px repeat-x;}
.cal-head{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.cal-head h2{font-family:var(--font-logo);font-weight:600;font-size:clamp(26px,3.6vw,38px);color:var(--dark);margin-right:auto;line-height:1;}
.cal-head h2 small{display:block;font-size:13px;font-weight:500;color:var(--text-soft);letter-spacing:.12em;text-transform:uppercase;margin-top:6px;}
.cal-head h2 small span{letter-spacing:.02em;text-transform:none;}
.cal-head button{width:42px;height:42px;border-radius:50%;border:0;background:var(--ground-alt);color:var(--dark);cursor:pointer;
  font-size:22px;line-height:1;display:grid;place-items:center;}
.cal-head button:hover:not([disabled]){background:var(--dark);color:var(--on-dark);}
.cal-head button[disabled]{opacity:.3;cursor:default;}
.cal-head .today-btn{width:auto;border-radius:99px;padding:0 16px;font:600 14px var(--font-body);}

.dows{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));}
.dow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft);padding:0 8px 8px;}
.dow.wkend{color:var(--dark);}
.month{border:1px solid var(--ground-alt);border-radius:12px;overflow:hidden;}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));row-gap:3px;min-height:118px;border-top:1px solid var(--ground-alt);}
.week:first-child{border-top:0;}

/* the day's background: borders, weekend, outside the month, today, selected */
.bg{border-left:1px solid var(--ground-alt);cursor:pointer;}
.bg.c0{border-left:0;}
.bg.wkend{background:color-mix(in srgb,var(--ground-alt) 42%,transparent);}
.bg.out{background:repeating-linear-gradient(135deg,transparent 0 7px,color-mix(in srgb,var(--ground-alt) 70%,transparent) 7px 8px);}
.bg.today{background:color-mix(in srgb,var(--vermilion) 8%,var(--paper));}
.bg.sel{box-shadow:inset 0 0 0 2px var(--dark);}

.week .n{grid-row:1;justify-self:start;align-self:start;z-index:1;position:relative;margin:6px 0 2px 6px;width:30px;height:30px;border:0;border-radius:50%;
  background:none;color:var(--dark);font-family:var(--font-logo);font-weight:500;font-size:16px;cursor:pointer;display:grid;place-items:center;}
.week .n:hover{background:var(--ground-alt);}
.week .n.sel:not(.today){background:var(--dark);color:var(--on-dark);}
.week .n.today{color:var(--vermilion);font-weight:700;}
/* a hand-drawn ring round today */
.week .n.today::after{content:"";position:absolute;inset:-4px -6px;border:2.5px solid var(--vermilion);border-radius:48% 52% 45% 55% / 55% 45% 58% 42%;transform:rotate(-8deg);}
.n.out,.cell.out,.mini.out{opacity:.42;}
.n.past:not(.out),.cell.past:not(.out),.mini.past:not(.out){opacity:.62;}

.mini{grid-row:1;justify-self:end;align-self:start;z-index:1;margin:6px 6px 0 0;width:26px;transform:rotate(var(--r,4deg));pointer-events:none;
  box-shadow:0 2px 5px rgba(0,0,0,.25);border:2px solid #fff;}
.mini img{display:block;width:100%;height:auto;}

/* a multi-day event: one bar across its days, title once */
.band{z-index:1;min-width:0;height:var(--lane-h);margin:0 4px;padding:0 8px;display:flex;align-items:center;border-radius:6px;
  /* Stripes read as "a stretch of time" and keep a navy school holiday from going grey. */
  background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--c) 16%,var(--paper)) 0 7px,color-mix(in srgb,var(--c) 30%,var(--paper)) 7px 14px);
  border-left:3px solid var(--c);color:var(--text);font-size:11.5px;font-weight:600;text-decoration:none;overflow:hidden;}
.band span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.band:hover,.band:focus-visible{background:color-mix(in srgb,var(--c) 34%,var(--paper));}
.band.cut-l{margin-left:0;border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;padding-left:10px;}
.band.cut-r{margin-right:0;border-top-right-radius:0;border-bottom-right-radius:0;}
.band.past{opacity:.62;}

/* the day's own entries */
.cell{z-index:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding:2px 4px 8px;cursor:pointer;}
/* Up to two lines: a cell is about 130px wide at desktop, and one line cut
   "VG en NG Kerkdiens" to "VG en NG K...". */
.chip{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;font-size:11.5px;line-height:1.3;padding:3px 7px 0;border-radius:6px;overflow:hidden;overflow-wrap:anywhere;
  /* Overflow is clipped at the PADDING edge, so bottom padding showed a sliver of a third line.
     The bottom spacing is a transparent border instead, which content never paints into. */
  border-bottom:3px solid transparent;max-height:calc(2.6em + 6px);
  background:color-mix(in srgb,var(--c) 18%,var(--paper));border-left:3px solid var(--c);color:var(--text);text-decoration:none;}
.chip b{font-weight:700;margin-right:5px;font-variant-numeric:tabular-nums;}
.chip:hover,.chip:focus-visible{background:color-mix(in srgb,var(--c) 32%,var(--paper));}
.more{align-self:flex-start;border:0;background:none;font:600 11.5px var(--font-body);color:var(--dark);padding:1px 4px;cursor:pointer;text-decoration:underline;}
.dots{display:none;gap:3px;flex-wrap:wrap;}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--c);}

@media (max-width:640px){
  .wallcal{--lane-h:6px;padding-inline:8px;}
  .month{border-radius:8px;}
  .week{min-height:62px;row-gap:2px;}
  .dow{text-align:center;padding:0 0 6px;letter-spacing:.04em;}
  .week .n{justify-self:center;margin:4px 0 0;font-size:15px;width:28px;height:28px;}
  .chip,.more,.mini{display:none;}
  .band{margin:0 1px;padding:0;border-left:0;border-radius:3px;background:var(--c);}
  .band span{display:none;}
  .cell{align-items:center;padding:2px 0 6px;}
  .dots{display:flex;justify-content:center;}
}

/* the chosen day, under the grid */
.agenda{margin-top:24px;}
.agenda h3{display:flex;align-items:center;gap:10px;font-family:var(--font-logo);font-weight:600;font-size:21px;color:var(--dark);margin-bottom:12px;}
.agenda h3 small{font:600 11px var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--vermilion);border-radius:99px;padding:4px 10px;}
.agenda ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.agenda a{display:grid;grid-template-columns:minmax(64px,auto) minmax(0,1fr) auto;gap:14px;align-items:center;text-decoration:none;color:var(--text);
  background:color-mix(in srgb,var(--c) 12%,var(--paper));border-left:5px solid var(--c);border-radius:10px;padding:12px 14px;transition:background .15s;}
.agenda a:hover,.agenda a:focus-visible{background:color-mix(in srgb,var(--c) 24%,var(--paper));}
.agenda .t{font-family:var(--font-logo);font-weight:600;font-size:14.5px;max-width:130px;line-height:1.25;}
.agenda .x b{display:block;font-family:var(--font-display);font-weight:600;font-size:16px;line-height:1.25;}
.agenda .x span{display:block;font-size:13px;color:var(--text-soft);margin-top:2px;}
.agenda img{width:46px;height:auto;max-height:64px;object-fit:cover;border-radius:3px;box-shadow:0 3px 8px rgba(0,0,0,.2);}
.agenda p{color:var(--text-soft);font-size:14.5px;}
.agenda p.next{margin:16px 0 8px;color:var(--dark);font-weight:600;}
@media (max-width:480px){.agenda a{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;}.agenda .t{grid-column:1/-1;max-width:none;font-size:13px;}}
@media (prefers-reduced-motion:reduce){.agenda a{transition:none;}}

/* ---- the paid "Featured" spot -------------------------------------------
   Always labelled, in words, wherever the pin appears. The row sits above the
   date order; the pin also keeps its place in the date order. */
.featured-row{margin-bottom:30px;padding-bottom:26px;border-bottom:2px dashed rgba(74,45,18,.3);}
.featured-row .pins{grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));}
@media (max-width:560px){.featured-row .pins{grid-template-columns:minmax(0,1fr);max-width:320px;}}
.pin .flag{position:absolute;z-index:2;top:14px;right:-7px;background:var(--vermilion);color:#fff;
  font-family:var(--font-logo);font-weight:600;font-size:12.5px;letter-spacing:.03em;padding:4px 12px 4px 11px;
  box-shadow:0 2px 4px rgba(0,0,0,.25);}
.pin .flag::after{content:"";position:absolute;right:0;bottom:-6px;border-left:7px solid color-mix(in srgb,var(--vermilion) 55%,#000);border-bottom:6px solid transparent;}
.pin.is-featured{box-shadow:0 0 0 3px color-mix(in srgb,var(--vermilion) 70%,transparent),0 14px 24px -10px var(--shade);}

@media (prefers-reduced-motion:reduce){
  .pin,.flyer{transition:none;}
  .pin:hover,.pin:focus-visible,.flyer:hover,.flyer:focus-visible{transform:rotate(var(--r));}
}