/**
 * Mobile Style Overrides for Zudoku DevDocs
 * 
 * Tailwind-style responsive utilities and automatic mobile styling
 * for Zudoku elements. Uses @media (max-width: 768px) breakpoint.
 * 
 * See MOBILE_STYLES.md for usage documentation.
 */

@layer app-base {
  /* ============================================
     Automatic Zudoku Element Styling
     ============================================ */

  /* Global mobile layout */
  body {
    @media (max-width: 768px) {
      margin: 0;
      padding: 0;
    }
  }

  /* Header Navigation */
  header {
    @media (max-width: 768px) {
      padding-left: 0;
      padding-right: 0;
      width: 100%;
    }
  }

  aside nav a,
  aside nav button {
    @media (max-width: 768px) {
      padding: 0.5rem 0.75rem;
      font-size: 0.875rem;
    }
  }

  /* Main Content Area - ensure proper padding on mobile */
  main {
    @media (max-width: 768px) {
      margin-left: 1.5rem;
      margin-right: 1.5rem;
    }
  }

  article {
    @media (max-width: 768px) {
      font-size: 0.9375rem;
      padding: 1rem 0;
    }
  }

  /* Code Blocks */
  pre {
    @media (max-width: 768px) {
      font-size: 0.8125rem;
      padding: 0.75rem !important;
      margin: 1rem 0 !important;
      /* Prevent code blocks from touching edges */
      max-width: calc(100vw - 1rem);
    }
  }

  /* Code block containers */
  pre code {
    @media (max-width: 768px) {
      display: block;
      overflow-x: auto;
    }
  }

  /* Tables - add horizontal scroll container */
  table {
    @media (max-width: 768px) {
      font-size: 0.8125rem;
      display: block;
      overflow-x: auto;
      white-space: nowrap;
    }
  }

  /* Headings with proper spacing */
  h1 {
    @media (max-width: 768px) {
      font-size: 1.75rem;
      margin: 1.5rem 0 1rem 0;
    }
  }

  h2 {
    @media (max-width: 768px) {
      font-size: 1.5rem;
      margin: 1.25rem 0 0.75rem 0;
    }
  }

  h3 {
    @media (max-width: 768px) {
      font-size: 1.25rem;
      margin: 1rem 0 0.5rem 0;
    }
  }

  /* Paragraphs and text content */
  p {
    @media (max-width: 768px) {
      margin: 0.75rem 0;
    }
  }

  /* Lists */
  ul,
  ol {
    @media (max-width: 768px) {
      margin: 0.75rem 0;
      padding-left: 1.5rem;
    }
  }

  /* Search Bar (if enabled) */
  input[type="search"],
  input[placeholder*="Search"] {
    @media (max-width: 768px) {
      width: 100%;
      font-size: 0.875rem;
    }
  }

  /* Buttons - less aggressive, only adjust text size */
  button {
    @media (max-width: 768px) {
      font-size: 0.875rem;
    }
  }

  .dark .bg-accent {
    background-color: oklch(0.32 0 0);
  }
  footer {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  @media (max-width: 768px) {
    footer,
    footer > div {
      padding-top: 0rem;
      padding-bottom: 0rem;
    }
    header img[alt="YouVersion Platform"] {
      width: 170px !important;
      height: auto;
    }
    footer > ul,
    footer > div > div > div > div > ul li {
      padding-left: 0.75rem 0rem;
    }
  }

  @media (max-width: 640px) {
    /* Footer - only adjust outer footer, not all containers */
    footer {
      padding-top: 0rem !important;
      padding-bottom: 0rem !important;
    }
    footer > ul,
    footer ul {
      padding-left: 0rem !important;
    }
  }
  @media (min-width: 640px) {
    nav div div a {
      line-height: 30px;
    }
  }

  /* Remove focus ring around the header theme switcher button */
  header button.size-9:focus,
  header button.size-9:focus-visible {
    --tw-ring-offset-width: 0px !important;
    --tw-ring-color: transparent !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    box-shadow: none !important;
    outline: none !important;
  }
}