/* ═══════════════════════════════════════════════════════
   full-profile.css
   PF Portfolio — Full Profile Page
   ═══════════════════════════════════════════════════════

   PARAMETERS — change these independently:
   ─────────────────────────────────────────────────────── */

:root {
  /* Typography */
  --font:               'Calibri', 'Calibri Regular', sans-serif;
  --fs-body:            18px;
  --fs-heading:         24px;
  --fs-profile-name:    32px;          /* PROFILE dominant size */
  --fs-label:           14px;          /* category labels, meta */
  --fw-bold:            700;
  --fw-normal:          400;
  --line-height:        1.6;
  --letter-spacing-heading: 0.05em;

  /* Colors */
  --color-bg:           #ffffff;
  --color-text:         #000000;
  --color-muted:        #555555;
  --color-placeholder:  #000000;
  --color-border:       #000000;
  --color-circle-fill:  #000000;
  --color-circle-empty: #ffffff;
  --color-divider:      #e0e0e0;
  --color-section-rule: #000000;

  /* Layout */
  --content-max-width:  960px;
  --content-padding-x:  40px;
  --section-gap:        72px;          /* gap between sections */
  --section-padding-top: 16px;         /* breathing space above each heading */
  --block-gap:          24px;
  --edu-item-gap:       18px;

  /* Header — DO NOT CHANGE */
  --nav-h:              48px;
  --gap-edge:           48px;
  --gap-col:            80px;

  /* Profile layout */
  --photo-width:        260px;
  --photo-height:       340px;
  --profile-gap:        60px;          /* gap between photo column and info */

  /* Two-column profile grid */
  --profile-col-left:   260px;         /* photo */
  --profile-col-mid:    220px;         /* info + socials */
  --profile-col-right:  1fr;           /* description */

  /* Software circles */
  --circle-size:        13px;
  --circle-gap:         5px;
  --circle-border:      1.5px solid #000000;

  /* Certificate download link */
  --cta-font-size:      var(--fs-body);

  /* Section accent */
  --accent-border:      3px solid #000000;

  /* Sticky indicator */
  --indicator-left:     20px;
  --indicator-dot-size: 8px;
  --indicator-line-w:   1px;

  /* Placeholder */
  --placeholder-font:   'Courier New', Courier, monospace;
  --placeholder-font-size: 13px;
}

/* ─── RESET ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family:      var(--font);
  font-size:        var(--fs-body);
  color:            var(--color-text);
  background-color: var(--color-bg);
  line-height:      var(--line-height);
}

a    { color: inherit; text-decoration: none; }
em   { font-style: italic; }
.italic { font-style: italic; }

/* ─── HEADER — DO NOT CHANGE ─────────────────────────── */
.nav-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: var(--gap-col);
  padding: 0 var(--gap-edge);
  height: var(--nav-h);
  align-items: center;
  border-bottom: 1px solid #000000;
  position: sticky;
  top: 0;
  background: var(--color-bg);
  z-index: 200;
}

.nav-brand {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  font-family: var(--font);
  color: #000000;
  white-space: nowrap;
}

.nav-brand a  { color: inherit; text-decoration: none; }
.nav-brand a:hover { text-decoration: underline; }

.nav-section {
  font-size: var(--fs-body);
  font-family: var(--font);
  color: #000000;
}

/* ─── STICKY SECTION INDICATOR ───────────────────────── */
.section-indicator {
  position: fixed;
  left:     var(--indicator-left);
  top:      50%;
  transform: translateY(-50%);
  display:  flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  z-index: 100;
}

.indicator-line {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--indicator-line-w);
  background: #cccccc;
  z-index: -1;
}

.indicator-dot {
  width:         var(--indicator-dot-size);
  height:        var(--indicator-dot-size);
  border-radius: 50%;
  border:        1.5px solid #000000;
  background:    var(--color-bg);
  display:       block;
  position:      relative;
  transition:    background 0.2s;
}

.indicator-dot.active,
.indicator-dot:hover {
  background: #000000;
}

.indicator-dot::after {
  content:     attr(data-label);
  position:    absolute;
  left:        16px;
  top:         50%;
  transform:   translateY(-50%);
  font-size:   10px;
  font-family: var(--font);
  color:       var(--color-muted);
  white-space: nowrap;
  opacity:     0;
  transition:  opacity 0.2s;
}

.indicator-dot:hover::after,
.indicator-dot.active::after {
  opacity: 1;
}

/* ─── PAGE CONTENT WRAPPER ────────────────────────────── */
.page-content {
  max-width:  var(--content-max-width);
  margin:     0 auto;
  padding:    var(--section-gap) var(--content-padding-x);
  display:    flex;
  flex-direction: column;
  gap:        var(--section-gap);
}

/* ─── SECTION ─────────────────────────────────────────── */
.section {
  display:        flex;
  flex-direction: column;
  gap:            var(--block-gap);
}

/* Divider between sections */
.section-divided {
  padding-top:  var(--section-padding-top);
  border-top:   1px solid var(--color-divider);
}

/* ─── SECTION HEADING ─────────────────────────────────── */
.section-heading {
  font-size:      var(--fs-heading);
  font-weight:    var(--fw-bold);
  font-family:    var(--font);
  letter-spacing: var(--letter-spacing-heading);
  border-left:    var(--accent-border);
  padding-left:   10px;
  margin-bottom:  16px;
}

/* ─── PROFILE GRID — 2 columns ────────────────────────── */
.profile-grid {
  display: grid;
  grid-template-columns: var(--photo-width) 1fr;
  gap: var(--profile-gap);
  align-items: start;
}

.profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* PROFILE heading — larger to feel dominant */
.profile-heading {
  font-size:      var(--fs-profile-name);
  font-weight:    var(--fw-bold);
  font-family:    var(--font);
  letter-spacing: var(--letter-spacing-heading);
  border-left:    var(--accent-border);
  padding-left:   10px;
  margin-bottom:  16px;
}

.profile-title {
  font-weight:  var(--fw-bold);
  margin-bottom: 4px;
}

.profile-subtitle { margin-bottom: 4px; }
.profile-meta     { margin-bottom: 4px; }
.profile-line {
  white-space: nowrap;
  margin-bottom: 4px;
}

/* Social icons */
.social-icons {
  display:    flex;
  align-items: center;
  gap:        20px;
  margin-top: 16px;
}

.icon-link {
  width:   22px;
  height:  22px;
  color:   #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.icon-link svg   { width: 20px; height: 20px; }
.icon-link:hover { opacity: 1; }

/* Description column — right side of profile grid */
.profile-description {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profile-description .section-heading {
  /* same as global section-heading */
}

/* ─── EXPERIENCE ─────────────────────────────────────── */
.exp-item {
  margin-bottom: 24px;
}

.exp-header {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  margin-bottom:   4px;
}

.exp-role {
  font-weight: var(--fw-bold);
  font-size:   var(--fs-body);
}

.exp-date {
  font-size: var(--fs-label);
  color:     var(--color-muted);
}

.exp-company {
  font-style:    italic;
  margin-bottom: 4px;
}

.exp-desc {
  font-size: var(--fs-body);
}

/* ─── EDUCATION ───────────────────────────────────────── */
.edu-item {
  margin-bottom: var(--edu-item-gap);
}
.edu-item p { margin-bottom: 2px; }

/* ─── SOFTWARE — two columns ──────────────────────────── */
.sw-legend {
  font-size:   var(--fs-label);
  color:       var(--color-muted);
  display:     flex;
  align-items: center;
  gap:         6px;
  margin-bottom: 8px;
}

.sw-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.sw-col {
  display: flex;
  flex-direction: column;
}

.sw-category {
  margin-bottom: 8px;          /* tight gap between last row and next sub-heading */
}

.sw-category-label {
  font-size:      var(--fs-label);
  color:          var(--color-muted);
  margin-top:     16px;
  margin-bottom:  6px;
  letter-spacing: 0.03em;
}

/* Remove top margin from first category label in each column */
.sw-col .sw-category:first-child .sw-category-label {
  margin-top: 0;
}

.sw-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   8px;
}

.sw-name {
  font-weight:   var(--fw-bold);
  flex:          1;
  padding-right: 16px;
  font-size:     var(--fs-body);
}

.sw-circles {
  display:    flex;
  gap:        var(--circle-gap);
  flex-shrink: 0;
}

.circle {
  width:         var(--circle-size);
  height:        var(--circle-size);
  border-radius: 50%;
  border:        var(--circle-border);
  background:    var(--color-circle-empty);
  display:       inline-block;
  vertical-align: middle;
}

.circle.filled {
  background: var(--color-circle-fill);
}

/* ─── CERTIFICATES + LANGUAGE grid ───────────────────── */
.bottom-grid {
  display:   grid;
  grid-template-columns: 1fr 1fr;
  gap:       40px;
  align-items: start;
}

.cert-block { display: flex; flex-direction: column; gap: 0; }

.cert-item {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         8px 0;
  border-bottom:   1px solid var(--color-divider);
}

/* Certificate download — matches Portfolio/CV style */
.cta-link {
  font-size:   var(--cta-font-size);
  font-family: var(--font);
  font-weight: var(--fw-bold);
  color:       var(--color-text);
  white-space: nowrap;
  margin-left: 16px;
  transition:  opacity 0.2s;
}

.cta-link:hover { opacity: 0.6; }

.lang-block {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

/* ─── ACCOMPLISHMENTS ─────────────────────────────────── */
.accomplishment-grid {
  display:               grid;
  grid-template-columns: 1fr auto;
  gap:                   24px;
  align-items:           start;
}

.accomplishment-text {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

.acc-label { font-weight: var(--fw-bold); letter-spacing: 0.05em; }
.acc-title { font-weight: var(--fw-bold); }
.acc-meta  { margin-bottom: 4px; }

.text-block {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

/* ─── PLACEHOLDERS ────────────────────────────────────── */
.placeholder-black {
  background:      var(--color-placeholder);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #ffffff;
  font-family:     var(--placeholder-font);
  font-size:       var(--placeholder-font-size);
  text-align:      center;
  letter-spacing:  0.05em;
}

.placeholder-label { line-height: 1.5; }

.accomplishment-image {
  width:       80px;
  height:      80px;
  flex-shrink: 0;
}

.accomplishment-image img {
  width:       100%;
  height:      100%;
  object-fit:  contain;
}

.video-container {
  width:    100%;
  aspect-ratio: 16 / 9;
}

.video-container iframe {
  width:    100%;
  height:   100%;
  display:  block;
}

/* ─── BURGER MENU ─────────────────────────────────────── */
.nav-menu {
  position:    relative;
  justify-self: end;
}

.menu-btn {
  background:     none;
  border:         none;
  cursor:         pointer;
  display:        flex;
  flex-direction: column;
  gap:            5px;
  padding:        4px;
}

.menu-btn span {
  display:    block;
  width:      22px;
  height:     1.5px;
  background: #000000;
  transition: opacity 0.2s;
}

.menu-dropdown {
  display:    none;
  position:   absolute;
  top:        calc(100% + 16px);
  right:      0;
  background: #ffffff;
  border:     none;
  min-width:  260px;
  z-index:    500;
  flex-direction: column;
}

.menu-dropdown.open { display: flex; }

.menu-dropdown a {
  padding:       12px 20px;
  font-size:     18px;
  font-family:   'Calibri', sans-serif;
  color:         #000000;
  border-bottom: 1px solid #e0e0e0;
  transition:    background 0.15s;
}

.menu-dropdown a:last-child { border-bottom: none; }
.menu-dropdown a:hover      { background: #f5f5f5; }