/* --------------------------------------------- */
/* BASE RESET & GENERAL SETUP */
/* --------------------------------------------- */

/* 
  Apply box-sizing: border-box globally.
  This means padding and borders are included inside element's width and height,
  making sizing more predictable and easier to manage.
*/
* {
  box-sizing: border-box;
}

/* 
  Set basic styles for the entire page (html and body):
  - Remove default margin and padding for a clean slate.
  - Set height to 100% of viewport height for full-page layouts.
  - Use Arial (or fallback sans-serif) for readable text.
  - Transparent background so underlying styles or images show if any.
  - Set full width.
  - Hide horizontal scroll (prevent side scrollbars).
  - Enable vertical scrolling.
  - Use Flexbox layout to stack content vertically.
  - Ensure minimum height covers the entire viewport.
*/
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, sans-serif;
  background: transparent;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* --------------------------------------------- */
/* HEADER SECTION */
/* --------------------------------------------- */

/* 
  Style the header:
  - Position relative so we can position children absolutely inside it.
  - Set a background image covering entire header area.
  - Center the background image horizontally and vertically at 35% down.
  - Center-align all text inside the header.
  - Add a lot of padding to give breathing room.
  - Ensure the header is at least 150px tall.
  - Set text color to white for contrast against background.
*/
header {
  position: relative;
  background-image: url('Images/Screenshot.png');
  background-size: cover;
  background-position: 50% 35%;
  text-align: center;
  padding: 8em;
  min-height: 150px;
  color: white;
}

/* 
  Style for the logo inside header:
  - Position absolutely relative to header.
  - Vertically center it by setting top to 50% and moving up half its height using translateY.
  - Place it slightly from the left edge (1em).
  - Fix the height at 120px and keep width proportional.
  - Add rounded corners with border-radius.
*/
header .logo {
  position: absolute;
  top: 50%;
  left: 1em;
  transform: translateY(-50%);
  height: 120px;
  width: auto;
  border-radius: 15px;
}

/* 
  Container for the title and slogan text:
  - Absolutely positioned so we can center it inside header.
  - Use top and left 50% plus translate to perfectly center horizontally and vertically.
  - Center text inside.
  - Set a higher stacking order (z-index) so it appears above the background image.
  - Use flexbox to stack title and slogan vertically with spacing between them.
  - Set width to 100% to allow text to wrap nicely.
*/
.text-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1em; /* space between title and slogan */
  width: 100%;
}

/* 
  Style for the main title text background and font:
  - Semi-transparent black background so text stands out on image.
  - White text for contrast.
  - Padding to create space inside the box.
  - Rounded corners for a smooth look.
  - Large font size and bold weight for emphasis.
  - Text shadow to improve readability on background.
  - Margins to add vertical spacing and center horizontally.
  - Max width limits line length for readability.
  - width: fit-content shrinks box around text size.
*/
.title-bg {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 0.3em 2em;
  border-radius: 8px;
  font-size: 2em;
  font-weight: bold;
  text-shadow: 1px 1px 3px black;
  margin: 0.5em auto 0.25em auto;
  max-width: 90%;
  width: fit-content;
  
}

/* 
  Style for the slogan text background and font:
  - Dark teal semi-transparent background for distinction from title.
  - White text for contrast.
  - Padding and rounded corners for neat box appearance.
  - Slightly smaller font than title.
  - Text shadow to improve readability.
  - Margin to space it below title and center horizontally.
  - Limit width for readability.
*/


.slogan-bg {
  background-color: rgba(0, 77, 64, 0.8);
  color: white;
  padding: 0.5em 1em;
  display: block;
  border-radius: 8px;
  text-shadow: 1px 1px 2px black;
  font-weight: bold;
  font-size: 1.1em;
  margin: 0.25em auto 1em auto;
  max-width: 90%;
  width: fit-content;
  line-height: 1.3;
  
  

}

/* --------------------------------------------- */
/* NAVIGATION BAR */
/* --------------------------------------------- */

/* 
  Navigation bar styles:
  - Use a background image (chain link texture).
  - Enlarge background width to 150% for style effect.
  - Center background image.
  - Prevent tiling/repeating.
  - Add vertical padding.
  - Use flexbox to arrange nav links in a row, wrapping if necessary.
  - Center nav links horizontally.
  - Add space between links.
*/
nav {
  background-image: url('Images/chainlink2.png');
  background-size: 150% auto;
  background-position: center;
  background-repeat: no-repeat;
  padding: 2em 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em;
}

/* 
  Style for each nav link:
  - White bold text, larger size.
  - No underline by default.
  - Padding inside links for clickable area.
  - Rounded corners.
  - Semi-transparent black background.
  - Light semi-transparent white border.
  - Text shadow for readability.
  - Smooth transitions for hover effects.
  - Prevent text from wrapping.
*/
nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1em;
  padding: 0.5em 1em;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-shadow: 1px 1px 3px black;
  transition: all 0.3s ease;
  white-space: nowrap;
}

/* 
  Hover and focus state for nav links:
  - Dark green background for visual feedback.
  - White border to highlight active state.
  - Soft glowing box shadow for emphasis.
  - Pointer cursor on hover to indicate clickability.
  - Remove default focus outline for a cleaner look.
*/
nav a:hover,
nav a:focus {
  background: #06402B;
  border-color: white;
  box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.6);
  cursor: pointer;
  outline: none;
}

/* --------------------------------------------- */
/* MAIN CONTENT CONTAINER */
/* --------------------------------------------- */

/* 
  Container that holds main content:
  - Relative positioning so overlay and content can be stacked.
  - Flex grow so container expands to fill vertical space.
  - Full viewport width.
  - Background image (aluminum fence texture).
  - Cover background fully and center it.
  - No repeating background image.
  - Padding inside container for spacing.
  - Use flexbox to center content horizontally and align it to top vertically.
  - Ensure container is at least full viewport height.
*/
.container {
  position: relative;
  flex: 1;
  width: 100vw;
  background-image: url('Images/alum.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 3em 1em;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
}

/* 
  Semi-transparent white overlay:
  - Covers entire container.
  - Makes background image lighter for text readability.
  - Positioned absolutely and below the content box via z-index.
*/
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.3);
  z-index: 1;
}

/* 
  The main content box styles:
  - Positioned relative to be above overlay.
  - White semi-transparent background for readability.
  - Padding inside for spacing.
  - Rounded corners for smooth edges.
  - Drop shadow for subtle depth.
  - Max width to avoid too wide lines on big screens.
  - Responsive width (100% but max capped).
  - Slightly larger font and comfortable line height.
  - Left aligned text for readability.
*/
.content-box {
  /* Inside padding: 
     Top: 2em (enough breathing room above text)
     Right & Left: 1.5em (standard horizontal padding)
     Bottom: 2.5em (a little extra space at bottom) */
  padding: 2em 1.5em 2.5em 1.5em;

  /* Outside margin:
     Top: 1.5em (space separating from anything above)
     Bottom: 2em (space separating from footer or next content) */
  margin-top: 1.5em;
  margin-bottom: 2em;

  /* Keep other existing styles */
  position: relative;
  z-index: 2;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  max-width: 800px;
  width: 100%;
  font-size: 1.1em;
  line-height: 1.5;
  text-align: left;
}



/* --------------------------------------------- */
/* HEADINGS AND LISTS */
/* --------------------------------------------- */

/* 
  Style h3 headings:
  - Dark blue-gray color for good contrast.
  - Bigger font size for hierarchy.
  - Space below heading for separation.
*/
h3 {
  color: #2c3e50;
  font-size: 1.5em;
  margin-bottom: 0.5em;
}

/* 
  Unordered lists:
  - Add padding on left to indent list from edge.
*/
ul {
  padding-left: 1.2em;
}

/* 
  List items:
  - Space below each item for clarity.
*/
ul li {
  margin-bottom: 1.5em;
}

/* 
  Highlight strong text in list items with blue color for emphasis.
*/
ul li strong {
  color: #1a73e8;
}

/* 
  Style links inside list items:
  - Blue color to stand out.
  - Slightly smaller font size.
  - Remove underline by default.
*/
ul li a {
  color: #0066cc;
  font-size: 0.95em;
  text-decoration: none;
}

/* 
  On hover, underline the links to indicate they are clickable.
*/
ul li a:hover {
  text-decoration: underline;
}

/* --------------------------------------------- */
/* FOOTER */
/* --------------------------------------------- */

/* 
  Footer styles:
  - Dark teal background color.
  - White centered text.
  - Padding inside for breathing room.
  - Margin-top: auto pushes footer to bottom when page content is short.
  - Full width.
*/
footer {
  background-color: #004d40;
  color: white;
  text-align: center;
  padding: 1em;
  margin-top: auto;
  width: 100%;
}

/* --------------------------------------------- */
/* RESPONSIVE (MOBILE AND TABLETS) */
/* --------------------------------------------- */

/* 
  For screen widths 768px or smaller:
  Adjust layout and font sizes to improve usability on smaller devices.
*/
/* Mobile responsiveness */
@media (max-width: 600px) {
  .title-bg {
    font-size: 1.4em;
    padding: 0.3em 0.6em;
    margin: 0em auto 2em auto;
    position: relative;
    top: -1px;
  }

  .slogan-bg {
    font-size: 0.9em;
    padding: 0.3em 0.8em;
    margin: 1em auto -1em auto;
    font-weight: bold;  /* Add this */
  }

  /* Adjust slogan-group margin on mobile */
  .slogan-group {
    margin-top: 10em;
  }

  /* Add spacing below the first slogan on mobile */
  .mb-mobile {
    margin-bottom: 1.5em;
  }

  header {
    background-image: url('Images/Screenshot.png');
    background-size: cover;
    background-position: center top;
    height: 200px;
    padding: 0;
  }

  header .logo {
    position: static;
    height: 70px;
    margin: 3.3em auto 2em auto;
    display: block;
    transform: none;
  }

  nav {
    padding: 1em;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5em;
  }

  nav a {
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 0.4em 0.8em;
    min-height: 50px;
    font-size: 0.9em;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .black-box {
    background: rgba(0, 0, 0, 0.6);
    color: white;
    width: 80%;
    max-width: 300px;
    min-height: 80px;
    padding: 0.8em 1em;
    margin: 0.5em auto;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .container {
    position: relative;  /* keep this */
    width: 100%;         /* avoid 100vw if possible */
    padding: 3em 1em;
    background-image: url('Images/alum.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;       /* optional */
    justify-content: center;
    align-items: flex-start;
    /* Remove min-height: 100vh; or set it to auto */
    min-height: auto;
    overflow: visible;   /* ensure content is visible */
}

  .content-box {
    position: relative;  /* no fixed or absolute */
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.85);
    padding: 2em 1.5em 2.5em 1.5em;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    max-width: 800px;
    width: 100%;
    font-size: 1.1em;
    line-height: 1.5;
    text-align: left;
    margin-top: 1.5em;
    margin-bottom: 2em;
}


}