/* 

/* =======================================================================
   Hawg Hunters Navigation Bar - STYLES ONLY
   Future Dave:
   - This file assumes Bootstrap 4.3.1 and a navbar that collapses
     below 992px (e.g. .navbar-expand-lg).
   - Top-level dropdowns use .nav-item.dropdown + .nav-link.dropdown-toggle
   - Nested "decades" use .dropdown-submenu + a.submenu-toggle
   - Nested "years" are plain .dropdown-item inside the submenu <ul>.
   ======================================================================= */

  /*========================================================================
  -final version with everything working correctly
-minor difference between MAMP server and (live) Godaddy Server but acceptable.
    a.  MAMP version:
        - decades menus stack under archives menu
        - years menus flyout to right
    b.  Godaddy version
        - decades menus go out right
        years menus go flyout to right

Tested on Galaxy S-10 phone
    - all menus tested good - everything operational 
    =======================================================================*/


/* ================================
   RESTORE WORKING SUBMENU SYSTEM
   ================================ */

/* Desktop submenu flyout */
@media (min-width: 992px) {

    .dropdown-submenu {
        position: relative;
    }

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-left: 0.15rem;
        margin-top: -0.35rem;
        display: none;
    }

    /* open submenu on hover */
    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }

}
/* Disable future months that do not have pages yet */
.dropdown-item.disabled {
    pointer-events: none;
    opacity: 0.45;
}

/* =======================================================================
   1. BASE NAVBAR SPACING / TYPOGRAPHY (ALL SIZES)
   ======================================================================= */

/* Compact navbar bar height */
.navbar {
    padding-top: 0.30rem;
    padding-bottom: 0.30rem;
}

/* Compact top-level links */
.navbar-nav .nav-link {
    padding: 0.35rem 0.75rem;
    font-size: 0.95rem;
}

/* Base dropdown menu styling */
.dropdown-menu {
    font-size: 0.90rem;
    min-width: 12rem;
}

/* Centered dropdown headers like "Newsletter Archives" */
.dropdown-header {
    white-space: normal !important;
    max-width: 180px;
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 auto;
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
}

/* Slightly smaller dropdown links */
.dropdown-item {
    padding: 0.25rem 1rem;
    font-size: 0.90rem;
}

/* Divider spacing */
.dropdown-divider {
    margin: 0.25rem 0 !important;
}


/* =======================================================================
   2. DESKTOP BEHAVIOR (>= 992px)
   Future Dave:
   - Desktop = hover to open
   - Submenus fly out horizontally (right by default, left at right edge)
   - No accordion behavior here (that is mobile-only)
   ======================================================================= */

@media (min-width: 992px) {
    /* =========================================================
    DESKTOP ARCHIVES BEHAVIOR
    Lazy-open archive groups, accordion decades
    ========================================================= */
    /* 1️⃣ Hide EVERYTHING nested by default */
    .nav-item.dropdown .dropdown-submenu > .dropdown-menu {
        display: none;
    }
   /* 2️⃣ Hover Archives → show all archive groups */
    .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
    }
    
     /* Archive Group  */
    /* Hide archive groups by default */
  .archives-dropdown .dropdown-submenu > .dropdown-menu {
    display: none;
  }

  /* Keep archive container open */
  .archives-dropdown.archive-open > .dropdown-menu {
    display: block;
  }

  /* Lazy-open archive group */
  .archives-dropdown .dropdown-submenu:hover > .dropdown-menu {
    display: block;
  }

  /* Decade → years flyout */
  .dropdown-submenu .dropdown-submenu:hover > .dropdown-menu {
    display: block;
  }


    /* Keep dropdown snug under the nav link */
    .navbar .dropdown-menu {
        margin-top: 0;
    }
    /* =========================================================
    DESKTOP: Vertical scrolling for long dropdowns
    ========================================================= */
    /* 1️⃣ Top-level dropdowns MAY scroll (Standings, Newsletter, Pictures, Rules) */
    .navbar-nav > li.nav-item.dropdown:not(.archives-dropdown) > .dropdown-menu {
        max-height: 80vh;
        overflow-y: auto;
        overflow-x: visible;
    }

    /* 2️⃣ Archives dropdown: NEVER scroll, NEVER clip */
    .archives-dropdown > .dropdown-menu {
        max-height: none;
        overflow: visible;
    }

    /* 3️⃣ Decades panels: NEVER scroll, NEVER clip */
    .archives-dropdown .dropdown-submenu > .dropdown-menu {
        max-height: none;
        overflow: visible;
    }

    /* 4️⃣ YEARS flyout: ONLY scrollable submenu */
    .dropdown-submenu .dropdown-submenu > .dropdown-menu {
        display: block;
        max-height: calc(100vh - 140px);
        overflow-y: auto;
        overflow-x: hidden;
    }
    

    /* ---------------------------------------------------------------
       2.2 Submenu positioning (decades -> years flyout)
       --------------------------------------------------------------- */
    /* Anchor for the absolutely-positioned submenu <ul> */
    .dropdown-submenu {
        position: relative;
    }

    /* Default: fly out to the right of the parent */
    .dropdown-submenu > .dropdown-menu {
        position: absolute;
        top: 0;             /* align vertically with parent row */
        left: 100%;         /* start at right edge of parent */
        margin-top: 0;
        margin-left: -10px;
        margin-right: 0;
        border-radius: 0.25rem;
    }
    /* =========================================================
    DESKTOP: Cascade decades (no flyout)
    ========================================================= */
    /* First-level submenu (Archives → Newsletter/Tournament/John’s) */
    .dropdown-menu > .dropdown-submenu > .dropdown-menu {
        position: static;
        display: none;    
        margin-left: 0;
    }
/* =========================================================
   DESKTOP: Flyout YEARS only
   ========================================================= */
    /* Decade → Years flyout */
    .dropdown-submenu .dropdown-submenu > .dropdown-menu {
        position: absolute;
        top: 0;
        left: 100%;
        margin-left: -10px; 
        display: none;
        min-width: 4rem; /* years should be compact */
        padding-right: 0.25rem;
    }
    /* Compact year items */
    .dropdown-submenu .dropdown-submenu > .dropdown-menu .dropdown-item {
        padding-left: 1.25rem;
        padding-right: 1rem;
    }
/* =========================================================
   DESKTOP: Base dropdown width (top-level) Archives wording controling width
   ========================================================= */
    .navbar .dropdown-menu {
        min-width: 10rem;   /* tighter than Bootstrap default (10rem–12rem is ideal) */
        width: auto;
        white-space: nowrap;
    }

/* ---------- LEVEL 2: submenu items (Newsletter, Tournament, John’s) ---------- */
.dropdown-menu > .dropdown-submenu > .submenu-toggle {
    position: relative;
    padding-right: 1.75rem;
}

/* ==========================================================
   DESKTOP CARETS — FINAL (DO NOT MODIFY)
   Level 1: Bootstrap default
   Level 2: rotate 90°
   Level 3: rotate 45°
   ========================================================== */

.dropdown-menu > .dropdown-submenu > .submenu-toggle::after {
    content: "";
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;

    /* right-pointing triangle */
    border-top: 0.35rem solid transparent;
    border-bottom: 0.35rem solid transparent;
    border-left: 0.35rem solid #555;

    transition: transform 0.15s ease;
}

/* Rotate 90° on hover (points down) (Newsletter, Tournament, John’s) */
.dropdown-menu > .dropdown-submenu:hover > .submenu-toggle::after {
    transform: translateY(-50%) rotate(90deg);
}

/* ---------- LEVEL 3: decade rows (2020s, 2010s, 2000s) ---------- */
.dropdown-submenu .dropdown-submenu > .submenu-toggle::after {
    transform: translateY(-50%);
}

/* Rotate 45° on hover (points toward years) */
.dropdown-submenu .dropdown-submenu:hover > .submenu-toggle::after {
    transform: translateY(-50%) rotate(45deg);
}

/* =========================================================
   DESKTOP: prevent right-edge overflow (Rules menu)
   ========================================================= */

    /* When a dropdown is right-aligned, flip its submenus LEFT */
    .navbar-nav .dropdown-menu-end .dropdown-menu {
        right: 100%;
        left: auto;
        margin-left: 0;
        margin-right: -70px;
    }

    
    
   /* =========================================================
   DESKTOP: Indent ONLY decade items (one level deeper)
   ========================================================= */
    .navbar .archives-dropdown > .dropdown-menu > li.dropdown-submenu > .dropdown-menu
    > li.dropdown-submenu > a.submenu-toggle {
        padding-left: 1.75rem;  /* decades only */
    }

    /* ---------------------------------------------------------------
       2.4 Submenu link spacing (years)
       --------------------------------------------------------------- */
    /* Year items under each decade (desktop): modest indent */
    .dropdown-submenu > .dropdown-menu .dropdown-item {
        padding-left: 1.25rem;
    }
    
}
/* ==========================================================
   DESKTOP EDGE FIX — flip YEARS flyout left in tight widths
   Applies only between 992px and ~1100px
   ========================================================== */
@media (min-width: 992px) and (max-width: 1100px) {

  /* Target ONLY the Years flyout (submenu of submenu) */
  .dropdown-submenu .dropdown-submenu > .dropdown-menu {
      left: auto;
      right: 100%;
      margin-left: 0;
      margin-right: .1rem;
  }
}


/* =======================================================================
   3. MOBILE / TABLET BEHAVIOR (< 992px)
   Future Dave:
   - This is the hamburger mode.
   - All dropdowns stack vertically.
   - Submenus act like an accordion (click to expand/collapse).
   - We assume JS toggles .show on the <ul> and .open on the .submenu-toggle.
   ======================================================================= */

@media (max-width: 991.98px) {

    /* ---------------------------------------------------------------
       3.1 Reset dropdown menus to be "inline" with the flow
       --------------------------------------------------------------- */
    .navbar-nav .dropdown-menu {
        position: static;
        float: none;
        border: 0;
        box-shadow: none;
        margin: 0;
        padding: 0.25rem 0;
    }

    /* Submenu <ul> (years list) stays inside flow with indent */
    .dropdown-submenu > .dropdown-menu {
        padding-left: 0.75rem;   /* main indent for years block */
        margin: 0;
        border-left: 2px solid #444; /* visual guide */
    }

   /* ---------------------------------------------------------------
   3.2 SUBMENU HEADERS (ALL LEVELS)
   - Newsletter / Tournament / John’s
   - Decades
   --------------------------------------------------------------- */
    .dropdown-submenu > .submenu-toggle {
        position: relative;
        display: block;
        width: 100%;
        padding: 0.35rem 1rem;
        padding-right: 1.75rem;   /* room for caret */
        font-weight: 500;
    }

    /* Caret (closed state) */
    .dropdown-submenu > .submenu-toggle::after {
        content: "▼";
        position: absolute;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.65rem;
        opacity: 0.9;
    }

    /* Open state (JS toggles .open) */
    .dropdown-submenu > .submenu-toggle.open::after {
        content: "▲";
    }

    /* ---------------------------------------------------------------
    3.3 NESTED SUBMENUS — indentation by depth
    --------------------------------------------------------------- */

    /* Level 2 submenu list */
    .dropdown-submenu > .dropdown-menu {
        padding-left: 0.75rem;
        margin: 0;
        border-left: 2px solid #444;
    }

    /* Level 3 submenu list (Decades → Years) */
    .dropdown-submenu .dropdown-submenu > .dropdown-menu {
        padding-left: 1.25rem;
        border-left: 2px solid #666;
    }

    /* Year rows */
    .dropdown-submenu .dropdown-menu .dropdown-item {
        padding-left: 1.75rem;
    }
   
    /* =========================================================
    MOBILE — Years list scroll containment
    ========================================================= */

    /* Years dropdown (inside decade) */
    .dropdown-submenu .dropdown-submenu > .dropdown-menu {
        max-height: 50vh;          /* limit height on small screens */
        overflow-y: auto;          /* enable scrolling */
        overscroll-behavior: contain; /* stop scroll chaining to page */
        -webkit-overflow-scrolling: touch; /* smooth iOS scroll */
    }

    /* ---------------------------------------------------------------
       3.4 Hide disabled "months" in mobile to shorten menus
       --------------------------------------------------------------- */
    .dropdown-menu .dropdown-item.disabled {
        display: none !important;   /* removes unused months */
    }

    /* ---------------------------------------------------------------
       3.5 Optional: allow page to scroll while nav is open
       Future Dave:
       - If body gets a class like .mobile-nav-open when the navbar
         is expanded, this prevents Bootstrap from locking scroll.
       - Only use if you have JS to toggle the class.
       --------------------------------------------------------------- */
    body.mobile-nav-open {
        overflow-y: auto !important;
    }

   
 /* =========================================================
   MOBILE — Allow full menu to scroll
   ========================================================= */

    
    .navbar-collapse.show {
        max-height: calc(100vh - 56px); /* 56px = navbar height */
        overflow-y: auto;
        overscroll-behavior: contain;
    }
   
}
/* ==========================================================
   DESKTOP HOVER STABILITY — ARCHIVES (992px and up)
   Keeps Archives → Decades → Years open while hovering
   anywhere inside the flyout
   ========================================================== */
@media (min-width: 992px) {

  /* Keep the first-level Archives dropdown open */
  .archives-dropdown:hover > .dropdown-menu {
    display: block;
  }

  /* Keep nested submenus open while hovering inside them */
  .archives-dropdown .dropdown-menu:hover,
  .archives-dropdown .dropdown-submenu:hover > .dropdown-menu {
    display: block;
  }
}