/* 
PROJECT: World Ports  
COURSE:  CRTY1033 - Web Mapping 
FILE:    style.css   
AUTHOR:  Alex Hordal 
DATE:    February 18, 2026
PURPOSE: This CSS file defines the visual styling and layout for the World Ports web map.
*/

 /* CSS Reset */
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 html,
 body {
   font-size: 1em;
   padding: 0;
   margin: 0;
   height: 100%;
   width: 100%;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

 }

 body,
 .mapboxgl-popup-content,
 .mapboxgl-popup-content * {
   font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;

 }

 /* Main map container */

 #map {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 100%;
 }

 /* Mapbox popup styling */

 .mapboxgl-popup-content {
   background: rgba(255, 255, 255, .9);
   /* Alpha effect */
   padding: 5px;
   border-radius: 10px;
   max-width: 550px;
   text-align: center;
   box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.22);
   /* Drop shadow */
   border: 1px solid #9e9e9e;
   color: #2b2b2b;
  

 }

 .click_for_info_text {
   color: #537a89;
   font-style: italic;
   font-weight: 700;
 }

 /* Popup close button */

 .mapboxgl-popup-close-button span {
   font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
   font-size: 1em;
   font-weight: bold;
   padding-right: 5px;
   padding-top: 5px;
   color: #537a89;
 }

 .mapboxgl-popup-content h2 {
   font-size: 1.25em;
   color: #537a89;
   font-weight: 900;
   padding:1em;
 }

 .mapboxgl-popup-content h3 {
   font-size: 1em;
   font-weight: 600;


 }
 .ISO3,
 .value,
 .red,
 .source_link:hover {
   color: #d26165;
 }

 .red {
   font-weight: 700;
 }

 hr {
   border: none;
   height: 2px;
   background: #d6b892;
   margin-top: 0.5em;
   margin-bottom: 0.5em;
 }



 /* Popup port information table */

 td.field {
   border-right: 2px solid #d6b892;
   padding: 5px;  
   color: #537a89;
 }

 td.value {

   padding-left: 1.2em;
 }

 .port_popup_content table {
   width: 100%;
   border-collapse: collapse;
 }

 .port_popup_content td {
   width: 50%;
   text-align: left;
   font-weight: 700;
 }
.hover_popup {
  padding:1em;
}
 ul {
   margin: 0;
   list-style-position: inside;
 }

 /* Popup title */

 .popup_header {
   width: 100%;
   background-color: #537a89;
   color: #d6b892;
   margin-top: 0.5em;
   margin-bottom: 0.5em;
 }

 /* Set port popup height and add scrollbar customization */

 .port_popup_content {
   max-height: 400px;
   overflow-y: auto;
   overflow-x: hidden;
   padding-right: 5px;
 }

 .port_popup_content::-webkit-scrollbar {
   width: 6px;
 }

 .port_popup_content::-webkit-scrollbar-track {
   background: #f1f1f1;
 }

 .port_popup_content::-webkit-scrollbar-thumb {
   background: #888;
   border-radius: 10px;
 }

 /* Welcome modal */

 .modal_overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   /* Dimmed background */
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 10000;
   backdrop-filter: blur(6px);
   /* Blurs map behind modal */
 }

 .modal_content {
   background: rgba(255, 255, 255, 0.75);
   /* Alpha effect */
   padding: 20px;
   border-radius: 16px;
   max-width: 550px;
   text-align: center;
 }

 .modal_content h1 {
   font-weight: 700;
   font-size: 1.75em;
   margin-bottom: 1em;
   letter-spacing: -0.5px;
   color: #537a89;
   margin-top: 1em;
 }

 .intro_text {
   font-size: 0.95em;
   font-weight: 700;
   margin-bottom: 1.5em;
   color: #537a89;
 }

 .map_guide {
   text-align: left;
   background: #c0c0c0;
   padding: 1.5em;
   border-radius: 8px;
   font-size: 0.95em;
   line-height: 1.5;
   font-weight: 600;
   color: #4d4d4d;
   margin-bottom: 1.5em;
 }

 .map_guide p {
   margin-top: 1em;
   margin-bottom: 1em;
 } 
 span.links a {
   font-weight: 700;
   color: #537a89;
   font-size: 0.8em;
 }

 #closeButton {

   font-weight: 700;
   background: #537a89;
   color: white;
   border: none;
   padding: 14px 40px;
   border-radius: 30px;
   /* Rounded button style */
   cursor: pointer;
   transition: all 0.2s ease;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-top: 1.5em;
 }

 /* Port popup zoom button */

 .zoom_button {
   font-weight: 700;
   background: #537a89;
   color: white;
   border: none;
   padding: 5px 5px;
   margin-top:1em;
   border-radius: 5px;
   /* Rounded button style */
   cursor: pointer;
   transition: all 0.2s ease;
   font-size: 1em;
   margin-bottom: 1em;
 }

 #closeButton:hover,
 .zoom_button:hover {
   background: #d26165;
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }

 

 .source_link:hover {
   font-weight: bold;

 }

 .modal_content img {
   vertical-align: middle;
   
 }