/* ==========================================================================
   tarkantaskin.com custom styles (loaded after the template + yellow skin)
   ========================================================================== */

:root {
  --accent: #ffb400;
  --card-bg: #2a2a2a;
  --card-border: #3a3a3a;
  --muted: rgba(255, 255, 255, .7);
}

/* ---------- About: profile text ---------- */
.about-text p {
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  line-height: 28px;
  margin: 0 0 14px;
}
body.dark .about-text p { color: rgba(255, 255, 255, .85); }
.about-text .title-section { margin-bottom: 20px; }

@media (max-width: 1199px) {
  .about-text { margin-top: 50px; }
}

/* ---------- About: key numbers ---------- */
.stats { margin: 24px 0 18px; }
.stats .stat { margin-bottom: 14px; }
.stats .stat h3 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  margin: 0 0 6px;
  color: var(--accent);
}
.stats .stat h3 span { font-weight: 600; font-size: 28px; }
.stats .stat p {
  font-size: 12px !important;
  line-height: 18px !important;
  text-transform: uppercase;
  letter-spacing: .3px;
  margin: 0 !important;
  opacity: .8;
}

/* ---------- About: info list ---------- */
.info-list {
  margin: 6px 0 26px !important;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
}
body.dark .info-list { color: #fff; }
.info-list li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.info-list li span {
  display: inline-block;
  min-width: 110px;
  opacity: .6;
  font-size: 13px;
  text-transform: uppercase;
  padding-right: 10px;
}
.info-list a { color: inherit; }
.info-list a:hover { color: var(--accent); }
.resume-btn-container { padding-top: 0; }

/* ---------- Resume cards ---------- */
.resume-items .item .card-header .role-path {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  line-height: 20px;
  margin-top: 6px;
  opacity: .65;
  text-transform: none;
}
.card-list {
  margin: 4px 0 0 !important;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 25px;
}
body.dark .card-list,
body.dark .resume-items .item .card-body p { color: rgba(255, 255, 255, .8); }
.card-list li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 6px;
}
.card-list li:before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 2px;
  background: var(--accent);
}

/* ---------- Certifications ---------- */
.cert-list {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 22px;
}
body.dark .cert-list { color: rgba(255, 255, 255, .85); }
.cert-list li {
  display: flex;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.cert-list .cert-year {
  flex: 0 0 42px;
  color: var(--accent);
  font-weight: 600;
}

/* ---------- Skills ---------- */
.skill-group { margin-bottom: 26px; }
.skill-group h6 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .5px;
  margin-bottom: 12px;
}
body.dark .skill-group h6 { color: #fff; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags span {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 14px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: rgba(255, 255, 255, .85);
  transition: border-color .2s, color .2s;
}
.tags span:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Projects & patents ---------- */
.projects { padding-bottom: 70px; }
.projects .title-section { margin-bottom: 26px; }
.project-col { margin-bottom: 24px; display: flex; }
.project-card {
  width: 100%;
  padding: 26px 24px;
  border-radius: 6px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  font-family: 'Open Sans', sans-serif;
  transition: transform .2s, border-color .2s;
}
.project-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.project-card h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 25px;
  text-transform: none;
  color: #fff;
  margin: 0 0 10px;
}
.project-card p {
  font-size: 14px;
  line-height: 23px;
  color: rgba(255, 255, 255, .75);
  margin: 0;
}
.project-card .result {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #222;
  background: var(--accent);
  border-radius: 3px;
  padding: 3px 9px;
  margin-bottom: 14px;
}
.project-card.compact { padding: 20px 22px; }
.project-card.compact h4 { font-size: 15px; margin-bottom: 6px; }
.project-card.compact p { font-size: 13px; }
.project-card.patent > i.fa {
  font-size: 26px;
  color: var(--accent);
  margin-bottom: 14px;
}
.project-card .meta-line {
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
}
.project-card .meta-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}
.project-card .meta-link:hover { text-decoration: underline; }

/* ---------- Contact ---------- */
.custom-list a { color: inherit; text-decoration: none; }
.custom-list a:hover { color: var(--accent); }
.contact-container .contact .rightside .submit-form,
.contact-container .contact .rightside .form-message { padding-left: 15px; }

/* ---------- Home headline on small screens ---------- */
@media (max-width: 575px) {
  .main-text h1 { white-space: normal; font-size: 32px; line-height: 40px; }
  .stats .stat h3 { font-size: 32px; }
}

/* Template centers the about column on mobile; keep the profile readable */
.about-text, .about-text p, .about-text .info-list, .about-text .title-section { text-align: left !important; }

/* ==========================================================================
   Phones & tablets (<=1024px)
   The template's own mobile layout is switched off (its breakpoint was set to
   200px so the hamburger menu is used everywhere), which left the desktop
   hero pushed to 50vw and cut off on phones. These rules fix that.
   ========================================================================== */
@media only screen and (max-width: 1024px) {
  /* Hero: photo on top, text anchored to the bottom over a dark fade */
  body.fullscreendark #main > section#home {
    background-position: 28% top;
  }
  #main > section#home:before {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 75%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 40%, rgba(0,0,0,.95) 100%);
    pointer-events: none;
  }
  .main-text-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-left: 0;
    max-width: none;
    height: auto;
    min-height: 100%;
    padding: 110px 32px 48px;
    position: relative;
    z-index: 1;
  }
  .main-text {
    display: block;
    max-width: 620px;
  }
  .main-text h1 {
    white-space: normal;
    font-size: 34px;
    line-height: 42px;
  }
  .main-text p {
    font-size: 15px;
    line-height: 26px;
    margin: 8px 0 22px;
  }
  .call-to-actions-home .text-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
  }
  .call-to-actions-home a:first-child { margin-right: 0; }

  /* Keep page titles clear of the round menu button */
  div.container.page-title { padding-top: 100px; }
  .page-title h2 { font-size: 44px; }

  /* About: photo and text stacked, photo not too tall */
  .personal-info .image-container { max-width: 360px; }
  .about-text { margin-top: 40px; }
  .infos { padding-left: 30px; padding-right: 30px; }
}

@media only screen and (max-width: 576px) {
  .main-text-container { padding: 100px 24px 40px; }
  .main-text h1 { font-size: 28px; line-height: 36px; }
  .main-text h3 { font-size: 16px; }
  .btn { padding: 0 26px; font-size: 14px; }

  .page-title h2 { font-size: 32px; line-height: 40px; }
  .page-title .title-head-subtitle { font-size: 13px; line-height: 20px; padding: 0 24px; }
  .page-title .title-head-subtitle:before,
  .page-title .title-head-subtitle:after { display: none; }

  .personal-info .image-container { max-width: 280px; }
  .personal-info .image-container:before { display: none; }
  .about-text p { margin: 0 0 14px !important; }
  .stats .stat h3 { font-size: 30px; }
  .info-list li span { display: block; min-width: 0; padding: 0 0 2px; }
  .info-list li { word-break: break-word; }

  .title-section { font-size: 20px; margin-bottom: 30px; }
  .cert-list li { gap: 10px; font-size: 13px; }
  .tags span { font-size: 12px; padding: 4px 10px; }
  .project-card { padding: 22px 20px; }
  .projects { padding-left: 24px; padding-right: 24px; }

  .custom-list li span.contact-title { margin-bottom: 4px; }
  .custom-list h6 { word-break: break-word; }
}

/* Keep the round menu above the hero text so its links stay clickable */
.cd-stretchy-nav { z-index: 1000; }