/*
 * Moo Management style overrides. Loaded after main.css (see functions/head.php).
 *
 * Put new styles here, not in main.scss: the SCSS sources are out of sync with
 * the live main.css, so recompiling main.scss would drop styles the site uses.
 */

/* ---------- Wedding Services: larger package cards ---------- */

/* The cards' short descriptions are still placeholder text, so the strip is hidden.
   Delete this rule to show it again once each Service has a real short description. */
.service_package_grid_wrapper--wedding .pkg-header .pkg-description {
  display: none;
}

/* With the strip gone, the colored title fills the header so one-line titles
   line up with two-line ones, and the info box's own top border is the divider */
.service_package_grid_wrapper--wedding .pkg-header .pkg-title {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 0;
}

/* Phones already show one full-width card at a time, so sizing changes are desktop only */
@media screen and (min-width: 801px) {
  .service_package_grid_wrapper--wedding .pkg-image {
    width: 82%;
  }

  /* Let the package row use more of the screen than the text column */
  .service_package_grid_wrapper--wedding {
    --pkg-row-width: min(1180px, calc(100vw - var(--page--padding) * 2));
    width: var(--pkg-row-width);
    margin-left: calc((100% - var(--pkg-row-width)) / 2);
  }

  .service_package_grid_wrapper--wedding .service_package_grid {
    --padding: 1.25rem;
    --gap: 1.25rem;
  }

  .service_package_grid_wrapper--wedding .pkg-header .pkg-title {
    font-size: 2.5rem;
  }

  .service_package_grid_wrapper--wedding .pkg-header .pkg-description {
    font-size: 1.05rem;
  }

  .service_package_grid_wrapper--wedding .pkg-features dt,
  .service_package_grid_wrapper--wedding .pkg-features dd {
    font-size: 1rem;
  }

  .service_package_grid_wrapper--wedding .cost-number {
    font-size: 2.75em;
  }

  /* "Behind the Magic" sits alone below the three packages: same card width, centered */
  .service_package_grid_wrapper--wedding-extra .service_package_grid {
    width: calc((100% - var(--block--padding) * 2) / 3);
    margin: 0 auto;
  }
}

/* ---------- Main menu ---------- */

/* The menu's gradient text effect clipped letter tails (g, y, p); give it room */
#header_background nav li.menu-item a {
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
}

/* Sub-menus (services > business / weddings): smaller links, shown in the
   menu's pink-to-blue gradient so they read as part of the item above.
   Set the parent/child structure in Appearance > Menus. */
#header_background nav ul.sub-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3em;
  list-style: none;
  margin: 0.35em 0 0.1em;
  padding: 0 0 0 1.1em;
  font-size: calc(var(--h1--size) * 0.5);
}

#header_background nav ul.sub-menu li {
  font-size: 1em;
  line-height: 1;
  list-style: none;
}

#header_background nav ul.sub-menu li.menu-item a {
  font-size: 1em;
  filter: brightness(100%);
}

#header_background nav ul.sub-menu li.menu-item a:hover {
  filter: brightness(80%);
}

@media screen and (max-width: 800px) {
  /* Phone menu is right-aligned with 2.5rem links */
  #header_background nav ul.sub-menu {
    align-items: flex-end;
    padding: 0 1.1em 0 0;
    font-size: 1.25rem;
  }
}