/*******************************************************
 * Various minor tweaks                                *
 *******************************************************/

/* Hide empty fields rather than leave a placeholder gap.
 * Useful for dealing with featured images when none is present*/
.gk-hide-if-empty:empty{
  display: none;
}

/* News listing featured images*/
figure.wp-block-post-featured-image {
  overflow:hidden;
}

/*Make block editor file links the same size as the rest of the text.*/
.wp-block-file {
  font-size: inherit !important;
}

/* Fix excessive paragraph spacing */
:root :where(.is-layout-flow) > * {
  margin-block-start: 1.4rem !important;
}

.gk-news-listing .is-layout-constrained > p {
  margin-block-start: 1.4rem !important;
}
/*******************************************************
 * End of various minor tweaks                         *
 *******************************************************/

/*******************************************************
 * Format the menu that is used on large screens       *
 * (i.e when the notal menu is NOT used).              *
 * See also special formatting for the home page       *
 *******************************************************/

/* Main menu links */

.gk-menu-row .wp-block-navigation__responsive-container:not(.has-modal-open,.is-menu-open)
ul.wp-block-navigation__container {
  & > li.wp-block-navigation-item {
    & > a, button, span {
      /*Top level menu links. (Displayed in page banner)*/
      color: var(--wp--preset--color--custom-color-2) !important;
      font-weight: normal;
      &:hover {
        font-weight: bold;
        text-decoration: none !important;
      }
    }
  }
  /*Container for first level submenu display*/
  & ul.wp-block-navigation__submenu-container {
    border: 1px solid var(--wp--preset--color--accent-1);
    background-color: var(--wp--preset--color--accent-5) !important;
    right: auto !important;
    width: max-content !important;
    min-width: auto !important;
    /* First level submenu links */
    & > li.wp-block-navigation-item.wp-block-navigation-link > a {
      padding: 5px 10px 5px 10px !important;
      font-weight: normal !important;
      & > span {
        color: var(--wp--preset--color--custom-color-1) !important;
      }
      &:hover {
        font-weight: bold !important;
        text-decoration: none !important;
      }
    }
    /* First level submenu dummy links that are parents for second level submenus */
    & > li.wp-block-navigation-item.has-child {
      background: none !important;
      display: block;
      & button {
        display: inline-block;
        font-weight: normal !important;
        & span {
          color: var(--wp--preset--color--accent-3) !important;
        }
        &:hover{
          font-weight: bold !important;
          text-decoration: none !important;
        }
      }
      & span {
        color: var(--wp--preset--color--accent-3) !important;
      }
      /* Container for second-level submenu display */
      & ul {
        position: relative;
        display: block;
        border: none;
        padding-left: 10px;
        & a {
          color: var(--wp--preset--color--custom-color-1) !important;
        }
      }
    }
  }
  /* Special treatment for the right-most container to keep it on the screen*/
  & > li:last-child > ul.wp-block-navigation__submenu-container {
    left: auto !important;
    right: 0 !important;
  }
}

/*******************************************************
 * End of formatting for the large screen menus        *
 *******************************************************/

/*******************************************************
 * Formatting for login/out button                     *
 *******************************************************/

.gk-menu-row > .wp-block-loginout > a {
  font-weight: normal;
  text-decoration: none;
  &:hover {
    font-weight: bold;
  }
}

/* Home page differences*/
.gk-menu-row.gk-home-menu-row > .wp-block-loginout > a {
  font-weight: bold;
  text-decoration: none;
  &:hover {
    color: black;
  }
}

/*******************************************************
 * End of formatting for login/out button              *
 *******************************************************/

/*******************************************************
 * Special formatting for home page                    *
 *******************************************************/

/* Main header block */
.gk-home-header {
  display: flex;
  flex-direction: row;
  align-items: stretch !important; /* Should cause the left and right columns to have the same height */
    /* Left column */
  & .gk-home-header-col1 {
    display: flex;
    flex-direction: column;
    align-self: auto !important;
      /* The tag line */
    & p {
      margin-top: 5px !important;
    }
      /* Menu row */
    & .gk-home-menu-row {
      margin-top: auto; /* Force the menu to the bottom of the column */
      margin-bottom: 5px;
      width: 100%; /* Stretch the home page menu across the whole left-hand block*/
      color: var(--wp--preset--color--accent-3) !important;
    }
  }
}

/* Home page menu - different colours*/
.gk-menu-row .wp-block-navigation__responsive-container:not(.has-modal-open,.is-menu-open)
ul.wp-block-navigation__container.gk-home-menu {
  & > li.wp-block-navigation-item {
    & > a, button, span {
      color: var(--wp--preset--color--accent-3) !important;
      font-weight: bold !important;
      &:hover {
        color: black !important;
      }
    }
  }
}

/*******************************************************
 * End of special home page formatting                 *
 *******************************************************/

/*******************************************************
 * Settings for home menu on smaller screens           *
 *******************************************************/

/* Default is to show the collapsed (hamburger) menu*/
nav.gk-home-menu {
  & .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex !important;
  }
  & .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
}

/* Show the full menu on larger screens*/
@media (min-width: 1100px) {
  nav.gk-home-menu {
    & .wp-block-navigation__responsive-container-open:not(.always-shown) {
      display: none !important;
    }
    & .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
      display: block !important;
    }
  }
}
/*******************************************************
 * End of settings for home menu on smaller screens    *
 *******************************************************/


/*******************************************************
 * Format the modal menu that is used on small screens *
 *******************************************************/

/*
 * Modal menu container
 */
nav div.wp-block-navigation__responsive-container.has-modal-open.is-menu-open {
  gap: 10px;
  padding-top: clamp(6vh, 6vh, 10vh);
  padding-left: clamp(5vw,15vw,20vw);
  padding-right: clamp(5vw,15vw,20vw);
  color: var(--wp--preset--color--accent-3) !important;
  text-decoration: none;
  background-color: var(--wp--preset--color--accent-5) !important;
  font-size: larger;
  & div.wp-block-navigation__responsive-dialog { /* Button to close modal menu*/
    padding-top: 0px !important;
    & button.wp-block-navigation__responsive-container-close {
      margin-right: 0px;
      color: var(--wp--preset--color--custom-color-1) !important;
    }
  }
  /* Links and buttons*/
  &  a, button {
    padding: 0px !important;
    font-style: normal;
    font-weight: 500;
/*     text-decoration: underline; */
/*     text-decoration-thickness: 1px !important; */
/*     text-underline-offset: .1em; */
    flex-grow: 1;
    text-align: left;
    align-self: flex-start;
    &:hover {
      font-weight: bold;
    }
  }
  /* Plain links*/
  & li.wp-block-navigation-item.wp-block-navigation-link {
    color: var(--wp--preset--color--custom-color-1) !important;
  }
  /*Sub-menu links*/
  & li.wp-block-navigation-item.has-child.open-on-click.wp-block-navigation-submenu {
    color: var(--wp--preset--color--accent-3) !important;
  }
  /* Menu container divs */
  & div.wp-block-navigation__responsive-container-content {
    display: block !important;
    padding-top: 30px !important;
  }
}

/*
 * Menu items container
 */
nav div.wp-block-navigation__responsive-container.has-modal-open.is-menu-open
div.wp-block-navigation__responsive-container-content {

  /* Top level menu list (Home, Schedule etc.)*/
  & ul.wp-block-navigation__container {
    /* Force the ul block below the sub-menu link */
    width: 100%;           /* Forces the UL to take up the full width */
    align-items: flex-start; /* Top-level menu items left justified */
    & li.wp-block-navigation-item {
      flex-direction: row !important;
      flex-wrap: wrap;       /* Allows items to move to the next line */
      justify-content: flex-start; /* Aligns the 'a' and 'button' to the left */
      list-style: none;      /* Removes default bullet points */
      width: 100%;
      /* Handle second and third level dropdown menus */
      &.has-child.open-on-click button.wp-block-navigation-submenu__toggle {
        display: inline-block;
        flex-grow: 1;
        text-align: left;
        align-self:flex-start;
        padding-right: 20px;
        /* Spans. Contain open/close arrows*/
        & + span {
          display: inline-block !important;
/*           color: var(--wp--preset--color--custom-color-1) !important; /* Link colour */
          font-size: x-large;
          padding-right: 20px !important;
          margin-left: -15px;
        }
        /* Submenu list container (Initially hidden)*/
        & + span + ul.wp-block-navigation__submenu-container {
          gap: 5px !important;
          padding-top: 0px !important;
          padding-left: 1rem;
          visibility: hidden; /* Initially */
          opacity: 0;
          max-height: 0;           /* Collapses the space */
          overflow: hidden;
          transition: opacity 0.4s ease, max-height 0.4s ease, visibility 0.4s;
          width: 100%;           /* Forces the UL to take up the full width */
          flex-basis: 100%;
        }
        /* ul below button appears when button in clicked */
        &[aria-expanded="true"] + span + ul {
          visibility: visible !important; /* Make visible */
          opacity: 1;
          max-height: 1000px;      /* Large enough to fit content */
          justify-content: flex-start;
        }
      }
    }
  }
}

/*******************************************************
 * End of small screen menu formatting                 *
 *******************************************************/

/*******************************************************
 * Display Strava icon in footer                       *
 *******************************************************/

a[href*="www.strava.com/clubs/hertfordshire-wheelers"][class*="wp-block-social-link-anchor"] svg {
    display: none
}
a[href*="www.strava.com/clubs/hertfordshire-wheelers"][class*="wp-block-social-link-anchor"] {
    background: transparent;
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    background-image: url("/wp/strava"); }

a.icon[href*="strava.com"] {
    width: 40px !important;
    height: 40px !important;
}


/*******************************************************
 * End of Strava icon in footer                        *
 *******************************************************/

/*******************************************************
 * Format the club run submission form                 *
 *******************************************************/
/*
.acf-fields.acf-form-fields > .acf-field {
  margin: 5px;
  padding: 0px;
  &  > div {
    display: inline-block;
  }
  &  div.acf-label {
    width: 25%;
    text-align: right;
    margin-right: 5px;
  }
  &  div.acf-input {
    width: 40%;
  }
}*/

/*******************************************************
 * End of club run submission form style               *
 *******************************************************/

/*******************************************************
 * Ride schedule formatting                            *
 *******************************************************/

.gk-scroll-block li.wp-block-post.ride {
  /* Edit and Bin buttons only appear when ride is hovered over */
  & div.edit-bin-buttons {
    display: none !important;
    & .edit-ride-btn {
      color: var(--wp--preset--color--custom-color-1) !important;
      var(--wp--preset--color--custom-color-1)
    }
    & .bin-ride-btn {
      color: red !important;
    }
  }
  &:has(div.gk-show-edit-bin-buttons):hover {
    border: 1px solid red;
    & div.edit-bin-buttons {
      display: block !important;
    }
  }
  /* Striping */
  &:nth-child(odd) {
    background-color: #f0f0f0 !important;
  }
}

/*******************************************************
 * End of ride schedule formatting                     *
 *******************************************************/

/*******************************************************
 * Start location details formatting                   *
 *******************************************************/
.embed-responsive iframe {
  height: 70vh;
  width: 100%;
  border: 0;
}

/*******************************************************
 * End of start location details formatting            *
 *******************************************************/

/*******************************************************
 * General table formatting                            *
 *******************************************************/

table:not([class]) {
  background-color: #ffffff !important;
  border: none !important;
  border-collapse: collapse !important;
  & > thead tr {
    background-color: #e0e0e0 !important;
    font-style: bold;
  }
  & > tbody > tr:nth-child(odd) {
    background-color: #f0f0f0 !important;
  }
  & td, th {
    padding: 0.2rem 1.2rem 0.2rem 1.2rem !important;
    border-left: 2px solid #ffffff !important;
    &:first-child {
      border-left: none !important;
    }
    &.gk-ride-description {
      vertical-align: top;
      &:first-child {
        font-weight: bold;
        white-space: nowrap;
        padding-right: 5px;
      }
    }
  }
}

/*******************************************************
 * End of table formatting                             *
 *******************************************************/

/*******************************************************
 * Special formatting for club run points tables       *
 *******************************************************/

body.page-template-points-comp-pages table td {
  &:empty {
    display: none !important;
  }
  padding-left: 0px !important;
  padding-right: 0px !important;
}

/*******************************************************
 * End of special formatting for club run points tables*
 *******************************************************/


/*******************************************************
 * Search list formatting                              *
 *******************************************************/

.gk-search-list {
  padding-left: 40px;
  & li {
    display: list-item;
    list-style-type: disc;
  }
}

/*******************************************************
 * End of search list formatting                       *
 *******************************************************/


/*******************************************************
 * Special CSS for mobiles                             *
 *******************************************************/

@media (max-width: 782px) {

  /*
   * Make the club run table scroll horizontally
   *
   * (Apply the .gk-scroll-block class to the container block)
   */

    /* The container block */
  .gk-scroll-block {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    max-width: 100%;
    display: block;
    white-space: normal;
    padding-bottom: 1rem;
    scrollbar-width: none; /* Firefox */
    /* The content inside (e.g., columns or lists) should be wide enough to scroll */
    & > .wp-block-columns, ul {
      min-width: 800px;
      width: max-content;   /* ensures content expands horizontally */
    }
    &::-webkit-scrollbar {
      display: none;
    }
  }

  /* Wrapper created automatically by JS */
  .gk-scroll-wrapper {
    position: relative;
    overflow: hidden; /* hides fade edges */
  }

  /* The fade elements that JS injects */
  .gk-fade-edge {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    pointer-events: none;
    z-index: 5;
  }

  .gk-fade-left {
    left: 0;
    background: linear-gradient(to right, var(--wp--preset--color--background, #fff), transparent);
    opacity: 0; /* Hidden until needed */
    transition: opacity 0.2s ease;
  }

  .gk-fade-right {
    right: 0;
    background: linear-gradient(to left, var(--wp--preset--color--background, #fff), transparent);
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  /* end of club run table scrolling styles*/

  /*
   * Remove left and right padding on small screens
   */

  .wp-block-post-content.has-global-padding {
    padding: 0px;
  }

  #wp--skip-link--target {
    padding: 0 2%;
  }

  .wp-block-media-text > .wp-block-media-text__content {
    padding: 0 2%;
  }
  /* End of padding formatting */

  /*
   * Tidy up the page header block
   */

  .gk-header-block {
    & .gk-site-title {
      width: 70%;
      text-align: right;
    }
    & div {
      margin-block-start: 0px;
    }
  }

  /* End of header block tidying */

  /*
   * Tidy up the news listing
   */

  /* Put date/time on the left */
  .gk-news-listing {
    & div:has(> time:first-child) {
      text-align: left;
    }
    /* Tighten up paragraphs */
    & p {
    margin-top: 5px;
    margin-bottom: 5px;
    }
  }


  /*
   * Tighten up footer
   */
  footer {
    & > div {
      margin: 0px !important;
      padding: 0px !important;
    }
    & div.is-layout-flex {
        gap: 0 !important;
    }
    & img.custom-logo {
      width: 80px;
    }
  }

  /* End of footer tidying */
}
/*******************************************************
 * End of special CSS for mobiles                      *
 *******************************************************/

/*******************************************************
 * Settings for main menu on smaller screens           *
 *******************************************************/

/* Default is to show the collapsed (hamburger) menu*/
nav.gk-main-menu {
  & .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex !important;
  }
  & .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
}

/* Show the full menu on larger screens*/
@media (min-width: 800px) {
  nav.gk-main-menu {
    & .wp-block-navigation__responsive-container-open:not(.always-shown) {
      display: none !important;
    }
    & .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
      display: block !important;
    }
  }
}

/*******************************************************
 * End of settings for main menu on smaller screens    *
 *******************************************************/