/* ==========================================================================
   weblayouts.css
   Shared styles for resources/views/weblayouts/*.blade.php
   (menu.blade.php, footer.blade.php, index.blade.php, web.blade.php)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header / Navbar (menu.blade.php)
   -------------------------------------------------------------------------- */

/* Spread the menu across the full header width (desktop only — below the
   theme's 1200px breakpoint the nav switches to the absolutely-positioned
   .navbar-mobile panel, which must keep its own width/layout untouched). */
@media (min-width: 1201px) {
    #navbar {
        width: 100%;
    }

    .navbar > ul {
        width: 100%;
        justify-content: space-around;
        padding: 0 40px;
    }

    .navbar li.nav-link.scrollto + li.nav-link.scrollto {
        margin-left: 20px;
    }

    /* Separate the Register/Login buttons from the last text menu item (ติดต่อ)
       so the button group doesn't sit closer to it than the other menu gaps */
    .navbar li.nav-buttons-start {
        margin-left: 30px;
    }
}

/* Mobile/tablet dropdown menu (≤1200px) — the list stacks vertically here,
   so the button gap above needs margin-top instead of margin-left */
@media (max-width: 1200px) {
    .navbar-mobile li.nav-link.scrollto + li.nav-link.scrollto {
        margin-top: 10px;
    }

    /* Keep the hamburger icon anchored to the same spot on screen whether the
       menu is open or closed — the theme otherwise repositions it (in-flow
       while closed, position:absolute against the fullscreen overlay while
       open) which makes it visibly jump when clicked. */
    .mobile-nav-toggle {
        position: fixed !important;
        top: 26px !important;
        right: 15px !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        z-index: 9999;
    }

    /* Narrower Register/Login buttons on tablet/mobile than on desktop —
       shrink-to-fit the label instead of stretching full width like the
       theme's default nav-link anchors do */
    .navbar .btn {
        display: inline-flex !important;
        justify-content: center !important;
        width: 60% !important;
        padding: 6px 6px !important;
        font-size: 14px !important;
    }

    .navbar-mobile li.nav-link.scrollto {
        text-align: center;
    }
}

.navbar a,
.navbar li a {
    font-size: 18px !important;
    font-family: 'Inter', 'Anuphan', sans-serif !important;
}

.navbar .btn {
    font-size: 16px !important;
    padding: 6px 14px !important;
    font-family: 'Inter', 'Anuphan', sans-serif;
}

/* Hover state uses the theme's orange instead of the default blue */
.navbar a:hover,
.navbar a:focus,
.navbar li:hover > a,
.navbar .dropdown ul a:hover,
.navbar .dropdown ul li:hover > a {
    color: #EA6222 !important;
}

/* Active menu item stays orange, including while hovered */
.navbar .active,
.navbar .active:focus,
.navbar .active:hover,
.navbar li:hover > a.active,
.navbar .dropdown ul .active,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover > a.active {
    color: #EA6222 !important;
}

.navbar .btn-primary {
    background-color: #EA6222;
    border-color: #EA6222;
}

.navbar .btn-primary:hover,
.navbar .btn-primary:focus {
    background-color: #c94f14;
    border-color: #c94f14;
}

.navbar .btn-success {
    background-color: #000000;
    border-color: #000000;
}

.navbar .btn-success:hover,
.navbar .btn-success:focus {
    background-color: #01184a;
    border-color: #01184a;
}

/* Button text stays white even under the orange hover rule above */
.navbar .btn,
.navbar .btn:hover,
.navbar .btn:focus {
    color: #fff !important;
}

/* --------------------------------------------------------------------------
   Login / Register banner + footer (footer.blade.php)
   -------------------------------------------------------------------------- */

/* Match the footer's bottom bar to the site's brand orange instead of the
   template's default shade */
.footer {
    background: #EA6222;
}

.login {
    background-color: #e0e0e0;
    border-left: 4px solid #4682b4;
    padding: 10px;
    margin: 0px;
}

.login1 {
    background-color: #e0e0e0;
    padding: 20px;
    margin: 0px;
}

.submission-banner {
    background: #fff4ec;
    border-top: 3px solid #EA6222;
    padding: 14px 0;
}

.submission-banner .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    text-align: center;
}

.submission-banner .sub-icon {
    color: #EA6222;
    font-size: 20px;
    line-height: 0;
}

.submission-banner p {
    margin: 0;
    font-weight: 600;
    color: #333;
}

.submission-banner a {
    color: #EA6222;
}

.submission-banner a:hover {
    color: #c94f14;
}

.footer .footer-links h4,
.footer .footer-contact h4 {
    font-size: 16px;
    font-weight: bold;
    color: #012970;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.footer .issn-link {
    margin-bottom: 10px;
}

.footer .issn-link a {
    color: #013289;
    transition: 0.3s;
}

.footer .issn-link a:hover {
    color: #EA6222;
}

.footer .footer-contact .contact-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.footer .footer-contact .contact-row i {
    color: #EA6222;
    margin-top: 4px;
    flex-shrink: 0;
}

.footer .footer-contact .contact-row p {
    margin: 0;
    line-height: 1.6;
}

/* Below lg, the footer-top columns wrap onto separate lines (removed the
   row's Bootstrap gy-4 gutter since it did nothing on desktop but added an
   oversized 24px gap once columns stack) — a smaller, purpose-sized gap
   between the stacked sections instead of them touching directly */
@media (max-width: 991.98px) {
    .footer-top .footer-info,
    .footer-top .footer-links,
    .footer-top .footer-contact {
        margin-bottom: 20px;
    }

    .footer-top .footer-contact {
        margin-bottom: 0;
    }
}

.footer-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
    margin: 0 auto;
    max-width: 1140px;
}