/* =========================================================
   CAPTUS PRESS - SHARED SITE HEADER (logo | Google search | menu)
   SELF-CONTAINED VERSION

   Used together with CaptusHeader.js. This one file holds
   everything the banner needs, including the menu, drop-downs
   and hamburger icon, so a page does NOT need
   CaptusHomeHamburger.css or CaptusHome.css for the banner.
   Link it in the <head> of every page that shows the banner:

     <link rel="stylesheet" href="https://info.captus.com/webimages/Captus/styles/CaptusHeader.css" />

   Every rule starts with #captusHeader, .site-top or
   .site-header, so it only touches the banner: the rest of the
   page keeps its own look, and a page without the banner is not
   affected at all.

   Wide screens (1230px+): logo | menu | search icon on one line
   800px-1229px:           logo and search icon, menu centred below
   Under 800px:            logo, search icon and menu icon
   The search icon opens a full-width search bar under the banner.

   SECTIONS
     1. Banner and announcement bar
     2. Logo and Google search box
     3. Menu (all screens)
     4. Menu: desktop (800px and wider)
     5. Menu: phones (under 800px)
========================================================= */


/* =========================================================
   1. BANNER AND ANNOUNCEMENT BAR
========================================================= */

/* The placeholder <div id="captusHeader"> steps aside, so the banner
   can stay fixed at the top while the whole page scrolls */
#captusHeader {
    display: contents;
}

/* A clean start: the page's own styles for boxes, lists and
   links do not reach into the banner */
.site-top,
.site-top * {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif !important;
}
.site-top {
    position: sticky;            /* stays at the top while the page scrolls */
    top: 0;
    z-index: 1000;               /* above the page, so menus drop over it */
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    font-size: 16px;
    line-height: 1.3;
    color: #000000;
    text-align: left;
}
.site-top.is-scrolled {
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);   /* soft edge once scrolled */
}

.site-top .site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 24px;
    row-gap: 4px;
    margin: 0;
    padding: 8px 10px;
    background-color: #ffffff;
}

/* Special announcement bar (only shown when there is an announcement) */
.site-top .special-announcement {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 8px 14px;
    background-color: #FFF4CE;
    border-top: 1px solid #F0D98A;
    border-bottom: 1px solid #F0D98A;
    font-size: 13px;
    line-height: 1.4;
    color: #3D2E00;
}
.site-top .special-announcement[hidden] { display: none; }
.site-top .special-announcement .sa-text { flex: 1 1 auto; margin: 0; padding: 0; }
.site-top .special-announcement .sa-item + .sa-item { margin-top: 4px; }
.site-top .special-announcement .sa-label { font-weight: bold; margin-right: 6px; }
.site-top .special-announcement a,
.site-top .special-announcement a:visited {
    color: #0000CC;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}
.site-top .special-announcement a:hover { text-decoration: underline; }
.site-top .special-announcement .sa-close {
    flex: 0 0 auto;
    margin: 0;
    border: 0;
    background: transparent;
    color: #3D2E00;
    font-size: 16px;
    line-height: 1;
    padding: 2px 4px;
    cursor: pointer;
}
.site-top .special-announcement .sa-close:focus-visible { outline: 2px solid #0060A9; }


/* =========================================================
   2. LOGO, SEARCH ICON AND SEARCH BAR
========================================================= */

.site-top .site-header img.logo {
    order: 1;
    flex: 0 0 auto;
    display: block;
    float: none !important;
    margin: 0;
    padding: 0 !important;
    border: 0;
    height: 90px;
    width: auto;
    max-width: none;
}

/* Search icon: after the last menu item */
.site-top .site-header .search-toggle {
    order: 4;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 40px;
    margin: 0 0 0 4px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}
.site-top .site-header .search-toggle svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #333333;
    stroke-width: 2.2;
    stroke-linecap: round;
}
.site-top .site-header .search-toggle:hover {
    background: #eef2fb;
}
.site-top .site-header .search-toggle.is-open {
    background: #e8f0fb;
    box-shadow: inset 0 0 0 2px #0060A9;
}
.site-top .site-header .search-toggle:focus-visible {
    outline: 2px solid #0060A9;
    outline-offset: 2px;
}

/* Search bar: full width under the banner */
.site-top .search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 10px 16px;
    background: #f7f8fb;
    border-top: 1px solid #e4e4ea;
    border-bottom: 1px solid #e4e4ea;
}
.site-top .search-bar[hidden] {
    display: none;
}
.site-top .header-search {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
}
.site-top .search-close {
    flex: 0 0 auto;
    margin: 0;
    padding: 4px 6px;
    border: 0;
    background: transparent;
    color: #444444;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.site-top .search-close:focus-visible {
    outline: 2px solid #0060A9;
}

/* Google's "clear the text" x button: it showed outside the
   search box. Visitors can delete text as usual. */
.site-top .gsib_b,
.site-top .gsc-clear-button {
    display: none !important;
}

/* Google's search box fills its space. Google's own style sheet
   gives it a fixed width (about 300px) and a left margin. */
.site-top .header-search > div,
.site-top .gsc-control,
.site-top .gsc-control-cse,
.site-top form.gsc-search-box,
.site-top table.gsc-search-box {
    display: block;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}
.site-top table.gsc-search-box { display: table; }
.site-top .gsc-control-cse {
    padding: 0;
    border: 0;
    background: transparent;
}
/* Google's own boxes keep Google's sizing inside the search box */
.site-top .header-search * {
    box-sizing: content-box;
}
.site-top .header-search > div,
.site-top .gsc-control,
.site-top .gsc-control-cse,
.site-top form.gsc-search-box,
.site-top table.gsc-search-box {
    box-sizing: border-box;
}


/* =========================================================
   3. MENU (ALL SCREENS)
   The menu block itself is written in CaptusHeader.js.
========================================================= */

.site-top .site-header .hamburger-container {
    order: 3;
    flex: 0 0 auto;              /* the menu keeps its size */
    float: none !important;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0 0 0 auto;          /* menu sits at the right */
    padding: 0;
    background-color: #ffffff;
}

.site-top .site-header .hamburger {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
}

.site-top .site-header .hamburger ul,
.site-top .site-header .hamburger li {
    list-style: none;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    width: auto;
    height: auto;
    float: none;
    text-indent: 0;
}
.site-top .site-header .hamburger li::before,
.site-top .site-header .hamburger li::after {
    content: none;               /* no bullets added by the page */
}

/* Top-level items: Home, About Captus, Publications ... */
.site-top .site-header .dropdown {
    display: block;
    margin: 0;
    color: #000000;
    font-size: 15px;
    line-height: 1.3;
    white-space: nowrap;
    cursor: default;
}
.site-top .site-header .dropdown:hover,
.site-top .site-header .dropdown:focus-within {
    background-color: transparent;
}
.site-top .site-header .dropdown > a,
.site-top .site-header .dropdown > a:visited {
    display: inline;
    margin: 0;
    padding: 0;
    color: #0060A9;
    text-decoration: none;
}

/* Drop-down lists */
.site-top .site-header .dropdown-content {
    display: none;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    text-align: left;
    white-space: normal;
}
.site-top .site-header .dropdown-content a,
.site-top .site-header .dropdown-content a:visited {
    display: block;
    margin: 0;
    padding: 10px 16px 10px 15px;
    color: #000000;
    font-size: 15px;
    line-height: 1.3;
    text-decoration: none;
    text-align: left;
    background: none;
    border: 0;
}
.site-top .site-header .dropdown-content a:hover,
.site-top .site-header .dropdown-content a:focus {
    color: #000000;
    background-color: #95C8D8;
    text-decoration: underline;
}
/* "Learning Partners" heading inside Online Learning Resources */
.site-top .site-header .dropdown-content2 {
    margin: 0;
    padding: 4px 15px 4px 0;
    color: #0060A9;
    font-size: 15px;
    font-weight: bold;
}

/* The hidden tick box that opens the menu on phones */
.site-top .site-header .hamburger .menu-btn {
    display: none;
}

/* Hamburger icon (three lines; becomes an X when open) */
.site-top .site-header .hamburger .menu-icon {
    display: none;
    position: relative;
    margin: 0;
    padding: 18px 12px;
    cursor: pointer;
    user-select: none;
}
.site-top .site-header .hamburger .menu-icon .navicon {
    display: block;
    position: relative;
    width: 18px;
    height: 2px;
    background: #333333;
    transition: background .2s ease-out;
}
.site-top .site-header .hamburger .menu-icon .navicon:before,
.site-top .site-header .hamburger .menu-icon .navicon:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #333333;
    transition: all .2s ease-out;
}
.site-top .site-header .hamburger .menu-icon .navicon:before { top: 5px; }
.site-top .site-header .hamburger .menu-icon .navicon:after  { top: -5px; }
.site-top .site-header .hamburger .menu-btn:checked ~ .menu-icon .navicon {
    background: transparent;
}
.site-top .site-header .hamburger .menu-btn:checked ~ .menu-icon .navicon:before {
    top: 0;
    transform: rotate(-45deg);
}
.site-top .site-header .hamburger .menu-btn:checked ~ .menu-icon .navicon:after {
    top: 0;
    transform: rotate(45deg);
}


/* =========================================================
   4. MENU: DESKTOP (800px AND WIDER)
   Items in a row; each list drops down when pointed at
   (or reached with the Tab key).
========================================================= */

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

    .site-top .site-header .hamburger ul.menu {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        max-height: none;
        overflow: visible;
    }

    .site-top .site-header .hamburger ul.menu > li {
        position: relative;      /* the drop-down lines up under its item */
        flex: 0 0 auto;
        border-right: 1px solid #f4f4f4;
    }

    .site-top .site-header .dropdown {
        padding: 8px 10px;       /* same top and bottom: text is centred */
        font-size: 10.5pt;
    }
    .site-top .site-header .dropdown:hover {
        color: #0060A9;
    }

    .site-top .site-header .dropdown:hover .dropdown-content,
    .site-top .site-header .dropdown:focus-within .dropdown-content {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 100;
        margin: 0;
        padding: 0;
        background-color: #ffffff;
        min-width: 240px;
        max-width: 360px;
        max-height: calc(100vh - 120px);   /* long lists (Learning Partners) scroll */
        overflow-y: auto;
        box-shadow: 0 8px 16px rgba(0, 0, 0, .2);
    }
    /* the last menus open towards the left, so they stay on screen */
    .site-top .site-header .hamburger ul.menu > li:nth-last-child(-n+2) .dropdown-content {
        left: auto;
        right: 0;
    }
    .site-top .site-header .dropdown-content a,
    .site-top .site-header .dropdown-content a:visited {
        font-size: 10.5pt;
    }
    .site-top .site-header .dropdown-content2 {
        font-size: 10.5pt;
        padding-left: 7px;       /* lines up with the links below it */
    }
}

/* Large screens: full-size menu text */
@media screen and (min-width: 1600px) {
    .site-top .site-header .dropdown {
        padding: 8px 16px;
        font-size: 12pt;
    }
    .site-top .site-header .dropdown-content a,
    .site-top .site-header .dropdown-content a:visited,
    .site-top .site-header .dropdown-content2 {
        font-size: 12pt;
    }
}

/* One line from 1230px: keep logo, search and menu together */
@media screen and (min-width: 1230px) {
    .site-top .site-header { flex-wrap: nowrap; }
}

/* 800px-1229px: menu on its own line, centred below */
@media screen and (min-width: 800px) and (max-width: 1229px) {
    .site-top .site-header img.logo { height: 60px; }
    .site-top .site-header .search-toggle {
        order: 2;                /* first line, at the right */
        margin-left: auto;
    }
    .site-top .site-header .hamburger-container {
        order: 3;
        flex: 1 1 100%;
        margin: 0;
        border-top: 1px solid #e4e4ea;
        padding-top: 2px;
    }
    .site-top .site-header .hamburger ul.menu {
        flex-wrap: wrap;
        justify-content: center;
    }
}


/* =========================================================
   5. MENU: PHONES (UNDER 800px)
   Logo, search icon and menu icon on one line. The opened
   menu drops down at full width and scrolls if long.
========================================================= */

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

    .site-top .site-header {
        position: relative;
        flex-wrap: wrap;
        column-gap: 12px;
        row-gap: 6px;
        padding: 8px 10px;
    }
    .site-top .site-header img.logo {
        height: 46px;            /* compact, since the banner stays on screen */
        max-width: 40%;
        object-fit: contain;
    }
    .site-top .site-header .search-toggle {
        order: 2;                /* search icon, then the menu icon, at the right */
        margin-left: auto;
    }
    .site-top .site-header .hamburger-container {
        order: 3;
        margin: 0;
    }
    .site-top .search-bar {
        padding: 8px 10px;
    }

    .site-top .site-header .hamburger .menu-icon {
        display: inline-block;
    }

    /* closed menu */
    .site-top .site-header .hamburger ul.menu {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 20;
        max-height: 0;
        overflow: hidden;
        background-color: #ffffff;
        transition: max-height .2s ease-out;
    }
    /* opened menu */
    .site-top .site-header .hamburger .menu-btn:checked ~ .menu {
        max-height: calc(100vh - 150px);
        overflow-y: auto;
        box-shadow: 0 4px 8px rgba(0, 0, 0, .15);
    }

    .site-top .site-header .dropdown {
        padding: 8px 15px 4px 15px;
        color: #0060A9;
        white-space: normal;
    }
    .site-top .site-header .dropdown-content {
        display: block;          /* every list shown, one under the other */
    }
    .site-top .site-header .dropdown-content a,
    .site-top .site-header .dropdown-content a:visited {
        padding: 4px 6px 4px 15px;
    }
    .site-top .site-header .dropdown-content2 {
        padding-left: 15px;
    }

    /* Collapsible menu: one heading per line; tap a heading to
       open its list (opening one closes the others).
       Online Learning Resources is listed last. */
    .site-top .site-header .hamburger ul.menu {
        display: flex;
        flex-direction: column;
    }
    .site-top .site-header .hamburger ul.menu > li {
        border-bottom: 1px solid #ececf1;
    }
    .site-top .site-header .hamburger ul.menu > li:has(.dropdown-content2) {
        order: 99;
    }
    .site-top .site-header .dropdown {
        padding: 0;
    }
    .site-top .site-header .dropdown > a,
    .site-top .site-header .dropdown > a:visited,
    .site-top .site-header .dropdown .dd-label {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        padding: 12px 15px;
        color: #0060A9;
        cursor: pointer;
    }
    .site-top .site-header .dropdown .dd-label::after {
        content: "";
        width: 8px;
        height: 8px;
        margin: 0 4px 4px 12px;
        border-right: 2px solid #0060A9;
        border-bottom: 2px solid #0060A9;
        transform: rotate(45deg);           /* arrow pointing down */
        transition: transform .2s ease;
    }
    .site-top .site-header li.is-open .dd-label::after {
        transform: rotate(-135deg);         /* arrow pointing up */
        margin-bottom: -4px;
    }
    .site-top .site-header li.is-open .dd-label {
        background-color: #f3f4f8;
    }
    .site-top .site-header .dropdown-content {
        display: none;
    }
    .site-top .site-header li.is-open .dropdown-content {
        display: block;
        padding-bottom: 8px;
        background-color: #f3f4f8;
    }
    .site-top .site-header .dropdown-content a,
    .site-top .site-header .dropdown-content a:visited {
        padding: 8px 15px 8px 30px;
    }
    /* Learning Partners: short names (full name on hover), so several columns */
    .site-top .site-header li.is-open .dropdown-content2 {
        padding-left: 30px;
        column-span: all;
    }
    .site-top .site-header li:has(.dropdown-content2).is-open .dropdown-content {
        column-width: 110px;
        column-gap: 0;
    }
    .site-top .site-header li:has(.dropdown-content2) .dropdown-content a {
        break-inside: avoid;
    }
    .site-top .site-header li:has(.dropdown-content2) .dropdown-content > a:first-child {
        column-span: all;        /* "About Our Online Learning Services" at full width */
    }
}

/* Desktop: the Learning Partners list in three columns */
@media screen and (min-width: 800px) {
    .site-top .site-header .hamburger ul.menu > li:has(.dropdown-content2) .dropdown-content {
        width: 400px;
        max-width: 400px;
        column-count: 3;
        column-gap: 0;
    }
    .site-top .site-header li:has(.dropdown-content2) .dropdown-content a {
        break-inside: avoid;
    }
    .site-top .site-header li:has(.dropdown-content2) .dropdown-content > a:first-child,
    .site-top .site-header li:has(.dropdown-content2) .dropdown-content2 {
        column-span: all;
    }
}

/* The heading buttons look like plain menu text on wider screens */
.site-top .site-header .dd-label {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: default;
}
.site-top .site-header .dd-label:focus-visible {
    outline: 2px solid #3333CC;
    outline-offset: 2px;
}