/* ==========================================================================
   1. GLOBAL DEFAULTS (Proxima Nova)
   ========================================================================== */
@import url("https://use.typekit.net/af/949f99/00000000000000003b9b0027/l?primer=7fa3915bgef8f3e587b45a92444b0c95cc547372d62283993144123512350787&fvd=n7&v=3");

body,
p,
li,
a,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: "proxima-nova", "Helvetica Neue", Arial, sans-serif !important;
    color: #333;
}
a {
    color: #0000EE; /* standard blue */
}

a:hover {
    color: #551A8B; /* standard visited/hover purple */
}
a {
    text-decoration: underline;
}

/* ==========================================================================
   2. HEADER 1: UTILITY BAR & LOGO AREA
   ========================================================================== */
#header1Container,
#header1Wrapper,
#header1ContentWrapper {
    background-color: #FFFFFF !important;
    color: #333 !important;
    border-bottom: none !important;
}

/* Container Height */
.header-row {
    min-height: 80px;
}

/* --- PACS BRANDING BLOCK (Logo + Divider + Text) --- */
.pacs-brand-wrapper {
    display: flex;
    align-items: center;
}

/* Logo Image */
a.logo.navbar-btn {
    display: block;
    padding: 0;
    margin: 0;
}

a.logo.navbar-btn img {
    height: 50px;
    width: auto;
    display: block;
}

/* PACS Text & Vertical Divider */
a.name.navbar-brand {
    font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-weight: 500 !important;
    font-size: 20px !important;
    color: #822433 !important;
    /* Maroon */
    text-decoration: none !important;
    line-height: 1;

    /* The Divider Line */
    border-left: 1px solid #822433;
    margin-left: 20px;
    padding-left: 20px;
    height: 40px;
    display: flex;
    align-items: center;
}

a.name.navbar-brand:hover {
    color: #5d0015 !important;
}

/* --- UTILITY NAVIGATION (Visit, Apply, etc.) --- */
/* Font: Duplicate Ionic Web (Serif) - Matches DevTools */
#header1ContentWrapper .utility-nav a,
#header1ContentWrapper .nav-link {
    font-family: "Duplicate Ionic Web", Georgia, serif !important;
    font-weight: 400 !important;
    font-size: 0.95rem !important;
    /* Slightly reduced to fit single line */
    color: #333 !important;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-transform: none !important;
    white-space: nowrap;
}

#header1ContentWrapper a:hover {
    color: #822433 !important;
    text-decoration: none;
}

/* --- ICONS --- */
.icon-ext {
    font-size: 0.75em !important;
    opacity: 0.7;
    vertical-align: text-top;
}

.icon-chevron {
    font-size: 0.7em !important;
    opacity: 0.5;
    vertical-align: middle;
}

/* --- RIGHT SIDE (Resources & Login) --- */
/* Font: Proxima Nova (Sans-Serif) & Uppercase */
.text-maroon-brand,
.resources-link,
.login-wrapper,
.login-wrapper a {
    font-family: "proxima-nova", "Helvetica Neue", Arial, sans-serif !important;
    color: #822433 !important;
    /* Maroon */
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 1px;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap;
}

/* Cart Icon */
#cartInfo .glyphicon-shopping-cart,
.fa-shopping-cart {
    color: #822433 !important;
    font-size: 18px;
}

/* Force hide standard caret in Login Menu if it's auto-generated */
.login-wrapper .dropdown-toggle::after {
    display: none !important;
}

/* Ensure our custom chevron is the one visible */
.login-wrapper .icon-chevron {
    display: inline-block !important;
}

/* ==========================================================================
   3. HEADER 3: GOLD NAVIGATION BAR
   ========================================================================== */
#header3Container,
#header3Wrapper,
#globalNavigationBar {
    background-color: #fdb913 !important;
    /* Gold */
    border-bottom: none;
}

#header3Container {
    display: flex;
    justify-content: flex-start;
    padding-left: 15px;
}

/* Top Level Nav Items (About, Courses) */
#header3Container .nav-link,
#globalNavigationBar .nav-link,
.global-nav-item {
    font-weight: 600 !important;
    /* Bold */
    font-size: 15px !important;
    color: #2a2a2a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px;
    padding: 15px 15px !important;
}

#header3Container .nav-link:hover {
    color: #000 !important;
    background-color: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   4. DROPDOWN MENUS (Consolidated)
   ========================================================================== */

/* Dropdown Container */
.dropdown-menu {
    border: none !important;
    border-radius: 0 !important;
    padding: 10px 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-top: 0 !important;
    /* CRITICAL: Removes gap so mouse doesn't fall through */
    background-color: #ffffff;
}

/* Dropdown Items */
.dropdown-item {
    font-family: "proxima-nova", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 10px 20px !important;
    color: #333 !important;
    border-bottom: 1px solid transparent;
    position: relative;
    /* For flyout arrow positioning */
}

/* Hover State - Maroon Background */
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-submenu:hover>.dropdown-item {
    background-color: #822433 !important;
    /* PACS Maroon */
    color: #ffffff !important;
    text-decoration: none;
}

/* ==========================================================================
   5. FLYOUT MENU LOGIC (Professional Tour Guiding)
   ========================================================================== */

/* Submenu Wrapper */
.dropdown-submenu {
    position: relative;
}

/* Flyout Arrow (Triangle pointing right) */
.dropdown-submenu>.dropdown-toggle::after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

/* Turn arrow white on hover */
.dropdown-submenu:hover>.dropdown-toggle::after {
    border-left-color: #fff;
}

/* Desktop Hover Behaviors (Min-Width 768px) */
@media (min-width: 768px) {

    /* 1. Open Main Dropdown on Hover */
    .nav-item.dropdown:hover>.dropdown-menu {
        display: block;
    }

    /* 2. Hide Flyout by default (prevents showing before hover) */
    .flyout-menu {
        display: none;
    }

    /* 3. Open Flyout on Hover (Push to Right) */
    .dropdown-submenu:hover>.flyout-menu {
        display: block;
        top: 0;
        left: 100%;
        margin-top: -10px !important;
        /* Align tops */
        margin-left: -1px;
    }

    /* 4. Allow Overflow (Prevents cutting off flyout) */
    .dropdown-menu {
        overflow: visible;
    }
}

/* ==========================================================================
   6. UTILITY BAR DROPDOWNS (Gold/Maroon Overrides)
   ========================================================================== */
.dropdown-menu-gold {
    background-color: #fdb913 !important;
    margin-top: 15px !important;
    /* Keep gap for utility bar */
}

.dropdown-menu-maroon {
    background-color: #5d0015 !important;
    margin-top: 15px !important;
}

.dropdown-menu-gold .dropdown-item,
.dropdown-menu-maroon .dropdown-item {
    font-weight: 600 !important;
}

.dropdown-menu-gold .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.4) !important;
    color: #333 !important;
}

.dropdown-menu-maroon .dropdown-item {
    color: #fff !important;
}

.dropdown-menu-maroon .dropdown-item:hover {
    color: #fdb913 !important;
    background-color: rgba(0, 0, 0, 0.2) !important;
}

/* ==========================================================================
   7. FOOTER STYLES (CSS Grid Override)
   ========================================================================== */

/* Main Footer Container */
footer, #footer, #footerNav {
    background-color: #600 !important; /* Maroon */
    color: #FFFFFF !important;
    border-top: none !important;
    padding-top: 40px;
    padding-bottom: 40px;
}

/* --- Typography --- */
.footer-brand-title, .footer-contact-header {
    font-family: "Duplicate Ionic Web", Georgia, serif !important;
    font-size: 1.25rem !important;
    line-height: 1.2;
    margin-bottom: 5px;
    color: #fff !important;
    font-weight: 400 !important;
}

.footer-address, .footer-contact-info {
    font-family: "proxima-nova", Helvetica, Arial, sans-serif !important;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* --- GRID LAYOUT (Desktop Only - min-width 992px) --- */
/* This overrides the restricted JSP's equal columns */
@media (min-width: 992px) {
    #footerNav > .row {
        display: grid;
        /* Custom Widths: Logo(2) | Contact(3) | Menu(5) | Jesuit(2) */
        grid-template-columns: 1.5fr 2.5fr 4fr 1.5fr; 
        width: 100%;
    }

    /* Target the 4 columns inside the row */
    #footerNav > .row > div {
        max-width: 100% !important; /* Override Bootstrap */
        flex: 0 0 auto !important; /* Override Bootstrap */
        border-right: 1px solid rgba(255, 255, 255, 0.2); /* Vertical Divider */
        padding-left: 30px;
        padding-right: 30px;
        display: flex;           /* Ensures content stretches */
        flex-direction: column;  /* Stack content vertically */
    }

    /* Remove divider from the last column (Jesuit Logo) */
    #footerNav > .row > div:last-child {
        border-right: none;
    }

    /* Specific fix for Column 1 to align left edge */
    #footerNav > .row > div:first-child {
        padding-left: 15px;
    }
}

/* --- Content Styling --- */
.footer-logo-img {
    width: 100%;
    max-width: 160px;
    margin-bottom: 20px;
    display: block;
}

/* Social Icons */
ul.social-media-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 15px;
}
ul.social-media-links li a {
    color: #fff !important;
    font-size: 0; /* Hide text */
    text-decoration: none;
}
ul.social-media-links li a::before {
    font-size: 1.5rem;
    width: 1.5rem;
    text-align: center;
    display: inline-block;
}
ul.social-media-links li a:hover {
    color: #fdb913 !important;
}

/* Contact Icons */
.footer-icon {
    color: #fff;
    font-size: 1.5rem;
    margin-top: 4px;
    width: 25px; 
    text-align: center;
}

/* Link Menu (Multi-column) */
.footer-links-multicolumn {
    column-count: 2; /* Default split */
    column-gap: 30px;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}
/* Use 3 columns if space allows */
@media (min-width: 1200px) {
    .footer-links-multicolumn {
        column-count: 3; 
    }
}

.footer-links-multicolumn li {
    break-inside: avoid;
    margin-bottom: 12px;
}

.footer-links-multicolumn a {
    font-family: "proxima-nova", Helvetica, Arial, sans-serif !important;
    font-size: 13px;
    color: #fff !important;
    text-decoration: none;
    font-weight: 400;
}
.footer-links-multicolumn a:hover {
    color: #fdb913 !important;
    text-decoration: underline;
}

/* Icons for links */
.footer-links-multicolumn .fa-external-link-alt,
.footer-links-multicolumn .ext::after {
    font-family: "FontAwesome";
    content: "\f35d";
    font-size: 0.75em;
    margin-left: 4px;
    opacity: 0.7;
}

/* Jesuit Logo */
.footer-jesuit-logo {
    margin-top: 10px;
    max-width: 150px;
    opacity: 1;
    display: block;
    margin-left: auto;
}