/**
 * J. SADEG - Reusable Components
 * Strictly using only the brand colors:
 * #ECF1FF, #391224, #22B573, #3EA2BE, #C859B0
 */

/* ==========================================================================
   1. Logo Component
   ========================================================================== */

.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
}

.logo img {
  display: block;
  height: 52px;
  width: auto;
  max-width: 100%;
}

.logo-light,
.logo-dark {
  filter: none;
}

/* ==========================================================================
   2. Button Component
   - .btn-primary (filled dark)
   - .btn-secondary (outlined)
   - .btn-tertiary (filled green with dark text)
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-base);
  font-size: var(--font-size-btn);
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
  padding: 18px 34px;
  border-radius: var(--radius-btn);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity var(--transition-base),
              background-color var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base),
              transform var(--transition-fast);
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Primary Button: Filled Dark */
.btn-primary,
.btn-dark {
  background-color: var(--color-dark);
  color: var(--color-bg);
  border-color: var(--color-dark);
}

.btn-primary:hover,
.btn-dark:hover {
  opacity: 0.9;
  color: var(--color-bg);
}

/* Secondary Button: Outlined */
.btn-secondary,
.btn-outline {
  background-color: transparent;
  color: var(--color-dark);
  border-color: var(--color-dark);
}

.btn-secondary:hover,
.btn-outline:hover {
  background-color: var(--color-dark);
  color: var(--color-bg);
}

/* Tertiary Button: Filled Green */
.btn-tertiary,
.btn-green {
  background-color: var(--color-main);
  color: var(--color-dark);
  border-color: var(--color-main);
}

.btn-tertiary:hover,
.btn-green:hover {
  opacity: 0.9;
  color: var(--color-dark);
}

/* ==========================================================================
   3. Link Component
   Arrow links in circle and plain versions
   ========================================================================== */

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  font-family: var(--font-family-base);
  font-size: var(--font-size-btn);
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--transition-base), transform var(--transition-fast);
}

.arrow-link:hover {
  opacity: 0.85;
}

.arrow-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-tag);
}

.arrow-link .link-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 41px;
  height: 41px;
  border-radius: var(--radius-circle);
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.arrow-link:hover .link-icon-circle {
  transform: translate(2px, -2px);
}

.arrow-link .link-icon-circle img {
  width: 100%;
  height: 100%;
  display: block;
}

.arrow-link .link-icon-plain {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.arrow-link:hover .link-icon-plain {
  transform: translate(3px, -3px);
}

.arrow-link .link-icon-plain img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Link color themes */
.link-circle-white-green { color: var(--color-bg); }
.link-circle-white-dark  { color: var(--color-bg); }
.link-circle-dark-green  { color: var(--color-dark); }
.link-circle-dark-white  { color: var(--color-dark); }
.link-circle-green-dark  { color: var(--color-dark); }
.link-circle-green-white { color: var(--color-bg); }

.link-plain-green { color: var(--color-main); }
.link-plain-white { color: var(--color-bg); }
.link-plain-dark  { color: var(--color-dark); }

/* ==========================================================================
   4. Plus / Minus Toggle Icon Component
   ========================================================================== */

.icon-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-circle);
  transition: transform var(--transition-fast), opacity var(--transition-base);
}

.icon-toggle:hover {
  transform: scale(1.05);
}

.icon-toggle:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.icon-toggle img {
  width: 100%;
  height: 100%;
  display: block;
}

/* ==========================================================================
   5. Services Tickers (Non-reactive, no background, dark frame)
   ========================================================================== */

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  list-style: none;
  padding: 0;
  margin: 0;
}

.tag-item {
  font-family: var(--font-family-base);
  font-size: var(--font-size-tag);
  color: var(--color-dark);
  background: transparent;
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-tag);
  padding: 8px 18px;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   6. Project Card Component
   ========================================================================== */

.project-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-base);
  height: 100%;
}

.project-card:hover {
  transform: translateY(-4px);
}

.project-card:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.project-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 500 / 420;
  background-color: var(--color-bg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-card-footer {
  background-color: var(--color-dark);
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 80px;
}

.project-card-title {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-btn);
  font-weight: var(--font-weight-regular);
  color: var(--color-bg);
  line-height: 1.4;
  letter-spacing: 0.01em;
}