/* Modern Layout Overrides */

/* Reset pageCon margins for full width usage inside iframes or main pages */
.pageCon {
    margin: 0 !important;
    width: 100% !important;
    height: 100vh;
    /* Ensure it takes full height */
    overflow: hidden;
    /* Prevent scrollbars if content fits */
    background: #0e0e0e;
}

/* Adjust pageMain to hold the header and iframe content */
.modern-page-main {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: #0e0e0e;
}

/* Header Styles */
.modern-header {
    height: 80px;
    background: rgba(0, 0, 0, 0.9);
    /* slight transparency */
    border-bottom: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    z-index: 1000;
    position: relative;
    flex-shrink: 0;
    /* Prevent header from shrinking */
}

.modern-header .logo {
    height: 50px;
}

.modern-header .logo img {
    height: 100%;
    width: auto;
}

.modern-nav {
    display: flex;
    gap: 30px;
}

.modern-nav .nav-item {
    color: #ccc;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    transition: color 0.3s ease;
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.modern-nav .nav-item:hover,
.modern-nav .nav-item.active {
    color: #d8b866;
    /* Gold color from original */
    border-bottom: 2px solid #d8b866;
}

.modern-lang {
    font-size: 14px;
    color: #888;
}

.modern-lang a {
    color: #ccc;
    margin: 0 5px;
    text-decoration: none;
}

.modern-lang a:hover {
    color: #d8b866;
}

.modern-lang span {
    color: #555;
}

/* Content Area */
#iframeCon {
    flex: 1;
    position: relative;
    width: 100%;
    height: 100%;
    /* Fill remaining space */
    overflow: hidden;
}

#pageSubCon {
    position: relative;
    width: 100%;
    /* Full width */
    height: 100%;
    margin: 0 !important;
    /* Override old margin */
    overflow: hidden;
}

/* Override existing margin animation logic styles */

#iframeUl {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    /* Just in case */
}

#iframeUl li {
    width: 100%;
    /* Will be set by JS but good default */
    height: 100%;
    float: left;
    position: absolute;
    /* Using absolute positioning for the transitions */
    left: 100%;
    /* Start off-screen */
    top: 0;
    margin: 0 !important;
    padding: 0 !important;
}

#iframeUl li:first-child {

    /* left: 0; handled by JS now */
}

#iframeUl iframe {
    width: 100%;
    height: 100%;
    border: none;
    margin: 0 !important;
    /* Fix the margin-left: -173px issue */
    padding: 0 !important;
    display: block;
    /* Eliminate possible inline gap */
}

/* Hide old elements that we are replacing/hiding via CSS class changes in HTML */
.display-none {
    display: none !important;
}

/* Sub-navigation for Products/News */
.modern-sub-nav-container {
    width: 100%;
    height: 50px;
    background: #111;
    text-align: center;
    position: relative;
    z-index: 20;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modern-sub-nav {
    display: flex;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.modern-sub-nav li {
    margin: 0 30px;
    height: 100%;
    display: flex;
    align-items: center;
}

.modern-sub-nav li a {
    display: block;
    color: #999;
    font-size: 14px;
    text-decoration: none;
    padding: 0 5px;
    border-bottom: 2px solid transparent;
    /* default */
    transition: all 0.3s;
    height: 100%;
    line-height: 50px;
    /* Vertically center text */
}

.modern-sub-nav li a:hover,
.modern-sub-nav li a.ahover {
    color: #d8b866;
    border-bottom: 2px solid #d8b866;
}