/*Layout */
html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

#top-bar {
  width: 100%;
  background: #f2f4f7;
  border-bottom: 2px solid #b8b8b8;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  height: 15%;
}

#top-bar h1 {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  color: #364757;
  margin: 0 auto;           /* This centers the h1 horizontally */
  text-align: center;       /* This centers the text inside h1 */
}

#app {
  flex: 1;
  overflow: hidden; /* Or 'auto' if you want scrollable content */
  display: flex;     /* Needed if sidebar and map are side-by-side */
}


.leaflet-control-home {
  background-color: white;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.leaflet-control-home:hover {
  background-color: #f0f0f0;
}


#sidebar {
  width: 290px;
  max-width: 42vw;
  height: 100%;
  background: #364757;
  border-right: 2px solid #b8b8b8;
  padding: 4px;  
  box-sizing: border-box;
  overflow-y: auto;}

#sidebar h2 {
  margin: 6px 0 6px;
  font-size: 1.6rem;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-weight: 600;
  color: #f2f4f7;
}
#sidebar h3 {  /* Search results Heading */
  margin: 20px 0 6px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: #f2f4f7;
}

#stadium-list { display: grid; gap: 6px; }

.sidebar-item {
  cursor: pointer;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 0.8rem;
  padding: 6px 8px;
  background: #f2f4f7;
  border: 1px solid #e1e1e6;
  border-radius: 12px;
  line-height: 1.2;
}
.sidebar-item:hover { background: #c4c7cc; }

#info {
  margin-top: 10px;
  font-size: 0.9rem;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: #1a1919;
}
#summary { padding: 8px 10px; background: #f9fcff; border: 1px solid #e1e1e6; border-radius: 20px;}

/* Styling for Count number */
.count-number {
  font-size: 1.1rem;
  color: #1b1a1a; /* optional to match or override */
}


#map { flex: 1; }
.leaflet-container { height: 100%; width: 100%; }

/* Marker styles toggled by JS */
.pub-default { }
.pub-highlight { }


/* LEGEND Styles */
.info.legend {
  background: white;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  border-radius: 6px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  max-width: 220px;
}

.info.legend h4 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: bold;
}

.legend-circle {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  border: 1px solid #333;
}

.pub-default {
  background-color: #ffd9a6;
  border-color: #7a3e00;
}

.pub-highlight {
  background-color: #e93723;
  border-color: #d42a1f;
}

.legend-polygon.london {
  display: inline-block;
  width: 16px;
  height: 10px;
  background-color: #b9e3c6;
  border: 2px solid #105228;
  margin-right: 6px;
  vertical-align: middle;
}

/* Marker icon for stadium */
.legend-icon {
  width: 12px;
  height: 20px;
  margin-right: 6px;
  vertical-align: middle;
}


/* -------------------------
   📱 Mobile View Adjustments ~800px
---------------------------- */
@media screen and (max-width: 768px) {
  html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: hidden;
}
  #top-bar {
    padding: 10px;
    background: #364757;
    color: white;
    text-align: center;    
    height: 8vh; /* fixed height */
    width: 100vw;
    line-height: 1.2;
  }
  #top-bar h1 {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 auto;           /* This centers the h1 horizontally */
  text-align: center;       /* This centers the text inside h1 */
}

  #app {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 8vh); /* fill below top bar */
  width: 100vw;                /* important: not fit-content */
  overflow-y: auto;         /* block internal scroll */
}

#map {
  order: 1;
  flex: 0 0 60%;         /* fixed to 60% of #app */
  height: 60%;             /* still good for fallback */
  border-bottom: #292a2b 1px solid;
}

#sidebar {
    order: 2;
    flex: 0 0 40%;
    width: 100%;
    height: 40%;
    max-width: 100%;
    padding: 10px 10px;
    background: #3b5c71;
    border: none; 
    box-sizing: border-box;   
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
  }
  #sidebar h2 {
    margin: 0 0 6px;
    font-size: 1.3rem;
    text-align: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 600;
    color: #ffffff;
  }

  #sidebar h3 {  /* Search results Heading */
    margin-top: 12px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 1.3rem;
    text-align: center;
    font-weight: 600;
    color: #ffffff;
  }

  #stadium-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    margin-top: 6px;
    align-items: center;
  }

  /*.sidebar-item {
    text-align: center;
    font-size: 0.7rem;
    color:#364757;
    padding: 5px;
  }*/

  .sidebar-item {
  cursor: pointer;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 0.7rem;
  color:#253442;
  /*padding: 5px 7px;*/
  background: #eaecee;
  border: 1px solid #e1e1e6;
  border-radius: 10px;
  line-height: 1.2;
}
  .sidebar-item:hover { background: #73889b; }

  #summary { 
    font-size: 0.9rem;
    color:#253442;
    background: #f9fcff;
    text-align: center;
  }

  /* Styling for Count number */.count-number {
  font-size: 14px;
  color: #1b1a1a; /* optional to match or override */
}

/* LEGEND Styles */
.info.legend {
  background: white;
  padding: 5px 7px;
  font-size: 0.7rem;
  line-height: 1.6;
  color: #333;
  border-radius: 6px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  max-width: 220px;
}
.info.legend h4 {
  margin: 0 0 6px;
  font-size: 0.8rem;
  font-weight: bold;
}
.legend-circle {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  border: 1px solid #333;
}
.pub-default {
  background-color: #ffd9a6;
  border-color: #7a3e00;
}
.pub-highlight {
  background-color: #e93723;
  border-color: #d42a1f;
}
.legend-polygon.london {
  display: inline-block;
  width: 12px;
  height: 8px;
  background-color: #b9e3c6;
  border: 2px solid #105228;
  margin-right: 6px;
  vertical-align: middle;
}
/* Marker icon for stadium */
.legend-icon {
  width: 12px;
  height: 20px;
  margin-right: 6px;
  vertical-align: middle;
}
}