/**
 * Ads CSS - One Nation Press
 * Responsive styles for advertisements
 */

/* ============================================
   Ad Container Base Styles
   ============================================ */
.ad-container {
    display: block;
    width: 100%;
    text-align: center;
    margin: 20px 0;
    overflow: hidden;
}

.ad-container a {
    display: inline-block;
    text-decoration: none;
}

.ad-container img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   Standard Ad Sizes
   ============================================ */

/* Leaderboard - 728x90 */
.ad-728x90 {
    max-width: 728px;
    height: 90px;
}

.ad-728x90 img {
    width: 728px;
    height: 90px;
}

/* Medium Rectangle - 300x250 */
.ad-300x250 {
    max-width: 300px;
    height: 250px;
}

.ad-300x250 img {
    width: 300px;
    height: 250px;
}

/* Mobile Banner - 320x100 */
.ad-320x100 {
    max-width: 320px;
    height: 100px;
}

.ad-320x100 img {
    width: 320px;
    height: 100px;
}

/* Mobile Banner Small - 320x50 */
.ad-320x50 {
    max-width: 320px;
    height: 50px;
}

.ad-320x50 img {
    width: 320px;
    height: 50px;
}

/* Wide Skyscraper - 160x600 */
.ad-160x600 {
    max-width: 160px;
    height: 600px;
}

.ad-160x600 img {
    width: 160px;
    height: 600px;
}

/* Large Rectangle - 336x280 */
.ad-336x280 {
    max-width: 336px;
    height: 280px;
}

.ad-336x280 img {
    width: 336px;
    height: 280px;
}

/* Billboard - 970x250 */
.ad-970x250 {
    max-width: 970px;
    height: 250px;
}

.ad-970x250 img {
    width: 970px;
    height: 250px;
}

/* ============================================
   Space Available Placeholder
   ============================================ */
.ad-space-available {
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
    border: 2px dashed #cbd5e0;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 20px 0;
}

.ad-space-available p {
    margin: 0;
}

.ad-space-available .space-title {
    color: #718096;
    font-size: 14px;
    font-weight: 500;
}

.ad-space-available .space-position {
    color: #a0aec0;
    font-size: 12px;
    margin-top: 5px;
}

.ad-space-available .space-cta {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 16px;
    background: #e53e3e;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    transition: background 0.2s;
}

.ad-space-available .space-cta:hover {
    background: #c53030;
}

/* ============================================
   Dark Mode - Ad Space Available
   ============================================ */
.dark .ad-space-available,
.darkmode .ad-space-available {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    border-color: #4b5563;
}

.dark .ad-space-available .space-title,
.darkmode .ad-space-available .space-title {
    color: #9ca3af;
}

.dark .ad-space-available .space-position,
.darkmode .ad-space-available .space-position {
    color: #6b7280;
}

.dark .ad-space-available .space-cta,
.darkmode .ad-space-available .space-cta {
    background: #dc2626;
}

.dark .ad-space-available .space-cta:hover,
.darkmode .ad-space-available .space-cta:hover {
    background: #ef4444;
}

/* Space Available Content */
.ad-space-available .space-available-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ============================================
   Dark Mode - Article Content Text
   
   NOTE: Dark mode styles are now consolidated in style.css.
   Please update dark mode styles in style.css instead of here.
   ============================================ */
/*
.dark .prose,
.darkmode .prose,
.dark .article-content,
.darkmode .article-content {
    color: #d1d5db;
}

.dark .prose strong,
.dark .prose b,
.darkmode .prose strong,
.darkmode .prose b {
    color: #f3f4f6 !important;
    font-weight: 700;
}

.dark .prose p,
.darkmode .prose p {
    color: #d1d5db;
}

.dark .prose h1, .dark .prose h2, .dark .prose h3,
.dark .prose h4, .dark .prose h5, .dark .prose h6,
.darkmode .prose h1, .darkmode .prose h2, .darkmode .prose h3,
.darkmode .prose h4, .darkmode .prose h5, .darkmode .prose h6 {
    color: #f3f4f6;
}

.dark .prose a,
.darkmode .prose a {
    color: #60a5fa;
}

.dark .prose li,
.darkmode .prose li {
    color: #d1d5db;
}
*/

/* ============================================
   Dark Mode - Key Points (Poin Penting)
   ============================================ */
html.dark .bg-amber-50,
html.darkmode .bg-amber-50 {
    background-color: #1c1917 !important;
    background: linear-gradient(135deg, #1c1917 0%, #292524 100%) !important;
}

html.dark .border-amber-100,
html.darkmode .border-amber-100 {
    border-color: #78350f !important;
}

/* Key Points text in dark mode - white */
html.dark .bg-amber-50 h3,
html.darkmode .bg-amber-50 h3,
html.dark .bg-amber-50 li,
html.darkmode .bg-amber-50 li,
html.dark .bg-amber-50 span,
html.darkmode .bg-amber-50 span {
    color: #ffffff !important;
}

/* Key Points text in light mode - ensure dark text */
.bg-amber-50 h3,
.bg-amber-50 li,
.bg-amber-50 span {
    color: #1f2937 !important;
}

/* ============================================
   Dark Mode - FAQ Section
   ============================================ */
html.dark .bg-green-50,
html.darkmode .bg-green-50 {
    background-color: #1c1917 !important;
    background: linear-gradient(135deg, #1c1917 0%, #14532d 100%) !important;
}

html.dark .border-green-100,
html.darkmode .border-green-100 {
    border-color: #166534 !important;
}

/* FAQ text in dark mode - white */
.dark .bg-green-50 .text-gray-900,
.darkmode .bg-green-50 .text-gray-900,
.dark .bg-green-50 h3,
.darkmode .bg-green-50 h3 {
    color: #ffffff !important;
}

.dark .bg-green-50 .text-gray-800,
.dark .bg-green-50 .text-gray-600,
.dark .bg-green-50 .text-gray-300,
.darkmode .bg-green-50 .text-gray-800,
.darkmode .bg-green-50 .text-gray-600,
.darkmode .bg-green-50 .text-gray-300,
html.dark .bg-green-50 h4,
html.darkmode .bg-green-50 h4,
html.dark .bg-green-50 p,
html.darkmode .bg-green-50 p {
    color: #ffffff !important;
}

/* FAQ text in light mode - ensure dark text */
.bg-green-50 .text-gray-900,
.bg-green-50 h3 {
    color: #1f2937 !important;
}

.bg-green-50 .text-gray-800,
.bg-green-50 .text-gray-600,
.bg-green-50 h4,
.bg-green-50 p {
    color: #1f2937 !important;
}

/* ============================================
   Dark Mode - Sidebar Baca Juga
   ============================================ */
.dark .bg-white,
.darkmode .bg-white {
    background-color: #1f2937 !important;
}

.dark .border-gray-200,
.darkmode .border-gray-200 {
    border-color: #374151 !important;
}



.dark .shadow-sm,
.darkmode .shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}

/* ============================================
   Fix Nested Blockquote Issue
   ============================================ */
.prose blockquote > blockquote,
.prose blockquote blockquote {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    font-size: inherit !important;
    color: inherit !important;
}

.prose blockquote > blockquote::before,
.prose blockquote blockquote::before {
    display: none !important;
}

.prose blockquote > blockquote p,
.prose blockquote blockquote p {
    margin: 0;
    padding: 0;
    font-size: inherit;
    color: inherit;
}

/* Fix blockquote with data attributes (AI generated) */
.prose blockquote[data-start],
.dark .prose blockquote[data-start],
.darkmode .prose blockquote[data-start] {
    margin: 1.5rem 0;
}

.prose blockquote[data-start] blockquote[data-start],
.dark .prose blockquote[data-start] blockquote[data-start] {
    margin: 0;
    border: none;
    background: transparent;
}

/* Dark mode adjustments */
.dark .ad-space-available .space-available-content p,
.darkmode .ad-space-available .space-available-content p {
    color: #9ca3af;
}

/* ============================================
   In-Article Ad
   ============================================ */
.in-article-ad {
    margin: 30px 0;
    padding: 15px;
    background: #f9f9f9;
    border-left: 4px solid #e53e3e;
    border-radius: 4px;
}

.in-article-ad .ad-label {
    font-size: 10px;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

/* ============================================
   Text Ad Styles
   ============================================ */
.ad-text {
    display: block;
    padding: 10px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}

.ad-text:hover {
    background: #f0f0f0;
    border-color: #ccc;
}

.ad-text .ad-title {
    font-weight: bold;
    color: #333;
}

.ad-text .ad-description {
    color: #666;
    font-size: 12px;
    margin-top: 5px;
}

/* ============================================
   Responsive Breakpoints
   ============================================ */

/* Desktop - Large screens */
@media (min-width: 1200px) {
    .ad-728x90 {
        margin-left: auto;
        margin-right: auto;
    }
    
    .ad-970x250 {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Tablet - iPad and similar */
@media (min-width: 768px) and (max-width: 1199px) {
    .ad-728x90 {
        max-width: 100%;
        height: auto;
    }
    
    .ad-728x90 img {
        width: 100%;
        height: auto;
    }
    
    .ad-970x250 {
        max-width: 100%;
        height: auto;
    }
    
    .ad-970x250 img {
        width: 100%;
        height: auto;
    }
}

/* Mobile - Phones */
@media (max-width: 767px) {
    .ad-container {
        margin: 15px 0;
    }
    
    /* Convert 728x90 to responsive on mobile */
    .ad-728x90 {
        max-width: 100%;
        height: auto;
        min-height: 50px;
    }
    
    .ad-728x90 img {
        width: 100%;
        height: auto;
        max-height: 90px;
    }
    
    /* Convert 300x250 to full width on mobile */
    .ad-300x250 {
        max-width: 100%;
        height: auto;
    }
    
    .ad-300x250 img {
        width: 100%;
        height: auto;
    }
    
    /* Keep mobile banners as is */
    .ad-320x100,
    .ad-320x50 {
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Smaller placeholder on mobile */
    .ad-space-available {
        padding: 15px;
        min-height: 60px;
    }
    
    .ad-space-available .space-title {
        font-size: 12px;
    }
    
    .ad-space-available .space-position {
        font-size: 10px;
    }
    
    .ad-space-available .space-cta {
        padding: 6px 12px;
        font-size: 11px;
    }
}

/* Small Mobile */
@media (max-width: 320px) {
    .ad-space-available {
        padding: 10px;
    }
    
    .ad-space-available .space-title {
        font-size: 11px;
    }
}

/* ============================================
   Ad Label (Sponsored)
   ============================================ */
.ad-label-sponsored {
    font-size: 10px;
    color: #a0aec0;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
    display: block;
}

/* ============================================
   Video Ad Pre-roll
   ============================================ */
.video-preroll {
    position: relative;
    width: 100%;
    max-width: 640px;
    height: 360px;
    background: #000;
    margin: 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-preroll video {
    width: 100%;
    height: 100%;
}

.video-preroll .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-preroll .skip-button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    padding: 5px 15px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
}

/* ============================================
   Sticky Ads (Fixed Position)
   ============================================ */
.ad-sticky-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: white;
    padding: 5px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.ad-sticky-bottom .close-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    background: #e53e3e;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}

/* ============================================
   Sidebar Ads
   ============================================ */
.sidebar-ad {
    margin-bottom: 20px;
}

.sidebar-ad .ad-widget {
    background: #f9f9f9;
    padding: 10px;
    border-radius: 4px;
}

/* ============================================
   Footer Ads
   ============================================ */
.footer-ad {
    padding: 20px 0;
    background: #f5f5f5;
    margin-top: 30px;
}

/* ============================================
   Loading State
   ============================================ */
.ad-loading {
    background: #f0f0f0;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.ad-loading::after {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid #e4e8ec;
    border-top-color: #e53e3e;
    border-radius: 50%;
    animation: ad-spin 0.8s linear infinite;
}

@keyframes ad-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   Ad Error State
   ============================================ */
.ad-error {
    background: #fff5f5;
    border: 1px solid #feb2b2;
    color: #c53030;
    padding: 10px;
    border-radius: 4px;
    font-size: 12px;
    text-align: center;
}

/* ============================================
   Hide Ads (User Preference)
   ============================================ */
.hide-ads .ad-container {
    display: none !important;
}

/* ============================================
   Parallax Ad (MGID/Infolinks Style)
   ============================================ */
.paralax_div {
  position: relative;
  overflow: visible;
  width: 300px;
  height: 250px;
  margin-right: 20px;
  float: left;
  z-index: 99;
}
.paralax_div > div {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  clip: rect(auto auto auto auto);
}
.paralax_div > div > div {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  margin: 0 auto;
  -moz-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
.paralax_div > div > div > div {
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 50%;
  top: 0;
  border: none;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-content: center;
  align-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.paralax_div > div > div > div > * {
  margin: 0;
  margin-top: 0;
}
.paralax_div > div > div > div > a {
  width: 100%;
  height: 100vh;
}
.paralax_div img,.paralax_div iframe,.paralax_div ins {
  height: 600px;
  width: 300px;
}
.clear {
  clear: both;
  display: block
}

/* Responsive Parallax */
@media screen and (max-width:640px) {
  .paralax_div {
    width: 100%;
    height: 250px;
    margin: 0 auto;
    float: none;
  }
  .paralax_div > div > div > div {
    left: 50%;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .paralax_div > div > div {
    width: 100%;
    left:0;
    text-align: center;
  }
  .paralax_div img {
    margin: 0 auto;
    width:auto;
    max-width:100%;
    height:auto;
  }
}