/* =========================
   GLOBAL BASE (fix “everything feels small”)
========================= */

body {
  font-size: 18px;
  font-family: "Inter", Arial, sans-serif;
}

/* =========================
   HEADER WRAPPER (GLASS STYLE)
========================= */

.header {
  background: rgba(31, 42, 46, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow: 0 3px 14px rgba(0,0,0,0.18);

  padding: 14px 0;
}

/* layout */
.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 28px;
}

/* =========================
   BRAND (LOGO + TEXT)
========================= */

.header__brand {
  display: flex;
  align-items: center;
  gap: 12px;

  text-decoration: none;
}

/* avocado icon */
.header__brandIcon {
  width: 56px;
  height: 56px;
  object-fit: contain;

  transition: transform 0.2s ease;
}

.header__brand:hover .header__brandIcon {
  transform: scale(1.05);
}

/* brand text */
.header__brandText {
  font-size: 2rem;
  font-weight: 500;   /* light, not bold */
  letter-spacing: 1.5px;
  text-transform: uppercase;

  color: #ffffff;

  display: flex;
  align-items: baseline;
  gap: 6px;
}

/* LIST part */
.header__brandText span {
  font-size: 2rem;
  font-weight: 500;
  color: #9ad0c2;
  letter-spacing: 2px;
}

/* =========================
   NAV MENU
========================= */

.header_menu {
  display: flex;
  align-items: center;
  gap: 18px;

  list-style: none;
  margin: 0;
  padding: 0;
}

/* =========================
   NAV ITEMS
========================= */

.header__menuItemlogo,
.header__menuItemlogo2 {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 8px 12px;
  border-radius: 10px;

  font-size: 1.5rem;
  font-weight: 500;

  text-decoration: none;

  color: #9aa7ad; /* default grey */

  transition: all 0.2s ease;
}

/* icons */
.header__menuItemlogo img,
.header__menuItemlogo2 img {
  width: 50px;
  height: 50px;
  object-fit: contain;

  transition: transform 0.2s ease, filter 0.2s ease;
}

/* hover effect */
.header__menuItemlogo:hover,
.header__menuItemlogo2:hover {
  color: #ffffff;
}

.header__menuItemlogo:hover img,
.header__menuItemlogo2:hover img {
  transform: translateY(-1px);
}

/* =========================
   ACTIVE STATE (CURRENT PAGE)
========================= */

.header__menuItemlogo2 {
  color: #ffffff;
  background: rgba(255,255,255,0.08);
}

/* active icon slightly brighter */
.header__menuItemlogo2 img {
  filter: brightness(1.15);
}

/* =========================
   REMOVE MOBILE CHECKBOX (IMPORTANT)
========================= */

#responsive-menu,
.toggle-menu {
  display: none !important;
}

/* =========================
   SAFETY OVERRIDES (prevents old CSS shrinking things)
========================= */

.header img {
  max-width: none;
}






.logout-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.4);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.logout-btn:hover {
    background: rgba(255,255,255,0.15);
    border-color: white;
}

.header__brand {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.header__brandLogo {
    height: 50px;
    width: auto;
    display: block;
}

.header__brandLogo {
    height: 70px;
    margin-left: 12px;
}

/* =========================
MOBILE NAVIGATION
========================= */
/* =========================
   MOBILE NAVIGATION
========================= */

@media (max-width: 800px) {

    /* Header uses the full phone width */
    .header .container {
        display: block !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 14px !important;

        box-sizing: border-box;
    }


    /* Logo gets its own row */
    .header__brand {
        display: flex !important;

        width: 100% !important;

        margin: 0 0 12px 0 !important;
    }

    .header__brandLogo {
        height: 50px;
        width: auto;

        margin: 0 !important;
    }


    /* Navigation gets a completely separate row */
    .header__nav {
        display: block !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        position: static !important;
    }


    /* Hidden checkbox */
    #responsive-menu {
        display: none !important;
    }


    /* MENU BUTTON */

    .toggle-menu {
        display: flex !important;

        width: 100% !important;

        align-items: center;
        justify-content: space-between;

        padding: 12px 14px;

        box-sizing: border-box;

        color: white;
        background: rgba(255,255,255,0.08);

        border-radius: 8px;

        cursor: pointer;
    }

    .toggle-menu span {
        font-size: 16px;
        font-weight: 500;
    }


    /* Hamburger */

    .toggle-menu__lines,
    .toggle-menu__lines::before,
    .toggle-menu__lines::after {
        display: block;

        width: 24px;
        height: 2px;

        background: white;
    }

    .toggle-menu__lines {
        position: relative;
    }

    .toggle-menu__lines::before,
    .toggle-menu__lines::after {
        content: "";
        position: absolute;
        left: 0;
    }

    .toggle-menu__lines::before {
        top: -7px;
    }

    .toggle-menu__lines::after {
        top: 7px;
    }


    /* MENU CLOSED */

    .header_menu {
        display: none !important;

        width: 100% !important;

        margin: 8px 0 0 0 !important;
        padding: 0 !important;

        position: static !important;

        list-style: none;
    }


    /* MENU OPEN */

    #responsive-menu:checked + .toggle-menu + .header_menu {
        display: block !important;
    }


    /* Each item gets a full row */

    .header__menuItem {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .header__menuItemlogo,
    .header__menuItemlogo2 {
        display: flex !important;

        width: 100% !important;

        align-items: center;

        padding: 10px 12px !important;

        box-sizing: border-box;

        font-size: 16px !important;
    }


    /* Smaller mobile icons */

    .header__menuItemlogo img,
    .header__menuItemlogo2 img {
        width: 36px !important;
        height: 36px !important;

        flex-shrink: 0;
    }


    /* User greeting */

    .header__menuItem > span {
        display: block;

        padding: 10px 12px;

        color: white;
    }


    .logout-btn {
        margin: 4px 12px 12px;
    }
}