/* Base styles — single external CSS file per assignment requirements */
:root{
  --bg:#f7f9fc;
  --text:#232627;
  --brand:#0a3d62;
  --brand-2:#145a86;
  --panel:#ffffff;
  --muted:#5b6770;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
}

.skip-link{
  position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
  position:static;width:auto;height:auto;padding:.5rem 1rem;background:#ffd54f;color:#000;display:inline-block;
}

.container{max-width:1000px;margin:0 auto;padding:1rem;}

.site-header{
  background:var(--brand);
  color:#fff;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.site-title{font-size:1.25rem;margin:0}
.site-title a{color:#fff;text-decoration:none}

.site-nav .menu{list-style:none;margin:0;padding:0;display:flex;gap:1rem;flex-wrap:wrap}
.site-nav .menu a{
  color:#fff;text-decoration:none;padding:.5rem .75rem;border-radius:.5rem;
}
.site-nav .menu a:hover,
.site-nav .menu a[aria-current="page"]{
  background:var(--brand-2);
}

.lead{
  background:var(--panel);
  margin:1.5rem 0;
  padding:1.5rem;
  border-radius:1rem;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:1rem;
}
.lead-figure img{max-width:100%;height:auto;border-radius:.75rem;border:1px solid #e6eef5}
.lead-figure figcaption{font-size:.9rem;color:var(--muted);margin-top:.5rem}

.features{padding-left:1.25rem}

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1rem;
}
.card{
  background:var(--panel);
  border:1px solid #e6eef5;
  border-radius:.75rem;
  padding:1rem;
}
.card h3{margin-top:0}
.card a{text-decoration:none;color:var(--brand)}

.assignment-list{padding-left:1.25rem}

.site-footer{
  margin-top:2rem;
  background:#101214;
  color:#cbd5df;
  text-align:center;
  padding:1rem;
}

/* Responsive tweaks */
@media (max-width: 800px){
  .lead{grid-template-columns:1fr}
}

/* Focus indicators for accessibility */
a:focus, button:focus, input:focus{
  outline:3px solid #ffd54f; outline-offset:2px;
}

/* Dropdown submenu styles */
.menu li {
  position: relative;
}

.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--brand);
  border-radius: 0 0 .5rem .5rem;
  min-width: 200px;
}

.submenu li a {
  display: block;
  padding: .5rem .75rem;
  color: white;
}

.submenu li a:hover {
  background: var(--brand-2);
}

.menu li:hover > .submenu {
  display: block;
}


/* === Dropdown menu (paste at end of style.css) === */
.site-nav .menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; flex-wrap: wrap; }
.site-nav .menu > li { position: relative; } /* parent for absolute submenu */
.site-nav .menu a { display: block; padding: .5rem .75rem; text-decoration: none; color: #fff; border-radius: .5rem; }
.site-nav .menu a:hover,
.site-nav .menu a[aria-current="page"] { background: var(--brand-2); }

/* submenu (hidden by default) */
.site-nav .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  margin: 0;
  padding: .25rem 0;
  background: var(--brand);
  border: 1px solid #0e4974;
  border-radius: 0 0 .5rem .5rem;
  min-width: 220px;
  z-index: 1000;
}
.site-nav .submenu li a { white-space: nowrap; padding: .5rem .75rem; }

/* show submenu on hover or keyboard focus */
.site-nav .menu li:hover > .submenu,
.site-nav .menu li:focus-within > .submenu { display: block; }


/* Make tagline sit under the title */
.site-title,
.tagline {
  display: block;
  margin: 0;
}

.tagline {
  font-size: 0.95rem;
  color: #d7e6f7;
  opacity: 0.95;
}

/* Slightly smaller tagline on phones */
@media (max-width: 640px) {
  .tagline {
    font-size: 0.85rem;
  }
}





/* === Header alignment === */
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.site-title{ margin:0; font-size:1.25rem; }
.site-title a{ color:#fff; text-decoration:none; }

/* === Top-level menu layout === */
.site-nav .menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}
.site-nav .menu > li{ position:relative; } /* needed for absolute submenu */
.site-nav .menu a{
  display:block;
  padding:.5rem .75rem;
  color:#fff;
  text-decoration:none;
  border-radius:.5rem;
}
.site-nav .menu a:hover,
.site-nav .menu a[aria-current="page"]{
  background:rgba(255,255,255,.15);
}

/* === Dropdown submenu === */
.site-nav .submenu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:240px;
  list-style:none;
  margin:0;
  padding:.25rem 0;
  background:#0a3d62;          /* matches your theme */
  border:1px solid #0e4974;
  border-radius:0 0 .5rem .5rem;
  z-index:1000;
}
.site-nav .submenu li a{
  white-space:nowrap;
  padding:.5rem .75rem;
}

/* Show submenu on hover and keyboard focus */
.site-nav .menu li:hover > .submenu,
.site-nav .menu li:focus-within > .submenu{
  display:block;
}

/* Optional: little caret arrow after items that have a submenu */
.site-nav .menu > li > a[aria-haspopup="true"]::after{
  content:" ▾";
  font-size:.8em;
}


/* Keep header content aligned on one line */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;  /* prevent wrapping to second line */
}

/* Let the nav shrink if needed */
.site-nav {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

/* Make sure menu stays in one row */
.site-nav .menu {
  display: flex;
  flex-wrap: nowrap; /* no wrapping to next line */
  gap: 1rem;
}


/* Keep site title + tagline stacked */
.site-branding {
  display: flex;
  flex-direction: column;
}

.site-title {
  margin: 0;
}

.tagline {
  margin: 0;
  font-size: 0.95rem;
  color: #d7e6f7;
  opacity: 0.95;
}

/* Smaller tagline on mobile */
@media (max-width: 640px) {
  .tagline {
    font-size: 0.85rem;
  }
}

/* Keep title + tagline stacked on the left */
.site-branding {
  display: flex;
  flex-direction: column;  /* stacks title over tagline */
}

.site-title { margin: 0; }
.site-title a { color: #fff; text-decoration: none; }

.tagline {
  margin: 0;
  font-size: 0.95rem;
  color: #d7e6f7;
  opacity: 0.95;
}

/* Ensure header stays one line (branding left, menu right) */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
}

/* Keep the menu on one row */
.site-nav .menu {
  display: flex;
  gap: 1rem;
  flex-wrap: nowrap;
}



/* Stack title + tagline vertically */
.site-branding {
  display: flex;
  flex-direction: column;
}
.site-title { margin: 0; }
.site-title a { color: #fff; text-decoration: none; }

.tagline {
  margin: 0;
  font-size: 0.95rem;
  color: #d7e6f7;
  opacity: 0.95;
}

/* Keep header in a single row: branding left, menu right */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
}

/* Ensure the menu stays on one line */
.site-nav { margin-left: auto; }
.site-nav .menu {
  display: flex;
  gap: 1rem;
  flex-wrap: nowrap;
}


/* Projectile Calculator Styles */
.projectile-calculator {
  background: var(--panel);
  padding: 1.5rem;
  border-radius: 1rem;
  margin: 1.5rem 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.projectile-calculator h2 {
  margin-top: 0;
  color: var(--brand);
}

.calculator-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.calculator-form .form-group {
  display: flex;
  flex-direction: column;
}

.calculator-form label {
  margin-bottom: 0.25rem;
  font-weight: 600;
  color: var(--text);
}

.calculator-form input {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  font-size: 1rem;
}

.calculator-form button {
  padding: 0.5rem 1rem;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s;
}

.calculator-form button:hover {
  background: var(--brand-2);
}

#results {
  margin-top: 1rem;
  font-weight: 600;
}

#chart-container {
  margin-top: 2rem;
  width: 100%;
  height: 400px;
}

#chart-container {
  height: 400px;
  margin-top: 1rem;
}


/* Modern buttons for Assignment 5 */
section.spirograph .buttons button {
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 16px;
  font-weight: bold;
  padding: 10px 20px;
  margin: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

section.spirograph .buttons button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.25);
}

section.spirograph .buttons button:active {
  transform: translateY(1px);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}




/* Modern buttons for Assignment 5 — matching site theme */
section.spirograph .buttons button {
  background: linear-gradient(135deg, #333 0%, #555 100%); /* Dark gray gradient */
  border: none;
  border-radius: 8px;
  color: #fff; /* White text to contrast the dark background */
  font-size: 16px;
  font-weight: bold;
  padding: 10px 20px;
  margin: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

section.spirograph .buttons button:hover {
  background: linear-gradient(135deg, #555 0%, #777 100%); /* Lighter gradient on hover */
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.4);
}

section.spirograph .buttons button:active {
  transform: translateY(1px);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
}



/* Modern, professional buttons for Assignment 5 */
section.spirograph .buttons button {
  background: linear-gradient(135deg, #1a73e8 0%, #4dabf7 100%); /* Blue gradient */
  border: none;
  border-radius: 8px;
  color: #fff; /* White text for contrast */
  font-size: 16px;
  font-weight: 600;
  padding: 10px 22px;
  margin: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

section.spirograph .buttons button:hover {
  background: linear-gradient(135deg, #4dabf7 0%, #1a73e8 100%); /* Hover: gradient reversed */
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

section.spirograph .buttons button:active {
  transform: translateY(1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}



/* Navy-blue themed buttons for Assignment 5 */
section.spirograph .buttons button {
  background: linear-gradient(135deg, #0a1f44 0%, #1a2f5a 100%); /* Dark navy gradient */
  border: none;
  border-radius: 8px;
  color: #fff; /* White text */
  font-size: 16px;
  font-weight: 600;
  padding: 10px 22px;
  margin: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

section.spirograph .buttons button:hover {
  background: linear-gradient(135deg, #1a2f5a 0%, #0a1f44 100%); /* Hover: reverse gradient */
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

section.spirograph .buttons button:active {
  transform: translateY(1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}



table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

th, td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
}

th {
  background-color: #0a2342; /* Navy blue header */
  color: #ffffff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

tr:nth-child(even) {
  background-color: #f8f9fb;
}

tr:hover {
  background-color: #eaf1ff;
}

td {
  color: #333333;
  font-size: 0.95rem;
}

.drop img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* keeps card proportion */
  border-radius: 8px;
}




/* Add to your existing style.css or inside a <style> tag */
header.site-header {
  position: relative;  /* ensure stacking works */
  z-index: 1000;       /* higher than any game element */
}

.site-nav ul.menu,
.site-nav ul.submenu {
  position: relative;  /* keeps submenus on top */
  z-index: 1001;
}