/* Hide the entire header site-wide */
.header-inner {
    display: none !important;
}
/* Hide footer everywhere */
#site-footer {
    display: none !important;
}
/* Hide all footer inner content (widgets, search, posts, archives, categories) */
.footer-inner {
    display: none !important;
}
/* Overlay menu container */
.overlay-menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto; /* let height be determined by logo */
  padding: 20px 40px;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* top-aligned container */
  background-color: none;
}
/* Desktop logo */
.menu-left .logo-desktop img {
  height: 20vw !important; /* desktop size */
  width: auto !important;
	transform: rotate(15deg) translateY(-50px);
}

/* Mobile logo */
.menu-left .logo-mobile img {
  height: 150px !important; /* mobile size */
  width: auto !important;
}

/* Show/hide logos */
.logo-mobile {
  display: none !important;
}

@media (max-width: 768px) {
  .logo-desktop {
    display: none !important;
  }
  .logo-mobile {
    display: block !important;
  }
}


/* Right-side menu links */
.menu-right {
  display: flex;
  gap: 32px;
  /* Align links to top of the logo */
  margin-top: 0; 
  align-self: flex-start;
}

/* Hamburger */
.hamburger {
  display: none; /* desktop hidden */
  align-self: flex-start; /* align with top of logo */
  cursor: pointer;
}

/* Menu links styling */
.menu-right a {
  font-size: 18px;
  font-weight: 500;
  color: rgb(255,50,50);
  text-decoration: none;
  transition: color 0.2s ease;
}

.menu-right a:hover {
  color: rgb(255,100,100);
}

/* Mobile menu */
@media (max-width: 768px) {
  .menu-right {
    display: none;
  }
  .hamburger {
    display: flex;
  }
}

#loadingScreen {
  position: absolute;
  inset: 0;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
  transition: opacity 0.6s ease;
}

.loader {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255,50,50,0.2);
  border-top: 4px solid rgb(255,50,50);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.menu-icon {
  width: 50px;
  height: 50px;
  stroke: rgb(255,255,0); /* for lines */
  fill: none;           /* usually none for hamburger */
}