/* reset */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* global variables */
:root{
    /* colors */
    --color-background: #FFFFFF;
    --color-primary: #0072C6;
    --color-accent: #FF6A00;
    --color-text-primary: #333333;
    --color-text-secondary:#555555;
    --color-text-inverse: #FFFFFF;
}

html{
    font-size: 16px;
    font-family: "Segoe UI", "Roboto", "San Francisco", "Ubuntu", "Cantarell", "DejaVu Sans", sans-serif;
    scroll-behavior:smooth;
    /* color-scheme: */
    /* dark-ligh-mode */
}

body{
    background-color: var(--color-background);
    color: var(--color-text-primary);
    line-height: 1.5;
    /* forms color */
    accent-color: var(--color-primary);
    caret-color: var(--color-primary); 
}

/* headlines and text */
h1 { font-size:3.051rem; line-height:1.2; font-weight:700; margin:0 0 1rem 0; }
h2 { font-size:3.051rem; line-height:1.25; font-weight:700; margin:0 0 0.9rem 0; }
h3 { font-size:2.441rem; line-height:1.3; font-weight:600; margin:0 0 0.8rem 0; }
h4 { font-size:1.953rem; line-height:1.35; font-weight:600; margin:0 0 0.7rem 0; }
h5 { font-size:1.562rem; line-height:1.4; font-weight:500; margin:0 0 0.6rem 0; }
h6 { font-size:1.25rem; line-height:1.4; font-weight:500; margin:0 0 0.5rem 0; }
p { font-size:1rem; line-height:1.5; margin:0 0 1rem 0; }
small { font-size: 0.8rem; line-height: 1.4; margin:0 0 0.8rem 0; color: var(--color-text-secondary); }

/* links */
a { color:var(--color-text-primary); text-decoration:none; }
a:hover { text-decoration:underline; }

header { background:#eee; padding:1rem; position:relative; font-family:sans-serif; }

/* NAVBAR Desktop */
nav {
  display:flex; /* horizontal */
  justify-content:space-between; /* logo left, menu right */
  align-items:center;
}

nav .logo {
  font-size:1.5rem;
  text-decoration:none;
  color:black;
}

nav ul {
  list-style:none; /* remove bullets */
  display:flex; /* horizontal menu */
  gap:1rem; /* spacing */
}

nav ul li ul {
  display:none; /* hide dropdowns */
  position:absolute;
  top:100%;
  left:0;
  background:#ddd;
  min-width:200px;
  padding:0.5rem 0;
}

nav ul li:hover > ul {
  display:block; /* show dropdown on hover */
}

nav ul li ul li a {
  display:block;
  padding:0.5rem 1rem;
  text-decoration:none;
  color:black;
}

/* Checkbox hidden */
#hamburger { display:none; }

/* Hamburger icon Desktop hidden */
.hamburger {
  display:none;
  font-size:2rem;
  cursor:pointer;
  position:absolute;
  top:1rem;
  right:1rem;
}

/* ===== MOBILE ===== */
@media(max-width:768px){

  /* Show hamburger */
  .hamburger { display:block; }

  /* Stack nav vertically */
  nav {
    flex-direction:column;
    align-items:flex-start;
    gap:1rem;
  }

  /* Menu hidden initially */
  nav ul {
    display:none;
    flex-direction:column;
    width:100%;
    margin-top:1rem;
  }

  /* Toggle menu on click */
  #hamburger:checked ~ nav ul {
    display:flex;
  }

  /* Mobile dropdowns stacked */
  nav ul li ul {
    position:static;
  }
}