/* Mobile-First Optimizations for Emet Portal Biblijny */

/* CRITICAL: Force all elements to fit within viewport */
@media screen and (max-width: 767px) {
  /* Force everything to be contained within viewport */
  * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Prevent any horizontal overflow */
  html, body {
    width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 10px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* MOBILE FLAG FIXES - Make flags smaller and better positioned */
  .ewnavmenu img[src*="flag"], 
  .ewnavmenu img[alt*="English"],
  .ewnavmenu img[alt*="Deutsch"], 
  .ewnavmenu img[alt*="Français"],
  .ewnavmenu img[alt*="Español"] {
    height: 12px !important;
    width: 18px !important;
    vertical-align: middle !important;
    margin: 0 !important;
    display: inline-block !important;
  }
  
  /* Mobile navigation list improvements */
  .ewnavmenu ul li {
    display: inline-block !important;
    margin: 0 2px !important;
  }
  
  .ewnavmenu ul li a {
    padding: 6px 4px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  
  /* Slicknav mobile menu flag fixes */
  .slicknav_menu img[src*="flag"],
  .slicknav_menu img[alt*="English"],
  .slicknav_menu img[alt*="Deutsch"], 
  .slicknav_menu img[alt*="Français"],
  .slicknav_menu img[alt*="Español"] {
    height: 14px !important;
    width: 20px !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
  }
  
  /* TEXT CONTRAST IMPROVEMENTS */
  .Style7, .para14 .Style7 {
    color: #222222 !important;
    font-weight: 500 !important;
  }
  
  .Style6, .para1 .Style6 {
    color: #1a1a1a !important;
    font-weight: 700 !important;
  }
  
  .Style5, .para4 .Style5 {
    color: #333333 !important;
    font-weight: 500 !important;
  }
  
  /* Improve text readability */
  body {
    color: #333333 !important;
    background-color: #ffffff !important;
  }
  
  /* Fix specific width elements that cause horizontal scroll */
  .shape_22 {
    width: 100% !important;
    padding: 10px !important;
    margin: 0 !important;
  }
  
  .shape_21 {
    width: 100% !important;
    padding: 10px !important;
    margin: 0 !important;
  }
  
  /* CRITICAL: Fix audio player containers - these are the main issue! */
  div[style*="width:300px"], 
  div[style*="width:480px"],
  #custom-background-27,
  #custom-background-29,
  #custom-background-31,
  #custom-background-33,
  #custom-background-35,
  #custom-background-37,
  #custom-background-39,
  #custom-background-41,
  #custom-background-43,
  #custom-background-45,
  #custom-background-47,
  #custom-background-49,
  #custom-background-51,
  #custom-background-53,
  #custom-background-55,
  #custom-background-57,
  #custom-background-59 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Fix audio elements specifically */
  audio {
    width: 100% !important;
    max-width: 100% !important;
    height: 50px !important;
    display: block !important;
    margin: 10px 0 !important;
  }
  
  /* Fix shape containers for audio content */
  .shape_26, .shape_28, .shape_30, .shape_32, .shape_34, .shape_36, .shape_38,
  .shape_40, .shape_42, .shape_44, .shape_46, .shape_48, .shape_50, .shape_52,
  .shape_54, .shape_56, .shape_58 {
    width: 100% !important;
    min-height: auto !important;
    padding: 15px 10px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
  
  /* Fix flexbox containers for audio sections */
  #flexbox_back_6, #flexbox_back_7, #flexbox_back_8, #flexbox_back_9,
  #flexbox_back_10, #flexbox_back_11, #flexbox_back_12, #flexbox_back_13,
  #flexbox_back_14, #flexbox_back_15, #flexbox_back_16, #flexbox_back_17,
  #flexbox_back_18, #flexbox_back_19, #flexbox_back_20, #flexbox_back_21,
  #flexbox_back_22 {
    width: 100% !important;
    padding: 10px !important;
    margin: 0 !important;
  }
  
  #flexbox_6, #flexbox_7, #flexbox_8, #flexbox_9, #flexbox_10, #flexbox_11,
  #flexbox_12, #flexbox_13, #flexbox_14, #flexbox_15, #flexbox_16, #flexbox_17,
  #flexbox_18, #flexbox_19, #flexbox_20, #flexbox_21, #flexbox_22 {
    flex-direction: column !important;
    width: 100% !important;
    align-items: stretch !important;
  }
  
  #flexbox_6 > div, #flexbox_7 > div, #flexbox_8 > div, #flexbox_9 > div,
  #flexbox_10 > div, #flexbox_11 > div, #flexbox_12 > div, #flexbox_13 > div,
  #flexbox_14 > div, #flexbox_15 > div, #flexbox_16 > div, #flexbox_17 > div,
  #flexbox_18 > div, #flexbox_19 > div, #flexbox_20 > div, #flexbox_21 > div,
  #flexbox_22 > div {
    width: 100% !important;
    margin: 5px 0 !important;
  }
  
  /* Enhanced mobile text styling */
  .paraWrap {
    padding: 15px 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
  
  /* Make sure all audio players are visible and functional */
  .mejs-container {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .mejs-audio {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .mejs-controls {
    width: 100% !important;
    padding: 5px !important;
  }
  
  /* Override any inline styles that might hide content */
  div[style*="width:694px"] { width: 100% !important; }
  div[style*="width:956px"] { width: 100% !important; }
  div[style*="width:481px"] { width: 100% !important; }
  div[style*="width:482px"] { width: 100% !important; }
  div[style*="width:983px"] { width: 100% !important; }
  
  /* Navigation fixes */
  .ewnavmenu { 
    width: 100% !important; 
    left: 0 !important; 
    position: static !important;
    z-index: 9999 !important;
  }
  
  /* Header fixes */
  #flexbox_1, #flexbox_back_1 { 
    width: 100% !important; 
    padding: 10px !important; 
  }
  
  /* Fix navigation width issues */
  .ewnavmenu {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    position: static !important;
  }
  
  /* Fix flexbox containers */
  #flexbox_1, #flexbox_12, #flexbox_back_new {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px !important;
    margin: 0 !important;
  }
  
  div#ewfx-flex-container_2 {
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: column !important;
    padding: 10px !important;
    margin: 0 !important;
  }
  
  /* Fix any remaining width issues */
  div[style*="width:"], 
  div[style*="min-width:"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: auto !important;
  }
  
  /* Improve text readability on mobile */
  body {
    font-size: 16px;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }
  
  /* Mobile header improvements */
  #flexbox_1 {
    min-height: auto !important;
    padding: 15px 10px;
  }
  
  /* Logo and title mobile optimization */
  div#ewfx-flex-container_2 {
    gap: 10px;
  }
  
  .ewfb-container-1 {
    text-align: center;
    width: 100% !important;
  }
  
  .ewfb-container-2 {
    text-align: center;
    width: 100% !important;
  }
  
  /* Navigation improvements */
  .slicknav_menu {
    background: #f8f8f8;
    border-bottom: 1px solid #ddd;
    width: 100% !important;
  }
  
  .slicknav_btn {
    padding: 15px;
    font-size: 18px;
    background: #f8f8f8;
    border: none;
    text-align: right;
    width: 100% !important;
  }
  
  /* Main content mobile styling */
  .shape_13 {
    margin: 10px 0 !important;
    background-size: cover !important;
    background-position: center !important;
    width: 100% !important;
  }
  
  /* Bible verse section mobile */
  .para12 span.Style13 {
    font-size: 24px !important;
    line-height: 1.3 !important;
    display: block;
    margin-bottom: 15px;
  }
  
  .para14 span.Style7 {
    font-size: 15px !important;
    line-height: 1.5 !important;
    display: block;
    margin-bottom: 10px;
  }
  
  /* Question headers mobile styling */
  .para1 span.Style6 {
    font-size: 18px !important;
    font-weight: bold;
    color: #333;
    line-height: 1.4 !important;
    margin-bottom: 10px;
    display: block;
  }
  
  /* Answer text mobile styling */
  .para1 span.Style7 {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #555;
    display: block;
    margin-bottom: 15px;
  }
  
  /* Bible references mobile styling */
  .para1:last-child span.Style7 {
    font-style: italic;
    color: #777;
    font-size: 13px !important;
  }
  
  /* Improve spacing between sections */
  .para1 {
    margin-bottom: 20px !important;
  }
  
  /* Footer mobile styling */
  footer {
    margin-top: 30px;
    width: 100% !important;
  }
  
  .shape_4 {
    padding: 25px 15px !important;
    text-align: center;
    width: 100% !important;
  }
  
  .shape_4 .para1 span.Style2 {
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #ccc;
  }
  
  /* Touch-friendly elements */
  a {
    min-height: 44px;
    min-width: 44px;
    padding: 10px;
    display: inline-block;
  }
  
  /* Optimize images for mobile */
  img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    display: block;
  }
  
  /* Mobile-specific margin adjustments */
  div[style*="margin-bottom:20px"] {
    margin-bottom: 25px !important;
  }
  
  div[style*="margin-bottom:25px"] {
    margin-bottom: 30px !important;
  }
  
  /* Improve paragraph spacing on mobile */
  p {
    margin-bottom: 15px;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* Additional safety overrides */
  .paraWrap {
    padding: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Override any inline styles that might cause issues */
  [style*="width"] {
    width: 100% !important;
  }
  
  [style*="min-width"] {
    min-width: auto !important;
  }
}

/* Small mobile devices (iPhone SE, etc.) */
@media screen and (max-width: 375px) {
  .container {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  
  .shape_22, .shape_21, .shape_26, .shape_28, .shape_30, .shape_32, .shape_34, 
  .shape_36, .shape_38, .shape_40, .shape_42, .shape_44, .shape_46, .shape_48, 
  .shape_50, .shape_52, .shape_54, .shape_56, .shape_58 { 
    padding: 10px 5px !important; 
  }
  
  .para12 span.Style13 {
    font-size: 20px !important;
  }
  
  .para1 span.Style6 {
    font-size: 16px !important;
  }
  
  .para1 span.Style7, .para14 span.Style7 {
    font-size: 13px !important;
  }
  
  .paraWrap {
    padding: 10px 5px !important;
  }
  
  audio {
    height: 45px !important;
    margin: 8px 0 !important;
  }
}

/* Medium mobile devices */
@media screen and (min-width: 376px) and (max-width: 575px) {
  .shape_22, .shape_21 {
    padding: 15px 10px !important;
    width: 100% !important;
  }
}

/* Landscape mobile orientation */
@media screen and (max-width: 767px) and (orientation: landscape) {
  .shape_13 {
    height: 150px !important;
    min-height: 150px !important;
  }
  
  #flexbox_1 {
    padding: 10px;
  }
}

/* High DPI mobile displays */
@media screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Dark mode support for mobile */
@media (prefers-color-scheme: dark) and (max-width: 767px) {
  body {
    background-color: #1a1a1a;
    color: #e0e0e0;
  }
  
  .shape_22, .shape_21 {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
  }
  
  .para1 span, .para12 span, .para14 span {
    color: #e0e0e0 !important;
  }
}

/* Accessibility improvements for mobile */
@media screen and (max-width: 767px) {
  /* Focus indicators */
  a:focus, button:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
  }
  
  /* Improve contrast for links */
  a {
    color: #007cba;
    text-decoration: underline;
  }
  
  a:visited {
    color: #5e2d91;
  }
  
  a:hover, a:active {
    color: #005a87;
  }
}