/* WP-specific overrides — kept separate from style.css (that file is a
   straight copy of the static site's; this one is for markup differences
   that only exist because WordPress generates them, e.g. wp_nav_menu()). */

/* wp_nav_menu() wraps items in <ul><li>; the static site's .main-nav was a
   flex row of bare <a> tags. Collapsing the <ul> out of the box tree makes
   the <li>s the direct flex children instead, so the existing .main-nav
   { display:flex; gap:... } rule still lays them out identically. */
.main-nav ul {
  display: contents;
}
/* The <li>s go too, for a second reason: wp_nav_menu() gives each one the
   class "menu-item", which is also the Menu page's dish-row class in
   style.css (grid, 11px padding, a thin navy line underneath). On a <li>
   with display:contents none of that is drawn, and each <a> is a flex child
   exactly as on the static site. */
.main-nav li {
  list-style: none;
  display: contents;
}

/* The boxes under the main card on Bar and Restaurant: an empty box isn't printed, and the row's
   class follows how many are left (inc/page-content.php). style.css has thirds and cols-2; a single
   box takes the whole row. Phones stack them all in one column either way. */
.feature-row.cols-1 {
  grid-template-columns: 1fr;
}

/* Menu's two links into the booklet, À la carte and the children's menu (inc/menu-admin.php,
   Makela 12 Oct). On a phone they're rows under Menu, set in: the lists stay out of the box tree as
   above, so the links fall into the column with the rest. On a computer, a list that drops down
   from Menu under the pointer, or opened by the small arrow beside Menu, for a touch screen or the
   keyboard (assets/js/menu-parts.js). */
@media (max-width: 760px) {
  .main-nav .sub-menu a { padding-left: 22px; font-size: 1.35rem; }
  .main-nav .sub-toggle { display: none; }
}
@media (min-width: 761px) {
  /* Menu's <li> takes a box again, to hold the list, without the dish-row look its "menu-item"
     class would give it */
  .main-nav li.menu-item-has-children {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0;
    border: 0;
    gap: 0;
  }
  .main-nav .sub-menu {
    display: block;
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    z-index: 60;
    min-width: 210px;
    margin: 0;
    padding: 8px 0;
    transform: translateX(-50%);
    background: rgba(6, 25, 67, .97);
    border: 1px solid rgba(214, 163, 57, .45);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(6, 15, 35, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, visibility .15s ease;
  }
  /* a bridge over the gap, so the pointer can go from Menu down to the list without it closing */
  .main-nav .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
  .main-nav li.menu-item-has-children:hover > .sub-menu,
  .main-nav li.menu-item-has-children.is-open > .sub-menu,
  .main-nav .sub-menu:focus-within { opacity: 1; visibility: visible; }
  /* the arrow: opens and closes the list without the pointer */
  .main-nav .sub-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 40px;
    margin: 0 -6px 0 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 6px;
    color: var(--gold-light);
    cursor: pointer;
  }
  .main-nav .sub-toggle::before {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    transition: transform .2s ease;
    filter: drop-shadow(0 1px 2px rgba(6, 15, 35, .9));
  }
  .main-nav li.is-open > .sub-toggle::before { transform: translateY(2px) rotate(225deg); }
  .main-nav .sub-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .main-nav .sub-menu li { display: block; }
  .main-nav .sub-menu a {
    display: block;
    padding: 9px 22px;
    font-size: 1.2rem;
    white-space: nowrap;
    text-shadow: none;
  }
  .main-nav .sub-menu a::after { left: 22px; bottom: 5px; }
  .main-nav .sub-menu a:hover::after { right: 22px; }
}

/* The photo slideshows beside each page's intro can be swiped (assets/js/carousel.js marks them
   .is-swipeable): a sideways move is theirs, up or down still scrolls the page and two fingers
   still zoom, and a photo can't be
   dragged out or long-pressed into a menu instead */
.carousel.is-swipeable { touch-action: pan-y pinch-zoom; cursor: grab; -webkit-user-select: none; user-select: none; }
.carousel.is-swipeable.is-dragging { cursor: grabbing; }
.carousel.is-swipeable img { pointer-events: none; -webkit-user-drag: none; -webkit-touch-callout: none; }

/* The heading over the row of photos on Bar, Restaurant and Events ("The Function Room Upstairs")
   sits on the background photo, not on a card: style.css's teal was nearly invisible there (Peter,
   2 Nov). The light gold and shadow the other text on the photo has. */
.photo-grid-head .eyebrow {
  color: var(--gold-light);
  text-shadow: 0 1px 6px rgba(6, 15, 35, .85), 0 1px 2px rgba(6, 15, 35, .9);
}

/* The calendar in the Functions enquiry's date (assets/js/date-pick.js): the text field keeps room
   at its end for the icon, and the invisible date input over the icon takes the tap. */
.date-pick { position: relative; display: block; }
.enquire-form .date-pick input[type="text"] { padding-right: 46px; }
.date-pick-icon {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 22px;
  height: 22px;
  color: var(--teal);
  pointer-events: none;
}
.enquire-form .date-pick-native {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46px;
  height: 46px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
.enquire-form .date-pick-native::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; cursor: pointer; }