/* =========================================
   1. COLOR THEMES (LIGHT & DARK MODE)
   These variables (--name) store your colors so you only have to change them in one place!
   ========================================= */

/* Default Light Mode */
:root {
  --text: darkslategrey;
  --border: lightgrey;
  --accent: teal;
  --bg: #dce3e1;
  --gradientTop: white;
  --gradientBottom: rgba(240, 248, 255, 0.8);
}

/* =========================================
   2. GENERAL PAGE SETUP
   ========================================= */

/* This forces padding and borders to be included in the element's total width */
* { 
  box-sizing: border-box;
}

/* The style for the entire background of the browser window */
body {
  padding: 10px;
  font-family: 'MS PGothic', sans-serif; /* Your chosen font */
  color: var(--text); /* Uses the text color from your variables above */

  /* The complex geometric background pattern */
  background-color: var(--gradientTop);
  background-image: url('/images/hib1.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* =========================================
   3. THE MAIN CONTAINER & COLUMNS
   ========================================= */

/* The box that holds your header, sections, and footer */
.container {
  max-width: 55rem;          /* Stops the box from getting too wide on large screens */
  margin: 5vw auto 12px auto; /* Centers the box on the page */
  border: 6px ridge var(--border);
  outline: 3px solid var(--gradientTop);
  outline-offset: 4px;
  border-radius: 10px;       /* Rounds the corners */
  display: flex;             /* Turns on flexbox for layout structure */
  flex-wrap: wrap;           /* Allows items to stack on smaller screens */
  padding: 5px;
  gap: 5px;                  /* Space between sections inside the container */

  /* The dotted background pattern inside the container */
  background-color: var(--gradientBottom);
  background-image: repeating-radial-gradient(circle at 0 0, transparent 0, var(--gradientBottom) 9px), repeating-linear-gradient(var(--bg), var(--bg));
}

/* These classes control how wide different sections are */
.small { flex: 1 1 9%; }   /* Sidebar width */
.large { flex: 1 1 82%; }  /* Main content width */
.full { flex: 1 1 100%; }  /* Full width */
.half { flex: 1 1 49%; }   /* Half width */

/* =========================================
   4. HEADER & SECTIONS
   ========================================= */

/* The big banner image at the top */
header {
  background-image: url('/images/hib2.jpg');
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 120px; /* Change banner height here */
  border: 2px ridge var(--border);
  border-radius: 5px;
  position: relative; /* Allows the text inside to be positioned freely */
}

/* The text inside the header banner */
header span {
  font-size: 2.5rem;
  position: absolute;
  bottom: 0;         /* Pushes the text to the bottom */
  right: 10px;       /* Pushes the text to the right */
  margin: 10px;
  font-weight: bold;
  /* Creates a cool border effect around the text */
  text-shadow: 1px 1px var(--text),
    -1px 1px var(--text),
    1px -1px var(--accent),
    -1px -1px var(--accent);
  color: var(--gradientTop);
}

/* The boxes that hold your actual page content */
section {
  border: 2px ridge var(--border);
  border-radius: 5px;
  background: linear-gradient(var(--gradientTop),var(--gradientBottom));
  padding: 5px;
}
 
 /* =========================================
   NAVIGATION STYLES
   ========================================= */

/* Builds the box around the links (matches your section styles) */
/* Formats the <h2> "navigation" title */
nav h2 {
  text-align: center;
  font-size: 1.25rem;
  margin: 5px 5px 10px 5px;
  
}

/* Removes bullet points and indents from the HTML list */
nav ul {
  list-style-type: none; 
  padding: 0;            
  margin: 0;             
}

/* Stacks the links and turns them into visible buttons */
nav a, nav a:visited {
  display: block;
  margin: 5px;
  background: #9ac5e5; /* Light mode button color */
  border: 1px solid var(--border); 
  border-radius: 5px;
  padding: 4px 7px;
  text-decoration: none;
  color: #fff;
  text-shadow: 1px 1px var(--text),
    -1px 1px var(--text),
    1px -1px var(--accent),
    -1px -1px var(--accent);
  
}

/* Button color when you hover over it */
nav a:hover, nav a:focus {
  background: #6798c5; 
}
/* =========================================
   5. TEXT, LINKS & IMAGES
   ========================================= */

h1, h2, h3, h4, h5, h6, p { 
  margin: 5px;
  line-height: 1.2;
}

h1 { 
  font-size: 1.4rem;
  letter-spacing: 2px;
  font-weight: normal;
  text-align: center;
  border-bottom: 2px ridge var(--border); /* Adds a line under main titles */
  padding-bottom: 5px;
}

h2 { font-size: 1.25rem; font-weight: normal; text-align: center; }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; color: var(--accent); padding-left: 12px; }

/* Ensures images don't break out of their boxes on small screens */
img { max-width: 100%; }
pre { overflow-x: auto; }

/* Link styling */
a:hover, a:focus { font-style: italic; }
a:visited { color: var(--accent); }


/* =========================================
   6. BLOG STYLES (Recovered from your old code!)
   These ensure your JavaScript blog lists look correct
   ========================================= */

/* Styles the list of posts */
#recentpostlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  list-style-type: none; /* Removes the default bullet points */
}

/* Styles the "Read more" links */
.moreposts {
  font-size: 0.8em;
  margin-top: 0.2em;
}