/* ===========================================================================
   What's On — stylesheet
   ---------------------------------------------------------------------------
   Organised top-to-bottom:
     1. Tokens (brand colours, fonts) as CSS custom properties
     2. @font-face
     3. Base / reset
     4. Page layout
     5. Header block
     6. Controls (select + date input)
     7. Day row
     8. Act row
     9. Footer bits
   Change a colour or font once at the top and it flows through everywhere.
   =========================================================================== */


/* ---------- 1. Tokens ---------- */

:root {
  --bg-deep:    rgb(45, 30, 135);
  --brand:      rgb(45, 29, 133);
  --day-idle:   #975eff;
  --day-active: #e71c84;
  --accent:     rgb(255, 194, 46);
  --surface:    #fff;
  --on-dark:    #fff;

  --font-light:   'MuseoSans300', 'Museo300', system-ui, sans-serif;
  --font-bold:    'Museo700', system-ui, sans-serif;
  --font-display: 'MuseoSansDisplayBlack', 'Museo700', system-ui, sans-serif;
}


/* ---------- 2. Fonts ---------- */

@font-face {
  font-family: 'Museo300';
  src: url('../assets/fonts/Museo-300.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'Museo700';
  src: url('../assets/fonts/Museo700.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'MuseoSansDisplayBlack';
  src: url('../assets/fonts/MuseoSansDisplay-Black.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'MuseoSansDisplayLight';
  src: url('../assets/fonts/MuseoSansDisplay-Light.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'MuseoSans300';
  src: url('../assets/fonts/museo-sans-300.otf') format('opentype');
  font-display: swap;
}


/* ---------- 3. Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background-color: #28113b;
}

body {
  color: var(--on-dark);
  font-family: var(--font-light);
  width: 100vw;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  top: -60px;
  left: -60px;
  right: -60px;
  bottom: -60px;
  background-color: var(--bg-deep);
  background-image: url('../assets/BG2.png');
  background-size: auto;
  background-repeat: repeat;
  filter: blur(25px) brightness(0.5);
  z-index: 0;
  pointer-events: none;
}

body > * {
  position: relative;
  z-index: 1;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}


/* ---------- 4. Page layout ---------- */

.page {
  position: relative;
  aspect-ratio: 9/20  ;
  display: flex;
  flex-direction: column;
  align-items: center;
  -webkit-box-shadow: 0px 0px 45px 10px #8c58ec;

-moz-box-shadow: 0px 0px 45px 10px #8c58ec;

box-shadow: 0px 0px 45px 10px #8c58ec;
border: 1px solid #9977d8;
  height: 98%;
  display: flex;
  flex-direction: column;
  background-image: url('../assets/BG2.png');
  background-size: cover;
  overflow-x: hidden;

}

@media (max-width: 768px) and (pointer: coarse) {
  .page{
    width: 100%;
    height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    margin-top: env(safe-area-inset-top);
    border: none;
    overflow: hidden;
  }

  .heading{
    font-size:1.8rem;
  }
}

@media (max-height: 700px) {
  .heading{
    font-size:1.8rem;
    margin-top: 2vh;
  }

  .blurb{
    font-size: 0.75rem;
    margin-bottom: 0;
  }
}
/* Decorative overlay — sits behind all content via negative z-index. */
.overlay {
  top: 0;
  left: 0;
  width: 120%;
  object-fit: contain;
  z-index: 1;
  pointer-events: none;
}

.main {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  z-index: 2;
}


/* ---------- 5. Header ---------- */

.gradient{
  width: 100%;
  height: 200px;
  background: linear-gradient(180deg, #27113b, rgba(45,30,135,0) 100%);
  position: absolute;
  top: 0;
  z-index: 1;
}

.gradientb{
  width: 100%;
  height: 200px;
  background: linear-gradient(0deg, #27113b, rgba(45,30,135,0) 100%);
  position: absolute;
  bottom: 0;
  z-index: 1;
}

.heading {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  margin: 4vh 0 0;
  z-index: 2;
}

.subheading {
  font-family: var(--font-light);
  font-size: 1.2rem;
  text-align: center;
  margin: 0;
  z-index: 2;
}

.blurb {
  font-size: 0.8rem;
  width: 70%;
  text-align: center;
  margin-top: 0;
}


/* ---------- 6. Controls ---------- */

.controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 90%;
  margin: 1em 0 0.5rem;
}

.site-select,
.date-input {
  background-color: var(--surface);
  color: var(--brand);
  font-family: var(--font-light);
  font-weight: bold;
  text-align: center;
  border: 0;
  border-radius: 10rem;
  font-size: 0.5rem;
  cursor: pointer;
  max-width: 50%;
}

.site-select {
  width: 60%;
  text-align: left;
  text-align-last: left;
  padding: 0.9em 3.2em 0.9em 1.1rem;
  font-size: 1.25rem;
  /* Native select arrow disappears with appearance:none; we draw our own
     chevron sitting inside a pink rounded square on the right edge of the pill. */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><circle cx='16' cy='16' r='16' fill='%23e71c84'/><path fill='white' d='M16 21 8 13h16z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.4em center;
  background-size: 1.75em 1.75rem;
  font-size: 1rem;
}

.site-select option {
  text-align: left;
}

.date-input {
  /* Reset iOS Safari's default date-input styling so our padding, text-align
     and font take effect. font-family must be re-asserted AFTER
     appearance:none on iOS, otherwise it falls back to the system font. */
  appearance: none;
  -webkit-appearance: none;
  padding: 1rem;
  font-size: 1rem;
  font-family: var(--font-light);
}

/* Plain-English summary of the fetched window, sits under the controls. */
.timeframe {
  font-family: var(--font-light);
  font-size: 0.7rem;
  text-align: center;
  margin: 1em 0 0.5rem;
  opacity: 0.9;
  font-weight: bold;
}


/* ---------- 7. Day row ---------- */

.days {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  z-index:2;
}

.day {
  width: 90%;
  margin: 0.5rem 0;
  display: flex;
  flex-direction: column;
  z-index: 2;
}

/* The pill button at the top of each day. Colour swaps when expanded. */
.day-toggle {
  margin: 0.5rem;
  padding: 0.5rem;
  width: 70%;
  background-color: var(--day-idle);
  color: white;
  font-family: var(--font-light);
  font-weight: bold;
  font-size: 1.1rem;
  text-align: center;
  border-radius: 10rem;
  transition: background-color 0.15s ease;
}

.day-toggle.is-open {
  background-color: var(--day-active);
}

/* The act list — hidden by default, shown when the day is open.
   app.js toggles `.is-open` on `.day-acts` alongside `.day-toggle`. */
.day-acts {
  display: none;
  flex-direction: column;
  align-items: left;
}

.day-acts.is-open {
  display: flex;
}


/* ---------- 8. Act row ---------- */

.act {
  width: 100%;
  margin: 0.5em 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1em
}

.act-toggle {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: left;
  color: var(--on-dark);
  margin-left:10%
}

.act-arrow {
  display: inline-block;
  margin-right: 1vw;
  transition: transform 0.15s ease;
}

/* Rotate the chevron when this act row is expanded. */
.act-toggle.is-open .act-arrow {
  transform: rotate(90deg);
}

.act-title,
.act-time {
  font-family: var(--font-light);
  font-size: 1rem;
  text-align: left;
}

.act-title{
  width: 70%;
}

/* Highlight the time in the brand accent colour. */
.act-time {
  color: var(--accent);
  margin-left: 0.4rem;
}

/* Image + description panel — hidden until the row is opened. */
.act-detail {
  display: none;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0.5em 0;
}

.act-detail.is-open {
  display: flex;
}

.act-image {
  max-width: calc(100% - 20%);
  object-fit: contain;
}

.act-description {
  width: 90%;
  font-size: 1rem;
  text-align: left;
  padding: 0.5rem;
  margin: 0.5em 0.5em 0.5em 10%;
}


/* ---------- 9. Footer ---------- */

.smallprint {
  color: var(--accent);
  font-size: 1rem;
  padding: 0.5rem;
}

/* Footer block that gets appended to the end of the days scroll area after
   each render, so it sits below the last day row rather than floating at
   the bottom of the page. */
.days-footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1.5rem;
  padding-bottom: env(safe-area-inset-bottom);
}

.logo {
  width: 110px;
  object-fit: contain;
}

.copyright {
  font-size: 0.75rem;
  margin: 0.5em 0 0;
}


body {
  --sb-track-color: #28113c;
  --sb-thumb-color: #e71c84;
  --sb-size: 14px;
}

::-webkit-scrollbar {
  width: var(--sb-size);
}

::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 3px;
}