/* =====================================================================
   FIXES.CSS — site-wide polish patch
   Load this AFTER style.css / custom.css so these rules win.
   Fixes: (1) missing slider arrow icons, (2) broken/ugly mobile nav,
   (3) achievement/section color clash, (4) small general UI polish.
   ===================================================================== */

:root {
    --brand: #6f066d;
    --brand-dark: #4a0448;
    --brand-light: #9b3c99;
    --accent-gold: #f79c2c;
    --accent-teal: #14b899;
    --text-dark: #2b2b2b;
}

/* ---------------------------------------------------------------------
   1) MAIN SLIDER ARROWS — glyphicon font was never shipped locally,
      so the prev/next icons were invisible. We render them with
      Font Awesome (already loaded locally) inside a visible round button.
   --------------------------------------------------------------------- */
#myCarousel .carousel-control {
    width: 50px;
    height: 50px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    background: rgba(111, 6, 109, 0.55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    transition: background 0.25s ease, opacity 0.25s ease;
    text-shadow: none;
}

#myCarousel .carousel-control:hover,
#myCarousel .carousel-control:focus {
    background: var(--brand);
    opacity: 1;
    color: #fff;
}

#myCarousel .carousel-control.left { left: 15px; }
#myCarousel .carousel-control.right { right: 15px; }

#myCarousel .carousel-control i,
#myCarousel .carousel-control .fa {
    font-size: 22px;
    line-height: 1;
    color: #fff;
}

#myCarousel .carousel-indicators li {
    border-color: var(--brand);
}

#myCarousel .carousel-indicators .active {
    background-color: var(--brand);
}

@media (max-width: 600px) {
    #myCarousel .carousel-control { width: 38px; height: 38px; }
    #myCarousel .carousel-control i,
    #myCarousel .carousel-control .fa { font-size: 16px; }
}

/* Same treatment for the small gallery/achievement carousels so their
   arrows are visible too (they use plain Bootstrap glyphicon markup
   from the shared theme). */
.custom-carousel .carousel-control {
    width: 34px;
    height: 34px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    background: rgba(111, 6, 109, 0.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-carousel .carousel-control:hover {
    background: rgba(111, 6, 109, 0.25);
}

/* ---------------------------------------------------------------------
   2) MOBILE NAV — the dropdown submenus relied on :hover, which doesn't
      exist on touch devices, so on mobile they were unreachable/ugly.
      Below makes the whole menu a clean, tappable, stacked accordion.
   --------------------------------------------------------------------- */
@media (max-width: 991px) {

    .navbar-toggle {
        border: none;
        margin: 10px 15px;
        background: rgba(255, 255, 255, 0.12) !important;
    }

    .navbar-toggle .icon-bar {
        background-color: #fff !important;
        width: 24px;
        height: 2px;
    }

    .navbar-toggle:hover,
    .navbar-toggle:focus {
        background: rgba(255, 255, 255, 0.22) !important;
    }

    .header-nav.navbar-collapse {
        max-height: 80vh;
        overflow-y: auto;
        padding: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }

    .header-nav .navbar-nav {
        margin: 0;
        width: 100%;
    }

    .header-nav .navbar-nav > li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        float: none;
    }

    .header-nav .navbar-nav > li > a {
        display: block;
        width: 100%;
        padding: 12px 18px;
        color: #fff;
        font-size: 14px;
    }

    .header-nav .navbar-nav > li > a:hover,
    .header-nav .navbar-nav > li > a:focus {
        background: rgba(255, 255, 255, 0.08);
        color: var(--accent-gold);
    }

    /* Submenus: no more hover-only fly-out — show them stacked & static */
    .header-nav .sub-menu {
        position: static !important;
        display: block !important;
        width: 100% !important;
        margin: 0;
        padding: 0;
        background: rgba(0, 0, 0, 0.18) !important;
        border: none;
        box-shadow: none;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .header-nav .sub-menu li a {
        padding: 10px 30px;
        font-size: 13px;
        color: #f1e6f1;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .header-nav .sub-menu li a:hover {
        color: var(--accent-gold);
        background: rgba(255, 255, 255, 0.06);
    }

    /* hide the chevrons on mobile — they implied a hover flyout that no
       longer applies now that submenus are always expanded */
    .header-nav .navbar-nav > li > a .fa-chevron-down {
        display: none;
    }
}

/* Small phones — tighten the top utility bar so it wraps cleanly */
@media (max-width: 480px) {
    .top-utility-bar {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 10px;
        font-size: 11px;
        padding: 6px 4px;
    }
}

/* ---------------------------------------------------------------------
   3) COLOR HARMONY — the achievements/gallery block used a bright,
      unrelated green hover and a mis-matched footer purple. Bring both
      back in line with the brand purple + gold accent used elsewhere.
   --------------------------------------------------------------------- */
.section-heading {
    background: var(--brand);
}

.outer:hover {
    background-color: #f4ecf4;
    border-color: var(--brand-light);
}

.custom-carousel .carousel-control { color: var(--brand); }

footer.site-footer .footer-top {
    background: var(--brand-dark) !important;
}

footer.site-footer .footer-bottom {
    background-color: var(--brand) !important;
}

.principal_message h5 {
    color: var(--brand) !important;
}

.d { background: var(--accent-teal); }
.d:hover { background: var(--brand); }

/* ---------------------------------------------------------------------
   4) SMALL GENERAL UI POLISH
   --------------------------------------------------------------------- */
.custom-section {
    border-radius: 8px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}

.prin_box, .outer {
    border-radius: 8px;
}

a.aj:hover {
    color: var(--accent-gold) !important;
}