/* =========================================================
   SEWA USA — SITE-WIDE CUSTOM CSS
   Slot: Customization → Custom CSS Editor
   ========================================================= */

/* ---------- Brand tokens ---------- */
:root {
  --sewa-indigo:   #393668;
  --sewa-orange:   #FD5808;
  --sewa-cream:    #FAF9E5;
  --sewa-charcoal: #292222;
  --sewa-white:    #FFFFFF;
  --sewa-grey-1:   #EEEEEE;
  --sewa-grey-2:   #555555;

  --sewa-font-heading: 'Poppins', sans-serif;
  --sewa-font-body:    'Open Sans', sans-serif;
}

/* ---------- Smooth anchor scroll ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Iframe-embed: hide chrome ----------
   Replace the header selector below with whatever class
   Zoho's native header renders (check dev tools). */
body.iframe-view header,            /* native header — verify selector */
body.iframe-view #idleWarnBar {     /* idle timer bar from footer code */
  display: none !important;
}



/* ---------- HEADER LAYOUT: logo flush left, menu flush right ----------
   Three things needed:
   1) Remove .zpcontainer's max-width so it spans full screen
   2) Push the two halves to opposite edges (space-between)
   3) Override the menu's default center alignment
*/

.theme-header .zpcontainer {
  max-width: none !important;
  width: 100% !important;
  padding-left: 50px !important;
  padding-right: 50px !important;
  justify-content: space-between !important;
}

.theme-navigation-and-icons .theme-menu-area {
  justify-content: flex-end !important;
}





/* ---------- Donate menu item → orange pill ---------- */
header a[href*="/Donate"],
nav a[href*="/Donate"] {
  background: var(--sewa-orange) !important;
  color: var(--sewa-white) !important;
  border-radius: 10px !important;
  padding: 8px 15px !important;
  font-size: 16px !important;
  font-family: var(--sewa-font-body) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
header a[href*="/Donate"]:hover,
nav a[href*="/Donate"]:hover {
  opacity: 0.92;
  color: var(--sewa-white) !important;
  background: var(--sewa-orange) !important;
}
header a[href*="/Donate"]::after,
nav a[href*="/Donate"]::after {
  display: none !important;
}

/* ---------- Accessibility: keyboard focus ring ---------- */
header a:focus-visible,
header button:focus-visible,
nav a:focus-visible {
  outline: 2px solid var(--sewa-indigo);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Mobile nav: burger + collapsed menu ---------- */
@media (max-width: 991px) {

  /* Fix header flex container on mobile */
  .theme-header {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .theme-header .zpcontainer {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  /* Match Zoho's specificity to override the hide rule */
  .theme-responsive-menu-area.zpcontainer .theme-responsive-menu-container {
    display: block !important;
    cursor: pointer;
    padding: 10px;
  }

  /* Draw the burger icon — 3 lines */
  .theme-burger-icon {
    display: block !important;
    width: 28px;
    height: 3px;
    background-color: var(--sewa-indigo);
    position: relative;
    top: 8px;
  }

  .theme-burger-icon::before,
  .theme-burger-icon::after {
    content: '';
    display: block;
    width: 28px;
    height: 3px;
    background-color: var(--sewa-indigo);
    position: absolute;
  }

  .theme-burger-icon::before { top: -8px; }
  .theme-burger-icon::after  { top:  8px; }

  /* Hide full horizontal nav */
  .theme-responsive-menu {
    display: none !important;
  }

  /* Show nav when Zoho toggles it open */
  .theme-responsive-menu.theme-toggle-animate {
    display: block !important;
    background-color: var(--sewa-white);
    width: 100%;
    padding: 10px 0;
  }

  /* Stack menu items vertically */
  .theme-responsive-menu .theme-menu > ul {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 0 20px;
  }

  .theme-responsive-menu .theme-menu > ul > li {
    width: 100%;
    border-bottom: 1px solid var(--sewa-grey-1);
    padding: 10px 0;
  }
}