/*
  Student Name: Julian Burnley
  Course Section: 12988
  Instructor's Name: Brian Thurber
*/

/* -------------------------------------------------------
   GLOBAL RESET + VARIABLES
-------------------------------------------------------- */
:root {
  --dark-color: gray;
  --light-color: #d4c6c6;
  --accent-color: rgb(105, 100, 100);
  --button-color: hsl(300,100%,50%);
  --shadow-color: #ffcce6;
  --light-color-2: #e2dcdc;
}

*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Skip Navigation Fix */
/* -------------------------------------------------------
   Skip Navigation Accessibility
-------------------------------------------------------- */
/* 1. Initially hide the link */
#skip a {
  position: absolute;
  top: -10000px;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  background-color: var(--accent-color);
  color: var(--light-color);
  padding: 0.5rem 1rem;
  text-decoration: none;
  z-index: 9999;
}

/* Force the skip link to appear on top of everything when focused */
#skip a:focus {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  background-color: yellow !important; /* Changed to yellow for high visibility */
  color: black !important;
  z-index: 99999 !important;
  display: block !important;
  padding: 1rem !important;
  border: 2px solid black !important;
}
/* Navigation list cleanup */
.column.left ul {
  list-style-type: none; /* removes the dots */
  padding-left: 0;       /* removes indentation */
  margin-left: 0;
}

.column.left li {
  margin: 0.5rem 0;      /* adds spacing between links */
}

.column.left a {
  text-decoration: none; /* removes underlines */
  color: purple;         /* keeps your current link color */
  font-weight: 600;
}

.column.left a:hover {
  color: rgb(3, 3, 3);   /* dark hover color for contrast */
}


/* -------------------------------------------------------
   FLOAT LAYOUT STYLES (FALLBACK)
-------------------------------------------------------- */
/* float layout styles */

body {
  height: 100vh;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background-color: var(--light-color);
  color: var(--dark-color);
}

header {
  width: 100vw;
  height: 4em;
  text-align: center;
  background-color: var(--accent-color);
  color: var(--light-color);
  box-shadow: 0 2px 6px var(--shadow-color);
  padding-top: 1rem;
}

/* 1. Add this to ensure the Skip Nav is NOT affected by Flexbox */
header {
  position: relative; /* Allows the absolute skip link to break out of the header if needed */
  min-height: 6em;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 2. Ensure your Skip Nav rule is clean */
#skip a:focus {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important; /* Make it span the top */
  height: auto !important;
  overflow: visible !important;
  background-color: yellow !important;
  color: black !important;
  z-index: 99999 !important;
  display: block !important;
  padding: 1rem !important;
  border: 2px solid black !important;
  text-align: center !important;
}

.column.left {
  float: left;
  width: 10em;
  height: calc(100vh - 11em);
  box-shadow: 2px 0 6px var(--shadow-color);
  padding: 1rem;
}

main {
  float: left;
  width: calc(100vw - 25em);
  padding: 1rem;
}

.column.right {
  float: left;
  width: 15em;
  height: calc(100vh - 11em);
  box-shadow: -2px 0 6px var(--shadow-color);
  padding: 1rem;
}

footer {
  clear: both;
  width: 100vw;
  height: 7em;
  position: relative;
  background-color: var(--dark-color);
  color: var(--light-color);
  box-shadow: 0 -2px 6px var(--shadow-color);
  padding: 1rem;
  display: flex;
  justify-content: center;
  gap: 3rem;
}

.student-card {
  float: left;
}

.student-card:first-of-type {
  margin-left: calc(50% - 15em);
}

/* float layout styles end */


/* -------------------------------------------------------
   MONDRIAN GRID (Lesson 4)
-------------------------------------------------------- */
.image-grid {
  list-style: none;
  display: grid;

  grid-template-columns:
    repeat(5, 1fr)
    repeat(2, 1.2fr)
    0.5fr;

  grid-template-rows:
    11vw
    repeat(5, 13vw)
    11vw
    repeat(2, 6.5vw);
}

.image-grid img {
  height: 100%;
  width: 100%;
  border: 6px solid black;
  object-fit: cover;
}

/* Grid placement rules */
.image-grid :nth-child(1) { grid-column: span 2; }
.image-grid :nth-child(2) { grid-column: span 3; }
.image-grid :nth-child(3) { grid-column: span 2; }
.image-grid :nth-child(4) { grid-row: span 6; }
.image-grid :nth-child(5) { grid-row: span 2; }
.image-grid :nth-child(6) { grid-column: span 4; grid-row: span 4; }
.image-grid :nth-child(7) { grid-column: span 2; grid-row: span 2; }
.image-grid :nth-child(8) { grid-row: span 3; }
.image-grid :nth-child(9) { grid-row: span 2; }
.image-grid :nth-child(10) { grid-row: span 2; }
.image-grid :nth-child(11) { grid-column: span 2; grid-row: span 2; }
.image-grid :nth-child(12) { grid-column: span 2; }
.image-grid :nth-child(13) { grid-column: span 2; }
.image-grid :nth-child(14) { grid-row: span 3; }
.image-grid :nth-child(15) { grid-column: span 2; }
.image-grid :nth-child(16) { grid-column: span 2; grid-row: span 2; }
.image-grid :nth-child(17) { grid-row: span 3; }
.image-grid :nth-child(18) { grid-column: span 2; grid-row: span 2; }
.image-grid :nth-child(19) { grid-column: span 2; }
.image-grid :nth-child(20) { grid-column: span 4; }

/* -------------------------------------------------------
   HEADER + FOOTER (Your original styles preserved)
-------------------------------------------------------- */
header {
  min-height: 6em;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

header h1 {
  margin-top: .5em;
}

footer {
  font-size: .85em;
  padding: 1rem 0;
  width: 100%;
}

/* -------------------------------------------------------
   GRID LAYOUT (FEATURE QUERY)
-------------------------------------------------------- */
@supports (grid-template-columns: 1fr) {

  body {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 10em 1fr 15em;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "header header header"
      "nav main aside"
      "footer footer footer";
  }

 header {
  grid-area: header;
  position: static;
  z-index: auto; /* important */
}

  .column.left {
    grid-area: nav;
    float: none;
    height: auto;
  }

  main {
    grid-area: main;
    float: none;
    width: auto;
  }

  .column.right {
    grid-area: aside;
    float: none;
    height: auto;
  }

  footer {
    grid-area: footer;
    float: none;
    height: auto;
    display: flex;
    justify-content: center;
    gap: 3rem;
  }

  .student-card:first-of-type {
    margin-left: 0;
  }
}