/* FPT Modern Theme - Styled to Match FPT Metals Website
   Keeping original layout structure, updating colors, fonts, and adding new sections */

/* Poppins Font Import */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

/* Base Typography - Use Poppins */
body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

/* Modern Color Updates - Deep Blues */
#topBar {
    /* Hide the empty top bar to remove extra space */
    display: none !important;
}

.header,
.top-bar {
    background-color: #1a3a5f !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Ensure the entire menu bar strip matches (legacy CSS sets inner header to a different blue) */
#inner-header,
#container .header #inner-header,
.navWrap,
.contain-to-grid,
.top-bar-section,
.top-bar-section ul,
.top-bar-section ul li,
.top-bar-section ul li > a {
    background-color: #1a3a5f !important;
}

.footer {
    background-color: #0f2538 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Remove gaps and expand blue areas to full width */
#container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#content,
#inner-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.inner-wrap,
.off-canvas-wrap {
    width: 100% !important;
    max-width: 100% !important;
}

/* Expand rows to full width within blue sections */
#topBar .row,
.header .row,
.footer .row,
.footer-content .row,
.footer-bottom .row {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 2rem;
    padding-right: 2rem;
    box-sizing: border-box;
}

/* Header Styling */
#titleBar {
    background-color: #f5f7fa !important;
    padding: 1rem 0;
    border-bottom: 1px solid #e0e0e0;
}

.siteLogo {
    text-align: center;
}

.siteLogo img {
    max-height: 60px;
    width: auto;
    margin: 0 auto;
}

/* Remove/Hide the blue headerSquare border */
.headerSquare {
    display: none !important;
}

#container .header #inner-header .headerSquare {
    display: none !important;
    background: transparent !important;
    height: 0 !important;
    width: 0 !important;
}

#titleBar .row {
    align-items: center;
    justify-content: center;
    display: flex;
    text-align: center;
}

#titleBar .columns {
    float: none;
    display: inline-block;
    text-align: center;
}

.siteLogo img {
    /* Make the FPT logo more prominent while keeping it responsive */
    max-height: 90px;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Responsive tuning */
@media (max-width: 640px) {
    .siteLogo img {
        max-height: 72px;
    }
}

@media (min-width: 1024px) {
    .siteLogo img {
        max-height: 105px;
    }
}

.certification-image {
    max-height: 50px;
    width: auto;
}

.contactInfo h3 {
    font-size: 0.85rem;
    font-weight: 500;
    color: #6a6a6a;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contactInfo p,
#container #titleBar .contactInfo p,
.contactInfo .textwidget p,
#enhancedtextwidget-7 p {
    font-size: 1.25rem;
    font-weight: 700;
    color: #000000 !important;
    margin: 0;
}

.contactInfo .foundicon-phone {
    color: #ff8c00;
    margin-right: 0.5rem;
}

/* Navigation Styling */
.top-bar-section ul li a {
    color: #ffffff !important;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1rem 1.5rem !important;
    transition: background-color 0.3s ease;
}

.top-bar-section ul li a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.top-bar-section ul li.active > a {
    background-color: #ff8c00 !important;
    color: #ffffff !important;
}

/* ============================================
   Hero Section
   ============================================ */
.hero-section {
    /* Full-bleed section (removes white gutters caused by Foundation .row/.columns layout) */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 0;
}

.hero-image-container {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.hero-image {
    width: 100%;
    height: auto;
    display: block;
    max-height: 500px;
    object-fit: cover;
}

/* ============================================
   Welcome Section
   ============================================ */
.welcome-section {
    background-color: #1a4a5f;
    background: linear-gradient(135deg, #1a4a5f 0%, #0f2538 100%);
    /* Full-bleed section (removes white gutters caused by Foundation .row/.columns layout) */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 4rem 2rem;
    text-align: center;
    color: #ffffff;
}

.welcome-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.welcome-tagline {
    font-size: 1.5rem;
    font-weight: 400;
    font-style: italic;
    color: #ff8c00;
    margin-bottom: 1.5rem;
}

.welcome-description {
    font-size: 1.1rem;
    color: #ffffff;
    max-width: 800px;
    margin: 0 auto 2rem;
    line-height: 1.8;
}

.welcome-cta {
    margin-top: 2rem;
}

.sign-in-button {
    background-color: #ff8c00 !important;
    border-color: #ff8c00 !important;
    color: #ffffff !important;
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    display: inline-block;
    text-decoration: none;
}

.sign-in-button:hover {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

.section-heading {
    font-size: 2rem;
    font-weight: 600;
    color: #1a3a5f;
    margin-bottom: 1.5rem;
}

.section-description {
    font-size: 1.1rem;
    color: #4a4a4a;
    line-height: 1.8;
    margin-bottom: 2rem;
}

/* ============================================
   Authenticated User Section
   ============================================ */
.authenticated-section {
    padding: 3rem 2rem;
    background-color: #ffffff;
    max-width: 1200px;
    margin: 0 auto;
}

.authenticated-section .row {
    max-width: 100%;
    margin: 0 auto;
}

.authenticated-section .section-heading {
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.authenticated-section .ferrous-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
    justify-content: center;
}

/* ============================================
   Disclaimer Section (Above Footer)
   ============================================ */
.bordertopthick {
    border-top: none !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background: linear-gradient(135deg, #1a4a5f 0%, #0f2538 100%) !important;
    background-color: #1a4a5f !important;
    padding: 1rem 2rem;
    margin-bottom: 0;
    width: 100% !important;
    max-width: 100% !important;
}

.bordertopthick .row,
.bordertopthick .col-lg-12 {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 2rem;
    padding-right: 2rem;
    box-sizing: border-box;
}

.orbit-bullets-container {
    color: #ffffff;
    font-size: 0.9rem;
    text-align: center;
    margin: 0;
    padding: 0;
}

/* ============================================
   Footer Styling
   ============================================ */
.footer {
    background-color: #1a4a5f !important;
    background: linear-gradient(135deg, #1a4a5f 0%, #0f2538 100%);
    color: #ffffff;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    min-height: auto;
    clear: both;
}

.footerBottom {
    background: linear-gradient(135deg, #1a4a5f 0%, #0f2538 100%) !important;
    background-color: #1a4a5f !important;
    padding: 0;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.footer-content {
    padding: 3rem 0 2rem;
    margin: 0 auto;
    width: 100%;
}

.footer-content .row {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding-left: 10%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4rem;
    box-sizing: border-box;
}

.footer-column {
    margin-bottom: 0;
    padding: 0;
    flex: 0 0 250px;
    text-align: left;
}

.footer-heading {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    border-bottom: 2px solid #ff8c00;
    padding-bottom: 0.5rem;
    display: inline-block;
}

.footer-text {
    font-size: 0.95rem;
    color: #e0e0e0;
    line-height: 1.8;
    margin: 0;
}

.footer-link {
    color: #ff8c00;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Version text in footer should NOT behave like a link */
.footer-version-text {
    color: #ff8c00;
    text-decoration: none;
}

.footer-version-text:hover {
    color: #ff8c00;
    text-decoration: none;
    cursor: default;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding: 2rem 2rem 1.5rem;
    margin: 0;
    clear: both;
}

.footer-links {
    margin-bottom: 1rem;
    padding: 0;
}

.footer-links-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-nav-left {
    flex: 1;
}

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.footer-version {
    margin-left: auto;
    white-space: nowrap;
}

.footer-menu li {
    margin: 0;
}

.footer-menu .footer-link {
    color: #e0e0e0;
    font-size: 1.1rem;
    text-decoration: none;
}

.footer-menu .footer-link:hover {
    color: #ff8c00;
    text-decoration: none;
}

.footer-copyright {
    text-align: center;
    padding: 1rem 2rem 2rem;
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent !important;
    clear: both;
}

.footer-copyright p {
    font-size: 0.85rem;
    color: #e0e0e0;
    margin: 0;
}

/* ============================================
   Responsive Design
   ============================================ */
@media screen and (max-width: 768px) {
    .welcome-title {
        font-size: 1.75rem;
    }
    
    .welcome-tagline {
        font-size: 1.25rem;
    }
        
    .section-heading {
        font-size: 1.5rem;
    }
        
    .footer-column {
        margin-bottom: 2.5rem;
    }
    
    .footer-menu {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* Button Colors - Orange by default, Red on hover */
/* Override all button styles to be orange by default, red on hover */
button,
.button,
.btn,
.btn-primary,
.button.primary,
.button.non-main-button,
input[type="submit"],
input[type="button"],
input[type="reset"],
button[type="submit"],
button[type="button"],
button[type="reset"] {
    background-color: #ff8c00 !important;
    border-color: #ff8c00 !important;
    color: #ffffff !important;
}

button:hover,
button:focus,
.button:hover,
.button:focus,
.btn:hover,
.btn:focus,
.btn-primary:hover,
.btn-primary:focus,
.button.primary:hover,
.button.primary:focus,
.button.non-main-button:hover,
.button.non-main-button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
button[type="submit"]:hover,
button[type="submit"]:focus,
button[type="button"]:hover,
button[type="button"]:focus,
button[type="reset"]:hover,
button[type="reset"]:focus {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

/* Ensure secondary buttons also follow the orange/red pattern */
button.secondary,
.button.secondary {
    background-color: #ff8c00 !important;
    border-color: #ff8c00 !important;
    color: #ffffff !important;
}

button.secondary:hover,
button.secondary:focus,
.button.secondary:hover,
.button.secondary:focus {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

/* Table Header Colors - White text for better readability */
table thead {
    background-color: #1a3a5f !important;
}

/* White text for all table headers */
table thead th,
table thead td,
table thead tr th,
table thead tr td,
table.dataTable thead th,
table.dataTable thead td,
table.dataTable thead tr th,
table.dataTable thead tr td,
.tablesorter-default thead th,
.tablesorter-default thead td {
    color: #ffffff !important;
}

/* Text Colors */
.text-primary {
    color: #1a3a5f !important;
}

.estimated {
    color: #dc3545;
    font-style: italic;
}