/*
Theme Name: Calculator Child
Theme URI: https://www.calculator.com.my/
Description: Child theme for Calculator
Author: Development Team
Author URI: 
Template: calculator
Version: 1.0.0
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: calculator-child
*/

body{font-family:"Inter",sans-serif !important;}

.lightblue{color:#148DFB;}

h1{font-size:36px;color:#00498B;font-weight:700;margin:0 0 20px;}

.site-header+.elementor{min-height:calc(100vh - 412px) !important;}

.container{max-width:1140px;margin:0 auto;}

/* HEADER */
.site-header .header-inner .site-branding .site-logo img{height:46px;width:auto;}

.header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100%;
}

.header-inner .site-navigation {

    width: auto !important; 
    margin-left: 20px;      
}

.site-navigation #mega-menu-wrap-menu-1 #mega-menu-menu-1 {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
}

.site-navigation #mega-menu-menu-1 > li#mega-menu-item-261 {
    margin-left: auto !important;
}

.site-navigation #mega-menu-menu-1 > li#mega-menu-item-261 > a.mega-menu-link {
    /* Button Shape */
    background-color: #144387 !important; /* Dark Blue */
    color: #ffffff !important;           /* White Text */
    border-radius: 6px !important;       /* Rounded Corners */
    
    /* Size */
    padding: 10px 24px !important;       
    height: auto !important;
    
    /* Font */
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    
    /* Alignment */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

/* Hover Effect */
.site-navigation #mega-menu-menu-1 > li#mega-menu-item-261 > a.mega-menu-link:hover {
    background-color: #0f356b !important; /* Slightly darker on hover */
    color: #ffffff !important;
}

/* Remove any default theme underlines/borders on this specific button */
.site-navigation #mega-menu-menu-1 > li#mega-menu-item-261 > a.mega-menu-link:before,
.site-navigation #mega-menu-menu-1 > li#mega-menu-item-261 > a.mega-menu-link:after {
    display: none !important;
}

/* --- HEADER LAYOUT (3 Columns) --- */

/* 1. Force the inner header to be a Flex Row */
.header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;
}

/* 2. Make the Desktop Menu stretch to fill space */
/* This pushes the button to the far right */
.header-inner .site-navigation {
    margin: 0 20px; /* Space around the menu */
    width: auto !important;
}

/* 3. BUTTON STYLING */
.report-issue-btn {
    background-color: #00498B;
    padding: 10px 24px;
    border-radius: 10px;
	border: 1px solid #00498B;
    white-space: nowrap;
    display: inline-block;
    transition: background 0.3s ease;
	color: #FFF;
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	text-decoration: none;
}

.report-issue-btn:hover {
    background-color: #fff;
	color: #00498B;
	border: 1px solid #00498B;
}

/* --- RESPONSIVE VISIBILITY LOGIC --- */

/* DESKTOP (Width > 1024px) */
@media (min-width: 1025px) {
    /* Hide the "Report" link inside the Mega Menu list (avoid duplicate) */
    /* Use the ID from your previous code: #mega-menu-item-261 */
    #mega-menu-item-261 {
        display: none !important;
    }
}

/* MOBILE / TABLET (Width <= 1024px) */
@media (max-width: 1024px) {
    /* Hide the hardcoded button container */
    .header-cta-desktop {
        display: none !important;
    }
    
    /* Ensure the Menu Item version IS visible inside the mobile drawer */
    #mega-menu-item-261 {
        display: block !important;
    }
}

/* MEGA MENU */
#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link{font-weight:600 !important;}

.mega-menu-item > .mega-sub-menu{position:fixed !important;top:78px !important;left:0 !important;width:100vw !important;}
.logged-in .mega-menu-item > .mega-sub-menu{top:110px !important;}

/* FOOTER */
footer.site-footer{max-width:100% !important;background-color:#F9F9F9;padding:0;overflow:hidden;}
footer.site-footer .top-div{background-color:#F9F9F9;padding:40px 20px 20px;}
footer.site-footer h2{font-size:12px;color:#148DFB;margin:0 0 20px;}
.footer-calculators-list-div{font-size:0;margin:0 -10px;}
.footer-calculators-list-div .single-calculator-div{display:inline-block;vertical-align:top;width:calc((100% - 80px) / 4);margin:0 10px 20px;}
.footer-calculators-list-div .single-calculator-div h3{font-size:10px;font-weight:600;color:#0F2855;line-height:1.5;margin:0 0 5px;}
.footer-calculators-list-div .single-calculator-div h3 a{color:#0F2855;text-decoration:none;}
.footer-calculators-list-div .single-calculator-div h3 a:hover {color:#148dfb;}
.footer-calculators-list-div .single-calculator-div p{font-size:10px;color:#364156;margin:0 0 10px;}
.footer-calculators-list-div .single-calculator-div :last-child{margin:0;}
footer.site-footer .bottom-div{background-color:#F9F9F9;border-top:1px solid #D9D9D9;border-bottom:1px solid #D9D9D9;padding:15px 0;}
footer.site-footer .bottom-div .container{display:flex;justify-content:space-between;}
footer.site-footer .footer-logo-div img{height:46px;width:auto;}
footer.site-footer .bottom-div .footer-menu-div .site-navigation ul li{font-size:12px;color:#0F2855;margin:0 10px;}
footer.site-footer .bottom-div .footer-menu-div .site-navigation ul li a{color:#0F2855;text-decoration:none;padding:0 !important;}
footer.site-footer .bottom-div .copyright-div{display:flex;align-items:center;}
footer.site-footer .bottom-div .copyright-div p{margin:0;font-size:11px;color:#6C757D;}



@media screen and (max-width:2560px){
	.site-header .header-inner,
	.e-con>.e-con-inner,
	.container{
		max-width: 1560px !important;
	}

	.site-header .header-inner {
		padding: 0px 60px;
	}

	.calculators-list-div .single-calculator-div .text-div p {
		font-size: 14px !important;
	}

	.calculators-list-div .single-calculator-div:nth-child(3) .text-div p, .calculators-list-div .single-calculator-div:nth-child(4) .text-div p {
		font-size: 16px !important;
	}

} 

@media screen and (max-width:1520px){
	.site-header .header-inner,
	.e-con>.e-con-inner,
	.container{
		max-width: 1440px !important;
	}

} 

@media screen and (max-width:1440px){
	.site-header .header-inner,
	.e-con>.e-con-inner,
	.container{
		max-width: 1320px !important;
	}

} 

@media screen and (max-width:1280px){
	.site-header .header-inner,
	.e-con>.e-con-inner,
	.container{
		max-width: 1140px !important;
	}

} 

/* 1. Hide the Mega Menu Toggle visually, but keep it clickable for JS */
.mega-menu-toggle {
    display: block !important; /* Must be block for clicks to work */
    opacity: 0 !important;     /* Invisible */
    position: absolute !important; 
    top: 0; 
    left: 0; 
    height: 0; 
    width: 0;
    pointer-events: none;      /* User can't accidentally click it */
    overflow: hidden;
}

/* 2. Ensure the Theme's container is open so the Mega Menu exists in the DOM */
@media only screen and (max-width: 1024px) {
    .site-navigation-dropdown {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: 0 !important; /* Hide the container height */
        overflow: visible !important; /* Allow the popup to spill out */
        position: absolute;
    }
}

@media only screen and (max-width: 768px) {
    #mega-menu-wrap-menu-1 .mega-menu-toggle ~ button.mega-close:before {
		display: none !important;
	}
}

@media only screen and (max-width: 768px) {
    
    /* 1. The Closed State (Off-screen Left) */
    #mega-menu-wrap-menu-1 .mega-menu-toggle + #mega-menu-menu-1 {
        flex-direction: column;
        flex-wrap: nowrap;
        background: #fff;
        padding: 0px;
        display: flex;
        position: fixed;
        width: 100%;
        max-width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        top: 0;
        box-sizing: border-box;
        left: 0; 
        right: auto; 
        transform: translateX(-100%);
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 9999999999;
        overscroll-behavior: contain;
        visibility: hidden;
    }

    /* 2. The Open State (Slide In) */
    /* This targets the menu when the 'off-canvas-open' class is added to the HTML/Body */
    .mega-menu-menu-1-off-canvas-open #mega-menu-wrap-menu-1 .mega-menu-toggle + #mega-menu-menu-1 {
        transform: translateX(0); /* Slide back to 0 */
        visibility: visible;
		border-top: 1px solid #EAEAEA;
    }

	footer.site-footer .bottom-div .container{
		display:flex;
		justify-content:space-between;
		flex-wrap: wrap;
	}

	footer.site-footer .bottom-div .footer-menu-div .site-navigation ul li:first-child,
	footer.site-footer .bottom-div .footer-menu-div .site-navigation ul li:last-child {
		margin: 0 ;
	}

}

@media screen and (max-width:767px) {
	footer.site-footer .top-div {
		background-color:#F9F9F9;
		padding:40px 20px 20px;
	}

	footer.site-footer .bottom-div{
		padding:15px 20px;
	}


	.site-footer:not(.dynamic-footer) {
		padding-inline-start: 0px !important;
		padding-inline-end: 0px !important;
	}

	.mega-menu-columns {
		flex-direction: column;
		padding: 0 !important;
	}
	
	.mega-menu-col {
		padding: 0 !important;
	}

	#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link{
		padding: 0 !important;
        border-bottom: 1px solid #148DFB33;
        margin: 0 20px !important;
	}


	#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-megamenu > ul.mega-sub-menu {
		position: static !important;
	}

	#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
		padding: 10px !important;
	}

	#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link {       
		border-bottom: 1px solid #148DFB33;
	}

	li.mega-menu-column.mega-menu-columns-4-of-12.mega-menu-clear {
		display: none !important;
	}
	
	.site-header .header-inner .site-branding .site-logo img {
		height: 32px;
	}

	.site-header .header-inner {
		padding-inline-end: 20px !important;
        padding-inline-start: 20px !important;
	}

	.site-navigation-toggle-holder {
		padding: 0 !important;
	}

	.site-navigation-toggle-holder .site-navigation-toggle {
		background-color: transparent !important; 
	}

    .footer-calculators-list-div .single-calculator-div{display:inline-block;vertical-align:top;width:calc((100% - 80px) / 2);margin:0 10px 20px;}

}

.site-main.post-906.page .page-header {
    display: none;
}

.wpcf7-not-valid-tip{font-size:14px;}
.submit-div{position:relative;}
.wpcf7-spinner{margin:0;position:absolute;top:calc(50% - 8px);left:calc(50% + 65px);}
.wpcf7 form.sent .wpcf7-response-output{color:#000;margin:10px;padding:10px;}