/**
 * Modern CSS - Replaces jQuery plugin visual effects
 * Batavia Seventh-day Adventist Church
 */

/* ==========================================
 * FULL-PAGE BACKGROUND IMAGE (replaces Backstretch)
 * ========================================== */

body {
  background-image: url('../wp-content/themes/risen/images/backgrounds/sun.jpg');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* On small screens, skip the large background for performance
   (matches the original screen.width > 480 check) */
@media only screen and (max-width: 480px) {
  body {
    background-image: none;
  }
}

/* ==========================================
 * IMAGE HOVER FADE (replaces jQuery .fadeTo on .image-frame)
 * ========================================== */

.image-frame a img {
  transition: opacity 0.35s ease;
}

.image-frame:hover a img {
  opacity: 0.6;
}

/* ==========================================
 * DROPDOWN MENU (replaces Superfish/Supersubs/hoverIntent)
 * The existing theme CSS already positions .sf-menu ul at top:-999em
 * and moves it on :hover. We add smooth transitions here.
 * ========================================== */

/* Override Superfish's JS-driven behavior - use pure CSS :hover */
.sf-menu ul {
  transition: opacity 0.3s ease, visibility 0.3s ease;
  opacity: 0;
  visibility: hidden;
  /* Keep position: absolute and top from existing CSS */
}

.sf-menu li:hover > ul {
  opacity: 1;
  visibility: visible;
  top: 2em;
  left: -7px;
  z-index: 12000;
}

/* Ensure sub-sub-menus don't show prematurely */
.sf-menu li:hover > ul ul {
  opacity: 0;
  visibility: hidden;
}

.sf-menu li li:hover > ul {
  opacity: 1;
  visibility: visible;
  left: 10em;
  top: 0;
}

/* ==========================================
 * HOMEPAGE SLIDER (replaces FlexSlider)
 * ========================================== */

/* Show first slide by default even without JS */
.flexslider .slides > li:first-child {
  display: block;
}

/* The slider container needs relative positioning for absolute-positioned slides */
.flexslider {
  position: relative;
  overflow: hidden;
}

.flexslider .slides {
  position: relative;
}

.flexslider .slides > li {
  /* JS will control display/opacity; just make sure images are block */
}

.flexslider .slides > li img {
  width: 100%;
  height: auto;
  display: block;
}

/* Control Nav Dots - match existing .flex-control-nav styling */
ol.flex-control-nav {
  width: 100%;
  position: absolute;
  bottom: -30px;
  text-align: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

ol.flex-control-nav li {
  margin: 0 0 0 5px;
  display: inline-block;
}

ol.flex-control-nav li:first-child {
  margin: 0;
}

ol.flex-control-nav li a {
  width: 14px;
  height: 14px;
  display: block;
  background-repeat: no-repeat;
  background-size: 14px 42px;
  cursor: pointer;
  text-indent: -999em;
  overflow: hidden;
}

/* Use the existing slider-control-nav sprite from the theme */
ol.flex-control-nav li a {
  background-image: url('../wp-content/themes/risen/styles/light/images/slider-control-nav.png');
}

ol.flex-control-nav li a:hover {
  background-position: 0 -14px;
}

ol.flex-control-nav li a.active,
ol.flex-control-nav li a.active:hover {
  background-position: 0 -28px;
  cursor: default;
  /* Use the theme's accent color for the active dot */
  background-color: #6a8fab;
  border-radius: 50%;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min-resolution: 120dpi), only screen and (-o-min-device-pixel-ratio: 5/4) {
  ol.flex-control-nav li a {
    background-image: url('../wp-content/themes/risen/styles/light/images/slider-control-nav@2x.png');
  }
}

/* ==========================================
 * MOBILE HAMBURGER MENU (replaces SelectNav)
 * ========================================== */

/* Hamburger button - hidden by default on desktop */
#mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  margin: 6px auto 3px auto;
}

#mobile-menu-toggle span {
  display: block;
  width: 24px;
  height: 3px;
  background-color: #fff;
  margin: 4px 0;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Animate hamburger to X when active */
#mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

#mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

#mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile styles at 640px breakpoint (matching the theme's existing breakpoint) */
@media only screen and (max-width: 640px) {

  #header-menu-inner {
    text-align: center;
  }

  #mobile-menu-toggle {
    display: block;
  }

  /* Hide the desktop menu by default on mobile */
  #header-menu-links {
    display: none;
    float: none !important;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Show when toggled */
  #header-menu-links.mobile-open {
    display: block;
  }

  /* Stack menu items vertically */
  #header-menu-links > li {
    display: block !important;
    margin: 0 !important;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  #header-menu-links > li > a {
    display: block !important;
    padding: 10px 0;
    font-size: 1em;
  }

  /* Hide dropdown submenus by default on mobile */
  #header-menu-links .sub-menu {
    display: none;
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
    background: rgba(0, 0, 0, 0.15);
  }

  /* Show submenu when parent is toggled open */
  #header-menu-links .menu-item-has-children.mobile-sub-open > .sub-menu {
    display: block;
  }

  #header-menu-links .sub-menu li a {
    color: #fff !important;
    border: none !important;
    padding: 8px 15px !important;
    font-size: 0.9em;
    text-align: center;
  }

  #header-menu-links .sub-menu li a:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  /* Override the old selectnav-related rules */
  .selectnav {
    display: none !important;
  }
}

/* ==========================================
 * RETINA LOGO FIX
 * Ensure hidpi logo uses correct dimensions via CSS
 * ========================================== */

#logo-hidpi[width] {
  display: none;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min-resolution: 120dpi), only screen and (-o-min-device-pixel-ratio: 5/4) {
  .has-hidpi-logo #logo-regular {
    display: none;
  }

  .has-hidpi-logo #logo-hidpi[width] {
    display: inline-block;
  }
}

/* ==========================================
 * REMOVE no-js / .js CLASS DEPENDENCIES
 * The old Modernizr added .js to <html>. Since we are removing Modernizr,
 * we handle this with a tiny inline or just CSS overrides.
 * ========================================== */

/* The theme CSS uses .js prefix for selectnav and mobile menu visibility.
   Since we no longer have Modernizr, override those rules so the
   regular menu shows on desktop regardless of .js class presence. */
#header-menu-links {
  visibility: visible !important;
  position: static !important;
  left: auto !important;
}