/* Desktop month grid, ported from the PO mockup (maatha-calendar-2026-10-v12.html); scoped under .mcal.
   Phones keep the older Tailwind grid. Colours/font come from tmc90-theme.css; text sizes = .tp-* scale. */
.mcal{
  --orange:#FF7700; --orange-soft:#FFF1E2; --orange-ink:#B55D00;
  --rose:#F4DBD7; --rose-ink:#BD5746;
  --green:#248D49; --green-ink:#0F6E3C; --red:#D14343;
  --body:#2B2524; --head:#35343D; --muted:#8A817A; --grey:#6B6259;
  --line:#E9E1D6; --rule:#ECE8E3;
  --pill:32px;
  --ff-ta:'Anek Tamil','Noto Sans Tamil',system-ui,sans-serif;
  --ff-num:'Inter',system-ui,sans-serif;
  color:var(--body); font-family:var(--ff-ta);
}
.mcal *,.mcal *::before,.mcal *::after{box-sizing:border-box}
.mcal .num{font-family:var(--ff-num)}

.mcal .crumb{font-size:12px; color:var(--muted); line-height:1.6; margin-bottom:6px}
.mcal .crumb a{color:var(--muted)}
.mcal .crumb a:hover{color:var(--orange)}

/* page head: title left, month/year picker right */
.mcal .ph{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:20px}
.mcal .ph h1{margin:0; color:var(--head); font-size:26px; line-height:1.4; font-weight:700}
.mcal .ph h1 .sub{display:block; font-size:13px; font-weight:500; color:var(--muted); line-height:1.5; margin-top:2px}
.mcal .ph .ctl{display:flex; gap:8px; align-items:center}
.mcal .sel{appearance:none; -webkit-appearance:none; border:1px solid var(--line); border-radius:8px; background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%236B6259' stroke-width='1.5'/></svg>") no-repeat right 10px center; padding:7px 28px 7px 11px; font:600 14px var(--ff-num); color:var(--head); min-height:38px; cursor:pointer}
.mcal .go{border:0; border-radius:8px; background:var(--orange); color:#fff; font:600 13px var(--ff-ta); min-height:38px; padding:0 18px; cursor:pointer}
.mcal .go:hover{filter:brightness(.95)}

/* previous / this / next month */
.mcal .mnav{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 20px}
.mcal .mnav button{display:inline-flex; align-items:center; gap:4px; border:1px solid var(--line); border-radius:var(--pill); padding:7px 14px; font:600 13px var(--ff-ta); line-height:1.5; color:var(--orange-ink); background:#fff; white-space:nowrap; cursor:pointer}
.mcal .mnav button:hover{background:var(--orange-soft)}
.mcal .mnav .cur{text-align:center; line-height:1.3}
.mcal .mnav .cur b{display:block; font-size:15.5px; color:var(--head)}
.mcal .mnav .cur span{font-size:12px; color:var(--muted)}

/* weekday names */
.mcal .cal-h{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:4px}
.mcal .cal-h span{text-align:center; line-height:1.6; padding:4px 0; font-size:12.5px; font-weight:700; color:var(--grey)}
.mcal .cal-h span:first-child{color:var(--rose-ink)}

/* day cells */
.mcal .cal{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.mcal .cal .pad{min-height:118px; border-radius:10px; background:#FAF7F2}
/* Cells after the earlier monthly calendar (user's reference): mild pink, no border, the date big and centred. */
.mcal .cal .dc{position:relative; min-height:118px; border:0; border-radius:10px; background:#FCF0F0; padding:20px 7px 38px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#1B1B1B; text-decoration:none; transition:background-color .15s}
.mcal .cal .dc:hover{background:#F8E2E2}
.mcal .cal .dc .tn{position:absolute; top:4px; right:8px; font-size:14px; color:#1B1B1B; font-weight:500; line-height:1.4; white-space:nowrap; max-width:95%; overflow:hidden; text-overflow:ellipsis}
.mcal .cal .dc b{font-family:var(--ff-num); font-size:36px; line-height:1.1; font-weight:500; color:#1B1B1B}
.mcal .cal .dc .nk{font-size:12px; color:var(--muted); line-height:1.4; margin-top:3px; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis}
/* TMC-153: the day's second star, right under the first. */
.mcal .cal .dc .nk2{margin-top:0}
.mcal .cal .dc .dots{position:absolute; bottom:7px; right:8px; display:flex; gap:3px}
.mcal .cal .dc .mic{position:absolute; top:5px; left:7px; display:flex; gap:2px; align-items:flex-start; line-height:0}
.mcal .cal .dc .mic img.sm{width:16px; height:16px; margin:3px 0 0 2px}
.mcal .cal .dc .mic img{width:22px; height:22px; object-fit:contain}
/* Festival and viratham icons keep to a strip at the bottom (the cell's bottom padding), below the date and star name. */
.mcal .cal .dc .vic{position:absolute; bottom:5px; left:6px; display:flex; gap:2px; align-items:flex-end; line-height:0}
.mcal .cal .dc .vic img{width:28px; height:28px; object-fit:contain}
.mcal .cal .dc .vic img.sm{width:18px; height:18px; margin:0 0 4px 4px}
/* TMC-125: a viratham's special name for the day (மகாளய அமாவாசை) under the star. */
.mcal .cal .dc .spn{font-size:11.5px; font-weight:600; color:var(--rose-ink); line-height:1.4; margin-top:1px; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis}
.mcal .cal .dc.today .spn{color:#fff}
/* TMC-146: the Tamil month's name on the day it starts (and the month's first day), under the star. */
.mcal .cal .dc .tmn{font-size:11.5px; font-weight:600; color:var(--orange-ink); line-height:1.4; margin-top:1px; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis}
.mcal .cal .dc.today .tmn{color:#fff}
/* TMC-125: a festival's icon and name on one line at the bottom left (the name wraps to two lines at most). */
.mcal .cal .dc .fst{position:absolute; bottom:6px; left:6px; right:6px; display:flex; align-items:center; gap:5px; text-align:left}
.mcal .cal .dc .fst img{width:24px; height:24px; object-fit:contain; flex:0 0 auto}
.mcal .cal .dc .fst span{font-size:11px; font-weight:600; color:var(--rose-ink); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.mcal .cal .dc.today .fst span{color:#fff}
.mcal .cal .dc.red b,.mcal .cal .dc.red .tn{color:#DC2626}
.mcal .cal .dc.today,.mcal .cal .dc.today:hover{background:var(--orange)}
.mcal .cal .dc.today b,.mcal .cal .dc.today .tn,.mcal .cal .dc.today .nk{color:#fff}

/* Desktop events (TMC-125): pills over the விரத நாட்கள் hub table (sirappu-naatkal.css .mt-tbl), then the month notes and FAQ. */
.mev .ev-h{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px}
.mev h2{margin:0; font-size:20px; line-height:1.5; font-weight:700; color:var(--head)}
.mev .ev-n{font-size:13px; color:var(--muted)}
.mev .ev-n b{font-family:var(--ff-num); color:var(--head)}
.mev .ev-pills{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px}
.mev .ev-pills button{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:var(--pill); background:#fff; padding:7px 16px; font:500 14px var(--ff-ta); line-height:1.5; color:var(--head); cursor:pointer}
.mev .ev-pills button img{width:18px; height:18px; object-fit:contain}
.mev .ev-pills button:hover{border-color:var(--orange)}
.mev .ev-pills button.on{background:var(--orange); border-color:var(--orange); color:#fff; font-weight:600}
.mev .ev-tw{border:1px solid var(--line); border-radius:13px; overflow:hidden; background:#fff}
.mev .ev-tbl{width:100%; border-collapse:collapse; table-layout:fixed}
.mev .ev-tbl col.k{width:22%}
.mev .ev-tbl col.v{width:78%}
.mev .ev-tbl th{background:var(--rose); color:#3B2B28; font-size:13px; font-weight:700; line-height:1.7; text-align:left; padding:11px 16px}
.mev .ev-tbl td{padding:13px 16px; border-top:1px solid var(--rule); vertical-align:top; font-size:14px; line-height:1.9}
.mev .ev-tbl tbody tr:nth-of-type(even) td{background:#FFFBF6}
.mev .ev-k .nm{display:flex; align-items:center; gap:8px; font-weight:700; color:var(--rose-ink); font-size:14.5px; line-height:1.4}
.mev .ev-k .nm img{width:22px; height:22px; object-fit:contain; flex:0 0 auto}
.mev .ev-k .nm img.sm{width:16px; height:16px; margin:0 3px}
.mev .ev-k small{display:inline-block; margin:4px 0 0 30px; font:600 11.5px var(--ff-num); color:var(--orange-ink); background:var(--orange-soft); border-radius:var(--pill); padding:1px 8px}
.mev .ev-k em{display:block; width:fit-content; margin:5px 0 0 30px; font-style:normal; font-size:11.5px; font-weight:600; color:var(--head); border:1px solid var(--grey); border-radius:var(--pill); padding:0 8px; line-height:1.7}
.mev .ev-g{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.mev .ev-d{border-left:3px solid #F2C9A5; padding:2px 0 2px 10px; line-height:1.55}
.mev .ev-d b{display:block; font-family:var(--ff-num); font-size:14px; color:var(--head)}
.mev .ev-d span{display:block; font-size:13px; color:var(--green-ink); font-weight:600}
.mev .ev-d em{display:block; font-style:normal; font-size:12.5px; color:var(--grey); font-weight:600}
.mev .ev-none{text-align:center; color:var(--muted); padding:20px 0}
.mev .mn{margin-top:36px}
.mev .mn h2 span{font-family:var(--ff-num)}
.mev .mn p{font-size:14.5px; line-height:1.9; color:var(--body); margin:8px 0 0; max-width:900px}
.mev .mn .fq-h{margin-top:28px}
.mev .fq{margin-top:8px; max-width:900px}

/* The month stays a comfortable size, whatever the page width. */
.mcal{max-width:1200px; margin-left:auto; margin-right:auto}