/* =========================================
   1) BASIC RESET / DEFAULTS
   ========================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =========================================
   2) SIDEBAR / PAGE LAYOUT BASICS
   ========================================= */
body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  background-color: #222;
  color: #fff;
  line-height: 1.6;
}

/* Non–iOS pages (slightly darker text) */
body.non-ios {
  color: #ddd;
}

/* SIDEBAR */
.sidebar {
  width: 250px;
  min-height: 100vh;
  background-color: #333;
  float: left;
  padding: 20px;
}

.profile {
  text-align: center;
  margin-bottom: 30px;
}

.profile-pic {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

.name {
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
  margin-top: 10px;
}

.title {
  font-size: 1rem;
  color: #fff;
  font-style: italic;
  margin-top: 5px;
}

/* NAVIGATION */
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #555;
}

nav ul li {
  border-bottom: 1px solid #555;
}

nav ul li a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #ccc;
  transition: background-color 0.3s ease, color 0.3s ease;
  font-size: 0.85rem;
}

nav ul li a:hover,
nav ul li a.active {
  background-color: #444;
  color: #fff;
}

/* MAIN CONTENT AREA */
.content {
  margin-left: 250px;
  padding: 20px;
}

/* HEADINGS (site-wide) */
.content h1 {
  text-align: center;
  font-size: 1.4rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.content p {
  font-size: 0.85rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

/* Updated link color for content area */
.content a {
  color: #ccc; /* More subtle gray that blends better */
  text-decoration: none;
}

.content a:hover {
  color: #fff; /* White on hover */
  text-decoration: underline;
}

/* Home page custom layout tweaks */
.home-page {
  text-align: center;    /* Centers text horizontally */
}

.home-page p {
  font-size: 0.85rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

/* Keeps the home page text centered within a narrower column */
.home-container {
  max-width: 600px;    
  margin: 0 auto;       /* Centers horizontally */
  text-align: center;   /* Centers the text */
}


.portfolio-image {
  text-align: center;
}

.portfolio-image img {
  max-width: 80%; 
  height: auto;
  border: 2px solid #444; 
  border-radius: 8px;    
}


/* =========================================
   3) COLLEGE COURSES PAGE (“amazing” grid)
   ========================================= */
.courses-subheader {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  color: #ccc;
  margin-bottom: 5px;
}

.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.course-card {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 80px;
  border: 2px solid #555;
  border-radius: 8px;
  background-color: #2d2d2d;
  padding: 15px;
  font-size: 0.85rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.course-card:hover {
  background-color: #444;
  transform: translateY(-2px);
}

/* =========================================
   4) EDUCATION PAGE
   ========================================= */
.edu-page{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:calc(100vh - 80px);
}

.edu-page h1{
  color:#fff;
}

/* grid that stacks cards vertically */
.edu-grid{
  display:flex;
  flex-direction:column;
  gap:30px;
  margin-top:20px;
  width:100%;
  max-width:600px;
}

/* individual school card */
.edu-card{
  border:2px solid #555;
  border-radius:8px;
  overflow:hidden;
  position:relative;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
  width:100%;
  text-align:left;
  transition:transform .2s ease, box-shadow .2s ease;
}
.edu-card:hover{
  transform:translateY(-3px);
  box-shadow:0 5px 10px rgba(0,0,0,.5);
}

/* — top strip — */
.edu-top{
  /* ultra‑subtle checkerboard over solid #222 */
  background:
    linear-gradient(135deg,
      rgba(80,80,80,.05)25%,
      transparent        25%,
      transparent        50%,
      rgba(80,80,80,.05)50%,
      rgba(80,80,80,.05)75%,
      transparent        75%,
      transparent),
    #222;
  background-size:12px 12px,100% 100%;
  padding:6px 10px;
  min-height:25px;
}
.edu-top h2{
  margin:0;
  font-size:.95rem;
  font-weight:600;
  color:#fff;
  letter-spacing:.5px;
}

/* divider between top & body */
.edu-divider{
  width:100%;
  height:2px;
  background-color:#555;
}

/* — body — */
.edu-bottom{
  background-color:#2d2d2d;
  padding:16px;
}
.edu-bottom p{
  margin-bottom:.5rem;        /* default vertical spacing */
  font-size:.85rem;
  line-height:1.4;
  color:#ddd;
}

/* specialization line */
.specialization{
  font-size:.85rem;
  color:#ccc;
  margin-top:.3rem;
}

/* city / state line */
.city-state{
  margin-top:.3rem;
  font-size:.8rem;
  font-style:italic;
  color:#bbb;
}

/* degree lines: bright white, keep default spacing */
.edu-bottom p.edu-degree,
.edu-bottom p.edu-degree strong{
  color:#fff !important;
}

/* =========================================
   5) iOS PROJECTS OVERVIEW PAGE
   ========================================= */
.project-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 20px;
}

.project-card {
  width: 560px;
  background-color: #2d2d2d;
  border-radius: 8px;
  overflow: hidden;
  transition: background-color 0.3s ease;
}

.project-card:hover {
  background-color: #444;
}

.project-card a {
  display: flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.image-container {
  width: 300px;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.project-card:hover img {
  transform: scale(1.02);
  filter: brightness(1.1);
}

.project-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 15px;
}

.project-info h2 {
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
  font-weight: 600;
}

.project-info p {
  font-size: 0.75rem;
  line-height: 1.3;
  color: #ccc;
}

/* =========================================
   6) PROJECT DETAIL PAGES
   ========================================= */
.project-detail-page {
  margin: 0 auto;        /* Center horizontally */
  width: 700px;          /* Fixed width */
  min-width: 700px; 
  text-align: center;   
}

/* TOP CARD */
.project-top-card {
  display: inline-block;
  background-color: #2d2d2d;
  border: 2px solid #444;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
  text-align: left;
  max-width: 420px; 
  padding: 0;
}

.project-main-image {
  width: 100%;
  height: 230px; 
  position: relative;
  overflow: hidden;
  margin: 0;
  border: none;
  text-align: center;
}

.project-main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0 auto;
  border: none;
  border-radius: 0;
}

.project-lighter-bottom {
  background-color: #3a3a3a;
  padding: 16px;
}

.project-lighter-bottom h1 {
  font-size: 1.2rem;
  margin-bottom: 8px;
  color: #fff;
  text-align: left;
}

.project-brief {
  font-size: 0.85rem;
  line-height: 1.4;
  color: #ddd;
  text-align: left;
}

/* FEATURES LIST => smaller margins & font */
.features-list-container {
  margin-top: 20px;
}

.features-heading {
  font-size: 1rem;
  margin-bottom: 10px;
  font-weight: 600;
}

.features-list {
  display: inline-block;
  text-align: left;
  max-width: 500px;
  margin: 0 auto;
  padding-left: 20px;
}

.features-list li {
  margin-bottom: 8px;
  font-size: 0.85rem;
  line-height: 1.4;
}

/* GALLERY => narrower iPhone style - 200 wide × 380 tall, */
.project-gallery {
  margin-top: 30px;
}

.gallery-heading {
  font-size: 1rem;
  margin-bottom: 10px;
  font-weight: 600;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  justify-items: center;
  max-width: 900px;
  margin: 0 auto;
}

.gallery-item {
  background-color: #2d2d2d;
  border: 2px solid #444;
  border-radius: 8px;
  width: 100%;
  max-width: 200px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch; /* to ensure the image fully occupies width */
  text-align: center;
}

.gallery-item img {
  width: 100%;
  height: 405px;   /* Increased from 380px to 420px for more vertical room */
  object-fit: cover;
  display: block;
}

.gallery-divider {
  height: 2px;
  width: 100%;
  background-color: #444;
}

.gallery-title {
  font-size: 0.8rem;
  padding: 6px;
  color: #ddd;
  line-height: 1.4;
  text-align: center;
}

/* Smaller sub-header for transcript note (College Courses) */
.transcript-subheader {
  text-align: center;
  font-size: 0.7rem;
  color: #666;
  margin-bottom: 10px;
}

/* =========================================
   PROFESSIONAL TRAINING PAGE
   ========================================= */
.training-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100vh - 80px);
}

.training-grid {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  max-width: 600px;
  margin-top: 20px;
}

.training-card {
  border: 2px solid #555;
  border-radius: 8px;
  background-color: #2d2d2d;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  padding: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.training-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}

.training-card h2 {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.training-divider {
  width: 100%;
  height: 2px;
  background-color: #444;
  margin: 10px 0;
}

.training-subtitle {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #fff;
}

/* Bright‑white header for the Professional Training page */
.training-page h1{
  color:#fff;      /* overrides the gray inherited from body.non-ios */
}

/* Course box now uses the website background (#222) */
.course-box {
  background-color: #222;
  border: 2px solid #444;
  border-radius: 6px;
  padding: 12px;
  margin: 12px 0;
}

/* Each course row: name on left, credits on right */
.course-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

/* Lighter text (#eee) for contrast on #222 */
.course-name,
.course-credits {
  color: #eee;
  font-size: 0.85rem;
}

/* Course credits italic style */
.course-credits {
  font-style: italic;
}

/* Smaller note text */
.note {
  font-size: 0.75rem;
  color: #999;
  margin-top: 8px;
}

/* Thin horizontal divider for a subtle separation */
.thin-divider {
  border: none;
  border-top: 1px solid #444;
  margin: 20px 0;
}

/* Key Features heading & divider modifications */
.key-features-heading {
  margin-bottom: 2px;
}

.key-features-divider {
  margin-top: 0;
  margin-bottom: 25px; /* Extra space before the first bullet */
}

/* Screenshots heading & divider modifications */
.screenshots-heading {
  margin-bottom: 2px;
}

.screenshots-divider {
  margin-top: 0;
  margin-bottom: 15px;
}

.features-list-container {
  margin-bottom: 50px; 
}

/* ---------- Contact page email panel ---------- */
.email-box.list-view{
  margin:30px auto;
  max-width:360px;
  background-color:#2a2a2a;
  border-left:4px solid #555;
  border-radius:6px;
  box-shadow:0 2px 6px rgba(0,0,0,.45);
  overflow:hidden;
}

/* ── Top strip ─────────────────────────── */
.email-top{
  background-color:#242424;
  padding:6px 22px 4px;      /* slightly shorter than before */
  border-top:1px solid #444;   /* gray line */
  border-right:1px solid #444; /* right edge (top box only) */
}

.email-heading{
  font-size:.9rem;
  font-weight:600;
  margin:0;
  color:#fff;
  letter-spacing:.3px;
}

.email-divider{
  border:none;
  border-top:1px solid #444;  /* sits very close to heading */
  margin:0;
}

/* ── Body section ──────────────────────── */
.email-body{
  padding:12px 22px 16px;
  border-right:1px solid #444;  /* right edge (bottom box) */
  border-bottom:1px solid #444; /* bottom edge */
}

.email-list{
  list-style:none;
  margin:0;
  padding:0;
}

.email-list li{
  margin:10px 0;
  display:flex;                /* keeps labels aligned */
}

.email-label{
  font-weight:700;
  color:#fff;
  width:110px;                 /* ensures “Personal:” & “Business:” align */
  flex-shrink:0;
}

.email-link{
  color:#eee;
  text-decoration:none;
}
.email-link:hover{
  color:#fff;
  text-decoration:underline;
}

/* ──────────────────────────────────────────
   BRAND PAGE – 2-column, uniform-image cards
   ────────────────────────────────────────── */
.brand-page h1{
  color:#fff;
  margin-bottom:1.4rem;
  font-size:1.25rem;
}

/* 2-column grid that wraps on small screens */
.brand-grid{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  justify-content:center;         /* keeps columns centred */
}

/* card container */
.brand-card{
  display:block;
  width:100%;
  max-width:340px;
  border-left:4px solid #d4af37;  /* gold accent */
  border-radius:8px;
  background-color:#2b2b2b;
  overflow:hidden;
  text-decoration:none;
  box-shadow:0 3px 8px rgba(0,0,0,.45);
  transition:transform .25s ease, box-shadow .25s ease;
}
.brand-card:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 14px rgba(0,0,0,.55);
}

/* —— image block ——  
   fixed height so every card matches (object-fit crops politely) */
.brand-img{
  height:180px;                /* tweak to taste */
  overflow:hidden;
}
.brand-img img{
  width:100%;
  height:100%;
  object-fit:cover;            /* keeps proportion, fills area */
  display:block;
}

/* info */
.brand-info{
  padding:14px 18px 18px;
  color:#fff;
}
.brand-info h2{
  margin:0 0 6px;
  font-size:1.05rem;
  font-weight:600;
}
.brand-info p{
  margin:0 0 12px;
  font-size:.78rem;
  line-height:1.45;
  color:#ccc;
}

/* visit button */
.visit-btn{
  font-size:.72rem;
  font-weight:600;
  padding:5px 12px 6px;
  border:1px solid #d4af37;
  border-radius:4px;
  color:#d4af37;
  transition:background-color .25s ease, color .25s ease;
}
.brand-card:hover .visit-btn{
  background-color:#d4af37;
  color:#000;
}

/* mobile – let cards fill line */
@media(max-width:380px){
  .brand-card{max-width:92%;}
}

/* ──────────────────────────────────────────
      ABOUT‑ME  ♦  CUSTOM LAYOUT / STYLING
   ────────────────────────────────────────── */

/* wrapper that lives inside .content; keeps everything centered */
.about-page{
  display:flex;
  justify-content:center;        /* center column in non‑sidebar area */
  padding:20px;
}

/* true column – controls max width separately from page padding */
.about-inner{
  width:100%;
  max-width:700px;
}

/* reusable “card” for each section */
.about-box{
  margin:30px 0;
  border:2px solid #555;
  border-radius:8px;
  background-color:#2d2d2d;
  overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.45);
  transition:transform .25s ease;
}
.about-box:hover{transform:translateY(-3px);}

/* ── top strip ──────────────────────────── */
.about-top{
  background:
    linear-gradient(135deg,
      rgba(90,90,90,.03)25%,
      transparent          25%,
      transparent          50%,
      rgba(90,90,90,.03)50%,
      rgba(90,90,90,.03)75%,
      transparent          75%,
      transparent),
    #222;
  background-size:14px 14px,100% 100%;
  padding:5px 14px;
}
.about-top h2{
  margin:0;
  font-size:.95rem;
  font-weight:600;
  color:#fff;
  letter-spacing:.4px;
}

/* divider between top & body */
.about-divider{
  border:none;
  border-top:2px solid #444;
  margin:0;
}

/* body */
.about-bottom{
  padding:16px 18px 18px;
}
.about-bottom p{
  margin:0;
  font-size:.85rem;
  line-height:1.45;
  color:#ddd;
}

/* image blocks */
.portfolio-image{
  text-align:center;
  margin:28px 0;
}
.portfolio-image img{
  max-width:80%;
  height:auto;
  border:2px solid #444;
  border-radius:8px;
  display:inline-block;
}

/* keep breathing room on phones */
@media(max-width:800px){
  .about-page{padding:20px 30px;}
}
/* extra margin so boxes never touch sidebar overlay on very small screens */
@media(max-width:600px){
  .about-page{margin-left:30px; margin-right:30px;}
}