/*
Block Name:   guide-post
Block Class:  wp-block-naughtyhiker-guide-post
Description:  Display formatting for Guide Post
Note:         These styles are loaded *before* editor styles, so that editor-specific styles using the same selectors will take precedence.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Theme overrides
2.0 Text display in a table layout
3.0 List display (bulleted and comma-separated)
9.0 Other
--------------------------------------------------------------*/

/*--------------------------------------------------------------
  Class Names
  -----------
  nh-invisible:     to remove an item from display
  nh-separate:      add space to the left of the text
  nh-copyright:     Copyright notice in the footer
  nh-table:        XXXXXXX
  nh-table-wrapper:  XXXXXX
--------------------------------------------------------------*/



/*--------------------------------------------------------------
1.0 Theme overrides
--------------------------------------------------------------*/

/*.wp-block-naughtyhiker-guide-list {*/
/*  font-size: .9em;*/
/*}*/


.wp-block-naughtyhiker-guide-list ul > li {
  list-style-type: square;
}

.wp-block-naughtyhiker-guide-list a:link, .wp-block-naughtyhiker-guide-list a:visited {
  text-decoration: none;
  color: blue;
  /*font-weight: bold;*/
}

/*.wp-block-naughtyhiker-guide-list figure {*/
  /*display: block;*/
/*  margin: 0;*/
/*  padding: 0;*/
/*  width: 150px;*/
/*  height: 150px;*/
/*  -webkit-margin-before: 0;*/
/*  -webkit-margin-after: 0;*/
/*  -webkit-margin-start: 0;*/
/*  -moz-margin-start: 0;*/
/*  -webkit-margin-end: 0;*/
/*  -moz-margin-end: 0;*/
/*}*/

.wp-block-naughtyhiker-guide-list img {
  width: 150px;
  height: 150px;
}


/*--------------------------------------------------------------
2.0 Text display in a table layout
    This requires a div wrapper holding the table (class=nh-summary-table), which contains additional divs, each representing a row
    Each row holds additional divs, the first of which should be a class=nh-label; these are the table cells
    The table cells are displayed inline
--------------------------------------------------------------*/

/*Format the div wrapper around the table   dothis: is there a way other than a className?*/
/*.wp-block-naughtyhiker-guide-list div {*/
.wp-block-naughtyhiker-guide-list.nh-table-wrapper {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  -webkit-overflow-scrolling-x: touch;
  width: 90vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -45vw;
  margin-right: -45vw;
}

/*Format the list table   */
.wp-block-naughtyhiker-guide-list table {
  display: table;
  border: 0; /* 1px solid #ddd; */
  border-collapse: collapse;
  border-spacing: 0;
  line-height: 1.38;
  margin: 0 0 1.62em;
  width: 100%;
}

/*Format the table header row   */
.wp-block-naughtyhiker-guide-list thead {
  display: table-header-group;
  vertical-align: middle;
  border-color: inherit;
}

.wp-block-naughtyhiker-guide-list thead tr {
  display: table-row;
  background: #eee;
  border-bottom: 1px solid #ddd;
}

.wp-block-naughtyhiker-guide-list tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

/*Format the summary table cells  */
.wp-block-naughtyhiker-guide-list tbody tr {
  display: table-row;
  border-bottom: 1px solid #ddd;
  vertical-align: middle;
  padding: .5em 2px;
  transition: background-color .2s;
}

/*Highlight summary table row on mouseover */
.wp-block-naughtyhiker-guide-list tr:hover {
  background-color: #fcedc4; 
  border-radius: 15px;
  box-shadow: 0 8px 16px 15px rgba(140, 84, 27, 0.2), 0 12px 40px 15px rgba(140, 84, 27, 0.19);
}


.wp-block-naughtyhiker-guide-list td {
  display: table-cell;
  border: 0;
  min-width: 150px;
  /*padding: 1px 2px;*/
}

.wp-block-naughtyhiker-guide-list td > figure {
  width: 150px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}


/*--------------------------------------------------------------
3.0 List display
    This formats lists either bulleted, numbered or comma separated. If the tag is a div the list will be shown inline, comma-separated. If
    the list only contains one item the bullet or number will be omitted. The list style for unordered list is set in (1), Theme Overrides
--------------------------------------------------------------*/

.wp-block-naughtyhiker-guide-list ul, .wp-block-naughtyhiker-guide-list ol {
  margin: 0;
  padding: 0;
}

.wp-block-naughtyhiker-guide-list li {
  margin: 0;
  padding: 0;
  /*padding-left: 20px;*/
  width: 100%;
  list-style-position: inside;
  /*margin-left: 2.1em;*/
}

.wp-block-naughtyhiker-guide-list ul > li:only-child  { 
/*This is hamstrung because some items are misaligned. Better solution?*/
  margin-left: 1em;
}

.wp-block-naughtyhiker-guide-list div > li, .wp-block-naughtyhiker-guide-list span > li, li:only-child  {
  list-style-type: none;
  display: inline;
  margin-left: 0;
}

.wp-block-naughtyhiker-guide-list div > li:not(:last-child):after, .wp-block-naughtyhiker-guide-list span > li:not(:last-child):after { 
  content: ', ';
}

.wp-block-naughtyhiker-guide-list td > a  {
  display: block;
  margin-left: 0;
}

/*--------------------------------------------------------------
9.0 Other
---------------------------------------------------------------*/

/*Hiding when no data available*/
.wp-block-naughtyhiker-guide-list .nh-invisible {
  visibility: collapse;
}

.wp-block-naughtyhiker-guide-list .nh-separate {
  padding-left: 5px;
}

/*Copyright footer*/
.wp-block-naughtyhiker-guide-list .nh-copyright {
  /*margin-top: 50px;*/
  font-size: small;
  display: inline-block;
}

.wp-block-naughtyhiker-guide-list .nh-center-wrapper {
  text-align: center;
}