/*
Grey + Creative — FULL STYLESHEET (Bootstrap-safe)

Name: Cole Jason Fetterman
Student ID: 9 9246 2023
Course: IST 256 – Programming for the Web
Assignment: LIVE Portfolio Page + Bootstrap Activities
Submission Date: February 17, 2026

- Angled hero header + headline
- Left rail navigation on desktop (sticky)
- Panels have a “spine” timeline feel
- Aside is sticky on desktop
- Grey theme, all text light
- Bootstrap-friendly: does NOT override Bootstrap .btn
*/

/* =========================================================
   1) Reset / Normalization
   ========================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body { margin: 0; }

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   2) Design System (CSS Custom Properties)
   ========================================================= */
:root{
  --bg-0: #0e0e10;
  --bg-1: #151518;
  --bg-2: #1f2024;

  --text: #f5f6f7;
  --muted: rgba(245, 246, 247, 0.78);

  --accent: #c9cdd3;

  --surface: rgba(255,255,255,0.05);
  --surface-2: rgba(255,255,255,0.03);
  --border: rgba(255,255,255,0.12);
  --border-soft: rgba(255,255,255,0.08);

  --ff-base: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ff-mono: "Fira Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-xs: 0.88rem;
  --fs-sm: 0.96rem;
  --fs-md: 1.00rem;
  --fs-lg: 1.18rem;
  --fs-xl: 1.70rem;
  --fs-hero: clamp(2.0rem, 3.2vw, 3.0rem);

  --fw-regular: 400;
  --fw-medium: 650;
  --fw-bold: 800;

  --sp-1: 0.6rem;
  --sp-2: 0.9rem;
  --sp-3: 1.35rem;
  --sp-4: 2.0rem;
  --sp-5: 2.8rem;
  --sp-6: 3.8rem;

  --r-md: 22px;
  --r-lg: 32px;
  --r-round: 999px;

  --shadow-1: 0 18px 60px rgba(0,0,0,0.45);
  --shadow-2: 0 30px 120px rgba(0,0,0,0.55);

  --t-fast: 140ms;
  --t-med: 240ms;
  --ease: cubic-bezier(.2,.8,.2,1);

  --maxw: 1280px;
  --z-skip: 50;

  /* FIX: anchor offset so sections aren't hidden under sticky nav */
  --scroll-offset: 90px;
}

/* =========================================================
   3) Base Elements
   ========================================================= */
body{
  font-family: var(--ff-base);
  color: var(--text);
  line-height: 1.55;

  background:
    radial-gradient(900px 700px at 15% 10%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(800px 600px at 85% 25%, rgba(255,255,255,0.04), transparent 60%),
    radial-gradient(900px 700px at 60% 90%, rgba(255,255,255,0.035), transparent 65%),
    linear-gradient(135deg, var(--bg-2) 0%, var(--bg-0) 60%, var(--bg-1) 100%);
}

h1, h2, h3{
  line-height: 1.1;
  margin: 0 0 var(--sp-2);
  letter-spacing: -0.02em;
}
h2{ font-size: var(--fs-xl); font-weight: var(--fw-bold); }
h3{ font-size: var(--fs-lg); font-weight: var(--fw-medium); }

p{ margin: 0 0 var(--sp-3); font-size: var(--fs-md); }

a{
  color: var(--text);
  text-decoration-color: rgba(255,255,255,0.45);
  text-underline-offset: 6px;
  transition:
    opacity var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease),
    text-decoration-color var(--t-fast) var(--ease);
}
a:hover{
  opacity: 0.95;
  text-decoration-color: rgba(255,255,255,0.78);
}
a:active{ transform: translateY(1px); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: 3px solid rgba(201,205,211,0.85);
  outline-offset: 3px;
}

a[target="_blank"]::after{
  content: " ↗";
  font-size: 0.9em;
  opacity: 0.85;
}

/* =========================================================
   4) Layout (Grid + Areas)
   ========================================================= */
.site{
  width: min(var(--maxw), calc(100% - 2 * var(--sp-4)));
  margin: 0 auto;
  padding: var(--sp-6) 0 var(--sp-6);

  display: grid;
  gap: var(--sp-5);

  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "nav"
    "main"
    "aside"
    "footer";
}

.site-header{ grid-area: header; }
.site-nav{ grid-area: nav; }
.site-main{ grid-area: main; }
.site-aside{ grid-area: aside; }
.site-footer{ grid-area: footer; }

.skip-link{
  position: absolute;
  left: -999px;
  top: 10px;
  z-index: var(--z-skip);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-round);
  background: rgba(0,0,0,0.75);
  border: 1px solid var(--border);
}
.skip-link:focus{ left: 12px; }

/* FIX: anchor links not hidden under sticky navbar */
.site-main .panel[id]{
  scroll-margin-top: var(--scroll-offset);
}

/* =========================================================
   5) Header (Angled Hero)
   ========================================================= */
.site-header{
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  border: 1px solid rgba(255,255,255,0.10);

  background:
    radial-gradient(900px 500px at 20% 20%, rgba(255,255,255,0.08), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}
.site-header::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, transparent 0 62%, rgba(0,0,0,0.22) 62% 100%);
  pointer-events:none;
}
.site-header::before{
  content:"";
  position:absolute;
  inset:-35%;
  background: radial-gradient(circle at 30% 25%, rgba(201,205,211,0.18), transparent 60%);
  animation: floatGlow 12s var(--ease) infinite alternate;
  pointer-events:none;
}

.header-inner{
  position: relative;
  padding: var(--sp-5) var(--sp-4);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  align-items: center;
}

.site-title{
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
  letter-spacing: -0.04em;
  margin: 0 0 var(--sp-2);
}

.site-lead{
  font-size: var(--fs-lg);
  max-width: 70ch;
  opacity: 0.98;
}

.profile-photo{
  width: min(320px, 100%);
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
  object-fit: cover;

  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 28px 90px rgba(0,0,0,0.55);

  outline: 1px solid rgba(255,255,255,0.08);
  outline-offset: 8px;
}

/* =========================================================
   6) Navbar (Bootstrap-friendly tweaks)
   ========================================================= */
.site-nav{
  background: transparent;
  border: none;
  box-shadow: none;
}

/* FIX: nav link readability */
.site-nav .nav-link{
  color: rgba(245, 246, 247, 0.88);
}
.site-nav .nav-link:hover,
.site-nav .nav-link:focus-visible{
  color: var(--text);
}
.site-nav .navbar-brand{
  color: var(--text);
}

/* Active nav link state (JS toggles this) */
.nav-link.is-active{
  opacity: 1;
  text-decoration-color: rgba(255,255,255,0.85);
}

/* =========================================================
   7) Panels / Components
   ========================================================= */
.panel{
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-soft);
  background: linear-gradient(135deg, var(--surface), var(--surface-2));
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: var(--sp-4);
  animation: popIn 280ms var(--ease) both;
}

.panel::before{
  content:"";
  position:absolute;
  left: -18px;
  top: var(--sp-4);
  width: 6px;
  height: 55%;
  border-radius: var(--r-round);
  background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0.05));
  opacity: 0.9;
}

.panel + .panel{ margin-top: var(--sp-5); }

.panel-title::after{
  content:"";
  display:block;
  width: 140px;
  height: 1px;
  margin-top: var(--sp-2);
  background: rgba(255,255,255,0.55);
  opacity: 0.95;
}

/* Facts */
.facts{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  margin: var(--sp-4) 0 var(--sp-4);
}
.facts dt{ font-weight: var(--fw-medium); }
.facts dd{ margin: 0 0 var(--sp-2); color: var(--muted); }

/* Pills */
.pill-list{
  list-style:none;
  padding:0;
  margin:0 0 var(--sp-3);
  display:flex;
  flex-wrap:wrap;
  gap: var(--sp-2);
}
.pill{
  padding: 0.55rem 0.95rem;
  border-radius: var(--r-round);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.12);
}

/* Media card */
.media-card{
  margin: 0 0 var(--sp-4);
  border-radius: var(--r-lg);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
}
.media-img{ width:100%; }
.media-caption{
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* Cards grid */
.cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.card{
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  padding: var(--sp-4);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.card:hover{
  transform: translateY(-10px) rotate(-0.15deg);
  box-shadow: var(--shadow-2);
  border-color: rgba(255,255,255,0.20);
}

/* FIX: Project card readability */
.cards .card,
.cards .card h3,
.cards .card p,
.cards .card li{
  color: var(--text);
}
.cards .card p{
  color: rgba(245, 246, 247, 0.88);
}

/* =========================================================
   8) Tables
   ========================================================= */
.table-wrap{
  overflow-x:auto;
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.02);
}

.data-table{
  width:100%;
  border-collapse: collapse;
  min-width: 560px;
  background: transparent;
}

.data-table caption{
  text-align:left;
  padding: var(--sp-3) var(--sp-4);
  font-weight: var(--fw-bold);
}

.data-table th,
.data-table td{
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid rgba(255,255,255,0.08);
  vertical-align: top;
}

.data-table tbody tr:nth-child(odd){ background: rgba(255,255,255,0.02); }
.data-table tbody tr:hover{ background: rgba(255,255,255,0.04); }
.data-table td{ color: var(--muted); }

/* =========================================================
   9) Forms (Bootstrap controls themed darker)
   ========================================================= */
.contact-form{ margin-top: var(--sp-3); }

.form-fieldset{
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  background: rgba(255,255,255,0.03);
}

.form-legend{
  padding: 0 var(--sp-2);
  font-weight: var(--fw-bold);
}

.form-label{
  display:block;
  margin-bottom: var(--sp-1);
  font-weight: var(--fw-medium);
}

.form-status{
  margin-top: var(--sp-3);
  color: var(--muted);
}

/* Theme Bootstrap form controls */
.form-control,
.form-select{
  background-color: rgba(0,0,0,0.28) !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,0.16) !important;
}
.form-control::placeholder{ color: rgba(255,255,255,0.55) !important; }
.form-control:focus,
.form-select:focus{
  box-shadow: none !important;
  border-color: rgba(255,255,255,0.36) !important;
}

/* Accordion visuals */
.accordion-button{
  border: none !important;
  box-shadow: none !important;
}
.accordion-button::after{
  filter: invert(1);
  opacity: 0.85;
}
.accordion-body{
  color: var(--text);
}

/* =========================================================
   10) Aside + Footer
   ========================================================= */
.aside-list{
  margin: var(--sp-3) 0 0;
  padding-left: 1.25rem;
}
.aside-list li{
  margin-bottom: var(--sp-2);
  color: var(--muted);
}

.site-footer{
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255,255,255,0.10);
  color: var(--muted);
}

.contact-line{ color: var(--muted); }

/* =========================================================
   11) Utilities
   ========================================================= */
.sep{ margin: 0 var(--sp-2); color: rgba(255,255,255,0.55); }

/* =========================================================
   12) Animations
   ========================================================= */
@keyframes floatGlow{
  0%{ transform: translateY(0); opacity: 0.70; }
  100%{ transform: translateY(14px); opacity: 0.95; }
}

@keyframes popIn{
  0%{ transform: translateY(12px); opacity: 0; }
  100%{ transform: translateY(0); opacity: 1; }
}

/* =========================================================
   13) Responsive Breakpoints
   ========================================================= */
@media (min-width: 768px){
  .header-inner{
    grid-template-columns: 1.35fr 0.65fr;
    align-items:center;
    gap: var(--sp-5);
  }

  .facts{
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-5);
  }
}

@media (min-width: 1024px){
  :root{ --scroll-offset: 110px; }

  .site{
    grid-template-columns: 240px 1fr 320px;
    grid-template-areas:
      "header header header"
      "nav main aside"
      "footer footer footer";
    gap: var(--sp-5);
    align-items:start;
  }

  .site-nav{
    position: sticky;
    top: var(--sp-4);
    align-self: start;
  }

  .site-aside{
    position: sticky;
    top: var(--sp-4);
    align-self: start;
  }
}

@media (min-width: 1200px){
  .profile-photo{ width: 340px; }
}

/* =========================================================
   14) Reduced Motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* Back-to-top button (JS will create if missing) */
.back-to-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;

  display: none;
  padding: 0.65rem 0.95rem;
  border-radius: var(--r-round);
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.55);
  color: var(--text);
  cursor: pointer;

  box-shadow: var(--shadow-1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.back-to-top:hover{ transform: translateY(-1px); }
.back-to-top:active{ transform: translateY(1px); }