/* ================================================================
   HolidayToday Calendar — flat, light, elegant
   ================================================================ */

.htc-calendar {
    --htc-bg:        #ffffff;
    --htc-border:    #e8eaed;
    --htc-radius:    14px;
    --htc-shadow:    0 2px 16px rgba(0,0,0,.07);
    --htc-font:      -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --htc-text:      #2d3142;
    --htc-muted:     #9aa0b0;
    --htc-header-bg: #f7f8fa;

    --htc-today-bg:  #f1a239;
    --htc-today-fg:  #ffffff;

    --htc-active-bd: #f1a239;
    --htc-active-fg: #c4791e;

    --htc-hover-bg:  #fff7ed;

    --htc-badge-bg:  #fef3e2;
    --htc-badge-fg:  #c4791e;

    --htc-cell-size: 36px;

    font-family:   var(--htc-font);
    background:    var(--htc-bg);
    border:        1px solid var(--htc-border);
    border-radius: var(--htc-radius);
    width:         100%;
    min-width:     0;
    box-sizing:    border-box;
    display:       block;
}

/* ---- inner wrapper (swapped out by AJAX) ---- */
.htc-inner {
    padding:       16px;
    border-radius: calc(var(--htc-radius) - 1px);
    overflow:      clip;
    animation:     htc-fade-in .18s ease;
}

/* ================================================================
   Header
   ================================================================ */
.htc-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    background:      var(--htc-header-bg);
    border-radius:   calc(var(--htc-radius) - 2px);
    padding:         8px 10px;
    margin-bottom:   14px;
}

.htc-title {
    font-size:   .9rem;
    font-weight: 600;
    color:       var(--htc-text);
    letter-spacing: .01em;
}
.htc-title em {
    font-style: normal;
    color:      var(--htc-muted);
    font-weight: 400;
    margin-left: 3px;
}

.htc-nav {
    background:    transparent;
    border:        none;
    cursor:        pointer;
    font-size:     1.35rem;
    line-height:   1;
    color:         var(--htc-muted);
    padding:       4px 6px;
    border-radius: 8px;
    transition:    background .15s, color .15s;
}
.htc-nav:hover {
    background: var(--htc-hover-bg);
    color:      var(--htc-text);
}
.htc-nav.htc-loading {
    opacity: .4;
    pointer-events: none;
}

/* ================================================================
   Weekday labels
   ================================================================ */
.htc-weekdays {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 6px;
}
.htc-weekdays span {
    text-align:  center;
    font-size:   .68rem;
    font-weight: 600;
    color:       var(--htc-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding:     2px 0;
}

/* ================================================================
   Grid — default (sidebar / compact square)
   ================================================================ */
.htc-grid {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    gap:                   3px;
}

.htc-cell {
    position:      relative;
    aspect-ratio:  1 / 1;
    border-radius: 8px;
    overflow:      visible;
    transition:    background .12s;
}
.htc-cell.htc-empty { pointer-events: none; }

.htc-cell a {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    width:           100%;
    height:          100%;
    text-decoration: none;
    border-radius:   8px;
    transition:      background .12s;
    position:        relative;
}

.htc-cell a:hover {
    background: var(--htc-hover-bg);
}

/* day number */
.htc-num {
    font-size:   .78rem;
    font-weight: 500;
    color:       var(--htc-text);
    line-height: 1;
}

/* holiday count badge */
.htc-badge {
    position:     absolute;
    top:          3px;
    right:        3px;
    min-width:    14px;
    height:       14px;
    padding:      0 3px;
    border-radius: 99px;
    background:   var(--htc-badge-bg);
    color:        var(--htc-badge-fg);
    font-size:    .55rem;
    font-weight:  700;
    line-height:  14px;
    text-align:   center;
    pointer-events: none;
}

/* ---- TODAY ---- */
.htc-cell.htc-today a {
    background: var(--htc-today-bg);
}
.htc-cell.htc-today .htc-num {
    color: var(--htc-today-fg);
}
.htc-cell.htc-today .htc-badge {
    background: rgba(255,255,255,.25);
    color:      #fff;
}
.htc-cell.htc-today a:hover {
    background: #d9892a;
}

/* ---- ACTIVE (holiday page / post for this date) ---- */
/* Same orange as today but very translucent — visible but clearly secondary */
.htc-cell.htc-active a {
    background: rgba(241, 162, 57, 0.22);
}
.htc-cell.htc-active .htc-num {
    color:       var(--htc-active-fg);
    font-weight: 600;
}

/* When today == active: today's full orange wins, no double-styling */
.htc-cell.htc-today.htc-active a {
    background: var(--htc-today-bg);
}

/* ================================================================
   Loading overlay
   ================================================================ */
.htc-calendar.htc-busy .htc-inner {
    opacity:    .45;
    pointer-events: none;
}

/* ================================================================
   STRIP layout — wide containers (page / content area)
   ================================================================ */
@container htc-ctx (min-width: 560px) {
    .htc-inner { padding: 18px 20px; }

    .htc-weekdays { display: none; }

    /* Hide the 7-col grid; replace with a single horizontal flex row */
    .htc-grid {
        display:   flex;
        flex-wrap: nowrap;
        gap:       4px;
        overflow-x: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--htc-border) transparent;
        padding-bottom: 4px;
    }

    .htc-cell {
        flex:          0 0 auto;
        width:         clamp(42px, 5vw, 60px);
        aspect-ratio:  unset;
        height:        72px;
        border-radius: 10px;
    }

    .htc-cell.htc-empty {
        display: none; /* strip layout ignores leading empties */
    }

    .htc-cell a {
        height:          100%;
        justify-content: flex-end;
        padding-bottom:  10px;
        border-radius:   10px;
    }

    .htc-num {
        font-size:   1rem;
        font-weight: 600;
    }

    .htc-badge {
        top:   7px;
        right: 50%;
        transform: translateX(50%);
    }
}

/* Container query context — must be on a wrapper INSIDE .htc-calendar
   so it doesn't interfere with sidebar width calculation on mobile */
.htc-calendar {
    container-type: inline-size;
    container-name: htc-ctx;
}

/* ================================================================
   Smooth inner swap animation
   ================================================================ */
@keyframes htc-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}