/**
 * Navigation & Mobile Drawer Styles for Leitrim Books
 * Brand-tailored (Irish Forest Green & Soft Sage Palette)
 * Handles both desktop navigation with gap-proof hover and mobile drawer.
 */

/* ==========================================================================
   GLOBAL BRAND VARIABLES FOR NAVIGATION
   ========================================================================== */
:root {
  --leitrim-nav-green: #23633d;          /* Deep Irish Forest Green */
  --leitrim-nav-green-dark: #1b4d3e;     /* Deep Accent Green */
  --leitrim-nav-emerald: #50c878;        /* Vibrant Irish Emerald */
  --leitrim-nav-pill-hover: rgba(80, 200, 120, 0.14); /* Soft emerald hover tint */
  --leitrim-nav-pill-active: rgba(35, 99, 61, 0.12);  /* Active pill background */
  --leitrim-nav-sub-bg: #eef6ee;         /* Nested container background */
  --leitrim-nav-card-bg: #fcfdfc;        /* Elevated card background */
  --leitrim-nav-card-border: rgba(35, 99, 61, 0.14);  /* Subtle green border */
}

/* Hide default page title hero */
.entry-hero {
  display: none;
}

/* ==========================================================================
   1. DESKTOP NAVIGATION & HEADER (WIDER SCREENS)
   ========================================================================== */
@media (min-width: 1025px) {

  /* Header Row & Brand Polish */
  #masthead {
    border-bottom: 1px solid rgba(35, 99, 61, 0.08);
    transition: box-shadow 0.25s ease;
  }

  /* Soft shadow when scrolling / sticky header is active */
  #masthead .kadence-sticky-header.item-is-fixed {
    box-shadow: 0 4px 20px -2px rgba(27, 77, 62, 0.1) !important;
  }

  /* Micro-interaction on the logo */
  .site-branding a.brand img {
    transition: transform 0.25s ease;
  }
  .site-branding a.brand:hover img {
    transform: scale(1.04);
  }

  /* Top-Level Navigation Items */
  #primary-menu {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  #primary-menu > li.menu-item {
    position: relative;
  }

  #primary-menu > li.menu-item > a {
    padding: 8px 14px !important;
    border-radius: 8px;
    font-size: 0.96rem !important;
    font-weight: 600 !important;
    color: #1a202c !important;
    display: inline-flex !important;
    align-items: center;
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  /* Brand Pill Hover State */
  #primary-menu > li.menu-item:hover > a,
  #primary-menu > li.menu-item > a:hover {
    background-color: var(--leitrim-nav-pill-hover);
    color: var(--leitrim-nav-green-dark) !important;
  }

  /* Active / Current Page Pill */
  #primary-menu > li.menu-item.current-menu-item > a,
  #primary-menu > li.menu-item.current-menu-ancestor > a {
    background-color: var(--leitrim-nav-pill-active);
    color: var(--leitrim-nav-green-dark) !important;
    font-weight: 700 !important;
  }

  /* Dropdown Carat & Smooth 180° Flip Animation */
  #primary-menu > li.menu-item .dropdown-nav-toggle {
    margin-left: 6px;
    display: inline-flex;
    align-items: center;
  }

  #primary-menu > li.menu-item .dropdown-nav-toggle .kadence-svg-icon {
    width: 13px;
    height: 13px;
    opacity: 0.65;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
  }

  #primary-menu > li.menu-item:hover .dropdown-nav-toggle .kadence-svg-icon {
    transform: rotate(180deg);
    opacity: 1;
    color: var(--leitrim-nav-green);
  }

  /* Dropdown "Floating Card" */
  .header-navigation .header-menu-container ul ul.sub-menu {
    background: var(--leitrim-nav-card-bg) !important;
    border: 1px solid var(--leitrim-nav-card-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 30px -4px rgba(27, 77, 62, 0.12), 0 4px 10px -2px rgba(0, 0, 0, 0.04) !important;
    padding: 6px !important;
    min-width: 205px !important;
    margin-top: 0 !important;     /* Eliminates the hover dead-zone */
    overflow: visible !important;  /* Allows the invisible hover bridge to extend */
  }

  /* The Hover Bridge */
  .header-navigation .header-menu-container ul ul.sub-menu::before {
    content: "" !important;
    position: absolute !important;
    top: -20px !important;
    left: 0 !important;
    right: 0 !important;
    height: 20px !important;
    background: transparent !important;
  }

  .header-navigation .header-menu-container ul ul li.menu-item {
    margin: 2px 0;
  }

  /* Dropdown Links */
  .header-navigation .header-menu-container ul ul li.menu-item > a {
    width: 100% !important;
    padding: 9px 12px !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    color: #2d3748 !important;
    border-radius: 8px !important;
    background: transparent !important;
    display: block !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
  }

  /* Hover state inside dropdown */
  .header-navigation .header-menu-container ul ul li.menu-item > a:hover {
    background: var(--leitrim-nav-pill-hover) !important;
    color: var(--leitrim-nav-green-dark) !important;
  }

  /* Active page item inside dropdown */
  .header-navigation .header-menu-container ul ul li.menu-item.current-menu-item > a {
    background: var(--leitrim-nav-pill-active) !important;
    color: var(--leitrim-nav-green-dark) !important;
    font-weight: 600 !important;
  }
}

/* ==========================================================================
   2. MOBILE DRAWER & NAVIGATION
   ========================================================================== */

/* Backdrop Overlay: Modern frosted glass blur */
#mobile-drawer .drawer-overlay {
  background-color: rgba(15, 23, 42, 0.4) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Drawer Shell: Soft natural tone matching Leitrim brand */
#mobile-drawer .drawer-inner {
  background: #f7fbf7 !important;
  width: 320px !important;
  max-width: 85vw !important;
  box-shadow: -10px 0 35px rgba(27, 77, 62, 0.14) !important;
  display: flex;
  flex-direction: column;
}

/* Drawer Header: Title & circular close button */
#mobile-drawer .drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(35, 99, 61, 0.08);
}

#mobile-drawer .drawer-header::before {
  content: "Menu";
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #556b5a;
}

#mobile-drawer .drawer-header .drawer-toggle {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eaf3ea;
  border: none;
  color: #2d3748;
  transition: all 0.2s ease;
}

#mobile-drawer .drawer-header .drawer-toggle:hover,
#mobile-drawer .drawer-header .drawer-toggle:focus {
  background: #d8ebd8;
  transform: rotate(90deg);
  color: var(--leitrim-nav-green-dark);
}

/* Remove default Kadence separator borders */
.mobile-navigation ul li.menu-item-has-children .drawer-nav-drop-wrap,
.mobile-navigation ul li:not(.menu-item-has-children) a {
  border-bottom: none !important;
}

.mobile-navigation:not(.drawer-navigation-parent-toggle-true) ul li.menu-item-has-children .drawer-nav-drop-wrap button {
  border-left: none !important;
}

/* Menu List Container */
#mobile-menu {
  padding: 12px 14px !important;
  margin: 0 !important;
  list-style: none !important;
}

#mobile-menu > li {
  margin-bottom: 4px;
}

/* Top-Level Rows & Links */
.drawer-nav-drop-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-radius: 10px;
  transition: background-color 0.2s ease;
}

#mobile-menu > li > a,
.drawer-nav-drop-wrap > a {
  padding: 12px 14px !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  text-decoration: none !important;
  border-radius: 10px;
  display: block;
  flex: 1;
  transition: all 0.2s ease;
}

/* Hover effect on mobile row */
.drawer-nav-drop-wrap:hover,
#mobile-menu > li:not(.menu-item-has-children) > a:hover {
  background-color: var(--leitrim-nav-pill-hover);
  color: var(--leitrim-nav-green-dark) !important;
}

/* Right-Aligned Submenu Toggle & Arrow Rotation */
.drawer-nav-drop-wrap .drawer-sub-toggle {
  order: 1 !important;
  margin: 0 4px 0 0 !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #64748b !important;
  border: none !important;
  transition: background 0.2s ease, color 0.2s ease;
}

.drawer-nav-drop-wrap .drawer-sub-toggle:hover {
  background: #eaf3ea !important;
  color: var(--leitrim-nav-green-dark) !important;
}

/* Animated chevron rotation when expanded */
.drawer-nav-drop-wrap .drawer-sub-toggle .kadence-svg-icon {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.drawer-nav-drop-wrap .drawer-sub-toggle[aria-expanded="true"] .kadence-svg-icon {
  transform: rotate(180deg);
  color: var(--leitrim-nav-green);
}

/* Nested Submenu Card */
#mobile-menu .sub-menu {
  margin: 4px 4px 10px 14px !important;
  padding: 6px 0 6px 12px !important;
  border-left: 2px solid rgba(35, 99, 61, 0.35) !important; /* Irish forest green branch line */
  background: var(--leitrim-nav-sub-bg) !important;          /* Soft sage well */
  border-radius: 0 10px 10px 0 !important;
  list-style: none !important;
}

#mobile-menu .sub-menu > li {
  margin-bottom: 2px;
}

#mobile-menu .sub-menu > li > a {
  padding: 9px 12px !important;
  font-size: 0.94rem !important;
  font-weight: 500 !important;
  color: #334155 !important;
  text-decoration: none !important;
  border-radius: 6px;
  display: block;
  transition: all 0.15s ease;
}

#mobile-menu .sub-menu > li > a:hover {
  background: var(--leitrim-nav-pill-hover);
  color: var(--leitrim-nav-green-dark) !important;
}

/* Active Item Indicators (Brand pill highlights) */
.mobile-navigation ul li.current-menu-item > a,
.mobile-navigation ul li.current-menu-item > .drawer-nav-drop-wrap > a {
  color: var(--leitrim-nav-green-dark) !important;
  background-color: var(--leitrim-nav-pill-active) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.mobile-navigation ul .sub-menu li.current-menu-item > a {
  background-color: rgba(35, 99, 61, 0.15) !important;
  color: var(--leitrim-nav-green-dark) !important;
  font-weight: 600 !important;
}