/* ---------------------------------------
   ThaireFaruq – About Me Page CSS
   File: /assets/css/aboutme.css

   Purpose:
   - Improve typography + spacing inside the page content
   - Make long skill lists feel calmer and more “designed”
   - Keep your existing page.css components intact
---------------------------------------- */

:root{
  /* Uses your existing tokens if they exist; falls back safely */
  --am-ink: var(--ink, #31252d);
  --am-muted: var(--muted, #7b6b73);
  --am-line: var(--line, #ecd6e2);
  --am-accent: var(--accent, #e39bb8);
  --am-accent-soft: var(--accent-soft, #f6c7da);

  --am-soft-bg: rgba(255,255,255,.72);
  --am-soft-shadow: 0 14px 30px rgba(148,112,136,.14);
  --am-radius: 18px;
}

/* Tighten overall reading measure + improve rhythm */
.page-body{
  font-size:1rem;
  color:var(--am-ink);
}

.page-body p{
  margin:0 0 .95rem;
  color:rgba(49,37,45,.92);
  letter-spacing:.005em;
}

.page-body p:last-child{ margin-bottom:0; }

/* Links: softer + consistent */
.page-body a{
  color:#2563eb;
  text-decoration:underline;
  text-underline-offset:2px;
}
.page-body a:hover{
  text-decoration:none;
}

/* Section headings: more “designed” but not shouty */
.page-body h2{
  margin:1.35rem 0 .65rem;
  font-size:1.08rem;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(49,37,45,.92);
  display:flex;
  align-items:center;
  gap:.6rem;
  position:relative;
}

.page-body h2::after{
  content:"";
  height:1px;
  flex:1;
  background:linear-gradient(90deg, rgba(227,155,184,.55), rgba(236,214,226,0));
  margin-top:2px;
}

.page-body h2:first-child{ margin-top:.2rem; }

/* Lead paragraph after H2: slightly larger and calmer */
.page-body h2 + p{
  font-size:1.02rem;
  color:rgba(49,37,45,.88);
}

/* Make strong text a bit more elegant */
.page-body strong{
  font-weight:700;
  color:rgba(49,37,45,.98);
}

/* ---------------------------------------
   Info boxes (yellow/blue/green) — upgrades
   Assumes your existing markup:
   .info-box, .info-box__title, .info-box__body
---------------------------------------- */

.info-box{
  border-radius:var(--am-radius);
  border:1px solid rgba(236,214,226,.92);
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,247,251,.65));
  box-shadow: var(--am-soft-shadow);
  overflow:hidden;
  margin:1rem 0 1.1rem;
}

/* Title strip */
.info-box__title{
  padding:12px 14px;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:rgba(49,37,45,.82);
  border-bottom:1px dashed rgba(236,214,226,.9);
  display:flex;
  align-items:center;
  gap:.55rem;
}

/* Add a little “badge dot” */
.info-box__title::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  background:rgba(227,155,184,.55);
  box-shadow:0 0 0 4px rgba(227,155,184,.14);
}

/* Body */
.info-box__body{
  padding:12px 14px 14px;
}

/* Lists inside info-box: custom bullets + better spacing */
.info-box__body ul{
  list-style:none;
  margin:0;
  padding:0;
}

.info-box__body li{
  position:relative;
  padding-left:1.35rem;
  margin:0 0 .72rem;
  line-height:1.6;
  color:rgba(49,37,45,.92);
}

.info-box__body li:last-child{ margin-bottom:0; }

.info-box__body li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:.52rem;
  height:.52rem;
  border-radius:999px;
  background:rgba(255,255,255,.95);
  border:2px solid rgba(227,155,184,.45);
  box-shadow:0 2px 10px rgba(148,112,136,.12);
}

/* Em-dash text spacing: keep it clean */
.info-box__body li strong{
  display:inline;
}
.info-box__body li strong + span{ margin-left:.25rem; }

/* Variants: subtle tone shifts */
.info-box--yellow{
  border-color:rgba(250,204,21,.45);
  background:linear-gradient(180deg, rgba(255,251,235,.92), rgba(254,249,195,.72));
}
.info-box--yellow .info-box__title{
  color:#7a4a10;
  border-bottom-color:rgba(250,204,21,.55);
}
.info-box--yellow .info-box__title::before{
  background:rgba(250,204,21,.75);
  box-shadow:0 0 0 4px rgba(250,204,21,.18);
}
.info-box--yellow .info-box__body li::before{
  border-color:rgba(250,204,21,.55);
}

.info-box--blue{
  border-color:rgba(59,130,246,.22);
  background:linear-gradient(180deg, rgba(239,246,255,.92), rgba(219,234,254,.70));
}
.info-box--blue .info-box__title{
  color:rgba(30,64,175,.85);
  border-bottom-color:rgba(59,130,246,.22);
}
.info-box--blue .info-box__title::before{
  background:rgba(59,130,246,.55);
  box-shadow:0 0 0 4px rgba(59,130,246,.14);
}
.info-box--blue .info-box__body li::before{
  border-color:rgba(59,130,246,.30);
}

.info-box--green{
  border-color:rgba(34,197,94,.22);
  background:linear-gradient(180deg, rgba(236,253,245,.92), rgba(209,250,229,.70));
}
.info-box--green .info-box__title{
  color:rgba(20,83,45,.85);
  border-bottom-color:rgba(34,197,94,.22);
}
.info-box--green .info-box__title::before{
  background:rgba(34,197,94,.55);
  box-shadow:0 0 0 4px rgba(34,197,94,.14);
}
.info-box--green .info-box__body li::before{
  border-color:rgba(34,197,94,.30);
}

/* ---------------------------------------
   “Short facts” box: make it feel like a grid
   (This targets the last yellow info-box on the page)
---------------------------------------- */

.page-body h2 + .info-box--yellow{
  /* leave as-is */
}

/* If your “Short facts” section uses .info-box--yellow right after it,
   this will turn the list into a neat grid without changing markup */
.page-body h2:nth-of-type(n) + .info-box--yellow .info-box__body ul{
  /* no-op by default */
}

/* Safer targeting: any info-box that contains "At a glance" title */
.info-box .info-box__title{
  /* already styled above */
}

/* Improve readability on mobile (more padding, slightly bigger text) */
@media (max-width:520px){
  .page-body{ font-size:1.02rem; }
  .info-box__title{ padding:12px 14px; }
  .info-box__body{ padding:12px 14px 14px; }
}

/* Desktop: widen list comfort a bit */
@media (min-width:900px){
  .page-body p{ max-width:78ch; }
  .info-box__body{ max-width:92ch; }
}

/* Subtle “section spacing” without needing extra markup */
.page-body h2 + p + p{
  margin-top:-.25rem;
}

/* Optional: reduce visual heaviness of very long lists */
.info-box__body li{
  background:rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.55);
  border-radius:14px;
  padding:10px 12px 10px 1.65rem;
}

.info-box__body li::before{
  left:.65rem;
}

.info-box__body li:hover{
  background:rgba(255,255,255,.55);
}

/* Make spacing inside list-items consistent */
.info-box__body li strong{
  margin-right:.25rem;
}