/**
 * 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.
 */

/* ============================================
   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;
}