/*---------------------------------------------------------------------------------

 Theme Name:   United Child
 Theme URI:    https://unitedumpires.org
 Description:  A child theme for United Umpires
 Author:       Clayton Design Group
 Author URI:   https://claytondesigngroup.com
 Template:     Divi
 Version:      1.0.21
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

 Add custom CSS below the line. DO NOT EDIT ABOVE apart from updating the version number.
 Make sure to update the version line above each time this file is updated.

------------------------------ ADDITIONAL CSS HERE ------------------------------*/

html {
	font-size: 62.5%;
}

p {
  max-width: 65ch;
}

.et_pb_button {
  transition: all 0.2s ease;
}

.et_pb_button:hover {
  transform: translateY(-2px);
}

/*grid hover for blog post snippets*/
.et_pb_post {
  transform: scale(1);
  transition: transform 0.3s ease-in-out;
}

.et_pb_post:hover {
  transform: scale(1.03);
}
/* LEADERSHIP TEAM STYLES */
/* ===== LEADERSHIP TEAM SECTION WRAPPER ===== */
.team-section {
  padding: 0;
  background: transparent;
}

/* ===== TEAM GRID CONTAINER ===== */
.team-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 20px;
}

/* ===== EACH TEAM ROW ===== */
.team-row {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 30px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.team-row:last-child {
  margin-bottom: 0;
}

/* ===== INDIVIDUAL TEAM CARD ===== */
.team-card {
  width: 220px;
  flex-shrink: 0;
  text-decoration: none;
  display: block;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* --- Chevron background on each card --- */
.team-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: #7ea9cc;
}

.team-card-bg::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  background-color: #010203;
  clip-path: polygon(35% 0%, 100% 0%, 100% 100%, 35% 100%, 0% 50%);
}

/* --- Card content sits above the background --- */
.team-card-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 25px 15px 20px 15px;
}

/* ===== HOVER EFFECTS FOR TEAM CARDS ===== */
.team-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
  text-decoration: none;
}

.team-card:active {
  transform: translateY(-2px);
}

/* ===== TEAM CIRCULAR PHOTO ===== */
.team-photo {
  width: 140px;
  height: 140px;
  margin: 0 auto 15px auto;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.team-card:hover .team-photo {
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 20px rgba(126, 169, 204, 0.5);
}

.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== TEAM NAME — Bebas Neue ===== */
.team-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.6rem, 1.4rem + 0.53vw, 2.1rem);
  font-weight: 400;		/* Bebas Neue only has 400 weight */
  color: #ffffff;
  margin: 0 0 4px 0;
  line-height: 1.2;
  letter-spacing: 1px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ===== TEAM TITLE — DM Sans ===== */
.team-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.1rem, 0.98rem + 0.32vw, 1.4rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 6px 0;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ===== TEAM COMPANY — DM Mono ===== */
.team-company {
  font-family: 'DM Mono', monospace;
  font-size: clamp(1rem, 0.88rem + 0.32vw, 1.3rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ===== RESPONSIVE SETTINGS FOR TEAM CARDS ===== */

/* Tablet */
@media (max-width: 768px) {
  .team-card {
    width: 180px;
  }
  .team-photo {
    width: 115px;
    height: 115px;
  }
  .team-card-content {
    padding: 20px 10px 15px 10px;
  }
  .team-row {
    gap: 20px;
    margin-bottom: 30px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .team-row {
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
  }
  .team-card {
    width: 240px;
  }
  .team-photo {
    width: 130px;
    height: 130px;
  }
  .team-grid {
    padding: 50px 15px;
  }
}
/* --- END LEADERSHIP TEAM CARDS --- */

/* --- UTU MAP CONTAINER --- */
.custom-us-map-container {
  width: 100%;
  max-width: 1200px; /* Adjust this to make the map wider or narrower */
  margin: 0 auto;
  position: relative;
}

.us-hotspot-map {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0px 10px 15px rgba(0,0,0,0.1)); /* Optional: adds a nice shadow to the map */
}

/* --- Hotspot Base Styling --- */
.map-hotspot {
  cursor: pointer;
  text-decoration: none;
  outline: none;
}

.hotspot-dot {
  fill: #ff4a4a; /* Color of the dot */
  transition: all 0.3s ease;
}

/* --- Map-HotSpot Text Label Styling --- */
.hotspot-label {
  fill: #13338b; /* Text color */
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.4rem, 1.24rem + 0.43vw, 1.8rem);
  font-weight: 600;
  text-anchor: middle;
  opacity: 0; /* Hides text until hover */
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(10px);
  pointer-events: none; /* Prevents the text from glitching the hover effect */
  
  /* Optional: Adds a white glow around text to make it readable over map lines */
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 2px;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

/* --- Hover Effects --- */
.map-hotspot:hover .hotspot-dot {
  fill: #cc0000; /* Darker color on hover */
  r: 11; /* Makes the dot slightly larger on hover */
}

.map-hotspot:hover .hotspot-label {
  opacity: 1;
  transform: translateY(0);
}

/* --- Pulsing Animation --- */
.hotspot-pulse {
  fill: transparent;
  stroke: #f44336; /* Color of the pulse ring */
  stroke-width: 2;
  animation: pulse-animation 2s infinite;
  pointer-events: none;
}

@keyframes pulse-animation {
  0% {
    r: 8;
    opacity: 1;
  }
  100% {
    r: 24;
    opacity: 0;
  }
}

/* ---Join Us Button --- */
#wpforms-submit-222967 {
  background-color: #13338b !important;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.4rem, 1.24rem + 0.43vw, 1.8rem)!importnat;
  letter-spacing: 0.02em !important;
	font-weight: 600 !important; /* add style */
     margin: 0 auto !important;
     display: block !important;
  text-transform: uppercase !important;
  width: 100% !important;
}

/* ---Contact Us Button --- */
#wpforms-submit-223000 {
  background-color: #13338b !important;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.4rem, 1.24rem + 0.43vw, 1.8rem)!importnat;
  letter-spacing: 0.02em !important;
	font-weight: 600 !important; /* add style */
     margin: 0 auto !important;
     display: block !important;
  text-transform: uppercase !important;
}