/* ============================================================
   ABOUT PAGE — iMac G3 Candy Aesthetic
   Linked only from about.html — does not affect other pages.
   ============================================================ */

/* ── Main about panel: Mac window chrome ── */
#about-me.panel {
  border-radius: 22px;
  border: 2px solid rgba(160, 120, 255, 0.45);
  overflow: visible;
  box-shadow:
    0 8px 32px rgba(80, 40, 180, 0.25),
    0 2px 8px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Mac-style window titlebar */
#about-me .panel-title {
  background: linear-gradient(180deg,
    rgba(130, 90, 240, 1) 0%,
    rgba(90, 50, 200, 1)  50%,
    rgba(70, 30, 170, 1)  100%
  );
  border-radius: 20px 20px 0 0;
  padding: 7px 14px 7px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  border-bottom: 2px solid rgba(200, 160, 255, 0.3);
}

/* Traffic light dots on the right */
#about-me .panel-title::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff6e6e, #cc2222);
  box-shadow: 16px 0 0 radial-gradient(circle at 35% 35%, #ffdd44, #cc9900),
              32px 0 0 radial-gradient(circle at 35% 35%, #66dd44, #229900);
}

/* Pinstripe texture on panel body */
#about-me .panel-body {
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 1px,
    rgba(255,255,255,0.022) 1px,
    rgba(255,255,255,0.022) 2px
  );
  border-radius: 0 0 20px 20px;
}

/* ── About cards: iMac G3 candy plastic ── */
.about-card {
  border-radius: 20px !important;
  padding: 14px 16px !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.about-card:hover {
  transform: translateY(-3px) scale(1.01);
}

/* Glossy plastic sheen at the top */
.about-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 48%;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.22) 0%,
    rgba(255,255,255,0.06) 60%,
    transparent 100%
  );
  border-radius: 20px 20px 0 0;
  pointer-events: none;
  z-index: 1;
}

/* Bondi Blue */
.about-card:nth-child(1) {
  background: linear-gradient(160deg,
    rgba(55, 185, 215, 0.45) 0%,
    rgba(20, 130, 175, 0.28) 100%
  ) !important;
  border: 2px solid rgba(70, 200, 235, 0.55) !important;
  box-shadow:
    0 4px 20px rgba(55, 185, 215, 0.25),
    inset 0 1px 0 rgba(255,255,255,0.12);
}

/* Grape */
.about-card:nth-child(2) {
  background: linear-gradient(160deg,
    rgba(185, 90, 230, 0.45) 0%,
    rgba(130, 40, 185, 0.28) 100%
  ) !important;
  border: 2px solid rgba(200, 110, 245, 0.55) !important;
  box-shadow:
    0 4px 20px rgba(185, 90, 230, 0.25),
    inset 0 1px 0 rgba(255,255,255,0.12);
}

/* Tangerine */
.about-card:nth-child(3) {
  background: linear-gradient(160deg,
    rgba(255, 155, 45, 0.45) 0%,
    rgba(220, 100, 10, 0.28) 100%
  ) !important;
  border: 2px solid rgba(255, 175, 70, 0.55) !important;
  box-shadow:
    0 4px 20px rgba(255, 155, 45, 0.25),
    inset 0 1px 0 rgba(255,255,255,0.12);
}

/* Card headers */
.about-card h3 {
  font-family: var(--font-px) !important;
  font-size: 0.48rem !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.95) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
  border-bottom: 1px solid rgba(255,255,255,0.2) !important;
  padding-bottom: 6px !important;
  position: relative;
  z-index: 2;
}

.about-card .about-list {
  position: relative;
  z-index: 2;
}

.about-list li {
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* ── Light mode overrides ── */
html.theme-light #about-me.panel {
  border-color: rgba(100, 60, 200, 0.4);
  box-shadow: 0 8px 32px rgba(100, 60, 200, 0.18), 0 2px 8px rgba(0,0,0,0.12);
}

html.theme-light .about-card:nth-child(1) {
  background: linear-gradient(160deg,
    rgba(55, 185, 215, 0.55) 0%,
    rgba(20, 130, 175, 0.35) 100%
  ) !important;
}

html.theme-light .about-card:nth-child(2) {
  background: linear-gradient(160deg,
    rgba(185, 90, 230, 0.5) 0%,
    rgba(130, 40, 185, 0.32) 100%
  ) !important;
}

html.theme-light .about-card:nth-child(3) {
  background: linear-gradient(160deg,
    rgba(255, 155, 45, 0.55) 0%,
    rgba(220, 100, 10, 0.35) 100%
  ) !important;
}