/* ==========================================
   GIS PORTFOLIO - STYLES.CSS
   Henry Reissig, GISP

   Sections:
   1. Color Variables
   2. Global Styles
   3. Header and Navigation
   4. Hero Section
   5. Map Illustration
   6. General Sections
   7. About Section
   8. Project Gallery
   9. Project Cards and PDFs
   10. Skills and Education
   11. Contact Section
   12. Footer
   13. Responsive Design
========================================== */


/* ==========================================
   1. COLOR VARIABLES
========================================== */

:root {
    --navy: #071a32;
    --deep: #0c2747;
    --blue: #3b9cfa;
    --cyan: #78d9f5;
    --ink: #132b46;
    --muted: #61748b;
    --paper: #f5f8fc;
    --line: #dae4f0;
}


/* ==========================================
   2. GLOBAL STYLES
========================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Inter, Segoe UI, Arial, sans-serif;
    color: var(--ink);
    background: #fff;
    line-height: 1.65;
}

a {
    color: inherit;
    text-decoration: none;
}

.wrap {
    max-width: 1160px;
    margin: auto;
    padding: 0 26px;
}


/* ==========================================
   3. HEADER AND NAVIGATION
========================================== */

.header {
    background: var(--navy);
    position: sticky;
    top: 0;
    z-index: 5;
    border-bottom: 1px solid #24415e;
}

.nav {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.logo {
    font-weight: 800;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo .muted {
    color: #78d9f5;
    font-size: 12px;
    letter-spacing: 2px;
}

.monogram {
    display: grid;
    place-items: center;
    background: #1e5b96;
    border: 1px solid #5ca5df;
    border-radius: 10px;
    width: 39px;
    height: 39px;
}

.navlinks {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}

.navlinks a {
    color: #d5e4f6;
    font-size: 14px;
}

.navlinks a:hover,
.footer a:hover {
    color: var(--cyan);
}


/* ==========================================
   4. HERO SECTION
========================================== */

.hero {
    background:
        radial-gradient(
            circle at 80% 20%,
            #173e68 0,
            transparent 48%
        ),
        var(--navy);

    color: #fff;
    padding: 105px 0 110px;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    gap: 75px;
    align-items: center;
}

.eyebrow {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.6px;
    color: #2484ce;
    margin: 0 0 22px;
}

.hero .eyebrow,
.contact .eyebrow {
    color: var(--cyan);
}


/* Headings and Paragraphs */

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    font-size: clamp(44px, 5vw, 70px);
    line-height: 1.1;
    letter-spacing: -2.7px;
    margin-bottom: 26px;
}

h1 em,
h2 em {
    font-style: normal;
    color: var(--cyan);
}

.lead {
    font-size: 18px;
    color: #c1d4e8;
    max-width: 600px;
}


/* Hero Buttons */

.actions {
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
    margin: 32px 0;
}

.btn {
    display: inline-block;
    border-radius: 8px;
    padding: 13px 21px;
    font-weight: 750;
    font-size: 14px;
}

.primary {
    background: #278be5;
    color: white;
}

.secondary {
    border: 1px solid #7291b3;
    color: #e2efff;
}


/* Hero Technology Tags */

.hero-tags {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}

.hero-tags span {
    border: 1px solid #315574;
    border-radius: 20px;
    color: #a9c7e2;
    padding: 5px 11px;
    font-size: 12px;
}


/* ==========================================
   5. MAP ILLUSTRATION
========================================== */

.map-panel {
    border: 1px solid #456587;
    background: #102e50;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 70px #0005;
}

.map-panel svg {
    width: 100%;
    display: block;
}


/* Map Panel Header and Footer */

.panel-top,
.panel-bottom {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
    color: #a4c4e3;
    border-bottom: 1px solid #315172;
}

.panel-top span:last-child {
    color: #7ce2ce;
}

.panel-bottom {
    border-top: 1px solid #315172;
    border-bottom: 0;
    justify-content: center;
    gap: 18px;
}

.panel-bottom span {
    color: var(--cyan);
}


/* ==========================================
   6. GENERAL SECTION STYLES
========================================== */

.section {
    padding: 105px 0;
    scroll-margin-top: 80px;
}

.section h2 {
    font-size: clamp(34px, 4vw, 49px);
    line-height: 1.15;
    letter-spacing: -1.5px;
    margin-bottom: 25px;
}

.blue {
    color: #298ee7;
}


/* ==========================================
   7. ABOUT SECTION
========================================== */

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 95px;
}

.split p:not(.eyebrow) {
    color: #536a83;
    font-size: 17px;
}

.split h2 em,
.contact h2 em {
    color: #328fe2;
}


/* GISP Certification Box */

.credential {
    margin-top: 28px;
    padding: 19px 22px;
    border-left: 4px solid #2e93ea;
    background: #eff6fd;
    display: flex;
    flex-direction: column;
}

.credential span {
    font-size: 13px;
    color: #60758d;
}


/* ==========================================
   8. PROJECT GALLERY
========================================== */

.projects-section,
.education-section {
    background: var(--paper);
}

.section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;
}

.section-head > p {
    max-width: 390px;
    color: #64768a;
}


/* Project Category Filters */

.filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 25px 0 30px;
}

.filter {
    font: inherit;
    font-size: 13px;
    padding: 9px 17px;
    border: 1px solid #d2dfec;
    background: white;
    border-radius: 24px;
    cursor: pointer;
    color: #36536f;
}

.filter.active {
    background: var(--deep);
    color: white;
    border-color: var(--deep);
}


/* Project Grid Layout */

.project-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}


/* ==========================================
   9. PROJECT CARDS AND PDFS
========================================== */

.project-card {
    border: 1px solid var(--line);
    border-radius: 13px;
    overflow: hidden;
    background: white;
    box-shadow: 0 12px 30px #102f5210;
}


/* Project Thumbnail Area */

.project-art {
    height: 210px;
    display: grid;
    place-items: center;
    position: relative;

    background:
        radial-gradient(
            circle at 30% 20%,
            #3a87c5,
            transparent 40%
        ),
        repeating-linear-gradient(
            35deg,
            #123c69 0 2px,
            #10355d 2px 25px
        );

    color: #b7eaff;
}


/* Alternate Project Backgrounds */

.project-card:nth-child(2) .project-art {
    background:
        radial-gradient(
            circle,
            #1f7b9b,
            #0b2549 70%
        );
}

.project-card:nth-child(3) .project-art {
    background:
        radial-gradient(
            circle at 60% 30%,
            #47869a,
            #16304b 65%,
            #0d1c33
        );
}


/* Project Images and PDF Thumbnails */

.project-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Project Symbol (When No Image Exists) */

.project-glyph {
    font-size: 110px;
    line-height: 1;
    opacity: .9;
}


/* Category Label on Project Image */

.art-label {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #071b32cf;
    color: #d8eeff;
    padding: 6px 10px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}


/* Project Information */

.project-body {
    padding: 24px;
}

.project-subtitle {
    color: #2a83c9;
    font-size: 12px;
    font-weight: 800;
}

.project-body h3 {
    font-size: 21px;
    line-height: 1.3;
    margin-bottom: 12px;
}

.project-body > p:not(.project-subtitle) {
    color: #60748a;
    font-size: 14px;
    min-height: 92px;
}


/* Project Tags */

.tags {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin: 20px 0;
}

.tags span {
    background: #edf4fb;
    border-radius: 4px;
    color: #39658a;
    padding: 4px 7px;
    font-size: 11px;
}


/* Project Links */

.project-link {
    font-size: 13px;
    font-weight: 800;
    color: #1775bd;
}

.project-status {
    font-size: 12px;
    color: #78899b;
}


/* PDF Download Link */

.pdf-download {
    display: inline-block;
    margin-left: 16px;
}


/* PDF Thumbnail Display
   Overrides the earlier object-fit: cover rule.
   Keeps the full PDF preview visible.
*/

.project-art img {
    object-fit: contain;
    background: #eaf1f8;
    padding: 8px;
}


/* Project Gallery Note */

.note {
    margin: 25px 0 0;
    color: #667b90;
    font-size: 13px;
}


/* ==========================================
   10. SKILLS AND EDUCATION
========================================== */

.skill-grid,
.education-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 32px;
}

.skill-grid article,
.education-grid article {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.skill-grid h3,
.education-grid h3 {
    font-size: 19px;
    margin-bottom: 9px;
}

.skill-grid p,
.education-grid p {
    color: #62778b;
    margin: 0;
}


/* Education Cards */

.education-grid article {
    background: white;
}

.education-grid article > span {
    font-size: 10px;
    letter-spacing: 1.8px;
    font-weight: 800;
    color: #2c83c4;
}


/* ==========================================
   11. CONTACT SECTION
========================================== */

.contact {
    background: var(--deep);
    color: white;
}

.contact-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.contact h2 {
    max-width: 640px;
}

.contact p:not(.eyebrow) {
    color: #c5d9ec;
}


/* Contact Buttons and Links */

.contact-actions {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 190px;
}

.contact-actions > a:last-child {
    color: #a8d7ff;
}

.light {
    background: white;
    color: #13365d;
    text-align: center;
}


/* ==========================================
   12. FOOTER
========================================== */

footer {
    background: var(--navy);
}

.footer {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 27px;
    padding-bottom: 27px;
    color: #9bb5cf;
    font-size: 12px;
}


/* ==========================================
   13. RESPONSIVE DESIGN
========================================== */


/* Tablets and Smaller Screens */

@media (max-width: 850px) {

    .hero-grid,
    .split {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .hero {
        padding: 70px 0;
    }

    .project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nav {
        align-items: flex-start;
        padding-top: 15px;
        padding-bottom: 15px;
        flex-direction: column;
    }

    .navlinks {
        gap: 15px;
    }

    .section {
        padding: 70px 0;
    }

}


/* Mobile Phones */

@media (max-width: 600px) {

    .project-grid,
    .skill-grid,
    .education-grid {
        grid-template-columns: 1fr;
    }

    .section-head,
    .contact-grid {
        display: block;
    }

    .contact-actions {
        margin-top: 25px;
    }

    .hero h1 {
        letter-spacing: -1.6px;
    }

    .project-body > p:not(.project-subtitle) {
        min-height: 0;
    }

}