/*
Theme Name: Mary Lopez Portfolio
Theme URI: https://webdeveloper.mapleaiconsulting.com/
Author: Mary Lopez
Description: A technical, datasheet-styled one-page portfolio theme — deep ink-navy panels, hairline rules, and monospace data labels, built for an engineering background.
Version: 1.0
Requires at least: 5.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: mary-lopez-portfolio
*/

:root{
  --ink:#101820;
  --panel:#172230;
  --panel-line:#2c3b48;
  --paper:#eaeeec;
  --paper-line:#c7cfcc;
  --text-dark:#131a20;
  --muted:#5c6b72;
  --muted-on-dark:#93a3ab;
  --signal:#4f8fc0;
  --data:#c97a3d;
  --max:960px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;
  background:var(--paper);
  color:var(--text-dark);
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  font-size:16px;
  line-height:1.55;
}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;}
img{max-width:100%;height:auto;}

/* NAV */
header{
  position:sticky; top:0; z-index:50;
  background:var(--ink);
  border-bottom:1px solid var(--panel-line);
}
.nav-inner{
  max-width:var(--max); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px;
}
.brand{
  color:#f2f4f3; font-weight:600; letter-spacing:.01em; font-size:1rem;
  text-decoration:none;
}
.brand .dot{color:var(--data);}
nav ul{list-style:none; display:flex; gap:26px; margin:0; padding:0;}
nav ul li{margin:0;}
nav a{
  color:var(--muted-on-dark); text-decoration:none; font-size:.86rem;
  font-family:'IBM Plex Mono',monospace; letter-spacing:.02em;
  padding:4px 0; border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
nav a:hover, nav a:focus-visible{color:#f2f4f3; border-color:var(--signal);}
.nav-toggle{display:none;}

@media (max-width:760px){
  nav ul{
    position:fixed; inset:60px 0 auto 0; background:var(--ink);
    flex-direction:column; gap:0; padding:8px 24px 18px;
    border-bottom:1px solid var(--panel-line);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:transform .18s ease, opacity .18s ease;
  }
  nav ul.open{transform:translateY(0); opacity:1; pointer-events:auto;}
  nav a{display:block; padding:10px 0; border-bottom:1px solid var(--panel-line);}
  .nav-toggle{
    display:block; background:none; border:1px solid var(--panel-line);
    color:#f2f4f3; font-family:'IBM Plex Mono',monospace; font-size:.8rem;
    padding:6px 10px; cursor:pointer;
  }
}

/* HERO */
.hero{
  background:var(--ink); color:#f2f4f3;
  border-bottom:1px solid var(--panel-line);
}
.hero-inner{
  max-width:var(--max); margin:0 auto; padding:88px 24px 72px;
  display:grid; grid-template-columns:auto 1fr; gap:40px; align-items:start;
}
.hero-index{
  font-family:'IBM Plex Mono',monospace; color:var(--muted-on-dark);
  font-size:.82rem; writing-mode:vertical-rl; text-orientation:mixed;
  padding-top:6px; letter-spacing:.08em;
}
.hero h1{
  font-size:clamp(2.1rem,5vw,3.4rem); line-height:1.08; margin:0 0 22px;
  font-weight:600; max-width:14ch;
}
.hero p.lead{
  max-width:56ch; color:var(--muted-on-dark); font-size:1.08rem; margin:0 0 28px;
}
.hero-meta{
  display:flex; flex-wrap:wrap; gap:28px; margin-top:8px;
  font-family:'IBM Plex Mono',monospace; font-size:.82rem; color:var(--muted-on-dark);
}
.hero-meta strong{display:block; color:#f2f4f3; font-family:'IBM Plex Sans',sans-serif; font-size:.95rem; margin-bottom:2px;}

/* SECTIONS */
section{max-width:var(--max); margin:0 auto; padding:64px 24px;}
section + section{border-top:1px solid var(--paper-line);}
.section-head{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:36px; gap:16px; flex-wrap:wrap;
}
.section-head h2{
  font-size:1.5rem; margin:0; font-weight:600;
}
.section-head .tag{
  font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:var(--muted);
}

/* SKILLS */
.skill-grid{display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--paper-line);}
.skill-row{
  padding:18px 0; border-bottom:1px solid var(--paper-line);
  display:grid; grid-template-columns:1fr; gap:6px;
}
.skill-row:nth-child(odd){padding-right:24px;}
.skill-row:nth-child(even){padding-left:24px; border-left:1px solid var(--paper-line);}
.skill-row h3{
  margin:0; font-size:.92rem; font-family:'IBM Plex Mono',monospace;
  color:var(--signal); font-weight:600; letter-spacing:.01em;
}
.skill-row p{margin:0; color:var(--muted); font-size:.95rem;}
@media (max-width:640px){
  .skill-grid{grid-template-columns:1fr;}
  .skill-row:nth-child(even){padding-left:0; border-left:none;}
}

/* EXPERIENCE TIMELINE */
.timeline{border-top:1px solid var(--paper-line);}
.entry{
  display:grid; grid-template-columns:150px 1fr; gap:24px;
  padding:28px 0; border-bottom:1px solid var(--paper-line);
}
.entry .when{
  font-family:'IBM Plex Mono',monospace; font-size:.82rem; color:var(--data);
  padding-top:2px;
}
.entry h3{margin:0 0 3px; font-size:1.08rem; font-weight:600;}
.entry .org{margin:0 0 12px; color:var(--muted); font-size:.9rem; font-family:'IBM Plex Mono',monospace;}
.entry ul{margin:0; padding-left:18px; color:var(--text-dark);}
.entry li{margin-bottom:6px; font-size:.96rem;}
@media (max-width:640px){
  .entry{grid-template-columns:1fr; gap:8px;}
}

/* PATENTS */
.patents{border-top:1px solid var(--paper-line);}
.patent{
  padding:20px 0; border-bottom:1px solid var(--paper-line);
  display:grid; grid-template-columns:1fr auto; gap:16px; align-items:baseline;
}
.patent p{margin:0; font-size:.96rem;}
.patent .num{
  font-family:'IBM Plex Mono',monospace; font-size:.82rem; color:var(--signal);
  white-space:nowrap;
}
@media (max-width:640px){
  .patent{grid-template-columns:1fr;}
}

/* EDUCATION */
.edu{border-top:1px solid var(--paper-line);}
.edu-item{
  padding:22px 0; border-bottom:1px solid var(--paper-line);
}
.edu-item h3{margin:0 0 4px; font-size:1.02rem; font-weight:600;}
.edu-item p{margin:0; color:var(--muted); font-size:.92rem;}

/* HIGHLIGHTS / PORTFOLIO */
.highlights{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--paper-line); border:1px solid var(--paper-line);}
.highlight{background:var(--paper); padding:26px;}
.highlight h3{margin:0 0 10px; font-size:1rem; font-weight:600;}
.highlight p{margin:0; color:var(--muted); font-size:.92rem;}
@media (max-width:640px){.highlights{grid-template-columns:1fr;}}

/* CONTACT */
.contact{background:var(--ink); color:#f2f4f3; border-top:1px solid var(--panel-line);}
.contact .section-head h2{color:#f2f4f3;}
.contact .section-head .tag{color:var(--muted-on-dark);}
.contact-grid{display:flex; flex-wrap:wrap; gap:40px;}
.contact-item{font-family:'IBM Plex Mono',monospace; font-size:.9rem;}
.contact-item span{display:block; color:var(--muted-on-dark); font-size:.75rem; margin-bottom:6px; font-family:'IBM Plex Sans',sans-serif;}
.contact-item a{color:var(--signal); text-decoration:none; border-bottom:1px solid transparent;}
.contact-item a:hover, .contact-item a:focus-visible{border-color:var(--signal);}

footer{
  background:var(--ink); color:var(--muted-on-dark); border-top:1px solid var(--panel-line);
  text-align:center; padding:22px; font-size:.8rem; font-family:'IBM Plex Mono',monospace;
}

/* Sensible defaults for any standard WP page/post that uses page.php */
.entry-content{max-width:var(--max); margin:0 auto; padding:64px 24px;}