/**
 * NDIYAM — Mobile Responsive & Premium CSS Enhancements
 * Add this to your WordPress child theme's style.css or use Custom CSS in Appearance > Customize
 *
 * Critical Fixes:
 * 1. Mobile responsive univers grid
 * 2. Dark mode support
 * 3. Performance optimizations
 * 4. Accessibility improvements
 */

/* ====================================
   1. MOBILE RESPONSIVE GRID
   ==================================== */

/* Base: Desktop grid (2 columns) */
@media screen and (min-width: 768px) {
  [style*="grid-template-columns: 1fr 1fr"],
  .univers-grid,
  [class*="grid"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
  }
}

/* Tablet: 2 columns with adjusted spacing */
@media screen and (min-width: 600px) and (max-width: 767px) {
  [style*="grid-template-columns: 1fr 1fr"],
  .univers-grid,
  [class*="grid"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    padding: 0 15px !important;
  }
}

/* Mobile: 1 column for better readability */
@media screen and (max-width: 599px) {
  [style*="grid-template-columns: 1fr 1fr"],
  .univers-grid,
  [class*="grid"] {
    display: block !important;
    width: 100% !important;
  }

  [style*="grid-template-columns: 1fr 1fr"] > *,
  .univers-grid > *,
  [class*="grid"] > * {
    margin-bottom: 30px !important;
    width: 100% !important;
  }
}

/* ====================================
   2. RESPONSIVE TYPOGRAPHY
   ==================================== */

/* Mobile typography adjustments */
@media screen and (max-width: 599px) {
  h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }

  h2 {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }

  h3 {
    font-size: 18px !important;
  }

  p, body {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
}

/* ====================================
   3. RESPONSIVE IMAGES
   ==================================== */

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

/* Hero images responsive */
[style*="background-image"],
.hero-image,
.featured-image {
  background-size: cover !important;
  background-position: center !important;
  background-attachment: scroll !important;
}

@media screen and (max-width: 599px) {
  [style*="background-image"],
  .hero-image,
  .featured-image {
    min-height: 250px !important;
  }

  [style*="background-image"] img,
  .hero-image img,
  .featured-image img {
    max-width: 100%;
    height: auto;
  }
}

/* ====================================
   4. PADDING & MARGINS RESPONSIVE
   ==================================== */

@media screen and (max-width: 599px) {
  header,
  section,
  main,
  footer {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  header {
    padding-top: 30px !important;
    padding-bottom: 20px !important;
  }

  section {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
}

/* ====================================
   5. DARK MODE SUPPORT
   ==================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0a0a0a;
    --color-text: #f5f5f5;
    --color-border: #333333;
    --color-accent: #8A6A52;
  }

  body {
    background-color: var(--color-bg);
    color: var(--color-text);
  }

  a {
    color: var(--color-accent);
  }

  hr, [style*="border"], [style*="solid #e8e3dd"] {
    border-color: var(--color-border) !important;
  }

  [style*="background: #fafaf8"],
  [style*="background-color: #fafaf8"] {
    background-color: #1a1a1a !important;
    border: 1px solid var(--color-border) !important;
  }
}

/* ====================================
   5b. MOBILE TEXT READABILITY FIX
   ==================================== */

/* Ensure paragraph text remains dark and readable on mobile
   regardless of dark mode preferences. This fixes the issue
   where dark mode settings cause nearly-white text on beige
   backgrounds, making articles unreadable on phones. */

@media screen and (max-width: 599px) {
  p,
  .wp-block-paragraph,
  main,
  article,
  [class*="content"],
  .entry-content,
  .post-content {
    color: #111111 !important;
  }
}

/* Also ensure body text is dark on mobile in dark mode context */
@media (prefers-color-scheme: dark) and (max-width: 599px) {
  p,
  .wp-block-paragraph,
  main,
  article,
  [class*="content"],
  .entry-content,
  .post-content,
  body {
    color: #111111 !important;
  }
}

/* ====================================
   6. ACCESSIBILITY IMPROVEMENTS
   ==================================== */

/* Focus states for keyboard navigation */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid #315B63;
  outline-offset: 2px;
}

/* Skip to content link */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: #315B63;
  color: white;
  padding: 8px;
  z-index: 100;
  text-decoration: none;
}

.skip-to-content:focus {
  top: 0;
}

/* High contrast mode support */
@media (prefers-contrast: more) {
  body {
    line-height: 1.8;
  }

  a {
    text-decoration: underline;
  }
}

/* ====================================
   7. PERFORMANCE OPTIMIZATIONS
   ==================================== */

/* Reduce motion for animations */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* ====================================
   8. CONTACT PAGE RESPONSIVE
   ==================================== */

@media screen and (max-width: 599px) {
  section[style*="max-width: 700px"] {
    max-width: 100% !important;
    padding: 30px 15px !important;
  }

  [style*="display: grid;gap: 15px"] {
    display: block !important;
  }

  [style*="display: grid;gap: 15px"] > * {
    margin-bottom: 15px !important;
  }

  [style*="padding: 30px;background: #fafaf8"] {
    padding: 20px !important;
  }
}

/* ====================================
   9. LINK STYLING ENHANCEMENTS
   ==================================== */

a[style*="color: #315B63"] {
  transition: opacity 0.2s ease;
}

a[style*="color: #315B63"]:hover {
  opacity: 0.8;
}

/* ====================================
   10. PRINT STYLES
   ==================================== */

@media print {
  header,
  footer,
  nav,
  [style*="Newsletter"],
  .newsletter {
    display: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
  }

  a {
    text-decoration: underline;
  }
}

/* ====================================
   11. HIGH RESOLUTION DISPLAYS
   ==================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Thinner borders on retina displays */
  hr,
  [style*="border-top"],
  [style*="border-bottom"] {
    border-width: 0.5px !important;
  }
}

/* ====================================
   12. LANDSCAPE MOBILE ORIENTATION
   ==================================== */

@media screen and (max-height: 500px) and (orientation: landscape) {
  header {
    padding: 15px 0 !important;
  }

  section {
    padding: 15px 0 !important;
  }
}