/* =============================================================================
   Program Finder Component  ::  program-finder.css
   =============================================================================
   Upload to /_resources/css/program-finder.css (the XSL links it on first use).

   Structure (BEM, namespaced so it never collides with the site's .program-list):
     .program-finder                     section wrapper (theme + width modifiers)
       __header / __heading / __intro    optional heading and intro
       __controls                        white filter panel (shown by the script)
         __field / __label / __input / __select / __checkbox / __reset
       __status                          live result count
       __results > __group > __list > __item
         __program > __link > __last-word > __arrow, __badge
         __type                          credential label
       __empty                           "no programs match" message

   The default theme reproduces the live .program-list (main.css): #2a2a86
   background, #6B7AD6 row dividers, white links with a yellow arrow on the
   last word, and the same full-bleed column margins.

   Breakpoints: 768px / 1024px for component layout. The "bleed" margins follow
   the site's own 700px / 1025px steps (see section 2).
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Custom properties (default theme = current live program list)
   -------------------------------------------------------------------------- */
.program-finder {
    /* Section */
    --pf-bg: #2a2a86;
    --pf-color: #ffffff;
    --pf-heading-color: #ffffff;
    --pf-divider: #6b7ad6;
    --pf-section-border: #ffffff;

    /* Rows */
    --pf-link-color: #ffffff;
    --pf-link-hover-color: #ffe14f;
    --pf-arrow-bg: #ffe14f;
    --pf-arrow-color: #2a2a86;
    --pf-arrow-hover-bg: #ffffff;
    --pf-row-hover-bg: rgba(255, 255, 255, 0.06);
    --pf-type-color: #ffffff;
    --pf-badge-bg: #ffe14f;
    --pf-badge-color: #1a1a1a;
    --pf-group-heading-color: #ffe14f;

    /* Filter panel */
    --pf-panel-bg: #ffffff;
    --pf-panel-color: #000000;
    --pf-field-border: #000000;
    --pf-accent: #2a2a86;
    --pf-reset-color: #2a2a86;
    --pf-reset-hover-color: #006366;

    /* Shared */
    --pf-focus-color: #ffe14f;
    --pf-panel-focus-color: #2a2a86;
    --pf-font: "Montserrat", Arial, Helvetica, sans-serif;
    --pf-transition: 0.3s ease;
}

/* -----------------------------------------------------------------------------
   2. Section wrapper
   -------------------------------------------------------------------------- */
.program-finder {
    font-family: var(--pf-font);
    background-color: var(--pf-bg);
    color: var(--pf-color);
    border-bottom: 2px solid var(--pf-section-border);
    padding: 3em 15px 45px;
    margin: 0 0 2rem;
}

/* bleed (default): cancel exactly the space around the content column, which
   main.css sets in three steps (measured on www.hccc.edu):
     <=700px      .wysiwyg { margin: 15px }        -> -15px
     701-1024px   no margin, no padding            -> 0
     >=1025px     .container__right padding 55px   -> -55px / -52px
   The old .program-list used -30px from 700px, which pushed it 30px off the
   screen edge on tablets. */
.program-finder--bleed {
    margin: 0 0 2rem;
}

@media (max-width: 700px) {
    .program-finder--bleed {
        margin: 0 -15px 2rem;
    }
}

.program-finder--contained {
    border-radius: 8px;
    border-bottom: 0;
}

@media (min-width: 700px) {
    .program-finder {
        padding: 2.6em 30px 3.4em;
        border-bottom-width: 4px;
    }

    .program-finder--contained {
        border-bottom-width: 0;
    }
}

@media (min-width: 1025px) {
    .program-finder--bleed {
        margin: 0 -55px 2rem -52px;
    }
}

/* Site collision: main.css still ships a .program-finder rule from the unused
   ifactory finder (>=1025px: display:flex; flex-wrap:wrap; padding:0 0 3px),
   which put the status line beside the list. section.program-finder (0,1,1)
   outranks it regardless of stylesheet order. */
section.program-finder {
    display: block;
}

@media (min-width: 1025px) {
    section.program-finder {
        padding: 59px 40px 65px 52px;
    }
}

/* The script uses the hidden attribute; flex/grid rules below must not win */
.program-finder [hidden] {
    display: none !important;
}

/* -----------------------------------------------------------------------------
   3. Heading + intro
   -------------------------------------------------------------------------- */
.program-finder .program-finder__heading {
    color: var(--pf-heading-color);
    font-family: var(--pf-font);
    font-weight: 800;
    line-height: 1.25;
    font-size: 24px;
    margin: 0;
}

.program-finder__intro {
    font-size: 1em;
    margin: 1em 0 1.2em;
}

.program-finder__intro p:last-child {
    margin-bottom: 0;
}

.program-finder__intro a {
    color: var(--pf-link-hover-color);
    text-decoration: underline;
}

@media (min-width: 700px) {
    .program-finder .program-finder__heading {
        font-size: 30px;
    }

    .program-finder__intro {
        margin-bottom: 2.2em;
    }
}

@media (min-width: 1025px) {
    .program-finder .program-finder__heading {
        font-size: 36px;
    }

    .program-finder__intro {
        margin-bottom: 2.9em;
    }
}

/* Without a heading or intro the panel/list start at the top */
.program-finder > .program-finder__controls:first-child,
.program-finder > .program-finder__status:first-child {
    margin-top: 0;
}

/* -----------------------------------------------------------------------------
   4. Filter panel (mirrors the site's catalog-program-list filter bar)
   -------------------------------------------------------------------------- */
.program-finder__controls {
    /* Flex-wrap, not a fixed grid: the live content column is ~840px at
       desktop, and fields must reflow to whatever width they get */
    display: flex;
    flex-wrap: wrap;
    gap: 20px 28px;
    align-items: flex-end;
    background-color: var(--pf-panel-bg);
    color: var(--pf-panel-color);
    margin: 1.5em -15px 0;
    padding: 28px 15px 24px;
}

.program-finder__field {
    display: flex;
    flex-direction: column;
    flex: 1 1 100%;
    min-width: 0;
}

.program-finder .program-finder__label {
    display: block;
    font-family: var(--pf-font);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    color: var(--pf-panel-color);
    margin: 0 0 8px;
}

.program-finder .program-finder__input,
.program-finder .program-finder__select {
    display: block;
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    font: 400 16px/1.2 var(--pf-font);
    color: var(--pf-panel-color);
    background-color: transparent;
    border: solid var(--pf-field-border);
    border-width: 0 0 2px;
    border-radius: 0;
    padding: 8px 0;
    margin: 0;
}

.program-finder .program-finder__select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 28px;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.program-finder .program-finder__input::placeholder {
    color: #595959;
    opacity: 1;
}

.program-finder .program-finder__input:focus,
.program-finder .program-finder__select:focus {
    outline: none;
    border-bottom-color: var(--pf-accent);
    box-shadow: 0 2px 0 0 var(--pf-accent);
}

.program-finder .program-finder__input:focus-visible,
.program-finder .program-finder__select:focus-visible {
    outline: 2px solid var(--pf-panel-focus-color);
    outline-offset: 4px;
}

/* Checkbox */
.program-finder__field--check {
    flex-direction: row;
    align-items: center;
    min-height: 44px;
}

.program-finder .program-finder__checkbox {
    /* main.css hides every checkbox (input[type="checkbox"] { opacity: 0 })
       for its own custom boxes; use the native one here */
    opacity: 1;
    position: static;
    appearance: auto;
    -webkit-appearance: checkbox;
    width: 22px;
    height: 22px;
    margin: 0 10px 0 0;
    flex: 0 0 auto;
    accent-color: var(--pf-accent);
    cursor: pointer;
}

.program-finder .program-finder__label--check {
    margin: 0;
    cursor: pointer;
}

/* main.css draws checkmarks with "input:checked + label" pseudo-elements */
.program-finder .program-finder__label--check::before,
.program-finder .program-finder__label--check::after {
    content: none;
    display: none;
}

.program-finder .program-finder__checkbox:focus-visible {
    outline: 2px solid var(--pf-panel-focus-color);
    outline-offset: 3px;
}

/* Reset */
.program-finder__field--reset {
    justify-content: flex-end;
}

.program-finder .program-finder__reset {
    align-self: flex-start;
    min-height: 44px;
    padding: 8px 0;
    background: none;
    border: 0;
    font: 700 16px/1.2 var(--pf-font);
    color: var(--pf-reset-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color var(--pf-transition);
}

.program-finder .program-finder__reset:hover {
    color: var(--pf-reset-hover-color);
}

.program-finder .program-finder__reset:focus-visible {
    outline: 2px solid var(--pf-panel-focus-color);
    outline-offset: 2px;
}

/* Only offer "Clear filters" once something is filtered */
.program-finder:not(.program-finder--filtered) .program-finder__field--reset {
    visibility: hidden;
}

@media (min-width: 700px) {
    .program-finder__controls {
        margin: 1.5em -30px 0;
        padding: 32px 30px 28px;
    }
}

@media (min-width: 768px) {
    .program-finder__controls {
        gap: 24px 28px;
    }

    /* Search gets its own row on tablet; dropdowns share the next one */
    .program-finder__field {
        flex: 1 1 12rem;
    }

    .program-finder__field--search {
        flex: 1 1 100%;
    }

    .program-finder__field--check,
    .program-finder__field--reset {
        flex: 0 0 auto;
    }
}

@media (min-width: 1024px) {
    /* Search joins the dropdown row when there is room; the checkbox and
       "Clear filters" wrap to a second row rather than squeezing it */
    .program-finder__field--search {
        flex: 2 1 16rem;
    }
}

@media (min-width: 1025px) {
    .program-finder__controls {
        margin: 2em -40px 0 -52px;
        padding: 40px 40px 36px 52px;
    }
}

/* -----------------------------------------------------------------------------
   5. Status line
   -------------------------------------------------------------------------- */
.program-finder .program-finder__status {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    margin: 1.25em 0 0.75em;
    color: var(--pf-color);
}

/* -----------------------------------------------------------------------------
   6. Results list (mirrors .program-list__content / __item)
   -------------------------------------------------------------------------- */
.program-finder__results {
    margin: 0 -15px;
}

.program-finder__group + .program-finder__group {
    margin-top: 2em;
}

.program-finder .program-finder__group-heading {
    color: var(--pf-group-heading-color);
    font-family: var(--pf-font);
    font-weight: 800;
    font-size: 20px;
    line-height: 1.2;
    margin: 0 0 0.75em;
    padding: 0 15px;
}

/* Reset the .wysiwyg bullet list styles (0,2,x beats .wysiwyg ul li:before) */
.program-finder .program-finder__list {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1.38;
}

.program-finder .program-finder__item {
    position: relative;
    margin: 0;
    padding: 0.57rem 15px;
    border-top: 1px solid var(--pf-divider);
    transition: background-color var(--pf-transition);
}

.program-finder .program-finder__item::before {
    content: none;
    display: none;
}

.program-finder .program-finder__item:last-child {
    border-bottom: 1px solid var(--pf-divider);
}

.program-finder .program-finder__item:hover {
    background-color: var(--pf-row-hover-bg);
}

.program-finder__program {
    display: block;
}

.program-finder .program-finder__link {
    font-family: var(--pf-font);
    font-size: 1.25em;
    font-weight: 700;
    color: var(--pf-link-color);
    text-decoration: none;
    transition: color var(--pf-transition);
}

.program-finder .program-finder__link:hover {
    color: var(--pf-link-hover-color);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.program-finder .program-finder__link:focus-visible {
    outline: 2px solid var(--pf-focus-color);
    outline-offset: 3px;
}

/* Last word + arrow never wrap apart */
.program-finder__last-word {
    position: relative;
    display: inline-block;
    padding-right: 1.6em;
}

.program-finder__arrow {
    position: absolute;
    top: 50%;
    right: 0;
    width: 0.95em;
    height: 0.95em;
    margin-top: -0.475em;
    border-radius: 100%;
    background-color: var(--pf-arrow-bg);
    transition: right var(--pf-transition), background-color var(--pf-transition);
}

.program-finder__arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.32em;
    height: 0.32em;
    margin: -0.16em 0 0 -0.24em;
    border: solid var(--pf-arrow-color);
    border-width: 2px 2px 0 0;
    transform: rotate(45deg);
}

.program-finder .program-finder__link:hover .program-finder__arrow {
    right: -12px;
    background-color: var(--pf-arrow-hover-bg);
}

/* "Fully Online" badge sits inside the link so it is part of the link name */
.program-finder__badge {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 0.5em;
    padding: 2px 8px;
    border-radius: 3px;
    background-color: var(--pf-badge-bg);
    color: var(--pf-badge-color);
    font-size: 0.6em;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

.program-finder__type {
    display: block;
    margin-top: 2px;
    font-size: 0.9em;
    font-weight: 400;
    color: var(--pf-type-color);
}

@media (min-width: 700px) {
    .program-finder__results {
        margin: 0 -30px;
    }

    .program-finder .program-finder__group-heading {
        padding: 0 30px;
    }

    .program-finder .program-finder__item {
        display: flex;
        align-items: center;
        padding: 0.73rem 30px;
    }

    .program-finder__program {
        flex: 0 0 53.7%;
        padding-right: 1em;
        box-sizing: border-box;
    }

    .program-finder .program-finder__link {
        font-size: 1.1em;
    }

    .program-finder__last-word {
        padding-right: 1.45em;
    }

    .program-finder__type {
        margin-top: 0;
    }
}

@media (min-width: 1025px) {
    .program-finder__results {
        margin: 0 -40px 0 -52px;
    }

    .program-finder .program-finder__group-heading {
        padding: 0 50px;
        font-size: 22px;
    }

    .program-finder .program-finder__item {
        padding: 0.6rem 50px;
    }

    .program-finder__program {
        flex-basis: 50.4%;
    }

    .program-finder .program-finder__link {
        font-size: 1.24em;
    }

    .program-finder__type {
        font-size: 1em;
    }
}

/* Contained width: rows and panel line up with the heading inside the box */
.program-finder--contained .program-finder__results,
.program-finder--contained .program-finder__controls {
    margin-left: 0;
    margin-right: 0;
}

@media (min-width: 700px) {
    .program-finder--contained .program-finder__controls {
        padding: 28px 28px 24px;
    }
}

.program-finder--contained .program-finder__item,
.program-finder--contained .program-finder__group-heading {
    padding-left: 0;
    padding-right: 0;
}

.program-finder--contained .program-finder__item:hover {
    background-color: transparent;
}

/* -----------------------------------------------------------------------------
   7. Empty state
   -------------------------------------------------------------------------- */
.program-finder__empty {
    padding: 1.5em 0 0.5em;
    font-size: 1.1em;
}

.program-finder__empty p {
    margin: 0 0 0.5em;
}

.program-finder .program-finder__reset--inline {
    color: var(--pf-link-hover-color);
}

.program-finder .program-finder__reset--inline:hover {
    color: var(--pf-color);
}

.program-finder .program-finder__reset--inline:focus-visible {
    outline-color: var(--pf-focus-color);
}

/* -----------------------------------------------------------------------------
   8. Themes
   Every text/background pair is >= 4.5:1 (WCAG 2.1 AA); table in DEVELOPER-GUIDE.
   -------------------------------------------------------------------------- */

/* HCCC Primary: teal */
.program-finder--hccc-primary {
    --pf-bg: #00857a;
    --pf-divider: #4fb3aa;
    --pf-link-hover-color: #ffffff; /* yellow on teal is 3.5:1; hover = white + underline */
    --pf-arrow-color: #00857a;
    --pf-accent: #00857a;
    --pf-reset-color: #006366;
    --pf-reset-hover-color: #2a2a86;
    --pf-panel-focus-color: #00857a;
    --pf-group-heading-color: #ffffff;
    --pf-row-hover-bg: rgba(0, 0, 0, 0.08);
}

/* HCCC Secondary: institutional blue */
.program-finder--hccc-secondary {
    --pf-bg: #2b3990;
    --pf-divider: #7380cf;
    --pf-arrow-color: #2b3990;
    --pf-accent: #2b3990;
    --pf-reset-color: #2b3990;
    --pf-panel-focus-color: #2b3990;
}

/* HCCC Accent: light section, yellow highlights */
.program-finder--hccc-accent {
    --pf-bg: #ffffff;
    --pf-color: #000000;
    --pf-heading-color: #2a2a86;
    --pf-divider: #d0d0d0;
    --pf-section-border: #fff200;
    --pf-link-color: #006366;
    --pf-link-hover-color: #2a2a86;
    --pf-arrow-bg: #fff200;
    --pf-arrow-color: #000000;
    --pf-arrow-hover-bg: #2a2a86;
    --pf-row-hover-bg: #fffbcc;
    --pf-type-color: #333333;
    --pf-badge-bg: #2a2a86;
    --pf-badge-color: #ffffff;
    --pf-group-heading-color: #2a2a86;
    --pf-panel-bg: #f5f5f5;
    --pf-focus-color: #2a2a86;
}

.program-finder--hccc-accent .program-finder__link:hover .program-finder__arrow::before {
    border-color: #ffffff;
}

.program-finder--hccc-accent .program-finder__intro a,
.program-finder--hccc-accent .program-finder__reset--inline {
    color: #006366;
}

/* 50th Anniversary: black and gold */
.program-finder--anniversary {
    --pf-bg: #1a1a1a;
    --pf-heading-color: #d4af37;
    --pf-divider: #5c5241;
    --pf-section-border: #d4af37;
    --pf-link-hover-color: #d4af37;
    --pf-arrow-bg: #d4af37;
    --pf-arrow-color: #1a1a1a;
    --pf-badge-bg: #d4af37;
    --pf-group-heading-color: #d4af37;
    --pf-accent: #1a1a1a;
    --pf-reset-color: #1a1a1a;
    --pf-reset-hover-color: #8a6d12;
    --pf-panel-focus-color: #1a1a1a;
    --pf-focus-color: #d4af37;
}

/* 50th Anniversary Gold: gold section, black text */
.program-finder--anniversary-gold {
    --pf-bg: #d4af37;
    --pf-color: #1a1a1a;
    --pf-heading-color: #1a1a1a;
    --pf-divider: #8a6d12;
    --pf-section-border: #1a1a1a;
    --pf-link-color: #1a1a1a;
    --pf-link-hover-color: #000000; /* white on gold is 2.1:1; hover = black + underline */
    --pf-arrow-bg: #1a1a1a;
    --pf-arrow-color: #d4af37;
    --pf-arrow-hover-bg: #ffffff;
    --pf-row-hover-bg: rgba(255, 255, 255, 0.18);
    --pf-type-color: #1a1a1a;
    --pf-badge-bg: #1a1a1a;
    --pf-badge-color: #d4af37;
    --pf-group-heading-color: #1a1a1a;
    --pf-accent: #1a1a1a;
    --pf-reset-color: #1a1a1a;
    --pf-panel-focus-color: #1a1a1a;
    --pf-focus-color: #1a1a1a;
}

.program-finder--anniversary-gold .program-finder__link:hover .program-finder__arrow::before {
    border-color: #1a1a1a;
}

.program-finder--anniversary-gold .program-finder__intro a,
.program-finder--anniversary-gold .program-finder__reset--inline {
    color: #1a1a1a;
}

/* -----------------------------------------------------------------------------
   9. Editor notices (preview/edit only)
   -------------------------------------------------------------------------- */
.program-finder-notice {
    font-family: var(--pf-font, Arial, sans-serif);
    background: #fff8e1;
    color: #3d2c00;
    border: 2px dashed #b38600;
    padding: 12px 16px;
    margin: 1em 0;
    font-size: 15px;
    line-height: 1.5;
}

.program-finder-notice code {
    background: rgba(0, 0, 0, 0.06);
    padding: 1px 4px;
}

/* -----------------------------------------------------------------------------
   10. User preferences, forced colors, print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .program-finder *,
    .program-finder *::before {
        transition: none !important;
    }

    .program-finder .program-finder__link:hover .program-finder__arrow {
        right: 0;
    }
}

@media (prefers-contrast: more) {
    .program-finder .program-finder__item {
        border-top-width: 2px;
    }

    .program-finder .program-finder__input,
    .program-finder .program-finder__select {
        border-bottom-width: 3px;
    }
}

@media (forced-colors: active) {
    .program-finder {
        border: 1px solid CanvasText;
    }

    .program-finder__controls {
        border: 1px solid CanvasText;
    }

    .program-finder__arrow {
        background-color: LinkText;
        forced-color-adjust: none;
    }

    .program-finder__arrow::before {
        border-color: Canvas;
    }

    .program-finder__badge {
        border: 1px solid CanvasText;
    }

    .program-finder .program-finder__link:focus-visible,
    .program-finder .program-finder__input:focus-visible,
    .program-finder .program-finder__select:focus-visible,
    .program-finder .program-finder__reset:focus-visible {
        outline: 2px solid Highlight;
    }
}

@media print {
    .program-finder {
        background: none !important;
        color: #000 !important;
        margin: 0 0 1em !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .program-finder__controls,
    .program-finder__status,
    .program-finder__empty,
    .program-finder__arrow {
        display: none !important;
    }

    /* Print the full list regardless of the current filter */
    .program-finder [data-pf-item][hidden],
    .program-finder [data-pf-group][hidden] {
        display: block !important;
    }

    .program-finder .program-finder__heading,
    .program-finder .program-finder__group-heading,
    .program-finder .program-finder__link,
    .program-finder__type {
        color: #000 !important;
    }

    .program-finder .program-finder__item {
        border-color: #999 !important;
        padding: 4px 0 !important;
        break-inside: avoid;
    }

    .program-finder__results {
        margin: 0 !important;
    }

    .program-finder__badge {
        border: 1px solid #000;
        background: none;
        color: #000;
    }
}