/**
 * Site styles: top bar, header, navigation, layout, sidebar, footer and
 * PHP templates. Loaded on the front end only.
 *
 * Version 1 copies the old Education Hub child theme (values taken from its
 * style.css on 12 Nov 2026). Colors come from theme.json
 * (settings.custom.header, settings.custom.footer, settings.custom.sidebar).
 *
 * Breakpoints: 866px (old site's menu and column breakpoint), 480px.
 *
 * Contents
 *   1. Layout
 *   2. Top bar
 *   3. Masthead (logo, tagline, Schedule Online pill)
 *   4. Menu bar (desktop)
 *   5. Menu bar (mobile)
 *   6. Content and sidebar
 *   7. Footer
 *   8. Back to top
 *   9. Templates
 */


/* ------------------------------------------------------------------
 * 1. Layout
 * ------------------------------------------------------------------ */

.hc-container {
    width: 100%;
    max-width: calc(var(--wp--style--global--wide-size) + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right));
    padding-right: var(--wp--style--root--padding-right);
    padding-left: var(--wp--style--root--padding-left);
    margin-right: auto;
    margin-left: auto;
}

/* Keep the footer at the bottom on short pages. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

.hc-main {
    display: block;
    flex: 1 0 auto;
    padding-top: 30px;
    padding-bottom: 30px;
}


/* ------------------------------------------------------------------
 * 2. Top bar (old #tophead)
 * ------------------------------------------------------------------ */

.hc-topbar {
    font-family: var(--wp--preset--font-family--heading);
    line-height: 1;
    color: var(--wp--custom--header--topbar-text);
    background-color: var(--wp--custom--header--topbar-background);
}

.hc-topbar__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    padding-bottom: 8px;
}

.hc-topbar__contact {
    display: flex;
    flex-wrap: wrap;
    padding: 6px 0 0;
    margin: 0;
    list-style: none;
}

.hc-topbar__item {
    display: flex;
    gap: 8px;
    align-items: center;
    padding-left: 15px;
    margin-left: 15px;
    font-size: 16px;
    line-height: 1.1;
    border-left: 1px solid var(--wp--custom--header--topbar-text);
}

.hc-topbar__item:first-child {
    padding-left: 0;
    margin-left: 0;
    border-left: 0;
}

.hc-topbar__icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    color: var(--wp--custom--header--topbar-icon);
}

.hc-topbar__icon svg {
    width: 100%;
    height: 100%;
}

a.hc-topbar__link {
    color: var(--wp--custom--header--topbar-text);
    text-decoration: none;
}

a.hc-topbar__link:hover,
a.hc-topbar__link:focus-visible {
    color: var(--wp--custom--header--topbar-hover);
}

/* ------------------------------------------------------------------
 * 3. Masthead (old #masthead)
 * ------------------------------------------------------------------ */

.hc-masthead {
    color: var(--wp--custom--header--text);
    background-color: var(--wp--custom--header--background);
    background-image: var(--hc-masthead-image, none);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
}

.hc-masthead__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 30px;
    align-items: center;
    justify-content: space-between;
}

.hc-header__brand {
    margin-top: 20px;
    margin-bottom: 20px;
}

a.hc-logo {
    display: inline-flex;
    align-items: center;
    color: var(--wp--custom--header--text);
    text-decoration: none;
}

a.hc-logo:hover {
    color: var(--wp--custom--header--text);
}

.hc-logo__image {
    display: block;
    width: 100%;
    max-width: var(--wp--custom--header--logo-max-width);
    height: auto;
}

.hc-logo__text {
    font-family: var(--wp--preset--font-family--heading);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.hc-header__tagline {
    margin: 6px 0 0 5px;
    font-size: 16px;
    line-height: 1;
    color: var(--wp--custom--header--tagline);
    letter-spacing: 1.4px;
}

/* "Schedule Online" pill: look in brand.css (shared with the footer and the
   Site Detail block); only its place in the masthead is set here. */
.hc-masthead a.hc-schedule-pill {
    margin-top: 30px;
    margin-bottom: 10px;
}


/* ------------------------------------------------------------------
 * 4. Menu bar, desktop (old #main-nav)
 * ------------------------------------------------------------------ */

.hc-navbar {
    background-color: var(--wp--custom--header--nav-background);
    border-bottom: 5px solid var(--wp--custom--header--nav-border);
}

.hc-nav__menu,
.hc-nav__menu .sub-menu {
    padding: 0;
    margin: 0;
    list-style: none;
}

.hc-nav__menu a {
    color: var(--wp--custom--header--nav-text);
    text-decoration: none;
}

.hc-submenu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--wp--custom--header--nav-text);
    cursor: pointer;
    background: none;
    border: 0;
}

.hc-submenu-toggle .hc-icon {
    width: 14px;
    height: 14px;
    transition: transform var(--wp--custom--transition--fast);
}

.hc-submenu-toggle[aria-expanded="true"] .hc-icon {
    transform: rotate(180deg);
}

.hc-nav-toggle {
    display: none;
}

@media (min-width: 866px) {

    .hc-nav__menu {
        display: flex;
        flex-wrap: wrap;
    }

    .hc-nav__menu li {
        position: relative;
    }

    .hc-nav__menu > li {
        display: flex;
        align-items: stretch;
        border-right: 1px solid var(--wp--custom--header--nav-text);
    }

    .hc-nav__menu > li:first-child {
        border-left: 1px solid var(--wp--custom--header--nav-text);
    }

    .hc-nav__menu > li > a {
        display: block;
        padding: 10px 20px;
        font-size: 16px;
        line-height: 1.5;
    }

    .hc-nav__menu > li:hover,
    .hc-nav__menu > li:focus-within,
    .hc-nav__menu > li.current-menu-item,
    .hc-nav__menu > li.current_page_item,
    .hc-nav__menu > li.current-menu-ancestor {
        background-color: var(--wp--custom--header--nav-hover);
    }

    /* The dropdown arrow sits inside the item, right of the label. */
    .hc-nav__menu > li > .hc-submenu-toggle {
        width: 24px;
        margin-left: -14px;
        margin-right: 6px;
    }

    .hc-nav__menu .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 99;
        display: none;
        min-width: 200px;
        background-color: var(--wp--custom--header--submenu-background);
        box-shadow: 0 1px 2px;
    }

    .hc-nav__menu li:hover > .sub-menu,
    .hc-nav__menu li:focus-within > .sub-menu,
    .hc-nav__menu .hc-submenu-toggle[aria-expanded="true"] + .sub-menu {
        display: block;
    }

    .hc-nav__menu .sub-menu li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--wp--custom--header--submenu-border);
    }

    .hc-nav__menu .sub-menu a {
        display: block;
        flex: 1 1 auto;
        padding: 9px 15px;
        font-size: 14px;
        text-align: left;
        white-space: nowrap;
    }

    .hc-nav__menu .sub-menu li:hover,
    .hc-nav__menu .sub-menu li.current-menu-item {
        background-color: var(--wp--custom--header--nav-hover);
    }

    .hc-nav__menu .sub-menu .hc-submenu-toggle {
        width: 28px;
        height: 28px;
    }

    .hc-nav__menu .sub-menu .hc-submenu-toggle .hc-icon {
        transform: rotate(-90deg);
    }

    .hc-nav__menu .sub-menu .sub-menu {
        top: 0;
        left: 100%;
    }

    .hc-nav__menu .sub-menu.is-flipped {
        right: 0;
        left: auto;
    }

    .hc-nav__menu .sub-menu .sub-menu.is-flipped {
        right: 100%;
    }
}


/* ------------------------------------------------------------------
 * 5. Menu bar, mobile (below 866px): the menu opens inside the bar.
 * ------------------------------------------------------------------ */

@media (max-width: 865px) {

    .hc-masthead__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .hc-masthead a.hc-schedule-pill {
        margin-top: 0;
        margin-bottom: 20px;
    }

    .hc-nav-toggle {
        display: inline-flex;
        gap: 10px;
        align-items: center;
        min-height: 44px;
        padding: 0;
        font-family: inherit;
        font-size: 16px;
        color: var(--wp--custom--header--nav-text);
        cursor: pointer;
        background: none;
        border: 0;
    }

    .hc-nav-toggle__bars,
    .hc-nav-toggle__bars::before,
    .hc-nav-toggle__bars::after {
        display: block;
        width: 22px;
        height: 3px;
        background-color: currentcolor;
        transition: transform var(--wp--custom--transition--fast);
    }

    .hc-nav-toggle__bars {
        position: relative;
    }

    .hc-nav-toggle__bars::before,
    .hc-nav-toggle__bars::after {
        position: absolute;
        left: 0;
        content: "";
    }

    .hc-nav-toggle__bars::before {
        top: -7px;
    }

    .hc-nav-toggle__bars::after {
        top: 7px;
    }

    .hc-nav-toggle[aria-expanded="true"] .hc-nav-toggle__bars {
        background-color: transparent;
    }

    .hc-nav-toggle[aria-expanded="true"] .hc-nav-toggle__bars::before {
        transform: translateY(7px) rotate(45deg);
    }

    .hc-nav-toggle[aria-expanded="true"] .hc-nav-toggle__bars::after {
        transform: translateY(-7px) rotate(-45deg);
    }

    .hc-header__panel {
        display: none;
        padding-bottom: 10px;
    }

    .hc-header.is-open .hc-header__panel {
        display: block;
    }

    .hc-nav__menu li {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
    }

    .hc-nav__menu a {
        display: block;
        padding: 10px 0;
        font-size: 16px;
    }

    .hc-nav__menu li.current-menu-item > a,
    .hc-nav__menu li.current_page_item > a {
        color: var(--wp--custom--header--nav-border);
    }

    .hc-submenu-toggle {
        width: 44px;
        height: 44px;
    }

    .hc-nav__menu .sub-menu {
        display: none;
        grid-column: 1 / -1;
        padding-left: 15px;
    }

    .hc-submenu-toggle[aria-expanded="true"] + .sub-menu {
        display: block;
    }

    .hc-nav__menu .sub-menu a {
        font-size: 14px;
    }
}


/* ------------------------------------------------------------------
 * 6. Content and sidebar
 * ------------------------------------------------------------------ */

.hc-layout--sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--wp--custom--sidebar--width);
    gap: var(--wp--custom--sidebar--gap);
    align-items: start;
}

@media (max-width: 865px) {

    .hc-layout--sidebar {
        grid-template-columns: minmax(0, 1fr);
    }
}

.hc-layout__content > .hc-breadcrumb:first-child {
    margin-top: 0;
}

/* Breadcrumb: light gray bar under the menu, "Site name > Page". */
.hc-breadcrumb-bar {
    padding: 15px 0;
    font-size: 16px;
    background-color: var(--wp--preset--color--surface);
}

.hc-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.hc-breadcrumb__item + .hc-breadcrumb__item::before {
    margin-right: 5px;
    content: ">";
}

.hc-breadcrumb [aria-current="page"] {
    color: var(--wp--preset--color--contrast-alt);
}

/* Each page and post ends with a thin rule, like the old theme. */
.hc-layout__content > article {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--wp--preset--color--border);
}

.hc-entry-header {
    margin-bottom: 15px;
}

.hc-entry-title {
    margin: 0 0 5px;
}

.hc-entry-meta,
.hc-post-row__terms {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 20px;
    align-items: center;
    margin: 0 0 20px;
    font-size: 16px;
    font-style: italic;
}

.hc-entry-meta__item {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.hc-entry-meta__icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
    color: var(--wp--preset--color--contrast-alt);
}

.hc-entry-meta__icon svg {
    width: 100%;
    height: 100%;
}

/* Archive rows (old category archive). */
.hc-post-row {
    padding-bottom: 10px;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--wp--preset--color--border);
}

.hc-post-row__title {
    margin: 0 0 10px;
    font-size: 28px;
}

.hc-post-row__title a {
    color: var(--wp--preset--color--primary);
}

.hc-post-row__title a:hover {
    color: var(--wp--preset--color--accent);
}

.hc-post-row__body {
    display: flow-root;
    margin-bottom: 15px;
}

.hc-post-row__media {
    float: left;
    margin: 0 15px 10px 0;
}

.hc-post-row__media img {
    display: block;
    width: 150px;
    height: 150px;
    object-fit: cover;
}

.hc-post-row__excerpt {
    margin: 0;
}

.hc-post-row__terms {
    margin-bottom: 0;
}

.hc-single__media {
    margin: 0 0 20px;
}

.hc-single__media img {
    display: block;
    width: 100%;
    height: auto;
}

/* Sidebar widgets (old #sidebar-primary). */
.hc-sidebar .hc-widget {
    margin-bottom: 30px;
}

.hc-sidebar .hc-widget__title,
.hc-sidebar .wp-block-heading:first-child {
    position: relative;
    padding: 5px 15px;
    margin: 0 0 15px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--wp--custom--sidebar--title-text);
    background-color: var(--wp--custom--sidebar--title-background);
    border-left: 5px solid var(--wp--custom--sidebar--title-border);
}

/* Small pointer under the left side of each title bar. */
.hc-sidebar .hc-widget__title::after,
.hc-sidebar .wp-block-heading:first-child::after {
    position: absolute;
    bottom: -8px;
    left: 15px;
    width: 0;
    height: 0;
    content: "";
    border-top: 8px solid var(--wp--custom--sidebar--title-background);
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}

.hc-sidebar ul {
    padding-left: 0;
    margin: 0;
    list-style: none;
}

.hc-sidebar li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 6px;
}

/* Tan double chevron bullets. */
.hc-sidebar li::before {
    position: absolute;
    top: 0.35em;
    left: 2px;
    width: 12px;
    height: 12px;
    content: "";
    background-color: var(--wp--preset--color--accent);
    -webkit-mask: url(../icons/double-chevron-right.svg) center / contain no-repeat;
    mask: url(../icons/double-chevron-right.svg) center / contain no-repeat;
}

.hc-sidebar .hc-social li {
    padding-left: 0;
}

.hc-sidebar .hc-social li::before {
    display: none;
}


/* ------------------------------------------------------------------
 * 7. Footer (old #footer-widgets and #colophon)
 * ------------------------------------------------------------------ */

.hc-footer__widgets {
    padding: 30px 0;
    color: var(--wp--custom--footer--text);
    background-color: var(--wp--custom--footer--background);
    background-image: var(--hc-footer-image, none);
    background-repeat: no-repeat;
    background-position: bottom right;
    border-top: 5px solid var(--wp--custom--footer--border);
}

.hc-footer__main {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hc-footer__column {
    padding: 0 25px;
    border-left: 1px dashed var(--wp--custom--footer--divider);
}

.hc-footer__column:first-child {
    border-left: 0;
}

@media (max-width: 865px) {

    .hc-footer__main {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .hc-footer__column {
        padding: 0;
        border-left: 0;
    }
}

.hc-footer .hc-widget + .hc-widget {
    margin-top: 20px;
}

.hc-footer .hc-widget__title,
.hc-footer h2,
.hc-footer h3 {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 400;
    color: var(--wp--custom--footer--heading);
}

.hc-footer h4,
.hc-footer .hc-footer__subheading {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 400;
    color: var(--wp--custom--footer--text);
}

.hc-footer__widgets a:where(:not(.hc-social__link):not(.wp-element-button):not(.hc-button):not(.hc-schedule-pill)) {
    color: var(--wp--custom--footer--link);
    text-decoration: underline;
}

.hc-footer__widgets a:where(:not(.hc-social__link):not(.wp-element-button):not(.hc-button):not(.hc-schedule-pill)):hover {
    color: var(--wp--custom--footer--link-hover);
}

.hc-footer .hc-contact {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hc-footer .hc-contact__item {
    margin: 0;
    font-style: normal;
}

.hc-footer__bottom {
    padding: 15px 0;
    color: var(--wp--custom--footer--bottom-text);
    text-align: center;
    background-color: var(--wp--custom--footer--bottom-background);
}

.hc-footer__menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    margin: 0 0 10px;
    list-style: none;
}

.hc-footer__menu li {
    border-left: 1px solid var(--wp--custom--header--submenu-border);
}

.hc-footer__menu li:first-child {
    border-left: 0;
}

.hc-footer__menu a {
    display: block;
    padding: 0 10px;
    line-height: 1.2;
    color: var(--wp--custom--footer--bottom-link);
    text-decoration: none;
}

.hc-footer__menu a:hover {
    color: var(--wp--custom--footer--bottom-link);
    opacity: 0.5;
}

.hc-footer__copyright {
    margin: 5px 0;
}


/* ------------------------------------------------------------------
 * 8. Back to top (old .scrollup)
 * ------------------------------------------------------------------ */

a.hc-scrollup {
    position: fixed;
    right: 32px;
    bottom: 50px;
    z-index: 999;
    display: none;
    padding: 5px 10px 8px;
    line-height: 1;
    color: #FFFFFF;
    background-color: var(--wp--preset--color--teal);
}

a.hc-scrollup.is-visible {
    display: block;
}

a.hc-scrollup:hover {
    color: var(--wp--preset--color--accent);
}

.hc-scrollup .hc-icon,
.hc-scrollup svg {
    display: block;
    width: 24px;
    height: 24px;
}


/* ------------------------------------------------------------------
 * 9. Templates (archive, search, single post, 404)
 * ------------------------------------------------------------------ */

.hc-template {
    padding-top: var(--wp--preset--spacing--60);
    padding-bottom: var(--wp--preset--spacing--60);
}

.hc-template__header {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--30);
    max-width: var(--wp--style--global--content-size);
    margin-bottom: var(--wp--preset--spacing--50);
}

.hc-template__title {
    margin: 0;
}

.hc-template__description {
    margin: 0;
    color: var(--wp--preset--color--contrast-alt);
}

.hc-template__description p {
    margin: 0;
}

.hc-single__header {
    padding-top: var(--wp--preset--spacing--60);
    padding-bottom: var(--wp--preset--spacing--40);
}

.hc-single__meta {
    margin: 0 0 var(--wp--preset--spacing--20);
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 600;
    color: var(--wp--preset--color--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.hc-single__title {
    margin: 0;
}

.hc-single__media {
    margin: 0 0 var(--wp--preset--spacing--50);
}

.hc-single__media img {
    display: block;
    width: 100%;
    border-radius: var(--wp--custom--radius--medium);
}

.hc-single .entry-content {
    padding-bottom: var(--wp--preset--spacing--60);
}