/* =====================================================================
   IGBO CALENDAR — STYLESHEET
   Design tokens live in :root. Palette drawn from earth, leaf, palm-gold
   and camwood-red tones traditionally associated with Igbo textiles,
   uli body art and market culture.
   ===================================================================== */

:root{
  /* ---- Color tokens ---- */
  --color-cream:      #F6F0E2;   /* Ala – ground / page background      */
  --color-cream-dark: #EAE0C9;   /* deeper cream for panels             */
  --color-ink:        #2E2016;   /* Oji – near-black brown, main text   */
  --color-ink-soft:   #5A4A3A;   /* secondary text                      */
  --color-ink-soft2:  #F6F0E2;   /* secondary text on site-footer       */
  --color-white:      #FFFDF8;
  --color-terracotta: #A6522D;   /* Uhie – camwood red, primary accent  */
  --color-terracotta-dark:#7E3B1E;
  --color-green:       #3B6E4E;  /* Akwụkwọ – leaf green                */
  --color-green-dark:  #274A34;
  --color-gold:        #C9922E;  /* Aku – palm-kernel gold              */
  --color-gold-dark:   #9A6E1E;
  --color-brown:       #6B4A34;  /* Ala – soil brown                    */

  /* ---- Market day colors (also used as a legend key) ---- */
  --eke:  #A6522D;
  --orie: #3B6E4E;
  --afor: #C9922E;
  --nkwo: #6B4A34;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(46,32,22,0.10), 0 1px 1px rgba(46,32,22,0.06);
  --shadow-md: 0 6px 16px rgba(46,32,22,0.14), 0 2px 4px rgba(46,32,22,0.08);
  --shadow-lg: 0 14px 30px rgba(46,32,22,0.18), 0 4px 8px rgba(46,32,22,0.10);
  --shadow-inset: inset 0 1px 2px rgba(46,32,22,0.18);

  /* ---- Radii & spacing ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* ---- Typography ---- */
  --font-main: 'Inter', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }

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

body{
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-main);
  color: var(--color-ink);
  background:
    radial-gradient(circle at 100% 0%, rgba(201,146,46,0.10), transparent 45%),
    radial-gradient(circle at 0% 100%, rgba(59,110,78,0.10), transparent 45%),
    var(--color-cream);
  line-height: 1.45;
  font-size: 16px;
}

img, svg{ display:block; max-width:100%; }

button, input, select{ font-family: inherit; }

/* Visible focus ring everywhere, for keyboard users */
:focus-visible{
  outline: 3px solid var(--color-gold-dark);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ===================== APP SHELL ===================== */

.app{
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-7);
}

/* ===================== HEADER ===================== */

.site-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid rgba(46,32,22,0.10);
}

.brand{
  display:flex;
  align-items:center;
  gap: var(--space-3);
}

.brand__mark{ flex-shrink:0; }

.logo-link{
  display:flex;
  align-items:center;
  gap: var(--space-3);
  text-decoration:none;
  color: inherit;
  border-radius: var(--radius-sm);
}
.logo-link svg{ flex-shrink:0; }
.logo-link:hover .logo-text{ color: var(--color-terracotta-dark); }

.logo-text{
  font-weight: 800;
  font-size: clamp(1.15rem, 1rem + 1vw, 1.5rem);
  letter-spacing: -0.01em;
  color: var(--color-ink);
  transition: color 0.15s ease;
}

.bead{ fill: var(--color-ink); }
.bead--eke{  fill: var(--eke); }
.bead--orie{ fill: var(--orie); }
.bead--afor{ fill: var(--afor); }
.bead--nkwo{ fill: var(--nkwo); }

.brand__text{
  display:flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand__name{
  font-weight: 800;
  font-size: clamp(1.15rem, 1rem + 1vw, 1.5rem);
  letter-spacing: -0.01em;
}

.brand__tag{
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--color-ink-soft);
  margin-top: 2px;
}

/* ===================== BUTTONS ===================== */

.btn{
  font-weight: 600;
  font-size: 0.92rem;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn--today{
  background: var(--color-white);
  color: var(--color-terracotta-dark);
  padding: 10px 20px;
  box-shadow: var(--shadow-sm);
  border: 1.5px solid rgba(166,82,45,0.35);
}
.btn--today:hover{ transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--today:active{ transform: translateY(0); box-shadow: var(--shadow-inset); }

.btn--primary{
  width: 100%;
  margin-top: var(--space-2);
  background: linear-gradient(160deg, var(--color-terracotta), var(--color-terracotta-dark));
  color: var(--color-white);
  padding: 12px 18px;
  box-shadow: var(--shadow-md);
}
.btn--primary:hover{ transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn--primary:active{ transform: translateY(0); box-shadow: var(--shadow-inset); }

.nav-btn{
  display:flex; align-items:center; justify-content:center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--color-white);
  color: var(--color-terracotta-dark);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.nav-btn:hover{ background: var(--color-cream-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.nav-btn:active{ transform: translateY(0); box-shadow: var(--shadow-inset); }

/* ===================== LAYOUT ===================== */

.layout{
  display:grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items:start;
}

@media (max-width: 800px){
  .layout{ grid-template-columns: 1fr; }
}

.card{
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
}

.card__title{
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 var(--space-1);
}

.card__hint{
  margin: 0 0 var(--space-4);
  font-size: 0.88rem;
  color: var(--color-ink-soft);
}

/* ===================== CALENDAR ===================== */

.calendar-card{ position: relative; overflow: hidden; }

.calendar-card::before{
  /* subtle woven-stripe accent evoking akwete cloth banding */
  content:"";
  position:absolute; inset:0 0 auto 0;
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--eke) 0 8%, var(--orie) 8% 16%, var(--afor) 16% 24%, var(--nkwo) 24% 32%
  );
}

.calendar-nav{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.month-title{
  margin:0;
  font-size: clamp(1.2rem, 1rem + 1.2vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align:center;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.month-title.is-swapping{ opacity:0; transform: translateY(4px); }

.weekday-row{
  display:grid;
  /* minmax(0, 1fr) — plain 1fr lets a track's default min-width:auto
     force it wider than the column actually has room for, which is
     what was pushing the last column off narrow screens. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  text-align:center;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.calendar-grid{
  display:grid;
  /* Same fix as .weekday-row above, so the two rows of 7 columns stay
     aligned and neither one can overflow the card on narrow viewports. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-2);
  transition: opacity 0.18s ease;
}

.calendar-grid.is-swapping{ opacity: 0.2; }

.day-cell{
  position:relative;
  aspect-ratio: 1 / 1;
  min-height: 52px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 2px;
  border-radius: var(--radius-sm);
  background: var(--color-cream);
  box-shadow: var(--shadow-sm);
  cursor:pointer;
  border: none;
  color: var(--color-ink);
  font-family: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.day-cell:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  background: var(--color-white);
}
.day-cell:active{ transform: translateY(0); box-shadow: var(--shadow-inset); }

.day-cell.is-empty{
  background: transparent;
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}

.day-cell__num{
  font-weight: 700;
  font-size: 0.95rem;
  line-height:1;
}

.day-cell__market{
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-ink-soft);
  line-height:1;
}

.day-cell__band{
  position:absolute;
  left:8px; right:8px; bottom:6px;
  height: 4px;
  border-radius: 2px;
}
.day-cell__band.bead--eke{ background: var(--eke); }
.day-cell__band.bead--orie{ background: var(--orie); }
.day-cell__band.bead--afor{ background: var(--afor); }
.day-cell__band.bead--nkwo{ background: var(--nkwo); }

.day-cell.is-weekend .day-cell__num{ color: var(--color-terracotta-dark); }

.day-cell.is-today{
  background: var(--color-gold);
  box-shadow: var(--shadow-md);
}
.day-cell.is-today .day-cell__num,
.day-cell.is-today .day-cell__market{ color: var(--color-white); }

.day-cell.is-selected{
  outline: 3px solid var(--color-terracotta-dark);
  outline-offset: 2px;
}

/* ===================== LEGEND ===================== */

.legend{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap: var(--space-4);
  margin: var(--space-5) 0 0;
  padding: var(--space-3) 0 0;
  border-top: 1px solid rgba(46,32,22,0.10);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-ink-soft);
}
.legend li{ display:flex; align-items:center; gap: 6px; }

.legend__dot{
  width: 11px; height: 11px;
  border-radius: 50%;
  display:inline-block;
  background: var(--color-ink);
}

/* ===================== SIDE PANEL ===================== */

.side-panel{
  display:flex;
  flex-direction:column;
  gap: var(--space-5);
}

.picker-form{
  display:grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-3);
}

.field-group{ display:flex; flex-direction:column; gap: 4px; }
.field-group--year{ grid-column: span 2; }

.field-group label{
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-ink-soft);
}

.field-group select,
.field-group input{
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(46,32,22,0.16);
  background: var(--color-cream);
  color: var(--color-ink);
  font-size: 0.92rem;
  font-weight: 600;
}

.field-group select:focus,
.field-group input:focus{
  border-color: var(--color-gold-dark);
}

.field-error{
  color: var(--color-terracotta-dark);
  font-size: 0.82rem;
  font-weight: 600;
  min-height: 1.2em;
  margin: var(--space-2) 0 0;
}

/* ===================== RESULT CARD ===================== */

.result-card{
  background: linear-gradient(165deg, var(--color-green), var(--color-green-dark));
  color: var(--color-white);
}
.result-card .card__title{ color: var(--color-white); }

.result__date{
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0 0 var(--space-4);
}

.result__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin:0;
}

.result__grid dt{
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.75;
  margin-bottom: 2px;
}

.result__grid dd{
  margin:0;
  font-weight: 700;
  font-size: 1.02rem;
}

.result__market{
  display:flex;
  align-items:center;
  gap: 7px;
}

#resultDot{ background: var(--color-white); box-shadow: 0 0 0 2px rgba(255,255,255,0.35) inset; }

/* ===================== FOOTER ===================== */

.site-footer{
  margin-top: var(--space-6);
  text-align:center;
  font-size: 0.78rem;
  color: var(--color-ink-soft2);
}

/* ===================== RESPONSIVE TWEAKS ===================== */

@media (max-width: 480px){
  .app{ padding: var(--space-4) var(--space-3) var(--space-6); }
  .day-cell{ min-height: 44px; }
  .day-cell__num{ font-size: 0.85rem; }
  .day-cell__market{ font-size: 0.56rem; }
  .brand__tag{ display:none; }
  .picker-form{ grid-template-columns: 1fr; }
  .field-group--year{ grid-column: span 1; }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; }
}