body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.custom-nav {
    /*background-color: #112855; /*Navy Blue*/
    color: white;
    padding: 2rem;
    clip-path: polygon(0 0, 100% 10%, 100% 100%, 0% 100%);
}

.container-below-top{
    max-width: 100%;
    background-color: #b5b3b3; /* Grey nav bar */
    border-top: 5px solid #112855;
    border-bottom: 5px solid #112855;
}

.custom-bottom-nav {
    margin-left: 33%;
    margin-right: 33%;
    max-width: 33%;
}

.mod-custom{
    width: 100%;
}

.container-header .grid-child{
    padding: 0px;
}



.custom-page-header {
    background-color: white;
    color: #112855;
    font-size: xx-large;
    
    display: flex;
    justify-content: center;     /* Center horizontally */
    align-items: flex-end;     
}

.custom-page-header-text {
    color: #112855;
}

.custom-page-header-banner {
    background-color: white;
    
    display: flex;
    justify-content: center;     /* Center horizontally */
    align-items: flex-end;     
}


.custom-line-item {
    background-color: #112855; /*Navy Blue*/
    color: white;
    border: thick;
    padding: 1%;
    border-radius: 10px;
    
}

/* ===================== */
/* NAVIGATION STYLES     */
/* ===================== */

/* Nav container */
nav {
  background-color: #b5b3b3; /* Grey nav bar */
  margin-top: 10px;
  margin-bottom: 10px;
  text-decoration: none;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none; /* also removes bullets */
  text-decoration: none;
}

/* Top-level menu list */
nav > ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 10px;        /* spacing between items */
  padding: 5px 0;
  margin: 0;
  text-decoration: none;
}

/* Each top-level li */
nav > ul > li {
  position: relative; /* needed for dropdown positioning */
  text-decoration: none;
}

/* Top-level menu links */
nav > ul > li > a {
  display: block;
  padding: 14px 20px;
  color: white;
  text-decoration: none;
  background-color: #112855; /* Dark Navy Blue */
  border-radius: 10px;       /* Rounded corners only for top level */
  transition: background-color 0.3s ease, color 0.3s ease;
  
}

/* Hover effect for top-level links */
nav > ul > li > a:hover {
  background-color: #555;
}

nav a:not([class]) {
    text-decoration: none;
}

/* ===================== */
/* MEMBER NAVBAR STYLES     */
/* ===================== */


.MA_Nav{
  background-color: #b5b3b3; /* Grey nav bar */
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
  color: #112855;
}

.MA_Nav a {
    margin-left: 5px;
    margin-right: 5px;
}

.MA_Nav a:hover {
    color: white;
    cursor: pointer;

}






/* ===================== */
/* DROPDOWN MENU         */
/* ===================== */

/* Dropdown container (hidden by default) */
nav > ul > li > ul {
  display: none;
  position: absolute;
  top: 100%;   /* directly under parent */
  left: 0;
  background-color: #112855;
  min-width: 180px;
  z-index: 9999;
}

/* Show dropdown on hover */
nav > ul > li:hover > ul {
  display: block;
}

/* Dropdown items */
nav > ul > li > ul > li {
  display: block; /* vertical stacking */
}

/* Dropdown links */
nav > ul > li > ul > li > a {
  display: block;
  width: 100%;
  padding: 10px 15px;
  color: white;
  background-color: #112855;
  margin: 0;             /* removes side gaps */
  white-space: nowrap;   /* prevent wrapping */
  box-sizing: border-box;
  transition: background-color 0.3s ease, color 0.3s ease;
  border-bottom: 1px solid #444; /* subtle divider */
}

/* Dropdown hover effect */
nav > ul > li > ul > li > a:hover {
  background-color: #666; 
  color: #09dfdf;
}


/* ===================== */
/* HEADER LINKS CSS      */
/* ===================== */

.header-links {
    position: absolute; /* Positions the text relative to the container */
    top: 0;             /* Aligns to the top edge */
    right: 0;           /* Aligns to the right edge */
    text-align: right;  /* Aligns the text itself to the right within its new space */
    padding: 10px;
    padding-right:20px;
}

.header-links:hover {
    cursor:pointer;
}

.header-links a:hover{
    color:#112855 !Important;
}
  


/* CSS AFFECTING ARTICLE SIZE */
main {
    margin-bottom: 0;
    max-width: 75%;
    margin-left: 14%;
    margin-right: 14%;
    
}



/* ===================== */
/* IMAGE CSS             */
/* ===================== */

.event{
		padding-left: 0px;
		padding-bottom: 40px;
		padding-right: 50px;
		padding-top: 0px;
	}





/*  CSS AFFECTING FOOTER */
.tcos-footer {
 background-color:#112855; 
 padding:15px 0; 
 text-align:center; 
 color:white; 
 font-size:0.8rem;
 
  width: 100%;
  margin: 0;
    
}



/* ============== */
/* TABLE CSS      */
/* ============== */


.tablecss {
    border: 1px solid #000000;
}

.tablecss tr td{
    border: 1px solid #000000;
}

.tablepadding tr td{
    padding-left: 10px;
    padding-right: 10px;
}


/* ============== */
/* MEMBERS CSS    */
/* ============== */

.two-column {
  display: flex;
}

.two-column > .left-column {
  flex: 0 0 66.6667%;
  max-width: 66.6667%;
}

.two-column > .right-column {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
}

.two-column .column {
  border: 1px solid #333;
  padding: 1rem;
  box-sizing: border-box;
}

.directorySearch{
    padding:5px;
    margin-bottom:10px;
}


.button-like {
    display: inline-block;
    padding: 10px 16px;
    border: 2px solid #1e3a8a;
    color: #1e3a8a;
    background-color: transparent;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none; /* removes underline */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.button-like:hover {
    background-color: #1e3a8a;
    color: #ffffff;
}



/* ===================================== */
/* MOBILE RESPONSIVE STYLES              */
/* ===================================== */

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

    /* Prevent horizontal scrolling */
    html, body {
        overflow-x: hidden;
    }

    /* Main content should use full width on mobile */
    main {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }

    /* Header adjustments */
    .custom-page-header {
        font-size: 1.8rem;
        text-align: center;
        padding: 10px;
    }

    .custom-page-header-banner img {
        max-width: 100%;
        height: auto;
    }

    /* Top header links */
    .header-links {
        position: static;
        text-align: center;
        padding: 10px 0;
    }

   
    /* Bottom nav sizing */
    .custom-bottom-nav {
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
    }

    /* Stack two-column layout vertically */
    .two-column {
        flex-direction: column;
    }

    .two-column > .left-column,
    .two-column > .right-column {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Images responsive */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Event spacing cleanup */
    .event {
        padding-right: 0;
        padding-bottom: 20px;
    }

    /* Tables become scrollable */
    .tablecss {
        display: block;
        overflow-x: auto;
        width: 100%;
    }

    /* Buttons easier to tap */
    .button-like {
        width: 100%;
        box-sizing: border-box;
    }

    /* Member nav cleanup */
    .MA_Nav {
        padding: 10px;
        line-height: 2;
    }
    
    /* ===================================== */
    /* MOBILE NAVIGATION                     */
    /* ===================================== */
    
    nav > ul {
        flex-direction: column;
        gap: 8px;
        padding: 10px;
    }
    
    nav > ul > li {
        width: 100%;
    }
    
    nav > ul > li > a {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        padding: 16px;
        font-size: 1rem;
    }
    
    /* Hide dropdowns by default */
    nav > ul > li > ul {
        display: none;
        position: static;
        background-color: transparent;
        padding-top: 5px;
    }
    
    /* Show active dropdown */
    nav > ul > li.open > ul {
        display: block;
    }
    
    /* Dropdown item styling */
    nav > ul > li > ul > li > a {
        border-radius: 6px;
        margin-top: 4px;
        background-color: #1d3c73;
        text-align: center;
    }

}