/* notebook.css
   Moved debate/notebook-related styles here from styles.css
*/

/* Notebook page wrapper that appears below the header images and holds the interactive list.
   Adds a mural wall background and an overlay so text remains readable. */
.notebook-page{
  width:100%;
  /* allow the notebook to expand across the page so all prompts are visible */
  max-width:1400px;
  border-radius:16px;
  padding:26px;
  box-sizing:border-box;
  position:relative;
  overflow:visible; /* show full content */
  z-index:4;
  margin:16px auto;
  background-color:var(--glass);
  display:block;
  /* allow the notebook to expand so all prompts are visible without inner scrolling */
  max-height:none;
  overflow-y:visible;
  -webkit-overflow-scrolling:auto;
  font-family: var(--elite-font);
  /* subtle glass effect + depth to lift the notebook from the mural */
  box-shadow: 0 20px 42px rgba(3,6,12,0.45), inset 0 1px 0 rgba(255,255,255,0.02);
  backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* mural background visible behind the notebook content */
.notebook-page::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image: url('/mural-lamine-nico.jpeg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  /* made mural more transparent and slightly darker for better text legibility */
  opacity:0.46;
  filter: saturate(0.85) contrast(0.9) brightness(0.54);
  transform: scale(1.02);
  pointer-events:none;
}

/* subtle dark overlay so the editable text is legible */
.notebook-page::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.26));
  pointer-events:none;
}

/* Ensure notebook inner content sits above the mural overlay */
.notebook-page > *{
  position:relative;
  z-index:2;
  color:#000;
  font-weight:600;
}

/* Title and header inside notebook */
.notebook-header h2{
  font-family: var(--elite-font);
  font-size:2.2rem;
  margin:0 0 6px 0;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-variant:small-caps;
}
.notebook-sub{
  font-size:1.05rem;
  opacity:0.9;
  margin-bottom:12px;
  letter-spacing:0.06em;
}

/* NOTE: interactive question styles */

/* interactive list base */
.notebook-list{list-style:none;padding:0;margin:0}

/* each question is now a compound element with header + note */
.question{
  display:block;
  cursor:pointer;
  outline:none;
}

/* header row */
.question .q-head{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:16px;
  border-radius:10px;
  background: rgba(255,255,255,0.02);
  border-left:10px solid rgba(255,61,129,0.06);
  transition: all .16s ease;
  user-select:text;
}
.question .q-index{
  width:36px;
  height:36px;
  flex:0 0 36px;
  border-radius:8px;
  background:rgba(0,0,0,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:rgba(0,0,0,0.72);
}
.question .q-text{
  flex:1 1 auto;
  font-size:1.36rem;
  line-height:1.4;
  font-variant:small-caps;
  text-transform:capitalize;
  color:#000;
}

/* discussed/check state */
.question.checked .q-head{
  border-left-color: rgba(0,255,213,0.95);
  background: linear-gradient(90deg, rgba(0,255,213,0.03), rgba(255,61,129,0.01));
  transform: translateX(6px);
  opacity:0.95;
}
.question .q-controls{
  display:flex;
  gap:8px;
  align-items:center;
  flex:0 0 auto;
}
.q-toggle{
  width:42px;
  height:32px;
  background:transparent;
  border:1px solid rgba(0,0,0,0.06);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.95rem;
  color:#000;
}

/* the expandable note area */
.question .note{
  margin-top:10px;
  padding:10px;
  width:100%;
  min-height:72px;
  max-height:260px;
  resize:vertical;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.9);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  font-family: inherit;
  font-size:1rem;
  color:#111;
  display:none; /* hidden until expanded */
}

/* visible when expanded */
.question.expanded .note{display:block}

/* focus + keyboard friendly */
.question:focus-within .q-head,
.question.expanded .q-head{
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}

/* Toolbar and hint styles scaled up for readability */
.notebook-toolbar .btn{font-size:1.0rem;padding:10px 12px}
.notebook-hint{font-size:0.98rem;margin-top:12px;color:rgba(0,0,0,0.7)}

/* Responsive: stack vertically on small screens so nothing is covered */
@media (max-width:900px){
  .debate-container{
    flex-direction:column;
    gap:12px;
    align-items:stretch;
    padding:0 12px;
  }
  .debate-questions{transform:none;padding:20px}
  .notebook-page{margin:8px;padding:14px}
  /* scale down type for tighter mobile fit */
  .debate-questions h2{font-size:1.4rem}
  .debate-questions ol{font-size:1.02rem; line-height:1.45}
  .debate-questions .question{font-size:1.02rem;padding:12px}
}

/* Small responsive tweaks for larger screens */
@media (min-width:700px){
  #mainContent{height:42vh}
  /* On larger screens make the debate card even more prominent */
  .debate-questions{
    max-width:1400px;
    padding:34px 44px;
    font-size:1.2rem;
  }
  .debate-questions h2{font-size:2.2rem}
  .debate-questions ol{font-size:1.8rem; line-height:1.65}
  .debate-questions .question{padding:20px 14px; font-size:1.44rem}
}

/* Slogans mural section styles */
#slogansSection{
  width:100%;
  display:flex;
  justify-content:center;
  margin:18px auto 34px;
  z-index:4;
  position:relative;
  padding:0 12px;
  box-sizing:border-box;
}
.slogans-card{
  width:100%;
  max-width:1400px;
  border-radius:14px;
  overflow:visible;
  padding:18px;
  box-sizing:border-box;
  background:transparent;
  position:relative;
}

/* big mural wall using the same mural image as background but toned down and layered
   so text cards remain highly legible while the mural still shows through */
.mural-wall{
  position:relative;
  border-radius:12px;
  min-height:220px;
  padding:36px 32px 22px 32px;
  box-sizing:border-box;
  background-image:url('/mural-lamine-nico.jpeg');
  background-size:cover;
  background-position:center;
  /* reduce saturation and darken slightly, but use an overlay for consistent contrast */
  filter: saturate(0.8) contrast(0.92) brightness(0.78);
  box-shadow: 0 20px 46px rgba(0,0,0,0.56);
  overflow:hidden;
}
/* soft vignette to focus center content and improve legibility on edges */
.mural-wall::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background: radial-gradient(1200px 600px at 50% 48%, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.30) 60%, rgba(0,0,0,0.46) 100%);
  pointer-events:none;
  mix-blend-mode:multiply;
}

/* Title placed inside the slogans card so it visually sits over the mural but does not cover any slogan.
   Added a subtle pulsing zoom animation and larger responsive size for stronger emphasis. */
@keyframes muralZoomPulse {
  0%   { transform: translateX(-50%) scale(1); }
  40%  { transform: translateX(-50%) scale(1.08); }
  60%  { transform: translateX(-50%) scale(0.98); }
  100% { transform: translateX(-50%) scale(1); }
}

.mural-title-inline{
  position:absolute;
  top:-72px; /* nudged up for larger size */
  left:50%;
  transform:translateX(-50%) scale(1);
  transform-origin:center center;
  color:#ff1a1a; /* brilliant red */
  font-family: var(--elite-font);
  font-weight:900;
  /* significantly larger and responsive (caps at a high max) */
  font-size: clamp(36px, 7.8vw, 110px);
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:10px 18px;
  border-radius:10px;
  background: rgba(255,26,26,0.06); /* subtle tint so text remains crisply red */
  text-shadow: 0 2px 0 rgba(0,0,0,0.45), 0 10px 40px rgba(255,26,26,0.16);
  z-index:6;
  pointer-events:none;
  border:1px solid rgba(255,255,255,0.04);
  white-space:nowrap; /* force single line */
  overflow:visible;
  /* gentle pulsing zoom effect */
  animation: muralZoomPulse 4.2s ease-in-out infinite;
}

/* slogan list appears on top of mural with a semi-opaque card that has more breathing room,
   larger type, and clearer contrast for scanning on mobile and desktop */
.slogan-list{
  position:relative;
  z-index:3;
  margin:0 auto;
  /* widened top padding to make room for the inline title so it doesn't cover any slogans */
  padding:90px 34px 26px;
  max-width:1320px; /* widened for broader displays */
  background: rgba(255,255,255,0.96);
  border-radius:12px;
  list-style:decimal;
  color:#0b0b0b;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, var(--elite-font);
  /* larger, more readable type for the slogans box (tuned to balance with pulsing title) */
  font-size:1.9rem;
  line-height:1.45;
  box-shadow: 0 10px 30px rgba(0,0,0,0.14);
}
.slogan-list li{
  margin:14px 0;
  padding:10px 12px;
  border-left:6px solid rgba(0,0,0,0.06);
}

/* make the brand name bold and easier to scan; allocate more room for brand label */
.slogan-list li strong{display:inline-block;width:220px; font-weight:900; color:#111; font-size:1.05em;}

/* small descriptive note under the mural */
.slogans-note{
  margin-top:12px;
  font-size:0.98rem;
  color:rgba(255,255,255,0.92);
  text-align:center;
  z-index:3;
  position:relative;
}

/* Make sure mobile layout fits without vertical clipping */
@media (max-width:900px){
  .mural-title{font-size:clamp(20px, 10vw, 42px); top:12px; padding:6px 10px}
  .mural-wall{padding:18px 14px}
  .slogan-list{
    font-size:1.0rem;
    padding:12px 14px;
    margin:0 6px;
  }
  .slogan-list li{margin:10px 0; padding:8px}
  .slogans-card{padding:10px}
}

/* --- Scramble section styles: larger, clearer, more tactile --- */
.scramble-card{
  width:100%;
  max-width:1400px;
  margin:20px auto 8px;
  padding:24px;
  box-sizing:border-box;
  border-radius:14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,245,245,0.98));
  box-shadow: 0 24px 60px rgba(0,0,0,0.18);
  border:1px solid rgba(0,0,0,0.06);
  position:relative;
  z-index:5;
}

/* larger wall container to match mural style but focused on interaction */
.scramble-wall{
  background: url('/mural-lamine-nico.jpeg') center/cover no-repeat;
  border-radius:12px;
  padding:28px;
  box-sizing:border-box;
  filter: saturate(0.7) contrast(0.9) brightness(0.85);
  position:relative;
  overflow:visible;
}

/* Title for scramble area, prominent but not overlapping controls */
.scramble-title{
  position:relative;
  margin:0 0 12px 0;
  font-weight:900;
  color:#c92121;
  font-size: clamp(22px, 4.2vw, 48px);
  letter-spacing:0.06em;
  text-transform:uppercase;
  background: rgba(255,255,255,0.92);
  display:inline-block;
  padding:8px 14px;
  border-radius:10px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  z-index:6;
}

/* instruction line */
.scramble-instruction{
  font-size:1.05rem;
  margin:8px 0 18px 0;
  color:#111;
  background: rgba(255,255,255,0.9);
  display:inline-block;
  padding:8px 12px;
  border-radius:8px;
}

/* each exercise block: bigger and card-like */
.scramble-exercise{
  background: rgba(255,255,255,0.96);
  border-radius:12px;
  padding:18px;
  margin:16px 0;
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
  display:block;
}

/* prompt text (original scrambled list) */
.scramble-prompt{
  font-size:1.05rem;
  color:#333;
  margin-bottom:12px;
  opacity:0.95;
}

/* grid of tokens */
.scramble-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:8px 0 12px 0;
  align-items:center;
}

/* token buttons */
.scramble-word{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  padding:10px 14px;
  background: linear-gradient(180deg,#fff,#f2f2f2);
  border-radius:10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
  font-weight:800;
  color:#111;
  font-size:1.05rem;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s;
}
.scramble-word:active{ transform: translateY(2px) scale(.995); }
.scramble-word[disabled]{ opacity:0.36; filter:grayscale(.25); cursor:default; transform:none; }

/* build area where user assembles words */
.scramble-build{
  min-height:56px;
  border:2px dashed rgba(0,0,0,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,250,0.98));
  border-radius:10px;
  padding:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin:12px 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

/* built tokens inside build area */
.scramble-build .scramble-word{
  background: linear-gradient(180deg,#fff7ef,#fff1e6);
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  cursor:pointer;
  font-weight:700;
  padding:8px 12px;
}

/* controls row */
.scramble-controls{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:8px;
  flex-wrap:wrap;
}
.scramble-controls .btn.small{
  padding:8px 12px;
  font-size:0.98rem;
  border-radius:8px;
}
.scramble-check{ background: linear-gradient(180deg,#00d894,#00c57a); color:#042; border:0; box-shadow: 0 8px 26px rgba(0,197,122,0.12); font-weight:800;}
.scramble-reset{ background: linear-gradient(180deg,#fff,#f4f4f4); color:#333; border:1px solid rgba(0,0,0,0.06); }

/* result message */
.scramble-result{
  margin-left:8px;
  font-weight:800;
  font-size:1.02rem;
  color:#444;
  padding:6px 8px;
  border-radius:8px;
}
.scramble-result.correct{ color: #0a7a3a; background: rgba(10,122,58,0.06); border:1px solid rgba(10,122,58,0.06);}
.scramble-result.incorrect{ color: #8b1a1a; background: rgba(139,26,26,0.04); border:1px solid rgba(139,26,26,0.04);}

/* make the whole scramble area breathe on larger screens */
@media (min-width:900px){
  .scramble-card{ padding:36px; max-width:1400px; }
  .scramble-exercise{ display:grid; grid-template-columns: 1fr 520px; gap:18px; align-items:start; padding:20px; }
  .scramble-prompt{ grid-column:1; }
  .scramble-grid{ grid-column:2; order:2; }
  .scramble-build{ grid-column:2; order:3; }
}

/* mobile-friendly adjustments so everything fits without scrolling too much */
@media (max-width:900px){
  .scramble-card{ padding:14px; margin:12px 8px; }
  .scramble-exercise{ padding:12px; }
  .scramble-word{ font-size:0.98rem; padding:8px 10px; }
  .scramble-build{ min-height:48px; padding:10px; }
  .scramble-title{ font-size:20px; }
  .scramble-instruction{ font-size:0.95rem; }
}

/* small accessibility tweak */
.scramble-word:focus{ outline:3px solid rgba(0,200,150,0.12); outline-offset:3px; }