/* Deepam Society - "OUR WORK" dropdown navigation (desktop) + accordion (mobile) */

/* Chevron on any top-level item that has children.
   NOTE: the top-level <ul> is NOT a direct child of .deepam-nav (Elementor
   wraps it in a widget + .elementor-shortcode div), so a "> ul > li" selector
   never matches anything. Target any <li> whose parent <ul> is not itself a
   .sub-menu instead — that correctly means "top-level" regardless of wrapper
   depth, while still excluding items inside a dropdown panel. */
.deepam-nav ul:not(.sub-menu) > li.menu-item-has-children > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* All 5 dropdown parents (About Us, Our Programs, Our Work, Get Involved,
   Media & Updates) share the same normal nav styling and just gain the
   chevron below, so the top-level row reads consistently. */
.deepam-nav ul:not(.sub-menu) > li.menu-item-has-children > a::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.deepam-nav ul:not(.sub-menu) > li.menu-item-has-children:hover > a::after,
.deepam-nav ul:not(.sub-menu) > li.menu-item-has-children.deepam-submenu-open > a::after {
  transform: rotate(-135deg);
}

/* Dropdown panel */
.deepam-nav li.menu-item-has-children { position: relative; }
.deepam-nav ul.sub-menu,
.deepam-nav ul.sub-menu ul.sub-menu {
  display: flex !important; /* override the top-level nav's display:flex so dropdown items stack vertically, one per row */
  flex-direction: column !important;
  align-items: stretch !important;
}
.deepam-nav ul.sub-menu > li {
  width: 100% !important;
  flex: 0 0 auto !important;
}
.deepam-nav ul.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  margin: 0;
  padding: 14px;
  list-style: none;
  background: #FFFFFF;
  box-shadow: 0 16px 40px rgba(18, 61, 53, 0.16);
  border-radius: 14px;
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.deepam-nav li.menu-item-has-children:hover > ul.sub-menu,
.deepam-nav li.menu-item-has-children:focus-within > ul.sub-menu,
.deepam-nav li.menu-item-has-children.deepam-submenu-open > ul.sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.deepam-nav ul.sub-menu li { position: relative; }
.deepam-nav ul.sub-menu li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #263238;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 10px;
  border-left: 3px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.deepam-nav ul.sub-menu li > a:hover,
.deepam-nav ul.sub-menu li > a:focus-visible {
  background-color: #F7F5EF;
  color: #F47A21;
  transform: translateX(4px);
  border-left-color: #F47A21;
}
.deepam-nav ul.sub-menu li > a:focus-visible { outline: 2px solid #123D35; outline-offset: -2px; }

/* "View All Programs →" footer link inside the Our Programs dropdown */
.deepam-nav ul.sub-menu li.deepam-nav-viewall,
.deepam-offcanvas ul.sub-menu li.deepam-nav-viewall {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(18, 61, 53, 0.1);
}
.deepam-nav ul.sub-menu li.deepam-nav-viewall > a,
.deepam-offcanvas ul.sub-menu li.deepam-nav-viewall > a {
  color: #F47A21;
  font-weight: 700;
}
.deepam-nav ul.sub-menu li.deepam-nav-viewall > a:hover,
.deepam-nav ul.sub-menu li.deepam-nav-viewall > a:focus-visible {
  color: #F47A21;
  border-left-color: #F47A21;
}

/* Nested submenu (e.g. Child Development) opens to the right */
.deepam-nav ul.sub-menu li.menu-item-has-children > ul.sub-menu {
  top: -18px;
  left: 100%;
  margin-left: 2px;
}
.deepam-nav ul.sub-menu li.menu-item-has-children > a::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  flex-shrink: 0;
}

@media (max-width: 1300px) {
  .deepam-nav ul.sub-menu li.menu-item-has-children > ul.sub-menu {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 2px;
  }
}

/* ===================== Mobile off-canvas: accordion ===================== */
.deepam-offcanvas li.menu-item-has-children > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.deepam-offcanvas .deepam-accordion-toggle {
  background: none;
  border: 1px solid rgba(18, 61, 53, 0.2);
  border-radius: 4px;
  color: #1F5A45;
  font-size: 16px;
  line-height: 1;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.deepam-offcanvas .deepam-accordion-toggle::before { content: "+"; }
.deepam-offcanvas li.deepam-submenu-open > a .deepam-accordion-toggle::before { content: "\2212"; }

.deepam-offcanvas ul.sub-menu {
  list-style: none;
  margin: 0;
  padding: 0 0 0 16px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.deepam-offcanvas li.deepam-submenu-open > ul.sub-menu { max-height: 1200px; }
.deepam-offcanvas ul.sub-menu li > a {
  padding: 12px 4px;
  font-size: 15px;
  color: #123D35;
}
.deepam-offcanvas ul.sub-menu ul.sub-menu { padding-left: 16px; }

@media (prefers-reduced-motion: reduce) {
  .deepam-nav ul.sub-menu,
  .deepam-offcanvas ul.sub-menu {
    transition: none;
  }
}

/* Defensive: keep header/nav containers from ever clipping the dropdown */
.deepam-header,
.deepam-topbar,
.deepam-nav,
.deepam-nav li.menu-item-has-children {
  overflow: visible;
}

/* Active state: current page (or a page inside its dropdown) highlights the
   top-level parent in green with a small accent underline, per spec. */
.deepam-nav ul:not(.sub-menu) > li.menu-item-has-children.current-menu-item > a,
.deepam-nav ul:not(.sub-menu) > li.menu-item-has-children.current-menu-ancestor > a,
.deepam-nav ul:not(.sub-menu) > li.menu-item-has-children.current-menu-parent > a {
  color: #5EAD3A;
  position: relative;
}
.deepam-nav ul:not(.sub-menu) > li.menu-item-has-children.current-menu-item > a::before,
.deepam-nav ul:not(.sub-menu) > li.menu-item-has-children.current-menu-ancestor > a::before,
.deepam-nav ul:not(.sub-menu) > li.menu-item-has-children.current-menu-parent > a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 22px;
  height: 2px;
  background: #F47A21;
}

/* Logo mark: fixed height (not width) so it lands in the requested visual
   range regardless of the source file's own proportions (275x300 native,
   so a width-only constraint over-sizes it). width:auto preserves the
   original aspect ratio — never stretched/distorted. */
.deepam-header-logo img {
  height: 64px !important;
  width: auto !important;
}
@media (max-width: 767px) {
  .deepam-header-logo img {
    height: 48px !important;
  }
}

/* ===================== Header row: fit on one line, no overlap =====================
   Root cause of the reported overlap: .deepam-header-logo, .deepam-nav and
   .deepam-header-ctas are siblings in one flex row, but none of them had an explicit
   flex-shrink/flex-grow, so the browser default (flex-shrink:1 on every child) let the
   CTA buttons and the logo get squeezed exactly like the nav instead of staying fixed.
   At the same time nothing stopped a two-word label like "News & Events" from wrapping
   once its <li> got squeezed. Fix: pin logo/CTAs to their content size, let only the
   nav flex, and force menu/button text to stay on one line. No absolute positioning,
   no negative margins, no transforms. */
.deepam-header {
  flex-wrap: nowrap !important;
}
/* Elementor's own .e-con base rule sets width:var(--width) with --width:100%
   by default on every container. flex-basis:auto then resolves to that 100%
   width (not to the element's actual content size), so flex-shrink:0 alone
   locked both this row's logo AND its CTA/hamburger container at ~100% width
   each — confirmed via computed styles (each measured ~1807px inside an
   1887px-wide header, with the CTAs container pushed off-screen to the
   right and .deepam-nav squeezed to 20px). Overriding width back to auto
   makes flex-basis:auto size to real content again. */
.deepam-header-logo,
.deepam-header-ctas {
  width: auto !important;
  flex: 0 0 auto !important;
}
.deepam-nav {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  flex-wrap: nowrap !important;
}
.deepam-nav ul {
  flex-wrap: nowrap !important;
  min-width: 0;
  gap: 18px !important;
}
.deepam-nav ul li,
.deepam-nav ul li > a {
  white-space: nowrap;
  line-height: 1.2;
  font-weight: 600;
}
.deepam-header-ctas,
.deepam-header-ctas .elementor-button {
  flex-shrink: 0;
  white-space: nowrap;
}
.deepam-header-ctas .elementor-button {
  padding: 12px 22px !important;
}

/* Compact gap + a small (non-excessive) font step-down at the narrower end of
   desktop, plus shrinking the logo wordmark/tagline (per explicit sign-off —
   the logo MARK image stays 68px at every width; only the text lockup next to
   it compresses). 9 top-level items + the brand lockup + both full-padding
   pill CTA buttons are a lot of fixed content for a 1280–1440px-wide row; this
   is the maximum compaction available without shrinking nav text below 13px,
   touching the CTA buttons, or hiding a nav item — real measurement (actual
   Inter glyph widths) shows 1600px and below still run tight even with all of
   this applied. See chat for the exact numbers and remaining options. */
@media (max-width: 1600px) {
  .elementor-element.elementor-element-a5aeb4a {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .elementor-element-dplockup1 > div > div:first-child {
    font-size: 16px !important;
  }
  .elementor-element-dplockup1 > div > div:last-child {
    display: none !important;
  }
}
@media (max-width: 1400px) {
  .deepam-nav ul {
    gap: 14px !important;
  }
  .deepam-nav a {
    font-size: 14px;
  }
  .elementor-element.elementor-element-a5aeb4a {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .elementor-element-dplockup1 > div > div:first-child {
    font-size: 14px !important;
  }
  .deepam-header-ctas .elementor-button {
    padding: 10px 18px !important;
  }
}
@media (max-width: 1300px) {
  .deepam-nav ul {
    gap: 10px !important;
  }
  .deepam-nav a {
    font-size: 13px;
  }
  .elementor-element.elementor-element-a5aeb4a {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .elementor-element-dplockup1 > div > div:first-child {
    font-size: 12px !important;
  }
}

/* Nav has 7 top-level items (Home, About Us, Our Programs, Our Work,
   Get Involved, Media & Updates, Contact) since the 2026-09-16 menu rebuild
   — down from the 9-item layout this file was originally tuned for. A
   2026-09-17 attempt lowered the cutover to 1200px on the untested assumption
   that 2 fewer items would fit; reverted back to 1650px (2026-09-17) since it
   was never visually confirmed and risked an overflowing/cramped nav in the
   1200-1650px range. Below 1650px the existing hamburger/off-canvas menu (its
   own Home...Contact list, own Donate button) takes over. This replaces the
   theme's original 991px cutover for nav visibility only — deepam.css still
   flips display at 991px too, but this earlier, !important rule wins first.
   Logo/CTA/topbar are unaffected. */
@media (max-width: 1650px) {
  .deepam-nav {
    display: none !important;
  }
  .deepam-hamburger {
    display: inline-block !important;
  }
}