/* Additional styles for nav dropdown, skip link, and new components */

/* Skip to content link */
.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 9999;
    background: var(--accent);
    color: var(--bg);
    padding: 0.5rem 1rem;
    border-radius: 0 0 4px 4px;
    font-family: var(--mono);
    font-size: 0.85rem;
    text-decoration: none;
    transition: top 0.3s;
}
.skip-link:focus {
    top: 0;
}

/* Nav Dropdown */
.nav-dropdown {
    position: relative;
}

/* Mobile disclosure control for the services panel. Hidden on desktop, where the
   panel opens on hover and this button would be redundant. */
.nav-dropdown-toggle {
    display: none;
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: -1rem;
    min-width: 820px;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    z-index: 1001;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown-col h6 {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.6rem;
}

.nav-dropdown-col a {
    display: block;
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--text-dim);
    text-decoration: none;
    padding: 0.25rem 0;
    transition: color 0.2s;
}
.nav-dropdown-col a:hover {
    color: var(--accent);
}

/* Grouped subcategory labels inside dropdown columns */
.nav-dropdown-col .nav-dropdown-sub {
    display: block;
    font-family: var(--mono);
    font-size: 0.6rem;
    color: var(--text-dim);
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0.7rem 0 0.2rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--border);
}

.nav-dropdown-col .nav-dropdown-sub:first-of-type {
    margin-top: 0;
}

/* Blog card adjustments */
.blog-meta {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text-dim);
    margin-bottom: 0.5rem;
}

/* Select element styling to match inputs */
select.cta-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%238888A0' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    padding-right: 2.5rem;
}

select.cta-input option {
    background: var(--bg-alt);
    color: var(--text);
}

/* Blog post content styling */
.post-content h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
    margin: 2rem 0 1rem;
    letter-spacing: -0.02em;
}

.post-content p {
    margin-bottom: 1.2rem;
    color: var(--text);
}

/* Error/success message styles */
.msg-error {
    background: rgba(255, 0, 85, 0.1);
    border: 1px solid rgba(255, 0, 85, 0.3);
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
}

.msg-success {
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.3);
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
}

/* Responsive nav dropdown

   On a touch device the hover panel has no reachable state, and :focus-within on
   a touch tap is unreliable, so the panel used to be suppressed outright below
   900px - which left all 34 service links with no mobile route at all. Instead it
   is now an inline accordion driven by .nav-dropdown-toggle. The four columns
   stack in order, so the reading order is unchanged from desktop.

   The query is keyed on (hover: none) rather than on width alone. A width test
   alone leaves a real gap: a landscape phone (iPhone 15 Pro Max = 932px, Pixel 8
   = 915px) and an iPad in landscape (1133px) all sit ABOVE 900px, so they were
   being served the 820px absolute hover panel with left:-1rem - it overflowed
   off-screen, could not be scrolled back, and could not be opened without a
   hover that touch never sends. hover capability is the thing that actually
   decides whether the panel is usable, so it is what gets tested. max-width:900px
   is retained as a floor for narrow desktop windows and for older browsers with
   no hover support query. */
@media (max-width: 900px), (hover: none) {
    .nav-dropdown {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
    }

    .nav-dropdown > .nav-link {
        flex: 1 1 auto;
        width: auto;
        justify-content: flex-start;
    }

    .nav-dropdown-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        margin-left: auto;
        padding: 0;
        background: none;
        border: 1px solid var(--border);
        border-radius: 6px;
        cursor: pointer;
    }

    .nav-dropdown-caret {
        display: block;
        width: 8px;
        height: 8px;
        border-right: 2px solid var(--text-dim);
        border-bottom: 2px solid var(--text-dim);
        transform: rotate(45deg) translate(-2px, -2px);
        transition: transform 0.25s ease;
    }

    .nav-dropdown-toggle[aria-expanded="true"] .nav-dropdown-caret {
        transform: rotate(-135deg) translate(-2px, -2px);
    }

    .nav-dropdown-toggle[aria-expanded="true"] {
        border-color: var(--accent);
    }

    /* The panel becomes a normal block in the nav flow. flex-basis:100% forces it
       onto its own line under the trigger regardless of column count. */
    .nav-dropdown-menu {
        flex-basis: 100%;
        min-width: auto;
        width: 100%;
        grid-template-columns: 1fr;
        gap: 1.25rem;
        position: static;
        margin-top: 0.75rem;
        padding: 0 0 0.5rem;
        background: transparent;
        border: none;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        /* No transition here: it is toggled by display, not by opacity, so there is
           nothing to animate. Leaving the desktop transition on would delay the
           content by 0.25s on every open. */
        transition: none;
        display: none;
    }

    /* :hover must not open it on a touch device - a tap that registers as hover
       would fight the button handler and leave the panel stuck. */
    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown:focus-within .nav-dropdown-menu {
        display: none;
    }

    .nav-dropdown.open .nav-dropdown-menu {
        display: grid;
    }

    .nav-dropdown .nav-link {
        width: 100%;
        justify-content: flex-start;
    }

    /* The panel is inside the collapsed nav, so its own links need the same
       left-aligned treatment and a tap-sized line height. */
    .nav-dropdown-col a,
    .nav-dropdown-col .nav-dropdown-sub {
        padding: 0.35rem 0;
        min-height: 32px;
    }
}
/* ---------------------------------------------------------------------------
   Forms: honeypot, consent, two-column rows
   Added to support the shared submit.php endpoint and GDPR consent capture.
   --- */

/* Honeypot: visually removed from humans, still reachable by naive bots.
   Must NOT use display:none alone - some bots skip those. Off-screen is safer. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.consent-label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--text-dim);
    line-height: 1.6;
    cursor: pointer;
}

.consent-label input[type="checkbox"] {
    margin-top: 0.15rem;
    width: 14px;
    height: 14px;
    accent-color: var(--accent);
    flex: 0 0 auto;
    cursor: pointer;
}

.consent-label a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 212, 255, 0.35);
}

.consent-label a:hover {
    border-bottom-color: var(--accent);
}

/* Contact / quote two-column layout */
.contact-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 2rem;
    align-items: start;
}

.contact-aside {
    position: sticky;
    top: 6.5rem;
}

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.card h4 {
    font-size: 0.95rem;
    color: var(--text);
    letter-spacing: -0.01em;
}

/* Success panel used as a block container */
.msg-success,
.msg-error {
    padding: 1.25rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
}

.msg-success .cta-title { margin-top: 0; }

@media (max-width: 900px) {
    .contact-layout {
        grid-template-columns: 1fr;
    }
    .contact-aside { position: static; }
    .form-row { grid-template-columns: 1fr; }
}
/* =============================================================================
   WebNuvexa - Cookie consent banner
   Appended to nav-dropdown.css. assets/css/style.css is never modified.
   ========================================================================== */

.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: #12121c;
    border-top: 1px solid #1e1e2e;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.55);
}

/* Rendered visible by assets/js/consent.js only after it confirms no stored
   choice, so a returning visitor never sees a flash of the banner. */
.cookie-banner[hidden] {
    display: none;
}

.cookie-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.15rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.cookie-text {
    flex: 1 1 340px;
    min-width: 0;
}

.cookie-title {
    font-family: var(--mono, 'JetBrains Mono', Consolas, monospace);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #00d4ff;
    margin: 0 0 0.4rem;
}

.cookie-title .prompt {
    margin-right: 0.35rem;
}

.cookie-body {
    font-size: 0.8rem;
    line-height: 1.65;
    color: #8888a0;
    margin: 0;
}

.cookie-body a {
    color: #00d4ff;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 212, 255, 0.3);
    white-space: nowrap;
}

.cookie-body a:hover {
    border-bottom-color: #00d4ff;
}

.cookie-actions {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    align-items: center;
}

.cookie-btn {
    font-size: 0.78rem;
    padding: 0.55rem 1.05rem;
    white-space: nowrap;
    cursor: pointer;
}

/* Focus visibility for keyboard users */
.cookie-btn:focus-visible {
    outline: 2px solid #00d4ff;
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .cookie-inner {
        padding: 1rem;
        gap: 0.9rem;
    }

    .cookie-actions {
        width: 100%;
    }

    .cookie-btn {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* Respect reduced motion: the banner simply appears. */
@media (prefers-reduced-motion: reduce) {
    .cookie-banner {
        transition: none !important;
        animation: none !important;
    }
}


/* ==========================================================================
   Work card: category chip
   --------------------------------------------------------------------------
   .work-tag now always reads "Sample Project" - see includes/work-card.php for
   why the disclosure can no longer be omitted. That left the caller's original
   category with nowhere to go, so it renders as its own quiet chip.

   Deliberately lower contrast than .work-tag. The disclosure is the
   information a visitor needs; the category is a nice-to-have, and styling
   them identically would let the category compete with it.

   Declared here rather than in assets/css/style.css, which is the frozen
   design-system file and is never modified.
   ========================================================================== */

.work-category {
    display: inline-block;
    margin-left: 0.5rem;
    font-family: var(--mono);
    font-size: 0.65rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.1rem 0.45rem;
    vertical-align: baseline;
}

/* On a narrow card the two chips stack rather than wrap mid-word. */
@media (max-width: 480px) {
    .work-category {
        display: block;
        width: fit-content;
        margin-left: 0;
        margin-top: 0.35rem;
    }
}