/* =========================================
   NexOra — Shared reusable components
   ========================================= */

/* ---------- Central icon system ---------- */

.icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    background-color: currentColor;

    -webkit-mask-image: var(--icon-url);
    mask-image: var(--icon-url);

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;
}

/* ---------- Shared button foundation ---------- */
/*
   هندسه و تایپوگرافی دکمه‌ها در این قسمت مشترک است.
   رنگ، پس‌زمینه و حالت‌های ظاهری هر نوع دکمه
   همچنان می‌تواند در CSS صفحه تعریف شود.
*/

.button,
.services-btn,
.services-btn-light,
.software-button {
    box-sizing: border-box;
    font-family: var(--font-family);
    font-size: var(--button-font-size);
    font-weight: var(--font-weight-bold);
    line-height: 1.4;
    text-decoration: none;
}

/* ---------- Shared button layout ---------- */

.button,
.services-btn,
.services-btn-light,
.software-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}

/* ---------- Shared icon alignment inside buttons ---------- */

.button .icon,
.services-btn .icon,
.services-btn-light .icon,
.software-button .icon {
    flex: 0 0 auto;
}
/* ---------- Shared gradient text ---------- */

.gradient-text {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ---------- Keyboard accessibility ---------- */

.button:focus-visible,
.services-btn:focus-visible,
.services-btn-light:focus-visible,
.software-button:focus-visible {
    outline: 2px solid var(--color-cyan);
    outline-offset: 4px;
}


/* ---------- Shared breadcrumb foundation ---------- */
.nexora-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-block: 16px;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}
.nexora-breadcrumb a:hover { color: var(--color-cyan); }
.nexora-breadcrumb [aria-current="page"] { color: var(--color-text); }


/* ---------- Shared button geometry ---------- */
/* Keeps the existing pill/button geometry consistent across every page. */
.button {
    min-height: var(--button-height);
    padding: 0 var(--button-padding-inline);
    border: 1px solid transparent;
    border-radius: var(--button-radius);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.button:hover { transform: translateY(-2px); }

/* ---------- Central button color system ---------- */
/* Color changes belong in tokens.css; the individual page files keep geometry. */
.button-primary,
.contact-page .button-primary {
    color: var(--button-primary-color);
    background: var(--button-primary-bg);
}
.button-secondary {
    color: var(--button-secondary-color);
    background: var(--button-secondary-bg);
    border-color: var(--button-secondary-border);
}
.services-btn-primary,
.sd-button-primary,
.software-button-primary {
    color: var(--button-brand-color);
    background: var(--button-brand-bg);
}
.services-btn-secondary,
.sd-button-secondary {
    color: var(--button-secondary-color);
    background: var(--button-surface-bg);
    border-color: var(--button-secondary-border);
}
.about-button-primary,
.portfolio-button-primary {
    color: var(--button-primary-color);
    background: var(--button-portfolio-bg);
}
.estimate-btn-primary {
    color: var(--button-primary-color);
    background: var(--button-estimate-bg);
}
.software-button-secondary {
    color: var(--button-secondary-color);
}