/*-----------Header1, topheader.jsp ((logo, cart, login))-----------------*/

#header1Container {
    background-color: #00402e;
    width: 100%;
    color: #00402e !important;
    padding-bottom: 20px;
    padding-top: 20px;
}

#header1Wrapper {
    background-color: #00402e !important;
    color: #00402e !important;
    padding-bottom: 15px;
    padding-top: 15px;
}

#cartInfo .glyphicon-shopping-cart {
    color: #ffffff !important;
    font-size: 22px !important;
}

#loginDropdownMenuLink,
#logoutLinkWrapper,
#loginNameWrapper,
.headerStudentLoginLogoutLink {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 400;
}

.headerProfileLink {
    color: #FFFFFF !important;
    font-size: 15px !important;
    font-weight: 400;
}

/* =====================================================================
   HEADER LAYOUT (logo left, cart/login right)

   Real markup (from topHeader.jsp) is #header1ContentWrapper.row with
   FOUR direct children:
     1. #schoolHeaderLogoWrapper        -> logo
     2. (search column, col-lg-2)       -> not shown in your designs, hidden
     3. .clearfix (d-none d-md-block d-lg-none) -> Bootstrap spacer, hidden
     4. the login+cart wrapper (d-flex justify-content-end) -> no id of
        its own, so it's targeted below by :last-child, which is safe
        here because column 3 is display:none and doesn't count as a
        rendered last child for our flex purposes - we still pin it
        explicitly by id-based contents (#cartInfo, .mr-4) rather than
        relying on the wrapper div's own position.

   Previous version assumed only 2 columns and used :first-child /
   :last-child on a re-flexed .row, which broke because the real .row
   has 4 columns and Bootstrap's own col-lg-* widths/offsets were
   fighting the override. This version works WITH Bootstrap's grid
   instead of replacing it: hide the unused search/clearfix columns,
   then let the logo column and the login/cart column flex to the
   edges.
   ===================================================================== */
#header1ContentWrapper {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    margin: 0;
}

/* Logo column: flush left, natural width */
#schoolHeaderLogoWrapper {
    flex: 0 0 auto !important;
    max-width: none !important;
    width: auto !important;
    margin-right: auto;
    padding-left: 0 !important;
}

/* Search column: not used in this header design, remove from flow */
#header1ContentWrapper > .col-12.col-sm-12.col-md-6.col-lg-2.pb-3 {
    display: none !important;
}

/* Bootstrap's clearfix spacer column: not needed once the others are flexed */
#header1ContentWrapper > .clearfix {
    display: none !important;
}

/* Login + cart column: flush right, natural width, offset/columns reset */
#header1ContentWrapper > .d-flex.justify-content-end {
    flex: 0 0 auto !important;
    max-width: none !important;
    width: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
}

#cartInfo,
#loginDropdownMenuLink,
#loginNameWrapper,
#logoutLinkWrapper {
    display: inline-flex !important;
    align-items: center;
}

/* Desktop-only breathing room (padding only, not layout) */
@media (min-width: 1024px) {
    #header1Container {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    #header1Wrapper {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Small mobile spacing tweak on the same logo/cart row (no layout change) */
@media (max-width: 767px) {
    #header1Wrapper {
        flex-wrap: wrap !important;
    }

    #header1ContentWrapper {
        margin-left: -15px;
        margin-right: -15px;
    }

    #schoolHeaderLogoWrapper {
        padding-left: 5px !important;
    }

    #cartInfo {
        margin-right: 6px !important;
    }
}

/*-------------------------Global nav------------------------------*/

#header3Container {
    background-color: #a4cd39 !important;
    padding: 0 !important;
}

#header3Wrapper {
    background-color: #a4cd39 !important;
    padding: 0 !important;
}

#globalNavigationBar {
    background-color: #a4cd39 !important;
    padding: 0 !important;
}

#globalNavigationBar .navbar-collapse {
    width: 100%;
}

.dropdown-toggle::after {
    display: none; /* remove Bootstrap caret */
}


/* =====================================================================
   DESKTOP / TABLET NAV (horizontal menu)
   Was split into "min-width: 769px" while the header logic used
   768px/1024px - that mismatch is what made 768px behave differently
   from 769px+. Now this and the mobile block below share a single,
   matching 768px boundary.
   ===================================================================== */
@media (min-width: 768px) {
    #header3Container,
    #header3Wrapper,
    #globalNavigationBar {
        height: 50px;
    }

    #globalNavigationBar {
        display: flex;
        align-items: stretch;
        width: 100%;
    }

    #globalNavigationBar .navbar-collapse {
        display: flex !important;
        align-items: stretch;
        justify-content: flex-start;
    }

    .navbar-nav {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        height: 100%;
    }

    .navbar-nav .nav-item {
        margin: 0;
        display: flex;
        height: 100%;
        position: relative;
    }

    .navbar-light .navbar-nav .nav-link {
        color: #000000 !important;
        font-family: "Proxima Nova", Arial, sans-serif;
        font-weight: 500 !important;
        letter-spacing: 0.5px;

        display: flex;
        align-items: center;
        justify-content: center;

        height: 100%;
        padding: 0 20px;

        border-radius: 0;

        transition: background-color 0.25s ease, color 0.25s ease;
    }

    .dropdown-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;

        background-color: #e2e2e2;
        min-width: 240px;

        padding: 5px 0;
        margin: 0;

        list-style: none;
        border: none;

        box-shadow: 0 6px 12px rgba(0,0,0,0.15);
        border-radius: 0 0 6px 6px;
        overflow: hidden;

        z-index: 999;
    }

    .nav-item.dropdown:hover .dropdown-menu {
        display: block;
    }

    .dropdown-menu li a {
        display: flex;
        align-items: center;

        padding: 10px 20px;
        font-family: 'Open Sans', sans-serif;
        font-size: 14px;
        font-weight: 500;

        color: #00402e;
        text-decoration: none;
    }

    .dropdown-menu li a:hover {
        background-color: #00402e;
        color: #ffffff;
    }

    .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }

    /* Hide hamburger button */
    .navbar-toggler {
        display: none !important;
    }

    #header3Container {
        display: block; /* prevent flex centering issue */
    }
}

/* ================= MOBILE NAV (hamburger) ================= */
@media (max-width: 767px) {

    /* Full white panel */
    #header3Container,
    #header3Wrapper,
    #globalNavigationBar,
    #globalNavigationBar .navbar-collapse {
        background-color: #ffffff !important;
    }

    /* Nav list reset */
    .navbar-nav {
        display: block;
        width: 100%;
        padding: 10px 0;
    }

    /* Each nav item */
    .navbar-nav .nav-item {
        width: 100%;
    }

    /* Main nav links */
    .navbar-light .navbar-nav .nav-link {
        display: block;
        width: 100%;
        padding: 16px 20px;
        font-size: 16px;
        font-weight: 500;
        text-align: left;
        color: #222222 !important;

        border-bottom: 1px solid #e5e5e5;
        background-color: #ffffff;

        transition: background-color 0.2s ease;
    }

    /* Tap feedback (important for mobile) */
    .navbar-light .navbar-nav .nav-link:active {
        background-color: #f5f5f5;
    }

    /* Dropdown (integrated, not boxed) */
    .dropdown-menu {
        display: block;
        position: relative;
        box-shadow: none;
        border: none;
        background-color: #f9f9f9;
        margin: 0;
        padding: 0;
    }

    /* Submenu items */
    .dropdown-menu li a {
        display: block;
        padding: 12px 20px 12px 40px;
        font-size: 14px;
        color: #444444;
        border-bottom: 1px solid #ececec;
        background-color: #f9f9f9;
    }

    .dropdown-menu li a:active {
        background-color: #eeeeee;
    }

    /* Add spacing above main nav */
    .navbar-nav .nav-item:first-child {
        border-top: 1px solid #e5e5e5;
        margin-top: 10px;
    }

    /* Improve hamburger */
    .navbar-toggler {
        border: none;
        background: transparent;
        margin: 10px auto;
        display: block;
        transform: translateX(-6px);
    }

    /* Bigger icon (if using default) */
    .navbar-toggler-icon {
        width: 24px;
        height: 24px;
    }

    #globalNavigationBar {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #a4cd39 !important;
    }

    #header3Container,
    #header3Wrapper {
        background-color: #a4cd39 !important;
    }
}

/* Hover + active states */
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
    background-color: #00402e;
    color: #ffffff !important;
}

.navbar-light .navbar-nav .nav-item.active .nav-link,
.navbar-light .navbar-nav .nav-link.active {
    background-color: #00402e;
    color: #ffffff !important;
}

.nav-item.dropdown > .nav-link {
    cursor: default;
}

.nav-item.dropdown:focus-within .dropdown-menu {
    display: block;
}


/*----------------------Footer----------------------*/

footer {
    background-color: #05402f;
    color: #FFFFFF !important;
    padding: 80px 20px 20px 20px;
    margin-top: 80px;
    text-align: center;
}

#footer-info {
    line-height: 18px;
}

#footer2Sub2 {
    height: auto;
}

#footer1Wrapper {
    height: 100%;
}


/*----------------------Sidebar----------------------*/

#sidebar1Module1 {
    color: white !important;
}

#sidebar1Wrapper {
    background-color: white;
}

.nav-pills {
    color: white !important;
}

footer a {
    color: white !important;
}


/*----------------------Content Block----------------------*/

#variableContentBlockPG0156 {
    color: #00402e !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    padding-top: 35px !important;
    padding-bottom: 20px !important;
    display: flex;
    -ms-flex-align: center;
}


/*----------------------Cookie Banner----------------------*/

.cc-window .cc-btn.cc-allow {
    background-color: #a4cd39 !important;
    color: #00402e !important;
    border: none;
}

.cc-window .cc-btn.cc-allow:hover {
    background-color: #8fb82f !important;
}


/*----------------------Extras----------------------*/

img {
    max-width: 100%;
    height: auto;
}

img[src*="banner-02"],
img[src*="banner-adv-tech"],
img[src*="banner-bike-tech"],
img[src*="banner-brightwater"],
img[src*="banner-course-search"],
img[src*="banner-customized-training"],
img[src*="banner-faq"],
img[src*="banner-leadership-mgmt"],
img[src*="banner-trail-tech"],
img[src*="banner-community-connections"],
img[src*="banner-skilled-trades"],
img[src*="banner-connect"] {
    width: 100% !important;
    height: auto !important;   /* prevents stretching */
    max-height: none !important;
    object-fit: contain;       /* ensures proper scaling */
}

#buttonViewInstructors {
    display: none !important;
}

h1 {
    padding-top: 80px;
}

@media (max-width: 767px) {
    .card-container {
        flex-direction: column;
        align-items: center;
    }

    .custom-card {
        width: auto !important;        /* break the 200px lock */
        max-width: 90% !important;     /* make it wider */
        margin-bottom: 15px;
    }
}

body,
p,
h1, h2, h3, h4, h5, h6 {
    font-family: "Proxima Nova", Arial, sans-serif;
}

/* Safety net to kill any remaining horizontal scroll */
html, body {
    overflow-x: hidden;
}

/* ===== FIX LOGGED-IN HEADER ALIGNMENT ===== */
#loginNameWrapper,
#logoutLinkWrapper {
    display: inline-flex !important;
    align-items: center;
    white-space: nowrap; /* keep text on one line */
}

/* Fix weird spacing from Bootstrap */
.mr-4 {
    margin-right: 24px !important; /* reduce from large spacing */
}

/* Prevent tall container issue */
#loginNameWrapper,
#logoutLinkWrapper,
#cartInfo {
    height: auto !important;
}

#loginNameWrapper::before {
    content: "";
}

.headerProfileLink {
  margin-right: 14px;
  margin-left: 6px;
}

.headerStudentLoginLogoutLink {
  margin-left: 6px;
}

#searchBreadcrumb {
  padding-top: 20px; /* adjust value as needed */
}

#courseProfileActions {
  position: relative;
  top: -50px; /* move up */
  margin-left: 10px;
}

@media (max-width: 1023px) {
  #buttonJumpToSections {
    float: left !important;
  }
}

.courseSocialMediaContainer {
  display: none !important;
}

#buttonJumpToSections {
  display: none !important;
}

/* Target ONLY links inside main content */
#mainContentWrapper a {
  color: #0066cc;
  text-decoration: underline; /* improves accessibility */
}

/* Hover + keyboard focus */
#mainContentWrapper a:hover,
#mainContentWrapper a:focus {
  color: #0056b3;
}

.social-icons {
    display: flex;
    justify-content: center;   /* keeps them centered */
    gap: 2px;                 /* spacing between icons */
}

.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;              /* increase clickable size */
    height: 44px;
}

#buttonSearchAgain {
  background-color: #6c757d; /* bootstrap secondary */
  color: #fff !important;
  padding: 10px 18px;
  border-radius: 4px;
  text-decoration: none !important;
  display: inline-block;
  font-weight: 500;
  border: none;
}

#buttonSearchAgain:hover {
  background-color: #5a6268;
  color: #fff;
}

.navbar .navbar-brand {
    display: none !important;
}