/* ================================
   CSS VARIABLES - THEME COLORS
   Change these to update your entire site's color scheme
   ================================ */
:root {
    --bg-primary: #fafafa;        /* Main page background */
    --bg-secondary: #ffffff;      /* Cards and content boxes */
    --bg-hover: #fff5ee;          /* Hover state backgrounds */
    --text-primary: #1a1a1a;      /* Main text (headings, body) */
    --text-secondary: #666666;    /* Secondary text (descriptions) */
    --accent: #ff7f27;            /* Brand orange - buttons, links, highlights */
    --accent-dark: #e66b1a;       /* Darker orange for hover states */
    --accent-light: #ffb380;      /* Lighter orange (currently unused) */
    --border: #e8e8e8;            /* Border color for cards */
    --shadow: rgba(255, 127, 39, 0.2); /* Orange-tinted shadow */
}

/* ================================
   BASE STYLES
   ================================ */
/* Reset default browser spacing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Main body - sets default font and background */
body {
    font-family: 'Archivo', -apple-system, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* ================================
   NAVIGATION BAR
   Fixed at top, blurs content behind it
   ================================ */
nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 1.5rem 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000; /* Stays above all content */
    background: linear-gradient(180deg, rgba(250, 250, 250, 0.98) 0%, rgba(250, 250, 250, 0) 100%);
    backdrop-filter: blur(10px); /* Blurs content scrolling behind */
}

/* Thinner nav on project and blog detail pages for more reading space */
.project-detail nav,
.blog-detail nav {
    padding: 1rem 4rem;
}

/* Adjust page content to match thinner nav */
.project-detail .page-content,
.blog-detail .page-content {
    padding-top: 6rem;
}

/* Left side of nav - contains logo and brand name */
.nav-left {
    display: flex;
    align-items: center;
    gap: 2rem;
}

/* Logo container */
.logo {
    display: flex;
    align-items: center;
}

/* Logo link - clickable, goes to homepage */
.logo a {
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}

/* Logo hover effect - slides right slightly */
.logo a:hover {
    transform: translateX(4px);
}

/* Logo image sizing */
.logo img {
    height: 40px;
    width: auto;
}

/* Brand name "Lines and Layers" with orange accent line */
.brand-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.05em;
    padding-left: 1.5rem;
    border-left: 2px solid var(--accent); /* Orange vertical line */
}

/* Navigation links container (Home, Projects, Blog, Contact) */
.nav-links {
    display: flex;
    gap: 3rem;
    list-style: none;
}

/* Individual nav link styling */
.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    transition: color 0.3s ease;
    position: relative;
}

/* Underline that appears on hover */
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--accent);
    transition: width 0.3s ease;
}

/* Nav link hover - darker text */
.nav-links a:hover {
    color: var(--text-primary);
}

/* Nav link hover - underline expands */
.nav-links a:hover::after {
    width: 100%;
}

/* Active nav link (current page) - orange color */
.nav-links a.active {
    color: var(--accent);
}

/* ================================
   PAGE CONTENT
   Main content area below nav
   ================================ */
.page-content {
    min-height: 100vh; /* At least full screen height */
    padding: 7rem 4rem 4rem; /* Extra top padding for fixed nav */
}

/* Link styling ONLY in project and blog content areas */
.project-content a,
.blog-detail-content a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.3s ease;
    border-bottom: 1px solid transparent;
}

/* Content link hover - darker + underline appears */
.project-content a:hover,
.blog-detail-content a:hover {
    color: var(--accent-dark);
    border-bottom: 1px solid var(--accent-dark);
}

/* ================================
   HERO SECTION (Homepage)
   Large landing area with title and logo
   ================================ */
.hero {
    max-width: 1400px;
    margin: 0 auto;
    padding: 4rem 0;
}

/* Hero content - 2 columns on desktop */
.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: center;
}

/* Main hero title "Engineering meets Design" */
.hero-text h1 {
    font-size: clamp(2.5rem, 6vw, 5rem); /* Responsive size */
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 2rem;
    letter-spacing: -0.03em;
    word-wrap: break-word;
}

/* "Design" text in orange */
.hero-text .accent-text {
    color: var(--accent);
    display: block;
}

/* Hero description paragraph */
.hero-text p {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 3rem;
}

/* Right side - logo display area */
.hero-visual {
    position: relative;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logo container in hero */
.hero-logo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

/* Logo image - scales to fit container */
.hero-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ================================
   BUTTONS
   Call-to-action buttons (View Projects, etc.)
   ================================ */
/* Button container */
.cta-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/* Base button styling */
.btn {
    padding: 1rem 2.5rem;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.02em;
    font-family: 'Archivo', sans-serif;
    display: inline-block;
}

/* Primary button - orange filled */
.btn-primary {
    background: var(--accent);
    color: #ffffff;
    box-shadow: 0 4px 20px var(--shadow);
}

/* Primary button hover - lifts up with darker color */
.btn-primary:hover {
    background: var(--accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--shadow);
}

/* Secondary button - orange outline */
.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 2px solid var(--accent);
}

/* Secondary button hover - light orange background */
.btn-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--accent-dark);
    color: var(--accent-dark);
}

/* ================================
   SECTION CONTAINERS
   Wrappers for projects, blog, contact sections
   ================================ */
.projects-container, .blog-container, .contact-container {
    max-width: 1600px;
    margin: 0 auto;
}

/* Section headers (titles like "Selected Work", "Writing") */
.section-header {
    margin-bottom: 4rem;
}

/* Section title */
.section-header h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

/* Section description */
.section-header p {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--text-secondary);
}

/* ================================
   PROJECTS GRID
   Grid of project cards on projects page
   ================================ */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); /* Auto-adjusting columns */
    gap: 2rem;
    margin-bottom: 4rem;
}

/* Individual project card */
.project-card {
    background: var(--bg-secondary);
    border: 2px solid var(--border);
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--text-primary);
}

/* Project card hover - lifts up with orange border */
.project-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px var(--shadow);
}

/* Project image/placeholder area */
.project-image {
    width: 100%;
    aspect-ratio: 16/9; /* Maintains consistent card heights */
    background: linear-gradient(135deg, #fff9f5 0%, var(--bg-hover) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 3rem;
    color: var(--accent);
    opacity: 0.4; /* Only for placeholder text */
    object-fit: cover; /* For actual images */
    transition: all 0.4s ease;
}

/* Make actual img tags full opacity (not washed out) */
.project-card img.project-image {
    opacity: 1;
    filter: none;
}

/* Orange tint on hover using sepia + hue-rotate */
.project-card:hover img.project-image {
    filter: sepia(0.5) saturate(2) hue-rotate(-10deg) brightness(0.9);
}

/* Project card text area */
.project-info {
    padding: 1.5rem;
    flex: 1;
}

/* Project card title */
.project-info h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* Project card description */
.project-info p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ================================
   BLOG GRID
   List of blog posts on blog page
   ================================ */
.blog-grid {
    display: grid;
    gap: 3rem;
}

/* Individual blog post card */
.blog-post {
    background: var(--bg-secondary);
    border: 2px solid var(--border);
    padding: 3rem;
    transition: all 0.4s ease;
    position: relative;
    text-decoration: none;
    color: var(--text-primary);
    display: block;
}

/* Blog post hover - lifts up with orange border */
.blog-post:hover {
    border-color: var(--accent);
    box-shadow: 0 8px 30px var(--shadow);
    transform: translateY(-2px);
}

/* Blog post date (in orange, monospace font) */
.blog-date {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--accent);
    margin-bottom: 1rem;
}

/* Blog post title */
.blog-post h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: 1rem;
    font-weight: 600;
}

/* Blog post excerpt */
.blog-post p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.7;
}

/* ================================
   CONTACT PAGE
   Grid of contact cards
   ================================ */
/* Contact content - centered */
.contact-content {
    text-align: center;
}

/* Contact page header */
.contact-header {
    margin-bottom: 4rem;
}

/* Contact page title */
.contact-header h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Contact page description */
.contact-header p {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--text-secondary);
}

/* About Me section on contact page */
.about-me {
    max-width: 800px;
    margin: 0 auto 4rem;
    padding: 3rem;
    background: var(--bg-secondary);
    border: 2px solid var(--border);
    text-align: left;
}

.about-me h2 {
    font-size: clamp(1.8rem, 4vw, 2.2rem);
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.about-me p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.about-me p:last-child {
    margin-bottom: 0;
}

/* About Me section on contact page */
.about-me {
    max-width: 800px;
    margin: 0 auto 4rem;
    padding: 3rem;
    background: var(--bg-secondary);
    border: 2px solid var(--border);
    text-align: left;
}

/* Headshot image in About Me section */
.about-me .headshot {
    float: right;
    width: 200px;
    height: 200px;
    border-radius: 50%; /* Makes it circular */
    object-fit: cover; /* Ensures image fills circle properly */
    margin: 0 0 1.5rem 2rem; /* Space around the image */
    border: 3px solid var(--accent); /* Orange border */
    box-shadow: 0 4px 12px var(--shadow);
}

.about-me h2 {
    font-size: clamp(1.8rem, 4vw, 2.2rem);
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.about-me p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.about-me p:last-child {
    margin-bottom: 0;
}

/* Grid of contact cards (Email, LinkedIn, etc.) */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Auto-adjusting */
    gap: 2rem;
    margin-bottom: 4rem;
}

/* Individual contact card */
.contact-card {
    background: var(--bg-secondary);
    border: 2px solid var(--border);
    padding: 2.5rem 2rem;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* Contact card hover - lifts up */
.contact-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 8px 30px var(--shadow);
}

/* Contact card icon (SVG) */
.contact-icon {
    color: var(--accent);
}

/* Contact card title (e.g., "Email", "LinkedIn") */
.contact-card h3 {
    font-size: 1.2rem;
    font-weight: 600;
}

/* Contact card description */
.contact-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* Bottom note on contact page */
.contact-note {
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
    background: var(--bg-hover);
    border-radius: 4px;
}

/* ================================
   PROJECT & BLOG DETAIL PAGES
   Full page view of single project or blog post
   ================================ */
/* Container for detail pages */
.project-detail, .blog-detail {
    max-width: 1000px;
    margin: 0 auto;
}

/* Back button at top of detail pages */
.back-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    margin-bottom: 3rem;
    font-size: 0.95rem;
}

/* Back button hover - turns orange */
.back-button:hover {
    color: var(--accent);
}

/* Header area of detail pages */
.project-detail-header, .blog-detail-header {
    margin-bottom: 4rem;
}

/* Main title on detail pages */
.project-detail-header h1, .blog-detail-header h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
}

/* Blog author byline */
.blog-author {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 1rem;
}

/* Blog author byline */
.blog-author {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-top: 1rem;
}

/* Project metadata (Year, Role, Tech) */
.project-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    margin-bottom: 2rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Metadata label (e.g., "YEAR", "ROLE") in orange */
.project-meta-label {
    color: var(--accent);
    text-transform: uppercase;
    font-size: 0.75rem;
}

/* Large image placeholder on project pages */
.project-detail-image {
    width: 100%;
    height: 500px;
    background: linear-gradient(135deg, #fff9f5 0%, var(--bg-hover) 100%);
    border: 2px solid var(--border);
    margin-bottom: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 4rem;
    color: var(--accent);
    opacity: 0.4;
}

/* Main content area of project/blog pages */
.project-content, .blog-detail-content {
    font-size: 1.1rem;
    line-height: 1.9;
    color: var(--text-secondary);
}

/* Section headings in content */
.project-content h2, .blog-detail-content h2 {
    color: var(--text-primary);
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin: 3rem 0 1.5rem;
    font-weight: 600;
}

/* Paragraphs in content */
.project-content p, .blog-detail-content p {
    margin-bottom: 1.5rem;
}

/* Images in content - centered automatically */
.project-content img, .blog-detail-content img {
    max-width: 100%;
    height: auto;
    margin: 2rem auto; /* Centers the image */
    display: block;
    border-radius: 4px;
    border: 1px solid var(--border);
}

/* Image with caption wrapper */
.project-content figure,
.blog-detail-content figure {
    margin: 2rem 0;
    text-align: center;
}

.project-content figure img,
.blog-detail-content figure img {
    margin: 0 auto;
}

.project-content figcaption,
.blog-detail-content figcaption {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
}

/* YouTube video embeds - responsive aspect ratio */
.project-content .video-container,
.blog-detail-content .video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin: 2rem 0;
    border-radius: 4px;
    border: 1px solid var(--border);
}

.project-content .video-container iframe,
.blog-detail-content .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* PDF download links */
.project-content .pdf-link,
.blog-detail-content .pdf-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: var(--bg-secondary);
    border: 2px solid var(--accent);
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    margin: 1.5rem 0;
    border-radius: 4px;
}

.project-content .pdf-link:hover,
.blog-detail-content .pdf-link:hover {
    background: var(--accent);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow);
    border-bottom: 2px solid var(--accent);
}

/* YouTube embeds - responsive with 16:9 aspect ratio */
.project-content .video-embed,
.blog-detail-content .video-embed {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin: 2rem 0;
    border-radius: 4px;
    border: 2px solid var(--border);
}

.project-content .video-embed iframe,
.blog-detail-content .video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* PDF download links - styled as buttons */
.project-content .pdf-download,
.blog-detail-content .pdf-download {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    margin: 2rem 0;
    background: var(--bg-secondary);
    border: 2px solid var(--accent);
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.project-content .pdf-download:hover,
.blog-detail-content .pdf-download:hover {
    background: var(--accent);
    color: #ffffff;
    border-bottom: 2px solid var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow);
}

/* Bullet lists in project content */
.project-content ul {
    margin: 1.5rem 0;
    padding-left: 2rem;
}

/* Bullet point styling - orange dots */
.project-content li::marker {
    color: var(--accent);
}

/* ================================
   RESPONSIVE DESIGN - TABLET
   Applies to screens 1024px and smaller
   ================================ */
@media (max-width: 1024px) {
    nav { padding: 1.25rem 2rem; } /* Thinner nav */
    .page-content { padding: 5.5rem 2rem 2rem; } /* Less padding */
    .hero-content { grid-template-columns: 1fr; } /* Single column hero */
    .projects-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } /* Narrower cards */
    .nav-left { gap: 1.5rem; } /* Less space between logo and brand name */
}

/* ================================
   RESPONSIVE DESIGN - MOBILE
   Applies to screens 768px and smaller
   ================================ */
@media (max-width: 768px) {
    nav { padding: 1rem 1.5rem; } /* Even thinner nav */
    .nav-left { gap: 1rem; } /* Minimal spacing */
    .brand-name { display: none; } /* Hide "Lines and Layers" text to save space */
    .page-content { padding: 5rem 1.5rem 2rem; } /* Less padding all around */
    .hero-visual { height: 300px; } /* Shorter hero logo area */
    .projects-grid { grid-template-columns: 1fr; } /* Single column for all cards */
    .btn { width: 100%; text-align: center; } /* Full-width buttons */
    .nav-links { gap: 1.5rem; } /* Spacing between nav items */
    .nav-links a { font-size: 0.9rem; } /* Slightly smaller nav text */
    .blog-post { padding: 2rem; } /* Less padding in blog cards */
    .contact-grid { grid-template-columns: 1fr; } /* Single column contact cards */
}