/* MC Kaffekværnen - kalender styling
   assets/mck.css
*/

/* --- variables (nemt at justere) --- */
:root {
  --mck-weekday-height: 48px;
  --mck-cell-height: 114px;
  --mck-gap: 0;
  --mck-tile-bg: var(--wp--preset--color--accent);
  --mck-tile-border-radius: 6px;
  --mck-tile-padding: 6px 8px;
  --mck-border: 1px solid #eee;
  --mck-text: #222;
  --mck-muted: #777;
}

/* wrapper + header */
.mck-calendar-wrap {
  max-width: 100%;
  margin: 1rem 0;
  color: var(--mck-text);
}

.mck-calendar-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}

.mck-month-nav {
  text-decoration: none;
  font-size: 20px;
  padding: 6px 8px;
  border-radius: 6px;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s;
}
.mck-month-nav:hover {
  border-color: rgba(0,0,0,0.06);
  background: rgba(0,0,0,0.02);
}
.mck-month {
  font-weight: 700;
  font-size: 18px;
}

/* --- Grid calendar ---
   First row: weekday headers (small)
   Then for each week: a day-row (min height) and a tiles-row (auto)
*/
.mck-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  /* header + 6 * (day-row + tiles-row) */
  grid-template-rows: var(--mck-weekday-height) repeat(6, minmax(var(--mck-cell-height), auto) minmax(0, auto));
  gap: var(--mck-gap);
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

/* weekday header */
.mck-weekday {
  background: var(--wp--preset--color--accent);
  padding: 8px 6px;
  font-weight: 600;
  border: var(--mck-border);
  font-size: 13px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  text-transform: capitalize;
}

/* day cell (top row of each week) */
.mck-cell {
  border: var(--mck-border);
  padding: 8px;
  overflow: visible; /* IMPORTANT: allow tile overflow & let cell height grow */
  position: relative;
  background: #fff;
  box-sizing: border-box;
  min-height: var(--mck-cell-height); /* keep a minimum */
}

/* style for days not in current month */
.mck-other-month {
  background: #fafafa;
  color: var(--mck-muted);
}

/* day number in top-left of cell */
.mck-daynum {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

/* container under each week's day-row for tiles */
.mck-week-tiles {
  grid-column: 1 / 8; /* span full width of the calendar grid */
  /* grid-row is injected inline from PHP so each week has its own tiles-row */
  box-sizing: border-box;
  position: relative;
  margin-top: calc(var(--mck-cell-height) * -1 + 20px);
}

/* event tiles (stack vertically inside .mck-week-tiles).
   Horizontal layout/position is controlled from PHP via inline margin-left and width %. */
.mck-event-tile {
  background: var(--mck-tile-bg);
  border-radius: var(--mck-tile-border-radius);
  padding: var(--mck-tile-padding);
  margin: 6px 0 6px 0; /* stacked vertically inside the start-cell */
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  z-index: 5;
  overflow: hidden;
  display: block;           /* stacked vertically inside the start-cell */
  box-sizing: border-box;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .12s ease;
  /* width will be set inline from PHP, e.g. style="width: calc(200% + 6px)" */
}

/* small hover lift to highlight */
.mck-event-tile:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  z-index: 9;
}

/* label inside tile */
.mck-event-tile-label {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: middle;
}

/* hidden tooltip content (populated into #mck-global-tooltip on hover) */
.mck-event-tooltip-content { display: none; }

/* small visual indicator if you want to include an inline count (optional) */
.mck-event-indicator {
  display: inline-block;
  background: rgba(0,0,0,0.06);
  color: var(--mck-muted);
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 12px;
  margin-top: 6px;
}

/* --- Countdown styling --- */
.mck-countdown {
}
.mck-countdown-title {
  font-weight: 700;
  margin-bottom: 6px;
}
.mck-countdown-datetime {
  font-size: 14px;
  color: var(--mck-muted);
  margin-bottom: 8px;
}
.mck-countdown-timer {
  font-size: 16px;
}
.mck-line-units {
  display: flex;
  gap: 16px;
}
.mck-line-units br, .mck-line-units p {
  display: none; // fjerner p og br som er tilføjet af wp
}
.mck-unit {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--wp--preset--color--accent);
  padding: 8px 4px;
}
@media only screen and (min-width: 767px) {
  .mck-unit {
    padding: 8px 16px;
  }
}
.mck-digets {
  font-family: monospace, ui-monospace, "SFMono-Regular", Menlo, Monaco, "Roboto Mono", monospace;
  font-weight: bold;
  font-size: 1.5em;
}
.mck-label {
  text-transform: capitalize;
}

/* --- Tooltip global (created by inline script) --- */
#mck-global-tooltip {
  font-size: 13px;
  line-height: 1.4;
  color: var(--mck-text);
  background: #fff;
  border-radius: 6px;
  padding: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  max-width: 360px;
  box-sizing: border-box;
  pointer-events: none; /* makes the tooltip not steal mouse events */
}

/* --- Responsive tweaks --- */
@media (max-width: 900px) {
  :root {
    --mck-cell-height: 94px;
    --mck-weekday-height: 40px;
  }
  .mck-month { font-size: 16px; }
}

/* On narrower screens we make event tiles full width for readability */
@media (max-width: 700px) {
  .mck-calendar-grid {
    grid-template-columns: repeat(7, 1fr); /* keep columns (optional: you could collapse to 1 column but here we keep) */
    grid-template-rows: var(--mck-weekday-height) repeat(6, minmax(72px, auto) minmax(0, auto));
  }
  .mck-week-tiles { padding: 6px 4px; }
  .mck-event-time-label { display: none; }
  #mck-global-tooltip .mck-event-time-label { display: initial; }
}

/* Accessibility helpers */
.mck-event-tile:focus {
  outline: 3px solid rgba(66,133,244,0.14);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Utility: keep table-like spacing consistent */
.mck-calendar-grid, .mck-weekday, .mck-cell, .mck-week-tiles {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* End of file */