@media print {
    button {
        display: none;
    }

    .container {
        box-shadow: none;
      }

    * {
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }
}

@font-face {
    font-family: 'Standerd';
    src: url('fonts/standerd-light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Standerd';
    src: url('fonts/standerd-regular.ttf') format('truetype');
    font-weight: 400; /* Regular is usually 400 */
    font-style: normal;
}

@font-face {
    font-family: 'Standerd';
    src: url('fonts/standerd-medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Standerd';
    src: url('fonts/standerd-bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

body {
    font-family: 'Standerd', Arial, sans-serif;
    font-weight: 400; /* Default to Regular */    background-color: #fff;
    margin: 0;
    padding: 0;
    height: 940px; /* Ensure body height is 97% of viewport height */
    aspect-ratio: 210 / 297; /* Maintain A4 aspect ratio */
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

h1, h2, h3, p {
    margin: 0;  /* Remove any default margin */
    padding: 0; /* Remove any default padding */
    line-height: 1.4; /* Set consistent line height */
}

h1 {
    font-family: 'Standerd', Arial, sans-serif;
    font-weight:600; /* Bold */
    font-size: 15px;
    color: #323232;
}

h2 {
    font-family: 'Standerd', Arial, sans-serif;
    font-weight: 500; /* Medium */
    font-size: 13px;
    color: #323232;
}

h3 {
    font-family: 'Standerd', Arial, sans-serif;
    font-weight: 300; /* Light */
    font-size: 11px;
    color: #323232;
    text-align: left;
}

p {
    font-family: 'Standerd', Arial, sans-serif;
    font-weight: 400;
    font-size: 8px;
    color: #323232;
}


img {
    display: block;
    margin: 0;
    max-width: 100%;
    height: auto;
}

button {
    padding: 0;
    background-color: #323232;
    color: white;
    border: none;
    border-radius: 0;
    cursor: pointer;
    border-radius: 5px;
    width: 120px;
}

button:hover {
    background-color: #26252c;
}

/* Main container */
.container {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Ensure content spreads out */
    aspect-ratio: 210 / 297; /* Maintain A4 aspect ratio */
    display: flex;
    align-items: flex-start;
    height: 100%; /* Full height of viewport minus some margin */
    padding: 10px;
    box-shadow: 0px 0 0px rgba(0, 0, 0, 0.1); 
}

.techspec-container {
    flex-grow: 0; /* Prevent it from growing to fill available space */
    flex-shrink: 1; /* Allow it to shrink as small as possible */
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)); /* Minimize width per column */
    grid-template-rows: min-content; /* Minimize row height */
    grid-auto-flow: row; /* Ensure rows auto-size */
    gap: 0; /* No gaps between grid items */
    width: 96%;
    margin: 0; /* No extra margin */
    padding: 1% 3%; /* No extra padding */
}

.transparent-spacer {
    flex-grow: 1; /* This allows the spacer to fill available vertical space */
    background-color: transparent; /* Make it transparent */
    margin: 0; /* Remove any margin */
    padding: 0; /* Remove any padding */
}

.footer-container {
    flex-grow: 0; /* Prevent it from growing to fill available space */
    flex-shrink: 1; /* Allow it to shrink as small as possible */
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* Defines six equal columns */
    grid-template-rows: auto; /* Row height adjusts based on content */
    gap: 0;
    width: 94%;
    height: 4%; /* Ensure the height is determined by content */
    padding: 1% 3%;
}

.spacer {
    flex-grow: 1;
    background-color: transparent;
    margin: 0;
    padding: 0;
}

/* Top Row */
.top-row-span {
    grid-column: 1 / span 5;
    min-height: auto;
    flex-shrink: 0; /* Prevent shrinking */
}

.top-row {
    grid-column: 6 / span 1;
    min-height: auto;
    flex-shrink: 0; /* Prevent shrinking */
    margin-top: 8px;
}

/* Title Row */
.title {    
    grid-column: 1 / span 6;
    min-height: auto;
    display: flex;
    justify-content: left;
    align-items: center;
    flex-shrink: 0; /* Prevent shrinking */
    padding: 10px 0 2px 0;

}

/* Full Row */
.full-page {    
    grid-column: 1 / span 6;
    min-height: auto;
    display: flex;
    justify-content: left;
    align-items: center;
    flex-shrink: 0; /* Prevent shrinking */
    padding: 0px 0 2px 0;

}

/* Left and Right Columns */
.left-column, .right-column {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center; /* Vertically centers the content */
}

/* Left and Right Columns */
.left-column {
    grid-column: 1 / span 3; /* Takes up 3 columns */
}

.right-column {
    grid-column: 4 / span 3; /* Takes up the remaining 3 columns */
}

/* Divider */
.divider {
    background-color: rgb(203, 203, 203) !important;
    height: 1px !important;
    display: block !important;
    grid-column: 1 / span 6;
    margin: 4px 0;
}

/* Flexible Images Div */
.images {
    display: flex;
    justify-content: flex-start; /* Align items to the left (or change to space-between if you want them spread out) */
    align-items: center; /* Vertically align items */
    flex-wrap: nowrap; /* Prevent wrapping to the next line */
    gap: 10px; /* Add space between images, adjust as needed */
    grid-column: 1 / span 6;
    min-height: auto;
    flex-shrink: 0; /* Prevent shrinking */
    overflow-x: auto; /* Add horizontal scrolling if necessary */
}

/* Footer div */
.footer-title {
    grid-column: 1 / span 6;
    padding: 0;
    text-align: left;
    margin: 0;
    flex-shrink: 0; /* Prevent shrinking */
}

/* Footer container right column align */
.footer-container .right-column {
    display: flex;
    justify-content: flex-end; /* Aligns flex items to the right */
    align-items: center; /* Vertically centers the content */
    text-align: right; /* Ensures the text is aligned to the right */
}

/* Basic styling for button container */
.button-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: fixed;
    z-index: 1000;
    top: 20px;
    right: 20px;
}

button {
    padding: 10px;
}

/* Menu icon styling */
.menu-icon {
    font-size: 30px;
    cursor: pointer;
    display: none; /* Hide by default on desktop */
}

/* Hide the buttons by default on mobile */
.buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Mobile view adjustments */
@media (max-width: 850px) {
    .button-container {
        display:none;
        top: auto;
        right: auto;
        bottom: 100px;
        left: 50%;
        transform: translateX(-50%);
        align-items: center; /* Center the content */
    }
    
    /* Show the menu icon on mobile */
    .menu-icon {
        display: none;
        position: relative;
        left: 50%;
        transform: translateX(-50%); /* Center the icon */
    }

    /* Initially hide the buttons on mobile */
    .buttons {
        display: none;
    }
}

/* Desktop view - Hide the checkbox completely */
@media (min-width: 769px) {
    #menu-toggle {
        display: none; /* Hide checkbox on desktop */
    }
}