/* Catering Shop mega menu, option A (2026-10-14): Shop by category (photo tiles) | Dietary needs (lunch and morning
   tea groups), with Ordering help as a strip along the bottom.
   Loaded on every page by mu-plugin wh-shop-menu.php. The desktop menu is #menu-main-menu; the phone drawer
   repeats the same item ids as #menu-main-menu-1, so desktop rules are scoped to #menu-main-menu. */

@media (min-width:993px){
  /* categories | dietary needs, with ordering help as a strip across the bottom (moved there 14 Oct when the dietary
     column split into lunch and morning tea grew it past a 768px-high screen) */
  #menu-main-menu #nav-menu-item-6991 > .sub-menu-wrapper > .container > ul.sub-menu{display:grid;grid-template-columns:minmax(0,1fr) 340px;align-items:start;padding-bottom:24px}
  #menu-main-menu #nav-menu-item-6991 > .sub-menu-wrapper > .container > ul.sub-menu > li{width:auto !important;margin:0}
  #menu-main-menu #nav-menu-item-6991 li.wh-shop-cats{grid-column:1;grid-row:1;padding:0 30px 0 40px !important;border-left:0 !important}
  #menu-main-menu #nav-menu-item-6991 li.wh-shop-diet{grid-column:2;grid-row:1;padding:0 30px 0 26px !important}
  #menu-main-menu #nav-menu-item-6991 li.wh-shop-help{grid-column:1 / span 2;grid-row:2;display:flex;align-items:baseline;gap:16px;margin-top:18px !important;padding:14px 40px 0 !important;border-left:0 !important;border-top:1px solid #e2e2e2 !important}

  /* the "Catering Shop" pill in the nav bar: brand red instead of the theme's hard-coded grey #444 (Andy 15 Oct) */
  #menu-main-menu > li.menu-button > a span{background:#b90000}
  #menu-main-menu > li.menu-button > a:hover span{background:#7a0b0b}

  /* column headings; "Whole menu" sits at the right of the first one */
  #menu-main-menu #nav-menu-item-6991 li.wh-shop-cats > span:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%}
  #menu-main-menu .wh-all{font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:#b90000;text-decoration:none}
  #menu-main-menu .wh-all:hover{text-decoration:underline}

  /* square photo tiles (Andy 14 Oct: 1:1, the category photos are square), four to a row, then the 'Also' line */
  #menu-main-menu li.wh-shop-cats > .sub-menu-wrapper ul.sub-menu{display:flex;flex-wrap:wrap;gap:18px 16px;width:auto}
  #menu-main-menu li.wh-tile{width:calc(25% - 12px);padding:0 !important;border:0 !important;margin:0}
  #menu-main-menu li.wh-tile > a{display:flex !important;flex-direction:column;gap:8px;padding:0 !important;font-size:14px;font-weight:600;line-height:1.3;color:#111}
  #menu-main-menu .wh-ti{display:block;width:100%;aspect-ratio:1/1;border-radius:6px;background:#e9e4da center/cover no-repeat;transition:opacity .2s}
  #menu-main-menu li.wh-tile > a:hover .wh-ti{opacity:.9}
  #menu-main-menu li.wh-tile > a:hover .wh-tn{color:#b90000}
  #menu-main-menu li.wh-also{display:flex;align-items:baseline;width:auto;padding:0 !important;border:0 !important;margin:4px 0 0;font-size:13.5px}
  #menu-main-menu li.wh-also > a{padding:0 !important;font-weight:600;color:#222}
  #menu-main-menu li.wh-also > a:hover{color:#b90000}
  #menu-main-menu li.wh-also-first::before{content:"Also:";color:#888;margin-right:6px}
  #menu-main-menu li.wh-also + li.wh-also{margin-left:-8px}
  #menu-main-menu li.wh-also + li.wh-also::before{content:"\00b7";color:#888;margin-right:8px}

  /* dietary: two labelled groups of buttons, then three plain links */
  #menu-main-menu li.wh-shop-diet > .sub-menu-wrapper ul.sub-menu{display:flex;flex-wrap:wrap;gap:8px;width:auto}
  #menu-main-menu li.wh-chip{width:auto;padding:0 !important;border:0 !important;margin:0}
  #menu-main-menu li.wh-chip > a{display:inline-block !important;padding:6px 11px !important;font-size:13px;line-height:1.3;color:#222;background:#fff;border:1px solid #d9d9d9;border-radius:999px}
  #menu-main-menu li.wh-chip > a:hover{border-color:#b90000;color:#b90000}
  /* section labels (lunch / morning & afternoon tea): each starts its own row, and links to that occasion's range */
  #menu-main-menu li.wh-diet-label{flex:0 0 100%;padding:0 !important;border:0 !important;margin:10px 0 0}
  #menu-main-menu li.wh-shop-diet li.wh-diet-label:first-child{margin-top:0}
  #menu-main-menu li.wh-diet-label > a{padding:0 !important;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#666}
  #menu-main-menu li.wh-diet-label > a:hover{color:#b90000}
  #menu-main-menu li.wh-diet-all,#menu-main-menu li.wh-diet-link,#menu-main-menu li.wh-diet-und{flex:0 0 100%;padding:0 !important;border:0 !important;margin:0}
  #menu-main-menu li.wh-diet-all{margin-top:14px}
  #menu-main-menu li.wh-diet-all > a{padding:0 !important;font-size:13.5px;font-weight:600;color:#b90000}
  #menu-main-menu li.wh-diet-link > a,#menu-main-menu li.wh-diet-und > a{padding:0 !important;font-size:13.5px;color:#444}
  #menu-main-menu li.wh-diet-link > a:hover,#menu-main-menu li.wh-diet-und > a:hover{color:#b90000}

  /* ordering help: one line of links */
  #menu-main-menu li.wh-shop-help > .sub-menu-wrapper{position:static !important}
  #menu-main-menu li.wh-shop-help > .sub-menu-wrapper ul.sub-menu{display:flex !important;flex-wrap:wrap;gap:4px 18px;width:auto}
  #menu-main-menu li.wh-shop-help > .sub-menu-wrapper ul.sub-menu > li{padding:0 !important;border:0 !important;margin:0}
  #menu-main-menu li.wh-shop-help > .sub-menu-wrapper ul.sub-menu > li > a{padding:0 !important;font-size:13.5px;color:#444}
  #menu-main-menu li.wh-shop-help > .sub-menu-wrapper ul.sub-menu > li > a:hover{color:#b90000}
}

/* phone drawer: a plain list; the heading link would hijack the tap that opens the section */
#menu-main-menu-1 .wh-all{display:none}
#menu-main-menu-1 li.wh-diet-all > a{font-weight:600;color:#b90000}
#menu-main-menu-1 li.wh-diet-label > a{font-weight:600}