/**
 * Adaptive Layout System for Ethical Hacking YouTube Theme
 * Automatically switches between mobile and desktop optimizations
 *
 * Device Classes (added by JS):
 * - .is-mobile: < 768px
 * - .is-tablet: 768px - 991px
 * - .is-desktop: 992px+
 * - .is-touch: Touch device
 * - .is-mouse: Mouse/pointer device
 */

/* ============================================
   CSS CUSTOM PROPERTIES FOR ADAPTIVE LAYOUTS
   ============================================ */
:root {
  /* Layout */
  --adaptive-sidebar-width: 280px;
  --adaptive-content-max: 800px;
  --adaptive-gap: 2rem;
  --adaptive-padding: 2.5rem;

  /* Typography */
  --adaptive-font-base: 1rem;
  --adaptive-font-heading: 2rem;
  --adaptive-line-height: 1.7;

  /* Elements */
  --adaptive-radius: 12px;
  --adaptive-touch-target: 44px;
}

/* Mobile overrides */
@media (max-width: 767px) {
  :root {
    --adaptive-sidebar-width: 100%;
    --adaptive-content-max: 100%;
    --adaptive-gap: 1rem;
    --adaptive-padding: 1.25rem;
    --adaptive-font-base: 0.9375rem;
    --adaptive-font-heading: 1.5rem;
    --adaptive-radius: 8px;
  }
}

/* Tablet overrides */
@media (min-width: 768px) and (max-width: 991px) {
  :root {
    --adaptive-sidebar-width: 240px;
    --adaptive-gap: 1.5rem;
    --adaptive-padding: 1.75rem;
    --adaptive-font-heading: 1.75rem;
  }
}

/* ============================================
   BETTERDOCS ADAPTIVE SINGLE ARTICLE
   ============================================ */

/* Container */
.betterdocs-single-wrapper {
  padding: 1rem;
}

/* Two-column layout - Desktop */
@media (min-width: 992px) {
  .betterdocs-single-layout {
    display: grid;
    grid-template-columns: var(--adaptive-sidebar-width) 1fr;
    gap: var(--adaptive-gap);
    align-items: start;
  }

  .betterdocs-sidebar-column {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }

  .betterdocs-content-column {
    min-width: 0; /* Prevent overflow */
  }

  .betterdocs-single-content {
    padding: var(--adaptive-padding);
  }
}

/* Tablet layout */
@media (min-width: 768px) and (max-width: 991px) {
  .betterdocs-single-layout {
    display: grid;
    grid-template-columns: var(--adaptive-sidebar-width) 1fr;
    gap: var(--adaptive-gap);
  }

  .betterdocs-sidebar-column {
    position: relative;
  }

  .betterdocs-single-content {
    padding: var(--adaptive-padding);
  }
}

/* Mobile layout - Single column */
@media (max-width: 767px) {
  .betterdocs-single-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .betterdocs-sidebar-column {
    order: 2; /* Move sidebar below content on mobile */
    width: 100%;
    margin-top: 2rem;
  }

  .betterdocs-content-column {
    order: 1;
    width: 100%;
  }

  .betterdocs-single-content {
    padding: var(--adaptive-padding);
    border-radius: var(--adaptive-radius);
  }

  /* Mobile sidebar as expandable section */
  .betterdocs-sidebar {
    background: var(--betterdocs-surface);
    border-radius: var(--adaptive-radius);
    padding: 1rem;
  }
}

/* ============================================
   DESKTOP-OPTIMIZED BETTERDOCS ARTICLE
   ============================================ */
@media (min-width: 992px) {
  /* Wide reading area */
  .betterdocs-entry-content {
    font-size: 1.0625rem;
    line-height: 1.8;
    max-width: 720px;
  }

  /* Enhanced headings */
  .betterdocs-entry-content h2 {
    font-size: 1.625rem;
    margin-top: 3rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--betterdocs-border);
  }

  .betterdocs-entry-content h3 {
    font-size: 1.375rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
  }

  /* Code blocks with better readability */
  .betterdocs-entry-content pre {
    font-size: 0.9375rem;
    padding: 1.5rem;
    border-radius: 10px;
    margin: 1.75rem 0;
  }

  /* Enhanced TOC */
  .betterdocs-toc {
    max-width: 600px;
  }

  /* Desktop sidebar features */
  .betterdocs-sidebar {
    padding: 1.5rem;
  }

  .betterdocs-sidebar .betterdocs-sidebar-list li a {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    transition: all 0.2s ease;
  }

  .betterdocs-sidebar .betterdocs-sidebar-list li a:hover {
    background: var(--betterdocs-surface-hover);
    padding-left: 1.25rem;
  }

  /* YouTube banner full width */
  .ehc-header-banner {
    margin: calc(var(--adaptive-padding) * -1);
    margin-bottom: 2rem;
    padding: 1rem var(--adaptive-padding);
    border-radius: var(--adaptive-radius) var(--adaptive-radius) 0 0;
  }

  /* Footer CTA full width */
  .betterdocs-single-content .ehc-footer-cta {
    margin: 2rem calc(var(--adaptive-padding) * -1) calc(var(--adaptive-padding) * -1);
    padding: 2rem var(--adaptive-padding);
    border-radius: 0 0 var(--adaptive-radius) var(--adaptive-radius);
  }

  /* Floating CTA position */
  .ehc-floating-cta {
    bottom: 2rem;
    right: 2rem;
  }

  /* Related articles grid */
  .ehc-related-articles .betterdocs-related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

/* ============================================
   MOBILE-OPTIMIZED BETTERDOCS ARTICLE
   ============================================ */
@media (max-width: 767px) {
  /* Compact reading area */
  .betterdocs-entry-content {
    font-size: var(--adaptive-font-base);
    line-height: 1.65;
  }

  /* Mobile headings */
  .betterdocs-entry-content h2 {
    font-size: 1.25rem;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--betterdocs-border);
  }

  .betterdocs-entry-content h3 {
    font-size: 1.125rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
  }

  /* Code blocks - full width */
  .betterdocs-entry-content pre {
    font-size: 0.8125rem;
    padding: 1rem;
    margin: 1rem calc(var(--adaptive-padding) * -1);
    border-radius: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Inline code */
  .betterdocs-entry-content code {
    font-size: 0.8125rem;
    padding: 0.15em 0.4em;
  }

  /* Collapsible TOC on mobile */
  .betterdocs-toc {
    margin-bottom: 1.5rem;
  }

  .betterdocs-toc-title {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .betterdocs-toc-title::after {
    content: '▼';
    font-size: 0.75rem;
    transition: transform 0.2s ease;
  }

  .betterdocs-toc.collapsed .betterdocs-toc-title::after {
    transform: rotate(-90deg);
  }

  .betterdocs-toc.collapsed ul {
    display: none;
  }

  /* Mobile YouTube banner */
  .ehc-header-banner {
    margin: calc(var(--adaptive-padding) * -1);
    margin-bottom: 1.5rem;
    padding: 0.875rem var(--adaptive-padding);
    border-radius: var(--adaptive-radius) var(--adaptive-radius) 0 0;
  }

  .ehc-header-banner p {
    font-size: 0.8125rem !important;
  }

  /* Mobile footer CTA */
  .betterdocs-single-content .ehc-footer-cta {
    margin: 1.5rem calc(var(--adaptive-padding) * -1) calc(var(--adaptive-padding) * -1);
    padding: 1.5rem var(--adaptive-padding);
    border-radius: 0 0 var(--adaptive-radius) var(--adaptive-radius);
  }

  .ehc-footer-cta h3 {
    font-size: 1.125rem !important;
  }

  .ehc-footer-cta p {
    font-size: 0.875rem !important;
  }

  /* Floating CTA - compact on mobile */
  .ehc-floating-cta {
    bottom: 1rem;
    right: 1rem;
  }

  .ehc-floating-cta .wp-block-button__link {
    padding: 0.625rem 1rem !important;
    font-size: 0.8125rem !important;
  }

  /* Related articles - single column */
  .ehc-related-articles .betterdocs-related-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  /* Video section mobile */
  .ehc-video-section {
    margin: 0 calc(var(--adaptive-padding) * -1) 1.5rem;
  }

  .ehc-video-section h2 {
    padding: 0 var(--adaptive-padding);
  }

  .ehc-video-section .ehc-video-wrapper {
    border-radius: 0;
  }

  /* Article meta */
  .ehc-article-meta {
    flex-wrap: wrap;
    gap: 0.5rem !important;
    font-size: 0.8125rem;
  }

  /* Tags */
  .ehc-article-tags {
    margin-top: 1.5rem !important;
  }

  /* Reactions */
  .betterdocs-article-reactions {
    padding: 1rem !important;
    flex-direction: column;
    gap: 0.75rem;
  }

  /* Navigation prev/next */
  .betterdocs-doc-navigation {
    margin-top: 1.5rem !important;
  }

  /* Mobile sidebar content */
  .betterdocs-sidebar {
    margin-top: 0;
  }

  .betterdocs-sidebar .ehc-sidebar-cta {
    margin-top: 1rem !important;
    padding: 1rem !important;
  }

  /* Breadcrumbs compact */
  .ehc-breadcrumb-wrap {
    font-size: 0.8125rem;
    margin-bottom: 1rem !important;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
  }
}

/* ============================================
   TABLET-SPECIFIC OPTIMIZATIONS
   ============================================ */
@media (min-width: 768px) and (max-width: 991px) {
  .betterdocs-entry-content {
    font-size: 1rem;
    line-height: 1.75;
  }

  .betterdocs-entry-content h2 {
    font-size: 1.5rem;
  }

  .betterdocs-entry-content h3 {
    font-size: 1.25rem;
  }

  .betterdocs-sidebar {
    padding: 1.25rem;
    font-size: 0.9375rem;
  }

  .ehc-related-articles .betterdocs-related-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */
.is-touch {
  /* Larger touch targets */
  .betterdocs-sidebar .betterdocs-sidebar-list li a,
  .betterdocs-toc ul li a {
    min-height: var(--adaptive-touch-target);
    display: flex;
    align-items: center;
  }

  /* Remove hover effects on touch */
  .ehc-video-card:hover,
  .betterdocs-category-box:hover {
    transform: none;
  }

  /* Add active states instead */
  .ehc-video-card:active,
  .betterdocs-category-box:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
}

/* ============================================
   MOUSE/POINTER DEVICE OPTIMIZATIONS
   ============================================ */
.is-mouse {
  /* Enhanced hover effects */
  .betterdocs-sidebar .betterdocs-sidebar-list li a:hover {
    background: var(--betterdocs-surface-hover);
    color: var(--betterdocs-primary);
  }

  .betterdocs-toc ul li a:hover {
    color: var(--betterdocs-primary);
  }

  /* Smooth transitions */
  .ehc-video-card,
  .betterdocs-category-box,
  .betterdocs-sidebar .betterdocs-sidebar-list li a {
    transition: all 0.2s ease;
  }
}

/* ============================================
   READING MODE (for articles)
   ============================================ */
.reading-mode {
  /* Hide distractions */
  .ehc-top-bar,
  .ehc-floating-cta,
  .ehc-sidebar-cta,
  .betterdocs-sidebar {
    display: none !important;
  }

  /* Center and expand content */
  .betterdocs-single-layout {
    display: block;
  }

  .betterdocs-content-column {
    max-width: 720px;
    margin: 0 auto;
  }

  .betterdocs-entry-content {
    font-size: 1.125rem;
    line-height: 1.9;
  }
}

/* ============================================
   PRINT OPTIMIZATIONS
   ============================================ */
@media print {
  .betterdocs-single-layout {
    display: block !important;
  }

  .betterdocs-sidebar-column {
    display: none !important;
  }

  .betterdocs-content-column {
    width: 100% !important;
  }

  .ehc-header-banner,
  .ehc-footer-cta,
  .ehc-floating-cta,
  .ehc-sidebar-cta,
  .betterdocs-article-reactions,
  .betterdocs-doc-navigation,
  .ehc-related-articles {
    display: none !important;
  }

  .betterdocs-single-content {
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }

  .betterdocs-entry-content {
    font-size: 12pt;
    line-height: 1.5;
    color: black !important;
  }

  .betterdocs-entry-content a {
    color: black !important;
    text-decoration: underline;
  }

  .betterdocs-entry-content pre {
    border: 1px solid #ccc;
    padding: 0.5rem;
    font-size: 10pt;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
}

/* ============================================
   ORIENTATION HANDLING
   ============================================ */
@media (orientation: landscape) and (max-height: 500px) {
  /* Compact header */
  .ehc-site-header {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  /* Reduce vertical spacing */
  .betterdocs-single-content {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .ehc-header-banner {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
}

/* ============================================
   HIGH DPI / RETINA DISPLAYS
   ============================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Thinner borders for crisp lines */
  .betterdocs-single-content,
  .betterdocs-sidebar,
  .betterdocs-toc {
    border-width: 0.5px;
  }

  /* Enhanced code rendering */
  .betterdocs-entry-content pre,
  .betterdocs-entry-content code {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* ============================================
   DARK MODE ONLY
   ============================================ */
.betterdocs-entry-content pre {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.betterdocs-entry-content img {
  opacity: 0.95;
}