/* =====================================================
   NSIA ADVERTISEMENT STYLES
   ===================================================== */

/* Base ad styles */
.nsia-ad {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f8f9fa;
  border-radius: 8px;
  overflow: hidden;
}

.nsia-ad__container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nsia-ad__link {
  display: block;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.nsia-ad__link:hover {
  opacity: 0.9;
}

.nsia-ad__image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.nsia-ad__label {
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-size: 10px;
  color: #999;
  background: rgba(255, 255, 255, 0.9);
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* =====================================================
   LEADERBOARD AD (Top of page - 728x90 or 970x90)
   ===================================================== */

.nsia-ad--leaderboard {
  width: 100%;
  max-width: 970px;
  margin: 0 auto;
  padding: 10px;
  background: linear-gradient(135deg, #f0f0f0 0%, #e8e8e8 100%);
  border-bottom: 1px solid #ddd;
}

.nsia-ad--leaderboard .nsia-ad__container {
  width: 100%;
}

.nsia-ad--leaderboard .nsia-ad__image {
  max-height: 90px;
  width: auto;
  max-width: 100%;
}

/* Leaderboard wrapper (for header placement) */
.nsia-leaderboard-ad-wrapper {
  width: 100%;
  background: linear-gradient(135deg, #f5f5f5 0%, #ebebeb 100%);
  padding: 10px 0;
  text-align: center;
  border-bottom: 1px solid #e0e0e0;
}

/* =====================================================
   SKYSCRAPER AD (Right sidebar - 160x600 or 300x600)
   ===================================================== */

.nsia-ad--skyscraper {
  width: 160px;
  min-height: 250px;
  padding: 5px;
  background: linear-gradient(135deg, #f8f8f8 0%, #f0f0f0 100%);
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.nsia-ad--skyscraper .nsia-ad__container {
  width: 100%;
}

.nsia-ad--skyscraper .nsia-ad__image {
  width: 150px;
  height: auto;
  max-height: 600px;
}

/* Skyscraper wrapper (for sidebar placement) */
.nsia-skyscraper-ad-wrapper {
  width: 100%;
  max-width: 180px;
  padding: 0;
}

/* =====================================================
   PAGE LAYOUT WITH ADS
   ===================================================== */

/* Main content wrapper - content keeps full width */
.nsia-page-with-ads {
  position: relative;
  width: 100%;
}

.nsia-page-with-ads__content {
  width: 100%;
}

/* Sidebar with skyscraper ad - fixed position on right */
.nsia-page-with-ads__sidebar {
  position: fixed;
  /* Position below header - adjust based on header height */
  top: 180px;
  right: calc(50% - 720px);
  width: 180px;
  z-index: 100;
  /* Limit height to avoid overlapping with footer */
  max-height: calc(100vh - 360px);
  overflow: hidden;
  transition: opacity 0.3s ease;
}

/* Hide ad when near footer */
.nsia-page-with-ads__sidebar.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Only show sidebar on extra large screens */
@media (max-width: 1500px) {
  .nsia-page-with-ads__sidebar {
    right: 10px;
  }
}

@media (max-width: 1400px) {
  .nsia-page-with-ads__sidebar {
    display: none;
  }
}

/* Ensure header is above fixed elements */
.site-header,
header,
.nsia-portal-header,
.header,
#header {
  position: relative;
  z-index: 300;
}

/* Ensure footer is above fixed elements */
.site-footer,
footer,
.nsia-portal-footer,
.footer,
#footer {
  position: relative;
  z-index: 300;
  background: #1a5f2a;
}

/* =====================================================
   RESPONSIVE STYLES
   ===================================================== */

/* Tablet */
@media (max-width: 1024px) {
  .nsia-ad--leaderboard .nsia-ad__image {
    max-width: 728px;
    max-height: 90px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .nsia-ad--leaderboard {
    padding: 8px;
  }

  .nsia-ad--leaderboard .nsia-ad__image {
    max-width: 100%;
    max-height: 60px;
  }

  .nsia-leaderboard-ad-wrapper {
    padding: 8px 10px;
  }
}

/* =====================================================
   DARK MODE SUPPORT (if applicable)
   ===================================================== */

@media (prefers-color-scheme: dark) {
  .nsia-ad {
    background: #2d2d2d;
    border-color: #404040;
  }

  .nsia-ad__label {
    background: rgba(0, 0, 0, 0.7);
    color: #ccc;
  }

  .nsia-leaderboard-ad-wrapper {
    background: linear-gradient(135deg, #2d2d2d 0%, #252525 100%);
    border-color: #404040;
  }
}