/* =========================================================
   SITE-WIDE CUSTOM STYLES
   ========================================================= */

/* --- CALLOUT BOXES --- */
.callout {
  /* Space inside the box */
  padding: 20px;

  /* Space below each callout */
  margin-bottom: 20px;
}

/* When hovering over a callout or incident report */
.callout:hover,
.report-incident:hover {
  cursor: pointer; /* Changes cursor to pointer (hand icon) */
}

/* Callout link styles */
.callout a,
.callout a:hover {
  color: #ffffff; /* Link color inside callout */
  text-decoration: none; /* Removes underline */
}

/* =========================================================
   NAVIGATION BAR
   Borrowed from afro.unm.edu — customized for easy editing
   ========================================================= */

/* --- NAV BAR CONTAINER --- */
#nav {
  background-color: #c10037; /* Main background color (UNM Red) */
  z-index: 99;               /* Keeps nav above other elements */

  /* Alignment and spacing */
  text-align: center;        /* Centers links horizontally */
  padding: 16px 0;           /* Adds vertical spacing inside the bar */

  /* Optional shadow for depth (uncomment to use) */
  /* box-shadow: 0 3px 6px rgba(0,0,0,0.1); */
}

/* --- TOP LEVEL LINKS --- */
#nav .nav > li > a {
  background-color: #c10037; /* Background color behind each link */
  color: #ffffff;            /* Text color for links */

  /* FONT CONTROLS */
  font-size: 1.9rem       /* <--- Adjust this to make font larger/smaller */
  font-weight: 500          /* <--- Adjust thickness (400=normal, 700=bold) */
  text-transform: ; /* Converts text to all caps */
  letter-spacing: 0.8px;     /* Space between letters */

  /* SPACING AND SHAPE */
  padding: 4px 4px;        /* <--- Adjust to make buttons taller/wider */
  margin: 0 8px;             /* Space between buttons */
  border-radius: 4px;        /* Rounded corners (0 = square) */
  text-decoration: none;     /* Removes underline */

  /* ALIGNMENT & TRANSITION */
  display: inline-block;
  transition: all 0.25s ease; /* Smooth hover color change */
}

/* --- HOVER & FOCUS STATES --- */
#nav .nav > li > a:hover,
#nav .nav > li > a:focus {
  background-color: #ffffff; /* Background color when hovered */
  color: #c10037;            /* Text color when hovered */
}

/* --- ACTIVE OR DROPDOWN OPEN STATE --- */
#nav .nav .open > a,
#nav .nav .open > a:hover,
#nav .nav .open > a:focus {
  background-color: #ffffff; /* Background when dropdown is open */
  color: #c10037;            /* Text color for open dropdown */
}

/* =========================================================
   RESPONSIVE BEHAVIOR
   Adjusts layout for smaller screens (phones, tablets)
   ========================================================= */

@media (max-width: 700px) {
  #nav {
    padding: 10px 0;
  }

  #nav .nav {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #nav .nav > li > a {
    font-size: 1rem/* Slightly smaller on mobile */
    padding: 10px 14px;
    margin: 6px 0;
  }
}

/* =========================================================
   QUICK EDIT GUIDE:
   ------------------
   FONT SIZE:       change 'font-size' under '#nav .nav > li > a'
   TEXT COLOR:      change 'color' under '#nav .nav > li > a'
   BACKGROUND:      change 'background-color' under '#nav' or '#nav .nav > li > a'
   HOVER COLORS:    change 'background-color' and 'color' under hover selectors
   CORNERS:         change 'border-radius'
   SPACING:         adjust 'padding' (inside buttons) and 'margin' (between buttons)
   ========================================================= */