/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/*
JOURNEYCOMPASS NOTES

*/



.more-pics-overlay {
  position: relative;
  display: inline-block;
}
.more-pics-overlay::after {
  content: "See room photos \1F852";
  position: absolute;
  bottom: 10px;
  right: 0px;
  background-color: rgba(0, 0, 0, 0.7); /* Initial state */
  color: white;
  padding: 10px 20px;
  border-radius: 8px 0px 0px 0px;
  font-size: 1.12rem;
  white-space: nowrap;
  transition: background-color 0.3s ease; /* Smooth transition */
  pointer-events: none; /* This makes the overlay "transparent" to mouse events */
}
.more-pics-overlay:hover::after {
  background-color: rgba(0, 0, 0, 0.9); /* Darker background on hover */
}
/* Mobile styles */
@media screen and (max-width: 768px) {
  .more-pics-overlay::after {
    padding: 7px 14px;
  }
}



/* CSS cirle numbers - style copied from: https://www.authorityhacker.com/how-to-start-travel-blog/ */
/* Work in progress here: https://journeycompass.com/test/ (needs alignment tweaking) */
.list-heading {
  padding-left: 2em;
  position: relative;
}
.list-heading em {
  font-style: normal;
  border: 2px solid #331d0a;
  border-radius: 50%;
  height: 1.5em;
  width: 1.5em;
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  left: 0;
  top: 0;
}
/* End CSS cirle numbers */



strong {font-weight:600} /* Bold pops too much when wheight uses the default 700. Consider removing 700 from the customizer font stack. */


.onyx-poll {--pollWidgetWidth: 100% !important;}


/* Category templates container padding */
.category .site-main {padding:30px 0 65px 0;}
  /* Tablet & mobile */
  @media (max-width: 1024px) {.category .site-main {padding:15px 15px 65px 15px;}}
/* Category templates body text padding */
.category .site-main p {margin-bottom:25px;}
.category .site-main h2 {padding-bottom:10px;}


/* All tables */
.wp-block-table th {text-align:left;}
.wp-block-table td:first-child {font-weight:bold;}
.wp-block-table td, .wp-block-table th {padding-left:0; vertical-align:top;}
.wp-block-table td img {margin-bottom:0px;} /* For S1 Tripadvisor rating IMGs */
.wp-block-table  table, .wp-block-table thead, .wp-block-table td, .wp-block-table th {border: none !important;}

/* Specific tables: first column width */
.restaurants-table td:first-child {width:180px;}
.nightlife-table td:first-child {width:180px;}
.hotel-list-table td:first-child {width:170px;}
.hotel-contact-table td:first-child {width:200px;}


/* All lists */
.entry-content ul {margin-left:20px;}
.entry-content li:not(:last-child) {margin-bottom:10px;}
/* Except lists with the below classes */
  .entry-content .zero-list-margin li:not(:last-child) {margin-bottom:0px;}
  .entry-content .five-list-margin li:not(:last-child) {margin-bottom:5px;}
  #rank-math-toc li:not(:last-child) {margin-bottom:0px;}

/* Icons lists */
/* The icons-list class + one items class are both applied to a core list element (ul) */
ul.icons-list {margin-left:0;}
  .icons-list li {list-style:none; display: flex; align-items:top; /* Vertical text alignment */}
  .icons-list li:before {font-weight:bold; margin-right:15px;}
.plus-items li:before {content:"\002B"; font-size:1.8rem; color:#69BD43;} /* "+" Unicode Character */
.minus-items li:before {content:"\2212"; font-size:1.5rem; color:#e5372b;} /* "-" Unicode Character */
li.arrow-item:before {content:"\02C3"; font-size:1.5rem; color:#69BD43;} /* "-" Unicode Character */


/* Site-wide smooth-scrolling anchors - code taken from: https://generate.support/topic/smooth-scroll-3/ */
html, body {scroll-behavior: smooth;}

/* Back to top button position */
.generate-back-to-top, .generate-back-to-top:visited {bottom: 20px; right: 20px;}

/* Table of contents */
#rank-math-toc {margin-bottom:30px;}
#rank-math-toc ul, #rank-math-toc ol {margin-left:20px; columns: 2; -webkit-columns: 2; -moz-columns: 2;}
@media (max-width: 768px) {#rank-math-toc ul, #rank-math-toc ol {columns:1; -webkit-columns: 1; -moz-columns: 1;}}

/* Anchor scroll margin */
/* Corrensponding support ticket: https://generate.support/topic/sticky-mobile-header-breaking-anchor-scroll-position/#post-72476 */
h2[id], h3[id] {scroll-margin-top:15px;}


/* Affiliate Link styles */
/* Links with a below class assigned to paragraph - needed because Wordpress doesn't support anchor classes */
.afflink a, .afflinkar a {text-decoration:underline;}
/* Links with a below class assigned to anchor - can be added by using 'Edit as HTML' */
a.afflink, a.afflinkar {text-decoration:underline;}
/* Link icon  - for both 'assigned to paragraph' & 'assigned to anchor' */
.afflinkar a:after, a.afflinkar:after {content: "" url('/wp-content/uploads/2018/09/external-link-icon-blue.png'); padding-left:5px;}


/* Content area media bottom margin */
.entry-content img, .category .site-main img, .wp-block-embed__wrapper {margin-bottom:10px;}
  /* Exclude images with this class */
  .no-img-margin, .no-img-margin img {margin-bottom:0px !important;}

/* Wordpress & GenerateBlocks image captions */
figcaption.wp-element-caption, figcaption.gb-headline {
  font-size:1.04rem !important;
  margin-top:-2px !important;
  margin-bottom: 23px;
  text-align:center;
  font-style:italic;
}


/* Remove blue highlight flashes when elements inside the header are tapped */
a, button {-webkit-tap-highlight-color: transparent;}

/* Header bottom border */
/* Alternative selector for when 'Use Navigation as Header' is disabled: .site-header, #mobile-header {border-bottom: 1px solid #e1e1e1;} */
#site-navigation {border-bottom: 1px solid #e1e1e1;}

/* Footer link styles */
.my-footer-navigation ul li {padding-left:10px;}
.my-footer-navigation a:hover {color: #333333 !important;}
.my-footer-affiliate-disclosure a {text-decoration:underline !important;}


/* Leave a Comment & Comment Count headings */
.comment-reply-title, .comments-title {font-size: 1.6rem;}
@media (max-width: 768px) {.comment-reply-title, .comments-title {font-size: 1.4rem;}}

/* Comment author & date > make links invisble gray */
.comment-author a {color: #575757;}
.entry-meta > a {color: #575757;}


/* DESKTOP */
@media (min-width: 1025px) {
  /* Featured image top margin */
  .featured-image {padding-top: 30px;}

  /* Space between featured image and title */
  /* Because GP Customizer > Layout > Container has no setting to adjust this space in isolation */
  .featured-image {margin-bottom: 1.1em !important;}
}

/* TABLET */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Space between featured image and title */
  /* Because GP Customizer > Layout > Container has no setting to adjust this space in isolation */
  .featured-image {margin-bottom: 1.1em !important;}
	
  /* Content padding - Because GP Customizer > Layout > Container > Content Padding has no tablet setting */
  body:not(.full-width-content) .entry-header, body:not(.full-width-content) .entry-content, body:not(.full-width-content) #comments {padding-left: 15px; padding-right: 15px;}
}

/* MOBILE */
@media (max-width: 768px) {
  /* Space between featured image and title */
  /* Because GP Customizer > Layout > Container has no setting to adjust this space in isolation */
  .featured-image {margin-bottom: 0.75em !important;}

  /* Space above first body paragraph */
  /* Mobile setting for: Customizer > Layout > Container > Content Separator */
  body:not(.full-width-content) .entry-content {margin-top: 1.1em !important;}
	
  /* Change homepage title background transparency on mobile */
  .gb-headline:is(.homepage-title-h1, .homepage-title-h2) {background-color: rgba(0, 0, 0, 0.35);}
	
  /* Set mobile menu to overlap content when opened, instead of pushing content down */
  /* Corresponding support ticket: https://generate.support/topic/mobile-menu-overlap-instead-of-push-down-content/ */
  .main-nav > ul {
    background-color: #FFFFFF;    
    position: absolute;
    z-index: 100;  
    right: 0;              
    left: 0;
  }
}