/* Footer cat GIF right alignment */
/* Sezione footer */
.footer-section {
  display: flex;
  flex-direction: row;   /* allinea in orizzontale */
  align-items: center;   /* centra verticalmente */
  justify-content: space-between;
  width: 100%;
}

/* Colonna testo a sinistra */
.footer-left {
  flex: 0 0 70%;  /* occupa il 70% */
}

/* Colonna gatto a destra */
.footer/* Icon Utilities
   ============================== */
i.fa-heart { color: #ed1515; }
.white-text .fa-heart {
  color: #ed1515 !important;
}

/* Carousel Styles
   ============================== */
#carousel-cocktail .carousel-item img,
#carousel-runrun .carousel-item img {
  max-height: 600px;
  width: auto;
  margin: 0 auto;
  object-fit: contain;
}
.carousel-inner {
  background: rgba(0,0,0,0.1);
  backdrop-filter: blur(4px);
}ight {
  flex: 0 0 30%;  /* occupa il 30% */
  display: flex;
  justify-content: flex-end;
  align-items: center;
}


/* ==============================
   Root CSS Variables & Themes
   ============================== */
:root {
  --bg-color: #fff;
  --text-color: #343a40;
  --link-color-def: #343a40;
  --primary-color: #00d646;
  --toolbar-color: #4a5568;
  --secondary-bg: #f8f9fa;
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #f8f9fa;
  --link-color-def: #343a40;
  --toolbar-color: #4a5568;
  --primary-color: #4a5568;
  --secondary-bg: #2d2d2d;
  --border-color: #4a4a4a;
  --link-color: #63b3ed;
  --hover-color: #90cdf4;
}

/* ==============================
   Base & Global Layout
   ============================== */
html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
    font-family:'Open Sans', sans-serif;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: all 0.3s ease;
  color: #868e96; /* Secondary text color */
}

/*
==============================
background liquid effect
============================== */
body, html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}




   /* ==============================
   Liquid Background Effect OLD
   ============================== */

   
.liquid-bg {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, #23233a 0%, #1b232d 100%),
    radial-gradient(ellipse at 20% 40%, rgba(60,90,200,0.22) 0%, transparent 60%),
    radial-gradient(ellipse at 90% 80%, rgba(0,214,70,0.09) 0%, transparent 70%);
  /* Pattern glass highlight */
  filter: blur(0.5px) brightness(0.85);
  opacity: 0.96;
}

#webgl-container {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 1;
  pointer-events: none;
}
.container-fluid, .resume-section { z-index: 2; position: relative; }

/* ==============================
   WebGL Container
   ============================== */
/* This container is used for WebGL effects, positioned behind the main content */


#webgl-container {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
}

.container-fluid,
.resume-section {
  position: relative;
  z-index: 2;
}
/* Empty section layout only */
@media (min-width: 768px) {
  /* solo per schermi larghi */
}
section.empty-section {
    min-height: 100vh;
  }


/* Titoli struttura */
h1, h2, h3, h4, h5, h6 {
  font-family:'Saira Extra Condensed', sans-serif; 
  text-transform: uppercase;
}
h1 { font-size: 6rem; line-height: 5.5rem; }
h2 { font-size: 3.5rem; }
.subheading {
  text-transform: uppercase;
  font-size: 1.35rem;
}

/* Resume section layout only */
section.resume-section {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}
section.resume-section .resume-item .resume-date {
  min-width: none;
}

/* ==============================
   Typography & Text Utilities
   ============================== */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Saira Extra Condensed', serif;
  font-weight: 700;
  text-transform: uppercase;
}
h1{
    color: var(--text-color);
}
h2, h3, h4, h5, h6 {
    
  color: #fff; /* glass: testo sempre chiaro */
}

h1 { font-size: 6rem; line-height: 5.5rem; }
h2 { font-size: 3.5rem; }
.subheading {
  text-transform: uppercase;
  font-weight: 500;
  font-family:'Saira Extra Condensed', sans-serif; 
  font-size: 1.35rem;
  color: inherit;
}

p.bold { font-weight: bold; }
span.through { text-decoration: line-through; }

.text-primary { color: var(--primary-color) !important; }


.theme-switch {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  padding: 0.5rem 1rem;
}
.theme-switch:hover {
  color: rgba(255, 255, 255, 0.75);
  transform: scale(1.1);
}
.theme-switch:focus { outline: none; }
.mobile-theme-switch { margin-left: auto; }
.desktop-theme-switch {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 1rem;
}
@media (min-width: 992px) {
  .desktop-theme-switch { margin-top: 2rem; }
}

/* ==============================
   Social Icons & Lists
   ============================== */
.list-social-icons {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: flex-start;
}
.list-social-icons .list-inline-item { margin-right: 0; }
.list-social-icons a {
  color: #495057;
  transition: transform 0.3s ease, color 0.3s;
  display: block;
}
.list-social-icons a:hover {
  color: #00d646;
  transform: scale(1.1);
}
.list-social-icons a .fa-lg { font-size: 1.75rem; }

.list-icons { font-size: 3rem; }
.list-icons .list-inline-item i:hover { color: #00d646; }

/* ==============================
   Resume Section (Glass/Apple style)
   ============================== */
.resume-section {
  background: rgba(255,255,255,0.17); /* Glass base */
  border-radius: 2rem;
  margin: 2rem 2rem 2rem 2rem;
  box-shadow: 0 8px 40px 0 rgba(34,34,51,0.13), 0 1.5px 8px 0 rgba(0,0,0,0.11);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1.5px solid rgba(255,255,255,0.28);
  outline: 1px solid rgba(255,255,255,0.16);
  position: relative;
  transition: box-shadow 0.3s, border-color 0.2s;
  overflow: hidden;
  z-index: 1;
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}
@media (max-width: 600px) {
  .resume-section {
    backdrop-filter: blur(4px) saturate(130%);
    -webkit-backdrop-filter: blur(4px) saturate(130%);
    margin: 1rem;
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
}
@media (min-width: 992px) {
  .resume-section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

.resume-section .my-auto {
  background: linear-gradient(120deg,rgba(255,255,255,0.15) 80%,rgba(0,214,70,0.07));
  border-radius: 1.5rem;
  padding: 1rem 2rem;
  backdrop-filter: blur(2px);
}
.resume-section h2{
  display: inline-block;
  padding: 0.2em 0.75em;
  border-radius: 1rem;
  color: #fff;
}
.resume-section h1,
.resume-section h3 {
  background: linear-gradient(90deg, rgba(0,214,70,0.11) 0%,rgba(255,255,255,0.15) 100%);
  display: inline-block;
  padding: 0.2em 0.75em;
  border-radius: 1rem;
  backdrop-filter: blur(1.5px);
  color: #fff;
}

.resume-section .resume-date {
  background: rgba(255,255,255,0.22);
  border-radius: 1rem;
  padding: 0.5em 1em;
  font-weight: 600;
  font-size: 1.1em;
  letter-spacing: 0.01em;
  color: #222233;
  box-shadow: 0 0.5px 4px 0 rgba(0,0,0,0.07);
  
  text-align: right;
}

/* ==============================
   Resume Item Flex Layout
   ============================== */

.resume-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}
.resume-content {
  flex: 0 0 60%;
  max-width: 60%;
}
.resume-date {
  /*
  flex: 0 0 36%;
  max-width: 16%;
  min-width: 200px; 
  */
  text-align: right;
}


/* ==============================
   Liquid Glass Card Utility
   ============================== */
.glass {
  position: relative;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(2px) saturate(180%);
  -webkit-backdrop-filter: blur(2px) saturate(180%);
  border: 1.5px solid rgba(255,255,255,0.80);
  border-radius: 2rem;
  box-shadow: 0 8px 32px rgba(31,38,135,0.22),
              inset 0 4px 20px rgba(255,255,255,0.32);
  overflow: hidden;
  z-index: 1;
  transition: box-shadow 0.3s, border-color 0.2s;
}
.glass::after {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(255, 255, 255, 0.13);
  border-radius: 2rem;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  box-shadow: inset -10px -8px 0px -11px rgba(255,255,255,1),
              inset 0px -9px 0px -8px rgba(255,255,255,0.88);
  opacity: 0.65;
  z-index: -1;
  filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(1.15);
  pointer-events: none;
}
.glass .my-auto {
  background: none;
  padding: 1rem 2rem;
}

/* ==============================
   Icon Utilities
   ============================== */
i.fa-heart { color: #ed1515; }
.white-text .fa-heart {
  color: #ed1515 !important;
}
.white-text, .white-text * {
  color: #fff !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.16);
}
.resume-section p, .resume-section div{
  color: #fff !important;
}

/* ==============================
   Dark Mode Adaptations
   ============================== */
[data-theme="dark"] .bg-primary      { background-color: var(--primary-color) !important; }
[data-theme="dark"] .text-primary    { color: var(--link-color) !important; }
[data-theme="dark"] a                { color: var(--link-color); }
[data-theme="dark"] a:hover          { color: var(--hover-color); }
[data-theme="dark"] .resume-section  { background-color: var(--bg-color); color: var(--text-color); }
[data-theme="dark"] .subheading      { color: var(--text-color); }
[data-theme="dark"] .list-social-icons a:hover { color: var(--hover-color); }
[data-theme="dark"] .list-social-icons a { color: var(--link-color-def); }