/* Melola entry page (ADR 0041): Discovery's night sky (.page-home, .sky, .landing from discovery/css/main.css),
   the MELOLA iD mark, one question and one search box. The six destinations sit in a menu behind the
   nine-dot button; the footer shares the sky (draft branding v3.2). */
.melola {
  --melola-navy: #12234a;
  --melola-teal: #1f7a6e;
  --melola-teal-mid: #2a8f94;
  --melola-copper: #c27c5a;
}

/* The mark: silver warming to copper on the night sky, navy on white. */
.melola-logo__name, .melola-logo__id { font-family: 'Montserrat', var(--font); font-weight: 700; }
.melola-logo__name { font-size: 92px; }
.melola-logo__id { font-size: 48px; }
.melola-logo--night .melola-logo__dot { fill: #7ccac5; }
.melola-logo--dark .melola-logo__dot { fill: var(--melola-teal-mid); }

.melola-mark { margin: 0; line-height: 0; }
.melola-mark .melola-logo { width: min(100%, 440px); height: auto; filter: drop-shadow(0 2px 18px rgb(5 21 38 / 0.6)); }
.melola-question { margin: 1.1rem 0 0; color: var(--tagline); font-size: clamp(1.05rem, 2.6vw, 1.3rem); }
.melola-search { margin-top: clamp(20px, 4vw, 30px); text-align: left; }

.melola-actions { margin: 1.4rem 0 0; }
.melola-start {
  border: 1px solid rgb(255 255 255 / 0.3); border-radius: 999px; padding: 0.6rem 1.6rem; cursor: pointer;
  background: rgb(255 255 255 / 0.08); color: #fff; font: inherit; font-size: 0.95rem; font-weight: 600;
}
.melola-start:hover { background: rgb(255 255 255 / 0.16); border-color: rgb(255 255 255 / 0.5); }
.melola-start:focus-visible { outline: 2px solid #8fd3ce; outline-offset: 3px; }


/* The services menu: nine white dots; a faint ring on hover and while open. */
.melola-apps { position: relative; }
.melola-apps__button {
  list-style: none; display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer; color: #fff;
}
.melola-apps__button::-webkit-details-marker { display: none; }
.melola-apps__button:hover, .melola-apps[open] .melola-apps__button { background: rgb(255 255 255 / 0.14); }
.melola-apps__button:focus-visible { outline: 2px solid #8fd3ce; outline-offset: 2px; }
.melola-apps__panel {
  position: absolute; z-index: 5; top: calc(100% + 8px); right: -8px; width: min(300px, calc(100vw - 32px));
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0; padding: 12px; list-style: none;
  background: #0b2240; border: 1px solid rgb(255 255 255 / 0.16); border-radius: 18px;
  box-shadow: 0 18px 50px -12px rgb(0 0 0 / 0.6);
}
.melola-app {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 12px;
  color: #e6eef7; text-decoration: none; font-size: 0.8rem; text-align: center;
}
a.melola-app:hover, a.melola-app:focus-visible { background: rgb(255 255 255 / 0.08); outline: none; }
.melola-app__icon {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgb(93 202 165 / 0.16); color: #9fe1cb;
}
.melola-app__label small { display: block; color: #9db3c8; font-size: 0.7rem; }
.melola-app--soon { opacity: 0.6; }

/* The footer under the same sky: no band of its own and no second mark, one line of light text. */
.melola-footer { position: relative; z-index: 1; background: none; color: rgb(219 230 243 / 0.7); }
.melola-footer a { color: #8fd6d0; }

@media (max-width: 560px) {
  .landing__top .user-nav { gap: 8px; }
  /* The button is not at the right edge on a phone, so the panel is placed against the screen instead. */
  .melola-apps__panel { position: fixed; top: 64px; left: 16px; right: 16px; width: auto; }
}