/* TPW - chip responsive layouts */
.tpw-two-column-grid, .tpw-three-column-grid {display:block;margin-bottom:25px;}
.tpw-two-column-grid > *, .tpw-three-column-grid > * {padding:0 /*1rem;*/}

.tpw-two-column-grid div:nth-child(odd) { padding-right:20px;}
.tpw-two-column-grid div:nth-child(even) { padding-left:20px;}

.tpw-two-column-grid div audio {display:block;}
.tpw-three-column-grid div {padding-right:40px;}

.player {padding: 20px 20px 26px;background-color:#383838;color:#fff;margin: 0 40px 40px 0;border-radius: 20px;}
.player .audio-title {margin:0;font-size:22px;font-weight:600;}
.player .audio-caption {margin:0;font-size:18px;}
.player audio {margin-bottom:15px;width:100%}

/* Make the paragraph line use a flexbox row layout */
p.tpw-listen-wrapper {
  display: inline-flex;  /* Behaves like a block but flows inline like a normal paragraph */
  align-items: center;   /* VERTICALLY CENTERS THE ICON WITH THE TEXT */
  gap: 8px;              /* Clean horizontal spacing between the icon and text */
  margin: 0 0 24px;
  font-size: 22px;
}

/* Explicit size controls for your image icon */
img.tpw-listen {
  display: block;        /* Strips out hidden inline baseline gaps below the image */
  width: 20px;           /* Set the perfect visual width for your icon */
  height: auto;          /* Maintains the natural aspect ratio of the SVG */
  flex-shrink: 0;        /* Stops the icon from squishing if text wraps on tiny screens */
}


/*.tpw-sub-menu {border-top: 1px solid #ccc !important; border-bottom: 1px solid #ccc !important;  }
ul.tpw-sub-menu li {margin-bottom:0;padding: 7px 18px !important; font-size:16px;}*/

.tpw-mobile-menu {display:none;border-top: 1px solid #ccc !important;border-bottom: 1px solid #ccc !important;text-align: center;}
.tpw-mobile-menu #tpw-mobile-menu-links {display: none;list-style: none;padding:0;margin:0;}
.tpw-mobile-menu a {color: #444;font-size: 16px;display: block;padding: 16px 0;}
.tpw-mobile-menu #tpw-mobile-menu-links li a {padding:0;margin:0 0 10px;}
.tpw-mobile-menu #tpw-mobile-menu-links li {padding:0;margin:0;}
.tpw-mobile-menu #tpw-mobile-menu-links li:last-child {margin: 0 0 17px;}

/*.tpw-locations {list-style: none;padding: 0;}
.tpw-locations li {margin-bottom: 14px !important;}*/


.tpw-collab-list {
  display:grid !important;
  gap:16px;
  grid-template-columns:repeat(2, 1fr) !important;
  padding:0;
  list-style: none; 
}

.tpw-sections-menu a {text-decoration: none !important;color:#444 !important;}
.tpw-sections-menu a:hover {text-decoration: underline !important;color:#444 !important;}



@media (max-width:1023px) {
/*ul.tpw-sub-menu li {margin-bottom:16px !important;padding: 0 !important;}
.tpw-sub-menu {display:none;}*/
.tpw-mobile-menu {display:block;margin-bottom:32px;font-size:16px;}
}


@media (min-width:768px) {
	.tpw-two-column-grid {display: grid;grid-template-columns: 1fr 1fr;}
	.tpw-three-column-grid {display: grid;grid-auto-rows: 1fr;grid-template-columns: 1fr 1fr 1fr;}
}

@media (max-width:768px) {
	.tpw-two-column-grid div, .tpw-three-column-grid div { padding:0;}
	.tpw-two-column-grid div:nth-child(odd) { padding:0px;}
	.tpw-two-column-grid div:nth-child(even) { padding:0px;}
	.tpw-center-content { text-align:center; }
	.tpw-two-column-grid div.player {padding:20px !important;}
	.intro-bar {font-size: 12px;padding: 12px 0 9px;}
}






/* ==========================================================================
   Horizontal Sub-Menu Styles (Filled Backgrounds)
   ========================================================================== */

/* The <ul> container reset and layout alignment */
ul.tpw-sub-menu {
  list-style: none;      /* Removes standard bullet points */
  padding: 0;            /* Removes browser default padding */
  margin: 0 0 39px;             /* Removes browser default margin */
  display: flex;         /* Forces list items to align horizontally in a row */
  flex-wrap: wrap;       /* Gracefully drops pills to a new line on smaller screens */
  justify-content: center;
  gap: 10px;             /* Creates clean space between your pills vertically and horizontally */
}

/* Individual list item layout */
ul.tpw-sub-menu li {
  margin: 0;
  padding: 0;
}

/* The Pill Styling (applied directly to the clickable anchor tag) */
ul.tpw-sub-menu a {
  display: inline-block; /* Allows vertical padding to apply correctly */
  text-decoration: none; /* Strips the default underline completely */
  padding: 8px 15px;     /* First number is top/bottom padding, second is left/right */
  border-radius: 9999px; /* A high pixel value guarantees a capsule pill shape */
  font-weight: 500;      /* Medium typography weight for clean reading */
  font-size:19px;
  background-color: #383838; /* Initial filled background color (light gray) */
  color: #fff;            /* Initial text color (dark charcoal) */
  
  /* Premium animation settings for color blending */
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* Interactive Hover State */
ul.tpw-sub-menu a:hover {
  background-color: #f5821f; /* Filled background color on hover (blue) */
  color: #383838;            /* Text color on hover (white) */
  text-decoration: none;     /* Hard override to prevent browsers from forcing underlines */
}




/* ==========================================================================
   Map points list
   ========================================================================== */


/* 1. Remove default list formatting and handle vertical spacing */
ul.tpw-locations {
  list-style: none;     /* REMOVES THE DEFAULT BULLETS */
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;            /* Adds a clean space between different list rows */
}

/* 2. Vertically center the row content with the circle badge */
ul.tpw-locations li {
  display: flex;
  align-items: center;  /* Aligns the circle badge perfectly on the text's center line */
  gap: 10px;            /* Creates a clean gap between the circle badge and the text */
  font-size: 22px;
}

/* 3. Style the <strong> tag into a white-on-black circle badge */
ul.tpw-locations li strong {
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Badge geometry */
  width: 28px;          /* Equal width and height are mandatory for a perfect circle */
  height: 28px;
  border-radius: 50%;   /* Blends the corners into a flawless circle shape */
  
  /* Theme Colors */
  background-color: #383838; /* Pure black background fill */
  color: #ffffff;            /* Pure white text color */
  
  /* Typography fine-tuning inside the badge */
  font-weight: 700;          /* Bold text */
  font-size: 16px;
  line-height: 1;            /* Normalizes letter height tracking inside the circle */
  flex-shrink: 0;            /* Prevents the circle from squishing on mobile screens */
}