/*
Theme Name: csxplore
Author: BV
Description: Main CSS file for csxplore, complementing W3.CSS.
*/


/* ==========================================================================
   1. General Styles
   ========================================================================== */

body {
  font-family: Arial, sans-serif; /* Choose a good default font */
  margin: 0;
  padding: 0;
  line-height: 1.6; /* Good readability */
  color: #333; /* Dark grey text for readability */
  overflow-wrap: break-word;
  word-wrap: break-word; /* Legacy fallback for overflow-wrap */
}

/* ==========================================================================
   2. Site Header
   ========================================================================== */

.site-header {
  position: fixed; /* Fixed at the top */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* Ensure it stays on top */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.site-title a {
  color: inherit; /* Inherit the body's text color */
  text-decoration: none;
  font-weight: bold;
  font-size: 1.2em;
  display: inline-block; /* Needed for potential wrapping */
  max-width: 90%; /* Prevent overflow in narrow headers */
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all; /* More aggressive break if needed */
}

/* ==========================================================================
   3. Site Main
   ========================================================================== */

.site-main {
  padding-top: 40px; /* Account for fixed header height */
  padding-bottom: 40px; /* Account for fixed footer height */
  overflow-wrap: break-word;
  word-wrap: break-word;
  /* Consider adding hyphens for better justification, ensure lang attribute is set in HTML */
  /* hyphens: auto; */
}

/* ==========================================================================
   4. Footer
   ========================================================================== */

.footer {
  background-color: #960550;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  transition: transform 0.3s ease-in-out;
  font-size: smaller;
  overflow-wrap: break-word;
  word-wrap: break-word;
  color: white;
}

.footer.hidden {
  /* transform: translateY(100%); */
}

/* ==========================================================================
   5. Page Content
   ========================================================================== */

.page-content {
  padding: 10px;
  /* Explicitly allow wrapping within page content area */
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word; /* Less aggressive than break-all */
}

/* Apply hyphenation specifically to paragraphs within page content */
.page-content p {
    hyphens: auto;
    -webkit-hyphens: auto; /* Safari/Chrome */
    -moz-hyphens: auto;    /* Firefox */
    -ms-hyphens: auto;     /* IE/Edge */
}

/* ==========================================================================
   6. Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  margin-bottom: 0.5em;
  line-height: 1.2;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

/* ==========================================================================
   7. Responsiveness
   ========================================================================== */


/* ==========================================================================
   8. Accessibility
   ========================================================================== */

a:focus {
  outline: 2px solid blue; /* Example focus style */
}

/* ==========================================================================
   9. W3.CSS Overrides 
   ========================================================================== */

/* Adjust padding within a W3.CSS element */
.w3-container {
  padding-top: 0px;
  padding-bottom: 16px;
}

/* ==========================================================================
   10. Text Wrapping
   ========================================================================== */

/* Handle common elements that might contain long strings */
pre,
code,
samp,
kbd {
    white-space: pre-wrap;       /* Preserve whitespace but wrap */
    word-wrap: break-word;       /* Break long words/strings */
    overflow-wrap: break-word;   /* Standard property for breaking */
    word-break: break-word;      /* Allow breaking within words if needed */
}

/* Ensure links wrap properly */
a {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    /* Consider hyphens if links are part of running text */
    /* hyphens: auto; */
}

/* Ensure table cells wrap text */
td, th {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}