/* StayKit brand (directbookingpage.com): sand page, white bordered panels with hard shadow,
   coral primary. Light mode only.
   Kid-friendly type: Andika (made for early readers: single-storey a/g, clear I/l/1) for text,
   Fredoka (rounded) for headings. */
@import url("https://fonts.googleapis.com/css2?family=Andika:wght@400;700&family=Fredoka:wght@500;600;700&display=swap");

html:root {
  --color-background: #f8f3ec;
  --color-widget-background: #ffffff;
  --color-widget-background-highlight: #f8f3ec;
  --color-widget-content-border: #323434;
  --color-separator: #f0e4d5;
  --color-popover-background: #ffffff;
  --color-popover-border: #323434;

  --color-primary: #f96342;
  --color-positive: #24a88e;
  --color-negative: #d73c54;

  --color-text-highlight: #1e1f1f;
  --color-text-paragraph: #2b2c2c;
  --color-text-base: #3d3f3f;
  --color-text-base-muted: #5c5e5e;
  --color-text-subdue: #7a7468;

  --border-radius: 16px;
  --widget-gap: 28px;

  /* A touch bigger than Glance's defaults for young readers */
  --font-size-h1: 2.2rem;
  --font-size-h2: 2rem;
  --font-size-h3: 1.8rem;
  --font-size-h4: 1.6rem;
  --font-size-base: 1.5rem;
  --font-size-h5: 1.4rem;
  --font-size-h6: 1.25rem;
}

body {
  font-family: "Andika", ui-rounded, system-ui, sans-serif;
  font-size: var(--font-size-base);
  font-variant-ligatures: normal;
  letter-spacing: 0.01em;
  line-height: 1.55;
}

/* Panels */
.widget-content:not(.widget-content-frameless),
.widget-content-frame {
  border: 2px solid #323434;
  box-shadow: 0 6px 0 0 #323434;
}

/* Rounded headings */
.widget-header,
.size-h1,
.size-h2,
.clock-time {
  font-family: "Fredoka", ui-rounded, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0;
}

/* Small uppercase labels are hard for early readers: keep them in normal case */
.uppercase {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
}
.widget-header h2 {
  text-transform: none;
  color: #1e1f1f;
  font-size: 1.8rem;
}

/* Coral reads too light as body text on white; darken it where it's used for text */
.color-primary {
  color: #d9482a;
}

/* Week tabs: brand pill buttons */
.house-tabs label {
  border: 2px solid #323434 !important;
  color: #1e1f1f;
  font-weight: 700;
  background: #ffffff;
}
#house-week-0:checked ~ .house-tabs label[for="house-week-0"],
#house-week-1:checked ~ .house-tabs label[for="house-week-1"] {
  background: #f96342;
  border-color: #323434 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 0 0 #323434;
}
#house-week-0:checked ~ .house-tabs label[for="house-week-0"] span,
#house-week-1:checked ~ .house-tabs label[for="house-week-1"] span {
  color: inherit;
}

/* Recycling week tabs: same pills as House */
.recycle-tabs label {
  border: 2px solid #323434;
  color: #1e1f1f;
  font-weight: 700;
  background: #ffffff;
}
#recycle-week-0:checked ~ .recycle-tabs label[for="recycle-week-0"],
#recycle-week-1:checked ~ .recycle-tabs label[for="recycle-week-1"] {
  background: #f96342;
  color: #ffffff;
  box-shadow: 0 3px 0 0 #323434;
}
#recycle-week-0:checked ~ .recycle-tabs label[for="recycle-week-0"] span,
#recycle-week-1:checked ~ .recycle-tabs label[for="recycle-week-1"] span {
  color: inherit;
}