/* ============================================================
   Posts Calendar Plugin — calendar.css
   Thiết kế: clean, dễ tích hợp vào mọi theme
   ============================================================ */

:root {
    --pc-primary:     #1a5fa8;
    --pc-primary-dk:  #134d8c;
    --pc-accent:      #e63946;
    --pc-today-bg:    #1a5fa8;
    --pc-today-color: #ffffff;
    --pc-dot-color:   #e63946;
    --pc-dot-multi:   #f4a261;
    --pc-sat-color:   #1a5fa8;
    --pc-sun-color:   #e63946;
    --pc-bg:          #ffffff;
    --pc-border:      #e2e8f0;
    --pc-text:        #1e293b;
    --pc-muted:       #94a3b8;
    --pc-hover-bg:    #f0f6ff;
    --pc-radius:      12px;
    --pc-shadow:      0 4px 24px rgba(0,0,0,.10);
    --pc-modal-overlay: rgba(15,23,42,.55);
    --pc-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Wrapper ── */
.pc-calendar-wrap {
    position:       relative;
    background:     var(--pc-bg);
    border:         1px solid var(--pc-border);
    border-radius:  var(--pc-radius);
    box-shadow:     var(--pc-shadow);
    padding:        0;
    max-width:      340px;
    width:          100%;
    font-family:    var(--pc-font);
    user-select:    none;
    overflow:       hidden;
}

/* ── Header ── */
.pc-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    background:      var(--pc-primary);
    color:           #fff;
    padding:         14px 16px;
}

.pc-title-wrap {
    flex:          1 1 auto;
    min-width:     0;
    text-align:    center;
    position:      relative;
    z-index:       2;
}
.pc-title-wrap.pc-jump-open {
    z-index: 25;
}

/* Popover chọn tháng/năm — đồng bộ giao diện lịch, không dùng input[type=date] của trình duyệt */
.pc-jump-popover {
    position:      absolute;
    left:          50%;
    top:           calc(100% + 8px);
    transform:     translateX(-50%);
    min-width:     240px;
    max-width:     min(92vw, 320px);
    background:    var(--pc-bg);
    color:         var(--pc-text);
    border:        1px solid var(--pc-border);
    border-radius: 12px;
    box-shadow:    var(--pc-shadow);
    padding:       12px 14px 14px;
    text-align:    left;
    font-size:     13px;
}
.pc-jump-popover[hidden] {
    display: none !important;
}
.pc-jump-inner {
    display:       flex;
    flex-direction: column;
    gap:           10px;
}
.pc-jump-field {
    display:       flex;
    flex-direction: column;
    gap:           4px;
}
.pc-jump-label {
    font-size:     11px;
    font-weight:   600;
    color:         var(--pc-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pc-jump-month,
.pc-jump-year {
    width:         100%;
    box-sizing:    border-box;
    font-family:   var(--pc-font);
    font-size:     14px;
    padding:       8px 10px;
    border-radius: 8px;
    border:        1px solid var(--pc-border);
    background:    #fff;
    color:         var(--pc-text);
}
.pc-jump-month:focus,
.pc-jump-year:focus {
    outline:       none;
    border-color:  var(--pc-primary);
    box-shadow:    0 0 0 2px rgba(26, 95, 168, 0.2);
}
.pc-jump-actions {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    justify-content: space-between;
    gap:             8px;
    margin-top:      4px;
    padding-top:     10px;
    border-top:      1px solid var(--pc-border);
}
.pc-jump-actions-left {
    display:     flex;
    flex-wrap:   wrap;
    gap:         6px;
}
.pc-jump-btn {
    font-family:   var(--pc-font);
    font-size:     12px;
    font-weight:   600;
    padding:       6px 12px;
    border-radius: 8px;
    cursor:        pointer;
    border:        1px solid transparent;
    transition:    background .15s, color .15s, border-color .15s;
    -webkit-tap-highlight-color: transparent;
}
.pc-jump-btn.pc-jump-primary {
    background:   var(--pc-primary);
    color:        #fff;
    border-color: var(--pc-primary);
}
.pc-jump-btn.pc-jump-primary:hover {
    background:   var(--pc-primary-dk);
    border-color: var(--pc-primary-dk);
}
.pc-jump-btn.pc-jump-secondary {
    background:   transparent;
    color:        var(--pc-muted);
    border-color: var(--pc-border);
}
.pc-jump-btn.pc-jump-secondary:hover {
    background:   #f8fafc;
    color:        var(--pc-text);
}
.pc-jump-btn.pc-jump-today-in-pop {
    background:   transparent;
    border:       1px solid var(--pc-border);
    color:        var(--pc-primary);
}
.pc-jump-btn.pc-jump-today-in-pop:hover {
    background:   var(--pc-primary);
    border-color: var(--pc-primary);
    color:        #fff;
}
.pc-title-btn {
    display:       inline-block;
    max-width:     100%;
    margin:        0;
    padding:       4px 10px;
    border:        none;
    border-radius: 8px;
    background:    transparent;
    color:           inherit;
    font:            inherit;
    font-size:       15px;
    font-weight:     600;
    letter-spacing:  0.3px;
    cursor:          pointer;
    line-height:     1.25;
    text-align:      center;
    -webkit-tap-highlight-color: transparent;
}
.pc-title-btn:hover {
    background: rgba(255, 255, 255, 0.14);
}
.pc-title-btn:focus-visible {
    outline:        2px solid #fff;
    outline-offset: 2px;
}

.pc-nav {
    background:  transparent;
    border:      none;
    color:       rgba(255,255,255,.85);
    font-size:   22px;
    line-height: 1;
    cursor:      pointer;
    padding:     2px 8px;
    border-radius: 6px;
    transition:  background .15s, color .15s;
}
.pc-nav:hover {
    background: rgba(255,255,255,.18);
    color:      #fff;
}

/* ── Weekday row ── */
.pc-weekdays {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    background:            #f8fafc;
    border-bottom:         1px solid var(--pc-border);
    padding:               6px 8px 4px;
}
.pc-weekdays span {
    text-align:  center;
    font-size:   11px;
    font-weight: 600;
    color:       var(--pc-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.pc-weekdays .pc-sat { color: var(--pc-sat-color); }
.pc-weekdays .pc-sun { color: var(--pc-sun-color); }

/* ── Days grid ── */
.pc-days {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    gap:                   2px;
    padding:               8px;
}

.pc-day {
    position:      relative;
    display:       flex;
    flex-direction: column;
    align-items:   center;
    justify-content: center;
    height:        38px;
    border-radius: 8px;
    cursor:        default;
    transition:    background .15s;
}

.pc-day.pc-empty { cursor: default; }

.pc-day-num {
    font-size:   13px;
    font-weight: 500;
    color:       var(--pc-text);
    line-height: 1;
}

/* Dot: ẩn mặc định, hiện khi có bài */
.pc-dot {
    display:       block;
    width:         5px;
    height:        5px;
    border-radius: 50%;
    background:    transparent;
    margin-top:    2px;
    transition:    background .2s;
}

/* Ngày có bài */
.pc-day.has-posts {
    cursor: pointer;
}
.pc-day.has-posts .pc-dot {
    background: var(--pc-dot-color);
}
.pc-day.has-posts:hover {
    background: var(--pc-hover-bg);
}
.pc-day.has-posts:hover .pc-day-num {
    color: var(--pc-primary);
    font-weight: 700;
}

/* Hôm nay */
.pc-day.pc-today .pc-day-num {
    background:    var(--pc-today-bg);
    color:         var(--pc-today-color);
    width:         28px;
    height:        28px;
    border-radius: 50%;
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-weight:   700;
}
.pc-day.pc-today.has-posts .pc-dot {
    background: #fff;
    opacity: .9;
}

/* Thứ 7 / Chủ nhật */
.pc-day.pc-sat .pc-day-num { color: var(--pc-sat-color); }
.pc-day.pc-sun .pc-day-num { color: var(--pc-sun-color); }
.pc-day.pc-today .pc-day-num { color: var(--pc-today-color) !important; }

/* ── Footer ── */
.pc-footer {
    padding:    8px 12px 12px;
    text-align: center;
}
@keyframes pc-jump-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(26, 95, 168, 0.5); }
    70%  { box-shadow: 0 0 0 8px rgba(26, 95, 168, 0); }
    100% { box-shadow: 0 0 0 0 rgba(26, 95, 168, 0); }
}
.pc-day.pc-jump-highlight {
    animation: pc-jump-pulse 1.1s ease-out 2;
    position: relative;
    z-index:  1;
}

.pc-today-btn {
    background:    transparent;
    border:        1px solid var(--pc-border);
    border-radius: 20px;
    padding:       5px 18px;
    font-size:     12px;
    color:         var(--pc-primary);
    cursor:        pointer;
    font-family:   var(--pc-font);
    font-weight:   500;
    transition:    all .15s;
}
.pc-today-btn:hover {
    background:   var(--pc-primary);
    border-color: var(--pc-primary);
    color:        #fff;
}

/* ── Loading dots ── */
.pc-loading {
    position:    absolute;
    inset:       0;
    background:  rgba(255,255,255,.75);
    display:     none;
    align-items: center;
    justify-content: center;
    gap:         6px;
    border-radius: var(--pc-radius);
    z-index:     10;
}
.pc-loading.active { display: flex; }
.pc-loading span {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--pc-primary);
    animation:     pc-bounce .7s infinite alternate;
}
.pc-loading span:nth-child(2) { animation-delay: .15s; }
.pc-loading span:nth-child(3) { animation-delay: .30s; }

@keyframes pc-bounce {
    from { transform: translateY(0);    opacity: .5; }
    to   { transform: translateY(-6px); opacity: 1;  }
}

/* ════════════════════════════════════════
   MODAL
   ════════════════════════════════════════ */
.pc-modal-overlay {
    position:         fixed;
    inset:            0;
    background:       var(--pc-modal-overlay);
    z-index:          99999;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    padding:          16px;
    opacity:          0;
    visibility:       hidden;
    transition:       opacity .22s, visibility .22s;
    backdrop-filter:  blur(3px);
}
.pc-modal-overlay.open {
    opacity:    1;
    visibility: visible;
}

.pc-modal-box {
    background:    #fff;
    border-radius: 16px;
    box-shadow:    0 20px 60px rgba(0,0,0,.22);
    width:         100%;
    max-width:     640px;
    max-height:    82vh;
    overflow:      hidden;
    display:       flex;
    flex-direction: column;
    transform:     translateY(16px) scale(.97);
    transition:    transform .22s;
    font-family:   var(--pc-font);
}
.pc-modal-overlay.open .pc-modal-box {
    transform: translateY(0) scale(1);
}

/* Modal header area */
.pc-modal-date {
    padding:     18px 20px 14px;
    font-size:   18px;
    font-weight: 700;
    color:       var(--pc-primary);
    border-bottom: 1px solid var(--pc-border);
    flex-shrink: 0;
    display:     flex;
    align-items: center;
    gap:         8px;
}
.pc-modal-date::before {
    content:        '';
    display:        inline-block;
    width:          4px;
    height:         20px;
    background:     var(--pc-primary);
    border-radius:  2px;
}

.pc-modal-close {
    position:  absolute;
    top:       14px;
    right:     16px;
    background: transparent;
    border:    none;
    font-size: 24px;
    line-height: 1;
    color:     var(--pc-muted);
    cursor:    pointer;
    padding:   2px 6px;
    border-radius: 6px;
    transition: color .15s, background .15s;
    z-index:   1;
}
.pc-modal-close:hover {
    color:      var(--pc-text);
    background: var(--pc-border);
}

/* Modal scrollable body */
.pc-modal-body {
    overflow-y: auto;
    padding:    12px 20px 20px;
    flex:       1;
}
.pc-modal-body::-webkit-scrollbar { width: 5px; }
.pc-modal-body::-webkit-scrollbar-thumb {
    background:    var(--pc-border);
    border-radius: 10px;
}

/* Post card */
.pc-post-card {
    display:       flex;
    gap:           14px;
    padding:       12px 0;
    border-bottom: 1px solid var(--pc-border);
    text-decoration: none;
    color:         inherit;
    transition:    background .12s;
    border-radius: 8px;
}
.pc-post-card:last-child { border-bottom: none; }
.pc-post-card:hover { background: var(--pc-hover-bg); padding-left: 6px; padding-right: 6px; margin: 0 -6px; }

.pc-post-thumb {
    flex-shrink: 0;
    width:       200px!important;
    max-width:   100%!important;
    height:      140px!important;
    border-radius: 8px;
    object-fit:  fill;
    background:  var(--pc-border);
}
.pc-post-thumb-placeholder {
    flex-shrink:     0;
    width:           72px;
    height:          72px;
    border-radius:   8px;
    background:      #f0f6ff;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       24px;
    color:           var(--pc-muted);
}
.pc-post-thumb-placeholder.pc-ph-event {
    background: #f8fafc;
    color:      #94a3b8;
}
.pc-cal-ph-svg {
    display:         flex;
    align-items:     center;
    justify-content: center;
    line-height:     0;
}
.pc-cal-ph-svg svg {
    display: block;
}

.pc-event-tag-badge {
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.pc-post-info { flex: 1; min-width: 0; }

.pc-post-meta {
    font-size:   11px;
    color:       var(--pc-muted);
    margin-bottom: 4px;
    display:     flex;
    gap:         8px;
    flex-wrap:   wrap;
}
.pc-post-cat {
    background:    #e8f0fe;
    color:         var(--pc-primary);
    padding:       1px 7px;
    border-radius: 10px;
    font-weight:   600;
}
.pc-post-card.pc-is-event:not(a) { cursor: default; }
.pc-post-card.pc-is-event:not(a):hover { background: transparent; }

.pc-post-title {
    font-size:   14px;
    font-weight: 600;
    color:       var(--pc-text);
    line-height: 1.4;
    display:     -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:    hidden;
    margin-bottom: 5px;
}
.pc-post-card:hover .pc-post-title { color: var(--pc-primary); }

.pc-post-excerpt {
    font-size:   12px;
    color:       var(--pc-muted);
    line-height: 1.5;
    display:     -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}

/* Modal: hiện đủ mô tả (lịch phụng vụ thường dài); giữ rút gọn ở chỗ khác nếu tái dùng class */
.pc-modal-body .pc-post-excerpt {
    display:            block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    overflow:           visible;
    white-space:        pre-line;
}

.pc-post-link {
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
    font-size:     12px;
    font-weight:   600;
    color:         var(--pc-primary);
    margin-top:    6px;
    text-decoration: none;
}
.pc-post-link::after { content: '→'; }
.pc-post-link:hover  { text-decoration: underline; }

/* Empty state */
.pc-no-posts {
    text-align: center;
    padding:    32px 16px;
    color:      var(--pc-muted);
    font-size:  14px;
}
.pc-no-posts span {
    display:     block;
    font-size:   32px;
    margin-bottom: 8px;
}

/* ── Responsive ── */

@media (max-width: 640px) {
    .pc-post-thumb {
        width:       160px!important;
        height:      120px!important;
    }
}

@media (max-width: 380px) {
    .pc-post-thumb {
        width: 100% !important;
        height: 130px !important;
        margin-bottom: 1rem;
    }

    .pc-post-card {
        display: block;
    }

    .pc-calendar-wrap { max-width: 100%; }
    .pc-day            { height: 34px; }
    .pc-modal-box      { border-radius: 12px; }
}

/* Khoá scroll khi modal mở — dùng class thay vì inline style */
body.pc-modal-open { overflow: hidden !important; }