/*
 * The monthly Hindu calendar grid.
 *
 * Deliberately built on class names of its own (hc-*) rather than the ones the old layout used. The
 * page already loads roughly a dozen stylesheets, several of which style the previous calendar classes
 * with weight that is awkward to out-rank; giving the new grid its own names means the rules below are
 * the only ones that describe it, and nothing has to be fought with !important.
 *
 * The shape is a wall calendar: seven equal columns, one row per week. Every column is minmax(0, 1fr),
 * which is what keeps the boxes the same width and stops a long festival name from widening its column
 * and squeezing the rest — the failure the previous grid showed as a clipped last column.
 */

:root {
    --hc-line: #e3d9c6;
    --hc-line-strong: #d3c4a6;
    --hc-ink: #2f2a22;
    --hc-muted: #7a6a58;
    --hc-accent: #b4661a;
    --hc-accent-soft: #fff6e8;
    --hc-sunday: #c0392b;
    --hc-sunday-soft: #fdf3f1;
    --hc-today: #0e3275;
}

/* ---- the card that holds the month ---- */

.hc-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 16px;
}

.hc-card {
    background: #fff;
    border: 1px solid var(--hc-line);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(24, 44, 80, .07);
    overflow: hidden;
}

.hc-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: linear-gradient(180deg, #fff9ef 0%, #fff 100%);
    border-bottom: 1px solid var(--hc-line);
}

.hc-card__title {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
}

.hc-card__title small {
    display: block;
    color: var(--hc-muted);
    font-size: 12px;
    line-height: 1.5;
}

.hc-card__title h2 {
    margin: 2px 0 3px;
    color: var(--hc-ink);
    font-size: 26px;
    line-height: 1.25;
}

.hc-card__title span {
    display: block;
    color: var(--hc-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.hc-card__lunar {
    display: block;
    margin-top: 3px;
    color: var(--hc-accent);
    font-size: 14px;
    font-weight: 700;
}

.hc-card__place {
    display: block;
    margin-top: 4px;
    color: var(--hc-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.hc-card__place a {
    color: #113b89;
    font-weight: 700;
    text-decoration: underline;
}

.hc-nav {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--hc-line-strong);
    border-radius: 10px;
    background: #fff;
    color: var(--hc-accent);
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
}

.hc-nav small {
    font-size: 13px;
    font-weight: 700;
}

.hc-nav:hover {
    background: var(--hc-accent-soft);
}

/* ---- month and year switcher ---- */

/* The switcher and the month's landmarks share one row, so neither leaves a band of empty space. */
.hc-toolrow {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px 0;
}

.hc-switcher {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.hc-switcher label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.hc-switcher label span {
    color: var(--hc-muted);
    font-size: 11.5px;
}

.hc-switcher select,
.hc-switcher input {
    min-height: 38px;
    padding: 6px 10px;
    border: 1px solid var(--hc-line-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--hc-ink);
    font: inherit;
    font-size: 14px;
}

.hc-switcher select {
    min-width: 140px;
}

.hc-switcher input {
    width: 104px;
}

.hc-switcher .tools-button {
    min-height: 38px;
}

/* ---- landmark chips ---- */

.hc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hc-chips a {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 11px;
    border: 1px solid var(--hc-line-strong);
    border-radius: 999px;
    background: var(--hc-accent-soft);
    color: var(--hc-ink);
    font-size: 12.5px;
    text-decoration: none;
}

.hc-chips a strong {
    color: var(--hc-accent);
}

.hc-chips a span {
    color: var(--hc-muted);
}

/* ---- the grid ---- */

.hc-grid {
    margin: 14px 18px 0;
    border: 1px solid var(--hc-line-strong);
    border-radius: 10px;
    overflow: hidden;
}

.hc-grid__head,
.hc-grid__body {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* One grid for the whole month, so every row is the height of the tallest and the weeks stay even.
   The week wrappers keep the row semantics without forming grids of their own. */
.hc-grid__body {
    grid-auto-rows: 1fr;
}

.hc-week {
    display: contents;
}

.hc-grid__head {
    background: #f6efe1;
    border-bottom: 1px solid var(--hc-line-strong);
}

.hc-wd {
    padding: 9px 4px;
    border-right: 1px solid var(--hc-line);
    text-align: center;
}

.hc-wd:last-child {
    border-right: 0;
}

.hc-wd strong {
    display: block;
    color: var(--hc-ink);
    font-size: 14.5px;
    line-height: 1.3;
}

.hc-wd small {
    display: block;
    margin-top: 1px;
    color: var(--hc-muted);
    font-size: 10.5px;
    letter-spacing: .06em;
}

.hc-wd.is-sunday strong,
.hc-wd.is-sunday small {
    color: var(--hc-sunday);
}

/* The week no longer draws a box of its own, so each cell carries the line above it. */
.hc-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 132px;
    padding: 8px 9px 9px;
    border-top: 1px solid var(--hc-line);
    border-right: 1px solid var(--hc-line);
    background: #fff;
    color: var(--hc-ink);
    text-decoration: none;
    overflow: hidden;
}

.hc-week:first-child .hc-cell {
    border-top: 0;
}

.hc-cell:last-child {
    border-right: 0;
}

.hc-cell:hover {
    background: var(--hc-accent-soft);
}

.hc-cell.is-empty {
    background: #fbf9f4;
    cursor: default;
}

.hc-cell__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.hc-cell__num {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.15;
}

.hc-cell__today {
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--hc-today);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.6;
}

.hc-cell__tithi {
    color: var(--hc-ink);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
}

.hc-cell__nak,
.hc-cell__sun {
    color: var(--hc-muted);
    font-size: 10.5px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hc-cell.is-selected {
    box-shadow: inset 0 0 0 2px var(--hc-accent);
    background: var(--hc-accent-soft);
}

.hc-cell.is-today.is-selected {
    box-shadow: inset 0 0 0 2px var(--hc-today), inset 0 0 0 5px var(--hc-accent-soft);
}

.hc-cell__fest {
    margin-top: auto;
    color: var(--hc-accent);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.hc-cell__more {
    color: var(--hc-muted);
    font-size: 10.5px;
    line-height: 1.3;
}

/* Sunday reads as Sunday down the whole column, and a major observance reads as one at a glance. */
.hc-cell.is-sunday {
    background: var(--hc-sunday-soft);
}

.hc-cell.is-sunday .hc-cell__num {
    color: var(--hc-sunday);
}

.hc-cell.is-sunday:hover {
    background: #fbeae6;
}

.hc-cell.is-major-holiday .hc-cell__fest {
    color: var(--hc-sunday);
}

.hc-cell.is-today {
    box-shadow: inset 0 0 0 2px var(--hc-today);
}

/* ---- legend and note ---- */

.hc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 12px 18px 0;
    color: var(--hc-muted);
    font-size: 12px;
}

.hc-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hc-legend i {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    background: #fff;
}

.hc-legend i.is-today {
    box-shadow: inset 0 0 0 2px var(--hc-today);
}

.hc-legend i.is-sunday {
    background: var(--hc-sunday-soft);
    box-shadow: inset 0 0 0 1px var(--hc-sunday);
}

.hc-legend i.has-festival {
    background: var(--hc-accent-soft);
    box-shadow: inset 0 0 0 1px var(--hc-accent);
}

.hc-legend i.is-selected {
    box-shadow: inset 0 0 0 2px var(--hc-accent);
    background: var(--hc-accent-soft);
}

/* ---- the month's festivals ---- */

.hc-festivals {
    padding: 18px;
    background: #fff;
    border: 1px solid var(--hc-line);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(24, 44, 80, .06);
}

.hc-festivals h2 {
    margin: 0 0 14px;
    color: var(--hc-ink);
    font-size: 22px;
    line-height: 1.3;
}

.hc-festivals__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hc-festivals__list a {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: 11px 13px;
    border: 1px solid var(--hc-line);
    border-radius: 10px;
    background: #fffdf8;
    color: var(--hc-ink);
    text-decoration: none;
}

.hc-festivals__list a:hover {
    border-color: var(--hc-line-strong);
    background: var(--hc-accent-soft);
}

.hc-festivals__list time {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 46px;
    padding: 5px 0;
    border-radius: 8px;
    background: var(--hc-accent-soft);
    line-height: 1.15;
}

.hc-festivals__list time strong {
    color: var(--hc-accent);
    font-size: 19px;
}

.hc-festivals__list time span {
    color: var(--hc-muted);
    font-size: 10.5px;
}

.hc-festivals__list li.is-major time {
    background: var(--hc-sunday-soft);
}

.hc-festivals__list li.is-major time strong {
    color: var(--hc-sunday);
}

.hc-festivals__names {
    min-width: 0;
}

.hc-festivals__names strong {
    display: block;
    font-size: 14.5px;
    line-height: 1.4;
}

.hc-festivals__names small {
    display: block;
    margin-top: 2px;
    color: var(--hc-muted);
    font-size: 11.5px;
}

.hc-festivals__empty {
    margin: 0;
    color: var(--hc-muted);
}

/* ---- share ---- */

.hc-share {
    padding: 20px 18px;
    background: linear-gradient(180deg, #fff9ef 0%, #fff 100%);
    border: 1px solid var(--hc-line);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(24, 44, 80, .06);
    text-align: center;
}

.hc-share h2 {
    margin: 0 0 4px;
    color: var(--hc-ink);
    font-size: 22px;
}

.hc-share > p {
    margin: 0 0 15px;
    color: var(--hc-muted);
    font-size: 14px;
    line-height: 1.6;
}

.hc-share__whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 26px;
    border-radius: 999px;
    background: #25d366;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(37, 211, 102, .32);
}

.hc-share__whatsapp:hover {
    background: #1fbb59;
}

.hc-share__whatsapp svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
}

.hc-share__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
}

.hc-share__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--hc-line-strong);
    border-radius: 10px;
    background: #fff;
    color: var(--hc-ink);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.hc-share__btn:hover {
    background: var(--hc-accent-soft);
}

.hc-share__btn--image {
    border-color: var(--hc-accent);
    color: var(--hc-accent);
}

.hc-share__status:empty {
    display: none;
}

.hc-share__status {
    margin: 12px 0 0;
    color: var(--hc-accent);
    font-size: 13.5px;
}

/* ---- the image preview ---- */

.hc-imagebox {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(24, 20, 14, .55);
}

.hc-imagebox[hidden] {
    display: none;
}

.hc-imagebox__panel {
    width: min(560px, 100%);
    max-height: 90vh;
    overflow: auto;
    padding: 16px;
    border-radius: 14px;
    background: #fff;
}

.hc-imagebox__panel header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.hc-imagebox__panel h2 {
    margin: 0;
    font-size: 18px;
}

.hc-imagebox__close {
    width: 34px;
    height: 34px;
    border: 1px solid var(--hc-line-strong);
    border-radius: 8px;
    background: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.hc-imagebox__preview img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--hc-line);
    border-radius: 8px;
}

.hc-imagebox__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

/* ---- the day detail panel ---- */

.hc-detail {
    padding: 18px;
    background: #fff;
    border: 1px solid var(--hc-line);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(24, 44, 80, .06);
}

.hc-detail__kicker {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--hc-accent-soft);
    color: var(--hc-accent);
    font-size: 11.5px;
    font-weight: 700;
}

.hc-detail h2 {
    margin: 8px 0 14px;
    color: var(--hc-ink);
    font-size: 23px;
    line-height: 1.3;
}

.hc-detail__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    background: var(--hc-line);
    border: 1px solid var(--hc-line);
    border-radius: 10px;
    overflow: hidden;
}

.hc-detail__grid > div {
    padding: 9px 12px;
    background: #fffdf8;
}

.hc-detail__grid dt {
    color: var(--hc-muted);
    font-size: 11.5px;
    line-height: 1.5;
}

.hc-detail__grid dd {
    margin: 1px 0 0;
    color: var(--hc-ink);
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.4;
}

.hc-detail__fest {
    margin: 13px 0 0;
    color: var(--hc-ink);
    font-size: 14px;
    line-height: 1.6;
}

.hc-detail__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

.hc-detail__links a:not(.tools-button) {
    color: #113b89;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}

/* ---- tablet ---- */

@media (max-width: 1100px) {
    /* Less room per column, so the sun times go and the rest stays. */
    .hc-cell { min-height: 118px; }
    .hc-cell__sun { display: none; }
}

@media (max-width: 900px) {
    .hc-card__title h2 { font-size: 22px; }
    .hc-grid { margin: 12px 12px 0; }
    .hc-toolrow, .hc-legend { padding-left: 12px; padding-right: 12px; }
    .hc-cell { min-height: 104px; }
    .hc-nav small { display: none; }
    .hc-nav { padding: 0 13px; }
}

/* ---- phone: still a month grid, with only what fits ---- */

@media (max-width: 640px) {
    .hc-card__head { padding: 12px; gap: 8px; }
    .hc-card__title h2 { font-size: 18px; }
    .hc-card__title span { display: none; }
    .hc-nav { width: 34px; height: 34px; font-size: 18px; }
    .hc-grid { margin: 10px 8px 0; }
    .hc-toolrow, .hc-legend { padding-left: 8px; padding-right: 8px; }
    .hc-wd { padding: 7px 2px; }
    .hc-wd strong { font-size: 12px; }
    .hc-wd small { display: none; }

    /* A phone cell carries the date, the tithi and the festival. Everything else is a tap away in the
       panel below, which is the whole reason that panel exists. */
    .hc-cell {
        min-height: 78px;
        gap: 1px;
        padding: 5px 4px 6px;
    }

    .hc-cell__nak,
    .hc-cell__sun { display: none; }

    /* Month, year and the button on one line. A grid is used rather than a wrapping flex row because it
       sizes the button's column to the button and leaves the rest to the two fields, instead of letting
       the button wrap onto a line of its own and stretch across it. */
    .hc-switcher {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        align-items: end;
        gap: 8px;
        width: 100%;
    }

    .hc-switcher select,
    .hc-switcher input { width: 100%; min-width: 0; }
    .hc-switcher .tools-button { padding: 0 16px; white-space: nowrap; }

    .hc-cell__num { font-size: 15px; }
    /* A date box this narrow has no room for a badge beside the number; the border says "today" and the
       legend says what the border means. */
    .hc-cell__today { display: none; }
    .hc-cell__tithi { font-size: 9.5px; line-height: 1.3; }
    .hc-cell__fest { font-size: 9px; line-height: 1.25; }
    .hc-cell__more { font-size: 8.5px; }

    .hc-detail { padding: 14px; }
    .hc-detail h2 { font-size: 19px; }
    .hc-legend { font-size: 11px; gap: 10px; }
    .hc-festivals { padding: 14px; }
    .hc-festivals h2 { font-size: 19px; }
    .hc-festivals__list { grid-template-columns: minmax(0, 1fr); }
    .hc-share { padding: 16px 14px; }
    .hc-share h2 { font-size: 19px; }
    .hc-share__whatsapp { width: 100%; font-size: 16px; }
    .hc-share__row { flex-direction: column; }
    .hc-share__btn { justify-content: center; width: 100%; }
}

@media (max-width: 420px) {
    /* The column is too narrow for "शुक्ल षष्ठी" on one line, so the paksha goes and the tithi stays —
       the paksha is spelled out in full in the panel below. */
    .hc-cell__paksha { display: none; }
}

@media (max-width: 380px) {
    .hc-cell { min-height: 72px; padding: 4px 3px 5px; }
    .hc-cell__tithi { font-size: 9px; }
}