/**
 * TPF Card Component Styles
 *
 * Consolidated from custom-css-js entries 209.css / 424.css (identical),
 * 228.css (gallery), and 326.css (AddToAny customisation).
 * Those entries should be deleted from the Custom CSS and JS plugin once
 * this file is confirmed working.
 *
 * Changes vs the original custom-css-js source:
 *   - justify-content: left  → flex-start  (was invalid)
 *   - order: -1 removed                    (had no effect)
 *   - float: right on buttons removed       (fragile inside grid; column-2 uses flex)
 *   - .c-card__content__column-2 uses flex column so buttons stack cleanly
 *   - select.tpf-filter padding-right increased for arrow spacing
 *   - Unnecessary !important removed throughout
 *
 * @package TPF
 * @since 1.3.0
 */

/* ==========================================================================
   Card — Base
   ========================================================================== */

.c-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: fit-content;
    background: #F4F4F4;
    padding: 20px;
    margin: 0 0 30px 0;
    overflow: hidden;
}

/* ==========================================================================
   Card — Content Grid
   ========================================================================== */

.c-card__content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    padding-bottom: 15px;
    min-height: 230px;
}

.c-card__content__inner {
    display: block;
    position: relative;
}

.c-card__content__column-1 {
    display: block;
}

/**
 * Action column: flex column so Apply Now / Share / View Job stack top-down
 * without needing floats. !important needed to beat Divi/theme block display.
 */
.c-card__content__column-2 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 8px !important;
    text-align: right;
}

/* ==========================================================================
   Card — Title
   ========================================================================== */

.c-card__content__title {
    display: block;
    color: #4086c0;
    font-weight: 500;
    font-size: 26px;
    line-height: 1.2em;
    margin: 0 0 10px 0;
    padding: 0;
}

/* ==========================================================================
   Card — Details List
   ========================================================================== */

/* !important required — theme global ul styles add bullets and padding */
.c-card__content ul {
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
}

.c-card__content ul li {
    font-size: 14px !important;
    padding: 0 !important;
    border-bottom: 1px solid #cccccc;
    line-height: 30px;
    overflow-wrap: break-word;
    word-break: break-word;
}

.c-card__content ul li:last-child {
    border: none;
}

.c-card__content__details__location {
    font-weight: 700;
}

/* ==========================================================================
   Card — Action Buttons
   ========================================================================== */

.c-card__content__button {
    margin: 0;
}

/* ==========================================================================
   Card — Show More / Less Toggle
   ========================================================================== */

.c-card__show-more,
.c-card__show-less {
    position: relative;
    text-align: right;
}

/* ==========================================================================
   Card — Expandable Section
   ========================================================================== */

.c-card__expandable {
    display: none;
    flex-direction: column;
    font-size: 14px;
    clear: both;
}

.c-card__expandable__content {
    padding-top: 20px;
}

/* ==========================================================================
   Card — Why TPF CTA Section
   ========================================================================== */

.tpf-order-why-tpf {
    padding-top: 20px;
}

.tpf-order-why-tpf h4 {
    font-size: 17px !important;
}

.tpf-order-why-tpf ul {
    padding: 0 0 20px 1.5em !important;
}

.tpf-order-why-tpf ul li {
    font-size: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 18px !important;
}

.tpf-order-why-tpf p {
    font-size: 14px !important;
}

/* ==========================================================================
   Card — Order ID Label
   ========================================================================== */

.orderid {
    font-size: 10px;
    font-style: italic;
}

/* ==========================================================================
   Card Container
   ========================================================================== */

.c-card__container {
    display: block;
    width: 100%;
}

/* ==========================================================================
   Filter UI
   ========================================================================== */

.tpf-filter-box {
    display: block;
}

select.tpf-filter {
    background-color: #4086c0;
    width: calc(25% - 20px);
    border: none;
    color: #fff !important; /* !important keeps text white after a selection is made */
    border-radius: 5px;
    font-weight: 700;
    font-size: 16px;
    text-align: left;
    margin-right: 20px;
    float: left;
    margin-bottom: 15px;
    cursor: pointer;

    /* Remove the OS-native arrow so we can control placement precisely */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Custom white chevron; right 10px keeps it away from the edge */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 8px;

    /* Right padding reserves space for the arrow so text doesn't run under it */
    padding: 8px 32px 8px 8px;
}

/* Options inside the open dropdown: dark text on white so they're readable */
select.tpf-filter option {
    color: #333333;
    background-color: #ffffff;
}

@media (max-width: 1023px) {
    select.tpf-filter {
        width: 100%;
        margin-right: 0;
    }
}

.tpf-button-blue {
    color: #ffffff;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    background-color: #4086c0;
    padding: 8px 30px;
    font-weight: 700;
    display: block;
    cursor: pointer;
}

/* ==========================================================================
   AddToAny Share Button
   (base from 424.css; share-option hiding from 326.css)
   ========================================================================== */

.addtoany_shortcode {
    margin-bottom: 0;
}

/*
 * !important on all properties — the AddToAny plugin injects its own
 * stylesheet after ours and resets these values without !important.
 */
.addtoany_shortcode a.addtoany_no_icon {
    text-align: center !important;
    color: #ffffff !important;
    background-color: #e3b922 !important;
    padding: 5px !important;
    border-radius: 5px !important;
    width: 120px !important;
    display: block !important;
    font-size: 16px !important;
    line-height: 1.3em !important;
}

/* Hide AddToAny's footer bar and search field */
div.a2a_full_footer,
.a2a_menu_find_container {
    display: none;
}

/* Hide sharing options not relevant to TPF — from 326.css */
.a2a_i:has(.a2a_s_mix),
.a2a_i:has(.a2a_s_amazon),
.a2a_i:has(.a2a_s_google_translate),
.a2a_i:has(.a2a_s_aol),
.a2a_i:has(.a2a_s_balatarin),
.a2a_i:has(.a2a_s_bibsonomy),
.a2a_i:has(.a2a_s_blogger),
.a2a_i:has(.a2a_s_blogmarks),
.a2a_i:has(.a2a_s_bookmarks_fr),
.a2a_i:has(.a2a_s_box),
.a2a_i:has(.a2a_s_buffer),
.a2a_i:has(.a2a_s_diary_ru),
.a2a_i:has(.a2a_s_diaspora),
.a2a_i:has(.a2a_s_digg),
.a2a_i:has(.a2a_s_diigo),
.a2a_i:has(.a2a_s_douban),
.a2a_i:has(.a2a_s_draugiem),
.a2a_i:has(.a2a_s_evernote),
.a2a_i:has(.a2a_s_fark),
.a2a_i:has(.a2a_s_flipboard),
.a2a_i:has(.a2a_s_folkd),
.a2a_i:has(.a2a_s_google_classroom),
.a2a_i:has(.a2a_s_y18),
.a2a_i:has(.a2a_s_hatena),
.a2a_i:has(.a2a_s_houzz),
.a2a_i:has(.a2a_s_instapaper),
.a2a_i:has(.a2a_s_kakao),
.a2a_i:has(.a2a_s_known),
.a2a_i:has(.a2a_s_line),
.a2a_i:has(.a2a_s_livejournal),
.a2a_i:has(.a2a_s_mail_ru),
.a2a_i:has(.a2a_s_mendeley),
.a2a_i:has(.a2a_s_meneame),
.a2a_i:has(.a2a_s_mewe),
.a2a_i:has(.a2a_s_mixi),
.a2a_i:has(.a2a_s_myspace),
.a2a_i:has(.a2a_s_kindle),
.a2a_i:has(.a2a_s_odnoklassniki),
.a2a_i:has(.a2a_s_papaly),
.a2a_i:has(.a2a_s_pinboard),
.a2a_i:has(.a2a_s_plurk),
.a2a_i:has(.a2a_s_printfriendly),
.a2a_i:has(.a2a_s_pusha),
.a2a_i:has(.a2a_s_qzone),
.a2a_i:has(.a2a_s_raindrop_io),
.a2a_i:has(.a2a_s_reddit),
.a2a_i:has(.a2a_s_pocket),
.a2a_i:has(.a2a_s_threads),
.a2a_i:has(.a2a_s_rediff),
.a2a_i:has(.a2a_s_refind),
.a2a_i:has(.a2a_s_sina_weibo),
.a2a_i:has(.a2a_s_sitejot),
.a2a_i:has(.a2a_s_slashdot),
.a2a_i:has(.a2a_s_stocktwits),
.a2a_i:has(.a2a_s_svejo),
.a2a_i:has(.a2a_s_symbaloo),
.a2a_i:has(.a2a_s_threema),
.a2a_i:has(.a2a_s_trello),
.a2a_i:has(.a2a_s_tumblr),
.a2a_i:has(.a2a_s_twiddla),
.a2a_i:has(.a2a_s_twitter),
.a2a_i:has(.a2a_s_typepad),
.a2a_i:has(.a2a_s_viber),
.a2a_i:has(.a2a_s_vk),
.a2a_i:has(.a2a_s_wechat),
.a2a_i:has(.a2a_s_wordpress),
.a2a_i:has(.a2a_s_wykop),
.a2a_i:has(.a2a_s_xing),
.a2a_i:has(.a2a_s_yahoo),
.a2a_i:has(.a2a_s_yummly) {
    display: none;
}

/* ==========================================================================
   Job Order Gallery (from 228.css)
   ========================================================================== */

.tpf-order-gallery {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    width: 100%;
}

.tpf-order-gallery__item {
    position: relative;
    flex: calc(33% - 30px);
    /* 3 items per row on desktop */
    padding: 1px;
    box-sizing: border-box;
    flex-grow: 0;
    margin: 0 15px 40px 15px;
}

.tpf-order-gallery__item:last-child {
    flex-grow: 0;
}

.tpf-order-gallery__item__caption {
    color: #505050;
    font-size: 20px;
    line-height: 1.3em;
    margin-top: 5px;
}

.tpf-order-gallery__item__caption__job-loc {
    font-weight: 700;
}

/* Divi tablet breakpoint: 980px and below — 2 columns */
@media only screen and (max-width: 980px) {
    .tpf-order-gallery__item {
        flex: calc(50% - 30px);
    }
}

/* Divi phone breakpoint: 767px and below — 1 column */
@media only screen and (max-width: 767px) {
    .tpf-order-gallery__item {
        flex: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
    }
}