/* ==================== */
/* 🧱 GENERAL STYLES     */
/* ==================== */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #fff;
  color: #000;
}
.grid-item {
  border: 4px solid #000;
  border-radius: 6px;
  padding: 1rem;
  text-align: center;
  background: #fff;

  /* NEW scroll behaviour */
  max-height: 464px;     /* adjust this to taste */
  overflow-y: auto;      /* enables vertical scrolling */

  scrollbar-width: thin;
  scrollbar-color: #888 #eee;
}

/* Chrome / Edge scrollbars */
.grid-item::-webkit-scrollbar {
  width: 8px;
}
.grid-item::-webkit-scrollbar-track {
  background: #eee;
}
.grid-item::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.grid-item img {
  width: 100%;
  margin-bottom: 0.5rem;
    min-height: 150px;
}

.text-block {
  font-size: 0.9rem;
  line-height: 1.4;
  transition: opacity 0.5s ease-in-out;
}


.text-block {
    margin: 0 auto;
}


.grid-item.list, .grid-item.health {
  display: flex;
  justify-content: center; /* centers horizontally */
  align-items: center;     /* centers vertically */
  text-align: center;      /* centers the text inside */
  border: 0;               /* optional since you already inline-set it */
}

.grid-item.list .text-block,  .grid-item.health .text-block {
  max-width: 80%;          /* optional, keeps text readable */
}


/* ==================== */
/* Circle Link Hover Effect */
/* ==================== */
.circle-link {
    margin: -10px auto 10px auto;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 50%;
  background-color: #f0f0f0; /* neutral background */
  color: #000;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.3s ease, background-color 0.2s ease;
}

/* Hover effect */
.circle-link:hover {
  transform: scale(1.3);
  box-shadow: 0 0 12px 3px rgba(0, 128, 255, 0.6); /* blue glow */
  background-color: #e0f7ff;
}


/* ==================== */
/* 🧱 GRID CONTAINERS     */
/* ==================== */
.grid-container {
  display: grid;
  grid-template-columns: 1fr minmax(400px, 1fr) 1fr;
  grid-template-rows: auto 40px minmax(150px, auto) auto;
  gap: 20px;
  align-items: stretch;
  max-width: 1100px;
  margin: .5rem auto;
  padding: .5rem 1rem;
}

@media (max-width: 500px) {
    .grid-container {
    }
    
}

@media (max-width: 800px) {

    .grid-item img {
      width: 80%;
      margin-bottom: 0.5rem;
    }
}

/* Main content positions */
.grid-item.sleep    { grid-column: 1; grid-row: 3; }
.grid-item.list     { grid-column: 2; grid-row: 3; }
.grid-item.eyes     { grid-column: 3; grid-row: 3; }
.grid-item.ears     { grid-column: 1; grid-row: 4; }
.grid-item.body     { grid-column: 2; grid-row: 4 / span 3; position: relative; }
.grid-item.teeth    { grid-column: 3; grid-row: 4; }
.grid-item.heart    { grid-column: 1; grid-row: 5; }
.grid-item.stomach  { grid-column: 3; grid-row: 5; }
.grid-item.finance  { grid-column: 1; grid-row: 6; }
.grid-item.feet     { grid-column: 3; grid-row: 6; }
.grid-item.blood    { grid-column: 1; grid-row: 7; }
.grid-item.health   { grid-column: 2; grid-row: 7; }
.grid-item.muscles  { grid-column: 3; grid-row: 7; }

/* ==================== */
/* 🧱 HEADER GRID        */
/* ==================== */
.header-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* left 1/4, center 1/2, right 1/4 */
  gap: 20px;
  align-items: stretch;
  max-width: 1100px;
  margin: .5rem auto;
  padding: .5rem 1rem;
}

.grid-itemh {
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.grid-itemh:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.grid-itemh img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.grid-itemh strong {
  display: block;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: red;
}

/* Header boxes */
#health-facts, #laughter-facts, .logo-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#health-facts {
  background-color: #f0f7fa;
  border: 2px solid #a1c4d6;
  color: #004d60;
  font-family: 'Helvetica', sans-serif;
}

#health-facts::before { content: "🩺"; font-size: 2rem; margin-bottom: 0.5rem; display: block; }
#health-facts strong { font-size: 1.1rem; margin-bottom: 0.5rem; display: block; }
#health-facts.ad-mode::before, #laughter-facts.ad-mode::before{
  content: "" !important;
  display: none !important;
}


.logo-center {
  background-color: #fff;
  border: 2px solid #ccc;
  font-family: 'Georgia', serif;
  font-size: 1rem;
  padding: 20px;
}

.logo-center img {
  max-width: 100px;
  border-radius: 50%;
  margin: 10px 0;
}


#laughter-facts {
  background-color: #fff3e6;
  border: 2px dashed #ffa64d;
  color: #b35e00;
  font-family: 'Comic Sans MS', cursive, sans-serif;
}

#laughter-facts::before { content: "😂"; font-size: 2rem; margin-bottom: 0.5rem; display: block; }
#laughter-facts strong { font-size: 1.1rem; margin-bottom: 0.5rem; display: block; }

.grid-item.logo-left,
.grid-item.logo-right { max-width: none; }

@media (max-width: 500px) {
  .header-grid { grid-template-columns: 1fr; gap: 10px; padding: 0.5rem; }
}

/* ==================== */
/* 🧱 BODY DIAGRAM       */
/* ==================== */
.grid-item.body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: #E5DAC4;
  min-height: 1370px;
}

/* WRAPPER — stays at natural height but no shrinking of content */
.body-diagram-wrapper {
  width: 100%;
  max-width: 100%;
  flex: 0 1 auto;        /* <- important: wrapper can shrink, content cannot */
   min-height: 1100px;
}

/* IMAGE — prevent it from shrinking vertically */
.body-diagram-wrapper img {
  width: 100%;
  height: auto;
  min-width: 400px;
  object-fit: contain;
  flex-shrink: 0;        /* <- THIS stops the wrapper from collapsing the image */
}

/* Bottom image should sit right below */
.grid-item.body > img {
  margin-top: 1rem;
  align-self: center;
}

/* ==================== */
/* 🧱 BODY HOTSPOTS      */
/* ==================== */
.body-hotspot {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #000;
  font-weight: bold;
  font-size: 0.8rem;
  text-align: center;
  line-height: 22px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Color-coded hotspots */
.hotspot-brain, .hotspot-eyes, .hotspot-heart, .hotspot-stomach, .hotspot-health, .hotspot-blood {
  background-color: #f0f7fa; border: 2px solid #004d60; /* health-blue */
}

.hotspot-teeth, .hotspot-finance, .hotspot-feet, .hotspot-muscles {
  background-color: #fff3e6; border: 2px solid #b35e00; /* laughter-orange */
}

.hotspot-ears { background-color: #f0f7fa; border: 2px solid #004d60; }

/* Positions */
.hotspot-1 { top: 6%; left: 45%; background-color: #e6fff2; }   /* Brain */
.hotspot-2 { top: 12%; left: 50%; background-color: #f3e6ff; }  /* Eyes */
.hotspot-3 { top: 15%; left: 30%; background-color: #fff5e6; }  /* Ears */
.hotspot-4 { top: 21%; left: 50%; background-color: #f0f7fa; }  /* Teeth */
.hotspot-5 { top: 34%; left: 50%; background-color: #ffe6e6; }  /* Heart */
.hotspot-6 { top: 50%; left: 50%; background-color: #e6f9ff; }  /* Stomach */
.hotspot-7 { top: 60%; left: 24%; background-color: #fff7e6; }  /* Money */
.hotspot-8 { top: 89%; left: 62%; background-color: #e6fff9; }  /* Foot */
.hotspot-9 { top: 71%; left: 39%; background-color: #fbe6ff; }  /* Veins */
.hotspot-10 { top: 66%; left: 57%; background-color: #f0f0f0; } /* Muscles */


/* Pulse animation */
.pulse { animation: pulse 1s infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity:0.6; } 50% { transform: scale(1.3); opacity:1; } 100% { transform: scale(1); opacity:0.6; } }

/* Hotspot hover glow */
.body-hotspot:hover { transform: scale(1.2); box-shadow: 0 0 10px 2px currentColor; }


.grid-item.body .body-diagram-wrapper .body-hotspot {
  position: absolute;
  width: 24px;
  height: 24px;
  line-height: 22px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover glow */
.body-hotspot:hover {
  transform: translate(-50%, -50%) scale(1.2);
  box-shadow: 0 0 10px 2px currentColor;
}

.grid-item.sleep,
.grid-item.list,
.grid-item.eyes {
  margin-top: -5rem;
}

    
/* ==================== */
/* MEDIA QUERIES FOR BODY DIAGRAM */
/* ==================== */
@media (max-width: 1024px) {
  .grid-item.body .body-diagram-wrapper img {
    max-width: 90%;
  }
}

@media (max-width: 480px) {
  .grid-item.body .body-diagram-wrapper img {
    max-width: 100%;
  }

   .grid-item.body .body-hotspot {
    width: 18px;
    height: 18px;
    font-size: 0.7rem;
    line-height: 16px;
  }
    
    

}


@media (max-width: 640px) {
    .grid-item.sleep,
    .grid-item.list,
    .grid-item.eyes {
      margin-top: 0;
    }

}

/* ==================== */
/* 🧱 HEALTH AD          */
/* ==================== */
.grid-item.health {
  padding: 0;
  text-align: center;
}

.grid-item.health img {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 300px;
  min-width: 350px;
  height: auto;
}

/*.grid-item.health .text-block { display: none; } */

.grid-item.logo-center strong { font-size: 14px; color: red; }



/* ==================== */
/* 🧱 RESPONSIVE         */
/* ==================== */
@media (max-width: 480px) { .grid-container { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .grid-container { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; }
  .grid-item.logo-left,
  .grid-item.logo-center,
  .grid-item.logo-right,
  .grid-item.text-left,
  .grid-item.text-center,
  .grid-item.text-right { order: 0; }
  .grid-item.body { order: 1; }
  .grid-item.sleep,
  .grid-item.list,
  .grid-item.eyes,
  .grid-item.ears,
  .grid-item.teeth,
  .grid-item.heart,
  .grid-item.stomach,
  .grid-item.finance,
  .grid-item.feet,
  .grid-item.blood,
  .grid-item.health,
  .grid-item.muscles { order: 2; }
  .grid-item { }
}

/* ==================== */
/* 🧩 INDIVIDUAL HOTSPOTS */
/* ==================== */

#hotspot-1 {
  background-color: #e6fff2; /* mint green */
  border: 2px solid #93d6b6;
  color: #0a4f2a;
  font-family: 'Helvetica', sans-serif;
}

#hotspot-2 {
  background-color: #f3e6ff; /* lavender */
  border: 2px solid #c9a7e5;
  color: #5a2489;
  font-family: 'Helvetica', sans-serif;
}

#hotspot-3 {
  background-color: #fff5e6; /* warm gold */
  border: 2px solid #d2a679;
  color: #7a4b00;
  font-family: 'Helvetica', sans-serif;
}

#hotspot-4 {
  background-color: #f0f7fa; /* light blue */
  border: 2px solid #a1c4d6;
  color: #004d60;
  font-family: 'Helvetica', sans-serif;
}

#hotspot-5 {
  background-color: #ffe6e6; /* soft red */
  border: 2px solid #d48a8a;
  color: #7a1414;
  font-family: 'Helvetica', sans-serif;
}

#hotspot-6 {
  background-color: #e6f9ff; /* sky blue */
  border: 2px solid #90cae0;
  color: #034f69;
  font-family: 'Helvetica', sans-serif;
}

#hotspot-7 {
  background-color: #fff7e6; /* butter yellow */
  border: 2px solid #d8c38a;
  color: #665500;
  font-family: 'Helvetica', sans-serif;
}

#hotspot-8 {
  background-color: #e6fff9; /* aqua green */
  border: 2px solid #89d1b7;
  color: #054f3b;
  font-family: 'Helvetica', sans-serif;
}

#hotspot-9 {
  background-color: #fbe6ff; /* pink-lilac */
  border: 2px solid #d4a6d9;
  color: #5f2262;
  font-family: 'Helvetica', sans-serif;
}

#hotspot-10 {
  background-color: #f0f0f0; /* neutral gray */
  border: 2px solid #c4c4c4;
  color: #333;
  font-family: 'Helvetica', sans-serif;
}

#hotspot-1 .circle-link { background-color: #b3e6cc; } /* darker mint green */
#hotspot-2 .circle-link { background-color: #c2a3e6; } /* darker lavender */
#hotspot-3 .circle-link { background-color: #d2a160; } /* darker warm gold */
#hotspot-4 .circle-link { background-color: #99c1cc; } /* darker light blue */
#hotspot-5 .circle-link { background-color: #d48a8a; } /* darker soft red */
#hotspot-6 .circle-link { background-color: #74bcd4; } /* darker sky blue */
#hotspot-7 .circle-link { background-color: #c9b362; } /* darker butter yellow */
#hotspot-8 .circle-link { background-color: #67bfa5; } /* darker aqua green */
#hotspot-9 .circle-link { background-color: #b97ecf; } /* darker pink-lilac */
#hotspot-10 .circle-link { background-color: #999999; } /* darker neutral 

/* ==================== */
/* 🏷 GRID ITEMS */
/* ==================== */

.grid-item.health {
  background-color: #f0f0f0; /* neutral gray */
  border: 2px solid #c4c4c4;
  color: #333;
  font-family: 'Helvetica', sans-serif;
}

.grid-item.list{
  background-color: #fff; /* neutral gray */
  border: 2px solid #c4c4c4;
  color: #333;
  font-family: 'Helvetica', sans-serif;
      border-radius: 4px;             /* keeps it crisp */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.grid-item.list {
  display: flex;
  flex-direction: column;      /* stack vertically */
  align-items: center;         /* keep everything centred */
}

.grid-item.list img {
  display: block;
  max-width: 100%;
  height: auto;
}

#rotating-headline {
  margin-top: 10px;
  text-align: center;
  font-weight: 600;
  width: 100%;
}

.grid-item.list {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Image stays normal */
.grid-item.list img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* HEADLINE STYLING */
#rotating-headline {
  margin-top: 0;
  padding: 8px 12px;
  margin-top: -4px; /* pulls headline upward so it visually attaches to image */
  font-weight: 600;
  font-size: 1.05rem;

  background: #fff;               /* clean neutral background */
  border-top: 4px solid var(--hl-colour, #000);  /* accent colour */
  width: 90%;                     /* anchors width to image */
  font-family: "Nunito", sans-serif; /* fun, modern font */
}

:root {
  --hl-colour: #d60000; /* Red */
/* --hl-colour: #0076ff;  Blue */
/* --hl-colour: #000000;  Black */
}

.grid-item.body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #E5DAC4 !important; /* neutral gray */
  border: 2px solid #E5DAC4;
  color: #333;
  font-family: 'Helvetica', sans-serif;
  position: relative;
}

/* === BODY DIAGRAM SECTION === */

.body-diagram-wrapper {
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 3 / 4; /* lock proportions so hotspots scale evenly */
  margin: 0 auto;
}

.body-diagram-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* === HOTSPOTS === */

.body-hotspot {
  position: absolute;
  width: 4%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: red;
  color: darkslategrey;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.3s ease;
}

.body-hotspot:hover {
  background: #ff5f5f;
  transform: translate(-50%, -50%) scale(1.2);
}

/* Hotspot coordinates (relative to the image container) */
.hotspot-1 { top: 6%; left: 45%; background-color: #e6fff2; }   /* Brain */
.hotspot-2 { top: 12%; left: 50%; background-color: #f3e6ff; }  /* Eyes */
.hotspot-3 { top: 15%; left: 30%; background-color: #fff5e6; }  /* Ears */
.hotspot-4 { top: 21%; left: 50%; background-color: #f0f7fa; }  /* Teeth */
.hotspot-5 { top: 34%; left: 50%; background-color: #ffe6e6; }  /* Heart */
.hotspot-6 { top: 50%; left: 50%; background-color: #e6f9ff; }  /* Stomach */
.hotspot-7 { top: 60%; left: 24%; background-color: #fff7e6; }  /* Money */
.hotspot-8 { top: 89%; left: 62%; background-color: #e6fff9; }  /* Foot */
.hotspot-9 { top: 71%; left: 39%; background-color: #fbe6ff; }  /* Veins */
.hotspot-10 { top: 66%; left: 57%; background-color: #f0f0f0; } /* Muscles */

/* === RESPONSIVE === */
@media (max-width: 900px) {
  .body-diagram-wrapper {
    max-width: 320px;
  }
}

@media (max-width: 600px) {
  .body-diagram-wrapper {
    max-width: 260px;
  }
  .body-hotspot {
    font-size: 0.6rem;
    width: 5%;
  }
}


/* ==================== */
/* 🧱 TOP BAR            */
/* ==================== */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f0f0f0;
  padding: 4px 10px;
  font-size: 0.75rem;
  border-bottom: 1px solid #ccc;
}

.top-bar a { color: black; text-decoration: none;}

.top-bar > div { flex: 1; }
.top-left { text-align: left; }
.top-center { text-align: center; }
.top-right { text-align: right; }

.top-bar.fixed { position: fixed; top:0; left:0; right:0; z-index:1000; }

@media (max-width: 600px) {
  .top-bar { flex-direction: column; align-items: stretch; text-align: center; gap: 2px; }
  .top-bar > div { flex: none; }
}



/* CONTAINER — scoped ONLY to your health widget */
.grid-item.health.burnout-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 !important;
  padding: 0 !important;
}

/* TOP ROW: left image | text | right image */


/* Full control inside the health-row ONLY */
.health-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Side images — FORCE them tiny */
.health-row .health-side-img {
max-width: 95px !important;
  min-width: 112px !important;
  width: 90px !important;
  height: auto !important;
  flex-shrink: 0 !important;
  display: block !important;
  margin-top: 4rem !important;
}

/* Text block */
.health-row .health-text {
  flex: 1 1 auto !important;
  font-size: 0.95rem !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 0 !important;
}