/*
  FlipBook Calendar — CSS
  - Brand tokens: update :root vars to match your palette and type system.
  - Responsive: scales down cleanly to mobile.
*/

:root{
  /* BRAND TOKENS (replace with your actual brand palette + fonts) */
  --brand-primary: #8B1E2D;  /* maroon placeholder */
  --brand-secondary: #0B2A5B;/* navy placeholder */
  --brand-accent: #D4AF37;   /* gold placeholder */
  --brand-ink: #0B1220;
  --brand-muted: rgba(11,18,32,.65);
  --paper: #ffffff;
  --paper-2: #fbfbfd;

  --radius: 18px;
  --shadow: 0 18px 45px rgba(0,0,0,.18);
  --shadow-soft: 0 10px 30px rgba(0,0,0,.12);

  --font-display: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --grid-gap: 10px;
  --day-cell-min-h: 78px;

  --book-w: min(1240px, 96vw);
  --book-h: min(720px, 78vh);
  }

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  color:var(--brand-ink);
  font-family:var(--font-body);
  background:
    radial-gradient(1000px 600px at 15% 0%, rgba(212,175,55,.18), transparent 55%),
    radial-gradient(1000px 700px at 85% 15%, rgba(11,42,91,.12), transparent 60%),
    linear-gradient(180deg, #fff, #f6f7fb 55%, #f3f4f8);
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px clamp(14px, 3vw, 28px);
}

.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  width:44px; height:44px;
  border-radius:14px;
  display:grid; place-items:center;
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:.5px;
  color:#fff;
  background: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary));
  box-shadow: var(--shadow-soft);
}
.brand-title{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.1;
}
.brand-subtitle{
  color:var(--brand-muted);
  font-size: .92rem;
  margin-top:2px;
}

.controls{
  display:flex;
  align-items:center;
  gap:12px;
}
.btn{
  appearance:none;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 18px;
  cursor:pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.btn:active{ transform: translateY(1px); }
.monthLabel{
  min-width: 220px;
  text-align:center;
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:.3px;
}

.stage{
  display:flex;
  justify-content:center;
  padding: 0 clamp(14px, 3vw, 28px) 10px;
}

.book{
  width: var(--book-w);
  max-width: var(--book-w);
}

.book-shell{
  position:relative;
  width: 100%;
  height: var(--book-h);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow);
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.78));
  border: 1px solid rgba(0,0,0,.06);
  overflow:hidden;
  perspective: 1400px;
}

/* Center crease */
.book-shell::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.06) 49.6%,
      rgba(0,0,0,.10) 50%,
      rgba(0,0,0,.06) 50.4%,
      transparent 100%);
  pointer-events:none;
  opacity:.40;
}

/* Pages */
.page{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns: 1.45fr 0.55fr;
}

.sheet{
  position:relative;
  background: var(--paper);
  height:100%;
  overflow:hidden;
}

/* Left and right paper styles */
.sheet.left{
  border-right: 1px solid rgba(0,0,0,.06);
  background: linear-gradient(90deg, rgba(0,0,0,.04), transparent 22%), var(--paper);
}
.sheet.right{
  background: linear-gradient(270deg, rgba(0,0,0,.04), transparent 22%), var(--paper);
}

/* Turning layer sits on top of right side */
.turn{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transform-origin: left center;
  transition: transform 650ms cubic-bezier(.2,.75,.2,1);
  will-change: transform;
  pointer-events:auto;
}
.turn.is-animating{ pointer-events:none; }

/* Front and back faces */
.turn .face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  background: var(--paper);
}
.turn .face.back{
  transform: rotateY(180deg);
  background: var(--paper-2);
}

/* A subtle foil header line */
.month-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  padding: 18px 18px 12px 18px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background:
    radial-gradient(700px 220px at 30% -30%, rgba(212,175,55,.18), transparent 60%),
    radial-gradient(700px 240px at 70% -30%, rgba(139,30,45,.12), transparent 60%),
    linear-gradient(180deg, rgba(11,42,91,.06), transparent 55%);
}
.month-name{
  font-family:var(--font-display);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 900;
  letter-spacing:.4px;
}
.month-meta{
  display:flex;
  gap:8px;
  align-items:center;
  font-size:.92rem;
  color:var(--brand-muted);
}
.pill{
  border:1px solid rgba(0,0,0,.08);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(255,255,255,.75);
}

.grid-wrap{
  padding: 14px 14px 16px 14px;
  height: calc(100% - 64px);
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Weekday row */
.weekdays{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--grid-gap);
  font-size: .82rem;
  letter-spacing:.35px;
  color: var(--brand-muted);
  padding: 0 4px;
}
.weekdays div{ text-align:center; }

/* Calendar grid */
.grid{
  flex: 1;
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--grid-gap);
  align-content:start;
}

.day{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.85);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  padding: 10px 10px 10px 10px;
  min-height: var(--day-cell-min-h);
  display:flex;
  flex-direction:column;
  gap:8px;
  position:relative;
}
.day.is-outside{
  opacity:.45;
  background: rgba(250,250,253,.7);
}
.daynum{
  font-family:var(--font-display);
  font-weight:900;
  font-size: 0.95rem;
}
.badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.badge{
  font-size: .70rem;
  line-height:1.1;
  padding: 4px 7px;
  border-radius: 999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(212,175,55,.15);
  color: rgba(0,0,0,.78);
}
.badge.primary{
  background: rgba(139,30,45,.12);
}
.badge.secondary{
  background: rgba(11,42,91,.10);
}

/* Right column: event list + notes */
.sidebar{
  display:flex;
  flex-direction:column;
  height:100%;
}
.sidebar .grid-wrap{ height:auto; }
.sidebar-head{
  padding: 14px 16px 10px 16px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.sidebar-title{
  font-family:var(--font-display);
  font-weight:900;
}
.sidebar-note{
  font-size:.88rem;
  color:var(--brand-muted);
}
.eventlist{
  padding: 12px 16px 16px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:auto;
}
.event{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(255,255,255,.75);
}
.event-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:baseline;
}
.event-title{ font-weight:800; }
.event-date{
  font-family:var(--font-display);
  font-weight:800;
  color: var(--brand-secondary);
}
.event-desc{
  color: var(--brand-muted);
  margin-top:6px;
  font-size:.92rem;
}

/* Hint */
.hint{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 0 0;
  color: var(--brand-muted);
  font-size: .9rem;
}
.hint .dot{ opacity:.4; }

.footer{
  padding: 12px clamp(14px, 3vw, 28px) 18px;
  display:flex;
  gap:10px;
  justify-content:center;
  color: var(--brand-muted);
  font-size:.88rem;
}
.footer .sep{ opacity:.35; }

/* Responsive adjustments */
@media (max-width: 820px){
  :root{
    --book-h: min(720px, 78vh);
  --day-cell-min-h: 70px;
    --grid-gap: 8px;
  }
  .page{ grid-template-columns: 1fr; }
  .book-shell::before{ display:none; } /* no center crease in single-page mode */
  .sheet.left{ display:none; }
  .sheet.right{ width:100%; }
  .monthLabel{ min-width: 160px; }
}

@media (prefers-reduced-motion: reduce){
  .turn{ transition:none; }
}


@media (min-width: 1100px){
  :root{ --day-cell-min-h: 88px; }
}


/* Wider-screen month + highlights balance */
@media (min-width: 900px){
  .sidebar{ padding: 18px 18px 18px 18px; }
  .calendar{ padding-right: 18px; }
}