/**
 * Chicago Windows & Doors — Custom Header & Footer Styles for OceanWP
 * Matches the design from index.html
 */

/* ============================================================
   GOOGLE FONTS — Lato
   ============================================================ */
@import url('https://fonts.googleapis.com/css?family=Lato:400,700,900&display=swap&subset=latin,latin-ext');

/* ============================================================
   HEADER
   ============================================================ */

/* Sticky header with CWD navy background */
#site-header {
    background-color: #004469 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18) !important;
    border-bottom: none !important;
}

/* Remove any transparent header overrides */
#site-header.transparent-header,
#site-header.is-transparent {
    background-color: #004469 !important;
}

/* Logo sizing to match CWD site (117x100px) */
#site-logo #site-logo-inner a img,
#site-logo #site-logo-inner picture img {
    max-height: 100px !important;
    width: auto !important;
}

/* ---- Main nav links ---- */
#site-navigation .main-menu > li > a,
#site-navigation .main-menu > li > a .text-wrap,
.oceanwp-mobile-menu-icon a {
    font-family: 'Lato', sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    color: rgba(255, 255, 255, 1.0) !important;
    letter-spacing: 0 !important;
}

#site-navigation .main-menu > li > a:hover,
#site-navigation .main-menu > li > a:hover .text-wrap,
#site-navigation .main-menu > li.current-menu-item > a,
#site-navigation .main-menu > li.current-menu-item > a .text-wrap,
#site-navigation .main-menu > li.current-menu-ancestor > a,
#site-navigation .main-menu > li.current-menu-ancestor > a .text-wrap {
    color: #cccccc !important;
    background-color: transparent !important;
}

/* Remove any default link decorations on hover */
#site-navigation .main-menu > li > a:hover {
    background-color: transparent !important;
}

/* ---- Dropdown sub-menus ---- */
#site-navigation .main-menu .sub-menu,
#site-navigation .main-menu ul.sub-menu {
    background-color: #004469 !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 8px 0 !important;
    min-width: 220px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}

#site-navigation .main-menu .sub-menu li a,
#site-navigation .main-menu .sub-menu li a .text-wrap {
    font-family: 'Lato', sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 8px 20px !important;
    background-color: transparent !important;
}

#site-navigation .main-menu .sub-menu li a:hover,
#site-navigation .main-menu .sub-menu li a:hover .text-wrap {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

/* ---- Mobile menu toggle ---- */
.navbar-toggle,
.menu-toggle,
#mobile-menu-btn .lines,
#mobile-menu-btn .lines:before,
#mobile-menu-btn .lines:after {
    background-color: #ffffff !important;
}

#mobile-menu-btn span {
    background-color: #ffffff !important;
}

/* Mobile menu icon color */
.oceanwp-mobile-menu-icon a,
#mobile-menu-btn a {
    color: #ffffff !important;
}

/* ============================================================
   FOOTER
   ============================================================ */

/* Dark footer background matching CWD footer (#0b1f31) */
#footer,
.site-footer,
#footer-widgets,
#footer-bottom {
    background-color: #0b1f31 !important;
    border-top: none !important;
}

/* Footer widget titles (h4 in index.html) */
#footer-widgets .widget-title,
#footer-widgets .footer-widget .widget-title,
#footer-widgets h1,
#footer-widgets h2,
#footer-widgets h3,
#footer-widgets h4,
#footer-widgets h5,
#footer-widgets h6 {
    font-family: 'Lato', sans-serif !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Footer body text */
#footer-widgets p,
#footer-widgets li,
#footer-widgets address,
#footer-widgets .textwidget {
    font-family: 'Lato', sans-serif !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Footer links */
#footer-widgets a,
#footer-widgets .footer-box a {
    font-family: 'Lato', sans-serif !important;
    color: rgba(255, 255, 255, 0.6) !important;
    display: block !important;
    padding: 2px 0 !important;
    transition: color 0.2s ease !important;
}

#footer-widgets a:hover,
#footer-widgets .footer-box a:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Footer nav menu links (widget_nav_menu) */
#footer-widgets .widget_nav_menu li a {
    color: rgba(255, 255, 255, 0.6) !important;
    font-family: 'Lato', sans-serif !important;
    font-size: 16px !important;
    padding: 3px 0 !important;
    display: block !important;
    background: transparent !important;
    border: none !important;
}

#footer-widgets .widget_nav_menu li a:hover {
    color: #ffffff !important;
}

/* ---- Footer bottom / copyright bar ---- */
#footer-bottom {
    background-color: #0b1f31 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 20px 0 !important;
}

#copyright,
#footer-bottom #copyright,
#footer-bottom #copyright p,
#footer-bottom-menu,
#footer-bottom-menu a {
    font-family: 'Lato', sans-serif !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 14px !important;
}

#footer-bottom-menu a:hover {
    color: #ffffff !important;
}

/* Divider between footer widget rows */
#footer-widgets .footer-box {
    border-right: none !important;
}

/* ============================================================
   MOBILE FULLSCREEN MENU — edge-to-edge fix
   ============================================================ */

/* Ensure the overlay itself truly fills the viewport */
#mobile-fullscreen {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove the horizontal padding so background reaches the sides */
#mobile-fullscreen #mobile-fullscreen-inner {
    padding: 0 !important;
}

/* Switch from vertical-centering to top-aligned layout */
#mobile-fullscreen nav {
    display: block !important;
    vertical-align: top !important;
    padding: 80px 40px 40px !important;
    text-align: right !important;
}

/* Right-align menu items */
#mobile-fullscreen ul li a {
    text-align: right !important;
}