/* ==========================================================================
   Appworks site navigation — shared across every page.

   Namespaced `aw-` on purpose. The eleven pages each carry their own inline
   definitions of .header-nav / .mega-dropdown / .nav-link, and three different
   nav markups; a new namespace sidesteps all of it instead of fighting eleven
   copies of conflicting CSS.

   Loaded as a static stylesheet rather than inlined per page: one source of
   truth, and static assets are unaffected by the load balancer's HTML caching
   that blocks PHP includes.

   Height is deliberately 81px (80 + 1px rule) because existing pages offset
   their heroes by that amount.
   ========================================================================== */

:root {
    --aw-nav-h: 81px;
    --aw-surface: #17061C;          /* solid, not translucent — see .aw-dd */
    --aw-surface-2: #220C29;
    --aw-line: rgba(255, 255, 255, 0.12);
    --aw-text: #FFFFFF;
    --aw-text-dim: rgba(255, 255, 255, 0.62);
    --aw-accent: #FF6B50;
}

/* ---------------------------------------------------------------- shell --- */

.aw-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(23, 6, 28, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--aw-line);
}

.aw-nav__inner {
    max-width: 1500px;
    margin: 0 auto;
    padding-left: clamp(1.5rem, 5vw, 6rem);
    padding-right: clamp(1.5rem, 5vw, 6rem);
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.aw-nav__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.aw-nav__logo img {
    height: clamp(2rem, 3vw, 3rem);
    width: auto;
}

/* -------------------------------------------------------------- desktop --- */

.aw-nav__list {
    display: none;
    align-items: center;
    gap: clamp(0.25rem, 1.4vw, 1.25rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 1080px) {
    .aw-nav__list { display: flex; }
}

.aw-nav__item {
    position: relative;
}

.aw-nav__link,
.aw-nav__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.625rem;
    font-size: clamp(0.875rem, 1vw, 1rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--aw-text);
    background: none;
    border: 0;
    border-radius: 0.5rem;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    font-family: inherit;
    transition: color 0.25s ease, background 0.25s ease;
}

.aw-nav__link:hover,
.aw-nav__trigger:hover,
.aw-nav__item[data-open="true"] > .aw-nav__trigger,
.aw-nav__item[data-open="true"] > .aw-nav__link {
    color: var(--aw-accent);
}

.aw-nav__link[aria-current="page"] {
    color: var(--aw-accent);
}

.aw-nav__caret {
    font-size: 0.7em;
    transition: transform 0.25s ease;
}

.aw-nav__item[data-open="true"] .aw-nav__caret {
    transform: rotate(180deg);
}

/* ------------------------------------------------------------- dropdown --- */
/*
 * Fully opaque. The previous dropdown used rgba(...,0.98) plus a 32px backdrop
 * blur, and the hero still read through it.
 *
 * Two columns for the six- and seven-item menus. Measured: the old single
 * column put a 5-item menu's bottom edge at 815px on a 680px viewport. Two
 * columns with slim rows keeps the 7-item menu near 340px.
 */
.aw-dd {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 1001;
    min-width: 260px;
    padding: 0.75rem;
    background: var(--aw-surface);
    border: 1px solid var(--aw-line);
    border-radius: 1rem;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    /*
     * visibility is deliberately NOT transitioned. It interpolates discretely and
     * flips at the midpoint, so for ~100ms after opening the panel was still
     * visibility: hidden — and a hidden element cannot take focus, which broke
     * ArrowDown-into-the-menu. Opacity and transform still animate.
     */
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: grid;
    gap: 0.125rem;
}

/* keep the panel inside the viewport for the right-hand menus */
.aw-nav__item--end .aw-dd {
    left: auto;
    right: 0;
}

.aw-nav__item[data-open="true"] > .aw-dd {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.aw-dd--two-col {
    grid-template-columns: repeat(2, minmax(230px, 1fr));
    column-gap: 0.5rem;
}

.aw-dd__link {
    display: block;
    padding: 0.625rem 0.75rem;
    border-radius: 0.625rem;
    text-decoration: none;
    transition: background 0.2s ease;
}

.aw-dd__link:hover,
.aw-dd__link:focus-visible {
    background: var(--aw-surface-2);
}

.aw-dd__label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--aw-text);
    font-size: clamp(0.9375rem, 1vw, 1rem);
    font-weight: 700;
    line-height: 1.3;
}

.aw-dd__note {
    display: block;
    margin-top: 0.125rem;
    color: var(--aw-text-dim);
    font-size: 0.8125rem;
    line-height: 1.35;
}

.aw-dd__ext {
    font-size: 0.75em;
    color: var(--aw-text-dim);
}

/*
 * Fronisa has no destination yet: the site is under construction and will be
 * external. Rendered as a dimmed non-link rather than href="#" so nothing
 * announces a link that goes nowhere. Deliberately not .aw-dd__link, which
 * js/nav.js collects for arrow-key focus.
 */
.aw-dd__soon {
    display: block;
    padding: 0.625rem 0.75rem;
    border-radius: 0.625rem;
    opacity: 0.45;
    cursor: default;
}

/* --------------------------------------------------------------- burger --- */

.aw-nav__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: 1px solid var(--aw-line);
    border-radius: 0.625rem;
    color: var(--aw-text);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}

/* Must come after the rule above: an earlier media query would lose the cascade
   to the base `display: inline-flex` and the burger would show on desktop. */
@media (min-width: 1080px) {
    .aw-nav__burger { display: none; }
}

/* ---------------------------------------------------------------- panel --- */
/*
 * Full-screen overlay with accordions, not a hover dropdown. Ten of the eleven
 * pages previously had no reachable navigation at all below 1024px.
 */
.aw-panel {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: var(--aw-surface);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.28s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.aw-panel[data-open="true"] {
    transform: translateX(0);
}

.aw-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(1rem, 5vw, 2rem);
    height: 80px;
    border-bottom: 1px solid var(--aw-line);
    flex-shrink: 0;
}

.aw-panel__head img { height: 2.25rem; width: auto; }

.aw-panel__close {
    width: 44px;
    height: 44px;
    background: none;
    border: 1px solid var(--aw-line);
    border-radius: 0.625rem;
    color: var(--aw-text);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}

.aw-panel__body {
    padding: clamp(0.5rem, 2vh, 1rem) clamp(1rem, 5vw, 2rem) clamp(2rem, 6vh, 3rem);
}

.aw-acc {
    border-bottom: 1px solid var(--aw-line);
}

.aw-acc__top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(0.875rem, 2vh, 1.125rem) 0;
    background: none;
    border: 0;
    color: var(--aw-text);
    font-family: inherit;
    font-size: clamp(1rem, 4vw, 1.125rem);
    font-weight: 700;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.aw-acc__top .aw-nav__caret { transition: transform 0.25s ease; }
.aw-acc[data-open="true"] .aw-nav__caret { transform: rotate(180deg); }

.aw-acc__inner {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s ease;
}

.aw-acc[data-open="true"] .aw-acc__inner {
    grid-template-rows: 1fr;
}

.aw-acc__list {
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
}

.aw-acc__list a {
    display: block;
    padding: 0.6875rem 0 0.6875rem 1rem;
    color: var(--aw-text-dim);
    font-size: clamp(0.9375rem, 3.6vw, 1rem);
    font-weight: 600;
    text-decoration: none;
    border-left: 2px solid var(--aw-line);
}

.aw-acc__list a:hover,
.aw-acc__list a:focus-visible {
    color: var(--aw-accent);
    border-left-color: var(--aw-accent);
}

.aw-acc__list li:last-child a { padding-bottom: clamp(0.875rem, 2vh, 1.125rem); }

/* mobile twin of .aw-dd__soon */
.aw-acc__soon {
    display: block;
    padding: 0.6875rem 0 0.6875rem 1rem;
    color: var(--aw-text-dim);
    font-size: clamp(0.9375rem, 3.6vw, 1rem);
    font-weight: 600;
    border-left: 2px solid var(--aw-line);
    opacity: 0.45;
    cursor: default;
}

.aw-acc__list li:last-child .aw-acc__soon { padding-bottom: clamp(0.875rem, 2vh, 1.125rem); }

/*
 * The accordion is a shared component, not nav-only: the FAQ on product pages
 * reuses the same markup and the same handler in js/nav.js, which binds
 * .aw-acc__top[data-acc] document-wide. This is the prose variant of the list.
 */
.aw-acc__body {
    overflow: hidden;
}

.aw-acc__body > * {
    padding: 0 0 clamp(0.875rem, 2vh, 1.25rem);
    margin: 0;
    color: var(--aw-text-dim);
    line-height: 1.6;
}

.aw-panel__cta {
    margin-top: clamp(1.5rem, 4vh, 2.5rem);
}

.aw-panel__cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: clamp(0.875rem, 2vh, 1.0625rem) 1.5rem;
    border-radius: 0.75rem;
    font-weight: 700;
    color: #FFFFFF;
    text-decoration: none;
    background: linear-gradient(135deg, #FF4B36 0%, #FF6B50 100%);
    box-shadow: 0 4px 12px rgba(255, 75, 54, 0.3);
}

.aw-scrim {
    position: fixed;
    inset: 0;
    z-index: 1099;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s;
}

.aw-scrim[data-open="true"] {
    opacity: 1;
    visibility: visible;
}

body.aw-locked {
    overflow: hidden;
}

/* --------------------------------------------------------- a11y / motion --- */

.aw-nav :focus-visible,
.aw-panel :focus-visible {
    outline: 2px solid var(--aw-accent);
    outline-offset: 3px;
    border-radius: 0.375rem;
}

.aw-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .aw-nav *, .aw-panel, .aw-scrim, .aw-dd, .aw-acc__inner {
        transition-duration: 0.01ms !important;
    }
}