/* ==========================================
   COMPONENTS
   Shared styles for reusable UI pieces
   (buttons, cards, nav, sections, etc).
========================================== */


/* ==========================================
   BUTTON: PRIMARY
   Extends the .btn base defined in global.css.
   Restrained styling - solid colour, no gradient,
   subtle hover lift only.
========================================== */

.vny-install-btn {
    min-height: 38px;
    padding: 0 13px;

    border: 1px solid rgba(168, 214, 255, .18);
    border-radius: 9px;

    background: rgba(255, 255, 255, .035);

    color: #DDECF7;

    font: inherit;
    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.vny-install-btn:hover {
    background: rgba(77, 159, 240, .08);
    border-color: rgba(168, 214, 255, .30);
    transform: translateY(-1px);
}

.vny-install-btn[hidden] {
    display: none !important;
}


.btn-primary {
    background-color: var(--color-blue-accent);
    color: var(--color-white);
    font-size: var(--text-small);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    padding-inline: var(--space-lg);
    transition: background-color var(--transition-fast),
                transform var(--transition-fast),
                box-shadow var(--transition-fast);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background-color: var(--color-blue-soft);
    box-shadow: var(--shadow-sm);
}


/* ==========================================
   SITE HEADER
   Sticky, full-width dark navy header. Inner
   row uses the shared .container (~85% on
   desktop) so background and content width
   stay independent, per the Prompt #2 system.
========================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    width: 100%;
    background-color: var(--color-navy);
    border-bottom: 1px solid var(--color-border-inverse);
    transition: box-shadow var(--transition-normal);
}

.site-header.is-scrolled {
    box-shadow: var(--shadow-md);
}

.site-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    padding-block: var(--space-sm);
}

/* Logo */
.site-header__logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.site-header__logo img {
    height: 26px;
    width: auto;
}

/* Primary nav */
.site-header__nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.site-header__menu {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.site-header__item {
    position: relative;
}

.site-header__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted-inverse);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background-color var(--transition-fast);
    white-space: nowrap;
}

.site-header__link:hover,
.site-header__link:focus-visible {
    color: var(--color-white);
    background-color: var(--color-surface-elevated);
}

.site-header__caret {
    color: currentColor;
    transition: transform var(--transition-fast);
}

.site-header__item--has-dropdown:hover .site-header__caret,
.site-header__item--has-dropdown:focus-within .site-header__caret {
    transform: rotate(180deg);
}

/* Services dropdown (mega-menu style, 3 columns) */
.site-header__dropdown {
    position: absolute;
    top: calc(100% + var(--space-sm));
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: var(--space-lg);
    padding: var(--space-lg);
    background-color: var(--color-surface-elevated);
    border: 1px solid var(--color-border-inverse);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal),
                transform var(--transition-normal),
                visibility var(--transition-normal);
}

.site-header__item--has-dropdown:hover .site-header__dropdown,
.site-header__item--has-dropdown:focus-within .site-header__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.site-header__dropdown-heading {
    font-size: var(--text-small);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-blue-soft);
    margin-bottom: var(--space-sm);
}

.site-header__dropdown-col ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.site-header__dropdown-col a {
    display: block;
    padding: 8px 10px;
    font-size: var(--text-small);
    color: var(--color-text-muted-inverse);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background-color var(--transition-fast);
    white-space: nowrap;
}

.site-header__dropdown-col a:hover,
.site-header__dropdown-col a:focus-visible {
    color: var(--color-white);
    background-color: rgba(61, 139, 255, 0.1);
}

/* CTA */
.site-header__cta {
    flex: 0 0 auto;
}

/* Desktop nav / CTA are hidden below the container's
   desktop breakpoint; the hamburger toggle takes over. */
@media (max-width: 1023px) {
    .site-header__nav,
    .site-header__cta {
        display: none;
    }

    .site-header__toggle {
        display: flex;
    }
}


/* ==========================================
   HEADER: MOBILE TOGGLE (HAMBURGER)
   Hidden on desktop (shown above at <1024px).
   Three-span animated icon - no icon font.
========================================== */

.site-header__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border: 1px solid var(--color-border-inverse);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-elevated);
    transition: border-color var(--transition-fast);
}

.site-header__toggle:hover,
.site-header__toggle:focus-visible {
    border-color: var(--color-blue-soft);
}

.site-header__toggle-bars {
    position: relative;
    width: 18px;
    height: 13px;
}

.site-header__toggle-bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    border-radius: 2px;
    background-color: var(--color-text-inverse);
    transition: transform var(--transition-normal),
                opacity var(--transition-fast),
                top var(--transition-normal);
}

.site-header__toggle-bars span:nth-child(1) { top: 0; }
.site-header__toggle-bars span:nth-child(2) { top: 5.5px; }
.site-header__toggle-bars span:nth-child(3) { top: 11px; }

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars span:nth-child(1) {
    top: 5.5px;
    transform: rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars span:nth-child(2) {
    opacity: 0;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars span:nth-child(3) {
    top: 5.5px;
    transform: rotate(-45deg);
}


/* ==========================================
   MOBILE NAVIGATION (OFF-CANVAS)
   Slide-in panel + backdrop, opened by the
   hamburger above. Hidden entirely on desktop.
   Uses the shared --z-overlay token; the panel
   sits after the backdrop in the DOM so it
   paints above it at the same z-index.
========================================== */

.mobile-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background-color: rgba(5, 11, 24, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.mobile-nav-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-overlay);
    width: min(340px, 86vw);
    background-color: var(--color-navy-deep);
    border-left: 1px solid var(--color-border-inverse);
    box-shadow: var(--shadow-lg);
    padding: var(--space-md);
    padding-top: calc(var(--space-md) + var(--safe-area-top));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform var(--transition-slow);
}

.mobile-nav.is-open {
    transform: translateX(0);
}

.mobile-nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-md);
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border-inverse);
}

.mobile-nav__logo img {
    height: 20px;
    width: auto;
}

.mobile-nav__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--color-border-inverse);
    border-radius: var(--radius-sm);
    color: var(--color-text-inverse);
    transition: border-color var(--transition-fast);
}

.mobile-nav__close:hover,
.mobile-nav__close:focus-visible {
    border-color: var(--color-blue-soft);
}

.mobile-nav__list {
    display: flex;
    flex-direction: column;
}

.mobile-nav__list > li {
    border-bottom: 1px solid var(--color-border-inverse);
}

.mobile-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    padding: var(--space-sm) var(--space-xs);
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
    color: var(--color-text-inverse);
    text-align: left;
    transition: color var(--transition-fast);
}

.mobile-nav__link:hover,
.mobile-nav__link:focus-visible {
    color: var(--color-blue-soft);
}

.mobile-nav__chevron {
    color: var(--color-text-muted-inverse);
    transition: transform var(--transition-fast);
    flex: 0 0 auto;
}

.mobile-nav__accordion-trigger[aria-expanded="true"] .mobile-nav__chevron {
    transform: rotate(180deg);
}

/* Accordion panel - height-animated via max-height since
   the content is variable-length grouped link lists. */
.mobile-nav__accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow);
}

.mobile-nav__item--accordion.is-open .mobile-nav__accordion-panel {
    max-height: 900px;
}

.mobile-nav__group-heading {
    padding: var(--space-sm) var(--space-xs) var(--space-xs);
    font-size: var(--text-small);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-blue-soft);
}

.mobile-nav__sublist a {
    display: block;
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: var(--space-xs);
    font-size: var(--text-small);
    color: var(--color-text-muted-inverse);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.mobile-nav__sublist a:hover,
.mobile-nav__sublist a:focus-visible {
    color: var(--color-white);
    background-color: rgba(61, 139, 255, 0.1);
}

.mobile-nav__cta {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: var(--space-md);
}

/* Off-canvas menu is mobile/tablet only - desktop uses the
   dropdown nav from Prompt #3 instead. */
@media (min-width: 1024px) {
    .mobile-nav,
    .mobile-nav-overlay {
        display: none;
    }
}


/* ==========================================
   FIXED BOTTOM MOBILE NAVIGATION
   Separate component (mobile-bottom-nav.html).
   Five equal-weight actions, safe-area aware,
   mobile only. Reuses --bottom-nav-height so
   the body's reserved padding (global.css)
   always matches this bar's real height.
========================================== */

.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-mobile-nav);
    display: flex;
    align-items: stretch;
    justify-content: space-evenly;
    height: var(--bottom-nav-height);
    padding-bottom: var(--safe-area-bottom);
    background-color: var(--color-navy);
    border-top: 1px solid var(--color-border-inverse);
}

.bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1 1 0;
    min-width: 44px;
    color: var(--color-text-muted-inverse);
    transition: color var(--transition-fast);
}

.bottom-nav__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
}

.bottom-nav__label {
    font-size: 10.5px;
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-normal);
}

.bottom-nav__item:hover,
.bottom-nav__item:focus-visible,
.bottom-nav__item[aria-current="page"] {
    color: var(--color-blue-accent);
}

/* WhatsApp keeps its conventional green so it stays
   instantly recognisable - reuses the existing
   --color-success token rather than a new colour. */
.bottom-nav__item--whatsapp {
    color: var(--color-success);
}

.bottom-nav__item--whatsapp:hover,
.bottom-nav__item--whatsapp:focus-visible {
    color: var(--color-success);
    opacity: 0.85;
}

/* Bottom nav is mobile/tablet only. */
@media (min-width: 1024px) {
    .bottom-nav {
        display: none;
    }
}