/* ============================================================
   Classifieds Pro — Frontend Styles
   ============================================================ */

/* Grid layouts */
.cp-listings { display: grid; gap: 20px; margin: 24px 0; }
.cp-grid-1   { grid-template-columns: 1fr; }
.cp-grid-2   { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

/* Card base */
.cp-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px 24px;
    transition: box-shadow .2s, border-color .2s;
    position: relative;
}
.cp-card:hover {
    border-color: #bdbdbd;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.cp-card--expired {
    opacity: .65;
    background: #fafafa;
}

/* Header row: badge + expiry */
.cp-card__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

/* Type badges */
.cp-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
}
.cp-badge-job          { background: #e3f2fd; color: #0d47a1; }
.cp-badge-tender       { background: #e8f5e9; color: #1b5e20; }
.cp-badge-death        { background: #f3e5f5; color: #4a148c; }
.cp-badge-notice       { background: #fff3e0; color: #bf360c; }
.cp-badge-classified   { background: #fce4ec; color: #880e4f; }

/* Expiry badges */
.cp-expiry-badge {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 20px;
    background: #e8f5e9;
    color: #1b5e20;
    margin-left: auto;
}
.cp-expiry-badge--expired { background: #ffebee; color: #b71c1c; }
.cp-expiry-badge--urgent  { background: #fff3e0; color: #e65100; }

/* Title */
.cp-card__title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.35;
}
.cp-card__title a {
    color: inherit;
    text-decoration: none;
}
.cp-card__title a:hover { text-decoration: underline; }

/* Meta row */
.cp-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 13px;
    color: #555;
    margin-bottom: 12px;
}
.cp-meta-item { display: flex; align-items: center; gap: 5px; }
.cp-meta-icon { font-style: normal; }

/* Excerpt */
.cp-card__excerpt {
    font-size: 14px;
    color: #444;
    line-height: 1.6;
    margin-bottom: 14px;
    border-left: 3px solid #e0e0e0;
    padding-left: 12px;
}

/* Footer */
.cp-card__footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    border-top: 1px solid #f0f0f0;
    padding-top: 14px;
    margin-top: 8px;
}

/* CTA button */
.cp-btn {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #1565c0;
    text-decoration: none;
    padding: 6px 14px;
    border: 1.5px solid #1565c0;
    border-radius: 4px;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.cp-btn:hover {
    background: #1565c0;
    color: #fff;
    text-decoration: none;
}

/* Contact info in footer */
.cp-card__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 12px;
    color: #666;
    margin-left: auto;
}
.cp-card__contact a {
    color: #1565c0;
    text-decoration: none;
}
.cp-card__contact a:hover { text-decoration: underline; }

/* No results */
.cp-no-results {
    color: #777;
    font-style: italic;
    padding: 16px 0;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .cp-card {
        background: #1e1e1e;
        border-color: #333;
    }
    .cp-card:hover { border-color: #555; }
    .cp-card__title a { color: #e0e0e0; }
    .cp-card__meta, .cp-card__excerpt { color: #aaa; }
    .cp-card__footer { border-color: #333; }
    .cp-btn { color: #90caf9; border-color: #90caf9; }
    .cp-btn:hover { background: #90caf9; color: #000; }
}

/* Print friendliness */
@media print {
    .cp-btn, .cp-card__contact a { color: #000 !important; }
    .cp-card { page-break-inside: avoid; }
}


/* ============================================================
   Notices Search Bar
   ============================================================ */

.cp-search-wrap { margin: 24px 0; }

.cp-search-bar {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 20px 22px;
    margin-bottom: 18px;
}

.cp-search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
}

.cp-search-field { display: flex; flex-direction: column; gap: 5px; }
.cp-search-field--keyword   { flex: 2 1 240px; }
.cp-search-field--category,
.cp-search-field--type      { flex: 1 1 160px; }
.cp-search-field--date      { flex: 1 1 140px; }
.cp-search-field--actions   { flex: 0 0 auto; }

.cp-search-label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.cp-input-icon-wrap { position: relative; }
.cp-input-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    pointer-events: none;
    color: #999;
}

.cp-search-input {
    width: 100%;
    padding: 9px 12px 9px 34px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    box-sizing: border-box;
    transition: border-color .15s;
}
.cp-search-input--date { padding-left: 10px; }
.cp-search-input:focus,
.cp-search-select:focus { border-color: #1565c0; outline: none; }

.cp-search-select {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    box-sizing: border-box;
    transition: border-color .15s;
}

.cp-btn--search {
    background: #1565c0;
    color: #fff;
    border-color: #1565c0;
    padding: 9px 18px;
}
.cp-btn--search:hover { background: #0d47a1; border-color: #0d47a1; }

.cp-btn--reset {
    background: transparent;
    color: #666;
    border-color: #ccc;
    padding: 9px 14px;
}
.cp-btn--reset:hover { border-color: #999; color: #333; }

/* Results summary */
.cp-search-summary {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
    min-height: 20px;
}

/* Loading state */
.cp-results--loading { opacity: .5; pointer-events: none; transition: opacity .2s; }

/* Pagination */
.cp-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 24px;
    justify-content: center;
}
.cp-page-btn {
    padding: 7px 14px;
    border: 1px solid #d0d0d0;
    border-radius: 5px;
    background: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.cp-page-btn:hover           { background: #e8f5e9; border-color: #aaa; }
.cp-page-btn--active         { background: #1565c0; color: #fff; border-color: #1565c0; font-weight: 600; }
.cp-page-btn--active:hover   { background: #0d47a1; }


/* ============================================================
   Single Notice Page
   ============================================================ */

.cp-single-notice {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 16px 48px;
}

.cp-print-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 14px 0 20px;
    border-bottom: 1px solid #eee;
    margin-bottom: 24px;
}

.cp-btn--print {
    background: #37474f;
    color: #fff;
    border-color: #37474f;
    padding: 8px 18px;
    font-size: 14px;
}
.cp-btn--print:hover { background: #263238; border-color: #263238; }

.cp-btn--back {
    color: #555;
    border-color: #ccc;
    padding: 8px 14px;
    font-size: 14px;
}
.cp-btn--back:hover { border-color: #999; color: #222; }

.cp-single-notice__header { margin-bottom: 24px; }

.cp-single-notice__cats {
    display: inline-block;
    font-size: 12px;
    color: #777;
    margin-left: 8px;
}

.cp-single-notice__title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    margin: 10px 0 8px;
}

.cp-single-notice__byline {
    font-size: 13px;
    color: #888;
    margin-bottom: 20px;
}

/* Meta detail grid */
.cp-single-notice__meta {
    background: #f5f5f5;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 28px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px 24px;
}

.cp-meta-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 14px;
}
.cp-meta-row__icon  { font-style: normal; flex-shrink: 0; }
.cp-meta-row__label { color: #777; min-width: 110px; flex-shrink: 0; }
.cp-meta-row__value { color: #222; font-weight: 500; }
.cp-meta-row__value a { color: #1565c0; }

/* Body */
.cp-single-notice__body {
    font-size: 16px;
    line-height: 1.75;
    color: #333;
    border-top: 1px solid #eee;
    padding-top: 24px;
    margin-bottom: 32px;
}

.cp-single-notice__footer {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

/* Print-only elements hidden on screen */
.print-only { display: none; }


/* ============================================================
   Print Styles
   ============================================================ */

@media print {

    /* Hide everything except the notice itself */
    body * { visibility: hidden; }
    .cp-single-notice,
    .cp-single-notice * { visibility: visible; }

    .cp-single-notice {
        position: absolute;
        inset: 0;
        max-width: 100%;
        padding: 0;
        font-size: 12pt;
    }

    /* Show print-only elements */
    .print-only { display: block !important; }

    /* Hide screen-only elements */
    .no-print { display: none !important; }

    /* Print header */
    .cp-print-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2pt solid #000;
        padding-bottom: 10pt;
        margin-bottom: 18pt;
    }
    .cp-print-date { font-size: 9pt; color: #555; margin: 0; }

    /* Print footer */
    .cp-print-footer {
        margin-top: 24pt;
        padding-top: 10pt;
        border-top: 1pt solid #ccc;
        font-size: 9pt;
        color: #555;
    }
    .cp-print-footer p { margin: 2pt 0; }

    /* Layout tweaks */
    .cp-single-notice__title { font-size: 18pt; }
    .cp-single-notice__meta  { border: 1pt solid #ccc; background: #f9f9f9; }
    .cp-meta-row__value a    { color: #000; text-decoration: none; }
    .cp-badge { border: 1pt solid #999; background: transparent; color: #000; }

    /* Avoid page breaks inside meta or body */
    .cp-single-notice__meta,
    .cp-single-notice__body { page-break-inside: avoid; }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }
    /* Suppress URL expansion for internal nav links (not in the body) */
    .cp-single-notice__header a::after { content: none; }
}


/* ============================================================
   Dark mode additions
   ============================================================ */

@media (prefers-color-scheme: dark) {
    .cp-search-bar    { background: #1a1a1a; border-color: #333; }
    .cp-search-input,
    .cp-search-select { background: #252525; border-color: #444; color: #e0e0e0; }
    .cp-search-label  { color: #aaa; }
    .cp-page-btn      { background: #222; border-color: #444; color: #ccc; }
    .cp-page-btn:hover { background: #2c2c2c; }
    .cp-single-notice__meta { background: #1a1a1a; border-color: #333; }
    .cp-meta-row__value     { color: #e0e0e0; }
    .cp-meta-row__label     { color: #999; }
    .cp-single-notice__body { color: #ccc; }
    .cp-btn--print { background: #546e7a; border-color: #546e7a; }
    .cp-btn--print:hover { background: #37474f; border-color: #37474f; }
}