/* ============================================================
   APOR public site styles
   ------------------------------------------------------------
   Additions to the USF UCM template (global.css / secondary.css
   / ui-components.css). Those files are vendor code owned by
   University Communications and Marketing. Never edit them.
   Anything we need goes here so template updates can be dropped
   in without losing our changes.

   Loaded after the UCM stylesheets so these rules win.
   Uses the template's own custom properties from variables.css,
   with hex fallbacks in case a token is renamed upstream.
   ============================================================ */


/* ---------- Bootstrap collapse (extracted) ---------- */
/* Just the collapse component from Bootstrap 5, not the full
   stylesheet. The full build ships Reboot, which resets margins,
   font sizes and box-sizing site-wide and breaks the UCM template.
   These rules plus bootstrap.bundle.min.js are all the accordion
   actually needs. */

.collapse:not(.show) {
    display: none;
}

.collapsing {
    height: 0;
    overflow: hidden;
    transition: height .35s ease;
}

@media (prefers-reduced-motion: reduce) {
    .collapsing {
        transition: none;
    }
}


/* ---------- Plus/minus accordion ---------- */
/* Borderless accordion with a +/- glyph instead of a chevron.
   Add .apor-accordion to the .accordion wrapper:

   <div class="accordion apor-accordion" id="faqGroup">
       <div class="accordion-item">
           <h5 class="accordion-header" id="q1Heading">
               <button class="accordion-button collapsed" type="button"
                       data-bs-toggle="collapse" data-bs-target="#q1"
                       aria-expanded="false" aria-controls="q1">
                   Question text
               </button>
           </h5>
           <div id="q1" class="accordion-collapse collapse"
                aria-labelledby="q1Heading" data-bs-parent="#faqGroup">
               <div class="accordion-body">
                   <p>Answer content.</p>
               </div>
           </div>
       </div>
   </div>                                                       */

.apor-accordion .accordion-item {
    margin: 0;
    border: 0;
    background-color: transparent;
}

.apor-accordion .accordion-header {
    margin: 0;
}

/* Margin here would survive the animated height and cause a jump
   at the end of the collapse. */
.apor-accordion .accordion-collapse {
    margin: 0;
}

.apor-accordion .accordion-button {
    position: relative;
    width: 100%;
    padding: .5rem 0 .5rem 1.75rem;
    color: var(--primary-usf-green, #006747);
    font-weight: 700;
    font-size: 1rem;
    text-align: left;
    background-color: transparent;
    border: 0;
    box-shadow: none;
    cursor: pointer;
}

    .apor-accordion .accordion-button:hover {
        text-decoration: underline;
    }

    /* No ring on mouse click. Keyboard users still get one, matching
       the focus treatment on .button in ui-components.css. */
    .apor-accordion .accordion-button:focus {
        outline: none;
        box-shadow: none;
    }

    .apor-accordion .accordion-button:focus-visible {
        box-shadow: 0 0 0 2px #ffffff, 0 0 3px 5px var(--accent-sky, #86c8e8);
    }

    /* +/- glyph, absolutely positioned so the hover underline skips it */
    .apor-accordion .accordion-button::before {
        content: "+";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.25rem;
        line-height: 1;
    }

    .apor-accordion .accordion-button:not(.collapsed)::before {
        content: "\2212";
    }

.apor-accordion .accordion-body {
    padding: .5rem 0 1rem 1.75rem;
}


/* ---------- Nested accordion ---------- */
/* Second-level accordion inside an .accordion-body. */

.apor-accordion-nested {
    margin-top: .25rem;
}


/* ---------- Side nav: nested submenus ---------- */
/* Public counterpart of the .apor-side-nav rules in internal-site.css.
   Scoped to the template's .sectionNav so its own list styles in
   secondary.css still apply to the top level. */

/* Link text and +/- toggle share a row */
.sectionNav .apor-side-nav-row {
    display: flex;
    align-items: center;
}

.sectionNav .apor-side-nav-link {
    flex: 1;
}

/* secondary.css only gives the heading font to direct children of the
   list, which the row wrapper breaks. */
.sectionNav .apor-side-nav-row > .apor-side-nav-link,
.sectionNav .apor-side-nav-section-toggle {
    font: 600 1.375em/1.09em "Barlow Condensed", sans-serif;
    text-transform: uppercase;
}

/* global.css gives every adjacent sibling a 1.5em top margin (body * + *).
   Clear it where the sibling is a toggle or a collapsing panel. */
.sectionNav .apor-side-nav-caret,
.sectionNav .apor-side-nav-sub {
    margin-top: 0;
}

/* Spacing sits on the inner list, not the collapsing element, so the
   animated height has no margin or padding left over to jump at the end. */
.sectionNav .apor-side-nav-sub > ul {
    margin: 0;
    padding: 1.25em 0 0 1em;
}

/* Section panels get more room above and below than the submenu itself */
.sectionNav .apor-side-nav-section > .apor-side-nav-sub > ul {
    padding: 1.75em 0 .75em 1em;
}

/* Section header button, reset to read like the links around it */
.sectionNav .apor-side-nav-section-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
    color: var(--primary-usf-green, #006747);
    text-align: left;
    background-color: transparent;
    border: 0;
    cursor: pointer;
}

    .sectionNav .apor-side-nav-section-toggle:hover .apor-side-nav-link {
        text-decoration: underline;
    }

    /* No ring on mouse click. Keyboard users still get one. */
    .sectionNav .apor-side-nav-section-toggle:focus {
        outline: none;
    }

    .sectionNav .apor-side-nav-section-toggle:focus-visible {
        box-shadow: 0 0 0 2px #ffffff, 0 0 3px 5px var(--accent-sky, #86c8e8);
    }

/* First section sits below the loose links above it */
.sectionNav li + li.apor-side-nav-section {
    margin-top: 1.25em;
}

.sectionNav li.apor-side-nav-section + li.apor-side-nav-section {
    margin-top: .5em;
    padding-top: .5em;
    border-top: 1px solid var(--neutral-silver, #cad2d8);
}

/* Links inside a section step down from their header */
.sectionNav .sectionNav_menu .apor-side-nav-section-item > a {
    font-size: 1.15em;
}

.sectionNav li.apor-side-nav-section-item + li.apor-side-nav-section-item {
    margin-top: 2em;
}

/* ---------- Side nav: +/- toggles ---------- */

.sectionNav .apor-side-nav-caret {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: .25em;
}

/* Toggle is its own anchor, so stop the shared a:hover underline */
.sectionNav a.apor-side-nav-caret:hover,
.sectionNav a.apor-side-nav-caret:focus {
    text-decoration: none;
}

/* Minus when open, plus when closed. Two selectors: the toggle anchor
   carries .collapsed itself, the header's toggle span sits inside a
   .collapsed button. */
.sectionNav .apor-side-nav-caret::before {
    content: "\2212";
    font: 600 1.25rem/1 "Barlow Condensed", sans-serif;
}

.sectionNav .apor-side-nav-caret.collapsed::before,
.sectionNav .collapsed .apor-side-nav-caret::before {
    content: "+";
}


/* ---------- Section headings ---------- */
/* The internal site gets these from .rendered-content in site.css.
   The public layout has no such wrapper, so scope them to the
   template's own content well instead. */

.mainContent_well h3 {
    color: var(--primary-usf-green, #006747);
    font-size: 1.25em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mainContent_well h4 {
    color: var(--secondary-evergreen, #3f565e);
    font-size: 1.125em;
    font-weight: 700;
}

/* ---------- Data table ---------- */
/* The public layout no longer loads Bootstrap CSS, so .table and
   .table-striped do nothing. Use .apor-table instead. */

.apor-table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
}

    .apor-table th,
    .apor-table td {
        padding: .75rem;
        text-align: left;
        vertical-align: top;
        border-bottom: 1px solid var(--neutral-silver, #cad2d8);
    }

    .apor-table thead th {
        color: #ffffff;
        font-weight: 700;
        background-color: var(--primary-usf-green, #006747);
        border-bottom: 0;
    }

    .apor-table tbody tr:nth-of-type(odd) {
        background-color: #f4f6f7;
    }