/* Insert here the main colour choices for the project
60% = 
30% = 
10% = 
*/


/* ================================ GLOBAL SETTINGS ==================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* These are settings for the tab-function */
:focus-visible {
    outline: ; /* Give this formula: 3px solid #colour */
    outline-offset: 2px; /* Check if it looks nice */
}

/* Global settings for body */
body {
    font-family: ;
    font-size: 16px; /* WCAG 2.2 complaiant and this will be the parent of all the rem that follow for good scaling */
    color: ;
    background-color: ;
}

main {
    padding-bottom: ; /* Depends on the size of the Footer, but gives that air between footer and main content */
}



/* ==================================== TOP NAV ===================================== */

.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: ; /* a color value */
  padding: ; /* a rem value */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* ---------- LEFT SIDE ---------- */
.nav-left {
  display: flex;
  align-items: center;
  gap: ; /* a rem value */
}

.logo {
  height: 70px;
  object-fit: contain;
}

.company-name {
  font-size: 1.4rem;
  font-weight: 600;
}

/* ---------- RIGHT SIDE ---------- */
.nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem; /* Check how things look on both mobile and desktop */ 
}

/* ----- Styling for any fontawesome icons ----- */





/* -------------- Styling for menu, mobile first always ----------- */

/* Basic nav styling */
.nav-menu {
  list-style: none;
  display: flex;
  gap: 2rem;
}

.nav-menu li {
  position: relative;
}

.nav-menu a {
  text-decoration: none;
  color: black;
}

/* Hide dropdown initially */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  background: white;
  padding: 1rem;
  min-width: 150px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Show on hover */
.dropdown:hover .dropdown-menu {
  display: block;
}


/* -------------- Desktop menu (769px for mobile and tablet, 1024px for desktop classic) ------------------- */

@media (min-width: 1024px) {
    .menu {

    }

    /* Here will be fx .nav-right with a gap value and the styling for the menu when all visible on desktop */

    .hamburger {
    display: none;
    }

}


/* ==================================== MAIN ===================================== */




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


/* -------------- Desktop menu (769px for mobile and tablet, 1024px for desktop classic) ------------------- */

@media (min-width: 1024px) {
    
}