/* ==========================================================================
   Theme: Slate (central hue rgb(99,133,150))
   ========================================================================== */

:root{
  --slate-700: rgb(79,113,130);
  --slate-600: rgb(99,133,150);
  --slate-500: rgb(119,153,170);
  --text: #ffffff;
  --text-weak: #dce3e6;
  --glass-bg: rgba(255,255,255,.08);
  --glass-border: rgba(255,255,255,.2);
  --shadow: rgba(0,0,0,.2);
}

html, body{
  background: var(--slate-600);
  color: var(--text);
  scroll-behavior: smooth;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.cta-fixed{ position: fixed; right: 1rem; top: 1rem; z-index: 1050; }

.btn-accent{
  background: var(--slate-700);
  border-color: var(--slate-700);
  color: #fff;
}
.btn-accent:hover{
  background: rgb(69,103,120);
  border-color: rgb(69,103,120);
}
.btn-outline-accent{ color:#fff; border-color:#fff; }
.btn-outline-accent:hover{ background:#fff; color: var(--slate-700); }

.text-bg-accent{ background-color: var(--slate-700) !important; color:#fff !important; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero-img{
  max-width: 380px;
  margin: 0 auto;
  display: block;
  background: var(--slate-500);
  border-radius: 50%;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
}
.ring{ outline: 16px solid var(--slate-700); outline-offset: -8px; }

/* ==========================================================================
   Sections
   ========================================================================== */

.section-title{
  font-weight: 800;
  letter-spacing: .2px;
  margin-bottom: 1rem;
  color: var(--text);
}
.section-divider{ position: relative; }
.section-divider::before{
  content:"";
  position:absolute;
  inset: 0 0 auto 0;
  height:1px;
  background: rgba(255,255,255,.25);
}
.bg-panel{ background: var(--slate-500) !important; }

/* ==========================================================================
   Cards
   ========================================================================== */

.card-glass{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: 0 6px 20px var(--shadow);
  overflow: hidden;
}
.card-title{ color: var(--text); }
.card-text{ color: var(--text-weak); }

/* ==========================================================================
   Chips
   ========================================================================== */

.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem 1rem; border-radius:999px;
  background: rgba(255,255,255,.1);
  border: 1px solid var(--glass-border);
  color:#fff; text-decoration:none; transition:.15s;
}
.chip:hover{ background: rgba(255,255,255,.25); color:#0f1111; border-color:#fff; }

/* ==========================================================================
   Placeholders
   ========================================================================== */

.placeholder-tile{
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.1);
}
.placeholder-tile.dark{ background: rgba(0,0,0,.2); }
.placeholder-label{
  font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color: var(--text-weak);
}

/* ==========================================================================
   Text / Links
   ========================================================================== */

.text-ink{ color:#fff !important; }
.text-muted-weak{ color: var(--text-weak) !important; }
.text-accent{ color: var(--slate-700) !important; }
.link-muted{ color: var(--text-weak); text-decoration:none; }
.link-muted:hover{ color:#fff; }

/* ==========================================================================
   Forms
   ========================================================================== */

.form-label{ color: var(--text-weak); }
.form-control-dark{
  background: var(--slate-500);
  border-color: rgba(255,255,255,.25);
  color:#fff;
}
.form-control-dark:focus{
  background: var(--slate-500);
  color:#fff;
  border-color:#fff;
  box-shadow: 0 0 0 .25rem rgba(255,255,255,.25);
}
.hp{ position:absolute; left:-9999px; opacity:0; }

/* ==========================================================================
   Footer
   ========================================================================== */

footer{ background: var(--slate-700); color:#fff; }

/* ==========================================================================
   External music cards
   ========================================================================== */

.external-card{
  border:none; border-radius:16px;
  box-shadow:0 4px 20px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease;
  background: var(--card-bg, #f0f4f5);
  color: var(--text, #333);
}
.external-card:hover{
  transform: translateY(-3px);
  box-shadow:0 6px 24px rgba(0,0,0,.12);
  text-decoration:none;
}
.external-logo{ width:48px; height:48px; border-radius:8px; object-fit:cover; }
.external-svg{ width:32px; height:32px; flex-shrink:0; display:flex; align-items:center; justify-content:center; opacity:.6; }
.external-svg svg{ width:100%; height:100%; }

/* ==========================================================================
   Aviation: in-card slideshow (no pop-up)
   ========================================================================== */

.aviation-viewport img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:.75rem;
}

/* Slideshow arrows */
.aviation-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background: rgba(0,0,0,.5);
  color:#fff;
  border:none;
  font-size:2rem;
  padding:.25rem .6rem;
  border-radius:.5rem;
  cursor:pointer;
  z-index:3;
}
.aviation-prev{ left:.5rem; }
.aviation-next{ right:.5rem; }
.aviation-nav:hover{ background: rgba(0,0,0,.7); }

#aviationSlideshow{ cursor: default; } /* or pointer if you prefer */

/* Video play overlay on thumbnails */
.aviation-play{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:64px; height:64px;
  border:none; border-radius:50%;
  background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:4;
}
.aviation-play::before{
  content:"";
  display:block;
  margin-left:4px; /* slight nudge so triangle looks centered */
  border-left:18px solid #fff;
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
}
.aviation-play:hover{ background:rgba(0,0,0,.75); }

/* The inline video fills the same area as the image */
#aviationSlideshow video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  border-radius:.75rem;
  z-index:3;
}

/* Instagram hover effect */
a[href*="instagram.com"] i,
a[href*="instagram.com"] .fa-instagram {
  transition: color .2s ease;
  color: #fff; /* default */
}

a[href*="instagram.com"]:hover i,
a[href*="instagram.com"]:hover .fa-instagram {
  color: #E1306C; /* Instagram pink */
}