/* =====================
   Layout & Structure
   ===================== */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  font-family: 'Cinzel', serif;
  overflow-x: hidden; /* prevent horizontal overflow on small screens */
}

main {
  flex: 1;
  background:
    linear-gradient(rgba(255, 255, 255, 0.456), rgba(255, 255, 255, 0.456)),
    url('images/papyrus_texture.jpg') center center/cover no-repeat;
}

header {
  background: #7b1113;
  color: #fff;
  text-align: center;
  padding: 1rem;
  position: relative;
}

#logo {
  position: absolute;
  top: 1.6rem;
  left: 3rem;
  width: 100px;
  height: auto;
}

.homepage-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr; /* fix typo 1.fr -> 1fr */
  grid-template-areas:
    "rules center contact";
  gap: 4rem;
  align-items: start;
  padding: 1rem 0rem 1rem 2rem;
  justify-items: center;
  margin: auto;
}

.grid-side {
  /* grid-area: contact; */
  right: -7vw; /* move further right, adjust as needed */
  left: 0vw;
  top: 0;
}

.grid-center {
  grid-area: center;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-end; /* move center content further left */
  margin-left: -3vw; /* nudge center content left, adjust as needed */
}
.grid-main {
  width: 100%;
  min-width: 0;
}
/* .tablet-rules-bg.grid-side {
  justify-self: end;
  margin-right: -2; 
} */
 .scroll-contact-bg.grid-side {
  justify-self: end;
  top: 1.8rem; 
}

@media (max-width: 900px) {
  .homepage-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    grid-template-areas: "contact center rules";
    gap: 2rem;
    align-items: start;
    padding: 2rem 1rem;
  }
}

header h1 {
  margin: 0 auto;
  font-size: 2.2rem;
  text-align: center;
  font-family: 'Cinzel', serif;
}

nav {
  margin-top: 0.5rem;
}

nav a {
  color: gold;
  text-decoration: none;
  margin: 0 1rem;
  font-weight: bold;
  font-family: 'Cinzel', serif;
}

nav a:hover {
  text-decoration: underline;
}

/* =====================
   Section Containers
   ===================== */
.section-container {
  background: #fdf6e3;
  border: 6px solid #c4a000;
  border-radius: 25px;
  padding: 2rem;
  margin: 2rem auto; /* ensure centering horizontally */
  max-width: 800px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
  text-align: center;
  font-family: 'Cinzel', serif;
  display: flex;
  flex-direction: column;
  align-items: center; /* center vertically */
}

.section-container h2 {
  text-align: center;
  margin-top: 0;
  font-family: 'Cinzel', serif;
}

.section-container p {
  text-align: center;
  font-family: 'Cinzel', serif;
}

.section-container.report-box {
  padding-left: 0;
  padding-right: 0;
}
.section-container.grid-main {
  margin-bottom: 0.7rem; 
}
.grid-center > .section-container.grid-main {
  margin-bottom: 0.7rem;
}
.grid-center > .section-container.grid-main:last-child {
  margin-top: 0.2rem; 
}

/* =====================
   Buttons
   ===================== */
.btn {
  display: inline-block;
  background: #c4a000;
  color: #000;
  padding: 0.8rem 1.0rem;
  border-radius: 10px;
  font-weight: bold;
  text-decoration: none;
  transition: transform 0.2s;
  margin: 0.5rem auto;
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* Row wrapper for turning single .btn into a small button group */
.btn-row {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.btn-row .btn { margin: 0; }

.btn:hover, .report-btn:hover {
  transform: scale(1.05);
  background: gold;
}

.report-btn {
  background: #b22222;
  color: #fff;
  font-family: 'Cinzel', serif;
}
.large-report-btn {
  width: 100%;         /* fills the container */
  max-width: 100%;
  font-size: 1.5rem;
  padding: 1rem 0;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(178,34,34,0.18);
  background: #b22222;
  color: #fff;
  font-family: 'Cinzel', serif;
  font-weight: bold;
  text-align: center;
  display: block;
  margin: 0 auto;
}
.large-report-btn:hover {
  background: #d32f2f;
  transform: scale(1.09);
}

/* =====================
   Tablet Commandments (Golden Rules)
   ===================== */
.tablet-rules-bg {
  position: relative;
  background: url('images/golden_tablet.png') center center/contain no-repeat;
  max-width: 340px;
  min-height: 510px;
  margin: 1rem auto;
  padding: 2.1rem 2rem 2rem 2rem; 
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* move content to top */
  font-family: 'Cinzel', serif;
}
.tablet-title {
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 0;
  color: #4b3900;
  letter-spacing: 2px;
  text-shadow:
    0 0 2px #c4a000,
    0 0 1px #c4a000,
    1px 1px 0 #c4a000,
    -1px -1px 0 #c4a000,
    1px -1px 0 #c4a000,
    -1px 1px 0 #c4a000;
}
.tablet-rules-text {
  width: 92%;
  font-family: 'Cinzel', serif;
}
.tablet-rule {
  margin: 0rem 0.1rem;
  text-align: center;
  font-family: 'Cinzel', serif;
}
.tablet-rule-num {
  font-size: 1.3em;
  font-family: 'Cinzel', serif;
  font-weight: bold;
  color: #4b3900;
  margin-bottom: 0rem;
  text-shadow:
    0 0 2px #c4a000,   /* gold glow */
    0 0 1px #c4a000,   /* thin gold outline */
    1px 1px 0 #c4a000,
    -1px -1px 0 #c4a000,
    1px -1px 0 #c4a000,
    -1px 1px 0 #c4a000;
}
.tablet-rule-text {
  margin: 0rem 0.6rem;
  font-size: 1em;
  /* color: #4b2e05; */
  color: #000000;
  font-family: 'Cinzel', serif;
  font-weight: bold;
}

/* =====================
   Contact Scroll Section
   ===================== */
.scroll-contact-bg {
  position: relative;
  background: url('images/ContactScroll.png') center center/contain no-repeat;
  max-width: 430px;
  min-height: 430px;
  margin: 1rem auto;
  padding: 3.7rem 2.5rem 3rem 3rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* .scroll-contact-title {
  text-align: center;
  font-family: 'Dancing Script', cursive;
  font-size: 1.7em;
  font-weight: bold;
  margin-bottom: 0;
  color: #493908;
  letter-spacing: 2px;
  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
  white-space: normal;
}

.scroll-contact-text {
  width: 80%;
  font-family: 'Dancing Script', cursive; 
  font-size: 1.3em;
  color: #4b2e05;
  text-align: center;
} */

.scroll-contact-title {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.1rem;
  text-align: center;
  margin-bottom: 0rem;
}

.scroll-contact-text {
  font-family: 'Dancing Script', cursive;
  font-size: 1.2rem;
  line-height: 1.3;
  color: #4b2e05;
  max-width: 78%;
  margin: 0 auto;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

.scroll-contact-bg {
  padding: 5rem 4rem 2rem 4rem;
}

.scroll-contact-text ul {
  list-style: none;
  padding: 0;
  margin: 0rem 0 0 0;
}

.scroll-contact-text li {
  margin-bottom: 0rem;
}

.scroll-contact-text a {
  color: #7b1113;
  text-decoration: underline;
  font-family: inherit;
}

/* =====================
   Footer & Sponsors
   ===================== */
footer {
  text-align: center;
  padding: 1rem;
  background: #7b1113;
  color: #fff;
  font-family: 'Cinzel', serif;
}

footer .sponsors {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

footer .sponsors img {
  height: 40px;
  margin: 0 10px;
}

.sponsor-label {
  font-size: 1em;
  color: #fff;
  margin-left: 10px;
  font-family: 'Cinzel', serif;
  opacity: 0.8;
}

.homepage-flex {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .homepage-flex {
    flex-direction: column;
    align-items: center;
  }
}


/* =====================
   Rules page buttons
   ===================== */

.rules-btn-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
  max-width: 100%; /* or 100% for full width */
  margin: 0 auto;
}

.img-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin: 2rem 0.5rem;
  transition: transform 0.2s;
  position: relative;
}

.img-btn img {
  width: 440px;
  height: 320px;
  object-fit: contain;
  display: block;
}

.btn-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Cinzel', serif;
  font-weight: bold;
  font-size: 3.5rem;
  text-align: center;
  color: #6a4e32;
  text-shadow:
    1px 1px 2px #fff7e6,
    -2px -2px 2px #7a5c2e,
    2px 2px 6px #4b2e05,
    0 0 8px #e2c785;
  letter-spacing: 0.1em;
  pointer-events: none;
  width: 90%;
  line-height: 1.1;
}

.img-btn:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* =====================
   Pocket Rules
   ===================== */

.long-scroll-bg {
  position: relative;
  background: url('images/LongScroll.png') center top/cover no-repeat;
  width: 100vw;
  min-height: 1700px;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: 13rem 20vw 15rem 13vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.scroll-title {
  text-align: center;
  font-family: 'Indie Flower', cursive;
  font-size: 4em;
  font-weight: bold;
  margin-bottom: 0;
  color: #493908;
  letter-spacing: 2px;
}

.scroll-subtitle {
  text-align: left;
  font-family: 'Indie Flower', cursive;
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 0;
  color: #493908;
  letter-spacing: 0.7px;
}

.scroll-handwritten-text {
  width: 100%;
  font-family: 'Indie Flower', cursive;
  font-size: 1.7em;
  color: #4b2e05;
  text-align: left;
  line-height: 1.6;
}

.rules-list li {
  margin-bottom: 0.8em; /* reduce gap between bullet points */
}

/* Pocket Rules list formatting */
.rules-list {
  padding-left: 1.25rem;  /* indent numbers */
  margin: 0.25rem 0 0.5rem 0;
}
.rules-list > li {
  margin: 0.5rem 0;       /* readable spacing between items */
  line-height: 1.5;
}
.rules-list > li.no-number {
  list-style: none;          /* hide the decimal marker */
  counter-increment: list-item 0; /* do not advance the counter */
}

.rules-list > li.spacer {
  list-style: none;
  counter-increment: list-item 0; 
  padding: 0;
  margin: 0.8rem 0; 
  border: 0;
}
.rules-list > li > ul,
.rules-list > li > ol {
  margin-top: 0.35rem;    
  padding-left: 1.2rem;   
}

li.spacer { list-style: none !important; }
li.spacer::marker { content: ""; }

.rules-note {
  margin-top: 1rem;
  margin-left: 5rem; /* indent the concluding note */
}
.rules-recommended {
  margin: 0.4rem 0 0 0;
  padding-left: 1.2rem;
  list-style: disc;
}

/* make links look nice */
.rules-link {
  color: #b22222; /* or any color you like */
  font-weight: bold;
  text-decoration: underline;
  transition: color 0.2s;
}
.rules-link:hover,
.rules-link:focus {
  color: #7b1113;
}

/* =====================
   Wax Tablet FAQ Section
   ===================== */
.wax-tablet-faq {
  position: relative;
  background: url('images/WaxTablet.png') center center/contain no-repeat;
  max-width: 1400px;
  min-height: 690px;
  margin: 0 auto; /* remove extra vertical margin */
  padding: 0.5rem 2.5rem 0.5rem 2.5rem; /* reduce top/bottom padding */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.faq-tablet-title-row {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 1.2rem;
  margin-top: 2.5rem; /* was 3.5rem: move title slightly upwards */
  margin-left: 6.5rem; /* move title to the right */
}
.faq-tablet-title {
  font-family: 'Rock Salt', cursive;
  font-size: 3.2em;
  font-weight: bold;
  color: #4b3900;
  letter-spacing: 2px;
  text-shadow:
    0 0 2px #c4a000,
    0 0 1px #c4a000,
    1px 1px 0 #c4a000,
    -1px -1px 0 #c4a000,
    1px -1px 0 #c4a000,
    -1px 1px 0 #c4a000;
  margin-left: 0;
}
.faq-tablet-pages {
  display: flex;
  width: 100%;
  gap: 3rem;
  justify-content: space-between;
  margin-top: -3.5rem; /* move both columns of text upwards */
}
.faq-tablet-page.left {
  width: 85%;
  align-items: flex-end;
  margin-left: 3.5rem; /* move left text to the right */
  margin-top: 3rem;
}
.faq-tablet-page.right {
  align-items: flex-end;
  margin-top: -4rem;
  margin-left: 6rem;
}
.faq-block {
  border-radius: 0px;
  padding: 0.2rem 1.5rem;
  margin-bottom: 0.2rem;
  max-width: 80%;
}
.faq-q {
  font-family: 'Rock Salt', cursive;
  font-size: 1.1em;
  color: #4b3900;
  font-weight: bold;
  margin-bottom: 0rem;
}
.faq-a {
  font-family: 'Rock Salt', cursive;
  font-size: 0.9em;
  color: #2d1c00;
  margin-bottom: 0.1rem;
}
@media (max-width: 900px) {
  .wax-tablet-faq {
    padding: 2rem 0.5rem 2rem 0.5rem;
    min-height: 400px;
  }
  /* Nudge FAQ title up a bit on small tablets */
  .faq-tablet-title-row {
    margin-top: 1rem;
  }
  .faq-tablet-title {
    font-size: 2em;
  }
  .faq-tablet-pages {
    flex-direction: column;
    gap: 1.2rem;
  }
  .faq-tablet-page.left,
  .faq-tablet-page.right {
    align-items: stretch;   /* left-align text */
    margin: 0;              /* remove desktop offsets */
    width: 100%;
  }
  .faq-tablet-page.left { margin-bottom: 1rem; } /* add space between the two blocks */
  .faq-block { max-width: 100%; }
}

/* =====================
   Prizes pages
   ===================== */
.prize-card {
  background: #fdf6e3;
  border: 2px solid #bfa76f;
  border-radius: 12px;
  padding: 1rem;
  margin: 1rem 0;
  font-family: 'Cinzel', serif;
}

.prize-card h3 a {
  color: #7b3f00;
  text-decoration: none;
}

.prize-card h3 a:hover {
  text-decoration: underline;
}

.note {
  font-size: 0.9em;
  font-style: italic;
  color: #555;
}

.bio-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
  margin-top: 1rem;
}

.bio-photo {
  max-width: 250px;
  border: 3px solid #bfa76f; /* Roman-gold accent */
  border-radius: 12px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}

.bio-text {
  flex: 1;
  font-family: 'Cinzel', serif;
  line-height: 1.6;
}

/* Marie Curie page: wrap text around the photo */
.section-container.marie-curie .bio-text {
  text-align: left;
}
.section-container.marie-curie .bio-text .bio-photo {
  float: right;
  width: 260px;
  max-width: 40%;
  margin: 0 0 1rem 1rem; /* space between image and text */
}

@media (max-width: 768px) {
  .section-container.marie-curie .bio-text .bio-photo {
    float: none;
    display: block;
    margin: 0 auto 1rem auto;
    max-width: 70%;
    width: auto;
  }
}

/* =====================
   Winners page
   ===================== */

  .winner-photo {
    width: 50vw;         
    max-width: 500px;
    object-fit: cover;
    border-radius: 10px;
  }

/* =====================
   Mobile (<= 768px) layout changes
   ===================== */
@media (max-width: 768px) {
  /* Slightly reduce note indent on mobile for space */
  .rules-note { margin-left: 0.6rem; }
  /* FAQ: hide background wax tablet image */
  .wax-tablet-faq {
    background-image: none !important;
    background: transparent !important;
    padding: 1rem;
    max-width: 95vw;
  }
  /* Hide top-left logo on mobile */
  #logo { display: none !important; }

  /* Reflow homepage: stack sections full-width to avoid overflow */
  .homepage-layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "center"
      "rules"
      "contact";
    gap: 0.8rem;
    padding: 0; /* no side padding to prevent overflow */
    justify-items: stretch;
    width: 100%;
    box-sizing: border-box;
  }
  /* Narrow only the center sections on the homepage (not the tablet/scroll) */
  .homepage-layout .section-container.grid-main {
    width: 88vw;
    max-width: 520px;
    box-sizing: border-box;
    padding: 1rem 1.2rem;
    margin-left: auto;
    margin-right: auto;
  }
  .grid-center { grid-area: center; margin-left: 0; align-items: stretch; width: 100%; }
  .tablet-rules-bg.grid-side { grid-area: rules; position: static; }
  .scroll-contact-bg.grid-side { grid-area: contact; position: static; }
  .grid-side { right: auto; left: auto; top: auto; justify-self: stretch; width: 100%; }

  /* Make the tablet & scroll full-width, stacked */
  .tablet-rules-bg,
  .scroll-contact-bg {
    width: 100%;
    max-width: 100%;
    min-height: unset;      /* let content decide height */
    background-size: contain;
    margin: 1rem 0;
    box-sizing: border-box;
  }
  /* Different paddings for each on mobile */
  .tablet-rules-bg { padding: 3rem 2rem 4rem 2rem; }
  .scroll-contact-bg { padding: 6rem 3rem 6rem 3rem; }

  /* Reduce inner text width slightly so it doesn’t touch edges */
  .tablet-rules-text { width: 70%; }
  .scroll-contact-text { width: 70%; }

  /* Slightly smaller fonts for mobile */
  .tablet-title { font-size: 1.1em; }
  .tablet-rule-num { font-size: 1em; }
  .tablet-rule-text { font-size: 0.9em; line-height: 1.3; }
  .scroll-contact-title { font-size: 1.2em; }
  .scroll-contact-text { font-size: 1em; line-height: 1.35; }
  /* FAQ: move title upwards and add more space below it on phones */
  .faq-tablet-title-row { margin: 0.1rem 0 1.6rem 0; }
  /* Ensure FAQ text starts below the title (no negative pull-up) */
  .faq-tablet-pages { margin-top: 0; }
  
  /* Pocket rules page: remove background and tighten typography */
  .long-scroll-bg {
    background: none !important;
    width: 94vw;
    min-height: unset;
    padding: 1rem;
    margin: 0 auto;
    transform: none;
  }
  .scroll-title { font-size: 2rem; }
  .scroll-handwritten-text { font-size: 1.2rem; }
}