/* ==========================================================================
   Lokahi Site Enhancements
   Modern polish layer on top of the Weebly base theme
   ========================================================================== */

/* --- Prevent horizontal overflow --- */
body {
  overflow-x: hidden;
  max-width: 100vw;
  overscroll-behavior-y: none;
}

/* --- Gothic Font --- */
@font-face {
    font-family: 'Old London';
    font-style: normal;
    font-weight: 400;
    src: local('Old London'), url('https://fonts.cdnfonts.com/s/7865/OldLondon.woff') format('woff');
}

/* --- Text Logo --- */
/* --- Persistent Nav Bar --- */
.nav-wrap {
  opacity: 1 !important;
  transition: none !important;
}

/* Header hide/show on scroll - all devices */
.header {
  transition: transform 0.3s ease;
}
.header.nav-hidden {
  transform: translateY(-100%);
}

/* Hide mobile-inline-nav on desktop */
.mobile-inline-nav {
  display: none;
}

/* Persistent fixed nav bar - desktop */
@media (min-width: 768px) {
  .header,
  .header.stuck {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
  }

  .main-wrap {
    padding-top: 80px;
  }

  body.header-page .main-wrap {
    padding-top: 0;
  }
}

/* Center Lokahi logo in nav on home page load - desktop only */
@media (min-width: 768px) {
  body.wsite-page-index .banner-wrap {
    padding-top: 20px;
    background: #000;
  }

  body.wsite-page-index .wsite-header-section .wsite-section-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
}

.logo,
.logo .wsite-logo {
  overflow: visible !important;
  max-height: none !important;
}

.logo a {
  padding: 5px 20px 5px 0 !important;
}

.text-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  gap: 6px;
  line-height: 1;
  margin-top: -8px;
  margin-left: -12px;
}

.text-logo:hover {
  text-decoration: none;
  opacity: 0.85;
}

.text-logo-name {
  font-family: 'Old London', 'UnifrakturCook', cursive;
  font-size: 76px;
  color: #da4444;
  -webkit-text-stroke: 2px #1a1a1a;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.3);
  line-height: 1;
  letter-spacing: 1px;
}

.text-logo-sub {
  font-family: 'Amaranth', 'Open Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 3px;
  line-height: 1.35;
}

@media (max-width: 767px) {
  .text-logo {
    margin-left: 0;
  }
  .text-logo-name {
    font-size: clamp(24px, 7vw, 32px);
  }
  .text-logo-sub {
    font-size: 10px;
    letter-spacing: 1.5px;
  }

  /* Hide hamburger and old mobile nav on mobile */
  .hamburger,
  .mobile-nav {
    display: none !important;
  }

  /* Hide "Outrigger Canoe Club" subtitle on mobile */
  .text-logo-sub.desktop-only {
    display: none !important;
  }

  /* Inline mobile nav links */
  .header .container {
    display: flex !important;
    align-items: center !important;
  }
  .mobile-inline-nav {
    display: flex !important;
    gap: 0;
    align-items: center;
    margin-left: auto;
  }
  .mobile-inline-nav a {
    color: #333 !important;
    font-family: 'Amaranth', sans-serif;
    font-weight: 700;
    font-size: clamp(11px, 3.2vw, 15px);
    text-transform: uppercase;
    text-decoration: none;
    padding: 4px clamp(2px, 1vw, 6px);
    white-space: nowrap;
    letter-spacing: 0px;
  }
  .mobile-inline-nav a:hover,
  .mobile-inline-nav a.active {
    color: #da4444 !important;
  }

  /* Compact mobile nav - dropdown near hamburger (legacy, hidden) */
  .mobile-nav.legacy-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
    max-height: 0 !important;
    overflow: hidden !important;
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 0 !important;
    transition: max-height 0.3s ease, padding 0.3s ease !important;
    z-index: 9999 !important;
  }

  body.nav-open .mobile-nav {
    max-height: 350px !important;
    padding: 50px 0 15px !important;
  }

  .mobile-nav ul,
  .mobile-nav li,
  .mobile-nav .wsite-menu-default {
    background: transparent !important;
  }

  .mobile-nav li a {
    color: #fff !important;
  }

  .mobile-nav .hamburger span:before,
  .mobile-nav .hamburger span:after {
    background: #fff !important;
  }

  body.nav-open {
    overflow: auto !important;
  }

  .mobile-nav .hamburger {
    top: 12px !important;
    left: 15px !important;
  }

  .mobile-nav li,
  .mobile-nav .wsite-custom-membership-wrapper {
    padding: 2px 0 !important;
  }

  .mobile-nav li a {
    font-size: 15px !important;
    padding: 8px 20px !important;
  }

  /* Fix parallax on mobile - iOS doesn't support background-attachment: fixed */
  .wsite-section-effect-parallax,
  .wsite-section[style*="background-attachment: fixed"] {
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center center !important;
  }

}

/* --- Standardize hero banner heights (not home page) --- */
body:not(.wsite-page-index) .wsite-header-section {
  height: 450px !important;
}

/* --- Compact black header sections --- */
.wsite-section-bg-color[style*="background-color: #020202"] {
  min-height: 0 !important;
}

.wsite-section-bg-color[style*="background-color: #020202"] .wsite-section-content {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* --- Smooth Scrolling --- */
html {
  scroll-behavior: smooth;
}

/* --- Override Weebly reveal effect (main.js removed) --- */
.wsite-section-effect-reveal .wsite-section-content > * {
  visibility: visible !important;
}

/* --- Global Transitions --- */
a,
.wsite-button,
.wsite-button-inner,
.wsite-menu-default a,
.wsite-menu a,
.wsite-social-item,
.galleryCaptionInnerText {
  transition: color 0.25s ease, background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}

/* --- Button Style: match Submit button (bright red, white text) --- */
.wsite-button,
a.wsite-button,
.paragraph a.wsite-button,
.wsite-not-footer .paragraph a.wsite-button {
  background-color: #ed1c24 !important;
  border: none !important;
  opacity: 1 !important;
}
.wsite-button .wsite-button-inner,
a.wsite-button .wsite-button-inner,
.paragraph a.wsite-button .wsite-button-inner {
  color: #fff !important;
}
.wsite-button:hover,
a.wsite-button:hover {
  background-color: #d41920 !important;
}

/* --- Button Hover Effects --- */
.wsite-button {
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.wsite-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  filter: brightness(1.1);
}

.wsite-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* --- Navigation Hover Polish --- */
.wsite-menu-default a:hover,
.wsite-menu a:hover {
  opacity: 0.85;
}

.wsite-menu-default a::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: #ed1c24;
  transition: width 0.3s ease;
  margin-top: 2px;
}

.wsite-menu-default a:hover::after {
  width: 100%;
}

/* --- Gallery Image Hover Effects --- */
.imageGallery .galleryCaptionInnerText {
  transition: opacity 0.3s ease;
}

.imageGallery a {
  display: inline-block;
  overflow: hidden;
  border-radius: 4px;
}

.imageGallery img {
  transition: transform 0.4s ease, filter 0.3s ease;
}

.imageGallery a:hover img {
  transform: scale(1.05);
  filter: brightness(1.08);
}

/* --- Social Icon Hover --- */
.wsite-social-item {
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.wsite-social-item:hover {
  transform: scale(1.15);
  opacity: 0.8;
}

/* --- Scroll Fade-In Animation (disabled for single-page layout) --- */

/* --- Image Polish --- */
.wsite-image img,
.wsite-multicol-table img {
  border-radius: 4px;
}

/* --- Parallax Section Overlay (better text readability) --- */
.wsite-section[data-bg-proportions] .wsite-section-bg-overlay {
  transition: opacity 0.3s ease;
}

/* --- Form Input Polish --- */
.wsite-form-input,
.wsite-form-field select {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  border-radius: 4px !important;
}

.wsite-form-input:focus,
.wsite-form-field select:focus {
  border-color: #3387a2 !important;
  box-shadow: 0 0 0 3px rgba(51, 135, 162, 0.15);
  outline: none;
}

/* --- Footer Polish --- */
.wsite-footer {
  border-top: 3px solid #ed1c24;
}

/* --- Better Focus States (accessibility) --- */
a:focus-visible,
button:focus-visible,
.wsite-button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #3387a2;
  outline-offset: 2px;
}

/* --- Video Container Polish --- */
video {
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* --- Slideshow Polish --- */
.wsite-slideshow-container {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* --- Practice Schedule Table Polish --- */
.wsite-multicol-table table,
table.schedule-table {
  border-radius: 6px;
  overflow: hidden;
}

/* --- Mobile Improvements --- */
@media (max-width: 767px) {
  /* Contain overflow */
  .wsite-section-wrap,
  .wsite-section,
  .wsite-section-content,
  .container,
  .wsite-multicol-table-wrap,
  .wsite-multicol-table {
    max-width: 100vw;
    overflow-x: hidden;
  }

  .wsite-multicol-table {
    table-layout: fixed;
    width: 100%;
  }

  img, video, iframe {
    max-width: 100% !important;
    height: auto;
  }

  /* Keep 3-icon section side-by-side on mobile */
  .three-icons-section .wsite-multicol-table {
    display: flex !important;
    table-layout: auto;
  }
  .three-icons-section .wsite-multicol-tbody {
    display: flex !important;
    width: 100%;
  }
  .three-icons-section .wsite-multicol-tr {
    display: flex !important;
    width: 100%;
  }
  .three-icons-section .wsite-multicol-col {
    width: 33.33% !important;
    padding: 0 5px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .three-icons-section .wsite-multicol-col > div:last-of-type {
    margin-top: auto;
  }
  .three-icons-section img {
    width: 60px !important;
  }
  .three-icons-section h2 {
    font-size: 14px !important;
  }
  .three-icons-section .wsite-button-inner {
    font-size: 12px !important;
  }

  /* Hide contact sidebar (logo/address) on mobile - footer has it */
  .contact-sidebar {
    display: none !important;
  }

  /* Larger tap targets */
  .wsite-button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Better mobile form inputs */
  .wsite-form-input,
  .wsite-form-field select,
  .wsite-form-field textarea {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
    min-height: 48px;
  }

  /* Mobile nav improvements */
  .mobile-nav .wsite-menu-default a {
    padding: 14px 20px;
  }

  .mobile-nav .wsite-menu-default a::after {
    display: none;
  }
}

/* --- Scroll margin for anchor navigation --- */
[id] { scroll-margin-top: 80px; }

/* --- Section dividers --- */
.section-divider {
  position: relative;
  height: 400px;
  overflow: hidden;
}
.section-divider img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Reduce Motion for accessibility --- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .fade-in-section {
    opacity: 1;
    transform: none;
  }
}