/*-------------------------------------------------------------------------------
Main Content
-------------------------------------------------------------------------------*/

/* Body */
.section {
  min-height: 100vh;
  padding: 60px 20px;
  box-sizing: border-box;
  width: 100%;
}

/* left section */

.sidebar {
    width: 18%;
    max-width: 250px;
    min-width: 180px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    background: var(--bg-pmb);
    color: var(--text-light);
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    z-index: 999;
    text-align: center;
    transition: transform 0.3s ease;
}

    .art-ls-divider {
    width: 100%;
    height: 1px;
    opacity: .3;
     place-items:center;
}

/*-------------------------------
 Sidebar header
-------------------------------*/

 /* Sidebar fixed header (name, position, CV) */

     img {
      border-radius: 50%;
      position: relative;
      margin: 10px;
      padding: 0;
    }

.sidebar-header {
    text-align: center;
      padding-top: 15px;
      flex-shrink: 0;
      position: relative; 
      -webkit-box-shadow: 0 3px 8px 0 rgba(15, 15, 20, .2);
      box-shadow: 0 3px 8px 0 rgba(15, 15, 20, .2);
      flex-shrink: 0;
      position: relative
    }

.sidebar-header .social-icons {
      display: flex;
      justify-content: center; /* center horizontally */
      align-items: center;
      list-style: none;
      padding: 0;
      margin: 0;
    }

.sidebar-header .social-icons span {
      color: var(--primary);
      padding-left: 5px;
    }

/*-------------------------------
Sidebar scrollable content-middle part
-------------------------------*/


.sidebar-scroll {
      overflow-y: auto;
      padding: 5px;
      margin: 5px;
      flex-grow: 1;
      text-align: center;
    }

    
 /*-------------------------------
Sidebar Circular Progress Bars-Languages
-------------------------------*/

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr); /* always 2 in a row */
  justify-items: center; /* center each progress circle */
   align-items: start;
}


/* Component wrapper */
.c-progress{
  --value: 0;
  width: var(--size);
  aspect-ratio: 1 / 1;
  display:grid;
  place-items:center;
  position:relative;
}

/* number + % wrapper */
.c-progress .c-progress-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 1.1rem;
}

.c-progress .c-progress-value span {
  font-size: 0.8rem;
}

.c-progress__label{
  text-align:center; 
  margin-top:.1rem; 
  font-weight:200;
  font-size: 12px;
}

.c-progress svg{
  width:100%; height:100%;
  transform: rotate(-90deg); display:block;
}
.c-progress circle{
  fill:none; 
  stroke-linecap:round;
}

.c-track{ stroke: var(--track); stroke-width: var(--stroke); }
.c-bar{
  stroke: var(--primary); stroke-width: var(--stroke);
  stroke-dasharray: 0 999;
  transition: stroke-dasharray var(--speed) ease;
}

.c-progress:hover .c-bar{
  filter: drop-shadow(0 2px 6px rgba(35,165,146,.35));
}

.sr-only{
  position:absolute !important; 
  width:1px; 
  height:1px; 
  padding:0; margin:-1px;
  overflow:hidden; 
  clip:rect(0,0,0,0); 
  white-space:nowrap; border:0;
}

/*-------------------------------
Sidebar Horizontal Progress Bars-Skills%
-------------------------------*/


.skill {
  margin-bottom: 20px;
}

.skill-header {
  display: flex;
  justify-content: space-between; /* pushes label left, % right */
  font-size: 12px;
  margin-bottom: 6px;
}

.skill-percent {
  font-size: 0.85rem;
  font-weight: bold;
}

.progress {
  position: relative;
  border-radius: 8px;
  height: 8px;
  width: 100%;
  overflow: hidden;
  background: var(--white) /* a subtle bg track */
}

.progress-bar {
  height: 8px;
  width: 0; /* animated via JS */
  border-radius: 8px;
  background: var(--primary); /* accent color */
  transition: width 1s ease;
}

/* Add % text inside the bar */
.progress-bar::after {
  color: #3b82f6;
}

/*-------------------------------
Sidebar Skill checkbox
-------------------------------*/
/* Lish for skills in left side bar */

.art-knowledge-list {
  list-style: none;        /* remove default bullets */
  padding-left: 0;
  margin: 0;
}

.art-knowledge-list li {
  position: relative;
  padding-left: 0px;      /* space for the icon */
  margin-bottom: 20px;
  font-size: var(--font-small);
  color: var(--text-light);    /* adjust for your theme */
}

.art-knowledge-list li::before {
  content: "\2713";           /* Unicode checkmark ✓ */
  color: var(--primary);          /* green tick */
  font-weight: bold;
  flex-shrink: 0;             /* prevent shrinking */
  padding-right: 5px;
}

/*-------------------------------
 Sidebar footer
-------------------------------*/

.sidebar-footer{
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center; /* center horizontally */
    flex-shrink: 0;
    position: relative; 
    padding: 10px;
    }

.sidebar-footer .social-icons {
    display: flex;
    align-items: center; /* vertical center */
    gap: 15px;
    list-style: none;
    margin: 0;
    padding: 0;
      }

.sidebar-footer .social-icons li {
    display: flex;
    align-items: center; /* keep icon + text aligned */
    }

.sidebar-footer .social-icons a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--white);
    text-decoration: none;
    transition: color 0.3s ease;
}

.sidebar-footer .social-icons ion-icon {
  font-size: 1.5rem;
  vertical-align: middle;
}

.sidebar-footer .social-icons a:hover {
  color: var(--primary);
}

.sidebar-footer-sm .social-icons a:active {
  color: var(--primary);
}

/*-------------------------------
 Right Body Main Content
-------------------------------*/


/* Base layout for large screens */


/* Main content grows */

.main-content {
  flex: 1;
  padding: 40px 20px;
  margin-left: calc(var(--sidebar-left) + var(--sidebar-gap));
  margin-right: var(--sidebar-right);
  width: calc(100% - var(--sidebar-left) - var(--sidebar-right) - var(--sidebar-gap));
  overflow-y: auto;
}

/* Right-side content */
/* Content sections pushed below header */
.main-content .content {
  padding: 100px 40px 20px 30px; /* extra top padding for header space */
  min-height: 50vh;
  
}

.main-header {
    position: fixed;
    top: 0;
    left: calc(20%); /* start after left sidebar */
    right: 0;
    height: 60px;
    background: var(--bg-dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6rem;
    z-index: 1000;
}

/*header*/


/* Navigation inside header */
.header-nav {
  display: flex;
  justify-content: space-between; /* left + right separation */
  align-items: center;
  width: 100%;
}

.nav-right {
  display: flex;
  align-items: center;
  text-align: center;
  flex-shrink: 0;
  position: relative; 
}

.nav-right a {
  transition: color 0.3s;
}

/* Container */
.nav-right .social-icons {
  display: flex;
  align-items: center; /* vertical center */
  gap: 15px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Each li */
.nav-right .social-icons li {
  display: flex;
  align-items: center; /* keep icon + text aligned */
}

/* Icon links - MAIN FOR HEADER */
.nav-right .social-icons a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--white);
  text-decoration: none;
  transition: color 0.3s ease;
}


/* icon-color */

/* Icon sizes */
.nav-right .social-icons ion-icon {
  font-size: 1.5rem;
  vertical-align: middle;
}

.nav-right .social-icons a:hover {
  color: var(--primary);
}

.nav-right .social-icons a:active {
  color: var(--primary);
}


/* Material icons */
.material-icons {
    font-size: 18px;
      display: flex;
      justify-content: center; /* center horizontally */
      align-items: center;
      gap: 15px; /* spacing between icons */
      list-style: none;
      padding: 0;
      margin: 0;
}
.material-icons:hover, .material-icons:active {
  color: var(--primary);
}

/* Resume link styled as border button */
.resume-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--primary); 
  border-radius: 50px;
  background: transparent;
  color: var(--primary);
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

.resume-link a ion-icon {
  font-size: 1.2rem;
}

.resume-link a:hover {
  color: var(--text-light);
  border-color: var(--text-light);
  transform: translateY(-2px);
}

/*-------------------------------
Right Sidebar Nav
-------------------------------*/
.sidebar-nav {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 1000;
}

.sidebar-nav a {
    color: var(--text-gray);
    text-decoration: none;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 500;
    font-size: 0.85rem;
    transition: color 0.3s;
     line-height: 1.2;
}

.sidebar-nav a.active, 
.sidebar-nav a:hover {
    color: var(--text-light);
    font-weight: 600;
}

.sidebar-nav nav {
  display: flex;
  flex-direction: column;
  gap: 20px;
}


.sidebar.active {
        transform: translateX(0); /* show when toggled */
        z-index: 1001;
    }


 /*-------------------------------
Footer
-------------------------------*/

.site-footer {
    background: var(--bg-dark);
    color: var(--text-light);
    text-align: center;
    padding: 20px 10px;
    font-size: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: auto; /* keeps footer at bottom */
}

.site-footer p {
  margin: 0;
  letter-spacing: 0.5px;
}