/* Astrology calendar pages. Loads after tarot.css, which carries the site's
   color tokens, fonts, page frame and footer. */

.astro {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.astro h1 {
  color: var(--ag-cream);
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  font-weight: 400;
  text-align: center;
  margin: 1.5rem 0 .75rem;
}

.astro .lede {
  max-width: 44rem;
  margin: 0 auto 1.25rem;
  text-align: center;
  line-height: 1.7;
}

.astro h2 {
  font-family: var(--ag-head);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ag-gold);
  font-size: .85rem;
  font-weight: 600;
  margin: 2.25rem 0 .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(229, 207, 118, .18);
}

.astro h3 {
  font-family: var(--ag-head);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ag-cream);
  font-size: .75rem;
  font-weight: 600;
  margin: 1.5rem 0 .5rem;
}

.astro p { line-height: 1.7; }
.astro .note { font-size: .85rem; opacity: .7; }

/* Time zone picker */
.zone-bar { text-align: center; font-size: .8rem; margin: 0 0 1.5rem; color: rgba(217, 212, 195, .7); }
.zone-select {
  background: rgba(255, 255, 255, .05);
  color: var(--ag-text);
  border: 1px solid rgba(229, 207, 118, .3);
  border-radius: 999px;
  padding: .3rem 1.8rem .3rem .7rem;
  font: inherit;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ag-gold) 50%), linear-gradient(135deg, var(--ag-gold) 50%, transparent 50%);
  background-position: right 1rem center, right .75rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.zone-select:focus-visible { outline: 2px solid rgba(229, 207, 118, .5); outline-offset: 2px; }

/* Event tables. On a phone each row becomes a stacked block. */
.astro table { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; font-size: .9rem; }
.astro caption { caption-side: top; text-align: left; font-size: .8rem; opacity: .7; padding-bottom: .4rem; }
.astro th {
  font-family: var(--ag-head);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .65rem;
  font-weight: 600;
  color: var(--ag-gold);
  text-align: left;
  padding: .4rem .6rem;
  border-bottom: 1px solid rgba(229, 207, 118, .25);
  white-space: nowrap;
}
.astro td { padding: .55rem .6rem; border-bottom: 1px solid rgba(255, 255, 255, .06); vertical-align: top; }
.astro tbody tr:hover { background: rgba(229, 207, 118, .04); }
.astro .body-name { color: var(--ag-cream); white-space: nowrap; }
.astro .pos { color: rgba(217, 212, 195, .75); white-space: nowrap; }
.astro time { color: var(--ag-text); }
.astro .rx { color: var(--ag-gold-deep); }

/* Card grid for the index */
.astro-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 1.5rem 0; }
.astro-card {
  display: block;
  background: linear-gradient(180deg, rgba(36, 39, 51, .85), rgba(26, 29, 38, .85));
  border: 1px solid rgba(229, 207, 118, .18);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s;
}
.astro-card:hover { border-color: rgba(229, 207, 118, .45); }
.astro-card h2 { margin: 0 0 .4rem; border: 0; padding: 0; font-size: .8rem; }
.astro-card p { margin: 0; font-size: .85rem; opacity: .75; line-height: 1.6; }

.year-nav { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 0 0 1rem; }
.year-nav a {
  font-family: var(--ag-head);
  letter-spacing: .1em;
  font-size: .7rem;
  color: var(--ag-gold);
  border: 1px solid rgba(229, 207, 118, .3);
  border-radius: 999px;
  padding: .3rem .9rem;
  text-decoration: none;
}
.year-nav a:hover { background: rgba(229, 207, 118, .12); }

@media (max-width: 34rem) {
  .astro table, .astro thead, .astro tbody, .astro th, .astro td, .astro tr { display: block; }
  /* A block-level table collapses its caption to the width of one cell. */
  .astro caption { display: block; width: 100%; }
  .astro thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .astro tbody tr {
    border: 1px solid rgba(229, 207, 118, .15);
    border-radius: 10px;
    padding: .6rem .3rem;
    margin-bottom: .6rem;
  }
  .astro td { border: 0; padding: .2rem .6rem; }
  .astro td[data-label]::before {
    content: attr(data-label) ": ";
    font-family: var(--ag-head);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .6rem;
    color: var(--ag-gold);
    margin-right: .35em;
  }
}