/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background: linear-gradient(160deg, #ffffff, #eaf1f7);
  color: #00406C;
  font-family: Georgia, serif;
}

a {
  color: #003356;
  text-decoration: none;
  border-bottom: 1px solid #003356;
}

a:hover {
  color: #C9A227;
  background-color: #00406C;
  border-bottom-color: #C9A227;
}

.pressed {
  border-left: 2px solid #00406C;
  padding: 0.25rem 0 0.25rem 1.25rem;
  margin: 1.75rem 0;
  transition: transform 0.2s ease;
}
.pressed:hover {
  transform: translateX(4px);
}

.layout {
  display: flex;
  gap: 60px;
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px 60px;
  position: relative;
  z-index: 1;
}

.layout.has-sidebar {
  max-width: 1140px;
}

nav.sidebar {
  flex: 0 0 160px;
  border-right: 1px solid #00406C;
  padding-right: 24px;
  padding-top: 4px;
  line-height: 1.6;
}

.site-id {
  margin-bottom: 36px;
}
.site-id a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.15rem;
  font-weight: bold;
}
.site-id .tagline {
  font-size: 0.7rem;
  font-style: italic;
  opacity: 0.6;
  margin: 2px 0 0;
}

nav.sidebar a {
  display: block;
  margin-bottom: 20px;
  transition: transform 0.15s ease, color 0.15s ease;
}
nav.sidebar a:hover {
  transform: translateX(4px);
}
nav.sidebar a.current {
  color: #C9A227;
  border-bottom-color: #C9A227;
}

.group-label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  margin: 36px 0 12px;
}
.group-label:first-of-type {
  margin-top: 4px;
}

main {
  flex: 1;
  min-width: 0;
  max-width: 600px;
}

/* ---- Right sidebar (calendar / note callout / visitor counter) ---- */
.right-sidebar {
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.site-calendar,
.cal-note-callout,
.site-counter {
  position: relative;
  overflow: hidden;
  padding: 1rem;
  border: 2px solid #C9A227;
  border-radius: 6px;
  background: #F4F7FA;
  color: #00406C;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.cal-note-callout {
  border-width: 1px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
}
.cal-note-callout a {
  color: #00406C;
  border-bottom-color: #00406C;
}
.cal-note-callout.hidden {
  display: none;
}

.site-counter {
  border-width: 1px;
  text-align: center;
  font-size: 0.85rem;
}

.cal-watermark {
  position: absolute;
  inset: 0;
  background-size: 65%;
  background-repeat: no-repeat;
  background-position: center 65%;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.cal-watermark-a { background-image: url('/calendar-watermark-normal.png'); }
.cal-watermark-b { background-image: url('/jose-mari-chan.jpg'); }

.calendar-header,
.calendar-grid {
  position: relative;
  z-index: 1;
}
.calendar-header {
  text-align: center;
  font-weight: bold;
  margin-bottom: 0.75rem;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
  font-size: 0.85rem;
}
.calendar-grid .day-label {
  font-weight: 600;
  opacity: 0.6;
}
.calendar-grid .date-cell.today {
  background: #00406C;
  color: #F4F7FA;
  border-radius: 4px;
  font-weight: bold;
}

/* ---- Notes index ---- */
.notes-list {
  list-style: none;
  padding: 0;
}
.notes-list li {
  margin-bottom: 1rem;
}
.notes-list .note-date {
  display: block;
  font-size: 0.8rem;
  opacity: 0.65;
}
.notes-list li.hidden {
  display: none;
}

@media (max-width: 640px) {
  .layout {
    flex-direction: column;
    padding-top: 20px;
  }
  nav.sidebar {
    border-right: none;
    border-bottom: 1px solid #00406C;
    padding-right: 0;
    padding-bottom: 24px;
    margin-bottom: 24px;
  }
  .right-sidebar {
    flex: none;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background: linear-gradient(160deg, #002945, #002E4E, #003356);
    background-attachment: fixed;
    color: #F4F7FA;
    position: relative;
  }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
      radial-gradient(1px 1px at 10% 20%, #ffffff, transparent),
      radial-gradient(1px 1px at 30% 70%, #ffffff, transparent),
      radial-gradient(1.5px 1.5px at 50% 15%, #ffffff, transparent),
      radial-gradient(1px 1px at 65% 55%, #ffffff, transparent),
      radial-gradient(1px 1px at 80% 80%, #ffffff, transparent),
      radial-gradient(1.5px 1.5px at 90% 30%, #ffffff, transparent),
      radial-gradient(1px 1px at 15% 90%, #ffffff, transparent),
      radial-gradient(1px 1px at 45% 45%, #ffffff, transparent),
      radial-gradient(1px 1px at 25% 35%, #ffffff, transparent),
      radial-gradient(1.5px 1.5px at 70% 10%, #ffffff, transparent),
      radial-gradient(1px 1px at 95% 60%, #ffffff, transparent),
      radial-gradient(1px 1px at 5% 55%, #ffffff, transparent);
    opacity: 0.3;
    animation: twinkle 5s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
  }
  a {
    color: #7FB2D9;
    border-bottom-color: #7FB2D9;
  }
  a:hover {
    color: #C9A227;
    background-color: #00406C;
    border-bottom-color: #C9A227;
  }
  .pressed {
    border-left-color: #7FB2D9;
  }
  nav.sidebar {
    border-right-color: #7FB2D9;
  }
}

@keyframes twinkle {
  from { opacity: 0.15; }
  to { opacity: 0.4; }
}