/* ==================================================================
   modern.css — consolidated stylesheet for the calendar worker
   ------------------------------------------------------------------
   Replaces the legacy template stack (default.css, layout.css,
   media-queries.css, font-awesome.min.css). Design values are carried
   over verbatim from the holeeday-style restyle (see html.js history):
   dark #0f0f0f stage, Merriweather countdown numerals with dotted
   separators, uppercase Montserrat labels, glass pill navigation,
   Discord-dark management console.

   Sections:
     1. Design tokens
     2. Reset
     3. Base typography & links
     4. Countdown hero (nav pills, details, counter)
     5. Management console (table, forms)
     6. Responsive breakpoints
   ================================================================== */

/* ------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------ */
:root {
  /* Color — countdown stage */
  --color-bg: #0f0f0f;                       /* page background */
  --color-stage-fallback: #66ccff;           /* pre-backstretch hero fill */
  --color-text-light: #ffffff;
  --color-text-muted: rgba(255, 255, 255, .6);
  --color-accent-gold: #ffd700;              /* highlighted event name */
  --color-accent-sky: #66ccff;               /* "Time Left" heading */
  --color-link-bright: #1e90ff;              /* nav hover / current pill */
  --color-pill: rgba(255, 255, 255, .1);     /* nav pill fill */
  --color-pill-hover: rgba(255, 255, 255, .2);
  --color-separator: rgba(255, 255, 255, .2);/* dotted unit separators */
  --shadow-hero-strong: rgba(0, 0, 0, .5);
  --shadow-hero-soft: rgba(0, 0, 0, .3);

  /* Color — management console */
  --color-mgmt-bg: #36393f;
  --color-mgmt-panel: #2f3136;
  --color-mgmt-input: #23252a;
  --color-mgmt-border: #4a4d54;
  --color-mgmt-text: #dcddde;
  --color-mgmt-accent: #7289da;
  --color-mgmt-accent-hover: #5b73c7;

  /* Typography */
  --font-serif: 'Merriweather', Georgia, serif;
  --font-heading: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 30px;
  --space-7: 48px;

  /* Radii */
  --radius-sm: 3px;
  --radius-md: 4px;

  /* Layout */
  --row-width: 1008px;
}

/* ------------------------------------------------------------------
   2. Reset (lean)
   ------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img { max-width: 100%; height: auto; border: 0; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Inline SVG icons (replaces Font Awesome glyph font) */
.icon-svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -.125em;
}

/* ------------------------------------------------------------------
   3. Base typography & links
   ------------------------------------------------------------------ */
body.page-countdown {
  background: var(--color-bg);
  color: var(--color-text-light);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body.page-mgmt {
  background-color: var(--color-mgmt-bg);
  color: var(--color-mgmt-text);
  font-family: var(--font-system);
  margin: 0;
  padding: var(--space-5);
}

a {
  text-decoration: none;
  color: inherit;
  transition: color .3s ease-in-out;
}

/* Shared centered row container (legacy Skeleton grid remnant) */
.row {
  width: 96%;
  max-width: var(--row-width);
  margin: 0 auto;
}

.twelve.columns {
  position: relative;
  width: 100%;
  padding: 0 var(--space-5);
  min-height: 1px;
}

/* ------------------------------------------------------------------
   4. Countdown hero
   ------------------------------------------------------------------ */

/* Stage ------------------------------------------------------------ */
#intro {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  background: var(--color-stage-fallback); /* hidden once backstretch loads */
  background-size: cover;
  padding-top: 100px; /* space for absolute header */
  padding-bottom: 102px;
}

/* Header & logo ----------------------------------------------------
   Normal document flow: logo on top, nav pills centred beneath it,
   main content follows. Fixes the old overlap where the absolutely
   positioned logo collided with the pill row on mobile. */
#intro header.row {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: var(--row-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--space-6);
  z-index: 10;
}

#logo {
  text-align: center;
}

#logo img { max-height: 80px; }

/* Navigation ---------------------------------------------------------
   Standard hamburger menu floating in the top-right corner. The icon
   button is fixed above everything; tapping it drops down the link
   panel (html.js toggles .open on both button and nav). Safe-area
   insets keep it clear of notches and mobile browser chrome. */
#nav-toggle {
  position: fixed;
  top: calc(var(--space-4) + env(safe-area-inset-top));
  right: calc(var(--space-4) + env(safe-area-inset-right));
  z-index: 10001;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-pill);
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background .2s;
}
#nav-toggle:hover { background: var(--color-pill-hover); }
#nav-toggle:focus-visible { outline: 2px solid var(--color-link-bright); outline-offset: 2px; }
#nav-toggle .bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: var(--color-text-light);
  transition: transform .2s, opacity .2s;
}
#nav-toggle.open .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#nav-toggle.open .bar:nth-child(2) { opacity: 0; }
#nav-toggle.open .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

nav#nav-wrap {
  position: fixed;
  top: calc(var(--space-4) + env(safe-area-inset-top) + 52px);
  right: calc(var(--space-4) + env(safe-area-inset-right));
  z-index: 10000;
  min-width: 12em;
  margin: 0;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: rgba(17, 19, 26, .78);
  box-shadow: 0 10px 30px var(--shadow-hero-soft);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-family: var(--font-heading);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
nav#nav-wrap.open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .18s ease, transform .18s ease;
}

nav#nav-wrap ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav#nav-wrap li { margin: 0; }

nav#nav-wrap a {
  display: block;
  color: var(--color-text-light);
  text-decoration: none;
  text-align: center;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  transition: background .2s, color .2s;
}

nav#nav-wrap a:hover {
  background: var(--color-pill-hover);
  color: var(--color-link-bright);
}

nav#nav-wrap li.current a { color: var(--color-link-bright); }

/* Main column ------------------------------------------------------ */
#main {
  margin: var(--space-7) auto 0;
  text-align: center;
}

#main h1 {
  color: var(--color-text-light);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 1rem;
  padding: 0 10%;
  text-shadow: 0 2px 4px var(--shadow-hero-soft);
}

#main p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 33px;
  color: var(--color-text-light);
  margin-bottom: 18px;
  padding: 0 18%;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}

#main p span {
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 33px;
  font-weight: 700;
  color: var(--color-text-light);
  text-decoration: underline;
  text-shadow: 4px 4px 4px rgba(0, 0, 0, .8);
}

#details {
  color: var(--color-text-light);
  font-size: 1.2rem;
  margin: 0 auto 2rem;
  text-align: center;
  text-shadow: 0 1px 2px var(--shadow-hero-soft);
  max-width: 800px;
  padding: 0 var(--space-5);
}

#details span {
  font-weight: 700;
  color: var(--color-accent-gold);
}

#main h5 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 32px;
  line-height: 24px;
  color: var(--color-accent-sky);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}

/* Countdown counter --------------------------------------------------
   Big Merriweather numerals separated by dotted rules, uppercase
   Montserrat unit labels beneath. */
#main #counter {
  display: flex;
  width: 75%;
  color: var(--color-text-light);
  text-align: center;
  margin: 18px auto 0;
}

#main #counter span {
  flex: 1 1 0;
  min-width: 25%;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 70px;
  line-height: 1em;
  display: block;
  padding: 12px 0 30px;
  text-shadow: 0 1px 3px var(--shadow-hero-strong);
  border-left: 1px dotted var(--color-separator);
}

#main #counter span:first-child { border-left: none; }

#main #counter span em {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 11px;
  line-height: 18px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 12px;
  display: block;
  color: var(--color-text-muted);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}

/* ------------------------------------------------------------------
   5. Management console
   ------------------------------------------------------------------ */
.container {
  max-width: 800px;
  margin: 0 auto;
}

.back-link {
  display: inline-block;
  margin-bottom: var(--space-5);
  color: var(--color-mgmt-accent);
  text-decoration: none;
}

.back-link:hover { text-decoration: underline; }

body.page-mgmt h1 { margin-top: 0; }

body.page-mgmt table {
  width: 100%;
  margin-top: var(--space-5);
}

body.page-mgmt th,
body.page-mgmt td {
  padding: var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-mgmt-border);
}

body.page-mgmt th { background-color: var(--color-mgmt-panel); }

/* Add-entry form is the only direct form child of .container;
   per-row delete forms stay compact inside their cells. */
.container > form { margin-top: var(--space-6); }

.form-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.form-row > * {
  flex: 1;
  min-width: 200px;
}

input[type='text'],
input[type='date'] {
  padding: 10px;
  font-size: 14px;
  width: 100%;
  border: none;
  border-radius: var(--radius-md);
  background-color: var(--color-mgmt-input);
  color: var(--color-mgmt-text);
}

input[type='submit'] {
  padding: 10px 20px;
  background-color: var(--color-mgmt-accent);
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-mgmt-text);
  cursor: pointer;
  font-size: 14px;
}

input[type='submit']:hover { background-color: var(--color-mgmt-accent-hover); }

button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-mgmt-text);
  font-size: 16px;
}

button:disabled {
  opacity: .3;
  cursor: not-allowed;
}

/* ------------------------------------------------------------------
   6. Responsive breakpoints (thresholds preserved from the restyle)
   ------------------------------------------------------------------ */
@media only screen and (max-width: 1140px) {
  #intro { min-height: 100vh; }
  #main #counter { width: 70%; margin-top: 12px; }
  #main #counter span { font-size: 60px; }
}

@media only screen and (max-width: 900px) {
  #main h1 { padding: 0 8%; }
  #main p { padding: 0 10%; }
  #main #counter { width: 80%; }
  #main #counter span { font-size: 58px; }
}

@media only screen and (max-width: 767px) {
  #intro header.row { padding-top: var(--space-5); }
  #logo img { max-height: 56px; }
  #main { margin-top: 100px; }
  #main p { font-size: 14px; line-height: 24px; margin-bottom: 15px; }
  #main h5 { font-size: 12px; line-height: 24px; }
  #main #counter { width: 100%; margin: 12px 0 30px; }
  #main #counter span { font-size: 46px; padding: 9px 0 15px; }
  #main #counter span em { font-size: 9px; letter-spacing: 1px; margin-top: 6px; }
  .twelve.columns { padding: 0 var(--space-6); }
}

@media only screen and (max-width: 600px) {
  #intro h1 { font-size: 1.8rem; }
}

@media only screen and (max-width: 460px) {
  #main h1 { padding: 0 5px; }
  #main #counter { margin-bottom: 24px; }
  #main #counter span { font-size: 40px; border-left: none; }
  #main #counter span em { margin-top: 6px; }
}

@media only screen and (max-width: 400px) {
  #main p { font-size: 12px; line-height: 21px; }
  #main #counter span { font-size: 35px; }
}

/* Desktop responsive enhancements - fluid scaling to prevent scrolling */
@media only screen and (min-width: 1141px) {
  .row { max-width: 1240px; }
  header.row { max-width: 1240px; }
  #intro { padding-top: 80px; padding-bottom: 60px; }
  #logo img { max-height: clamp(60px, 8vh, 90px); }
  #main { margin-top: 80px; }
  #main #counter {
    width: 85%;
    max-width: 900px;
  }
  #main #counter span {
    font-size: clamp(50px, 6vw, 72px);
    padding: clamp(8px, 1vh, 12px) 0 clamp(16px, 2vh, 24px);
  }
  #main #counter span em {
    font-size: clamp(9px, 1vw, 11px);
  }
  #main h1 {
    font-size: clamp(2rem, 3vw, 2.8rem);
    padding: 0 4%;
    margin-bottom: 0.5rem;
  }
  #main p {
    font-size: clamp(13px, 1.5vw, 16px);
    line-height: clamp(24px, 3vh, 30px);
    padding: 0 8%;
    margin-bottom: 12px;
  }
  #main p span {
    font-size: clamp(20px, 2.5vw, 28px);
  }
  #main h5 {
    font-size: clamp(20px, 2.5vw, 26px);
    margin-bottom: 0.5rem;
  }
  #details {
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    margin-bottom: 1.2rem;
  }
}

/* Management table responsive */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media only screen and (min-width: 900px) {
  .table-wrapper { overflow-x: visible; }
  body.page-mgmt table { table-layout: fixed; }
  body.page-mgmt th:nth-child(1), body.page-mgmt td:nth-child(1) { width: 40%; }
  body.page-mgmt th:nth-child(2), body.page-mgmt td:nth-child(2) { width: 20%; }
  body.page-mgmt th:nth-child(3), body.page-mgmt td:nth-child(3) { width: 25%; }
  body.page-mgmt th:nth-child(4), body.page-mgmt td:nth-child(4) { width: 15%; }
}