/* File name: CSS/Global_Styles.css */

/* ===========================
   BASE PAGE RESET
   =========================== */

/* === Removes default spacing so elements like nav can touch the edges of the page === */
/* PURPOSE: Prevent default browser margins/padding from interfering with layout */
body {
  margin: 0;
  padding: 0;
}

/* ===========================
   NAVIGATION BAR STYLES
   =========================== */

/* Styles the overall navigation bar background */
/* PURPOSE: Sets main nav bar color and full width */
nav {
  background-color: #00befd;
  width: 100%;
}

/* removes the little bullet points you’d normally see in lists form (ul)-(make list) */
/* PURPOSE: Makes nav links horizontal and removes default list styling */
nav ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

/* The drop Ensures the dropbar menu comes down in the position the button is in */
/* PURPOSE: Positions dropdown menus relative to their parent list item */
nav li {
  position: relative;
}

/* Styles the links (a) in the navigation bar */
/* PURPOSE: Makes nav links flexible, with consistent padding, alignment, and color */
nav a {
  display: flex;           /* wraps the text */
  align-items: center;     
  padding: 10px 20px;
  color: white;           
  text-decoration: none;  
  height: 100%;           
  box-sizing: border-box; 
}

/* Highlights link when hovered for user feedback */
/* PURPOSE: Adds visual feedback when hovering over nav links */
nav a:hover {
  background-color: #f4073a;
}

/* Styles the dropdown menu and hides it by default */
/* PURPOSE: Positions dropdowns and hides them until hovered or toggled */
.dropdown-content {
  display: none;
  position: absolute; 
  top: 100%;  
  left: 0;
  background-color: #00befd;
  white-space: nowrap;
}

/* Styles the links (a) inside the dropdown menu */
/* PURPOSE: Makes dropdown links full width with padding and removes underline */
.dropdown-content a {
  display: block;
  padding: 12px 20px;
  white-space: nowrap;
  color: white;
  text-decoration: none;
}

/* === Shows the dropdown menu when its parent is hovered === */
/* PURPOSE: Desktop/Tablet hover effect to show dropdown menu */
.dropdown:hover .dropdown-content {
  display: block;
}

/* ===========================
   Text Effects Styles
   =========================== */

/* 
Container for content sections with padding, background, and shadow 
relative to root font size rem
*/
/* PURPOSE: Styles main content sections with spacing, background, shadow, and font */
.section {
  max-width: 100%;  
  margin: 1rem 1rem;  
  padding: 0.3rem 1.5rem 0.5rem 1.5rem; 
  box-sizing: border-box;  
  background-color: #f9faff;
  border-radius: 0.9375rem;  
  box-shadow: 0 0.375rem 0.75rem rgba(0, 0, 0, 0.1); 
  font-family: Arial, sans-serif;  
  line-height: 1.4;  
  border: 0.0625rem solid rgba(0, 0, 0, 0); 
}

/* Heading styles inside section */
/* PURPOSE: Colors and spaces H1 headings within sections */
.section h1 {
  color: #00befd;
  margin-bottom: 1.25rem; 
  line-height: 1.3;
}

/* Paragraph text styles inside section */
/* PURPOSE: Sets font size, color, and line height for paragraphs */
.section p {
  font-size: 1.2rem;
  color: #333;
  line-height: 1.5;
}

.section ul {
  margin: 1rem 0;
  padding-left: 1.5rem;
  line-height: 1.0;
}

.section li {
  margin-bottom: 0.75rem;
}

/* ===========================
   RESPONSIVE / DYNAMIC INTERFACE STYLES
   =========================== */

/* Phones: max-width 600px */
/* PURPOSE: Adjusts nav, text, and section layout for small screens (mobile) */
@media (max-width: 600px) {
  nav ul {
    flex-direction: column;  
  }

  nav a {
    padding: 8px 15px;  
    font-size: 1rem;   
  }

  .section {
    margin: 0.5rem 0.5rem;  
    padding: 0.5rem 1rem;  
    line-height: 1.0;  
  }

  .section p {
    font-size: 1rem;   
  }
}

/* Tablets: 601px to 900px */
/* PURPOSE: Adjusts layout, padding, and font size for medium screens (tablets) */
@media (min-width: 601px) and (max-width: 900px) {
  nav ul {
    flex-direction: row; 
    flex-wrap: wrap;
  }

  nav a {
    padding: 10px 18px;
    font-size: 1.1rem;
  }

  .section {
    margin: 1rem 1rem;
    padding: 0.4rem 1.2rem;
    line-height: 0.9;
  }

  .section p {
    font-size: 1.1rem;
  }
}

/* Desktop: min-width 901px */
/* PURPOSE: Default/large screen layout adjustments */
@media (min-width: 901px) {
  nav ul {
    flex-direction: row;
  }

  nav a {
    padding: 10px 20px;
    font-size: 1.2rem;
  }

  .section {
    margin: 1rem 1rem;
    padding: 0.3rem 1.5rem 0.5rem 1.5rem;
    line-height: 0.7;
  }

  .section p {
    font-size: 1.2rem;
  }
}

/* =====================================
   MOBILE/iPHONE DROPDOWN FIX - SIZE TO CONTENT
   Only affects screens ≤ 600px (phones)
   ===================================== */

/* PURPOSE: Disable hover and allow JS toggle of dropdown menu on small screens */
@media (max-width: 600px) {
  .dropdown:hover .dropdown-content {
    display: none;
  }

  /* Show dropdown only when JS toggles .active */
  .dropdown.active .dropdown-content {
    display: block;
    position: absolute; 
    top: 100%; 
    left: 0;
    width: 100%;
    max-height: none; 
    background-color: #00befd;
    z-index: 2000;
    overflow: hidden; 
    padding: 0; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  }

  /* Dropdown links styling */
  .dropdown-content a {
    display: block;
    padding: 15px 20px;
    color: white;
    font-size: 1.2rem;
    text-decoration: none;
  }

  /* Hover effect on links */
  .dropdown-content a:hover {
    background-color: #f4073a;
  }

  /* Prevent body scroll while dropdown is open */
  body.dropdown-open {
    overflow: hidden;
  }
}