/*
Theme Name: Lallabyzzz Exact
Theme URI: https://lallabyzzz.com
Author: Lallabyzzz
Description: The original pastel pixel Lallabyzzz site, rebuilt as editable Gutenberg blocks.
Version: 4.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: lallabyzzz
*/

html, body { margin: 0; }
.site-main > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.wp-block-group { box-sizing: border-box; }
.topbar nav > ul.menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(13px,1.8vw,30px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.topbar nav > ul.menu > li { position: relative; margin: 0; padding: 0; white-space: nowrap; }
.topbar .sub-menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 28px);
  right: 0;
  width: 210px;
  padding: 8px;
  margin: 0;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--berry);
  box-shadow: 7px 7px var(--berry);
  display: grid;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: .18s steps(3);
}
.topbar .sub-menu a { display: block; padding: 13px; border-bottom: 1px solid var(--line); font-size: 11px; }
.topbar .menu-item-has-children:hover > .sub-menu,
.topbar .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-toggle { display: none; }
.lalla-extra-content { padding: 70px 8vw; background: var(--paper); }

@media (max-width: 1100px) {
  .topbar { grid-template-columns: 1fr auto auto; padding-inline: 24px; }
  .mobile-toggle { display: block; border: 1px solid var(--berry); background: var(--paper); padding: 10px 14px; }
  .topbar nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--cream); border-bottom: 1px solid var(--pink); padding: 14px 24px; }
  .topbar nav.open { display: block; }
  .topbar nav > ul.menu { flex-direction: column; align-items: stretch; gap: 0; }
  .topbar nav > ul.menu > li > a { display: block; padding: 11px 4px; }
  .topbar .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; width: auto; box-shadow: none; margin-left: 14px; }
}
@media (max-width: 620px) { .mini-cta { display: none; } }