/* ============================================================
   EXTRA STYLES — added for: service pages, project pages,
   breadcrumbs, FAQ, contact form status, privacy page.
   Uses the same CSS variables as style.css — loaded right after it.
   ============================================================ */

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

/* ── Breadcrumb ─────────────────────────────────────────── */
.breadcrumb { margin-bottom: 18px; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; justify-content: center; font-size: 13px; color: var(--text-muted); }
.breadcrumb li:not(:last-child)::after { content: '/'; margin-left: 6px; color: var(--text-muted); opacity: .5; }
.breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.breadcrumb a:hover { color: var(--violet-light); }
.breadcrumb li[aria-current="page"] { color: var(--text-secondary); }

.card-title-link { color: inherit; text-decoration: none; }
.card-title-link:hover { color: var(--violet-light); }
.thumb-link { display: block; width: 100%; height: 100%; }

/* ── Service page ───────────────────────────────────────── */
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.svc-layout { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; }
.svc-content { min-width: 0; }
.svc-block { margin-bottom: 40px; }
.svc-block h2 { font-size: 22px; margin-bottom: 14px; }
.svc-block p { color: var(--text-secondary); margin-bottom: 12px; line-height: 1.75; }

.svc-checklist { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.svc-checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-secondary); }
.svc-checklist i { color: var(--cyan); margin-top: 3px; flex-shrink: 0; }

.svc-steps { list-style: none; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: 18px; }
.svc-steps li { position: relative; padding-left: 46px; counter-increment: step; }
.svc-steps li::before {
    content: counter(step); position: absolute; left: 0; top: 0;
    width: 32px; height: 32px; border-radius: 50%; background: var(--violet);
    color: #fff; font-family: 'Space Grotesk', sans-serif; font-weight: 700;
    display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.svc-steps strong { display: block; margin-bottom: 4px; }
.svc-steps span { color: var(--text-secondary); font-size: 14px; }

.svc-aside-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 28px; position: sticky; top: calc(var(--nav-height) + 24px);
}
.svc-aside-card h2 { font-size: 17px; margin-bottom: 18px; }
.svc-aside-row { display: flex; gap: 12px; margin-bottom: 18px; font-size: 14px; color: var(--text-secondary); }
.svc-aside-row i { color: var(--violet-light); margin-top: 3px; flex-shrink: 0; }
.svc-aside-row strong { color: var(--text-primary); }
.svc-aside-row ul { list-style: none; padding: 0; margin-top: 6px; }
.svc-aside-row ul li { padding: 2px 0; }
.svc-aside-note { font-size: 12px; color: var(--text-muted); margin-top: 14px; text-align: center; }

.svc-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.svc-review {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: 24px;
}
.svc-review blockquote { color: var(--text-secondary); font-size: 14px; line-height: 1.7; margin: 12px 0; }
.svc-review figcaption { font-size: 13px; font-weight: 600; }
.svc-review figcaption small { display: block; font-weight: 400; color: var(--text-muted); font-size: 12px; }

.svc-faq { max-width: 760px; }
.faq-details {
    border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: 16px 20px; margin-bottom: 12px; background: var(--bg-card);
}
.faq-details summary { cursor: pointer; font-weight: 600; font-size: 15px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq-details summary::-webkit-details-marker { display: none; }
.faq-details summary::after { content: '+'; color: var(--violet-light); font-size: 20px; flex-shrink: 0; }
.faq-details[open] summary::after { content: '\2212'; }
.faq-details p { color: var(--text-secondary); font-size: 14px; margin-top: 12px; line-height: 1.7; }

.svc-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.svc-related-card {
    display: flex; align-items: center; gap: 12px; padding: 16px 18px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md);
    color: var(--text-primary); text-decoration: none; transition: var(--transition);
}
.svc-related-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.svc-related-card i:first-child { color: var(--violet-light); font-size: 18px; }
.svc-related-card span { flex: 1; font-size: 14px; font-weight: 500; }
.svc-related-card i:last-child { color: var(--text-muted); font-size: 12px; }

/* ── Project (portfolio item) page ──────────────────────── */
.work-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.work-info h2 { font-size: 20px; margin-bottom: 12px; }
.work-info > p { color: var(--text-secondary); line-height: 1.75; margin-bottom: 20px; }
.work-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin-bottom: 20px; }
.work-facts dt { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.work-facts dd { font-size: 14px; font-weight: 500; }
.work-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 32px; }
.work-services { border-top: 1px solid var(--border); padding-top: 20px; }
.work-services h3 { font-size: 14px; color: var(--text-muted); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .04em; }
.work-services ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.work-services a { color: var(--text-secondary); text-decoration: none; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.work-services a:hover { color: var(--violet-light); }
.work-media { position: sticky; top: calc(var(--nav-height) + 24px); }
.work-figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: var(--bg-secondary); max-height: 80vh; overflow-y: auto; }
.work-img { width: 100%; height: auto; display: block; }

/* ── Reviews slider fallback (if the Swiper library can't load) ─────── */
/* Without Swiper's own JS/CSS, .swiper-wrapper is a plain flex row that
   would overflow sideways; this makes it wrap into a normal grid instead
   so the reviews are still fully readable. */
.reviews-swiper.swiper-fallback { overflow: visible; }
.reviews-swiper.swiper-fallback .swiper-wrapper {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px; transform: none !important; width: 100% !important;
}
.reviews-swiper.swiper-fallback .swiper-slide { width: 100% !important; height: auto !important; }
.reviews-swiper.swiper-fallback .swiper-pagination { display: none; }

/* ── Contact form: honeypot + status message ────────────── */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: 14px; margin-top: 14px; padding: 10px 14px; border-radius: var(--radius-sm); display: none; }
.form-status:not(:empty) { display: block; }
.form-status.success { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3); color: #22c55e; }
.form-status.error { background: rgba(244,63,94,0.1); border: 1px solid rgba(244,63,94,0.3); color: #f43f5e; }
.form-privacy { font-size: 12px; color: var(--text-muted); margin-top: 10px; text-align: center; }
.form-privacy a { color: var(--text-secondary); }

/* ── Privacy policy page ────────────────────────────────── */
.policy-content { max-width: 760px; margin: 0 auto; color: var(--text-secondary); line-height: 1.8; }
.policy-content h2 { color: var(--text-primary); font-size: 20px; margin: 32px 0 12px; }
.policy-content p, .policy-content li { font-size: 15px; }
.policy-content ul { padding-left: 20px; margin-bottom: 12px; }
.policy-content .policy-updated { font-size: 13px; color: var(--text-muted); margin-bottom: 32px; }

/* ── 404 page ────────────────────────────────────────────── */
.error-404 { text-align: center; padding: calc(var(--nav-height) + 80px) 24px 100px; }
.error-404 .code { font-family: 'Space Grotesk', sans-serif; font-size: clamp(64px, 12vw, 120px); font-weight: 700; background: linear-gradient(135deg, var(--violet-light), var(--cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; }
.error-404 h1 { margin: 16px 0 12px; font-size: 26px; }
.error-404 p { color: var(--text-secondary); margin-bottom: 28px; }
.error-404 .error-links { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
    .svc-layout, .work-layout { grid-template-columns: 1fr; }
    .svc-aside-card, .work-media { position: static; }
    .svc-checklist { grid-template-columns: 1fr; }
    .work-facts { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   PORTFOLIO NAV DROPDOWN  +  PORTFOLIO CATEGORY SWITCHER
   ============================================================ */

/* Toggle button looks exactly like the other nav links */
.nav-dropdown-toggle {
    background: none; border: 1px solid transparent; cursor: pointer;
    font-family: inherit; display: inline-flex; align-items: center; gap: 6px;
}
.nav-caret { font-size: 10px; transition: transform 0.25s ease; }

/* --- Desktop: hover-reveal panel --- */
@media (min-width: 769px) {
    .nav-item-dropdown { position: relative; }
    .nav-dropdown {
        list-style: none; margin: 0; padding: 8px; position: absolute;
        /* Floating look: the panel sits 10px below the button. The ::before below is an
           invisible bridge that fills that 10px gap, so the mouse never "falls out" of the
           hover area on its way down (no dead zone, but the visual gap is kept). */
        top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px);
        min-width: 220px; background: rgba(15,15,26,0.98); backdrop-filter: blur(20px);
        border: 1px solid var(--border); border-radius: var(--radius-md);
        box-shadow: 0 20px 50px rgba(0,0,0,0.5);
        opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease;
        z-index: 200;
    }
    .nav-dropdown::before {
        content: ''; position: absolute; left: 0; right: 0;
        top: -16px; height: 16px;   /* covers the 10px gap + a little overlap into the button */
    }
    .nav-item-dropdown:hover .nav-dropdown,
    .nav-item-dropdown:focus-within .nav-dropdown,
    .nav-item-dropdown.js-open .nav-dropdown {
        opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0);
    }
    .nav-item-dropdown:hover .nav-caret,
    .nav-item-dropdown.js-open .nav-caret { transform: rotate(180deg); }
    .nav-dropdown-link {
        display: flex; align-items: center; gap: 10px; padding: 10px 14px;
        border-radius: 8px; font-size: 14px; color: var(--text-secondary); text-decoration: none;
        white-space: nowrap;
    }
    .nav-dropdown-link i { color: var(--violet-light); width: 16px; text-align: center; }
    .nav-dropdown-link:hover { background: rgba(124,58,237,0.12); color: var(--text-primary); }
    .nav-dropdown-link.active { background: rgba(124,58,237,0.16); color: var(--violet-light); font-weight: 600; }
}

/* --- Mobile: accordion "drawer" inside the slide-out menu --- */
@media (max-width: 768px) {
    .nav-links.open { max-height: min(760px, 82vh); overflow-y: auto; }
    .nav-dropdown {
        list-style: none; margin: 4px 0 8px; padding: 0 0 0 14px;
        max-height: 0; overflow: hidden; opacity: 0;
        transition: max-height 0.3s ease, opacity 0.25s ease;
        border-left: 2px solid rgba(124,58,237,0.25);
    }
    .nav-item-dropdown.js-open .nav-dropdown { max-height: 400px; opacity: 1; }
    .nav-item-dropdown.js-open .nav-caret { transform: rotate(180deg); }
    .nav-dropdown-link {
        display: flex; align-items: center; gap: 10px; padding: 12px 14px;
        border-radius: 10px; font-size: 14px; color: var(--text-secondary); text-decoration: none;
    }
    .nav-dropdown-link i { color: var(--violet-light); width: 16px; text-align: center; }
    .nav-dropdown-link:hover, .nav-dropdown-link.active { background: rgba(124,58,237,0.12); color: var(--violet-light); }
}

/* Category switcher row on each /portfolio/<cat>/ listing page */
.cat-switch { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 20px; }
.cat-switch-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px;
    border-radius: 999px; border: 1px solid var(--border); color: var(--text-secondary);
    text-decoration: none; font-size: 13px; font-weight: 500; transition: var(--transition);
}
.cat-switch-btn:hover { border-color: var(--border-hover); color: var(--text-primary); }
.cat-switch-btn.active { background: var(--violet); border-color: var(--violet); color: #fff; }

/* ============================================================
   GALLERY LAYOUT (Klaviyo project pages)
   ============================================================ */

/* Fixed-size, non-scrolling hero image on the right (instead of the
   tall scrollable .work-figure used by the standard layout) */
.work-figure-fixed {
    max-height: none; overflow: visible;
    aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
    background: var(--bg-secondary);
}
.work-figure-fixed .work-img { width: 100%; height: 100%; object-fit: cover; }

/* Full-preview gallery, stacked below the description */
.work-gallery { border-top: 1px solid var(--border); padding-top: 24px; margin-top: 8px; }
.work-gallery h3 { font-size: 14px; color: var(--text-muted); margin-bottom: 16px; text-transform: uppercase; letter-spacing: .04em; }
.work-gallery-item {
    margin: 0 0 20px; border-radius: var(--radius-md); overflow: hidden;
    border: 1px solid var(--border); background: var(--bg-secondary);
}
.work-gallery-item img { width: 100%; height: auto; display: block; }

/* ============================================================
   ADMIN SIDEBAR — Portfolio drawer submenu
   ============================================================ */
.admin-nav-drawer-toggle {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    background: none; border: none; cursor: pointer; font-family: inherit;
    padding: 10px 14px; border-radius: 8px; font-size: 14px; transition: var(--transition);
    -webkit-appearance: none; appearance: none;
    color: var(--text-secondary) !important;   /* browsers give <button> its own default text color; this beats it */
}
.admin-nav-drawer-toggle i:first-child { width: 18px; text-align: center; color: var(--text-secondary); }
.admin-nav-drawer-toggle:hover, .admin-nav-drawer-toggle.active {
    background: rgba(124,58,237,0.15);
    color: var(--violet-light) !important;
}
.admin-nav-drawer-toggle:hover i:first-child, .admin-nav-drawer-toggle.active i:first-child { color: var(--violet-light); }
.admin-drawer-caret { margin-left: auto; font-size: 11px; transition: transform 0.25s ease; }
.admin-nav-drawer-toggle.open .admin-drawer-caret { transform: rotate(180deg); }

.admin-nav-drawer {
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 0.3s ease, opacity 0.25s ease;
    display: flex; flex-direction: column; gap: 2px;
    padding-left: 14px; margin-left: 10px;
    border-left: 2px solid rgba(124,58,237,0.25);
}
.admin-nav-drawer.open { max-height: 300px; opacity: 1; margin-top: 2px; margin-bottom: 4px; }
.admin-nav-drawer a { font-size: 13px; padding: 9px 12px; }