/* ==========================================================================
   Enginx — Home Page Stylesheet  ·  "Instrument" redesign
   --------------------------------------------------------------------------
   Loaded only by core/templates/core/home.html.

   Design language: flat graphite surfaces, 1px hairlines, typography-led
   headers, a single strong orange accent (cyan reserved for mirrored
   sections). No gradients, no glow, no glass — precision over decoration.

   Class contract (the template relies on these exact names):
     .glass-dark-header  .section-shell  .section-shell--flip
     .section-badge  .text-gradient-brand  .title-shine  .btn-brand
     .btn-brand  .glass-dark-card  .card-spotlight  .card-neon
     .pulse-dot
   ========================================================================== */

/* --- 1. Design tokens ---------------------------------------------------- */
:root {
    /* surfaces — neutral graphite, not blue-slate */
    --engx-bg: #0a0a0d;
    --engx-surface: #101014;
    --engx-card: #101015;
    --engx-card-hover: #15151b;
    --engx-line: #232329;
    --engx-line-strong: #33333b;

    /* brand — orange leads, cyan is the mirrored-section accent */
    --engx-p: #f97316;
    --engx-p-400: #fb923c;
    --engx-p-600: #ea580c;
    --engx-s: #22d3ee;
    --engx-s-400: #67e8f9;
    --engx-p-tint: rgba(249, 115, 22, 0.08);
    --engx-s-tint: rgba(34, 211, 238, 0.08);

    /* text + status */
    --engx-text: #e8e8ec;
    --engx-muted: #9b9ba4;
    --engx-ok: #34d399;

    /* shape + motion */
    --engx-r: 0.625rem;
    --engx-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- 2. Base & page shell ------------------------------------------------ */
html, body { overflow-x: clip; }
body { background-color: var(--engx-bg); }

/* The sticky header is ~5rem tall: keep anchor jumps clear of it. */
section[id], footer[id] { scroll-margin-top: 5.5rem; }

::selection { background: var(--engx-p); color: #ffffff; }

/* Slim, on-brand scrollbar */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--engx-bg); }
::-webkit-scrollbar-thumb {
    background: var(--engx-line-strong);
    border: 2px solid var(--engx-bg);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--engx-p); }

/* Keyboard focus is always visible and always on-brand */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--engx-p-400);
    outline-offset: 2px;
}

/* --- 3. Page chrome ------------------------------------------------------ */

/* Sticky header: near-opaque, one hairline along the bottom edge */
.glass-dark-header {
    background-color: rgba(10, 10, 13, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--engx-line);
}

/* --- 4. Section canvas -----------------------------------------------------
   Every section is a flat slab. Sections are separated by a single 1px
   hairline (owned by the section that follows), with a small square
   registration node seated on the line — an echo of instrument panels.
   -------------------------------------------------------------------------- */
.section-shell { position: relative; }

.section-shell::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--engx-line);
}

.section-shell::after {
    content: "";
    position: absolute;
    top: -2.5px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    background: var(--engx-p);
}

/* Mirrored sections swap the node accent to cyan */
.section-shell--flip::after { background: var(--engx-s); }

/* --- 5. Section head system ---------------------------------------------- */

/* Squared kicker label above every section title */
.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.42rem 0.85rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.02em;
    color: var(--engx-muted);
    background: transparent;
    border: 1px solid var(--engx-line-strong);
    transition: color 0.2s var(--engx-ease), border-color 0.2s var(--engx-ease);
}
/* A square tick instead of a glowing bar */
.section-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--engx-p);
    flex-shrink: 0;
}
.section-badge i { font-size: 0.7rem; color: var(--engx-p-400); }
.section-badge:hover {
    color: var(--engx-text);
    border-color: rgba(249, 115, 22, 0.45);
}

/* Mirrored sections flip the badge accent to the secondary colour */
.section-shell--flip .section-badge::before { background: var(--engx-s); }
.section-shell--flip .section-badge i { color: var(--engx-s-400); }
.section-shell--flip .section-badge:hover {
    border-color: rgba(34, 211, 238, 0.45);
}

/* The headline that follows a badge */
.section-badge + h2 { letter-spacing: -0.01em; }

/* Headline emphasis: solid white — the redesign retires gradient text.
   The class name stays so the template keeps working unchanged. */
.text-gradient-brand {
    background-image: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: #ffffff;
}
.title-shine { animation: none; }

/* --- 6. Buttons -----------------------------------------------------------
   Geometry (width/padding) stays with the Tailwind utilities in the
   template; these classes own only the skin.
   -------------------------------------------------------------------------- */
.btn-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--engx-p);
    color: #ffffff;
    font-weight: 700;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: background-color 0.2s var(--engx-ease);
}
.btn-brand:hover { background: var(--engx-p-600); }
.btn-brand:active { transform: translateY(1px); }

/* --- 7. Cards -------------------------------------------------------------- */
.glass-dark-card {
    position: relative;
    background-color: var(--engx-card);
    border: 1px solid var(--engx-line);
    transition: background-color 0.2s var(--engx-ease), border-color 0.2s var(--engx-ease);
}
/* Tighten the template's generous Tailwind radii for the instrument look.
   The two-class selectors outrank the single-class utilities. */
.glass-dark-card.rounded-2xl { border-radius: 0.75rem; }
.glass-dark-card.rounded-xl  { border-radius: var(--engx-r); }
.glass-dark-card:hover {
    background-color: var(--engx-card-hover);
    border-color: var(--engx-line-strong);
}

/* card-spotlight: a quiet top accent bar that draws itself in on hover */
.card-spotlight::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0.9rem;
    left: 0.9rem;
    height: 2px;
    border-radius: 2px;
    background: var(--engx-p);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.25s var(--engx-ease);
    pointer-events: none;
}
.card-spotlight:hover::before,
.card-spotlight:focus-within::before { transform: scaleX(1); }

/* card-neon: a calm lifted state instead of a glowing ring */
.card-neon:hover,
.card-neon:focus-within {
    box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.28),
                0 10px 28px -14px rgba(0, 0, 0, 0.7);
}

/* --- 8. Live status pulse ------------------------------------------------- */
.pulse-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--engx-ok);
    animation: engx-pulse 2.6s ease-out infinite;
}
@keyframes engx-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); }
    70%  { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

/* --- 10. Accessibility: stop moving when the visitor asks us to ----------- */ */
@media (prefers-reduced-motion: reduce) {
    html.scroll-smooth { scroll-behavior: auto; }
    .pulse-dot { animation: none !important; }
    .glass-dark-card,
    .card-spotlight::before,
    .card-neon,
    .btn-brand,
    .section-badge { transition: none; }
}

/* --- 11. Wizard Review Card (کارت بازبینی پروژه) ------------------- */
.wizard-review-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.wizard-review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 12px;
}

.wizard-review-title {
    font-size: 13px;
    font-weight: 600;
    color: #e8e8ec;
    letter-spacing: 0.5px;
}

.wizard-review-icon {
    color: var(--engx-p-400);
    font-size: 16px;
}

.wizard-review-grid {
    display: grid;
    gap: 14px;
}

.wizard-review-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wizard-review-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    color: #9b9ba4;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.wizard-review-value {
    font-size: 14px;
    line-height: 1.4;
    color: #e8e8ec;
}

.wizard-review-extra {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: #9b9ba4;
}

.wizard-review-extra span.text-white {
    color: #e8e8ec;
}

.wizard-review-extra span.text-orangeTech-300 {
    color: #fdba74;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .wizard-review-card {
        padding: 12px;
    }
    
    .wizard-review-title {
        font-size: 12px;
    }
    
    .wizard-review-value {
        font-size: 13px;
    }
}
}