/* ==============================
   TYPOGRAPHY & COLOR SYSTEM
   for Cluebay Mapmaking Pages
   ============================== */

:root {
  --clr-bg: #2f4858;
  --clr-text: #f0f0f0;
  --clr-accent: #d6c97a;      /* strong text accent */
  --clr-link: #7fc8c7;        /* link color */
  --clr-link-hover: #9ae2df;  /* link color hover*/  
  --clr-muted: #ffffff99;  /* subtle text */
}

.cb-page {
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
}

/*.cb-page .text-accent{
  color: var(--clr-accent);
}*/

.cb-page h1 { font-size: 28px; font-weight: 400; line-height: 1.35;margin-top: 1.8rem; margin-bottom: 0.6rem;}
.cb-page h2 { font-size: 24px; font-weight: 400; line-height: 1.35;margin-top: 1.8rem; margin-bottom: 0.6rem;}
.cb-page h3 { font-size: 20px; font-weight: 400; line-height: 1.35;margin-top: 1.8rem; margin-bottom: 0.6rem;}
.cb-page h4 { font-size: 18px; font-weight: 400; line-height: 1.35;margin-top: 1.8rem; margin-bottom: 0.6rem;}
/*.cb-page h1 {color: var(--clr-accent);}*/



@media (min-width: 1100px) {
  .cb-page .w3-row-padding h1{
    margin-left: -8px; /* 8px from .w3-row-padding */
  }
  .cb-page .w3-container h1{
    margin-left: -16px; /* 16px from .w3-container*/
  }
}

/* --- Responsive adjustments --- */
@media (max-width: 768px) {
  .cb-page {font-size: 16px;}
  .cb-page h1 { font-size: 24px; font-weight: 400; line-height: 1.35;margin-top: 1.6rem; margin-bottom: 0.6rem;}
  .cb-page h2 { font-size: 20px; font-weight: 400; line-height: 1.35;margin-top: 1.6rem; margin-bottom: 0.6rem;}
  .cb-page h3 { font-size: 18px; font-weight: 400; line-height: 1.35;margin-top: 1.6rem; margin-bottom: 0.6rem;}
  .cb-page h4 { font-size: 16px; font-weight: 400; line-height: 1.35;margin-top: 1.6rem; margin-bottom: 0.6rem;}
}

strong {
    /*color: #d6c97a; = warm gold*/ 
    /*color: #e6e1b9; = light golden*/
    /*color: #ddd8ac; = middle-ground golden*/
    /*color: #dcd08d; = middle-ground, more golden*/
    color: #dcd08d;
    font-weight: 400; /* if you don't want to host a font flex copy, must be exactly the weight of a static font */
    /*font-style: italic;*/
    /*text-decoration: underline;*/
}

/*
/   MAIN TWEAKS
*/
.cb-top-buffer{
  padding-top:0px;
}
.cb-center-horiz {
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
  margin: 0 auto;
}

/* BRANDLINE */
.brandline {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  text-decoration: none;
  color: #e6e6e6; /* off-white default */
}

.separator {
  color: #f0f0f0;
  margin: 0 0.0em;
  cursor: default; /* shows it’s not clickable */
}

.brand {
  color: #e6e6e6; /* soft off-white */
  font-weight: 400;
  letter-spacing: 0.03em;
}

.brand-regular {
  color: #ffffff; /* soft off-white */
  font-weight: 500;
  letter-spacing: 0.03em;
}

.dept {
  color: #ffffff; /* pure white, stands out slightly */
  /*font-family: "Karma", serif;*/
  font-weight: 500;
}

.dept-regular {
  color: #ffffff; /* pure white, stands out slightly */
  font-weight: 500;
}

/*.brandline:hover .brand,
.brandline:hover .brand-regular,
.brandline:hover .dept {
  text-decoration: underline;
  text-decoration-color: #9ae2df
}*/

a.brandline:hover span {
  opacity: 0.6;
  /*color: #9ae2df;*/
}




/*
/  LINKS
*/
a.basicLink:link,
a.basicLink:visited,
a.basicLink:active
{
  color: #2196F3;
}
a.brandLink:link,
a.brandLink:visited,
a.brandLink:active
{
  color: var(--clr-link);
}

a.basicLink:link,
a.basicLink:visited,
a.basicLink:active,
a.brandLink:link,
a.brandLink:visited,
a.brandLink:active,
a.headingLink:link,
a.headingLink:visited,
a.headingLink:active
{
	text-decoration: none;
}

a.brandLink:hover
{
  color: var(--clr-link-hover);
}


a.basicLink:hover,
a.brandLink:hover,
a.headingLink:hover
{
	text-decoration: underline;
}



/* h1, h2, h3, h4, blockquote {
    font-family: 'Karma', serif; 
}*/

/* some W3 overrides, more below, see also changes in w3_modified.css*/
.w3-sidebar {
  z-index: 15;
  width: 270px;
  top: 43px;
  bottom: 0;
  height: inherit;
  overflow-x: hidden;
}


.non-button {
    border: none;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: default;
    white-space: nowrap
}
.padding-row_first {
    padding-top: 0px;
    padding-bottom: 0px;
}
.padding-row {
    padding-top: 48px;
    padding-bottom: 0px;
}
.padding-row_last {
    padding-top: 48px;
    padding-bottom: 48px;
}
.padding-row_narrow {
    padding-top: 32px;
    padding-bottom: 0px;
}
.padding-row_narrow_last {
    padding-top: 32px;
    padding-bottom: 48px;
}
.buttonInlineImage_cards,
.buttonInlineImage_body {
    width:16px;
    height:16px;
    padding:1px;    ;
    margin-bottom:3px;    
}
.buttonInlineImage_cards {
    border-style: solid;
    border-radius: 2.5px;
    border-width: .25px;
    border-color: #c0c0c0;
}
.buttonInlineImage_body {    
    border-style: solid;
    border-radius: 2px;
    border-width: .05px;
    border-color: #f0f0f0;
    background-color: white;
}
.inlineSize{
  height: 1em;
  width: 1em;
}
.inlineSize-p2{
  height: 1.2em;
  width: 1.2em;
}
ul{
  list-style-type: none;
  margin-left: 16px;
  padding: 0;  
}
.divLineTop{
  border-top: 1px solid #c0c0c0;
}
.imageSourceTextFormat{
  text-align:center; 
  min-width: 0px; 
  padding: 0px 3px; 
  font-size: 10px;
}

/* Style the toggleSign*/
.toggleSign {
  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
  /* Prevent text selection */
}
/* Create the toggleSign and style it */
.toggleSign::before {
  content: "+";
  color: black;
  display: inline-block;
  margin-right: 8px;
  text-align: center;
  width: 6px;
}
/* Change the toggleSign when clicked on (using JavaScript) */
.toggleSign-open::before {
  content: "-";
  color: black;
  display: inline-block;
  margin-right: 8px;
  text-align: center;
  width: 6px;
}
/* Hide the nested list */
.nested {
  display: none;
}
/* Show the nested list when the user clicks on the toggleSign/arrow (with JavaScript) */
.active {
  display: block;
}
.menuHeader{
  padding-left:0px !important;
}
.menuItem{
  margin-left:12px !important;
  padding-left:4px !important;
}

/* inline symbols */
.basic-externalLink-icon {
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-left: 0.1em;
    vertical-align: middle;
    background: #5b5b5b;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="2" d="M18 13v6a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6M15 3h6v6M10 14L21 3"/></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="2" d="M18 13v6a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6M15 3h6v6M10 14L21 3"/></svg>') no-repeat center / contain;
  }
.brand-externalLink-icon {
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-left: 0.1em;
    vertical-align: middle;
    background: #f0f0f0;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="2" d="M18 13v6a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6M15 3h6v6M10 14L21 3"/></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="2" d="M18 13v6a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6M15 3h6v6M10 14L21 3"/></svg>') no-repeat center / contain;
  }


/*
/   Map-Text / Map-Image Combos
*/
.mapTextLeft {
  width:100%;
  max-width:500px;
  float:right;
}
.mapImageRight {
  width:100%;
  max-width:500px;
}
@media (max-width:600px) {
  .mapTextLeft {
    float:left;
  }
}

/*
/   To correct text and image having not the same top line
/   H2 adds an additional margin. Either it must loose it,
/   or the right column must move down, but only when
/   there are two columns, i.e, width > 601px.
/   Note: move the column, not the image. Otherwise
/   the overlay won't work anymore!
/   
*/
@media (min-width: 601px) {
  /* push the image half slightly lower */
  .w3-row .w3-half:nth-child(2) {
    margin-top: 32px; /* adjust as needed */
  }
}

/*
/   Thumbnail link and overlay handling
*/
.thumbnail-link {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}
.thumbnail-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.thumbnail-container img {
  display: block;
  width: 100%;
  height: auto;
}
.thumbnail-overlay {
  position: absolute;
  top: 0; 
  bottom: 0; 
  left: 0; 
  right: 0;
  inset: 0; /* shorthand for top:0; right:0; bottom:0; left:0 */
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 1rem;
  text-align:center;
  padding: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* IMPORTANT: keeps link clickable */
}
.thumbnail-container:hover .thumbnail-overlay {
  opacity: 1;
}
@media (hover: none) and (pointer: coarse) {
  .thumbnail-container:hover img {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
  .thumbnail-container:hover .thumbnail-overlay {
    opacity: 0 !important;
    background: none !important;
  }
}

/*
/ image ZOOM 
*/
.cb-zoom {
  overflow: hidden;           /* keeps zoom inside the container */
}

.cb-zoom img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center center;          /* zoom from middle */
  transform: scale(1);
  transition: transform 1.0s ease;         /* zoom-in duration */
}

.cb-zoom:hover img {
  transform: scale(1.15);
  transition: transform 1.0s ease;          /* zoom-out linger */
}

@media (max-width: 900px) {
  .cb-zoom:hover img {
    transform: scale(1.18);
    transition: transform 1.2s ease;
  }
}
@media (max-width: 750px) {
  .cb-zoom:hover img {
    transform: scale(1.25);
    transition: transform 1.2s ease;
  }
}
@media (max-width: 500px) {
  .cb-zoom:hover img {
    transform: scale(1.15);
    transition: transform 1.0s ease;
  }
}


/*
/ Responsive layout - FLEX container 
*/
.cb-flexContainer {
  display: flex; 
  flex-wrap: wrap;
}


/*
/   FLEX layout
*/
.cb-flex-4 {
  max-width:1450px;
}
.cb-flex-2 {
  max-width:1050px;
}

.cb-flex-4 .cb-flex {
  flex: 25%;
  max-width: 25%;
  padding: 8px;
}
.cb-flex-2 .cb-flex {
  flex: 50%;
  max-width: 50%;
  padding: 8px;
}

@media (max-width: 1300px) {
  .cb-flex-4{
    max-width:1100px;
  }
  .cb-flex-4 .cb-flex {
    flex: 33.33%;
    max-width: 33.33%;
    padding: 8px;
  }
}
@media (max-width: 850px) {
  .cb-flex-4,
  .cb-flex-2
  {
    max-width:100%;
  }
  /*note : for cb-flex to work, it needs to a have direct flex-container.
  /        This can also be found "by accident" when going up the hierachy
  /        to cb-flex-4 or cb-flex-2
  */
  .cb-flexContainer .cb-flex {  
    flex: 50%;
    max-width: 50%;
    padding: 8px;
  }
}
@media (max-width: 500px) { 
  .cb-flexContainer .cb-flex {
    flex: 100%;
    max-width: 100%;
    padding: 8px;
  }
}

/*
/   Image mini info 
*/
.image-mini-info,
.image-mini-info-touch-only
{
  color: white;
  background: rgba(0, 0, 0, 0.5); 
  text-align:center; 
  min-width: 0px; 
  padding: 0px 3px; 
  font-size: 10px;
}
.image-mini-info-touch-only{  
  visibility: hidden;
}
/* Touch devices: no hover -> show info */
@media (hover: none) and (pointer: coarse) {
  .image-mini-info-touch-only{
  visibility:visible;
  }
}


/*
/   Cards handling - depending on media, desktop or touch
*/
.cardContentHintTextFormat{
  text-align:center; 
  min-width: 0px; 
  padding: 0px 3px; 
  font-size: 10px;
  visibility: hidden;
}
.desktopCardOverlay {
  position: absolute; 
  top: 0; 
  bottom: 0; 
  left: 0; 
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #ffffff;
  z-index: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
div.desktopCardOverlay p {
  margin: 0;
}
div.desktopCardOverlay p + p {
  margin-top: 0.4em;
}
.desktopCardOverlayHeader {
  font-size: 1.1em;
  font-weight: 500;
}
.w3-display-container:hover .desktopCardOverlay {
  opacity: 1;
}
.desktopCardOverlayText {  
  font-size: 13px !important;
  padding: 15px;
}
.touchCardOverlay {
  position: absolute;
  inset: 0;        /* shorthand for top:0; right:0; bottom:0; left:0 */
  z-index: 3;
  display: block;
  background: transparent;
  /*background: rgba(255, 0, 0, 0.1);*/ /* faint red */
}
/* Desktop: hide overlay so inner links are clickable */
@media (hover: hover) and (pointer: fine) { 
  .touchCardOverlay {
    display: none;
  }
}
/* Touch devices: disable fade and hide backside */
@media (hover: none) and (pointer: coarse) {
  .desktopCardOverlay {
    display: none;
  }
  .cardContentHintTextFormat{
  visibility:visible;
  }
}
@media (max-width: 1000px) {  
  .cb-flex-4 .cb-flex .desktopCardOverlayText {  
    font-size: 11px !important;
    padding: 15px;
  }
}
@media (max-width: 900px) {  
  .cb-flex-4 .cb-flex .desktopCardOverlayText {  
    font-size: 10px !important;
    padding: 12px;
  }
}
@media (max-width: 850px) {
  .cb-flex-4 .cb-flex .desktopCardOverlayText {  
    font-size: 13px !important;
    padding: 15px;
  }
}
@media (max-width: 700px) {  
  .cb-flex-4 .cb-flex .desktopCardOverlayText {  
    font-size: 10px !important;
    padding: 10px;
  }
}
@media (max-width: 550px) {  
  .cb-flex-4 .cb-flex .desktopCardOverlayText {  
    font-size: 9px !important;
    padding: 10px;
  }
}
@media (max-width: 500px) {
  .cb-flex-4 .cb-flex .desktopCardOverlayText {  
    font-size: 13px !important;
    padding: 20px;
  }
}