/* # School Information: Bell Schedules Widget
----------------------------------------------------------------------------- */

.gsdssi.bell-schedule ol,
.gsdssi.bell-schedule ul {
    margin-left: 25px;
}

.gsdssi.bell-schedule ol + p,
.gsdssi.bell-schedule ul + p {
    margin-top: 20px;
}

.gsdssi.bell-schedule ul li {
    list-style-type: disc;
}

.gsdssi.bell-schedule table {
    border-collapse: collapse;
    margin-bottom: 20px;
    width: 100%;
}

.gsdssi.bell-schedule caption {
    font-weight: bold;
    padding-bottom: 8px;
    text-align: left;
}

.gsdssi.bell-schedule th,
.gsdssi.bell-schedule td {
    border: 1px solid #ccc;
    padding: 8px 12px;
    text-align: left;
}

.gsdssi.bell-schedule thead th {
    background-color: #f1f1f1;
}


/* # School Information: Bus Information Widget
----------------------------------------------------------------------------- */

.gsdssi.bus-information > *:first-child {
    margin-top: 0;
}

.gsdssi.bus-information > *:last-child {
    margin-bottom: 0;
}

.gsdssi.bus-information ol,
.gsdssi.bus-information ul {
    margin-left: 25px;
}

.gsdssi.bus-information ol + p,
.gsdssi.bus-information ul + p {
    margin-top: 20px;
}

.gsdssi.bus-information ul li {
    list-style-type: disc;
}

.gsdssi.bus-information img {
    height: auto;
    max-width: 100%;
}

.gsdssi.bus-information figure {
    margin: 0 0 20px;
}

.gsdssi.bus-information table {
    border-collapse: collapse;
    margin-bottom: 20px;
    width: 100%;
}

.gsdssi.bus-information th,
.gsdssi.bus-information td {
    border: 1px solid #ccc;
    padding: 8px 12px;
    text-align: left;
}

.gsdssi.bus-information thead th {
    background-color: #f1f1f1;
}

.gsdssi.bus-information .ci-bus-information-page-title {
    margin: 0 0 0.75rem;
    font-weight: 700;
    color: #222;
}


/* # School Information: Contact Information Shortcodes
----------------------------------------------------------------------------- */

.contact-info-sc-wrap {
    margin-bottom: 25px;
}

.contact-info-sc-wrap .contact-info-item {
    margin-bottom: 10px;
}

.contact-info-sc-wrap i {
    min-width: 25px;
}

.contact-info-sc-wrap .icon-label {
    font-weight: 600;
}

.contact-info-sc-wrap .information {
    display: block;
    margin-left: 25px;
}

.contact-info-sc-wrap p {
    margin-bottom: 5px;
}


/* # School Information: Contact Information Widget
----------------------------------------------------------------------------- */

.gsdssi.contact-information .contact-info-item {
    margin-bottom: 10px;
}

.gsdssi.contact-information .contact-info-item:last-of-type {
    margin-bottom: 0;
}

.gsdssi.contact-information .contact-info-item .icon-label,
.gsdssi.contact-information .contact-info-item .information {
    display: block;
}

.gsdssi.contact-information .contact-info-item .icon-label {
    font-weight: 600;
}

.gsdssi.contact-information .contact-info-item i {
    width: 25px;
}

.gsdssi.contact-information .contact-info-item .information {
    margin-left: 25px;
}

.gsdssi.contact-information .contact-info-item .contact-info-item.moh ol,
.gsdssi.contact-information .contact-info-item .contact-info-item.moh ul {
    margin-left: 20px;
}

.gsdssi.contact-information .contact-info-item .contact-info-item.moh p + ol,
.gsdssi.contact-information .contact-info-item .contact-info-item.moh p + ul {
    margin-top: -20px;
}


/* # School Information: Program Logos
----------------------------------------------------------------------------- */

.program-logo {
    font-size: 18px;
    margin-bottom: 2em;
}

.program-logo.aligncenter {
    margin-bottom: 2em;
}

.program-logo.aligncenter:last-of-type {
    margin-bottom: 0;
}

.program-logo:last-of-type {
    margin-bottom: 0;
}

.program-logo a {
    border: none;
    text-decoration: none;
}


/* Required Links
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

div.required-links {
    display: inline;
}

div.required-links span {
    margin-right: 5px;
}


/* # School Information: Social Profiles Widget
----------------------------------------------------------------------------- */

.gsdssi.social-profiles {
    list-style-type: none;
}

.gsdssi.social-profiles.row {
    display: flex;
    flex-flow: row wrap;
}

.gsdssi.social-profiles.left.list {
    text-align: left;
}

.gsdssi.social-profiles.left.row {
    justify-content: flex-start;
}

.gsdssi.social-profiles.center.list {
    text-align: center;
}

.gsdssi.social-profiles.center.row {
    justify-content: center;
}

.gsdssi.social-profiles.right.list {
    text-align: right;
}

.gsdssi.social-profiles.right.row {
    justify-content: flex-end;
}

.gsdssi.social-profiles li.icons {
    font-size: 48px;
    margin: 0 10px 10px 0;
}

.gsdssi.social-profiles a {
    border: none;
}

.gsdssi.social-profiles i {
    display: block;
}

.gsdssi.no-social-profiles.left {
    text-align: left;
}

.gsdssi.no-social-profiles.center {
    text-align: center;
}

.gsdssi.no-social-profiles.right {
    text-align: right;
}


/* # School Information: Summer Information
----------------------------------------------------------------------------- */

.summer-info {
    white-space: break-spaces;
}

.summer-info ul {
    white-space: normal;
}


/* # School Information: Contact Information -- Modern Block Layout
   (mobile-first; used only when layout="block")
----------------------------------------------------------------------------- */

.contact-info-block {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    margin-bottom: 2rem;
}

.contact-info-block .ci-block-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    scroll-margin-top: 1rem; /* a little breathing room when jumped to via the quick links below */
}

/* -- "Jump to a section" quick links --
   A full-width bar styled like the site's primary/secondary navbar (solid color, white
   links). No explicit `width` here -- .contact-info-block is a column flexbox, so this
   flex item stretches to fill it by default, which is what lets JS's negative margins
   (below) correctly *extend* the bar's rendered width past that default, rather than
   fighting a fixed `width: 100%` (which would just get silently overridden by the browser
   whenever both margins are also set explicitly). On the front end, JS
   (gsdssi-school-information-public.js) measures the nearest ".container" ancestor and
   applies exact negative margins so the bar bleeds flush to *that* container's true edges
   -- fixed rem guesses can't reliably match every page template/context, but a live
   measurement always will. If JS hasn't run (or there's no ".container" ancestor, e.g. in
   the block editor canvas), the bar simply stays the width of its normal flex container. */

.contact-info-block .ci-quick-links {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media only screen and (min-width: 768px) {
    .contact-info-block .ci-quick-links {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.contact-info-block .ci-quick-links-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Padding, border rhythm, and the hover/focus treatment below intentionally mirror the
   gsd-counselors plugin's own in-page nav bar (public/css/gsd-counselors-public.css), which
   itself mirrors the site's .nav-primary / .nav-secondary links -- a transparent border top &
   bottom that turns into a two-tone accent (dark on top, light on bottom) on hover/focus, plus
   a background darken. The darken itself isn't a guessed CSS color: the link carries the
   theme's own "primary-color-bg-dark-hover" utility class (added in the PHP render), so it
   uses the exact dark shade the real nav computes from whatever primary color is set in the
   Customizer. */

.contact-info-block .ci-quick-links-link {
    display: block;
    padding: 0.6666666667em;
    color: #fff;
    font-weight: 400;
    font-size: 1rem;
    text-decoration: none;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: border-color 0.2s ease, background-color 0.2s ease, outline-color 0.2s ease;
}

.contact-info-block .ci-quick-links-link:hover,
.contact-info-block .ci-quick-links-link:focus {
    text-decoration: none;
    border-top-color: rgba( 0, 0, 0, 0.25 );
    border-bottom-color: rgba( 255, 255, 255, 0.6 );
}

.contact-info-block .ci-quick-links-link:focus-visible {
    outline-color: rgba( 255, 255, 255, 0.95 );
}

@media only screen and ( max-width: 767px ) {

    .contact-info-block .ci-quick-links-list {
        flex-direction: column;
    }

    .contact-info-block .ci-quick-links-link {
        border-top-width: 0;
        border-bottom-width: 1px;
        border-bottom-color: rgba( 255, 255, 255, 0.25 ); /* like the real nav's mobile item dividers */
    }

    .contact-info-block .ci-quick-links-link:hover,
    .contact-info-block .ci-quick-links-link:focus {
        border-bottom-color: rgba( 255, 255, 255, 0.9 );
    }

}

.contact-info-block .ci-block-section-title {
    margin: 0;
    padding-left: 0;
    border-left: none;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #222;
}

.contact-info-block .ci-block-section-title.ci-section-label-indent-decoration {
    border-left: 4px solid #ccc; /* overridden by primary-color-border utility class */
    padding-left: 3px;
}

.contact-info-block .ci-block-section-title.ci-section-label-indent {
    padding-left: 0.75rem;
}

.contact-info-block .ci-block-card {
    background-color: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 1.25rem 1.375rem;
    color: #222;
}

.contact-info-block .ci-block-card.ci-block-card-no-outline {
    border-color: transparent;
    box-shadow: none;
}

.contact-info-block .icon-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.contact-info-block .icon-label i {
    font-size: 1.1em;
    min-width: 1.25em;
    text-align: center;
}

.contact-info-block .information {
    display: block;
    line-height: 1.5;
}

.contact-info-block .information a {
    word-break: break-word;
}

.contact-info-block .ci-block-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* -- Contact methods ("Contact Us") buttons -- */

.contact-info-block .ci-contact-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.35);
    text-decoration: none;
}

.contact-info-block .ci-contact-btn.ci-block-card-no-outline {
    border: none;
}

.contact-info-block .ci-contact-btn-icon {
    flex: 0 0 auto;
    width: 1.4em;
    font-size: 1.75rem;
    line-height: 1;
    text-align: center;
}

.contact-info-block .ci-contact-btn-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
    min-width: 0;
}

.contact-info-block .ci-contact-btn-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.92;
}

.contact-info-block .ci-contact-btn-label-solo {
    font-size: 1.05rem;
    text-transform: none;
    letter-spacing: normal;
    opacity: 1;
}

.contact-info-block .ci-contact-btn-value {
    font-size: 1.05rem;
    font-weight: 700;
    word-break: break-word;
}

.contact-info-block a.ci-contact-btn:hover,
.contact-info-block a.ci-contact-btn:focus {
    text-decoration: none;
}

.contact-info-block .ci-contact-btn:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

/* -- Hours & address ("Visit Us") -- */

.contact-info-block .ci-locate-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.contact-info-block .ci-locate-grid.has-map {
    grid-template-areas:
        "info"
        "map"
        "actions";
}

.contact-info-block .ci-locate-info {
    grid-area: info;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.contact-info-block .ci-locate-map {
    grid-area: map;
    min-width: 0;
}

.contact-info-block .ci-locate-map .ci-map-embed {
    margin-bottom: 0;
    height: 100%;
}

.contact-info-block .ci-locate-actions {
    grid-area: actions;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.25rem;
}

.contact-info-block .ci-locate-actions .ci-btn {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
}

/* -- Bell schedule card -- */

.contact-info-block .ci-bell-schedule-card {
    color: #333;
}

.contact-info-block .ci-bell-schedule-card > *:last-child {
    margin-bottom: 0;
}

/* -- Bus information card -- */

.contact-info-block .ci-bus-information-card {
    color: #333;
}

.contact-info-block .ci-bus-information-card > *:last-child {
    margin-bottom: 0;
}

/* -- Principal card -- */

.contact-info-block .ci-principal-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
}

.contact-info-block .ci-principal-photo img {
    display: block;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #ccc; /* overridden by primary-color-border utility class */
}

.contact-info-block .ci-principal-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.contact-info-block .ci-principal-about {
    width: 100%;
    /* Light grey box; #222 text/icons on #f0f0f0 is ~15:1 contrast, well above the
       4.5:1 (text) / 3:1 (icon/UI component) AA minimums regardless of the theme's
       primary/secondary accent colors, so this intentionally avoids the dynamic
       color utility classes used elsewhere in the block. */
    background-color: #f0f0f0;
    border-radius: 0.5rem;
    padding: 0.9rem 1.1rem;
    display: flex;
    flex-direction: column;
}

.contact-info-block .ci-principal-about-label {
    margin: 0 0 0.5rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: #222;
}

.contact-info-block .ci-principal-name {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: #222;
}

.contact-info-block .ci-principal-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* -- Principal bio: clamped preview with fade + "Read full biography" toggle --
   The bio text is never removed from the DOM/accessibility tree; only its visual
   height is clamped to a fixed 56px (overflow: hidden) and a decorative fade is layered
   over the cut-off edge. JS (gsdssi-school-information-public.js) measures whether the
   text actually overflows that 56px and, if so, adds `.is-truncated` to reveal the fade +
   toggle button. */

.contact-info-block .ci-principal-bio-wrap {
    position: relative;
    overflow: hidden;
    max-height: 56px; /* fixed collapsed preview height */
}

.contact-info-block .ci-principal-bio-wrap.is-expanded {
    max-height: none;
    overflow: visible;
}

.contact-info-block .ci-principal-bio {
    color: #333;
    white-space: break-spaces;
}

.contact-info-block .ci-principal-bio > *:last-child {
    margin-bottom: 0;
}

.contact-info-block .ci-principal-bio-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.5rem;
    background: linear-gradient( to bottom, rgba( 240, 240, 240, 0 ), #f0f0f0 80% );
    opacity: 0;
    transition: opacity 0.2s ease;
}

.contact-info-block .ci-principal-about.is-truncated .ci-principal-bio-fade {
    opacity: 1;
}

.contact-info-block .ci-principal-bio-wrap.is-expanded .ci-principal-bio-fade {
    opacity: 0;
}

.contact-info-block .ci-principal-bio-toggle {
    display: none; /* revealed by JS (adds .is-truncated) only when the bio actually overflows */
    align-items: center;
    align-self: flex-start;
    gap: 0.4rem;
    margin-top: 0.6rem;
    padding: 0.35rem 0.2rem;
    background: none;
    border: none;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    color: #222;
    text-decoration: underline;
    cursor: pointer;
}

.contact-info-block .ci-principal-about.is-truncated .ci-principal-bio-toggle {
    display: inline-flex;
}

.contact-info-block .ci-principal-bio-toggle:hover {
    text-decoration: none;
}

.contact-info-block .ci-principal-bio-toggle:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

.contact-info-block .ci-principal-bio-toggle-less {
    display: none;
}

.contact-info-block .ci-principal-bio-toggle[aria-expanded="true"] .ci-principal-bio-toggle-more {
    display: none;
}

.contact-info-block .ci-principal-bio-toggle[aria-expanded="true"] .ci-principal-bio-toggle-less {
    display: inline;
}

.contact-info-block .ci-principal-bio-toggle .ci-accordion-chevron {
    transition: transform 0.2s ease;
}

.contact-info-block .ci-principal-bio-toggle[aria-expanded="true"] .ci-accordion-chevron {
    transform: rotate( 180deg );
}

@media ( prefers-reduced-motion: reduce ) {
    .contact-info-block .ci-principal-bio-toggle .ci-accordion-chevron,
    .contact-info-block .ci-principal-bio-fade {
        transition: none;
    }
}

.contact-info-block .ci-principal-meta {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.contact-info-block .ci-principal-meta li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* -- Address / map -- */

.contact-info-block address.ci-address {
    font-style: normal;
    margin-bottom: 0.75rem;
}

.contact-info-block .ci-map-embed {
    position: relative;
    width: 100%;
    min-height: 250px;
    aspect-ratio: 16 / 10;
    margin-bottom: 0.75rem;
    border-radius: 0.375rem;
    overflow: hidden;
    background-color: #eee;
}

.contact-info-block .ci-map-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* -- Buttons / actions -- */

.contact-info-block .ci-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    min-height: 44px;
    border-radius: 0.375rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.3;
    text-align: center;
}

.contact-info-block .ci-btn-label {
    font-weight: 700;
}

.contact-info-block .ci-btn-outline {
    border: 2px solid #666;
    color: #222;
    background-color: transparent;
}

.contact-info-block .ci-btn-outline:hover,
.contact-info-block .ci-btn-outline:focus {
    background-color: #f2f2f2;
}

.contact-info-block .ci-btn:focus-visible,
.contact-info-block a:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

/* Defensive fallback in case the active theme doesn't already define .screen-reader-text */
.contact-info-block .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

/* -- Admin-only "edit this content" link (visible only to logged-in users who can
   manage the settings; see current_user_can( 'manage_options' ) in the PHP renderer) -- */

.ci-admin-edit-link-wrap {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

.ci-admin-edit-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border: 1px dashed #949494;
    border-radius: 999px;
    background-color: #f6f6f6;
    color: #3c434a;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
}

.ci-admin-edit-link:hover,
.ci-admin-edit-link:focus {
    background-color: #eaeaea;
    color: #1d2327;
    border-color: #6c6c6c;
}

.ci-admin-edit-link:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

.ci-admin-edit-link i {
    font-size: 0.95em;
}

@media only screen and (min-width: 768px) {

    .contact-info-block .ci-block-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-info-block .ci-locate-grid.has-map {
        grid-template-columns: 1fr 2fr;
        /* min-content (rather than the implicit "auto") keeps the map -- which spans
           both rows -- from inflating the info/actions row tracks with extra blank
           space; the map is simply stretched to match whatever height they need. */
        grid-template-rows: min-content min-content;
        grid-template-areas:
            "info map"
            "actions map";
        align-items: stretch;
    }

    .contact-info-block .ci-principal-card {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
    }

    .contact-info-block .ci-principal-details {
        flex: 0 1 auto;
    }

    .contact-info-block .ci-principal-about {
        flex: 1 1 240px;
        width: auto;
        align-self: stretch;
    }

    .contact-info-block .ci-principal-title {
        text-align: left;
    }

    .contact-info-block .ci-principal-meta li {
        justify-content: flex-start;
    }

}

@media only screen and (min-width: 992px) {

    .contact-info-block .ci-block-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}