/*
 * rivet-contact-info-disclosure.css
 * ----------------------------------
 * Supplemental styles for the Rivet "contact info" icon list + disclosure
 * pattern used to render Office hours on the published profile pages.
 *
 * These classes ship with the newer Rivet contact-info component and are
 * NOT present in rivet-core@2.6.0, which is the version currently linked in
 * the publish layouts. Until rivet-core is upgraded, this file provides the
 * missing rules so the Office hours disclosure renders correctly.
 *
 * Values reference Rivet design tokens (from tokens/css/variables.css, which
 * is already loaded) with hard-coded fallbacks in case a token is absent.
 *
 * Ref: https://rivet.iu.edu/components/disclosure/
 */

/* ---------- Icon list ---------- */
.rvt-contact-info__icon-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rvt-contact-info__icon-list-item {
    display: flex;
    align-items: flex-start;
    gap: var(--rvt-space-xs, 0.5rem);
    margin-top: var(--rvt-space-xs, 0.5rem);
}

.rvt-contact-info__icon-list-item:first-child {
    margin-top: 0;
}

/* Rivet icon web component sits next to the content, top-aligned with the label */
.rvt-contact-info__icon-list-item > rvt-icon,
.rvt-contact-info__icon-list-item > .rvt-icon {
    flex-shrink: 0;
    color: var(--rvt-color-black-500, #4a4a4a);
    margin-top: 0.125rem;
}

/* ---------- Disclosure ---------- */
.rvt-contact-info__disclosure {
    width: 100%;
}

/* The toggle button is presented as a crimson, link-style control */
.rvt-contact-info__disclosure > [data-rvt-disclosure-toggle] {
    display: inline-flex;
    align-items: center;
    gap: var(--rvt-space-xxs, 0.25rem);
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    color: var(--rvt-color-crimson, #990000);
    cursor: pointer;
}

.rvt-contact-info__disclosure > [data-rvt-disclosure-toggle]:hover {
    text-decoration: underline;
}

.rvt-contact-info__disclosure > [data-rvt-disclosure-toggle]:focus-visible {
    outline: 2px solid var(--rvt-color-crimson, #990000);
    outline-offset: 2px;
}

/* Chevron affordance built from CSS borders; rotates when expanded */
.rvt-contact-info__disclosure > [data-rvt-disclosure-toggle]::after {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-left: 0.125rem;
    margin-bottom: 0.2rem;
    border-right: 0.125rem solid currentColor;
    border-bottom: 0.125rem solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.rvt-contact-info__disclosure > [data-rvt-disclosure-toggle][aria-expanded="true"]::after {
    margin-bottom: -0.05rem;
    transform: rotate(-135deg);
}

/* Content revealed by the toggle */
.rvt-contact-info__disclosure > [data-rvt-disclosure-target] {
    margin-top: var(--rvt-space-xxs, 0.25rem);
}

.rvt-contact-info__disclosure > [data-rvt-disclosure-target][hidden] {
    display: none;
}

/* ---------- Day / hours description list (safety net) ---------- */
/* Ensures the "Monday … 9am–5pm" rows lay out even if the rvt-list-description
   or rvt-width-* utilities are unavailable in the loaded rivet-core build. */
.rvt-contact-info__disclosure .rvt-list-description {
    margin: 0;
}

.rvt-contact-info__disclosure .rvt-list-description dt,
.rvt-contact-info__disclosure .rvt-list-description dd {
    margin: 0;
}

.rvt-contact-info__disclosure .rvt-list-description > div {
    max-width: 18rem;
}