/* Profile Page Styles - Collapsible Sections */

/* ============================================
   Profile Sections
   ============================================ */
.profile-section {
  margin-bottom: var(--spacing-lg);
}

.profile-card {
  background-color: var(--color-bg-warm);
  border: 2px dashed var(--color-border-gold);
  padding: var(--spacing-md);
  transform: rotate(0.5deg);
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.08);
  transition: transform var(--transition-base), 
              box-shadow var(--transition-base);
}

.profile-card:nth-child(even) {
  transform: rotate(-0.5deg);
}

.profile-card:hover {
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.12);
}

.profile-card__title {
  font-family: var(--font-headline);
  font-size: 1.75rem;
  margin-bottom: var(--spacing-md);
  color: var(--color-text);
  transform: rotate(-0.3deg);
}

.profile-card__content {
  font-family: var(--font-body);
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
  line-height: 1.7;
}

.profile-card__content:last-child {
  margin-bottom: 0;
}

/* ============================================
   Current Role
   ============================================ */
.current-role {
  padding: var(--spacing-sm) 0;
}

.current-role__company {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  color: var(--color-accent);
  margin-bottom: var(--spacing-xs);
  transform: rotate(0.2deg);
}

.current-role__position {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--spacing-xs);
}

.current-role__duration,
.current-role__location {
  font-family: var(--font-body);
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin-bottom: var(--spacing-xs);
}

.current-role__description {
  font-family: var(--font-body);
  color: var(--color-text);
  margin-top: var(--spacing-sm);
  line-height: 1.7;
}

/* ============================================
   Expandable Sections
   ============================================ */
.expandable-section {
  background-color: var(--color-bg-warm);
  border: 2px dashed var(--color-border-gold);
  margin-bottom: var(--spacing-md);
  overflow: hidden;
  transform: rotate(-0.3deg);
  transition: transform var(--transition-base), 
              box-shadow var(--transition-base);
}

.expandable-section:nth-child(even) {
  transform: rotate(0.3deg);
}

.expandable-section:hover {
  transform: rotate(0deg);
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.08);
}

.expandable-section__toggle {
  width: 100%;
  padding: var(--spacing-md);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  color: var(--color-text);
  transition: background-color var(--transition-base);
  min-height: 44px;
}

.expandable-section__toggle:hover {
  background-color: var(--color-accent-muted);
}

.expandable-section__toggle:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.expandable-section__title {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  color: var(--color-text);
  transform: rotate(-0.2deg);
}

.expandable-section__icon {
  font-family: var(--font-headline);
  font-size: 2rem;
  color: var(--color-accent);
  transition: transform var(--transition-base);
  transform: rotate(0deg);
  line-height: 1;
}

.expandable-section__toggle[aria-expanded="true"] .expandable-section__icon {
  transform: rotate(45deg);
}

.expandable-section__content {
  padding: 0 var(--spacing-md);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out, 
              padding-top 0.4s ease-out,
              padding-bottom 0.4s ease-out;
}

.expandable-section__content:not([hidden]) {
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-md);
}

/* ============================================
   Experience Items
   ============================================ */
.experience-item {
  padding: var(--spacing-md) 0;
  border-bottom: 1px dashed var(--color-border-gold);
  transform: rotate(0.1deg);
}

.experience-item:last-child {
  border-bottom: none;
}

.experience-item__company {
  font-family: var(--font-headline);
  font-size: 1.3rem;
  color: var(--color-accent);
  margin-bottom: var(--spacing-xs);
  transform: rotate(-0.2deg);
}

.experience-item__position {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--spacing-xs);
}

.experience-item__duration,
.experience-item__location {
  font-family: var(--font-body);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-bottom: var(--spacing-xs);
}

.experience-item__description {
  font-family: var(--font-body);
  color: var(--color-text);
  margin-top: var(--spacing-sm);
  line-height: 1.7;
}

/* ============================================
   Certifications
   ============================================ */
.cert-list {
  list-style: none;
  padding: 0;
}

.cert-item {
  font-family: var(--font-body);
  color: var(--color-text);
  padding: var(--spacing-sm) 0;
  padding-left: var(--spacing-md);
  position: relative;
  transform: rotate(0.1deg);
}

.cert-item::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: bold;
}

.cert-item:nth-child(even) {
  transform: rotate(-0.1deg);
}

/* ============================================
   Education Items
   ============================================ */
.education-item {
  padding: var(--spacing-md) 0;
  border-bottom: 1px dashed var(--color-border-gold);
  transform: rotate(0.1deg);
}

.education-item:last-child {
  border-bottom: none;
}

.education-item__institution {
  font-family: var(--font-headline);
  font-size: 1.3rem;
  color: var(--color-accent);
  margin-bottom: var(--spacing-xs);
  transform: rotate(-0.2deg);
}

.education-item__degree {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
}

.education-item__duration {
  font-family: var(--font-body);
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* ============================================
   Skills List
   ============================================ */
.skills-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.skill-item {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 2px dashed var(--color-border-gold);
  padding: var(--spacing-xs) var(--spacing-sm);
  transform: rotate(0.5deg);
  transition: transform var(--transition-base);
}

.skill-item:nth-child(even) {
  transform: rotate(-0.5deg);
}

.skill-item:hover {
  transform: rotate(0deg) scale(1.05);
  background-color: var(--color-accent-muted);
}

/* ============================================
   Languages List
   ============================================ */
.languages-list {
  list-style: none;
  padding: 0;
}

.language-item {
  font-family: var(--font-body);
  color: var(--color-text);
  padding: var(--spacing-sm) 0;
  padding-left: var(--spacing-md);
  position: relative;
  transform: rotate(0.1deg);
}

.language-item::before {
  content: "🌐";
  position: absolute;
  left: 0;
}

.language-item:nth-child(even) {
  transform: rotate(-0.1deg);
}

/* ============================================
   Contact List
   ============================================ */
.contact-list {
  list-style: none;
  padding: 0;
}

.contact-item {
  font-family: var(--font-body);
  padding: var(--spacing-sm) 0;
  transform: rotate(0.1deg);
}

.contact-item:nth-child(even) {
  transform: rotate(-0.1deg);
}

.contact-item a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-base);
  border-bottom: 1px dashed transparent;
}

.contact-item a:hover {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 768px) {
  .profile-card__title,
  .expandable-section__title {
    font-size: 1.3rem;
  }
  
  .current-role__company,
  .experience-item__company,
  .education-item__institution {
    font-size: 1.1rem;
  }
  
  .skills-list {
    flex-direction: column;
  }
  
  .skill-item {
    width: 100%;
  }
}

/* ============================================
   Accessibility
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .expandable-section__content {
    transition: none;
  }
  
  .expandable-section__icon {
    transition: none;
  }
}