/* ===========================
   Gisselle Portfolio – style.css
   =========================== */

/* ---------- Theme tokens ---------- */
:root{
  --bg:#f9fafa;
  --ink:#333;
  --muted:#555;
  --brand:#004466;     /* dark blue */
  --teal:#008080;      /* primary accent */
  --teal-2:#00a896;    /* hover accent */
  --mint:#aef6c7;      /* soft green */
  --shadow:0 4px 8px rgba(0,0,0,.08);
}

/* ---------- Base / resets ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  font-family:'Poppins',sans-serif;
  background:var(--bg);
  color:var(--ink);
  margin:0;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--teal); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Layout wrapper grows to push footer down */
.wrapper{
  min-height:100%;
  display:flex;
  flex-direction:column;
}
main{
  flex:1;
  padding:2rem 1rem;
  max-width:1100px;
  margin:0 auto;
  text-align:center;
}
section + section{ margin-top:2rem; }

/* ---------- Header / Nav ---------- */
header{
  background:var(--brand);
  color:#fff;
  padding:1rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
header h1{ margin:0; }
nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}
nav a{
  color:var(--mint);
  font-weight:600;
}
nav a:hover{ text-decoration:underline; }

/* ---------- Footer ---------- */
footer{
  background:#eee;
  text-align:center;
  padding:1rem;
}

/* ---------- Intro / Hero ---------- */
.intro h2,
h2{ color:var(--brand); margin:0 0 .5rem; }
.fish-pic,
.frog-pic{
  max-width:320px;
  border-radius:12px;
  margin:1rem auto 0;
}

/* ---------- Socials ---------- */
.socials{ margin-top:1rem; }
.social-btn{
  display:inline-block;
  margin:0 .5rem;
  background:var(--teal);
  color:#fff;
  padding:.6em;
  border-radius:50%;
  font-size:1.2em;
  transition:background-color .2s ease;
}
.social-btn:hover{ background:var(--teal-2); }
.social-btn i{ color:#fff; }

/* ---------- Section blocks (About/Skills/Coursework/Future Goals) ---------- */
/* These are content boxes (not the card grids). */
.about,
.skills,
.coursework,
.future-goals{
  text-align:left;
  background:#fff;
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:2rem;
  margin:0 auto;
}
.about ul,
.skills ul,
.coursework ul,
.future-goals ul{
  list-style:disc inside;
  padding-left:1rem;
}

/* ---------- Reusable card grid (Projects / Certifications / Awards) ---------- */
.projects,
.certs,
.awards{
  /* section wrapper – no fixed widths that cause overlap */
  text-align:center;
  background:transparent;
  box-shadow:none;
  padding:2rem 0;
}

.projects-grid,
.certs-grid,
.awards-grid{
  display:grid;
  gap:1.25rem;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  grid-auto-flow:row dense;       /* fills holes when heights differ */
  align-items:stretch;
  margin-top:1rem;
}

/* Card base shared by all three */
.project-card,
.cert-card,
.award-card{
  background:#fff;
  color:var(--ink);
  padding:1.25rem 1.25rem 1rem;
  border-radius:12px;
  box-shadow:var(--shadow);
  text-align:left;
  display:flex;
  flex-direction:column;
  height:100%;                    /* equal-height cards in grid */
  margin:0;                       /* no centered margins that break grid */
  transition:transform .2s, box-shadow .2s;
}
.project-card:hover,
.cert-card:hover,
.award-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}

/* Card headers with icons */
.project-header,
.cert-header,
.award-header{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:.35rem;
}
.project-header i,
.cert-header i,
.award-header i{
  font-size:1.2rem;
  color:var(--teal);
}
.project-card h3,
.cert-card h3,
.award-card h3{
  margin:0;
  color:var(--brand);
}

/* Issuer/date line (used in certs + awards) */
.issuer{
  margin:0;
  color:var(--muted);
  font-size:.95rem;
}

/* Optional small description under award */
.award-desc{ margin:.5rem 0 0; }

/* Tech/skill “pills” */
.meta,
.skill-tags{
  list-style:none;
  padding:0;
  margin:.5rem 0 1rem;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.meta li,
.skill-tags li{
  padding:.25rem .55rem;
  border-radius:999px;
  background:var(--mint);
  color:var(--brand);
  font-size:.9rem;
}

/* Buttons inside cards */
.project-link,
.cert-link,
.award-link,
.project-card a.project-link,
.cert-card a.project-link,
.award-card a.project-link{
  align-self:flex-start;
  display:inline-block;
  width:auto;
  background:var(--teal);
  color:#fff;
  padding:.5em 1em;
  border-radius:8px;
  text-decoration:none;
  transition:background-color .2s ease;
  margin-top:auto;    /* pins to bottom of card */
}
.project-link:hover,
.cert-link:hover,
.award-link:hover{ background:var(--teal-2); }

/* ---------- Contact block ---------- */
.contact{
  padding:2rem;
  max-width:600px;
  margin:0 auto;
  text-align:left;
}
.contact h2{ color:var(--brand); }

/* ---------- Utility ---------- */
.links a{
  display:inline-block;
  margin:1em;
  padding:.5em 1em;
  background:var(--teal);
  color:#fff;
  border-radius:8px;
  text-decoration:none;
}
.links a:hover{ background:var(--teal-2); }

/* Keep footer icons tidy if you add them later */
.footer-fish,
.footer-frog{
  max-width:50px;
  vertical-align:middle;
  margin-left:.5em;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width:700px){
  header{ flex-direction:column; align-items:flex-start; gap:.75rem; }
  nav ul{ gap:.75rem; }
  .about, .skills, .coursework, .future-goals{ padding:1.25rem; }
}
/* === Skills as card grid (matches Projects/Certs/Awards) === */
.skills{
  text-align: center;
  background: transparent;
  box-shadow: none;
  padding: 2rem 0;
}

/* If your old .skills box styles still exist earlier, this neutralizes them */
.skills.about, .skills .list { all: unset; }

/* Grid */
.skills-grid{
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 1rem;
  align-items: stretch;
}

/* Reuse the shared card base/hover by adding .skill-card */
.project-card,
.cert-card,
.award-card,
.skill-card{
  background:#fff;
  color:#333;
  padding:1.25rem 1.25rem 1rem;
  border-radius:12px;
  box-shadow:0 4px 8px rgba(0,0,0,.08);
  text-align:left;
  display:flex;
  flex-direction:column;
  height:100%;
  margin:0;
  transition:transform .2s, box-shadow .2s;
}
.project-card:hover,
.cert-card:hover,
.award-card:hover,
.skill-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}

/* Header row with icon */
.project-header,
.cert-header,
.award-header,
.skill-header{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:.35rem;
}
.project-header i,
.cert-header i,
.award-header i,
.skill-header i{
  font-size:1.2rem;
  color:#008080; /* teal accent */
}

/* === Future Goals as card grid === */

/* If the section still has the old .future-goals box styles,
   this override neutralizes them when combined with .goals */
.future-goals.goals{
  text-align: center !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 2rem 0 !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Full-width Goals section style (also works if you use id="goals") */
.goals{
  text-align: center;
  background: transparent;
  box-shadow: none;
  padding: 2rem 0;
}

.goals-grid{
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-auto-flow: row dense;
  align-items: stretch;
  margin-top: 1rem;
}

/* Card base for goals (matches your project/cert/award cards) */
.goal-card{
  background:#fff;
  color:#333;
  padding:1.25rem 1.25rem 1rem;
  border-radius:12px;
  box-shadow:0 4px 8px rgba(0,0,0,.08);
  text-align:left;
  display:flex;
  flex-direction:column;
  height:100%;
  margin:0;
  transition:transform .2s, box-shadow .2s;
}
.goal-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}

/* Header row with icon (reuse look) */
.goal-header{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:.35rem;
}
.goal-header i{
  font-size:1.2rem;
  color:#008080; /* teal accent */
}
.goal-card h3{
  margin:0;
  color:#004466; /* brand blue */
}

/* Reuse your existing pill style via .skill-tags list */

/* === Contact as card grid (matches Projects/Certs/Awards) === */
.contact{
  text-align: center !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 2rem 0 !important;
  max-width: none !important;
  margin: 0 !important;
}

.contact-grid{
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-auto-flow: row dense;
  align-items: stretch;
  margin-top: 1rem;
}

/* Share the same card base */
.project-card,
.cert-card,
.award-card,
.skill-card,
.course-card,
.goal-card,
.contact-card{
  background:#fff;
  color:#333;
  padding:1.25rem 1.25rem 1rem;
  border-radius:12px;
  box-shadow:0 4px 8px rgba(0,0,0,.08);
  text-align:left;
  display:flex;
  flex-direction:column;
  height:100%;
  margin:0;
  transition:transform .2s, box-shadow .2s;
}
.contact-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}

/* Header row with icon */
.contact-header{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:.35rem;
}
.contact-header i{
  font-size:1.2rem;
  color:#008080; /* teal accent */
}
.contact-card h3{
  margin:0;
  color:#004466; /* brand blue */
}

.contact-actions{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin:.5rem 0 0.25rem;
}

/* Buttons (reuse palette) */
.contact-btn{
  display:inline-block;
  background:#008080;
  color:#fff;
  padding:.5em 1em;
  border-radius:8px;
  text-decoration:none;
  border:0;
  cursor:pointer;
  transition:background-color .2s ease;
}
.contact-btn:hover{ background:#00a896; }
.contact-btn.outline{
  background:transparent;
  color:#004466;
  border:2px solid #008080;
}
.contact-btn.outline:hover{
  background:#008080;
  color:#fff;
}

.muted{ color:#555; }