/* Suvichar Editorial v0.5: header and primary navigation.
   Desktop: logo left, links and the call-to-action grouped on the right.
   Links get an animated underline and a clear current-page state.
   The Services dropdown fades in on hover and on keyboard focus.
   Mobile: MENU pill opens a full-width panel with an indented Services list. */

/* ---------- Header bar ---------- */
.site-header { background: rgba(244, 239, 230, 0.86); border-bottom-color: rgba(24, 19, 16, 0.1); }
.site-header .header-in { height: 78px; transition: height .25s ease; }
.site-header.scrolled .header-in { height: 64px; }
.site-header .brand-logo { transition: height .25s ease; }
.site-header.scrolled .brand-logo { height: 44px; }

/* ---------- Desktop navigation ---------- */
.site-nav ul.menu { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 1080px) { .site-nav ul.menu { gap: 34px; } }
@media (min-width: 880px) { .site-nav { margin-left: auto; } }

.site-nav ul.menu > li > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 10px 2px;
    color: var(--dark);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    background: linear-gradient(var(--accent), var(--accent)) left calc(100% - 4px) / 0 2px no-repeat;
    transition: background-size .28s ease, color .2s ease;
}
.site-nav ul.menu > li > a:hover,
.site-nav ul.menu > li:focus-within > a,
.site-nav ul.menu > li:hover > a { background-size: 100% 2px; color: var(--dark); text-decoration: none; }
.site-nav ul.menu > li.current-menu-item > a,
.site-nav ul.menu > li.current-menu-ancestor > a,
.site-nav ul.menu > li.current_page_ancestor > a { background-size: 100% 2px; }

/* Chevron on items that open a dropdown */
.site-nav .menu-item-has-children > a::after {
    content: "";
    width: 6px;
    height: 6px;
    margin: -3px 0 0 9px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .25s ease;
}
.site-nav .menu-item-has-children:hover > a::after,
.site-nav .menu-item-has-children:focus-within > a::after { transform: rotate(225deg) translate(-2px, -2px); }

/* ---------- Services dropdown ---------- */
.site-nav .menu-item-has-children { position: relative; }
/* Invisible bridge so the pointer can travel from the link to the panel */
.site-nav .menu-item-has-children::after { content: ""; position: absolute; left: -12px; right: -12px; top: 100%; height: 22px; }

.site-nav .sub-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: absolute;
    top: calc(100% + 14px);
    left: -18px;
    z-index: 60;
    min-width: 310px;
    margin: 0;
    padding: 10px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 28px 60px -24px rgba(24, 19, 16, 0.5), 0 2px 6px rgba(24, 19, 16, 0.06);
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
/* Small notch pointing at the Services link */
.site-nav .sub-menu::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 30px;
    width: 10px;
    height: 10px;
    background: #fff;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    transform: rotate(45deg);
}
.site-nav .menu-item-has-children:hover > .sub-menu,
.site-nav .menu-item-has-children:focus-within > .sub-menu {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
}
.site-nav .sub-menu a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: 10px;
    color: var(--dark);
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color .18s ease, padding-left .18s ease;
}
.site-nav .sub-menu a::after {
    content: "\2192";
    color: var(--accent);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .18s ease, transform .18s ease;
}
.site-nav .sub-menu a:hover,
.site-nav .sub-menu a:focus-visible { background: var(--accent-soft); padding-left: 18px; text-decoration: none; outline: none; }
.site-nav .sub-menu a:hover::after,
.site-nav .sub-menu a:focus-visible::after { opacity: 1; transform: none; }
.site-nav .sub-menu .current-menu-item > a { background: rgba(24, 19, 16, 0.05); }

/* ---------- Call-to-action button ---------- */
.site-header .header-cta { gap: 8px; box-shadow: 0 10px 22px -12px rgba(232, 84, 16, 0.8); }
.site-header .header-cta::after { content: "\2192"; transition: transform .2s ease; }
.site-header .header-cta:hover::after { transform: translateX(3px); }

/* ---------- Mobile toggle and panel ---------- */
.nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: auto;
    height: 42px;
    padding: 0 16px 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-full);
    background: #fff;
    color: var(--dark);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.nav-toggle::before { content: "\2630"; font-size: 1.05rem; line-height: 1; letter-spacing: 0; }
.nav-toggle[aria-expanded="true"] { background: var(--dark); border-color: var(--dark); color: var(--paper); }
.nav-toggle[aria-expanded="true"]::before { content: "\2715"; font-size: 0.95rem; }
@media (min-width: 880px) { .nav-toggle { display: none; } }

.mobile-nav { max-height: calc(100vh - 78px); overflow-y: auto; padding: 8px 0 24px; background: transparent; }
.mobile-nav.open { animation: nav-panel-in .22s ease both; }
@keyframes nav-panel-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mobile-nav ul.menu { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.mobile-nav ul.menu > li > a { padding: 16px 0; }
.mobile-nav .current-menu-item > a,
.mobile-nav .current-menu-ancestor > a { color: var(--accent); }
.mobile-nav .sub-menu {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0 0 10px 2px;
    padding: 0 0 0 16px;
    border-left: 2px solid var(--accent-soft);
}
.mobile-nav .sub-menu a {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: var(--gray);
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
}
.mobile-nav .sub-menu .current-menu-item > a { color: var(--accent); }
.mobile-nav .sub-menu li:last-child a { border-bottom: none; }

@media (prefers-reduced-motion: reduce) {
    .site-header .header-in, .site-header .brand-logo, .site-nav ul.menu > li > a,
    .site-nav .sub-menu, .site-nav .sub-menu a, .site-nav .sub-menu a::after,
    .site-nav .menu-item-has-children > a::after, .site-header .header-cta::after { transition: none; }
    .mobile-nav.open { animation: none; }
}