/**
 * Base Styles for Hunter Fashion Commission
 * Global styles, containers, and utility classes
 */

/* ============================================
   BASE / GLOBAL STYLES
   ============================================ */

/* Prevent horizontal overflow on mobile */
* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  position: relative;
}

/* Ensure containers don't overflow */
.container,
.container-fluid {
  max-width: 100%;
  overflow-x: hidden;
}

/* Custom container width for larger screens */
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
    width: 100%;
  }
}

/* Container consistency across sections */
.container.mt-5, 
.container.mt-4 {
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}

/* Helper utility classes */
.dark-shadow {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important;
}

.dark-outline {
    outline-color: var(--border-medium) !important;
}

/* Custom animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeSlideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

.loading {
  animation: pulse 1.5s infinite ease-in-out;
}

/* Responsive media handling */
.media {
  display: flex;
  align-items: flex-start;
}

.media-body {
  flex: 1;
}

.media-img {
  margin-right: 1rem;
}