#sparkle-app .spark-main header .spark-nav-inner {display: flex;   justify-content: space-between;  padding: 10px 16px;}
#sparkle-app .full-width-navigation {background-color: var(--spk-black); position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 9;}
#sparkle-app .full-width-navigation .full-width-navigation__header .spark-nav-inner {
    display: flex;
  justify-content: space-between;
  padding: 10px 16px;
}


#sparkle-app .full-width-navigation {
    display: none;
}

#sparkle-app .full-width-navigation.active {
    display: block;
}

#sparkle-app .full-width-navigation ul{padding: 60px 16px 0;}
/* Paul 2026-09-25: styled as sparkledogcare.com's menu — Poppins 600, white on #3a3d46, 20/40 on
   phones (24/44 wider), yellow on hover. */
#sparkle-app .full-width-navigation { background-color: #3a3d46; }
#sparkle-app .full-width-navigation ul { list-style: none; margin: 0; }
#sparkle-app .full-width-navigation ul li a{color: var(--spk-white); font-family: "Poppins", sans-serif; font-size: 20px; line-height: 40px; font-weight: 600; text-decoration: none; display: block;}
#sparkle-app .full-width-navigation ul li a:hover{color: #ffc92e;}
@media (min-width: 768px) {
    #sparkle-app .full-width-navigation ul li a{font-size: 24px; line-height: 44px;}
}



@media (min-width: 768px) {
    /* The overlay covers the page, so its header has to land on exactly the same grid as
       the header underneath — otherwise the logo jumps when the menu opens (2026-09-24).
       Page header is 110px tall with its content vertically centred; match both. */
    #sparkle-app .full-width-navigation .full-width-navigation__header {
        height: 110px;
        display: flex;
        align-items: center;
    }

    #sparkle-app .full-width-navigation .full-width-navigation__header > .container {
        width: 100%;
    }

    /* The page header zeroes its side padding at this breakpoint; the overlay must too,
       or the logo sits 16px further in than the one it is covering. */
    #sparkle-app .full-width-navigation .full-width-navigation__header .spark-nav-inner {
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        align-items: center;
    }

    /* Links align to the same container edge as the logo above them. */
    #sparkle-app .full-width-navigation ul {
        padding-left: 0;
        padding-right: 0;
    }
}
@media (max-width: 990px) {}
@media (min-width: 991px) {}
@media (min-width: 1170px) {}