/* style.css */

body, html {
  min-height: 100vh; /* Use min-height for better background coverage */
  margin: 0;
  color: #804000; /* Set default text color to white  #CE892E/
  font-family: Arial, sans-serif; /* Set font to Arial */
  font-size: 1.3em; /* Base font size */
  text-align: center; /* Center all text by default */
  line-height: 1.6; /* Improve readability */
  /* Text outline for readability*/ 
  text-shadow:
   -0.5px -0.5px 0 #000,
    0.5px -0.5px 0 #000,
   -0.5px 0.5px 0 #000,
    0.5px 0.5px 0 #000,
   -0.5px 0 0 #000,
    0.5px 0 0 #000,
    0 -0.5px 0 #000,
    0 0.5px 0 #000;
  padding: 3px;
}

.bg {
  background-image: url("landscape1.jpg"); /* Desktop background */
  background-position: top center; /* Prioritize the top of the image */
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh; /* Ensures background covers at least the viewport height */
  position: relative;
  z-index: 1; /* Ensure content is above background */
  /* Added Flexbox to manage vertical layout */
  display: flex;
  flex-direction: column;
}

/* Container to center content and control max width */
.container {
  width: 100%; /* Use a percentage for fluidity */
  max-width: 850px; /* Max width for content on larger screens */
  margin: 0 auto; /* Center the container horizontally */
  padding: 5px 0; /* Add vertical padding inside the container */
  /* font-size: 1em; */
  /* Removed color: black; - Inherits from body */
}

/* Style the header area */
header {
  padding-bottom: 5px; /* Space below the header */
  /* font-size: 1.0em; */
}

/* Style the site title text */
.site-title {
  margin-bottom: 5px; /* Space below the title */
  font-size: 1.8em; /* Larger font size for the title */
  font-weight: bold; /* Make the title bold */
  /* text-align: center; - Inherited from body/container */
  /* Text outline inherited from body */
}

/* Main content area - use flex-grow to push footer down */
main {
  flex-grow: 1; /* Make the main content area expand within .bg */
	/* Any other styles specifically for the main tag go here */
}

/* Style the navigation list */
.main-nav ul { /* Targeted the nav with the new class */
  list-style: none; /* Remove bullet points */
  padding: 0;
  margin: 0;
  display: flex; /* Use flexbox for horizontal layout */
  justify-content: center; /* Center the navigation items */
  flex-wrap: wrap; /* Allow items to wrap to the next line on smaller screens */
}

.main-nav li { /* Targeted list items within the nav with the new class */
  margin: 0 5px; /* Space between navigation items */
}

.main-nav a { /* Targeted links within the nav with the new class */
  color: #804000; /* White color for links */
  text-decoration: none; /* Remove default underline */
  padding: 5px 5px; /* Add some padding to the links for larger click area */
  font-size: 1.2em;
}

.main-nav a:hover {
  text-decoration: none; /* Underline on hover */
  color: #c0c0c0;
}

/* Style the social links area */
.social-links {
  margin-top: 20px; /* Space above social links */
  margin-bottom: 30px;
  /* text-align: center; - Inherited from body/container */
}

.social-links img {
  max-width: 100%; /* Ensure social icon scales down */
  height: auto; /* Maintain aspect ratio */
  width: 50px; /* Original size */
  height: 50px;
  margin-bottom: 5px; /* Space between icon and text */
}

.social-links a {
  color: #804000; /* White color for social link text */
  text-decoration: none;
  /* Text outline inherited from body */
}

.social-links a:hover {
  color: #c0c0c0; /* Or your preferred hover color */
}

/* Style the footer */
footer {
  position: inherit; /* Fix the footer to the viewport */
  bottom: 0; /* Position it at the bottom edge */
  left: 0; /* Align it to the left edge */
  width: 100%; /* Make it span the full width of the viewport */
  /* Optional: Add a semi-transparent background for readability */
  /* background-color: rgba(0, 0, 0, 0.7); */
  color: #804000; /* Ensure text color is white */
  font-size: 1em; /* Slightly smaller text */
  text-align: center; /* Center content within the footer */
  padding: 10px 0; /* Add some padding above and below content */
  z-index: 1000; /* Ensure it stays on top of other content */
  /* Text outline inherited from body */
}

/* Style for a heading within the content e.g. <h2>About Us</h2>) */
.container .content h2 { /* Style for an H2 tag within content */
  font-size: 1.5em; /* Adjust size as needed */
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 15px;
  text-align: center; /* Center the heading */
  /* Inherits color and text-shadow */
}

.article {
  font-size: 0.5em;
  text-decoration:none;
}

.article a {
  color: #CE892E;
  text-decoration:none;
}

.article a:hover {
  color: #c0c0c0;
}


/* --- Responsive Styles --- */

/* Styles for screens smaller than 768px (Typical tablet portrait and below) */
@media screen and (max-width: 768px) {

  /* Adjust base font size for smaller screens */
  body, html {
  font-size: 1.0em; /* Slightly smaller base font size on mobile */
  }

 .bg {
  background-image: url("jsurfnew.jpg"); /* Mobile background */
  background-position: top center; /* Prioritize the top of the image on mobile */
  background-repeat: no-repeat;
  background-size: cover;
 }


  /* Adjust container padding */
  .container {
   padding: 15px; /* Add padding on all sides */
   text-align: right; /* Align content to the right within container */
 }

  /* Adjust site title font size on smaller screens */
  .site-title {
   font-size: 1.5em;
   text-align: center; /* Re-center site title, overriding container's text-align */
 }


  /* Stack the navigation items vertically on smaller screens */
  .main-nav ul { /* Target nav ul with class */
   flex-direction: column; /* Stack items in a column */
   align-items: flex-end; /* Align stacked items to the right */
 }

  /* Adjust spacing for vertical navigation */
  .main-nav li { /* Target nav li with class */
   margin: 5px 0; /* Add vertical space, remove horizontal */
 }

  /* Increase touch target size for navigation links */
  .main-nav a { /* Target nav a with class */
   padding: 10px 20px; /* Increased padding for easier tapping */
 }

  /* Adjust social icon size if needed */
  .social-links img {
   width: 40px;
   height: 40px;
 }

  .content {
   font-size: 0.8em !important;
   text-align:left;	
 }
	
  .container .content {
   text-align: left; /* Ensure left alignment on mobile */
   font-size: 0.8em !important;
   line-height: 1.5; /* Consistent line height */
   padding: 0 10px; /* Add horizontal padding within content block on mobile */
   margin-top: 15px; /* Adjust margin for mobile */
   margin-bottom: 15px; /* Adjust margin for mobile */
 }

  /* Responsive adjustments for headings within content */
   .container .content h2 {
   font-size: 0.8em; /* Adjust size on mobile */
   margin-bottom: 10px;
 }
}

/* Optional: Styles for even smaller screens (Typical phone portrait) */
/*
@media screen and (max-width: 480px) {
    body, html {
        font-size: 0.9em;
    }

    .site-title {
        font-size: 1.3em;
    }

    .container {
        padding: 10px;
    }

    .main-nav li {
        margin: 3px 0;
    }

    .main-nav a {
         padding: 8px 15px;
    }

     .social-links img {
        width: 35px;
        height: 35px;
    }
}
*/