/*
 * FTW Posts Widget — Calendar Styles v1.2.0
 * Florida TaxWatch palette. Override --ftw-* variables in your theme CSS.
 */

/* ── Variables ──────────────────────────────────────────────────── */
:root {
    --ftw-red:        #cc0000;
    --ftw-red-dark:   #a30000;
    --ftw-white:      #ffffff;
    --ftw-gray-200:   #e0e0e0;
    --ftw-gray-400:   #9e9e9e;
    --ftw-gray-600:   #555555;
    --ftw-gray-800:   #222222;
    --ftw-border:     #d4d4d4;
    --ftw-radius:     4px;
    --ftw-shadow:     0 4px 18px rgba(0,0,0,0.13);
    --ftw-ease:       0.2s ease;
    --ftw-font:       -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Wrapper ────────────────────────────────────────────────────── */
.ftw-calendar-wrap {
    position:      relative;
    width:         100%;
    max-width:     320px;
    font-family:   var(--ftw-font);
    font-size:     13px;
    color:         var(--ftw-gray-800);
    border:        1px solid var(--ftw-border);
    border-radius: var(--ftw-radius);
    background:    var(--ftw-white);
    box-shadow:    0 1px 4px rgba(0,0,0,0.08);
    user-select:   none;
    overflow:      visible; /* allow preview to extend below */
}

/* ── Header ─────────────────────────────────────────────────────── */
.ftw-cal-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         10px 8px 8px;
    border-bottom:   1px solid var(--ftw-border);
}

.ftw-cal-title {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    line-height:    1.2;
}

.ftw-cal-month-name {
    font-size:      15px;
    font-weight:    700;
    color:          var(--ftw-red);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ftw-cal-year {
    font-size:   13px;
    color:       var(--ftw-red);
    font-weight: 500;
}

/* ── Nav Arrows ─────────────────────────────────────────────────── */
.ftw-cal-nav {
    background:    none;
    border:        1px solid var(--ftw-border);
    border-radius: var(--ftw-radius);
    width:         28px;
    height:        28px;
    cursor:        pointer;
    font-size:     18px;
    line-height:   1;
    color:         var(--ftw-gray-600);
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    background var(--ftw-ease), border-color var(--ftw-ease), color var(--ftw-ease);
    padding:       0;
}

.ftw-cal-nav:hover,
.ftw-cal-nav:focus {
    background:   var(--ftw-red);
    border-color: var(--ftw-red);
    color:        var(--ftw-white);
    outline:      none;
}

/* ── Day-of-week header row ─────────────────────────────────────── */
.ftw-cal-dow-row {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    background:            var(--ftw-red);
}

.ftw-cal-dow {
    text-align:     center;
    padding:        5px 0;
    font-size:      11px;
    font-weight:    700;
    color:          var(--ftw-white);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* ── Grid outer (slide animation stage) ────────────────────────── */
.ftw-cal-grid-outer {
    position:   relative;
    overflow:   hidden;
    min-height: 150px;
}

/* ── Grids ──────────────────────────────────────────────────────── */
.ftw-cal-grid {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    width:                 100%;
    position:              absolute;
    top:                   0; left: 0;
    opacity:               0;
    pointer-events:        none;
}

.ftw-cal-grid--active {
    position:       relative;
    opacity:        1;
    pointer-events: auto;
    transform:      translateX(0);
    transition:     transform 0.32s cubic-bezier(.4,0,.2,1), opacity 0.32s ease;
}

.ftw-cal-grid--enter-right { transform: translateX(100%);  opacity: 0; }
.ftw-cal-grid--enter-left  { transform: translateX(-100%); opacity: 0; }

.ftw-cal-grid--exit-left {
    position:   absolute !important;
    transform:  translateX(-100%);
    opacity:    0;
    transition: transform 0.32s cubic-bezier(.4,0,.2,1), opacity 0.32s ease;
}
.ftw-cal-grid--exit-right {
    position:   absolute !important;
    transform:  translateX(100%);
    opacity:    0;
    transition: transform 0.32s cubic-bezier(.4,0,.2,1), opacity 0.32s ease;
}

/* ── Day cells ──────────────────────────────────────────────────── */
.ftw-cal-day {
    text-align:  center;
    padding:     6px 2px;
    min-height:  30px;
    font-size:   13px;
    cursor:      default;
    border:      1px solid transparent;
    line-height: 1;
    transition:  background var(--ftw-ease), color var(--ftw-ease);
}

.ftw-cal-day--pad { color: var(--ftw-gray-400); }

.ftw-cal-day--today {
    font-weight: 700;
    color:       var(--ftw-red);
}

/* Dates with posts — red border box */
.ftw-cal-day--has-posts {
    border:        1px solid var(--ftw-red);
    border-radius: var(--ftw-radius);
    color:         var(--ftw-red);
    font-weight:   600;
    cursor:        pointer;
}

/* Today + has posts */
.ftw-cal-day--today.ftw-cal-day--has-posts {
    background:   var(--ftw-red);
    color:        var(--ftw-white);
    border-color: var(--ftw-red);
}

/* Hover state */
.ftw-cal-day--has-posts:hover {
    background: rgba(204,0,0,0.08);
}

/* Active / selected state (preview is open for this date) */
.ftw-cal-day--active,
.ftw-cal-day--active.ftw-cal-day--today {
    background:   var(--ftw-red) !important;
    color:        var(--ftw-white) !important;
    border-color: var(--ftw-red) !important;
}

/* Keyboard focus */
.ftw-cal-day:focus-visible {
    outline:        2px solid var(--ftw-red);
    outline-offset: -2px;
}

/* ── Preview Panel — slides open BELOW the calendar ────────────── */
.ftw-preview-panel {
    width:         100%;
    background:    var(--ftw-white);
    border:        1px solid var(--ftw-border);
    border-top:    none;
    border-radius: 0 0 var(--ftw-radius) var(--ftw-radius);
    box-shadow:    var(--ftw-shadow);
    overflow:      hidden;
    /* Closed state */
    max-height:    0;
    opacity:       0;
    transition:    max-height 0.3s ease, opacity 0.25s ease;
}

/* Open state — toggled by JS adding this class */
.ftw-preview-panel.ftw-preview--visible {
    max-height: 700px;
    opacity:    1;
}

/* ── Preview scroll container ───────────────────────────────────── */
.ftw-preview-inner {
    max-height:  500px;
    overflow-y:  auto;
}

/* ── Individual post preview card ───────────────────────────────── */
.ftw-preview-item {
    padding:       14px 14px 12px;
    border-bottom: 1px solid var(--ftw-gray-200);
}
.ftw-preview-item:last-child { border-bottom: none; }

/* Date label */
.ftw-preview-date {
    display:        block;
    font-size:      10px;
    font-weight:    700;
    color:          var(--ftw-red);
    margin-bottom:  8px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Thumbnail — full-width block, stacked above text */
.ftw-preview-thumb {
    display:       block;
    width:         100%;
    margin-bottom: 10px;
}

.ftw-preview-thumb img {
    width:         100%;
    height:        160px;         /* taller now that we use 'medium' size */
    object-fit:    cover;
    object-position: center top; /* favour top of image */
    border-radius: var(--ftw-radius);
    display:       block;
}

/* Title */
.ftw-preview-title {
    font-size:   13px;
    font-weight: 700;
    line-height: 1.35;
    margin:      0 0 6px;
}

.ftw-preview-title a {
    color:           var(--ftw-gray-800);
    text-decoration: none;
    transition:      color var(--ftw-ease);
}
.ftw-preview-title a:hover { color: var(--ftw-red); }

/* Excerpt — capped at 3 lines */
.ftw-preview-excerpt {
    font-size:          12px;
    line-height:        1.55;
    color:              var(--ftw-gray-600);
    margin:             0 0 12px;
    display:            -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

/* Read More button */
.ftw-preview-readmore {
    display:         inline-block;
    font-size:       11px;
    font-weight:     700;
    letter-spacing:  0.06em;
    text-transform:  uppercase;
    color:           var(--ftw-red);
    text-decoration: none;
    border:          1px solid var(--ftw-red);
    padding:         4px 10px;
    border-radius:   var(--ftw-radius);
    transition:      background var(--ftw-ease), color var(--ftw-ease);
}
.ftw-preview-readmore:hover {
    background: var(--ftw-red);
    color:      var(--ftw-white);
}

/* ── Loading spinner ────────────────────────────────────────────── */
.ftw-preview-loading {
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         22px;
    color:           var(--ftw-gray-400);
    font-size:       12px;
    gap:             8px;
}
.ftw-preview-loading::before {
    content:       '';
    width:         14px;
    height:        14px;
    border:        2px solid var(--ftw-gray-200);
    border-top:    2px solid var(--ftw-red);
    border-radius: 50%;
    display:       block;
    flex-shrink:   0;
    animation:     ftw-spin 0.7s linear infinite;
}
@keyframes ftw-spin { to { transform: rotate(360deg); } }

/* ── Empty state ────────────────────────────────────────────────── */
.ftw-preview-empty {
    padding:    18px;
    color:      var(--ftw-gray-400);
    font-size:  12px;
    text-align: center;
}