/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0; /* A light gray background */
    color: #333; /* Dark gray text */
    margin: 0;
    padding: 0;
}

header {
    background-color: #063470;
    color: white;
    text-align: center; /* This centers the h1 content now */
    padding: 20px;
    /* Removed display: flex; and justify-content: space-between; as they are not needed here */
}

/* New CSS rule for the logo inside the header */
.header-logo {
  height: 90px; /* Increased size for better visibility */
  vertical-align: middle; /* Aligns the icon with the center of the text */
  margin-right: 15px; /* Adds space between the icon and the heading text */
}

header h1 {
    display: flex; /* Use flex on the h1 to align its contents */
    align-items: center; /* Vertically center the image and text */
    justify-content: center; /* Horizontally center the image and text together */
    margin: 0; /* Remove default margin from h1 */
    padding: 0; /* Remove default padding from h1 */
}

nav ul {
    list-style-type: none; /* Removes bullet points from the list */
    margin: 0;
    padding: 0;
    background-color: #555; /* A dark gray navigation bar */
    overflow: hidden;
}

nav li {
    float: left;
}

nav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none; /* Removes the underline from links */
}

nav li a:hover {
    background-color: #111; /* Changes color when you hover over the link */
}

main {
    padding: 20px;
}

section {
    background-color: white;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px; /* Adds rounded corners */
}

footer {
    text-align: center;
    padding: 10px;
    background-color: #333; /* A dark gray footer */
    color: white;
}

a {
    color: #0066cc; /* A bright blue for all links */
    text-decoration: none;
}

/* --- Section Heading and Icon Styles --- */

/* This targets only the H2 headings inside your main content sections */
main section h2 {
  display: flex;          /* Turns the heading into a flexible container */
  flex-direction: column; /* Stacks items vertically instead of side-by-side */
  align-items: center;    /* Centers the items horizontally */
  font-size: 2em;         /* Makes heading text a bit larger to stand out */
}

.section-icon {
  height: 180px;           /* Let's make the icon a little bigger now that it's on its own */
  margin-bottom: 25px;    /* Adds space between the icon and the text below it */
}

/* --- Content Readability Styles --- */

/* This targets all paragraphs in your main content area */
main p {
  line-height: 1.6; /* Increases space between lines of text in a paragraph */
  margin-bottom: 1em; /* Adds a space equal to one line of text after each paragraph */
}

/* This targets the bulleted lists */
main ul {
  line-height: 1.6; /* Also apply better line spacing to lists */
  padding-left: 25px; /* Adds a bit of indentation to the lists so they don't hug the left edge */
}

/* --- Responsive Design for Mobile --- */

@media (max-width: 768px) {
  /* This code only applies to screens 768px wide or smaller */

  nav ul {
    flex-direction: column; /* Stack the nav links vertically */
    align-items: center;    /* Center the stacked links */
  }

  nav li {
    margin-bottom: 10px; /* Add some space between the stacked links */
  }
}

/* --- Glossary Page Styles --- */

/* Style for each term (e.g., "VPN") */
main dt {
  font-weight: bold;
  font-size: 1.1em; /* Makes the term stand out slightly */
  margin-top: 20px;  /* Creates separation between glossary entries */
}

/* Style for each definition */
main dd {
  line-height: 1.6; /* For better readability */
  margin-left: 25px; /* Indents the definition nicely under the term */
}