/* === ALBUKARAOQUE WEBSITE - UTILITIES === */
/* Utility classes, helpers, and common reusable styles */

/* === UTILITY CLASSES === */
.hidden {
  opacity: 0.25;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

/* === SPACING UTILITIES === */
.m-0 { margin: 0; }
.m-1 { margin: 1rem; }
.m-2 { margin: 2rem; }
.m-3 { margin: 3rem; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }

.p-0 { padding: 0; }
.p-1 { padding: 1rem; }
.p-2 { padding: 2rem; }
.p-3 { padding: 3rem; }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 1rem; }
.pt-2 { padding-top: 2rem; }
.pt-3 { padding-top: 3rem; }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 1rem; }
.pb-2 { padding-bottom: 2rem; }
.pb-3 { padding-bottom: 3rem; }

/* === DISPLAY UTILITIES === */
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

/* === FLEX UTILITIES === */
.flex-column { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.justify-content-start { justify-content: flex-start; }
.justify-content-center { justify-content: center; }
.justify-content-end { justify-content: flex-end; }
.justify-content-between { justify-content: space-between; }
.justify-content-around { justify-content: space-around; }

.align-items-start { align-items: flex-start; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }
.align-items-stretch { align-items: stretch; }

/* === WIDTH & HEIGHT UTILITIES === */
.w-25 { width: 25%; }
.w-50 { width: 50%; }
.w-75 { width: 75%; }
.w-100 { width: 100%; }
.w-auto { width: auto; }

.h-25 { height: 25%; }
.h-50 { height: 50%; }
.h-75 { height: 75%; }
.h-100 { height: 100%; }
.h-auto { height: auto; }

.mw-100 { max-width: 100%; }
.mh-100 { max-height: 100%; }

/* === COLOR UTILITIES === */
.text-primary { color: #40B5A3; }
.text-secondary { color: #78D5C7; }
.text-dark { color: #2c3e50; }
.text-light { color: #f8f9fa; }
.text-muted { color: #666; }
.text-white { color: white; }
.text-black { color: black; }

.bg-primary { background-color: #40B5A3; }
.bg-secondary { background-color: #78D5C7; }
.bg-dark { background-color: #2c3e50; }
.bg-light { background-color: #f8f9fa; }
.bg-white { background-color: white; }
.bg-transparent { background-color: transparent; }

/* === BORDER UTILITIES === */
.border { border: 1px solid #e9ecef; }
.border-0 { border: 0; }
.border-top { border-top: 1px solid #e9ecef; }
.border-bottom { border-bottom: 1px solid #e9ecef; }
.border-left { border-left: 1px solid #e9ecef; }
.border-right { border-right: 1px solid #e9ecef; }

.border-primary { border-color: #40B5A3; }
.border-secondary { border-color: #78D5C7; }
.border-dark { border-color: #2c3e50; }
.border-light { border-color: #e9ecef; }

.rounded { border-radius: 0.375rem; }
.rounded-0 { border-radius: 0; }
.rounded-1 { border-radius: 0.25rem; }
.rounded-2 { border-radius: 0.5rem; }
.rounded-3 { border-radius: 1rem; }
.rounded-circle { border-radius: 50%; }
.rounded-pill { border-radius: 50rem; }

/* === SHADOW UTILITIES === */
.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); }
.shadow { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }
.shadow-lg { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175); }

/* === POSITION UTILITIES === */
.position-static { position: static; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; }

/* === OVERFLOW UTILITIES === */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }

/* === COMMON ELEMENT STYLES === */
.section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.section-title {
  font-size: 2.5rem;
  color: #2c3e50;
  text-align: center;
  margin-bottom: 3rem;
  font-weight: 700;
}

.section-subtitle {
  font-size: 1.2rem;
  color: #666;
  text-align: center;
  margin-bottom: 2rem;
  line-height: 1.6;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* === GRADIENT BACKGROUNDS === */
.bg-gradient-primary {
  background: linear-gradient(135deg, #40B5A3 0%, #78D5C7 100%);
}

.bg-gradient-dark {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
}

.bg-gradient-light {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

/* === INTERACTIVE UTILITIES === */
.clickable {
  cursor: pointer;
  user-select: none;
}

.no-select {
  user-select: none;
}

.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

/* === RESPONSIVE UTILITIES === */
@media (max-width: 575.98px) {
  .d-sm-none { display: none; }
  .d-sm-block { display: block; }
  .d-sm-flex { display: flex; }
  
  .text-sm-center { text-align: center; }
  .text-sm-left { text-align: left; }
  
  .section-container {
    padding: 0 1rem;
  }
  
  .section-title {
    font-size: 2rem;
  }
}

@media (max-width: 767.98px) {
  .d-md-none { display: none; }
  .d-md-block { display: block; }
  .d-md-flex { display: flex; }
  
  .text-md-center { text-align: center; }
  .text-md-left { text-align: left; }
}

@media (max-width: 991.98px) {
  .d-lg-none { display: none; }
  .d-lg-block { display: block; }
  .d-lg-flex { display: flex; }
  
  .text-lg-center { text-align: center; }
  .text-lg-left { text-align: left; }
}

/* === ACCESSIBILITY UTILITIES === */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.focus-visible:focus {
  outline: 2px solid #40B5A3;
  outline-offset: 2px;
}

/* === PRINT UTILITIES === */
@media print {
  .d-print-none { display: none !important; }
  .d-print-block { display: block !important; }
  .d-print-inline { display: inline !important; }
  .d-print-inline-block { display: inline-block !important; }
}

/* === ANTI-OVERFLOW UTILITIES === */
* {
  box-sizing: border-box;
}

.container, .hero-section, .faq-hero, .videos-hero, .musicians-hero {
  max-width: 100%;
  overflow-x: hidden;
}

/* === HAMBURGER MENU UNIVERSAL FIXES === */
@media screen and (max-width: 600px) {
  /* Universal hamburger positioning - highest specificity without important */
  html body .nav .icon,
  html body .nav ul .icon {
    display: block;
    position: absolute;
    right: 15px;
    top: 28px;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    text-align: center;
    line-height: 44px;
    z-index: 1001;
    color: #ffffff;
    cursor: pointer;
    font-size: 1.8em;
  }
  
  html body .nav.responsive .icon,
  html body .nav.responsive ul .icon {
    right: 15px;
    top: 28px;
    transform: translateY(-50%);
  }
}