/* ============================================================
   SURFA FOOTER NAV — flat country list, 4 columns
   Colors matched to onez (#144a68 blue)
   ============================================================ */



.surfa-footer-nav {
  padding: 50px 20px 101px 20px;
  background: #1a3748;
  color: #fff;
  border-bottom: 1px solid #fff;
}

.surfa-footer-site-name {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 0 30px 0;
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #c9a96e;
}

.surfa-footer-list {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  column-count: 4;
  column-gap: 40px;
}

.surfa-footer-list li {
  break-inside: avoid;
  margin: 5px 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.4;
}

.surfa-footer-list li a {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 0.1px;
  text-decoration-color: rgb(120 120 120);
  font-weight: 300;
}

.surfa-footer-list li a:hover {
  text-decoration-color: #fff;
}

.surfa-footer-list li a img {
  flex-shrink: 0;
  width: 23px;
  height: auto;
  vertical-align: middle;
}

/* Responsive — mirror onez breakpoints */
@media (max-width: 1024px) {
  .surfa-footer-list { column-count: 3; }
}

@media (max-width: 768px) {
  .surfa-footer-list { column-count: 2; }
}

@media (max-width: 480px) {
  .surfa-footer-list { column-count: 1; }
}

/* ============================================================
   SURFA SEASONAL CONDITIONS TABLE — sideways scroll on mobile
   Wrapper scrolls, table keeps its width instead of squashing
   ============================================================ */



@media (max-width: 768px) {
.surf-seasonal-scroll {
  overflow-x: auto;
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center,
    linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.45), rgba(0,0,0,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.45), rgba(0,0,0,0)) right center;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 30px 100%, 30px 100%;
  background-attachment: local, local, scroll, scroll;
}
}


.surf-seasonal-scroll .surf-seasonal-table {
  min-width: 640px;
}