/* index.css  */

/* ───────────────────────────────────────────────────────────── */
/* BASE SETTINGS & REM-BASED TYPOGRAPHY */
/* ───────────────────────────────────────────────────────────── */

html {
    font-size: 100%;           /* 1rem = 16px by default */
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
}
 
body{
	font-size: 1rem;           /* Base body text ~16px (scales with html) */
    height: 100%;
    width: 100%;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;          /* Scrollbar shows only if needed */
    -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */

	/* Safe area insets for iPhones with notches */
    padding-bottom: env(safe-area-inset-bottom);
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* ───────────────────────────────────────────────────────────── */
/* PAGE WRAPPER FLEX LAYOUT (Fixes footer strip issue) */
/* ───────────────────────────────────────────────────────────── */

#page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-content {
    flex: 1;
}

/* ------------------ PRINT ------------------ */

@page {
	size: A4;
	margin: auto;
}

/* ------------------ CONTAINERS ------------------ */

/* full width container */
.container-fluid{
	position: relative;
	width:100%;
	min-height:100%;
	padding:0;					
	margin:0;
	background-color: var(--whitecolor);
	z-index: 0;
}

/* Full-width container */
.container-message {
    width: 100%;
    background: var(--darkbluecolor);
	padding-top: env(safe-area-inset-top, 0px); /* ensures it's not under notch */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
}

/* Menu container */
.container-menu{
	position: relative;
	height: 100%;
	max-width:120rem;
	width:100%; 
	margin-left: auto;
    margin-right: auto;
    margin-top: calc(env(safe-area-inset-top, 0px) + 0rem);  
	min-height: 100%;
	padding:0;   
	z-index: 1;
}

/* Page content container */
.container{
	position: relative;
	max-width:120rem;
	width:100%; 
	margin-left: auto;
    margin-right: auto;
    margin-top: 0rem;  
	min-height: 100%;
	padding:0;   
	z-index: 1;
}

.container-form{											
	position:relative;
	width:100%;
	background-color: var(whitecolor); 
}


/* ------------------ MAIN CONTENT ------------------ */

.main{
	margin: 0 auto; /* Centers the block */
	padding: 3.0rem 2.5rem 3.0rem 3.0rem;
}
	

/* ------------------ UTILITY ------------------ */
 
.myCalculator{		
	height:0.1rem;
	outline:none;
	border:none;
	padding:0;
	margin:0;
	box-sizing:content-box;
	background-color:var(--darkbluecolor);
}

/* keep message bar visible at all times */
#myMessage {
    position: fixed;
    top: 0rem;
    left: 0;
    padding-top: env(safe-area-inset-top); /* accounts for notch */
	width: 100%;
    z-index: 1100;
	box-sizing: border-box;
}

#myFlash {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 2.4rem); /* sits below the message bar */
	left: 0;
    width: 100%;
    z-index: 1000;
}

#myMenu {
    position: relative;
    top: calc(env(safe-area-inset-top) + 2.4rem); 
	left: 0;
    width: 100%;
}

#myCookie{
    position: relative;
    top: calc(env(safe-area-inset-top) + 2.4rem );
	left: 0;
    width: 100%;
}

#myContent, #myFooter {
    position: relative;
    top: calc(env(safe-area-inset-top) + 2.4rem);
	left: 0;
    width: 100%;
}

#myMenu { z-index: 500; }
#myCookie { z-index: 1000; }
#myContent { z-index: 100; }
#myFooter { z-index: 100; }


/* ......................SCROLL BAR.......................*/

/* Scrollbar, vertical and horizontal */
::-webkit-scrollbar {
	width: 0.9rem; 
	height: 0.9rem;
}

/* Scrollbar track */
::-webkit-scrollbar-track {
	background: var(--whitecolor); /* Track color */
}

/* Scrollbar thumb */
::-webkit-scrollbar-thumb {
	background: var(--lightgreycolor); /* Thumb color */
	border-radius: 0.25rem; 
}

/* Thumb hover state */
::-webkit-scrollbar-thumb:hover {
	background: var(--greycolor); 
}


/* ------------------ RESPONSIVE & MOBILE ------------------ */

@media (max-width: 768px) {
 
	html {
        font-size: 93.75%;     /* 1rem ≈ 15px on tablets/small desktops */
    }

	.main {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 2rem;
    }

    .footer-font {
        font-size: 0.9rem;
    }
}

@media screen and (orientation: portrait) {  /* example as/when required */
    .container {
        padding-top: 0rem;
    }
}

@media screen and (orientation: landscape) {  /* example as/when required */
    .container {
        padding-top: 0rem;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 87.5%;      /* 1rem ≈ 14px on mobile, for readability */
    }
}