/**
 * SadMug - Reusable Components
 * All components feature sharp edges (no rounded corners).
 */

/* ==========================================================================
   1. Logo_SM Component
   ========================================================================== */

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

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

.logo-sm-red img {
  /* Default red version */
}

.logo-sm-cream img {
  /* Cream version for dark backgrounds */
}

/* ==========================================================================
   2. Button_SM Component
   Three variants:
   - .btn-primary / .btn-charcoal (charcoal filled)
   - .btn-secondary / .btn-outline (outlined charcoal)
   - .btn-tertiary / .btn-red (red filled)
   All sharp edges (0px radius).
   ========================================================================== */

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

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

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

/* Primary: Charcoal Filled */
.btn-sm-primary,
.btn-sm-charcoal {
  background-color: var(--color-charcoal);
  color: var(--color-cream);
  border-color: var(--color-charcoal);
}

.btn-sm-primary:hover,
.btn-sm-charcoal:hover {
  background-color: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-cream);
}

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

.btn-sm-secondary:hover,
.btn-sm-outline:hover {
  background-color: var(--color-charcoal);
  color: var(--color-cream);
}

/* Tertiary: Red Filled */
.btn-sm-tertiary,
.btn-sm-red {
  background-color: var(--color-red);
  color: var(--color-cream);
  border-color: var(--color-red);
}

.btn-sm-tertiary:hover,
.btn-sm-red:hover {
  background-color: var(--color-charcoal);
  border-color: var(--color-charcoal);
  color: var(--color-cream);
}

/* ==========================================================================
   3. Link_SM Component
   Sharp arrow link variants
   ========================================================================== */

.link-sm {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-family-base);
  font-size: var(--font-size-btn);
  color: var(--color-link);
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius-none);
  transition: color var(--transition-base), opacity var(--transition-base);
}

.link-sm:hover {
  color: var(--color-red);
}

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

.link-sm .material-symbols-sharp {
  font-size: 20px;
  transition: transform var(--transition-base);
}

.link-sm:hover .material-symbols-sharp {
  transform: translate(2px, -2px);
}

/* Link color schemes */
.link-sm-coffee   { color: var(--color-coffee); }
.link-sm-charcoal { color: var(--color-charcoal); }
.link-sm-red      { color: var(--color-red); }
.link-sm-cream    { color: var(--color-cream); }

/* ==========================================================================
   4. Plus / Minus Icon SM
   Sharp square toggle buttons for expandable sections
   ========================================================================== */

.icon-toggle-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--radius-none);
  border: var(--border-sharp);
  background-color: transparent;
  color: var(--color-charcoal);
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.icon-toggle-sm:hover {
  background-color: var(--color-charcoal);
  color: var(--color-cream);
}

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

/* ==========================================================================
   5. Bento Tile Action Badge
   Sharp square badge (charcoal background, cream icon) with small margin
   Hidden by default, fades in on hover/focus, always visible on touch devices
   ========================================================================== */

.tile-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background-color: var(--color-charcoal);
  color: var(--color-cream);
  border-radius: var(--radius-none);
  border: 1px solid var(--color-charcoal);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
  z-index: 2;
}

.tile-badge .material-symbols-sharp {
  font-size: 20px;
  line-height: 1;
}

/* Badge hover/focus: short opacity fade, no movement */
.bento-tile:hover .tile-badge,
.bento-tile:focus-visible .tile-badge {
  opacity: 1;
}

@media (hover: none) {
  .tile-badge {
    opacity: 1;
  }
}

/* ==========================================================================
   6. Lightbox Modal Component (<dialog>)
   Sharp box, backdrop blur, Escape/click-outside dismiss
   Header bar with title and flush square close button
   Image area with cream padding
   Footer bar with optional description
   ========================================================================== */

.lightbox-dialog {
  padding: 0;
  border: var(--border-sharp);
  border-radius: var(--radius-none);
  background-color: var(--color-cream);
  color: var(--color-charcoal);
  max-width: 90vw;
  max-height: 90vh;
  box-shadow: 0 16px 32px rgba(35, 35, 35, 0.4);
  overflow: hidden;
}

.lightbox-dialog::backdrop {
  background-color: rgba(35, 35, 35, 0.75);
  backdrop-filter: blur(4px);
}

.lightbox-container {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  max-width: 90vw;
  background-color: var(--color-cream);
}

.lightbox-header {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  border-bottom: var(--border-sharp);
  height: 48px;
  background-color: var(--color-cream);
  flex-shrink: 0;
}

.lightbox-title {
  margin: 0;
  padding: 0 16px;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--color-charcoal);
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lightbox-close-btn {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-charcoal);
  color: var(--color-cream);
  border: none;
  border-left: var(--border-sharp);
  border-radius: var(--radius-none);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.lightbox-close-btn:hover {
  background-color: var(--color-red);
  color: var(--color-cream);
}

.lightbox-close-btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -2px;
}

.lightbox-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background-color: var(--color-cream);
}

.lightbox-image {
  max-width: 100%;
  max-height: calc(90vh - 120px);
  object-fit: contain;
  width: auto;
  height: auto;
  display: block;
}

.lightbox-footer {
  border-top: var(--border-sharp);
  padding: 12px 16px;
  background-color: var(--color-cream);
  flex-shrink: 0;
}

.lightbox-footer[hidden] {
  display: none;
}

.lightbox-description {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: 0.95rem;
  color: var(--color-charcoal);
  line-height: 1.4;
}