/**
 * Site-wide custom CSS overrides.
 *
 * Enqueued on every frontend page. Add one-off layout or component
 * tweaks here rather than editing od-main.css.
 *
 * @package OpenDoors
 */

/* Writing campaign form */
#od-write-campaign {
    background-color: var(--od-color-purple-dark);
    max-width: 640px;
    margin: 0 auto;
    padding: 3vw 3vw 3vw 0;
    color: #fff;
}
#od-write-campaign .gform_wrapper.gravity-theme .gfield_label {
    background-color: var(--od-color-purple);
    padding: 8px 16px;
    border-radius: 0 5px 5px 0;
    color: #fff;
    width: 100%;
    box-shadow: 5px 5px 10px -5px rgba(0, 0, 0, 0.3);
    margin-bottom: 8px;
    font-family: "futura-pt";
}
#od-write-campaign .gfield_description:not(.ginput_counter) {
    padding: 5px 0 0 calc(2vw + 10px);
}
#od-write-campaign .ginput_container {
    padding: 10px 20px 0 calc(2vw + 10px);
}
#od-write-campaign .ginput_counter,
#od-write-campaign .gfield_required {
    color: #fff;
    font-size: 15px;
}
#od-write-campaign .gfield_required {
    padding-left: 4px;
}
#od-write-campaign .gfield--type-html {
    padding-left: calc(2vw + 10px);
}
#od-write-campaign .gfield--type-html div p {
    color: #222;
}
#od-write-campaign .gfield--type-html a {
    color: #fff
}
#od-write-campaign .gform_footer {
    justify-content: flex-end;
}
#od-write-campaign .gform_footer button {
    min-width: 160px;
    text-align: center;
}
#od-write-campaign .gform_confirmation_message {
    padding: 0 0 0 calc(2vw + 10px);
}
#od-write-campaign .od-writing-campaign-info {
    background-color: #fff;
    color: #222;
    font-size: 15px;
    margin-left: calc(2vw + 10px);
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 10px;
}
#od-write-campaign .od-writing-campaign-info a {
    color: var(--od-color-purple);
    font-size: 15px;
}
#od-write-campaign .od-writing-campaign-info a:hover {
    color: var(--od-color-purple-dark);
}

/* Import proof grid — [od_import_proof_grid] shortcode.
   Dense demo listing: the year and month bars are sticky and stack
   (month parks directly under the year bar) so the period a card
   belongs to stays readable while scrolling thousands of rows.
   No ancestor here may use overflow other than visible — it would
   kill the sticky bars. */
.od-page-content article:has(.od-import-proof) {
    padding: 5px;
}

.od-import-proof {
    --odip-top: 0px;
    --odip-year-bar: 26px;
    --odip-month-bar: 20px;
    --odip-purple: var(--od-color-purple, #6b3267);
    --odip-purple-dark: var(--od-color-purple-dark, #53264f);
    max-width: none;
    margin: 0 0 1rem;
}

.od-import-proof__type + .od-import-proof__type {
    margin-top: 14px;
}

.od-import-proof__type-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    padding: 4px 8px;
    font-size: 15px;
    line-height: 1.2;
    color: #fff;
    background: #222;
    border-radius: 3px;
}

/* Year: heavy dark bar, whole year boxed so its extent is obvious. */
.od-import-proof__year {
    margin: 0 0 8px;
    border: 1px solid var(--odip-purple);
    border-radius: 3px;
}

.od-import-proof__year-title {
    position: sticky;
    top: var(--odip-top);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--odip-year-bar);
    margin: 0;
    padding: 0 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: var(--odip-year-bar);
    letter-spacing: 0.08em;
    color: #fff;
    background: var(--odip-purple-dark);
}

/* Month: lighter bar that parks under the year bar, with zebra
   banding on the cards below so month boundaries read at a glance. */
.od-import-proof__month {
    padding: 0 0 5px;
}

.od-import-proof__month:nth-of-type(even) {
    background: #f2edf1;
}

.od-import-proof__month-title {
    position: sticky;
    top: calc(var(--odip-top) + var(--odip-year-bar));
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    height: var(--odip-month-bar);
    margin: 0 0 4px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: var(--odip-month-bar);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--odip-purple-dark);
    background: #e3d8e2;
    border-bottom: 1px solid var(--odip-purple);
}

.od-import-proof__month-year {
    font-weight: 400;
    opacity: 0.65;
}

.od-import-proof__count {
    margin-left: auto;
    font-size: 10px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    opacity: 0.75;
}

.od-import-proof__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: 3px;
    width: 100%;
    padding: 0 4px;
    box-sizing: border-box;
}

.od-import-proof__item {
    display: flex;
    width: auto;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
    gap: 4px;
    padding: 3px !important;
    background: #fff;
    border: 1px solid #e3e0e3;
    border-radius: 2px;
    align-items: flex-start;
}

.od-import-proof__thumb {
    flex: 0 0 auto;
    display: block;
    line-height: 0;
}

.od-import-proof__thumb-img {
    display: block;
    height: 34px;
    width: 34px;
    max-width: none;
    object-fit: cover;
    border-radius: 2px;
}

.od-import-proof__body {
    flex: 1 1 0;
    min-width: 0;
}

/* Every meta line is one line, clipped — cards stay the same height
   so rows do not ratchet apart. Full text is on the title attribute. */
.od-import-proof__date,
.od-import-proof__tax {
    display: block;
    margin: 0;
    font-size: 10px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.od-import-proof__date {
    color: var(--odip-purple);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.od-import-proof__tax {
    color: #666;
}

.od-import-proof__tax-key {
    font-weight: 700;
    color: #999;
}

.od-import-proof__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    font-size: 11.5px;
    line-height: 1.25;
    font-weight: 600;
}

.od-import-proof__title a {
    color: inherit;
    text-decoration: none;
}

.od-import-proof__title a:hover,
.od-import-proof__title a:focus {
    color: var(--od-color-purple, #6b3267);
    text-decoration: underline;
}

.od-import-proof__empty {
    margin: 0 0 6px;
    padding: 0 8px;
    font-size: 12px;
    color: #666;
    font-style: italic;
}

/* Keep the sticky bars clear of the admin bar for logged-in views. */
body.admin-bar .od-import-proof {
    --odip-top: 32px;
}

@media (min-width: 601px) and (max-width: 782px) {
    body.admin-bar .od-import-proof {
        --odip-top: 46px;
    }
}

@media (max-width: 600px) {
    /* Admin bar stops being fixed here, so no offset is needed. */
    body.admin-bar .od-import-proof {
        --odip-top: 0px;
    }

    .od-import-proof__grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
    }
}