/* ===========================
   CIS195 - Shared Stylesheet
   Contains your original CSS plus accessibility & responsive improvements
   Last updated: Oct 24, 2025
   =========================== */

/* Importing font from le-google */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* CSS Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ========= Color variables (60-30-10 idea) =========
   --primary: dominant (60%)
   --accent: secondary (30%)
   --accent-2: small highlight (10%)
   You asked to keep your exact palette below; variables map to them.
*/
:root{
  --primary: #165c9f;     /* used for headings / accents (example) */
  --accent: #4557c8;      /* your nav/button green */
  --accent-2: #214a1c;    /* highlight */
  --bg-strong: #a57ebc;   /* your original page background */
  --text-strong: #171b12; /* your original body text color */
  --section-bg: #4bafc1;  /* section backgrounds from your CSS */
  --header-bg: rgb(21,92,173);
  --footer-bg: rgb(156, 159, 194);
  --muted: rgb(61,109,113);
  --max-text-width: 60ch; /* keep paragraphs readable (≈60 characters) */
  --content-padding: 1.25rem;
  --radius: 8px;
  --focus-color: var(--accent-2);
}

/* ==========================
   Body and base typography
   ========================== */
body {
  /* use Roboto first, fallback to Arial as you requested */
  font-family: 'Roboto', Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background: var(--bg-strong);     /* kept your background */
  color: var(--text-strong);        /* kept your text color */
  line-height: 1.6;                 /* recommended for readability */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

/* Constrain main content for readable measure (60ch) and center it */
main {
  max-width: var(--max-text-width);
  margin: 0 auto;
  padding: 0 10px;
}

/* ==========================
   Header styling (kept yours)
   ========================== */
header {
  background: var(--header-bg); /* rgb(21,92,173) */
  color: #b3e3e2;
  padding: 20px;
  text-align: center;
  border-radius: 6px;
  margin-bottom: 20px;
}

header h1 {
  margin: 0 0 10px;
  font-size: 1.75rem;
  line-height: 1.1;
}

/* ==========================
   Navigation Links as buttons (kept and improved)
   ========================== */
nav {
  margin-top: 8px;
}

nav a {
  background-color: var(--accent); /* #23a37f */
  color: #e9e8ed;
  padding: 8px 16px;
  margin: 0 6px;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  transition: background 0.3s, transform 0.12s;
  display: inline-block;
  font-size: 0.95rem;
}

nav a:hover,
nav a:focus {
  background-color: #065f46;
  transform: translateY(-1px);
  outline: none;
}

/* make keyboard focus visible */
nav a:focus {
  box-shadow: 0 0 0 3px rgba(195,23,152,0.18);
  border-radius: 6px;
  outline: 3px dashed var(--focus-color);
  outline-offset: 3px;
}

/* ==========================
   Main Sections styling (kept yours but responsive)
   ========================== */
section {
  background: var(--section-bg); /* #4bafc1 */
  margin: 15px 0;
  padding: 20px;
  border-radius: var(--radius);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* headings inside sections */
h2 {
  color: #041611;
  margin-top: 0;
  font-size: 1.25rem;
}

/* inline emphasis */
p strong { color: var(--muted); }
p em { color: #065f46; }

/* Lists area */
ul {
  text-align: left;
  padding-left: 20px;
}
ul li { margin: 8px 0; }



/* ==========================
   Generic Images (Content / Article)
   ========================== */
img {
  display: block;          /* centers with margin auto */
  max-width: 100%;         /* scales down for small screens */
  height: auto;            /* keeps aspect ratio */
  margin: 16px auto;       /* vertical spacing + center */
  border-radius: 8px;      /* slightly rounded corners */
  object-fit: cover;       /* keeps image proportionally filled */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* optional subtle shadow */
}

/* ==========================
   Avatar / Profile Images
   ========================== */
img.avatar,
img.profile,
img.round {
  width: 260px;            /* fixed size */
  height: 260px;
  border-radius: 50%;      /* circle */
  border: 3px solid rgb(64, 155, 200);
  display: block;
  margin: 16px auto;       /* center */
  object-fit: cover;       /* fill circle */
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* ==========================
   Footer Image (smaller & controlled)
   ========================== */
img.footer-img {
  width: 120px;           /* small fixed size */
  max-width: 120px;       /* never grow past this */
  height: auto;
  display: block;
  margin: 10px auto;     /* center it */
  border-radius: 6px;
  border: 2px solid var(--accent);
  box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
}



/* ==========================
   Button and utility classes
   ========================== */
a.button {
  display:inline-block;
  background: var(--accent);
  color:#fff;
  padding:10px 16px;
  border-radius:6px;
  text-decoration:none;
  font-weight:700;
}

a.button:hover,
a.button:focus { background: #065f46; }

/* ==========================
   Footer styling (kept and adjusted)
   ========================== */
footer {
  background: var(--footer-bg); /* rgb(80,100,15) */
  color: #fff;
  text-align: center;
  padding: 12px;
  margin-top: 20px;
  border-radius: 6px;
  font-size: .95rem;
}

footer a {
  color: #fff;
  text-decoration: underline;
  font-weight: bold;
}
footer a:hover { color: var(--accent-2); }

/* ==========================
   Accessibility helpers
   ========================== */
/* Make focus outlines visible for keyboard users */
a:focus, button:focus, input:focus, textarea:focus {
  outline: 3px dashed var(--focus-color);
  outline-offset: 3px;
  border-radius: 6px;
}


/* ==========================
   Responsive / small screens
   ========================== */
@media (max-width:700px){
  :root { --max-width: 58ch; }
  img.avatar { width:120px; height:120px; }
  header { padding: 14px; }
  nav a { padding: 6px 12px; margin: 4px 4px; font-size: .9rem; }
  section { padding: 14px; }
  body { padding: 12px; }
}

/* Larger screens tweaks */
@media (min-width:900px){
  main { padding: 0; }
  section { padding: 28px; }
}

/* Image Styling to meet assignment requirements */
.avatar, .footer-img {
  width: 250px;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 4px solid var(--accent);
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  display: block;
  transition: transform 0.2s ease-in-out;
}

.avatar:hover, .footer-img:hover {
  transform: scale(1.03);
}

/* Adds required gradient and visual polish */
section {
  background: linear-gradient(135deg, var(--section-bg), var(--primary));
  padding: 15px;
  margin: 15px 0;
  border-radius: var(--radius);
  border-left: 6px solid var(--accent-2);
  box-shadow: 2px 2px 10px rgba(0,0,0,0.15);
  color: white;
}

/*This is an attempt to center my nav icons/links */
#links nav {
  text-align: center;       /* center all links */
  margin-top: 15px;         /* space above links */
  line-height: 2rem;        /* adds vertical breathing room */
}

#links nav a {
  margin: 0 6px;            /* horizontal spacing between links */
  text-decoration: none;
  font-weight: bold;
}

#links nav a:hover {
  text-decoration: underline;
}

/* ===================================
   RESPONSIVE NAVIGATION (fix vertical stacking)
   =================================== */

/* Desktop / tablet: show all items in a row */
nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

/* On large screens, links stay in a row */
nav a {
  display: block;
}

/* ============================
   MOBILE VERSION (max-width 700px)
   - Only show first 4 menu items
   - Keep them horizontal
   ============================ */
@media (max-width: 700px) {

  /* nav container remains flex */
  nav {
    flex-wrap: nowrap;     /* keep everything in a row */
    overflow-x: auto;      /* allow sideways scrolling */
    scrollbar-width: none; /* hide scroll bar (Firefox) */
  }

  nav::-webkit-scrollbar {
    display: none;         /* hide scroll bar (Chrome/Safari) */
  }

  /* hide extra menu items */
  nav a:nth-child(n+5) {
    display: none;
  }
}

/* Max width for phone */
@media (max-width: 700px) {
  img {
    width: 100%;
    height: auto;
  }
}