/****************************
 * Browser bug hacks
 ***************************/

/**
 * Hide local nav on Safari due to this bug:
 * bugs.webkit.org/show_bug.cgi?id=189265
 *
 * It has been fixed in Safari preview release 123
 * but has not yet made it to general availability
 * at this time (2021-04-14).
 *
 * In the interim, use the @supports selector
 * to hide the nav until the scroll-margin
 * is understood.
 */

/* Removed since we're no longer using a fixed header
@supports not (scroll-margin-top: 1px) {
  .local-nav nav { display: none; }
  .local-nav { border-bottom: none; }
}
*/

/****************************
 * Dwell overrides/fixes
 ***************************/

/* Fix vertical height */
.button {
    height: revert;
}

main {
    /* margin-top: 127px; */
}

/* Remove uppercase and green underline */
h2 {
    text-transform: revert;
}

    h2:after {
        display: none;
    }

/**
 * Need to override Dwell's setting of 19rem
 * for some reason.
 * Also unsure if the [id] selector is correct.
 */
body:not(.path-frontpage) [id] {
    /* scroll-margin-top: 12rem; */
}

/* Header menus */
.header-top .dropdown.menu > li > a {
    background: inherit;
}

.header-top .dropdown.menu {
    color: white;
    font-size: 0.9rem;
}

.dropdown.menu .is-dropdown-submenu {
    background: var(--evergreen);
    border: 1px solid var(--black);
    z-index: 100;
}

.dropdown.menu .is-dropdown-submenu-item.divider {
    height: 1px;
    border-bottom: 1px solid var(--horizontal-rule-dark);
    margin: 0.5rem 0;
}

/****************************
 * Foundation overrides
 ***************************/
.button.primary:focus, .button.primary:hover {
    background-color: var(--toxic-green);
}

.button.primary {
    background-color: var(--toxic-green);
    color: var(--evergreen) !important;
    font-weight: bold;
    text-transform: uppercase;
}

main a,
main a:hover {
    color: var(--evergreen);
}

.row {
    max-width: revert;
}

.breadcrumbs li {
    color: white;
    font-size: 1rem;
    text-transform: revert;
}

.button {
    width: revert;
}

/* Local nav */
.menu {
    padding-left: 1rem;
    padding-right: 1rem;
}

    .menu a {
        font-weight: 700;
        padding: 0 0.5rem;
    }
    /*
.menu li:first-child a {
  padding-left: 0;
}
.menu li:last-child a {
  padding-right: 0;
}
*/
    .menu .is-active > a {
        background: none;
        color: var(--toxic-green);
    }

/* Restore Font Awesomeness */
/* .fa, .far, .fas {
    font-family: "Font Awesome 5 Free" !important;
}
*/

/* teaching-filter.css overrides */
#filters .dropdown-list-li {
    font-weight: bold;
    padding: 0.5rem 0.25rem;
}

/**
 * Pagination is disabled by default on small displays
 * Need to set $pagination-mobile-items to true
 * See https://get.foundation/sites/docs/pagination.html#sass-variables
 */
.pagination li {
    display: inline-block
}


/* Clash with icons in Drupal footer. Should define height in */
/* ".footer__support-nav--social svg" in dwellcc.css */
footer .icon {
    height: revert;
}


/****************************
 * Outline hacks
 ***************************/

/* Word html inline style overrides on narrower screens */
@media screen and (max-width: 40em) {
    #outline #outline-content {
        margin-left: 1rem;
    }

    #outline p[style*="margin-left: 40px"] {
        margin-left: 1rem !important;
    }

    #outline p[style*="margin-left: 80px"] {
        margin-left: 2rem !important;
    }

    #outline p[style*="margin-left: 120px"] {
        margin-left: 3rem !important;
    }

    #outline p[style*="margin-left: 160px"] {
        margin-left: 4rem !important;
    }

    #outline p[style*="margin-left: 200px"] {
        margin-left: 5rem !important;
    }

    #outline p[style*="margin-left: 240px"] {
        margin-left: 6rem !important;
    }

    #outline p[style*="margin-left: 280px"] {
        margin-left: 7rem !important;
    }

    #outline p[style*="margin-left: 320px"] {
        margin-left: 8rem !important;
    }
}

/****************************
 * Responsiveness
 ***************************/

/*** X-SMALL DISPLAYS ***/
/* @media screen and (max-width: 19.9375em) { */
@media screen {
    main {
        /* margin-top: 136px; */
        /* margin-top: 180px; */
    }
}

/*** SMALL DISPLAYS ***/
/* @media screen and (max-width: 39.9375em) { */
@media screen and (min-width: 20em) {
    main {
        /* margin-top: 121px; */
        /* margin-top: 114px; */
        /* margin-top: 120px; */
        /* margin-top: 136px; */
        /* margin-top: 180px; */
    }
}

/*** MEDIUM DISPLAYS ***/
/* @media screen and (min-width: 40em) and (max-width: 63.9375em) { */
@media screen and (min-width: 40em) {
    main {
        /* margin-top: 127px; */
        /* margin-top: 120px; */
        /* margin-top: 132px; */
    }
}

/*** LARGE DISPLAYS ***/
/* @media screen and (min-width: 64em) and (max-width: 79.9375em) { */
@media screen and (min-width: 64em) {
    main {
        /* margin-top: 194px; */
        /* margin-top: 188px; */
        /* margin-top: 204px; */
    }
}

/*** X-LARGE DISPLAYS ***/
@media screen and (min-width: 80em) {
    main {
        /* margin-top: 192px; */
        /* margin-top: 212px; */
    }
}

/*** XX-LARGE DISPLAYS ***/
@media screen and (min-width: 90em) {
    main {
        /* margin-top: 192px; */
    }
}

/*** XXX-LARGE DISPLAYS ***/
@media screen and (min-width: 100em) {
    main {
        /* margin-top: 192px; */
    }
}