/* Global settings */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding-top: 90px;
  font-family: 'Open Sans', sans-serif;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

h1, h2, h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; /* Use 'bold' weight for visibility */
  margin: 0.5em; /* Adds space below the header */
}

 /* Mobile style settings */
h1 { font-size: 24px; }
h2 { font-size: 18px; }
h3 { font-size: 12px; }

.menu-btn {
  display: flex;
  float: right;
}

.logo-container {
  left: 10px;
  padding-left: 10px;
  padding-right: 10px;
  position:absolute;
  display: inline-bock;
  /* display: flex; */
  align-items: center;
  background-color: white;
  border-radius: 8px;
  /* justify-content: flex-start; */
  border: 1px solid #1b1b1b; /*Optional: adds a border to visualize the container */
  overflow: hidden;
  /* transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s; */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transform: background-color 0.2s, transform 0.1s, box-shadow 0.2s, translateY(2px);
}

.logo-container:active {
  transform: translateY(2px);
  box-shadow: none;
  background-color: yellow;
}

.menu-container {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding-top: 20px;
  padding-bottom: 20px;
  height: 80px;
  display: flex;
  justify-content: flex-end;  /*ushes items to opposite ends */
  /* justify-content: left; */
  align-items: center; /* Vertically centers the items */
  width: 100%; /* Ensure container spans full width */
  /*padding: 10px 20px;  Add some padding for spacing */
  background-color:#D3D3D3 ; /* Example background */
  box-sizing: border-box; /* Ensures padding doesn't add extra width */
  z-index: 1000;
  transition: transform 0.2s ease-out;
}

.menu-container.is-hidden {
  transform: translateY(-100%);
}
.menu-container p {
  font-size: 18px;
  padding: 5px;
  margin: 0;
  color: black;
}
.my-image-icon {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding-top: 5px;
}

.my-image-icon a {
  display: inline-flex;  /* Allows padding to affect height & keeps content centered */
  align-items: center;
  padding: 10px;         /* Increase this to add height/clickable area */
  height: 70px;
  text-decoration: none;
}

.my-image-icon a img {
  height: 100%;          /* Forces the SVG to match the anchor's height */
  width: auto;           /* Maintains the original aspect ratio proportionally */
  display: block;        /* Removes default bottom whitespace */
}

.menu {
  display: none;
  list-style: none;
  position: absolute;
  top: 100%;
  right:0px;
  width: 50vw;
  /* background: rgb(78, 73, 73); */
  background-color: #D3D3D3;
  flex-direction: column;
  /* box-shadow: 0 8px 16px rgba(0,0,0,0.1); */
  overflow-y: auto;
  max-height: none;
  overscroll-behavior: contain;
  scrollbar-width: thin; /* Options: auto, thin, none */
  scrollbar-color: #888 #e0e0e0; /* thumb track */
}

.menu.active {
  display: flex;
}

.menu a {
  display: block;
  padding: 9px 20px;
  text-decoration: none;
  color: black;
  font-size: 1.0em;
}

.menu-btn {
  display:flex;
  flex-direction: column;
  cursor: pointer;
  /* padding: 5px; */
  margin: 10px;
  background-color: #D3D3D3;
  color: black;
  border:none;
  fill: #000000 !important;
  /* padding: 10px; */
}
.menu-btn span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #000000 !important;
  fill: #000000 !important;
  color: black;
  opacity: 1;
  margin: 3px 10px;
  transition: opacity 0.3s ease; /* Explicitly target opacity */
  transform: translateZ(0);
}

.menu-btn.open span:nth-child(1) { transform: rotate(-45deg) translate(-5px, 8px);}
.menu-btn.open span:nth-child(2) { opacity: 0; }
.menu-btn.open span:nth-child(3) { transform: rotate(45deg) translate(-5px, -8px);}

nav a, nav a:link, nav a:visited, nav a:active, nav a:focus {
    color: #000000
}

.section-bold-text p {
  font-size: 1.0em;
  font-weight: bold;
  margin: 0;
  /* padding: 10px 5px; */
}

.item {
  display: flex;
  align-items: center; /* Vertically centers children */
  gap: 0.5em; /* Space between character and text */
}

.unicode-char {
  font-size: 1.2em; /* Adjust size as needed */
  line-height: 1; /* Prevents extra spacing */
  flex-shrink: 0; /* Keeps character from shrinking */
}

.item p {
  margin: 0; /* Removes default margins */
}

p {
  font-size: 18px;       /* Desktop body size */
  line-height: 1.5;     /*Standard readability spacing*/
  margin-bottom: 15px;  /* Space between paragraphs */
}

.highlight {
    display: inline;
    color: green;
    font-weight: bold;
}

.invert-image-icon {
  filter: invert(100%);  /*Inverts black to white*/
}

.two-item-flex {
  display: flex; /* Establishes a flex container */
  flex-direction: column;
  padding:10px;
  gap: 10px;     /* Adds space between the columns */
  margin:10px 0;
}
.narrow-by-20vh-desktop {
  margin: 0;
}

.card {
  flex: 1;       /* Each column takes up equal space */
  border-style: none;
  /* background-color: #f9f9f9; Very light gray */
  border-radius: 8px; /* Optional: Softens the corners */
  padding: 10px 10px;
  margin: 15px 10px;
  /* 2px right, 4px down, 8px blur, 30% black */
  /* box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1); */
  /* margin: 20px; */
  /* gap: 20px; */
  /* Use perspective() as a function inside transform */
  /* transform: perspective(1000px) rotateX(10deg) rotateY(-10deg); */

  /* Add depth with shadows and internal offsets */
  /* transition: transform 0.4s ease, box-shadow 0.4s ease;
  box-shadow: 10px 10px 20px rgba(0,0,0,0.2); */
  background: #ffffff; /* Must match parent background */
  box-shadow:
    0 0 5px rgba(0,0,0,0.1),  /* Sharp inner shadow */
    0 0 25px rgba(0,0,0,0.05); /* Soft outer glow */
  /* color: inherit;
  text-decoration: none; */
}

.card:link, .card.a:visited, card.a:hover, .card.a:active {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    text-decoration: none;
    flex: 1;
    min-width: 0;
}

.centered-block {
  text-align: center;
}

.centered-text {
  text-align: center;
}

.text-with-icon-horizontal {
  display: flex;
  align-items: center; /* Perfect vertical alignment */
  gap: 10px;           /* Clean spacing */
}

.text-with-icon-horizontal .icon {
  width: 30px;
  height: 30px;
}

/* .column:hover {
  box-shadow: 20px 30px 40px rgba(0,0,0,0.3);
} */
.main-container {
  margin: 0 15px; /* 10% of screen width on left/right */
}
.div-flex {
  display: grid;
  /* flex: 1 */
  gap: 10px; /* Space between items */
  grid-auto-rows: 1fr;
  padding: 15px 0px;
  margin: 20px 0;
}

.link-container {
  /* Layout */
  display: grid;
  grid-template-columns: 1fr; /*This creates a single column that takes up the full width*/
  gap: 1rem; /* Adds space between items */
  padding: 1rem;
  place-items: center;    /* Centers children both ways */
  /* position: relative;     Allows absolute positioning of the icon */
  min-height: 100px;      /* Give it some height to see the centering */
  text-decoration: none;
  border: 1px solid #ddd;
  border-radius: 8px;
  /* padding: 20px; */
  background-color: #e0e6f1;
}

/* Hover/Focus Effect */
.link-container:hover {
  background-color: #e0e0e0;
  border-color: #999;
}

.link-text {
  font-size: 1.4em;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  max-width:80%;
  text-align: center;
  text-decoration: none;
}

/* .link-container:hover .link-text {
  text-decoration: none;
} */

.svg-image {
    max-width: 40px;
    max-height: 40px;
    width: auto;
    height: auto; /* Maintains aspect ratio */
}
.boat-svg-image {
    max-width: 40px;
    max-height: 40px;
    width: auto;
    height: auto; /* Maintains aspect ratio */
    filter: invert(44%) sepia(33%) saturate(1542%) hue-rotate(173deg) brightness(95%) contrast(107%);
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.feature {
  /* display: grid; */
  /* grid-template-columns: 1fr; This creates a single column that takes up the full width */
  width: 100%;
  /* padding: 0px 20px; */
  gap: 1rem; /* Adds space between items */
  /* padding: 1rem; */
  box-sizing: border-box;
  /* place-items: center;    Centers children both ways */
  /* position: relative;     Allows absolute positioning of the icon */
  /* min-height: 300px;      Give it some height to see the centering */
}

.feature .title {
  font-weight: bold;
  /* font-size: 1.0rem; */
  color: #0d18f1;
  padding: 10px 0px;
  display: block;
}

.feature img {
  width: 100%;
  height: auto;
  display: block;
}

.feature .description {
  /* line-height: 1.6; */
  padding: 10px 0px;
}

.footer-container {
  gap: 10px;
  padding: 20px;
  background-color: black;
  color:white;
  display: grid;
  grid-template-columns: 1fr;
  /* 4 rows now (one per item) */
  grid-template-rows: auto auto auto auto 80px;
}

.footer-item1 {
  margin-right: 15px;
  /* background-color: white; */
  max-width: 400px;  /* your maximum width */
  width: 100%;
 }

.footer-item1 img {
  height: 60px;
  width: auto; /* Sets width to 20% of viewport */
  /*object-fit: contain;  Ensures the image isn't stretched */
  /*max-width: 100%; Ensures the image doesn't overflow its container */
  /*height: auto;    Maintains the original aspect ratio */
  display: block;
  object-fit: cover;  /*Crops the image to fit the area without stretching/
    /* Use 'contain' if you want the whole image to be visible, even if it leaves empty space */
}

  /* Reset spans to 1 column for mobile */
.footer-item1, .footer-item2, .footer-item3, .footer-item4, footer-item5 {
  grid-column: auto;
}

.cta-widget {
  /* display: inline-flex; */
  align-items: center;
  /* border: 1px solid #ffffff; */
  padding: 12px 5px;
  margin: 5px;
  color: #ffffff;
  text-decoration: none;
  border-radius: 4px;
}

/* Instant feedback for mobile taps */
.cta-widget:active {
  background-color: #333333; /* Dark gray tap-down effect */
  transform: scale(0.98);    /* Slight "pressed" animation */
}

.cta-widget a,
.cta-widget a:link,
.cta-widget a:visited,
.cta-widget a:hover,
.cta-widget a:active {
    color: #ffffff;
}

    /* Comic bubble code */
.comic-bubble {
  position: fixed;
  bottom: 35px; /* Distance from bottom */
  right: 90px;  /* Distance from right */
  z-index: 9999; /* Ensures it stays on top */
  background: #fff;
  /* border: 1px solid #000; */
  border-radius: 50%; /* Oval shape typical of comics */
  /* padding: 30px 40px; */
  padding: 10px 20px;
  display: inline-block;
  /*font-family: 'Permanent Marker', cursive;  Comic style font */
  /* font-size: 24px; */
  font-size: 24px;
  /* text-transform: uppercase; */
  /*box-shadow: 5px 5px 0px rgba(0,0,0,0.1);  Subtle shadow for depth */
  box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1);
}

.comic-bubble::before {
  content:"";
  position: absolute;
  z-index: 9998; /* Ensures it stays on top */
  bottom: 11px; /* Distance from bottom */
  right: -12px;  /* Distance from right */
  width: 20px;
  height: 20px;
  background-color: white;
  /* border: 1px solid #000; */
  /* Coordinates: (Top-Left, Bottom-Left, Right-Center) */
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
/* End of speech bubble code */

.float-btn {
  position: fixed;
  bottom: 20px; /* Distance from bottom */
  right: 20px;  /* Distance from right */
  z-index: 9999; /* Ensures it stays on top */
  width: 60px;
  height: 60px;
  /*border-radius: 50%;  Makes it circular */
  border: none;
  /*background-color: #007bff;*/
  /*color: white;*/
  cursor: pointer;
  /*box-shadow: 2px 2px 10px rgba(0,0,0,0.3);*/
}

.icon-home {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url('../site-icons/phone-call-icon.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

@media (min-width: 768px) {
  .div-flex {
    grid-template-columns: repeat(3, 1fr);
  }

  .link-container {
    gap: 2rem; /* Adjust gap for desktop */
    min-height: 200px;
  }

  .centered-block {
    margin: 0 9vw;
  }
  /* Putting this in here instead of faq.css is a kludge
     It was not being honored in faq.css */
  .faq-grid {
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      padding: 20px;
  }

  .grid-container {
    /* grid-template-columns: 1fr 1fr; */
    margin: 0 5vw;
  }

  .two-item-flex {
    flex-direction: row;
    margin: 0 9vw;
    /* gap: 10px;     Adds space between the columns */
  }

 .footer-container {
    /* Desktop: 2 columns */
    grid-template-columns: 1fr 1fr;
    /* Desktop: auto height for the first and second rows, 80px for the third */
    grid-template-rows: auto auto auto 80px;
  }

  .footer-item1 {
    grid-column: 1;
  } /* Spans all cols (Row 1) */

  .footer-item2 { grid-column: 1; }      /* Col 1 (Row 2) */
  .footer-item3 { grid-column: 2; }      /* Col 2 (Row 2) */
  .footer-item4 { grid-column: 1 / -1; } /* Spans all cols (Row 3) */
  .footer-item5 { grid-column: 1 / -1; } /* Spans all cols (Row 4) */
}

/* For now, just target larger sizes than a smartphone */
@media (min-width: 875px) {

  h1 {
    font-size: 42px;
    line-height: 1.1;
  }

  h2 {
    font-size: 32px;
    line-height: 1.2;
  }

  h3 {
    font-size: 24px;
    line-height: 1.3;
  }

  /* p {
    font-size: 22px;
    line-height: 1.5;
    margin-bottom: 15px;
  } */

  .menu-btn {
    display: none;
  }

  .menu {
    list-style: none;
    flex-direction: row;
    position:static;
    margin: 0;
    padding: 0;
    display: flex;
    width: auto;
    /* background-color: #D3D3D3; */
  }

  .menu a {
    /* display: block; */
    padding: 15px 20px;
    /* text-decoration: none; */
    /* color: black; */
    font-size: 1.4em;
    background-color: transparent;
  }

  .menu ul {
    background-color: transparent;
  }

  .menu a:hover,
  .menu a:focus
  {
    /* text-decoration: underline; */
    background-color: white;
    text-decoration-color: rgba(10, 10, 10, 0.7); /*Subtle, semi-transparent underline*/
  }

  .main-container {
    margin: 0 10vw; /* 10% of screen width on left/right */
  }

  .section-bold-text p {
    font-size: 1.4em;
    font-weight: bold;
    margin: 0;
    /* padding: 20px 20px; */
  }

  .two-column-text-flex {
    gap: 20px;     /* Adds space between the columns */
  }

  .link-text {
    font-size: 1.8em;
    text-align: center;
    margin: 0;
  }
}