/* ROOT */
:root {
  --gp-red: #d93025;
  --gp-red-75: rgba(224, 66, 65, 0.75);
  --gp-red-50: rgba(224, 66, 65, 0.5);
  --gp-red-15: rgba(224, 66, 65, 0.15);
  
  --gp-blue: #1a73e8;
  --gp-blue-75: rgba(26, 115, 232, 0.75);
  --gp-blue-50: rgba(26, 115, 232, 0.5);
  --gp-blue-15: rgba(26, 115, 232, 0.15);
  
  --gp-green: #188038;
  --gp-green-75: rgba(9, 250, 22, 0.75);
  --gp-green-50: rgba(9, 250, 22, 0.5);
  --gp-green-15: rgba(9, 250, 22, 0.15);
  
  --gp-yellow: #f9ab00;
  --gp-yellow-75: rgba(98, 67, 0, 0.75);
  --gp-yellow-50: rgba(98, 67, 0, 0.5);
  --gp-yellow-15: rgba(98, 67, 0, 0.15);
  
  --gr-grey: #cccccc;

}
/* NAVBAR */

.navbar {
  position: fixed !important;
  top: 0;
  width: 100%;
  z-index: 1050;
}

.navbar-underline {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(to right,
    var(--gp-red) 0%,
    var(--gp-red) 10%,
    var(--gr-grey) 30%,
    var(--gr-grey) 70%,
    var(--gp-red) 80%,
    var(--gp-red) 100%);
  z-index: 10;
  pointer-events: none;
}

.navbar::before,
.navbar::after {
    content: "";
    position: absolute;
    top: 0;
    width: 300px;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.navbar::before {
    left: 0;
    background: linear-gradient(to right, var(--gp-green-15), transparent);
}

.navbar::after {
    right: 0;
    background: linear-gradient(to left, var(--gp-green-15), transparent);
}


.navbar-collapse {
  background-color: #fff;  /* Or your navbar's background colour */
  padding: 1rem;
}

.navbar-bg {
  background-color: #fff;  /* or any solid color */
  z-index: 1030;  /* ensure it’s above content */
}

/* MEDIA */
@media (min-width: 768px) {
    /* Side fades */
    .side-fade-left,
    .side-fade-right {
        display: block;
    }

    /* Navbar fades */
    .navbar::before,
    .navbar::after {
        display: block;
    }
}

@media (max-width: 767.98px) {
    /* Hide fades on small screens */
    .side-fade-left,
    .side-fade-right {
        display: none;
    }

    .navbar::before,
    .navbar::after {
        display: none;
    }
}


/* BODY */
body {
	font-family: 'Poppins', sans-serif !important;
	padding-top: 70px; 
    background: #f2f2f2 ;
}

.gp-badge {
  width: 40px;
  height: 40px;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: white;
  margin-left: auto;
  margin-right: auto; /* ✅ This centres it */
}

.gp-red    { background-color: var(--gp-red); }
.gp-blue   { background-color: var(--gp-blue); }
.gp-green  { background-color: var(--gp-green); }
.gp-yellow { background-color: var(--gp-yellow); }


.container-narrower {
  max-width: 1140px; /* or try 1080px */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.f5 {
	background-color: #f5f5f5;
}

.side-fade-left,
.side-fade-right {
    position: fixed;
    top: 0;
    width: 300px;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
}

.side-fade-left {
    left: 0;
    background: linear-gradient(to right, rgba(100, 200, 255, 0.4), #f2f2f2 );
}

.side-fade-right {
    right: 0;
    background: linear-gradient(to left, rgba(100, 200, 255, 0.4), #f2f2f2 );
}

.form-control {
  border-radius: 0.5rem;
  border: 1px solid #ccc;
  font-size: 0.95rem;
  transition: box-shadow 0.2s ease;
  background-color: #ffffff;
}

.form-control:focus {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.25);
}

html {
  overflow-y: scroll;
}
.title{
	font-size: 2.3rem;
	line-height: 1;
	margin-left: -0.8rem;  /* move title left over logo */
}

.tagline {
	font-size: 0.9rem;
	text-align: right;
	width: 100%;
	margin-top: 0.2rem;
}


.nav-link.active-link {
  text-decoration: underline;
  text-decoration-color: #007BFF;
  text-decoration-thickness: 4px;
  text-underline-offset: 3px;
}

.logo-text {
	font-size: 2.6rem; 
	font-weight: 400; 
	letter-spacing: 0.02em;
	color: #007BFF;
}

.logo-text-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* aligns tagline right under title */
}

.navbar-light-link {
	color: #000!important;
}

.geopollr-tagline {
  font-size: 1rem;
  color: #555;
  letter-spacing: 0.02em;
}

.geopollr-tagline .tag-icon {
  margin-left: 7px;
}

.geopollr-tagline .spot-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #DC3545;  /* Pin red (or your chosen red) */
  border-radius: 50%;
  vertical-align: middle;
  margin: 0 1px 0 1px;
}

.geopollr-tagline .tag-verb {
  color: #007BFF;  /* Bootstrap primary blue — adjust if you have a specific map/pin blue */
  font-weight: 500;
}

img.logo {
  vertical-align: middle;
  margin-right: -40px;
}

#map { 
	height: 400px; 
	width: 80%; 
	margin-top: 20px; 
}

.small-help-text {
	font-size: 0.9rem; 
	font-weight: 200; 
	color: #007BFF;
	font-style: italic
}

.badge-circle-large {
  border-radius: 50%;
  width: 1.2em;
  height: 1.2em;
  font-size: 0.8em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.quick-poll-widget {
  width: 100%;
  max-width: 100%;  /* Adjust as needed */
  min-width: 800px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 10px;
  background-color: #f8f9fa;
}

.quick-poll-widget {
  display: flex;
  width: 100%;              /* ensure full width */
  max-width: 100%;          /* override any Bootstrap limits */
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  background: #f8f9fa;      /* optional for visual clarity */
  border-radius: 6px;
  flex-wrap: nowrap;
}

.quick-poll-widget .poll-question {
  flex: 0 0 50%;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quick-poll-widget .poll-options {
  flex: 0 0 30%;
}

.quick-poll-widget .poll-button {
  flex: 0 0 20%;
}

/* FOOTER */
.footer-with-fades {
  position: relative;
  height: 65px;
  background-color: #ffffff;
  color: #212529;
  overflow: hidden;
  padding-top: 3px;   /* space for the separator */
  padding-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Horizontal faded bar at top */
.footer-with-fades::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(to right,
    var(--gp-green) 0%,
    var(--gp-green) 10%,
    var(--gr-grey) 30%,
    var(--gr-grey) 70%,
    var(--gp-green) 80%,
    var(--gp-green) 100%);
  z-index: 1;
}

/* Optional: match navbar fade style */
.footer-fade-left,
.footer-fade-right {
  position: absolute;
  top: 0;
  height: 100%;
  width: 300px;
  pointer-events: none;
  z-index: 0;
}

.footer-fade-left {
  left: 0;
  background: linear-gradient(to right, var(--gp-red-15), transparent);
}

.footer-fade-right {
  right: 0;
  background: linear-gradient(to left, var(--gp-red-15), transparent);
}

/* Ensure content is above fades */
.footer-with-fades .container {
  position: relative;
  z-index: 2;
}

.leaflet-container {
    cursor: default !important; /* arrow on map */
}
.leaflet-interactive {
    cursor: pointer !important; /* hand only for markers */
}