/*
 * Garden Planting Calendar — calendar.css
 * Matches site color #fdfae9 with light, airy feel.
 */

/* ── CSS Variables ────────────────────────────────────────────────────── */
.gpc-wrap {
    --gpc-bg:          #fdfae9;
    --gpc-bg-warm:     #f5f0d4;
    --gpc-bg-card:     #fffdf4;
    --gpc-border:      #e4d9b8;
    --gpc-text:        #2a2016;
    --gpc-text-mid:    #6b5c3e;
    --gpc-text-soft:   #a89070;
    --gpc-moss:        #4a7c3f;
    --gpc-sage:        #6aaa58;
    --gpc-leaf:        #3d6b35;
    --gpc-sprout:      #8ec87a;
    --gpc-bark:        #8b6340;

    --gpc-indoor-a:    #a07840; --gpc-indoor-b:    #c8a060;
    --gpc-trans-a:     #4a7c3f; --gpc-trans-b:     #6aaa58;
    --gpc-direct-a:    #5a9448; --gpc-direct-b:    #84c46e;
    --gpc-harvest-a:   #c8832a; --gpc-harvest-b:   #e8b04a;
    --gpc-frost-a:     #6a94a8; --gpc-frost-b:     #96bccc;

    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--gpc-bg);
    color: var(--gpc-text);
    padding: 32px 20px 48px;
    border-radius: 16px;
}

/* Dark theme override */
.gpc-wrap.gpc-dark {
    --gpc-bg:          #2c1a0e;
    --gpc-bg-warm:     #3d2510;
    --gpc-bg-card:     #352010;
    --gpc-border:      rgba(255,255,255,0.1);
    --gpc-text:        #f5ede0;
    --gpc-text-mid:    #c8b090;
    --gpc-text-soft:   #907060;
    --gpc-bark:        #c8a060;
}

*, *::before, *::after { box-sizing: inherit; }

/* ── Header ────────────────────────────────────────────────────────────── */
.gpc-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}

.gpc-logo-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gpc-logo-leaf {
    width: 46px; height: 46px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--gpc-moss), var(--gpc-sprout));
    border-radius: 50% 12% 50% 12%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    box-shadow: 0 4px 16px rgba(74,124,63,.2);
}

.gpc-title {
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--gpc-text);
    margin: 0;
}

.gpc-subtitle {
    font-size: .78rem;
    color: var(--gpc-text-soft);
    margin-top: 3px;
}

.gpc-zone-pill {
    display: flex; align-items: center; gap: 6px;
    background: var(--gpc-bg-card);
    border: 1.5px solid var(--gpc-border);
    border-radius: 100px;
    padding: 9px 16px;
    font-size: .78rem; font-weight: 500; color: var(--gpc-bark);
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    transition: border-color .2s, color .2s;
}

/* ── Zip bar ────────────────────────────────────────────────────────────── */
.gpc-zip-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--gpc-bg-card);
    border: 1.5px solid var(--gpc-border);
    border-radius: 12px;
    padding: 13px 18px;
    margin-bottom: 24px;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

.gpc-zip-bar label { font-size: .78rem; font-weight: 500; color: var(--gpc-text-mid); }

.gpc-zip-bar input {
    border: 1px solid var(--gpc-border);
    background: var(--gpc-bg);
    border-radius: 8px; padding: 7px 12px;
    font-size: .84rem; color: var(--gpc-text); width: 120px;
    outline: none; transition: border-color .2s;
    font-family: inherit;
}
.gpc-zip-bar input:focus { border-color: var(--gpc-moss); }

.gpc-zip-btn {
    background: var(--gpc-moss); color: #fff;
    border: none; border-radius: 8px; padding: 8px 16px;
    font-size: .8rem; font-family: inherit; font-weight: 500;
    cursor: pointer; transition: background .2s;
}
.gpc-zip-btn:hover { background: var(--gpc-leaf); }

.gpc-zip-note { font-size: .7rem; color: var(--gpc-text-soft); font-style: italic; margin-left: auto; }

/* ── Season tabs ────────────────────────────────────────────────────────── */
.gpc-season-tabs {
    display: flex; gap: 4px;
    background: var(--gpc-bg-warm);
    border: 1.5px solid var(--gpc-border);
    padding: 4px; border-radius: 12px;
    width: fit-content; margin-bottom: 20px;
}

.gpc-tab {
    padding: 9px 20px; border-radius: 9px;
    font-size: .82rem; font-weight: 500; font-family: inherit;
    cursor: pointer; transition: all .2s;
    color: var(--gpc-text-soft); border: none; background: transparent;
}
.gpc-tab:hover:not(.gpc-active) { color: var(--gpc-text-mid); background: rgba(0,0,0,.03); }
.gpc-tab.gpc-active { color: #fff; font-weight: 600; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.gpc-tab[data-season="spring"].gpc-active { background: #5fa05a; }
.gpc-tab[data-season="summer"].gpc-active { background: #c8882a; }
.gpc-tab[data-season="fall"].gpc-active   { background: #b85a28; }
.gpc-tab[data-season="winter"].gpc-active { background: #5a7e94; }

/* ── Search bar ─────────────────────────────────────────────────────────── */
.gpc-search-bar {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 16px;
}

.gpc-search-bar input {
    border: 1.5px solid var(--gpc-border);
    background: var(--gpc-bg-card);
    border-radius: 8px; padding: 8px 14px;
    font-size: .84rem; color: var(--gpc-text); width: 220px;
    outline: none; transition: border-color .2s;
    font-family: inherit;
}
.gpc-search-bar input:focus { border-color: var(--gpc-moss); }

.gpc-cat-filter {
    display: flex; gap: 4px;
}
.gpc-cat-btn {
    background: var(--gpc-bg-warm); border: 1.5px solid var(--gpc-border);
    border-radius: 8px; padding: 7px 14px; font-size: .78rem;
    font-family: inherit; cursor: pointer; transition: all .2s;
    color: var(--gpc-text-mid);
}
.gpc-cat-btn.active, .gpc-cat-btn:hover {
    background: var(--gpc-moss); border-color: var(--gpc-moss); color: #fff;
}

/* ── Calendar card ──────────────────────────────────────────────────────── */
.gpc-calendar-card {
    background: var(--gpc-bg-card);
    border: 1.5px solid var(--gpc-border);
    border-radius: 16px;
    padding: 24px 24px 20px;
    box-shadow: 0 4px 24px rgba(0,0,0,.05);
    overflow-x: auto;
}

/* ── Month strip ──────────────────────────────────────────────────────── */
.gpc-month-strip {
    display: grid;
    grid-template-columns: 180px repeat(12, minmax(30px, 1fr));
    gap: 3px; margin-bottom: 4px;
    min-width: 680px;
}

.gpc-month-label {
    font-size: .6rem; text-align: center;
    color: var(--gpc-text-soft);
    text-transform: uppercase; letter-spacing: .7px; font-weight: 600;
    padding-bottom: 4px;
}
.gpc-month-label.gpc-current-month { color: var(--gpc-moss); }

/* ── Plant rows ─────────────────────────────────────────────────────────── */
.gpc-plant-grid { display: flex; flex-direction: column; gap: 3px; }

.gpc-cat-header {
    font-size: .6rem; text-transform: uppercase; letter-spacing: 2px; font-weight: 700;
    color: var(--gpc-bark); padding: 16px 0 5px;
    display: flex; align-items: center; gap: 10px;
}
.gpc-cat-header::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(to right, var(--gpc-border), transparent);
}

.gpc-plant-row {
    display: grid;
    grid-template-columns: 180px repeat(12, minmax(30px, 1fr));
    gap: 3px; align-items: center;
    border-radius: 8px; transition: background .15s;
    min-width: 680px;
}
.gpc-plant-row:hover { background: rgba(0,0,0,.016); }

.gpc-plant-info {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 6px; min-width: 0;
}
.gpc-plant-icon {
    width: 26px; height: 26px; flex-shrink: 0; border-radius: 7px;
    display: flex; align-items: center; justify-content: center; font-size: 14px;
    background: var(--gpc-bg-warm); border: 1px solid var(--gpc-border);
}
.gpc-plant-name { font-size: .78rem; font-weight: 500; color: var(--gpc-text); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gpc-plant-type { font-size: .62rem; color: var(--gpc-text-soft); font-weight: 400; }

/* ── Calendar cells ────────────────────────────────────────────────────── */
.gpc-cell {
    height: 30px; border-radius: 5px;
    background: var(--gpc-bg-warm); border: 1px solid var(--gpc-border);
    cursor: pointer; transition: filter .15s, transform .1s;
}
.gpc-cell:hover { filter: brightness(.9); transform: scaleY(1.07); }

.gpc-cell.gpc-indoor     { background: linear-gradient(135deg, var(--gpc-indoor-a),  var(--gpc-indoor-b));  border-color: rgba(160,120,64,.25); }
.gpc-cell.gpc-transplant { background: linear-gradient(135deg, var(--gpc-trans-a),   var(--gpc-trans-b));   border-color: rgba(74,124,63,.25); }
.gpc-cell.gpc-direct     { background: linear-gradient(135deg, var(--gpc-direct-a),  var(--gpc-direct-b));  border-color: rgba(90,148,72,.25); }
.gpc-cell.gpc-harvest    { background: linear-gradient(135deg, var(--gpc-harvest-a), var(--gpc-harvest-b)); border-color: rgba(200,131,42,.25); }
.gpc-cell.gpc-frost      { background: linear-gradient(135deg, var(--gpc-frost-a),   var(--gpc-frost-b));   border-color: rgba(106,148,168,.25); }

/* ── Legend ─────────────────────────────────────────────────────────────── */
.gpc-legend {
    display: flex; flex-wrap: wrap; gap: 6px 20px;
    padding-top: 16px; margin-top: 16px;
    border-top: 1px solid var(--gpc-border);
}
.gpc-legend-item { display: flex; align-items: center; gap: 7px; font-size: .72rem; color: var(--gpc-text-mid); }
.gpc-ldot { width: 20px; height: 10px; border-radius: 3px; }
.gpc-ldot.gpc-indoor     { background: linear-gradient(135deg, var(--gpc-indoor-a), var(--gpc-indoor-b)); }
.gpc-ldot.gpc-transplant { background: linear-gradient(135deg, var(--gpc-trans-a),  var(--gpc-trans-b)); }
.gpc-ldot.gpc-direct     { background: linear-gradient(135deg, var(--gpc-direct-a), var(--gpc-direct-b)); }
.gpc-ldot.gpc-harvest    { background: linear-gradient(135deg, var(--gpc-harvest-a),var(--gpc-harvest-b)); }
.gpc-ldot.gpc-frost      { background: linear-gradient(135deg, var(--gpc-frost-a),  var(--gpc-frost-b)); }

/* ── Info cards ─────────────────────────────────────────────────────────── */
.gpc-info-cards {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px;
}
.gpc-info-card {
    background: var(--gpc-bg-card); border: 1.5px solid var(--gpc-border); border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04); transition: box-shadow .2s, border-color .2s;
}
.gpc-info-card:hover { border-color: var(--gpc-sage); box-shadow: 0 6px 20px rgba(74,124,63,.1); }
.gpc-ic-label { font-size: .6rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gpc-text-soft); font-weight: 700; margin-bottom: 6px; }
.gpc-ic-value { font-size: 1.6rem; font-weight: 700; color: var(--gpc-text); line-height: 1; }
.gpc-ic-value span { color: var(--gpc-moss); }
.gpc-ic-sub { font-size: .68rem; color: var(--gpc-text-soft); margin-top: 3px; }

/* ── Tooltip ─────────────────────────────────────────────────────────────── */
.gpc-tooltip {
    position: fixed; z-index: 9999;
    background: #ffffff;
    color: #2a2016;
    border: 1.5px solid #e4d9b8;
    border-radius: 10px; padding: 10px 14px; font-size: .78rem;
    pointer-events: none; display: none;
    box-shadow: 0 8px 28px rgba(0,0,0,.14); max-width: 200px; line-height: 1.6;
}
.gpc-tooltip.gpc-visible { display: block; }
.gpc-tooltip strong {
    color: #4a7c3f;
    display: block; font-size: .68rem;
    text-transform: uppercase; letter-spacing: .6px;
    margin-bottom: 3px; font-weight: 700;
}

/* ── Loading spinner ─────────────────────────────────────────────────────── */
.gpc-loading {
    display: none; align-items: center; gap: 8px;
    font-size: .78rem; color: var(--gpc-text-soft);
}
.gpc-loading.gpc-visible { display: flex; }
.gpc-spinner {
    width: 16px; height: 16px; border: 2px solid var(--gpc-border);
    border-top-color: var(--gpc-moss); border-radius: 50%;
    animation: gpc-spin .7s linear infinite;
}
@keyframes gpc-spin { to { transform: rotate(360deg); } }

/* ── No results ──────────────────────────────────────────────────────────── */
.gpc-no-results {
    text-align: center; padding: 40px 20px;
    color: var(--gpc-text-soft); font-size: .9rem; display: none;
}
.gpc-no-results.gpc-visible { display: block; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .gpc-info-cards { grid-template-columns: 1fr 1fr; }
    .gpc-zip-note   { display: none; }
    .gpc-cat-filter { display: none; }
    .gpc-header     { flex-direction: column; }
}

@media (max-width: 400px) {
    .gpc-info-cards { grid-template-columns: 1fr; }
}