/*
 * custom.css — Giuseppe Puglisi · Observational Cosmology
 * Dark hero / clean academic body · Inspired by Clark Group aesthetic
 * Type: Cormorant Garamond (display) + DM Sans (UI/body)
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,400&display=swap');

/* ━━━ DESIGN TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  /* Light theme (default) */
  --bg:       #edf1f7;
  --surface:  #ffffff;
  --surface2: #f3f6fb;
  --border:   #cdd5e2;
  --text:     #15223a;
  --text2:    #44587a;
  --text3:    #859ab8;
  --navy:     #0d1728;
  --blue:     #2260cc;
  --blue-dim: #1a4eab;
  --amber:    #c5782a;
  --hero:     rgba(8, 15, 34, 0.62);
  --tr:       0.25s ease;
  --r:        8px;
  --f-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --f-body:    'DM Sans', 'Roboto', system-ui, sans-serif;
}

/* Dark system preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:       #0c1220;
    --surface:  #111c30;
    --surface2: #0e1628;
    --border:   #1d2e48;
    --text:     #dce6f5;
    --text2:    #8aa0c0;
    --text3:    #4d6485;
    --navy:     #07101f;
    --blue:     #5290f0;
    --blue-dim: #3a72d8;
    --amber:    #e0954a;
    --hero:     rgba(5, 10, 22, 0.7);
  }
}

/* Explicit dark toggle */
:root[data-theme="dark"] {
  --bg:       #0c1220;
  --surface:  #111c30;
  --surface2: #0e1628;
  --border:   #1d2e48;
  --text:     #dce6f5;
  --text2:    #8aa0c0;
  --text3:    #4d6485;
  --navy:     #07101f;
  --blue:     #5290f0;
  --blue-dim: #3a72d8;
  --amber:    #e0954a;
  --hero:     rgba(5, 10, 22, 0.7);
}

/* ━━━ GLOBAL RESET ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--f-body) !important;
  font-size: 15px;
  line-height: 1.72;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-display) !important;
  color: var(--text) !important;
  text-wrap: balance;
}

a {
  color: var(--blue) !important;
  transition: color var(--tr) !important;
}

a:hover, a:focus {
  color: var(--amber) !important;
  text-decoration: none !important;
  outline: none !important;
}

body > section {
  background: var(--bg) !important;
}

/* ━━━ NAVIGATION ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.navbar-inverse {
  background: rgba(8, 15, 34, 0.93) !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.4) !important;
}

.navbar-inverse .navbar-brand {
  padding: 10px 15px !important;
  line-height: 1 !important;
}

.navbar-inverse .navbar-brand img {
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  transition: border-color var(--tr), opacity var(--tr) !important;
}

.navbar-inverse .navbar-brand img:hover {
  border-color: rgba(100, 170, 255, 0.5);
}

.navbar-inverse .navbar-nav {
  margin-top: 14px !important;
}

.navbar-inverse .navbar-nav > li > a {
  font-family: var(--f-body) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(200, 220, 248, 0.6) !important;
  padding: 7px 14px !important;
  border-radius: 5px !important;
  transition: color var(--tr), background var(--tr) !important;
}

.navbar-inverse .navbar-nav > li > a:hover {
  color: rgba(255, 255, 255, 0.95) !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: #ffffff !important;
  background: rgba(34, 96, 204, 0.3) !important;
}

/* ━━━ HERO SLIDER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#main-slider {
  position: relative;
}

/* Full-viewport hero */
#main-slider .carousel .item {
  height: 100vh !important;
  min-height: 560px;
  background-size: cover !important;
  background-position: center center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Dark overlay over Mirò images */
#main-slider .carousel .item::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: var(--hero);
  z-index: 0;
}

/* Carousel-inner and first item need height too */
#main-slider .carousel,
#main-slider .carousel-inner {
  height: 100vh !important;
  min-height: 560px;
}

#main-slider .carousel .item:first-child {
  position: relative !important;
}

/* Centered text content */
.carousel-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 32px;
  max-width: 820px;
  margin: 0 auto;
}

/* Name — large, elegant, weight 300 serif */
.carousel-content h2 {
  font-family: var(--f-display) !important;
  font-size: clamp(3rem, 7vw, 5.5rem) !important;
  font-weight: 300 !important;
  color: #ffffff !important;
  letter-spacing: 0.04em !important;
  line-height: 1.05 !important;
  margin: 0 0 14px !important;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5) !important;
}

/* Subtitle — small caps lab label */
.carousel-content p.animation {
  font-family: var(--f-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(160, 200, 255, 0.85) !important;
  margin: 0 0 30px !important;
}

/* Quote — italic serif, restrained */
.carousel-content h3.animation {
  font-family: var(--f-display) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: clamp(0.88rem, 1.6vw, 1.05rem) !important;
  color: rgba(255, 255, 255, 0.48) !important;
  line-height: 1.78 !important;
  max-width: 580px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: none !important;
  letter-spacing: 0.01em !important;
}

/* Other slide text — strip the dark box */
.carousel-content h2.boxed,
.carousel-content p.boxed {
  background: none !important;
  padding: 0 !important;
  color: #fff !important;
}

.carousel-content h2.boxed {
  font-size: clamp(2rem, 5vw, 3.8rem) !important;
  font-weight: 300 !important;
}

.carousel-content p.boxed {
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(180, 210, 255, 0.75) !important;
  font-family: var(--f-body) !important;
  font-weight: 500 !important;
}

/* ━━━ RECENT WORKS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#recent-works {
  background: var(--surface) !important;
  padding: 72px 0 80px !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}

#recent-works h2 {
  font-family: var(--f-display) !important;
  font-size: 1.6rem !important;
  font-weight: 400 !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 10px !important;
  margin-bottom: 16px !important;
  letter-spacing: 0.01em !important;
}

#recent-works h3 {
  font-family: var(--f-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--text3) !important;
  margin: 28px 0 10px !important;
}

/* Publication / project / code list items */
#recent-works ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#recent-works ul li {
  padding: 9px 12px 9px 14px !important;
  margin-bottom: 5px !important;
  border-left: 2px solid var(--border) !important;
  background: var(--surface2) !important;
  border-radius: 0 6px 6px 0 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  transition: border-left-color var(--tr), background var(--tr), transform var(--tr) !important;
}

#recent-works ul li:hover {
  border-left-color: var(--blue) !important;
  background: var(--surface) !important;
  transform: translateX(3px) !important;
}

#recent-works ul li a {
  color: var(--text2) !important;
  font-weight: 400 !important;
  text-decoration: none !important;
}

#recent-works ul li a b {
  color: var(--text) !important;
  font-weight: 500 !important;
}

#recent-works ul li:hover a b {
  color: var(--blue) !important;
}

/* "See full list on Google Scholar →" */
#recent-works p a {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.07em !important;
  color: var(--text3) !important;
  margin-top: 4px !important;
  text-decoration: none !important;
  transition: color var(--tr) !important;
}

#recent-works p a:hover {
  color: var(--blue) !important;
}

/* ━━━ PORTFOLIO / SOFTWARE CARDS ━━━━━━━━━━━━━━━━━━━━━━ */
.portfolio-item .item-inner {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 12px 12px 0 !important;
  transition: border-color var(--tr), box-shadow var(--tr), transform var(--tr) !important;
}

.portfolio-item .item-inner:hover {
  border-color: var(--blue) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 36px rgba(34, 96, 204, 0.12) !important;
}

.portfolio-item h5 {
  font-family: var(--f-body) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--text2) !important;
  background: var(--surface) !important;
  padding: 9px 12px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.portfolio-item .overlay {
  background: rgba(13, 23, 40, 0.88) !important;
  backdrop-filter: blur(6px) !important;
}

.portfolio-item .overlay .preview {
  background: var(--blue) !important;
  border: none !important;
  border-radius: 6px !important;
  color: #fff !important;
  padding: 8px 20px !important;
  transition: background var(--tr) !important;
}

.portfolio-item .overlay .preview:hover {
  background: var(--blue-dim) !important;
}

/* ━━━ BOTTOM / CONTACT (wet-asphalt override) ━━━━━━━━━ */
.wet-asphalt {
  background: var(--navy) !important;
}

.wet-asphalt,
.wet-asphalt h1,
.wet-asphalt h2,
.wet-asphalt h3,
.wet-asphalt h4,
.wet-asphalt h5,
.wet-asphalt h6 {
  color: #dce6f5 !important;
}

#bottom {
  padding: 60px 0 !important;
  background: var(--navy) !important;
}

#bottom h4 {
  font-family: var(--f-display) !important;
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  color: #e8f0ff !important;
  letter-spacing: 0.015em !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  padding-bottom: 8px !important;
  margin-bottom: 14px !important;
}

#bottom p {
  color: rgba(170, 190, 225, 0.75) !important;
  font-size: 13.5px !important;
  line-height: 1.75 !important;
}

#bottom b {
  color: rgba(210, 225, 250, 0.9) !important;
}

#bottom address {
  color: rgba(160, 182, 218, 0.7) !important;
  font-size: 13px !important;
  line-height: 2.1 !important;
}

.wet-asphalt a:not(.btn) {
  color: rgba(130, 180, 255, 0.8) !important;
}

.wet-asphalt a:not(.btn):hover {
  color: var(--amber) !important;
}

/* ━━━ SOCIAL BUTTONS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.btn-social {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(200, 220, 248, 0.65) !important;
  border-radius: 50% !important;
  transition: all var(--tr) !important;
}

.btn-social:hover {
  color: #fff !important;
  transform: scale(1.12) !important;
}

.btn-social.btn-facebook:hover  { background: #3b5998 !important; border-color: #3b5998 !important; }
.btn-social.btn-linkedin:hover  { background: #0077b5 !important; border-color: #0077b5 !important; }
.btn-social.btn-github:hover    { background: #2260cc !important; border-color: #2260cc !important; }
.btn-social.btn-google-plus:hover { background: #dd4b39 !important; border-color: #dd4b39 !important; }

/* ━━━ FOOTER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.midnight-blue {
  background: #060e1c !important;
}

#footer {
  padding: 22px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

#footer a {
  color: rgba(140, 165, 200, 0.45) !important;
}

#footer a:hover {
  color: var(--blue) !important;
}

/* ━━━ EMERALD / PAGE TITLE SECTIONS ━━━━━━━━━━━━━━━━━━━ */
.emerald {
  background: var(--navy) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055) !important;
}

#title {
  padding: 38px 0 30px !important;
}

#title h1 {
  font-family: var(--f-display) !important;
  font-size: 2.3rem !important;
  font-weight: 300 !important;
  color: #f0f5ff !important;
  letter-spacing: 0.025em !important;
  margin: 0 !important;
  line-height: 1.15 !important;
}

#title p {
  color: rgba(180, 200, 235, 0.55) !important;
  font-size: 12.5px !important;
  margin: 6px 0 0 !important;
}

ul.breadcrumb {
  background: transparent !important;
  margin-top: 26px !important;
}

ul.breadcrumb > li > a {
  color: rgba(180, 200, 235, 0.5) !important;
}

ul.breadcrumb > li.active {
  color: rgba(140, 180, 255, 0.8) !important;
}

/* ━━━ ABOUT ME ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#about-us {
  background: var(--surface) !important;
  padding-top: 64px !important;
  padding-bottom: 20px !important;
}

#about-us .col-sm-6 p {
  color: var(--text2) !important;
  font-size: 15px !important;
  line-height: 1.82 !important;
  margin-bottom: 18px !important;
}

#about-us .col-sm-6 p a {
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  text-decoration-color: rgba(34, 96, 204, 0.32) !important;
  color: var(--blue) !important;
}

#about-us .col-sm-6 p a:hover {
  color: var(--amber) !important;
  text-decoration-color: var(--amber) !important;
}

#about-us .col-sm-6 p b {
  color: var(--text) !important;
  font-weight: 600 !important;
}

#about-us .col-sm-6 h2 {
  font-size: 1.55rem !important;
  font-weight: 400 !important;
  margin-bottom: 18px !important;
}

/* ━━━ SKILLS PROGRESS BARS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.progress {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 3px !important;
  height: 26px !important;
  line-height: 26px !important;
  box-shadow: none !important;
  margin-bottom: 10px !important;
  overflow: hidden !important;
}

.progress-bar {
  font-family: var(--f-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  line-height: 26px !important;
  height: 26px !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  background: linear-gradient(90deg, var(--blue-dim), var(--blue)) !important;
}

.progress-bar-success {
  background: linear-gradient(90deg, #0a7a5a, #13a87e) !important;
}

.progress-bar-info {
  background: linear-gradient(90deg, #0972a8, #1195d8) !important;
}

.progress-bar-warning {
  background: linear-gradient(90deg, #9a5c12, #c5782a) !important;
}

.progress-bar-danger {
  background: linear-gradient(90deg, #8c2040, #c0315a) !important;
}

/* ━━━ COLLABORATORS / TEAM CARDS ━━━━━━━━━━━━━━━━━━━━━━ */
h1.center {
  font-family: var(--f-display) !important;
  font-size: 2rem !important;
  font-weight: 400 !important;
  color: var(--text) !important;
  letter-spacing: 0.02em !important;
}

#meet-the-team {
  background: var(--surface2) !important;
  border-radius: 12px !important;
  padding: 36px 20px !important;
  margin-top: 16px !important;
}

#meet-the-team .col-md-3 {
  margin-bottom: 18px !important;
}

#meet-the-team .center {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  padding: 20px 16px !important;
  transition: border-color var(--tr), box-shadow var(--tr), transform var(--tr) !important;
}

#meet-the-team .center:hover {
  border-color: var(--blue) !important;
  box-shadow: 0 6px 24px rgba(34, 96, 204, 0.1) !important;
  transform: translateY(-2px) !important;
}

#meet-the-team h5 {
  font-family: var(--f-body) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin: 0 0 4px !important;
}

#meet-the-team small.designation {
  display: block !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--blue) !important;
  margin: 2px 0 6px !important;
  font-family: var(--f-body) !important;
}

#meet-the-team p {
  font-size: 12.5px !important;
  color: var(--text2) !important;
  margin: 0 0 4px !important;
}

#meet-the-team a {
  font-size: 12px !important;
  color: var(--text3) !important;
}

#meet-the-team a:hover {
  color: var(--blue) !important;
}

/* ━━━ SERVICES (#portfolio-items) ━━━━━━━━━━━━━━━━━━━━━ */
#services {
  background: var(--surface) !important;
  padding: 64px 0 80px !important;
}

/* ━━━ CV / PORTFOLIO PAGE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#portfolio {
  background: var(--surface) !important;
  padding: 56px 0 !important;
}

#portfolio h1 {
  font-family: var(--f-display) !important;
  font-size: 1.7rem !important;
  font-weight: 400 !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 14px !important;
  margin-bottom: 22px !important;
}

#portfolio a[href*="pdf"] {
  display: inline-block;
  margin-top: 18px;
  padding: 10px 20px;
  background: var(--blue);
  color: #fff !important;
  border-radius: 6px;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none !important;
  transition: background var(--tr);
}

#portfolio a[href*="pdf"]:hover {
  background: var(--blue-dim) !important;
  color: #fff !important;
}

/* ━━━ RESEARCH INTERESTS TEXT ━━━━━━━━━━━━━━━━━━━━━━━━━ */
#bottom p b {
  display: block;
  color: rgba(200, 220, 255, 0.95) !important;
  font-family: var(--f-display) !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  margin-top: 8px !important;
  margin-bottom: 2px !important;
  letter-spacing: 0.01em !important;
}

/* ━━━ UTILITY ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.gap { margin-bottom: 40px; }

::selection {
  background: rgba(34, 96, 204, 0.2);
  color: var(--text);
}

::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue); }

/* ━━━ RESPONSIVE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {
  #main-slider .carousel .item,
  #main-slider .carousel,
  #main-slider .carousel-inner {
    height: 100svh !important;
    min-height: 480px;
  }

  .carousel-content h2 {
    font-size: 2.4rem !important;
  }

  .carousel-content h3.animation {
    font-size: 0.88rem !important;
  }

  #title h1 { font-size: 1.7rem !important; }
  .navbar-inverse .navbar-nav { margin-top: 0 !important; }

  #recent-works { padding: 50px 0 60px !important; }
  #meet-the-team { padding: 24px 12px !important; }
}