/*
  Styles for the realistic corkboard announcement board.
  Separates presentation from logic. Images are stored in the assets folder.
*/
/* Embed the custom handwritten fonts.  The woff files live in
   assets/fonts and are bundled with the project so the site will
   render correctly offline. */
@font-face {
  font-family: 'Holidays Homework';
  src: url('assets/fonts/holidays_homework.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Papernotes';
  src: url('assets/fonts/papernotes.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
/* Almond Milky font for the board header */
@font-face {
  font-family: 'Almond Milky';
  src: url('assets/fonts/almond_milky.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
:root {
  --wood-light: #8d5e35;
  --wood-dark: #4a2f19;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  /* Use Papernotes as the primary font for regular text to give the board
     a handwritten feel. Provide system fallbacks in case the font fails
     to load. */
  font-family: 'Papernotes', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #3a2919;
  background: url('assets/wall.png') center/cover no-repeat fixed;

  /* prevent horizontal scrolling due to rotated notes or wide board */
  overflow-x: hidden;
}

header {
  padding: clamp(16px, 4vw, 32px);
  display: flex;
  justify-content: center;
}

/* board container */
.board {
  /* narrow the board slightly to provide margin on the sides for rotated notes */
  width: min(1100px, 92vw);
  position: relative;
  border: 20px solid transparent;
  /* wood frame using border-image */
  border-image: linear-gradient(180deg, var(--wood-light) 0%, var(--wood-dark) 60%, var(--wood-light) 100%) 1;
  border-radius: 12px;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.5), 0 12px 36px rgba(0, 0, 0, 0.5);
  /* increase padding to create internal margins */
  padding: clamp(20px, 3vw, 32px);
  background: url('assets/corkboard.png') center/cover repeat;

  /* allow notes to extend slightly beyond the corkboard edges; horizontal scrolling is prevented on the body */
  overflow: visible;
}

/* top bar */
.topbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 16px;
}
.title {
  /* Give the title a light paper-like background so the dark text contrasts
     against the cork. Padding and rounded corners evoke a pinned note. */
  position: relative;
  padding: 8px 12px;
  border-radius: 8px;
}
.title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /*background: rgba(255, 255, 255, 0.85);*/
  border-radius: 8px;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.2);
  z-index: -1;
}
.title h1 {
  margin: 0;
  font-size: clamp(22px, 2.8vw, 36px);
  line-height: 1.2;
  /* Title uses the Almond Milky font to stand out as a heading. */
  font-family: 'Almond Milky', 'Papernotes', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  /* Subtle white shadow behind the letters to improve contrast */
  text-shadow: 0 2px 3px rgba(255, 255, 255, 0.8);
}
.title p {
  margin: 4px 0 0;
  font-size: 15px;
  /* Darken the tagline slightly for better readability against the cork */
  /* Warmer brown tone for better contrast */
  color: #704c36;
  /* Put the tagline on a small translucent paper strip to improve contrast */
  background: rgba(255, 255, 255, 0.8);
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.input, .select, .toggle {
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background-color: rgba(255,255,255,0.9);
  min-width: 180px;
  outline: none;
}

/* Style the drop-down options to better match the board aesthetic */
.select option {
  background-color: #fdfcfb;
  color: #3a2919;
}
.select { min-width: 140px; }
.toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.toggle input {
  margin: 0;
}

/* grid layout */
.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  /* ensure grid items size to their content rather than stretching */
  align-items: start;
  grid-auto-rows: max-content;
}
/* define breakpoints for grid columns. Use wider breakpoint to give each note more space and avoid clipping */
@media (min-width: 600px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* note styling */
.note {
  position: relative;
  padding: 20px 20px 16px;
  border-radius: 12px;
  /* lined paper effect generated with CSS. The first gradient draws horizontal lines, the second applies a very subtle grain. */
  background-color: #fdfcfb;
  background-image:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0.06) 0px, rgba(0,0,0,0.06) 2px, transparent 2px, transparent 24px),
    repeating-linear-gradient(to bottom, rgba(0,0,0,0.02) 0px, rgba(0,0,0,0.02) 1px, transparent 1px, transparent 4px);
  border: 1px solid rgba(0,0,0,0.15);
  box-shadow: 2px 4px 12px rgba(0,0,0,0.3), inset 0 0 6px rgba(0,0,0,0.08);
  transform-origin: 50% 10%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-height: 180px;

  /* Add horizontal margins inside each grid cell so the note
     doesn't touch the cell edges; helps avoid clipping at board borders */
  margin-inline: clamp(6px, 1vw, 14px);
}
.note:hover {
  transform: rotate(0deg) translateY(-3px);
  box-shadow: 4px 6px 18px rgba(0,0,0,0.4), inset 0 0 12px rgba(255,255,255,0.4);
}
.note h2 {
  margin: 12px 0 8px;
  font-size: 16px;
  line-height: 1.3;
  /* Use the Papernotes font for note titles so they match the body text. */
  font-family: 'Papernotes', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.note p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: #3d2d1d;
}
.meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  font-size: 12px;
  color: #745737;
}
.tag {
  background: #3f2b1b;
  color: #fff;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
}

/* push pin created via CSS; color assigned inline */
.pin {
  width: 18px;
  height: 18px;
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0,0,0,0.4);
  z-index: 5;
}

/* tape effect for text notes */
/*
  More realistic tape effect for text notes.
  The tape is composed of two pseudo‑elements representing pieces of tape on
  either side. Each piece uses layered gradients to simulate the semi‑transparent
  look of real masking tape with subtle fibres and shading. The container has
  zero height; the pseudo elements provide the visual.
*/
.tape {
  position: absolute;
  top: -14px;
  left: 14px;
  right: 14px;
  height: 0;
  pointer-events: none;
}
.tape::before,
.tape::after {
  content: '';
  position: absolute;
  width: 70px;
  height: 28px;
  background:
    linear-gradient(to bottom, rgba(255,255,230,0.7), rgba(255,255,230,0.4)),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.4) 0 2px, rgba(255,255,255,0.2) 2px 4px);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.35);
}
.tape::before {
  left: 0;
  transform: rotate(-5deg);
}
.tape::after {
  right: 0;
  transform: rotate(5deg);
}

/* binder clip effect for image notes */
.clip {
  position: absolute;
  /* lift the clip so its body sits above the top of the note */
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 20px;
  /* Shape the binder clip body like a trapezoid: narrower at the top and wider at the bottom. */
  clip-path: polygon(18% 0%, 82% 0%, 100% 100%, 0% 100%);
  /* Use a radial gradient to simulate a shiny metallic surface; the highlight
     emanates from the top-left and fades towards the base colour. */
  background: radial-gradient(circle at 30% 20%, #ffffff 0%, var(--clip-colour) 60%, #3a2919 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.6);
}
/* Draw the binder clip arms as hollow loops with a slightly darker stroke. */
.clip::before, .clip::after {
  content: '';
  position: absolute;
  top: 4px;
  width: 12px;
  height: 16px;
  /* Loop border colour uses the CSS variable --clip-border for subtle shading */
  border: 2px solid var(--clip-border);
  border-top: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.clip::before {
  left: 6px;
  transform: rotate(-8deg);
}
.clip::after {
  right: 6px;
  transform: rotate(8deg);
}

/* flyer image container inside notes */
.flyer {
  margin-top: 12px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.2);
  cursor: zoom-in;
}

/* flyer images should preview at a reasonable size. Limit the height and crop with object-fit */
.flyer img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 320px;
  object-fit: cover;
}

/* lightbox overlay */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.lightbox.open {
  display: flex;
}
.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
.lightbox button {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 14px;
  cursor: pointer;
}

/* empty state */
.empty {
  text-align: center;
  color: #4f3826;
  padding: 24px;
  font-size: 16px;
}
/* ====================================================================== */
/* Added watermark to board and fixed dropdown font */

/* Make board relative to position to contain pseudo-element */
.board {
  position: relative;
}

/* Add a faint watermark centred behind the corkboard */
.board::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  max-width: 500px;
  aspect-ratio: 1/1;
  background: url('assets/watermark.png') center/contain no-repeat;
  opacity: 0.3;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}

/* Ensure board content sits above the watermark */
.board > * {
  position: relative;
  z-index: 1;
}

/* Set dropdown font to Papernotes */
.select,
.select option {
  font-family: 'Papernotes', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}