/* ===== Global Reset ===== */
* {
  box-sizing: border-box;
}

/* ===== Body and General ===== */
body {
   max-width: 1100px;              /* flexible, never wider than 1100px */
   margin: auto;
   padding: 20px;                  
   background-color: #000;
   background-image: url(images/bg4.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   font-family: Arial, Helvetica, sans-serif;
   color: white;
}

header {
   position: relative;
   text-align: center;
   margin-bottom: 0;
}

header img {
   width: 100%;
   max-height: 150px;
   object-fit: cover;
   border-radius: 12px 12px 0 0;
}

header .overlay {
   position: absolute;
   top: 65%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
}

h1 { font-size: 28px; margin: 0; color: rgb(201, 192, 200); }
.tagline { font-size: 16px; margin: 5px 0; color: lightgray; }
h2, h3 { text-align: center; margin-top: 0; color: antiquewhite; }
p { font-size: 18px; line-height: 1.6; }
img { max-width: 100%; height: auto; border-radius: 8px; }

/* ===== Navigation ===== */
nav {
   background-color: rgba(0,0,0,0.7);
   padding: 15px 0;
   border-radius: 0 0 12px 12px;
   text-align: center;
}

nav ul { margin: 0; padding: 0; }
nav li { display: inline; list-style: none; margin: 0 20px; }

nav a {
   color: white;
   background-color: transparent;
   text-decoration: none;
   font-weight: bold;
   font-size: 20px;
   padding: 8px 16px;
   border-radius: 6px;
   transition: all 0.3s ease-in-out;
}

nav a:hover {
   color: #fff;
   background-color: rgb(153, 0, 102);
   box-shadow: 0 0 8px rgba(153, 0, 102, 0.6);
   font-weight: bold;
}

nav a.selected {
   color: white;
   background-color: plum;
   font-weight: bold;
}

hr {
   width: 70%;
   height: 5px;
   background-color: rgb(153, 0, 102);
   border: none;
   margin: 30px auto;
}

aside h2 {
  text-align: right !important;
  font-size: 18px !important;
  color: lightgray !important;
  margin: 20px 0 !important;
}

section div {
  background-color: rgba(0,0,0,0.8);
  padding: 20px;
  border-radius: 12px;
  margin-top: 20px;
}

/* ===== Footer ===== */

/* ===== IDs ===== */
#wrapper { border: 2px solid #444; border-radius: 12px; }
#contact { margin-top: 20px; }

/* ===== Classes ===== */
.important { color: rgb(174,29,68); font-weight: bold; }
.highlight { background-color: rgba(255, 255, 0, 0.3); padding: 2px 4px; border-radius: 4px; }
.quote { font-style: italic; text-align: center; }
.link-blue { color: lightblue; text-decoration: none; }
.contact-link { color: white; text-decoration: none; }
.contact-title { font-size: 20px; font-weight: bold; margin-bottom: 10px; }
footer p.small { font-size: 14px; color: lightgray; }

ul { margin-left: 1.25rem; }
li { margin-bottom: 6px; }

/* ===== ABBR ===== */
abbr {
   border-bottom: 1px dotted lightgray;
   cursor: help;
   font-style: italic;
   color: plum;
}

/* ===== Utility ===== */
.center-text {
  text-align: center;
  font-family: Arial, sans-serif;
  color: antiquewhite;  /* unified with h2, h3, figcaption */
}

/* ===== Transparent backgrounds for index page content ===== */
main > div {
  background-color: rgba(0,0,0,0.8);
  padding: 20px;
  border-radius: 12px;
  margin-top: 20px;
}

/* ===== Transparent block for Portfolio headings ===== */
.content-block {
  background-color: rgba(0,0,0,0.8);
  padding: 20px;
  border-radius: 12px;
  margin-top: 20px;
  text-align: center;
}

/* ===== LinkedIn Certificate Image (inline with text) ===== */
.certificate-img {
  vertical-align: middle;
  margin-right: 8px;
  height: 40px;
}

/* ===== Social Aside (LinkedIn section only) ===== */

/* ===== LinkedIn Certificate Image Hover Effect ===== */
.certificate-img:hover {
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.7);
  transition: all 0.3s ease-in-out;
}

/* ===== LinkedIn Link Hover ===== */
#social a:hover {
  color: #0077b5; /* LinkedIn blue */
  text-decoration: underline;
}

/* ===== Social Block Styling ===== */

/* ===== Social Links Styling ===== */
#social a {
  color: white;
  text-decoration: none;
  transition: color 0.3s ease;
}

#social a:hover {
  color: #0077b5;
  text-decoration: underline;
}

/* ===== Footer Position Fix ===== */
footer {
  clear: both;   /* makes sure it drops below sidebars/asides */
  background-color: rgba(0,0,0,0.8);
  padding: 20px;
  border-radius: 12px;
  margin-top: 20px;
  text-align: center;
}

/* ===== Headshot Styling ===== */
.headshot {
  display: block;
  margin: 20px auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid white;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/* ===== Footer Logo ===== */
.footer-logo {
  width: 80px;
  height: auto;
  margin-top: 10px;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.footer-logo:hover {
  transform: scale(1.1);
}

/* ===== Social Block Full Width ===== */
#social {
  display: block;
  width: 100%;
  text-align: center;
  background-color: rgba(0,0,0,0.6);
  padding: 20px;
  border-radius: 12px;
  margin: 20px auto;
  font-size: 16px;
}

/* ===== Resume Sidebar Links ===== */
#sidebar a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 18px;
  transition: color 0.3s ease;
}

#sidebar a:hover {
  color: plum;
  text-decoration: underline;
}

/* ===== Resume Sidebar Links (Full Column) ===== */
#sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#sidebar li {
  margin: 8px 0;
}

#sidebar a {
  display: block;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 22px;
  transition: all 0.3s ease;
  border-radius: 6px;
}

/* ===== Resume Content Transparent Background ===== */
main > section > div {
  background-color: rgba(0,0,0,0.8);
  padding: 20px;
  border-radius: 12px;
  margin: 20px 0;
  width: auto;
  display: block;
  box-sizing: border-box;
}

/* ===== Footer Logo (Resume page, match Index) ===== */
footer .footer-logo {
  width: 100px;
  height: auto;
  border-radius: 12px;
  display: block;
  margin: 15px auto 0;
  transition: transform 0.3s ease;
}

footer .footer-logo:hover {
  transform: scale(1.1);
}

/* ===== Footer (Match Index) ===== */
footer {
  clear: both;
  background-color: rgba(0,0,0,0.8);
  padding: 20px;
  border-radius: 12px;
  margin-top: 20px;
  text-align: center;
  color: white;
}

footer p.contact-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

footer p.small {
  font-size: 14px;
  color: lightgray;
}

footer a {
  color: white;
  text-decoration: none;
}

footer a:hover {
  color: plum;
  text-decoration: none;
}

/* ===== Resume Contact Card ===== */
#contact-card {
  background-color: rgba(0,0,0,0.8);
  padding: 20px;
  border-radius: 12px;
  margin: 20px auto;
  text-align: center;
}

/* Make <address> clean and readable */
address {
  font-style: normal;
  line-height: 1.6;
  margin: 8px 0 0;
}

/* Style for email link in contact card */
#contact-card a {
  color: white;
  text-decoration: none;
}

#contact-card a:hover {
  color: plum;
  text-decoration: none;
}

/* ===== Resume Contact Card (moved from inline) ===== */
#contact-card {
  background-color: rgba(0,0,0,0.6);
  padding: 8px;
  border-radius: 12px;
  margin: 10px auto;
  text-align: center;
  width: 100%;
  max-width: 1000px;
}

#contact-card h1,
#contact-card address,
#contact-card p,
#contact-card img {
  margin: 4px 0;
}

#contact-card img.headshot {
  display: block;
  margin: 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

/* ===== Responsive Nav (mobile-first) ===== */
nav { width:100%; text-align:center }
nav ul { margin:0; padding:0 }
nav li { list-style:none; display:block; padding:6px 0 }
nav a { display:block; text-decoration:none }

/* Switch to horizontal on wider screens */
@media only screen and (min-width:640px){
  nav li { display:inline; padding:0 18px }
  nav a { display:inline-block; padding:8px 16px }
}

/* Sidebar (match Resume) */
#sidebar ul {
  list-style: square;
  padding-left: 20px;
}

#sidebar li {
  margin-bottom: 8px;
}

/* Remove underline from sidebar links */
#sidebar a {
  color: white;
  text-decoration: none;
}

#sidebar a:hover {
  color: plum;
  text-decoration: none;
}

/* ===== Transcript-specific styles ===== */

/* Courses use square bullets */
.courses-list {
  list-style: square;
  padding-left: 20px;
}

/* Recommenders use pointer.png image instead of bullets */
.recommenders-list {
  list-style-image: url("images/pointer.png");
  padding-left: 25px;
}

/* References use lower-roman numerals */
.references-list {
  list-style-type: lower-roman;
  padding-left: 25px;
}

/* GPA box */
.gpa-note {
  width: 80%;
  padding: 12px;
  border: 2px solid #666;
  border-radius: 8px;
  font-size: 1.1em;
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

/* Special characters styling */
.symbol {
  color: purple;
  font-weight: bold;
  font-size: 1.3em;
}

/* ===== Portfolio Grid (Responsive) ===== */
#figureContainer {
  text-align: center;
  margin: 20px auto;
}

.portfolio-figure {
  display: inline-block;
  width: 240px;
  margin: 5px;
  background-color: rgba(0,0,0,0.6);
  border-radius: 12px;
  padding: 10px;
  box-sizing: border-box;
  vertical-align: top;
}

.portfolio-figure img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.portfolio-figure figcaption {
  margin-top: 8px;
  font-size: 16px;
  color: antiquewhite;
}

/* On narrow screens stack as one column */
@media only screen and (max-width: 640px){
  .portfolio-figure {
    width: 90%;
    display: block;
    margin: 10px auto;
  }
}

/* ===== Resume Page Two-Column Layout with Flexbox ===== */
main {
  display: flex;
  align-items: flex-start;
  border: 2px solid #444;
  border-radius: 12px;
  margin-top: 20px;
}

#sidebar {
  width: 25%;
  text-align: right;
  padding: 14px;
  border-right: 2px solid #666;
  background-color: rgba(0,0,0,0.5);
  border-radius: 12px 0 0 12px;
}

#sidebar + section {
  flex: 1;
  padding: 14px;
}

/* ===== Responsive Resume Layout (Mobile) ===== */
@media only screen and (max-width: 768px) {
  main {
    flex-direction: column;
  }

  #sidebar {
    width: 100%;
    text-align: center;
    border-right: none;
    border-radius: 12px 12px 0 0;
    margin-bottom: 15px;
  }

  #sidebar + section {
    width: 100%;
    border-radius: 0 0 12px 12px;
  }
}

/* ===== Newsletter: layout + look to match other pages ===== */

/* Turn off resume flex layout on this page AND on media page */
body.newsletter main,
body.media main {
  display: block;
  border: 2px solid #444;
  border-radius: 12px;
  margin-top: 20px;
  padding-bottom: 20px;
}

/* Reuse your transparent content blocks */
body.newsletter .content-block {
  background-color: rgba(0,0,0,0.8);
  padding: 20px;
  border-radius: 12px;
  margin-top: 20px;
}

/* Center the page headings (same as other pages) */
body.newsletter h1.center-text,
body.newsletter h2.center-text {
  text-align: center;
}

/* Replace inline <hr> with a class */
.rule {
  width: 80%;
  border: 0;
  border-top: 3px solid plum;
  border-radius: 6px;
  margin: 20px auto;
}

/* Full justify paragraphs */
.justify { text-align: justify; }

/* Blockquote styling + enlarged first letter (pseudo-element) */
blockquote {
  background-color: rgba(255,255,255,0.08);
  border-left: 4px solid plum;
  padding: 16px 24px;
  margin: 24px auto;
  border-radius: 10px;
  color: #f5f5f5;
}

blockquote:first-letter {
  font-size: 1.8em;
  font-weight: bold;
  color: plum;
}

/* Infobar (inverse banner) */
.infobar {
  background-color: rgb(153, 0, 102);
  color: white;
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  font-weight: bold;
  margin: 25px auto;
  width: 90%;
  box-shadow: 0 0 8px rgba(153,0,102,0.5);
}

/* Special boxed section with border */
.box {
  border: 2px solid plum;
  border-radius: 10px;
  padding: 16px 24px;
  background-color: rgba(255,255,255,0.05);
  margin: 30px auto;
  width: 90%;
  box-shadow: 0 0 10px rgba(255,255,255,0.1);
}

/* Custom bullet image for highlights list */
.points {
  list-style-image: url('images/pointer.png');
  padding-left: 28px;
}

/* Newsletter figures – match portfolio image size and layout */
figure.media {
  display: inline-block;
  width: 240px;
  margin: 5px;
  background-color: rgba(0,0,0,0.6);
  border-radius: 12px;
  padding: 10px;
  box-sizing: border-box;
  vertical-align: top;
  text-align: center;
}

figure.media img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

figure.media figcaption {
  margin-top: 8px;
  font-size: 16px;
  color: antiquewhite;
}

/* Stack as one column on narrow screens */
@media only screen and (max-width: 640px) {
  figure.media {
    width: 90%;
    display: block;
    margin: 10px auto;
  }
}

figure.media figcaption { text-align:center; color: antiquewhite; margin-top: 6px; }

/* Subtle heading glow to elevate the newsletter titles */
body.newsletter h1, body.newsletter h2 {
  text-shadow: 0 0 8px rgba(153,0,102,0.4);
}

/* =================== CONTACT PAGE =================== */

/* Contact page: use block layout  */
body.contact main {
  display: block;
  border: 2px solid #444;
  border-radius: 12px;
  margin-top: 20px;
  padding: 20px;
  background-color: rgba(0,0,0,0.8);
}

/* Contact table styling */
.contact-table {
  width: 90%;
  max-width: 700px;
  margin: 10px auto 20px auto;
  border: 4px solid #003399;
  border-collapse: collapse;
  background-color: rgba(0,0,0,0.7);
}

.contact-table th {
  text-align: center;
  font-size: 1.3rem;
  padding: 12px 10px;
  background-color: plum;
  color: #111;
  border-bottom: 3px solid #003399;
}

.contact-table td {
  padding: 10px 12px;
  border-top: 1px solid #666;
  vertical-align: middle;
  color: #fff;
  font-size: 1rem;
}

/* Right-justify labels in column 1 */
.contact-table .label {
  text-align: right;
  width: 200px;
  white-space: nowrap;
  color: #ddd;
}

/* Required asterisk style */
.required {
  color: red;
  font-weight: bold;
}

/* Light field background for readability */
.contact-table td:not(.label) {
  background-color: rgba(255,255,255,0.06);
  border-left: 1px solid #666;
}

/* A11Y utility: hide from sighted users but keep for screen readers */
.visually-hidden{
  position:absolute !important;
  height:1px; width:1px;
  overflow:hidden; clip:rect(1px,1px,1px,1px);
  white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* Keyboard focus ring for nav links */
nav a:focus {
  outline: 2px solid plum;
  outline-offset: 2px;
}

/* Force nav links on one line */
nav ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 12px;
}

nav a {
  padding: 4px 10px;
  white-space: nowrap;
}

/* Right-align contact page label column */
.contact-table .label-cell {
  text-align: right;
  width: 200px;
  white-space: nowrap;
  color: #ddd;
}

/* Keep the navigation menu on one line on desktop */
nav ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 12px;
}
nav a {
  white-space: nowrap;
}

/* === Contact Panel Transparent Box === */
.contact-panel {
  background-color: rgba(0,0,0,0.3);
  padding: 20px;
  border-radius: 12px;
  margin: 20px auto;
  width: 90%;
  max-width: 750px;
}

/* Make overlay styling apply to the id you used in HTML */
header #overlay {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* Apply the same selected look when you use .active in HTML */
nav a.active {
  color: white;
  background-color: plum;
  font-weight: bold;
}
nav a.active::after { width: 100%; }

/* Main content panel for inner pages (portfolio, media, etc.) */
.content-panel {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 25px;
  border-radius: 12px;
  margin: 20px auto;
  max-width: 900px;
  box-shadow: 0 0 10px rgba(0,0,0,0.25);
}

/* Slideshow demo images (if used elsewhere) */
.slideshow-container img {
  width: 50px;
  height: auto;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
}

/* ---- JS Page / Media Page Fade Slideshow Styling ---- */

/* Container */
.fade-show {
  width: min(600px, 90%);
  aspect-ratio: 16/9;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

/* Slides */
.fade-show .fs-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

/* Active slide */
.fade-show .fs-slide.fs-active {
  opacity: 1;
}

/* Slideshow controls */
.slideshow-controls {
  display: flex;
  gap: .5rem;
  justify-content: center;
  margin: .5rem 0;
}

/* JS/Media ordered list wrapper */
.js-list {
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem;
}

.demo-block {
  margin-bottom: 1.75rem;
}

/* Quote calculator table (used on JS page) */
.quote-panel {
  padding: 15px;
  max-width: 760px;
  margin: 0 auto;
}

.quote-panel table {
  width: 100%;
  border-collapse: collapse;
}

.quote-panel input[type="text"],
.quote-panel input[type="number"] {
  width: 100%;
  text-align: right;
  padding: .25rem;
}

/* ===== Media Page Video Player ===== */
.media-video {
  width: 200px;
  max-width: 100%;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
}

/* ===== MEDIA PAGE Z-INDEX STACK (#8) ===== */
.z-stack-box{
  position: relative;
  width: 420px;
  height: 320px;
  margin: 10px auto;
  border-radius: 12px;
  overflow: hidden;
  background-color: rgba(0,0,0,.4);
}

/* Base image fills container */
.z-stack-box .z-base{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  z-index: 1;
}

/* Top image centered and rotated slightly */
.z-stack-box .z-top{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  height: auto;
  border-radius: 8px;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}

/* ===== Hotspot Links Section (Index Page) ===== */
#hotspot-links {
   margin: 20px auto;
   text-align: center;
}

#hotspot-links .hotspot-image {
   width: 220px;
   height: auto;
   display: block;
   margin: 10px auto;
}

#hotspot-links p.small {
   font-size: 14px;
   color: lightgray;
}