/* =============================
   RESPONSIVE + MOBILE STYLES
   ============================= */

/* --- General responsive adjustments --- */
@media (max-width: 1200px) {
  .fsize50 { font-size: 36px; }
}

@media (max-width: 992px) {
  #banner { height: 300px; }
  .banner-text h1 { font-size: 2rem; }
  #content { padding: 40px 0; }
  #content .col-lg-4 {
    border-left: none;
    border-top: 3px solid #004b7c;
    margin-top: 40px;
  }

  footer ul { columns: 1; }
  footer { text-align: center; }
}

/* =============================
   MAP + GRID RESPONSIVE FIXES
   ============================= */
@media (max-width: 992px) {
  #map .row {
    flex-direction: column;
  }
  #map .col-6 {
    width: 100%;
    flex: 1 1 100%;
  }
  #map #map-container {
    padding-right: 0;
    margin-bottom: 20px;
  }
  #map .col-6:last-child {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 200px);
  }
  #map .col-6:last-child img {
    height: 200px;
  }
}

/* =============================
   MOBILE NAVIGATION – SLIDE DOWN MENU
   ============================= */
@media (max-width: 991.98px) {
  /* Hide existing desktop navbars */
  .top-bar,
  .sub-nav {
    display: none !important;
  }

  /* Wrapper that holds the toggler and panel */
  .mobile-menu-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #012169; /* navy blue background */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 9999;
  }

  /* Hamburger button */
  .mobile-menu-toggle {
    background: none;
    border: none;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 5px;
    right: 10px;
    cursor: pointer;
    z-index: 10000;
  }

  /* === CLEAN FIXED THREE-LINE HAMBURGER ICON === */
  .mobile-toggle-icon {
    position: relative;
    display: block;
    width: 32px;
    height: 3px;
    background-color: #fff;  /* middle line */
    border-radius: 2px;
    transition: all 0.3s ease;
    margin: 0 auto;
  }

  .mobile-toggle-icon::before,
  .mobile-toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 32px;
    height: 3px;
    background-color: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
  }

  .mobile-toggle-icon::before {
    top: -9px;
  }
  .mobile-toggle-icon::after {
    top: 9px;
  }

  /* Animate into white X when active */
  .mobile-menu-toggle.active .mobile-toggle-icon {
    background-color: transparent;
  }
  .mobile-menu-toggle.active .mobile-toggle-icon::before {
    transform: rotate(45deg);
    top: 0;
  }
  .mobile-menu-toggle.active .mobile-toggle-icon::after {
    transform: rotate(-45deg);
    top: 0;
  }

  /* Slide-down container */
  .mobile-slide-menu {
    background: #012169; /* blue menu background */
    color: #fff;         /* white text */
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s ease;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .mobile-slide-menu.show {
    max-height: 90vh;
    overflow-y: auto;
  }

  /* Main UL styling */
  .mobile-menu-list {
    list-style: none;
    margin: 0;
    padding: 15px;
  }
  .mobile-menu-list li {
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  /* County toggle buttons */
  .county-toggle {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 12px 0;
    color: #fff; /* white text */
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
  }

  .county-toggle i {
    color: #fff;
    font-size: 0.85rem;
    margin-right: 6px;
    transition: transform 0.3s ease;
  }

  .county-toggle.active i {
    transform: rotate(180deg);
  }

  /* County sub-links */
  .county-links {
    list-style: none;
    margin: 0;
    padding: 0 0 10px 20px;
    display: none;
  }

  .county-links a {
    display: block;
    color: #fff;
    font-size: 0.95rem;
    text-decoration: none;
    padding: 6px 0;
    opacity: 0.85;
  }

  .county-links a:hover {
    color: #fb8838; /* orange accent */
    opacity: 1;
  }

  .county-links.show {
    display: block;
  }

  /* Adjust county link spacing */
  .county-links a {
    padding-left: 15px;
  }
}

/* =============================
   FOOTER ADJUSTMENTS
   ============================= */
@media (max-width: 768px) {
  .footer-logo { max-width: 180px; }
  footer { text-align: center; }
  footer ul { columns: 1; }
}

/* --- FINAL OVERRIDES FOR MOBILE MENU BEHAVIOR --- */
@media (max-width: 991.98px) {
  .nav-outer .top-bar,
  .nav-outer .sub-nav {
    display: none !important;
  }
  .nav-outer {
    position: static !important;
  }
  .mobile-menu-wrapper {
    position: relative;
    z-index: 10000;
  }
}

.menu-logo {
	width: 75%;
	margin: 20px 12.5% 0 12.5%
	}
	
/* =============================
   COUNTY SUBMENU SLIDE ANIMATION
   ============================= */
@media (max-width: 991.98px) {
  /* Start collapsed with zero height */
  .county-links {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      max-height 0.35s ease,
      opacity 0.3s ease;
  }

  /* When opened */
  .county-links.show {
    display: block;
    max-height: 600px; /* plenty of room for all 5 links */
    opacity: 1;
  }

  /* Submenu links spacing and color consistency */
  .county-links a {
    padding-left: 20px;
    color: #fff;
    transition: color 0.2s ease;
  }

  .county-links a:hover {
    color: #fb8838;
  }
}

/* =============================
   FOOTER COUNTIES LIST — TWO COLUMNS, LEFT ALIGNED
   ============================= */
@media (max-width: 991.98px) {
  .footer-counties ul {
    columns: 2;               /* two-column split */
    -webkit-columns: 2;
    -moz-columns: 2;
    column-gap: 30px;         /* spacing between columns */
    list-style: none;
    margin: 0 auto;
    padding: 0;
    text-align: left;         /* keep text aligned left */
    max-width: 320px;         /* prevents columns from stretching too wide */
  }

  .footer-counties li {
    break-inside: avoid;      /* prevents awkward wrapping */
    margin-bottom: 6px;
  }

  .footer-counties a {
    color: #fb8838;
    font-size: 0.95rem;
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .footer-counties a:hover {
    color: #fff;
  }
  
  .pl-40,.pr-40 {
  	padding-left:0;
  	padding-right:0;
  	}
}

/* =============================
   WHITE MENU FONT SIZE ADJUSTMENTS
   ============================= */

/* Default (already set in main.css): 18px */

/* Between 1071px and 1175px — slightly smaller */
@media (max-width: 1175px) and (min-width: 1071px) {
  .nav-link {
    font-size: 17px !important;
  }
}

/* 1070px and below — mobile-friendly sizing */
@media (max-width: 1070px) {
  .nav-link {
    font-size: 16px !important;
  }
}

/* =============================
   SCROLL PANEL → STATIC GRID (RESPONSIVE)
   ============================= */

/* When below ~992px, stop horizontal scrolling
   and reflow into a 12-column responsive grid */
@media (max-width: 991.98px) {
  .scroll-panel {
    overflow-x: visible !important;   /* disable horizontal scroll */
    display: grid !important;
    grid-template-columns: repeat(12, 1fr);  /* 12 equal columns */
    grid-gap: 20px;                   /* column spacing */
    width: 100%;
    padding: 0 15px;
    background-color: rgba(0,0,0,.75);
  }

  /* Optional: children adjust naturally into grid cells */
  .scroll-panel > * {
    min-width: unset;
    flex: none;
    grid-column: span 3;  /* 4 items per row (12 / 3 = 4) */
  }

  /* If you need smaller elements, adjust spans accordingly */
  @media (max-width: 767.98px) {
    .scroll-panel > * {
      grid-column: span 6; /* 2 per row on mobile */
    }
  }

  @media (max-width: 480px) {
    .scroll-panel > * {
      grid-column: span 12; /* stack on narrow screens */
    }
  }

 .scroll-panel-content {
    width: 100vw;            /* span entire viewport width */
    max-width: 100vw;
    padding-left: 0px;
    padding-right: 30px;
  }

  .scroll-panel-slogan {
  	width:75%;
  	}

}

/* Responsive control for smaller screens */
@media (max-width: 768px) {
  .banner-county img {
    max-width: 80px;
  }
}

@media (max-width: 1199.98px) {
  #county-tabs {
    display: none !important; /* hides submenu on mobile/tablet */
  }
}

/* === FORCE WATCH NOW IMAGE SIZING === */
.watchnow-img {
  display: block !important;
  margin: 10px auto !important;
  max-width: 260px !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  z-index: 2;
}

/* tablet */
@media (max-width: 768px) {
  .watchnow-img { max-width: 200px !important; }
}

/* mobile */
@media (max-width: 480px) {
  .watchnow-img { max-width: 150px !important; }
}

@media (max-width: 768px) {
  .inset_graphic,
  .inset_graphic_wide,
  .inset_graphic_wide_clear {
    float: none;
    display: block;
    width: 100%;
    margin: 0 auto 20px auto;
    clear: both;
    text-align: center;
  }

  /* Make sure text no longer wraps oddly beside it */
  .inset_graphic img,
  .inset_graphic_wide img,
  .inset_graphic_wide_clear img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 768px) {
  #sada-newsletter .newsletter-form {
    display: block !important;     /* ✅ stops Flexbox stretching */
    width: 100%;
    max-width: 100%;
    text-align: center;
  }

  #sada-newsletter input,
  #sada-newsletter button {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 10px 0;
    height: 42px;                  /* ✅ consistent compact height */
    line-height: 42px;
    font-size: 0.9rem;
    padding: 0 12px;
    border: none;
    border-radius: 4px;
    box-sizing: border-box;
    -webkit-appearance: none;
  }

  #sada-newsletter input::placeholder {
    color: #666;
    font-size: 0.9rem;
  }

  #sada-newsletter button {
    background: #fb8838;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s ease;
  }

  #sada-newsletter button:hover {
    background: #e07125;
  }
}

@media (max-width: 991.98px) {
  .scroll-panel {
    position: absolute !important;  /* ✅ keep animation anchoring */
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: translateX(100%);     /* ✅ starting position for slide-in */
    transition: transform 0.6s ease-out;
    z-index: 10;
  }

  /* make sure each panel can animate independently */
  .scroll-panel.show {
    transform: translateX(0);        /* ✅ active state */
  }
}

/* === FIX: maintain aspect ratio for mobile map graphics === */
@media (max-width: 992px) {
  #map .col-6:last-child {
    grid-template-rows: none !important; /* stop forcing 200px rows */
  }
  #map .col-6:last-child img {
    height: auto !important; /* let height scale naturally */
    width: 100%;
    object-fit: cover;
    display: block;
  }
}