/*
Theme Name: csxplore
Theme URI: /wp-content/themes/csxplore/screenshot.jpg
Author: BV
Author URI: https://csxplore.com
Description: A custom WordPress theme built with W3.CSS, with responsive design and database page loading.
Version: 1.0
Requires at least: 5.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: csxplore
*/

/* ==========================================================================
   Base Styles & Text Wrapping Defaults
   ========================================================================== */

   body {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Consistent box model */
  }
  
  body{
    margin:0;
    padding: 0;
    box-sizing: border-box; /* Consistent box model */
    -ms-word-wrap:break-word; /* Legacy IE */
    word-wrap:break-word;     /* Older alias for overflow-wrap */
    overflow-wrap: break-word; /* Standard: Allows breaking long words/URLs */
    word-break: break-word;    /* Allows breaking within words if necessary */
    background-color:#fff;
    font-size: 16px;
    color:#666;
    /* overflow-x: hidden; /* Best to avoid unless absolutely necessary */
    font-family: 'Roboto', sans-serif;
    /* height:96%; /* Avoid fixed height on body unless strictly needed */
    max-width: none !important; /* Keep original rule */
    padding-left: 15px; /* Keep original padding */
    padding-right:15px; /* Keep original padding */
  }
  
  img{
    margin:0;
    padding:0;
    border:none;
    max-width:100%;
    height:auto;
    display: block; /* Prevents potential bottom space */
  }
  section img{
    max-width:100%;
  }
  
  .site-logo a img {
    height: 30px !important;
    width: 30px !important;
    display: inline; /* Keep original */
  }
  
  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }
  
  /* ==========================================================================
     2. Site Menu - Ensure wrapping if needed
     ========================================================================== */
  
  .site-header {
    margin-top: 0px; /* Keep original */
  }
  
  #primary-menu li {
    display: inline !important; /* Keep original - may limit wrapping on the LI itself */
  }
  
  .site-menu {
    background-color: #960550;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  
  .site-menu a {
    text-decoration: none !important;
    display: inline-block; /* Better for wrapping than inline */
    white-space: normal; /* Override potential nowrap */
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
  }
  
  .dropcaret {
    display: inline-block; /* Keep original */
  }
  
  .dropcolor {
    background-color: #960550 !important;
    color: white !important;
  }
  
  /* ==========================================================================
     3. Layout (Basic container and grid) - Ensure wrapping
     ========================================================================== */
  
  .container {
    max-width: 1200px; /* Adjust as needed */
    margin: 0 auto;
    padding: 20px; /* Keep original */
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  
  /* Basic grid (you can use W3.CSS grids too) */
  .grid {
    display: flex;
    flex-wrap: wrap;
  }
  
  .grid-item {
    width: 100%; /* Default full width */
    padding: 10px; /* Keep original */
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  
  
  
  /* ==========================================================================
     4. Typography - Ensure wrapping
     ========================================================================== */
  
  /* Body rules combined above */
  
  h1, h2, h3, h4, h5, h6 { /* Added all heading levels */
    font-weight: bold;
    margin-bottom: 0.5em;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
  }
  
  a {
    color: #007bff;
    text-decoration: none;
     overflow-wrap: break-word;
     word-wrap: break-word;
     word-break: break-word;
  }
  
  a:hover {
    text-decoration: underline;
  }
  
  /* ==========================================================================
     5.Slides & Specific Components - Ensure wrapping
     ========================================================================== */
  
  .mySlides {
   /* display:none; */
    margin-bottom: 0px !important;
    margin-top: 0px !important;
  }
  
  .homeSlides {display:none;}
  
  .w3-left, .w3-right, .w3-badge {
     cursor:pointer;
     width: 40%; /* Keep original */
  }
  
  
  .w3-badge {height:13px;width:13px;padding:0}
  
  .w3-main {
     margin-left:250px; /* Keep original */
     display: inline-block; /* Keep original */
     margin-top: 0px; /* Keep original */
     overflow-wrap: break-word;
     word-wrap: break-word;
  }
  
  .bottom-menu {
    z-index: 2;
    background-color: #fff;
  }
  
  .align-bottom {
    position: fixed;
    display: inline; /* Keep original */
    vertical-align: bottom;
    bottom: 20px;
    right:0;
    margin:auto;
  }
   
  .myw3-bar-item {
    text-decoration: none;
    white-space: normal; /* Override potential nowrap */
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
  }
  
  .w3-tag {
    width: 25%; /* Keep original */
    color:inherit;
    white-space: normal; /* Override potential nowrap */
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    display: inline-block; /* Helps with wrapping */
    vertical-align: middle; /* Adjust alignment if needed */
  }
  
  #mySidebar {
    height: 95%; /* Keep original */
    width: 250px; /* Keep original */
    background-color: #fff;
    border-right: #ebeff5;
    border-right-style: solid;
    overflow-wrap: break-word;
    word-wrap: break-word;
    overflow-y: auto; /* Add scroll if content overflows vertically */
  }
  
  .myw3-bar{overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto}
  .myw3-bar .myw3-bar-item {
    padding:1px 16px; /* Keep original */
    float:left; /* Keep original */
    border:none;
    border-radius: 12px;
    display:block; /* Keep original */
    outline:0;
    background-color: lightgrey;
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  .w3-button.myw3-bar-item:hover {
    background-color: #960550 !important;
    color: #fff !important;
  }
  
  .dropup {
    position: relative;
  }
  
  .sbl1 {
   padding: 0px !important; /* Keep original */
   text-decoration: none !important;
  }
  .sbl2 {
   padding: 0px 0px 0px 8px !important; /* Keep original */
   text-decoration: none !important;
  }
  
  .p-2 {
   padding: 0.1rem !important; /* Keep original */
  }
  
  .pagetitle {
     color: #960550 !important;
     overflow-wrap: break-word;
     word-wrap: break-word;
     word-break: break-word;
  }
  
  header[role="banner"] {
    position: fixed; /* Keep original */
    width: 100%; /* Keep original */
    padding-right: 30px; /* Keep original */
    height: 20px; /* Keep original */
    z-index:3; /* Keep original */
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  
  .entry-content {
    margin-top: 0px; /* Keep original */
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto; /* Optional: improve text flow */
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
  }
  
  .active-page {
    color: #960550 !important;
    text-decoration: none !important;
  }
  
  .current {
    color: #ff00ff !important;
  }

  /* ==========================================================================
     Rendering Code
    ========================================================================== */
  
 .cscode {
      background: transparent;
      border: 0;
     # color: #bd4040;
      color: #48ac04;
      font-size: inherit;
      font-family: monaco, arial;
      padding: 0;
      line-height: 1.2;
      overflow-wrap: break-word;
      white-space: pre;
  }

  .csem {
    font-style: normal;
    font-family: serif;		
  }

 .csem2 {
    font-weight: bold; 
    display: block;
    font-style: oblique;
 }

 .plotclass {
    border: 4px solid #1515b5;
  }

 .hots {
    background: #000000b8;
    color: #ffffffdb;
  }



  /* ==========================================================================
     Media Queries (Original structure maintained)
     ========================================================================== */
  
  /* Example: Two-column layout for larger screens */
  @media (max-width: 991px) {
    .grid-item {
      width: 50%; /* Keep original */
    }
  
    .align-bottom {
      width: 100%; /* Keep original */
      padding-right: 0px; /* Keep original */
      display: flex;
      justify-content: center;
    }
  
  }
  
  /* Large screens (desktops, 992px and up) */
  @media screen and (min-width: 992px) {
    .align-bottom {
      width: 100%; /* Keep original */
      justify-content: center;
      display: flex;
      padding-left: 250px;
    }
  }
  
  
  /* ==========================================================================
     6. Accessibility (Focus styles)
     ========================================================================== */
  
  a:focus,
  button:focus,
  input:focus,
  textarea:focus {
    outline: 2px solid #007bff; /* Visible focus indicator */
    outline-offset: 2px; /* Added for better visibility */
  }
  
  /* ==========================================================================
     7. Specific rules for code/preformatted text wrapping
     ========================================================================== */
  pre,
  code,
  samp,
  kbd {
      white-space: pre-wrap;       /* Preserve whitespace but wrap */
      word-wrap: break-word;       /* Fallback for wrapping */
      overflow-wrap: break-word;   /* Standard property for wrapping */
      word-break: break-word;      /* Allow breaking within words */
  }
  
  /* ==========================================================================
     8. Ensure table cells wrap text
     ========================================================================== */
  td, th {
      overflow-wrap: break-word;
      word-wrap: break-word;
      word-break: break-word;
  }