/*
 * custom style for 
 * software and font pages
 */

h2.select-terms {
    font-size: 18px;
    font-weight: 600;
}

.inner-card.Discontinued,
.inner-card.Unsupported

/*, .inner-card.Maintenance.only */
    {
    background: #e9e9e9;
}

i.fa.fa-external-link {
    font-size: 20px;
    color: black;
    margin-top: 6px;
}

/* Consolidated from the WP Customizer's "Additional CSS" (post 726) — that hidden,
   non-git-tracked stylesheet previously set the live box-shadow/hover-lift here
   (it prints after this file, so its values were winning over the ones below).
   Moved here so this page's actual look lives in git, not a hidden DB option. */
.inner-card {
    box-shadow: 0px 0px 10px rgb(0 0 0 / 22%);
    border-radius: 10px;
    border: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.inner-card:hover {
    transform: translateY(-4px);
    box-shadow: 0px 0px 14px rgb(0 0 0 / 27%);
}


@media(min-width:769px) {
    h2.select-terms {
        display: inline-block;
    }

    .sub-container {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: flex-start;
    }

    .select-container {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .sub-container {
        margin-right: 15px;
    }
}

@media(max-width:768px) {
    select#camera-filter {
        width: 100%;
    }

}

@media(max-width:768px) {
    .cust-card-style {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .card {
        /*         margin: 14px; */
        width: 46%;
    }

    .cust-card-style {
        display: flex;
    }

    h1.title-text,
    h2.title-text {
        /*         font-size: 14px; */
        font-family: inherit;
    }

    .title-img img {
        width: 35px;
    }

    h1.sub-txt {
        font-size: 15px;
    }
}

@media(min-width:1025px) {
    .card {
        flex-basis: 33.33333%;
        padding: 15px;
    }
}

/* Medium screens (tablets, small desktops) */
@media (max-width: 1024px) and (min-width: 769px) {

    /* @media (max-width: 780px) { */
    .card {
        flex-basis: 50%;
        padding: 15px;
    }

    .title {
        font-size: 30px;
    }
}

/* Small screens (large phones, small tablets) */
@media (max-width: 768px) and (min-width: 501px) {
    .card {
        flex-basis: 50%;
        /* 2 cards per row */
        padding: 10px;
    }
}

/* Extra small screens (phones) */
@media(max-width:500px) {

    .card {
        margin-bottom: 20px !important;
        flex-basis: 100%;
        margin-top: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .sub-icon {
        max-width: 100%;
    }

    /*     .sub-icon {
        width: 27%;
    }
    .sub-txt {
        width: 32%;
    } */
}

/* @media (max-width: 500px) {
    .card {
        flex-basis: 5100%;
    }

    .box .close-btn {
        margin-left: 0;
        left: 80%;
        top: -12%;
    }
}

@media (max-width: 580px) {
    .third-section .sub-icon {
        order: 1;
        width: 70%
    }

    .third-section .sub-txt {
        order: 3;
        width: 100%;
        margin-top: 10px;
    }

    .third-section .per-link {
        order: 2;
        width: 30%;
    }
} */

.Discontinued .sub-txt,
.Unsupported .sub-txt,
.Maintenance.only .sub-txt {
    font-style: italic;
    font-weight: 100;
}

.inner-card.Supported .sub-txt {
    opacity: 0;
}

.third-section .sub-icon img {
    padding: 0 !important;
}

/* part 2 */

.table-of-contents>.sub-container {
    margin: 2rem;
}

.table-of-contents>.sub-container>a {
    margin-top: 1rem;
}

.fonts .first-section {
    justify-content: flex-start;
    margin-bottom: 1rem;
}

.fonts.cust-card {
    padding: 2rem 0rem;
}

.fonts .card>.inner-card {
    min-height: 250px;
}

.fonts .first-section .title-txt {
    min-width: fit-content;
}

.inner-wrapper.cust-card.all-cards.cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.inner-card {
    cursor: pointer;
    text-decoration: none !important;
}

.first-section {
    display: flex;
    align-items: center;
    padding-bottom: 15px;
    gap: 8px;
    justify-content: space-between;

}

.per-link {
    margin-left: auto;
}

.title-img img {
    width: 80px
}

/* .title-icon{
	margin-left: auto
} */
.title-icon img {
    width: 25px
}

.third-section {
    display: flex;
    padding-top: 10px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

h1.title-text,
h2.title-text {
    text-align: center;
    font-size: 20px;
    font-family: inherit;
    margin: 0;

}

.first-section .title-img img {
    padding: 0px;
}

.cust-card-style .card .inner-card .content p {
    margin: 0
}

.first-section .title-img {
    max-width: 60px;
}

.first-section .title-icon {
    max-width: 45px;
    width: 45px;
    text-align: right;
}

.first-section .title-txt {
    width: 100%;
}

div.sub-txt {
    flex: 1
}

h1.sub-txt {
    font-size: 19px;
    font-family: inherit;
    width: 100%;
    text-align: center;
    margin: 0;
}

/* Value (30px) matches what was actually live via the Customizer's Additional
   CSS, which set padding-top: 30px on this same selector and — printing after
   this file — was overriding whatever was written here. Consolidated to one
   place so Fonts (which still relies on this base rule) doesn't change look. */
.cust-card {
    padding-top: 30px;
}

.card {
    padding: 10px;
}

.card>.inner-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #0000002d;
    padding: 20px;
    min-height: 275px
}

.cust-card-style {
    display: flex;
    flex-wrap: wrap;
}

.sub-icon {
    max-width: 45%;
}

.sub-icon>img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.sub-txt {
    /*     max-width: 24%; */
}

.per-link {
    /*     max-width: 20%; */
    text-align: right;
}

.title-txt {
    max-width: 175px;
}

.select-container>.sub-container {
    flex: 1;
}

.navbar {
    margin-bottom: 0px !important
}

/* select#camera-filter {
    width: 200px;
    height: 50px;
    padding: 14px;
    margin-left: 15px;
    margin-bottom: 20px;
} */
.inner-wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.card {
    /*   flex-basis: 33.33333%; */
    padding: 15px;
}

.inner-card {
    background-color: #fff;
    padding: 15px;
    box-shadow: 0px 0px 10px rgb(0 0 0 / 32%);
}

.img-wrapper {
    width: 100%;
    height: 200px;
    margin-bottom: 10px;
}

.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.content {
    margin-bottom: 20px;
}

.content h1 {
    font-weight: 900;
    font-size: 16px;
    margin-bottom: 10px;
    color: #444;
}

.content p {
    font-size: 14px;
    line-height: 1.5;
    color: #555;
}

.btn-wrapper {
    display: block;
    text-align: center;
}

a.btn.btn-danger.card-btn {
    color: #fff;
    background-color: #0168a7;
    border-color: #055f96;
}

a.btn.btn-danger.card-btn:hover {
    color: #000;
    background-color: transparent;
    border-color: #055f96;
}

.inner-wrapper.all-cards.cards .inner-card {
    display: flex;
    width: 100%;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
}

a.inner-card.Supported .sub-txt {
    display: none;
}

.cust-card-style .card {
    display: flex;
}


.cust-card.all-cards .card {
    display: flex;
}

.container.font-page .card {
    padding: 0;
    margin: 10px 10px;
}

.font-page .card {
    flex-basis: 23%;
    padding: 15px;
}



.container.font-page .title-img img {
    width: 80px;
}

.container.font-page h1.title-text,
.container.font-page h2.title-text {
    text-align: center;
    font-size: 16px;
}

.container.font-page .article-body img {
    padding-top: 0px;
    padding-bottom: 0px;

}

a.inner-card {
    width: 100%;
}

.sub-icon {
    display: flex;

}

.sub-icon img {
    margin-right: 5px;
}

.cust-card-style .card .inner-card .content p {
    font-weight: normal;
}

/*
 * Page-content inset, matched to .job-openings-page / .feed-page exactly —
 * without this, the page's own content (H1 onward) sits flush against the
 * shared .container with no top gap and no extra left/right inset, so it
 * reads as less indented than Jobs/News/Learn even though the breadcrumb
 * above it (rendered by a shared block, not this template) lines up fine.
 */
.software-page-wrap {
    /* No horizontal padding — align with the breadcrumb / simple-page pages
       (the .container already provides the inset); the extra 20px pushed the
       whole catalog in past the breadcrumb, worst on mobile. */
    padding: 24px 0 48px;
}

/*
 * Page header — H1 + description + a Fonts Catalog badge, matched to the Jobs
 * page's header exactly (.job-openings-header: divider line, same padding/
 * margin rhythm, badge pills on the right). Replaces the old bordered
 * "Software Products" box + "Looking for Fonts?" navy card + grey "Software
 * Catalog" bar + filter-usage tip blockquote (all authored directly in this
 * page's post_content, not template markup) — those boxes described what the
 * page does and how to use it; the goal now is simple navigation without
 * explaining the obvious, matching how Jobs/News/Learn just state what the
 * page is in one line and let the filter UI speak for itself.
 */
.software-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 28px;
    margin-bottom: 28px;
}

.software-page-h1 {
    font-size: 36px;
    font-weight: 800;
    color: #002b5c;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 12px !important; /* overrides h1.article-h1's 1em/1em from custom-style.css */
}

.software-page-description {
    color: #64748b;
    font-size: 17px;
    font-weight: 500;
    margin: 0;
}

.software-page-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Matches .job-openings-badge, but this one is a genuine cross-page link (not
   just an info note like the Jobs badges) — kept as an obvious link with a
   trailing arrow, on top of the badge's own hover-lift, so it doesn't read as
   inert status text. */
.software-page-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition: box-shadow 0.2s, transform 0.2s;
}

.software-page-badge i {
    font-size: 16px;
}

.software-page-badge:hover,
.software-page-badge:focus {
    transform: translateY(-2px);
    text-decoration: none;
}

/* Matches .job-openings-badge--navy — its darker text-on-pale-bg combo has
   much better contrast than the cyan variant (~17:1 vs ~2.8:1), which reads
   noticeably crisper at normal zoom instead of looking soft/muddy. */
.software-page-badge--navy {
    background: rgba(0, 43, 92, 0.06);
    border: 1px solid rgba(0, 43, 92, 0.12);
    color: #002b5c;
    box-shadow: 0 2px 8px rgba(0, 43, 92, 0.08);
}

.software-page-badge--navy:hover {
    color: #002b5c;
    box-shadow: 0 8px 20px rgba(0, 43, 92, 0.18);
}

/* Results bar — matches .job-results-bar / .job-results-count exactly. */
.software-results-bar {
    padding: 0 2px;
    margin-bottom: 20px;
}

/* .cust-card's generic `padding-top: 30px` (used elsewhere, e.g. the Fonts
   page's own card grid) doubled up with this bar's own margin-bottom above,
   pushing the actual card row further below the count than the 20px every
   other page uses. Scoped to only fire right after this specific bar, so the
   Fonts page's grid (and anything else using .cust-card) is untouched. */
.software-results-bar + .inner-wrapper.cust-card {
    padding-top: 0;
}

/* Card grid — retrofit to the same CSS Grid + explicit gap approach as Jobs
   (.awsm-job-listings in job-openings.css), instead of the old Bootstrap
   col-lg-4/col-md-6/col-sm-12 + per-card padding gutter. That old mechanism
   made each `.card`'s own 15px padding double as the visual gutter, which
   stacked on top of .software-results-bar's margin-bottom and any row-to-row
   margin — producing a much bigger gap above the first card, and between
   cards, than the clean 20px/24px (32px on mobile) Jobs uses. Scoped to
   `.software-page-wrap` so the Fonts page — which shares .card/.inner-card/
   .cust-card but keeps its own Bootstrap column layout — is untouched. */
.software-page-wrap .row.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    margin: 0;
}

/* Bootstrap's `.row` clearfix (`.row:before/:after { content:" "; display:table }`,
   see style.css) still generates real boxes under display:grid — each becomes an
   anonymous grid item, adding a phantom empty row above the first real card. */
.software-page-wrap .row.cards::before,
.software-page-wrap .row.cards::after {
    content: none;
    display: none;
}

.software-page-wrap .row.cards > .card {
    /* !important needed to beat the legacy `.card { margin-bottom: 20px
       !important; ... }` mobile rule further down this file (still needed
       as-is for the Fonts page's own Bootstrap-column layout) — same pattern
       job-openings.css uses to reset the plugin's own .awsm-job-listing-item. */
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.software-results-count {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
}

.software-results-count strong {
    color: #002b5c;
}

@media (max-width: 759px) {
    .software-page-header {
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 32px;
        margin-bottom: 32px;
    }

    .software-page-wrap .row.cards {
        gap: 32px;
    }

    .software-results-bar {
        margin-bottom: 32px;
    }
}

/*
 * Search & filter section — visual style AND interaction model matched to the
 * Jobs/News filter (css/job-openings.css .job-filter-bar / css/feed.css
 * .feed-toolbar-bar, .feed-filter*): a button + checkbox panel per taxonomy,
 * not Select2 — selection shows as a "N selected" label + checkmarks, not pill
 * tags inside the field. This file isn't loaded alongside those, so the tokens
 * are repeated literally here rather than shared via CSS custom properties —
 * keep them in sync by hand if the Jobs/News palette changes (navy #002b5c,
 * cyan #00ADEF, border #e2e8f0, muted text #64748b). Only the filter section's
 * look/behavior changes here — the rest of the page is untouched.
 */
.software-filter-section {
    margin: 24px 0 20px;
}

.software-filter-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px;
    margin-bottom: 10px;
    min-height: 24px;
}

.software-filter-section-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(0, 43, 92, 0.6);
}

.software-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 20px;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.software-filter-field {
    display: flex;
    flex-direction: column;
}

.software-field-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin-bottom: 6px;
}

.software-search-field {
    flex: 2 1 300px;
    min-width: 200px;
}

.software-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 14px;
    pointer-events: none;
}

.software-search-container {
    position: relative;
}

.search-input {
    width: 100%;
    max-width: none;
    padding: 9px 12px 9px 36px;
    font-size: 15px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}

.search-input:focus {
    border-color: #00ADEF;
    box-shadow: 0 0 0 3px rgba(0, 173, 239, 0.15);
}

.search-input::placeholder,
input::placeholder {
    color: #9ca3af;
}

.select-container {
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    flex: 1 1 460px;
}

.select-container > .software-filter-field {
    flex: 1 1 220px;
    min-width: 220px;
}

/* Taxonomy dropdown — button + checkbox panel, same pattern as .feed-filter. */
.software-filter {
    position: relative;
    min-width: 220px;
}

.software-filter-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 15px;
    color: #1e293b;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.software-filter-btn:hover,
.software-filter-btn:focus-visible,
.software-filter.is-open .software-filter-btn {
    border-color: #00ADEF;
}

.software-filter.is-open .software-filter-btn {
    box-shadow: 0 0 0 3px rgba(0, 173, 239, 0.15);
}

.software-filter-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 173, 239, 0.15);
}

.software-filter-label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.software-filter-chevron {
    flex: 0 0 auto;
    border: solid #64748b;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    margin-top: -3px;
}

.software-filter-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    max-width: 320px;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    z-index: 100;
    padding: 6px;
}

.software-filter.is-open .software-filter-panel {
    display: block;
}

.software-filter-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #64748b;
    transition: background 0.1s;
}

.software-filter-option:hover {
    background: #F8FAFC;
}

.software-filter-option.is-selected {
    color: #002b5c;
    font-weight: 600;
}

.software-filter-check {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border-radius: 4px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: transparent;
}

.software-filter-option.is-selected .software-filter-check {
    background: #00ADEF;
    border-color: #00ADEF;
    color: #fff;
}

/* Clear button — matches .feed-clear / .job-clear-all-btn exactly. */
.software-filter-clear {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    color: #00ADEF;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
}

.software-filter-clear[hidden] {
    display: none;
}

.software-filter-clear:hover,
.software-filter-clear:focus-visible {
    text-decoration: underline;
}

.software-filter-clear:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 173, 239, 0.15);
}

@media (max-width: 768px) {
    .software-filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .software-search-field {
        flex: none;
        width: 100%;
        min-width: 0;
    }

    .select-container {
        flex-direction: column;
        flex: none;
        width: 100%;
        gap: 14px;
    }

    .select-container > .software-filter-field {
        /* Reset the desktop rule's `flex: 1 1 220px` — that 220px is a width
           basis for the row layout above; once .select-container switches to
           flex-direction:column here, the main axis flips to vertical and the
           same flex-basis becomes a forced 220px HEIGHT instead, leaving a big
           empty gap under each field's actual (much shorter) content. */
        flex: none;
        width: 100%;
        min-width: 0;
    }

    .software-filter {
        min-width: 0;
        width: 100%;
    }
}

/* Apple Menu Icon styling for shortcode */
.apple-menu-icon {
    height: 1.1em;
    width: auto;
    vertical-align: -0.2em;
    display: inline-block;
    fill: currentColor;
    margin: 0 0.1em;
}