/* CSS Variables based on Brand Guidelines */
:root {
   /* Base Grid Unit */
    --base-grid-unit-mobile: 4pt;
    --base-grid-unit-tablet: 8pt;
    --base-grid-unit-desktop: 12pt;

    /* Container Padding */
    --container-padding-mobile: 16pt;
    --container-padding-desktop: 24pt;

    /* Card & Section Spacing */
    --card-section-spacing-mobile: 8pt;
    --card-section-spacing-desktop: 16pt;

    /* Button Spacing */
    --button-height: 48pt;
    --button-min-tappable-area: 44pt;
    --button-spacing: 8pt;
    --button-padding-horizontal: 16pt;
    --button-padding-vertical: 12pt;

    /* Typography - Mobile */
    --font-size-title-mobile: 24px;
    --font-size-subheading-mobile: 18px;
    --font-size-subtitle2-mobile: 20px;
    --font-size-subtitle4-mobile: 32px;
    --font-size-normal: 16px; /* Universal normal text size */
    --font-size-small-mobile: 8px;
    --font-size-cta-mobile: 14px;

    /* Typography - Desktop */
    --font-size-title-desktop: 36px;
    --font-size-subheading-desktop: 24px;
    --font-size-subtitle4-desktop: 58px;
    --font-size-subtitle2-desktop: 20px;
    --font-size-small-desktop: 10px;
    --font-size-cta-desktop: 14px;
   }

   .theme-0-dark  {
       /* Color Variables - Dark Mode (default) */
    --bg-color: #2F0A61;
    --bg-color-tba: #2a134b;
    --text-color: #F7EFFF;
    --card-bg: #38116b;
    --card-border: #F7EFFF;
    --button-bg: #6C3BAA; 
    --button-text-color: #F7EFFF; 
    --button-hover-color: #38116b;
    --button-border: #F7EFFF;
    --link-color: #F7EFFF;
    --link-hover-color: #F7EFFF;
    --card-border: #F7EFFF;
    --shadow-color: rgba(206, 184, 227, 0.1);
    --border-color: #F7EFFF; 
    --background-color-highlight: rgba(47, 10, 97, 0.6); /* 50% */
    --color-surface-raised: #6C3BAA; 
    
    --color-accent-1: #6C3BAA;   
    --color-accent-2: #A379D9;  
    --color-accent-3: #f0e2ff;
    --main-card-border: #F7EFFF;
    --main--card-border: #F7EFFF;
 

     --icon-colors-version-one: #EFFFEF;
    --icon-colors-version-two: #EFFFEF;

    --faq-icon-color: #A379D9; 
 
   /* -------------------------------
     Blog 1 — Science, Ethics, Morality, Philosophy
     ------------------------------- */
  --text-highlight-people-blog-1: #175443;       /* Softer green for dark bg */
  --text-highlight-concepts-blog-1: #064A75;     /* Light blue */
  --text-highlight-arguments-blog-1: #574200;    /* Warm yellow */
  --text-highlight-dates-blog-1: #7f2f4e;        /* Soft purple */
  --text-highlight-dilemmas-blog-1: #940000;     /* Bright red */
  --text-highlight-uncertainty-blog-1: #424242;  /* Light gray */

  /* -------------------------------
     Blog 2 — Sexual Themes, Health, Paraphilias, Cases
     ------------------------------- */
  --text-highlight-affection-blog-2: #75003B;    /* Lively pink */
  --text-highlight-risk-blog-2: #703c00;         /* Strong red */
  --text-highlight-medical-blog-2: #1B3E55;      /* Soft blue */
  --text-highlight-health-blog-2: #0B4B0B;       /* Fresh green */
  --text-highlight-bdsm-blog-2: #611D72;         /* Vivid purple */
  --text-highlight-myths-blog-2: #454545;        /* Lighter gray */
  --text-highlight-cases-blog-2: #574200;        /* Bright orange */

  /* -------------------------------
     Teckie | Blog 3 — Tech, UX, Developer Perspective
     ------------------------------- */
  --text-highlight-tools-blog-3: #064A75;        /* Soft blue */
  --text-highlight-people-blog-3: #175443;       /* Light green */
  --text-highlight-bestpractices-blog-3: #703c00;/* Soft yellow */
  --text-highlight-innovation-blog-3: #574200;   /* Orange pop */
  --text-highlight-limitations-blog-3: #424242;  /* Light gray */
  --text-highlight-philosophy-blog-3: #5e265e;   /* Pastel purple */

  /* -------------------------------
     Blog 4 — Music, Art, Hobbies
     ------------------------------- */
  --text-highlight-passion-blog-4: #940000;      /* Strong red */
  --text-highlight-calm-blog-4: #1B3E55;         /* Calm blue */
  --text-highlight-artists-blog-4: #0B4B0B;      /* Soft green */
  --text-highlight-creativity-blog-4: #611D72;   /* Vivid purple */
  --text-highlight-joy-blog-4: #344646;          /* Soft yellow */
  --text-highlight-achievements-blog-4: #574200; /* Bright orange */
  --text-highlight-nostalgia-blog-4: #850042;    /* Warm pink */
    }

/* Color Variables - Light Mode */
.theme-0-light  {
    --bg-color: #F7EFFF;
    --bg-color-tba: #e0d5eb;
    --text-color: #2F0A61;
    --card-bg: #f2e5ff;
    --card-border: #2F0A61;
    --button-bg: #6C3BAA;
    --button-text-color: #F7EFFF; 
    --button-hover-color: #2F0A61;
    --button-border: #2F0A61;
    --link-color: #0D0019;
    --link-hover-color: #5c00b3;
    --card-border: #6C3BAA;
    --shadow-color: rgba(13, 0, 25, 0.1);
    --border-color: #2F0A61;
    --background-color-highlight: rgba(247, 239, 255, 0.8); /* 50% */
    --color-surface-raised: #6C3BAA;

    --main--card-border: #2F0A61;
    --main-card-border: #2F0A61;
    --map-p-bg: #2a134b; 
    --map-line: #856fa1;  

    --icon-colors-version-one: #2F0A61;
    --icon-colors-version-two: #EFFFEF;

    --faq-icon-color: #F7EFFF;
      /* -------------------------------
     Blog 1 — Science, Ethics, Morality, Philosophy
     ------------------------------- */
  --text-highlight-people-blog-1: #90DFB2;       /* Green → philosophers, scientists */
  --text-highlight-concepts-blog-1: #85C2FF;     /* Blue → abstract concepts */
  --text-highlight-arguments-blog-1: #FFE657;    /* Yellow → key principles */
  --text-highlight-dates-blog-1: #DDD3F3;        /* Purple → historical context */
  --text-highlight-dilemmas-blog-1: #F8A5B4;     /* Red → ethical dilemmas */
  --text-highlight-uncertainty-blog-1: #D4D4D4;  /* Gray → paradoxes, questions */

  /* -------------------------------
     Blog 2 — Sexual Themes, Health, Paraphilias, Cases
     ------------------------------- */
  --text-highlight-affection-blog-2: #FFA3D1;    /* Pink → intimacy */
  --text-highlight-risk-blog-2: #F3B9B9;         /* Red → taboo, warnings */
  --text-highlight-medical-blog-2: #AEC9E0;      /* Blue → medical/legal refs */
  --text-highlight-health-blog-2: #90DFB2;       /* Green → safe practices */
  --text-highlight-bdsm-blog-2: #D0A9F4;         /* Purple → intensity, BDSM */
  --text-highlight-myths-blog-2: #D4D4D4;        /* Gray → stigma, critique */
  --text-highlight-cases-blog-2: #FFE657;        /* Orange → true cases */

  /* -------------------------------
     Blog 3 — Tech, UX, Developer Perspective
     ------------------------------- */
  --text-highlight-tools-blog-3: #85C2FF;        /* Blue → frameworks, tools */
  --text-highlight-people-blog-3: #90DFB2;       /* Green → devs, mentors */
  --text-highlight-bestpractices-blog-3: #FFE657;/* Yellow → tips, principles */
  --text-highlight-innovation-blog-3: #FFC37A;   /* Orange → breakthroughs */
  --text-highlight-limitations-blog-3: #D4D4D4;  /* Gray → bugs, tradeoffs */
  --text-highlight-philosophy-blog-3: #D0A9F4;   /* Purple → design thinking */

  /* -------------------------------
     Blog 4 — Music, Art, Hobbies
     ------------------------------- */
  --text-highlight-passion-blog-4: #F8ABBA;      /* Red → intensity, emotion */
  --text-highlight-calm-blog-4: #AEC9E0;         /* Blue → reflective moods */
  --text-highlight-artists-blog-4: #90DFB2;      /* Green → communities */
  --text-highlight-creativity-blog-4: #D0A9F4;   /* Purple → imagination */
  --text-highlight-joy-blog-4: #FFE657;          /* Yellow → vibrancy */
  --text-highlight-achievements-blog-4: #FFC37A; /* Orange → milestones */
  --text-highlight-nostalgia-blog-4: #b9f6f8;    /* Pink → sentimental */
}

.theme-1-dark {
    /* Color Variables - Dark Mode (default) */
    --bg-color: #021502;
    --bg-color-tba: #020F02;
    --text-color: #EFFFEF;
    --card-bg: #041f04;
    --card-border: #EFFFEF;
    --button-bg: #3BAA78; 
    --button-text-color: #000000; 
    --button-hover-color: #49ac7f;
    --button-border: #EFFFEF;
    --link-color: #77CFA8;
    --link-hover-color: #EFFFEF;
     --shadow-color: rgba(206, 184, 227, 0.1);
    --border-color: #EFFFEF; 
    --background-color-highlight: rgba(12, 36, 2, 0.6); /* 50% */
    --color-surface-raised: #021502; 
   
    --main-card-border: #EFFFEF;
  --main--card-border: #EFFFEF ;
    --link-hover-color-active:  #021502;
    --button-text-hover-active: #021502;
  
    --icon-colors-version-one: #EFFFEF;
    --icon-colors-version-two: #EFFFEF;
    --map-p-bg: #021502; 

    --faq-icon-color: #EFFFEF;
       /* -------------------------------
     Blog 1 — Science, Ethics, Morality, Philosophy
     ------------------------------- */
  --text-highlight-people-blog-1: #11503b;       /* Softer green for dark bg */
  --text-highlight-concepts-blog-1: #064A74;     /* Light blue */
  --text-highlight-arguments-blog-1: #574500;    /* Warm yellow */
  --text-highlight-dates-blog-1: #512f8d;        /* Soft purple */
  --text-highlight-dilemmas-blog-1: #850000;     /* Bright red */
  --text-highlight-uncertainty-blog-1: #3b0b5c;  /* Light gray */

  /* -------------------------------
     Blog 2 — Sexual Themes, Health, Paraphilias, Cases
     ------------------------------- */
  --text-highlight-affection-blog-2: #8F0047;    /* Lively pink */
  --text-highlight-risk-blog-2: #990000;         /* Strong red */
  --text-highlight-medical-blog-2: #064A74;      /* Soft blue */
  --text-highlight-health-blog-2: #11503b;       /* Fresh green */
  --text-highlight-bdsm-blog-2: #512f8d;         /* Vivid purple */
  --text-highlight-myths-blog-2: #574500;        /* Lighter gray */
  --text-highlight-cases-blog-2: #64264FED;        /* Bright orange */

  /* -------------------------------
     Teckie | Blog 3 — Tech, UX, Developer Perspective
     ------------------------------- */
  --text-highlight-tools-blog-3: #064A74;        /* Soft blue */
  --text-highlight-people-blog-3: #11503b;       /* Light green */
  --text-highlight-bestpractices-blog-3: #574500;/* Soft yellow */
  --text-highlight-innovation-blog-3: #086600;   /* Orange pop */
  --text-highlight-limitations-blog-3: #474747;  /* Light gray */
  --text-highlight-philosophy-blog-3: #5B345B;   /* Pastel purple */

  /* -------------------------------
     Blog 4 — Music, Art, Hobbies
     ------------------------------- */
  --text-highlight-passion-blog-4: #6B0000;      /* Strong red */
  --text-highlight-calm-blog-4: #064A74;         /* Calm blue */
  --text-highlight-artists-blog-4: #11503b;      /* Soft green */
  --text-highlight-creativity-blog-4: #512f8d;   /* Vivid purple */
  --text-highlight-joy-blog-4: #574500;          /* Soft yellow */
  --text-highlight-achievements-blog-4: #474747; /* Bright orange */
  --text-highlight-nostalgia-blog-4: #5B345B;    /* Warm pink */
   }

/* Color Variables - Light Mode */
.theme-1-light {

    --bg-color: #EFFFEF;
    --bg-color-tba: #d5ebe1;
    --text-color: #021502;
    --card-bg: #e1fdec;
    --card-border: #1b1f1b; 
   --button-bg: #3BAA78; 
    --button-text-color: #000000; 
    --button-hover-color: #34aa75;
    --button-border: #020F02;
    --link-color: #184933;
    --link-hover-color: #34aa75;
    --link-hover-color-active: #082407; 
    --button-text-hover-active: #06250e;
 
    --shadow-color: rgba(4, 51, 12, 0.377);
    --border-color: #021502;
    --background-color-highlight: rgba(239, 255, 242, 0.6); /* 50% */
    --color-surface-raised: #EFFFEF;

    --main-card-border: #021502;
  --main--card-border: #021502;
    --link-hover-color-active:  #021502;
    --button-text-hover-active: #021502;
    
    --icon-colors-version-one: #0D2D33;
    --icon-colors-version-two: #EFFFEF;
    --map-p-bg: #021502; 

    --faq-icon-color: #EFFFEF;

          /* -------------------------------
     Blog 1 — Science, Ethics, Morality, Philosophy
     ------------------------------- */
  --text-highlight-people-blog-1: #79D2A0;       /* Green → philosophers, scientists */
  --text-highlight-concepts-blog-1: #70B8FF;     /* Blue → abstract concepts */
  --text-highlight-arguments-blog-1: #FFE96B;    /* Yellow → key principles */
  --text-highlight-dates-blog-1: #C2AEEA;        /* Purple → historical context */
  --text-highlight-dilemmas-blog-1: #DEDEDE;     /* Red → ethical dilemmas */
  --text-highlight-uncertainty-blog-1: #f892b9;  /* Gray → paradoxes, questions */

  /* -------------------------------
     Blog 2 — Sexual Themes, Health, Paraphilias, Cases
     ------------------------------- */
  --text-highlight-affection-blog-2: #FFA3D1;    /* Pink → intimacy */
  --text-highlight-risk-blog-2: #E99090;         /* Red → taboo, warnings */
  --text-highlight-medical-blog-2: #B3CEDF;      /* Blue → medical/legal refs */
  --text-highlight-health-blog-2: #9FDFBB;       /* Green → safe practices */
  --text-highlight-bdsm-blog-2: #D7B7F6;         /* Purple → intensity, BDSM */
  --text-highlight-myths-blog-2: #DEDEDE;        /* Gray → stigma, critique */
  --text-highlight-cases-blog-2: #FFBF70;        /* Orange → true cases */

  /* -------------------------------
     Blog 3 — Tech, UX, Developer Perspective
     ------------------------------- */
  --text-highlight-tools-blog-3: #A3D1FF;        /* Blue → frameworks, tools */
  --text-highlight-people-blog-3: #9FDFBB;       /* Green → devs, mentors */
  --text-highlight-bestpractices-blog-3: #FFBF70;/* Yellow → tips, principles */
  --text-highlight-innovation-blog-3: #E99090;   /* Orange → breakthroughs */
  --text-highlight-limitations-blog-3: #DEDEDE;  /* Gray → bugs, tradeoffs */
  --text-highlight-philosophy-blog-3: #D7B7F6;   /* Purple → design thinking */

  /* -------------------------------
     Blog 4 — Music, Art, Hobbies
     ------------------------------- */
  --text-highlight-passion-blog-4: #E99090;      /* Red → intensity, emotion */
  --text-highlight-calm-blog-4: #A3D1FF;         /* Blue → reflective moods */
  --text-highlight-artists-blog-4: #9FDFBB;      /* Green → communities */
  --text-highlight-creativity-blog-4: #D7B7F6;   /* Purple → imagination */
  --text-highlight-joy-blog-4: #FFBF70;          /* Yellow → vibrancy */
  --text-highlight-achievements-blog-4: #FFA3D1; /* Orange → milestones */
  --text-highlight-nostalgia-blog-4: #DEDEDE;    /* Pink → sentimental */
}


.theme-2-dark {
    /* Color Variables - Dark Mode (default) */
 --bg-color: #150212;
  --bg-color-tba: #020F02;
  --text-color: #ffefef;
  --card-bg: #260015;
  --card-border: #ffefef;
  --button-bg: #c52929;
  --button-text-color: #ffefef;
  --button-hover-color: #8d0808;
  --button-border: #ffefef;
  --link-color: #F68489;
  --link-hover-color: #d80f0f;
  --shadow-color: rgba(219, 227, 184, 0.1);
  --border-color: #ffefef;
  --background-color-highlight: rgba(36, 2, 2, 0.6);
  --color-surface-raised: #021502;
  --main-card-border: #ffefef;
  --main--card-border: #ffefef;
  --link-hover-color-active: #ffefef;
  --button-text-hover-active: #ffefef;
  --icon-colors-version-one: #ffefef;
  --icon-colors-version-two: #ffefef;
  --map-p-bg: #150212; 

  --faq-icon-color: #ffefef;
     /* -------------------------------
     Blog 1 — Science, Ethics, Morality, Philosophy
     ------------------------------- */
  --text-highlight-people-blog-1: #154C3D;       /* Softer green for dark bg */
  --text-highlight-concepts-blog-1: #033553;     /* Light blue */
  --text-highlight-arguments-blog-1: #574500;    /* Warm yellow */
  --text-highlight-dates-blog-1: #442A6F;        /* Soft purple */
  --text-highlight-dilemmas-blog-1: #850000;     /* Bright red */
  --text-highlight-uncertainty-blog-1: #474747;  /* Light gray */

  /* -------------------------------
     Blog 2 — Sexual Themes, Health, Paraphilias, Cases
     ------------------------------- */
  --text-highlight-affection-blog-2: #850042;    /* Lively pink */
  --text-highlight-risk-blog-2: #643f14;         /* Strong red */
  --text-highlight-medical-blog-2: #1D3E54;      /* Soft blue */
  --text-highlight-health-blog-2: #0B410B;       /* Fresh green */
  --text-highlight-bdsm-blog-2: #4F1759;         /* Vivid purple */
  --text-highlight-myths-blog-2: #333333;        /* Lighter gray */
  --text-highlight-cases-blog-2: #04205e;        /* Bright orange */

  /* -------------------------------
     Teckie | Blog 3 — Tech, UX, Developer Perspective
     ------------------------------- */
  --text-highlight-tools-blog-3: #18384E;        /* Soft blue */
  --text-highlight-people-blog-3: #094909;       /* Light green */
  --text-highlight-bestpractices-blog-3: #4D3D00;/* Soft yellow */
  --text-highlight-innovation-blog-3: #333333;   /* Orange pop */
  --text-highlight-limitations-blog-3: #171149;  /* Light gray */
  --text-highlight-philosophy-blog-3: #850042;   /* Pastel purple */

  /* -------------------------------
     Blog 4 — Music, Art, Hobbies
     ------------------------------- */
  --text-highlight-passion-blog-4: #850042;      /* Strong red */
  --text-highlight-calm-blog-4: #18384E;         /* Calm blue */
  --text-highlight-artists-blog-4: #094909;      /* Soft green */
  --text-highlight-creativity-blog-4: #4F1759;   /* Vivid purple */
  --text-highlight-joy-blog-4: #4D3D00;          /* Soft yellow */
  --text-highlight-achievements-blog-4: #333333; /* Bright orange */
  --text-highlight-nostalgia-blog-4: #000980;    /* Warm pink */
   }

/* Color Variables - Light Mode */
.theme-2-light {

    --bg-color: #ffefef;
    --bg-color-tba: #ffefef;
    --text-color: #150212;
    --card-bg: #ffe3e3;
    --card-border: #021502; 
   --button-bg: #c52929; 
    --button-text-color: #ffefef; 
    --button-hover-color: #8d0808;
    --button-border: #150212;
    --link-color: #6E1717;
    --link-hover-color: #d80f0f;
    --link-hover-color-active: #472828; 
    --button-text-hover-active: #532b2b;
 
    --shadow-color: rgba(51, 4, 4, 0.377);
    --border-color: #150202;
    --background-color-highlight: rgba(255, 239, 239, 0.6); /* 50% */
    --color-surface-raised: #ffefef;

    --main-card-border: #150212;
  --main--card-border:#150212;
    --link-hover-color-active:  #021502;
    --button-text-hover-active: #021502;
    
    --icon-colors-version-one: #330d0d;
    --icon-colors-version-two: #ffefef;
 --map-p-bg: #150212; 

--faq-icon-color: #ffefef;
       /* -------------------------------
     Blog 1 — Science, Ethics, Morality, Philosophy
     ------------------------------- */
  --text-highlight-people-blog-1: #A9E5C4;       /* Green → philosophers, scientists */
  --text-highlight-concepts-blog-1: #8AC4FF;     /* Blue → abstract concepts */
  --text-highlight-arguments-blog-1: #FFED8A;    /* Yellow → key principles */
  --text-highlight-dates-blog-1: #CBBAED;        /* Purple → historical context */
  --text-highlight-dilemmas-blog-1: #F9B8C4;     /* Red → ethical dilemmas */
  --text-highlight-uncertainty-blog-1: #D4D4D4;  /* Gray → paradoxes, questions */

  /* -------------------------------
     Blog 2 — Sexual Themes, Health, Paraphilias, Cases
     ------------------------------- */
  --text-highlight-affection-blog-2: #fc91c6;    /* Pink → intimacy */
  --text-highlight-risk-blog-2: #a1fafd;         /* Red → taboo, warnings */
  --text-highlight-medical-blog-2: #8AC4FF;      /* Blue → medical/legal refs */
  --text-highlight-health-blog-2: #A9E5C4;       /* Green → safe practices */
  --text-highlight-bdsm-blog-2: #CBBAED;         /* Purple → intensity, BDSM */
  --text-highlight-myths-blog-2: #D4D4D4;        /* Gray → stigma, critique */
  --text-highlight-cases-blog-2: #FFED8A;        /* Orange → true cases */

  /* -------------------------------
     Blog 3 — Tech, UX, Developer Perspective
     ------------------------------- */
  --text-highlight-tools-blog-3: #8AC4FF;        /* Blue → frameworks, tools */
  --text-highlight-people-blog-3: #a1fafd;       /* Green → devs, mentors */
  --text-highlight-bestpractices-blog-3: #FFED8A;/* Yellow → tips, principles */
  --text-highlight-innovation-blog-3: #F9B8C4;   /* Orange → breakthroughs */
  --text-highlight-limitations-blog-3: #D4D4D4;  /* Gray → bugs, tradeoffs */
  --text-highlight-philosophy-blog-3: #CBBAED;   /* Purple → design thinking */

  /* -------------------------------
     Blog 4 — Music, Art, Hobbies
     ------------------------------- */
  --text-highlight-passion-blog-4: #F9B8C4;      /* Red → intensity, emotion */
  --text-highlight-calm-blog-4: #8AC4FF;         /* Blue → reflective moods */
  --text-highlight-artists-blog-4: #a1fafd;      /* Green → communities */
  --text-highlight-creativity-blog-4: #CBBAED;   /* Purple → imagination */
  --text-highlight-joy-blog-4: #FFED8A;          /* Yellow → vibrancy */
  --text-highlight-achievements-blog-4: #ffbd6c; /* Orange → milestones */
  --text-highlight-nostalgia-blog-4: #fc91c6;    /* Pink → sentimental */
}


.theme-3-dark {
       /* Color Variables - Dark Mode for Teckie*/
 --bg-color: #020a15;
  --bg-color-tba: #02060f;
  --text-color: #eff5ff;
  --card-bg: #01142a;
  --card-border: #eff2ff;
  --button-bg: #1F5898;
  --button-text-color: #FFFFFF;
  --button-hover-color: #1F5898;
  --button-border: #eff5ff;
  --link-color: #75b4fc;
  --link-hover-color: #9cc7ff;
  --shadow-color: rgba(185, 184, 227, 0.1);
  --border-color: #eff5ff;
  --background-color-highlight: rgba(2, 7, 36, 0.6);
  --color-surface-raised: #020315;
  --main-card-border: #eff5ff;
  --main--card-border: #eff5ff;
  --link-hover-color-active: #eff5ff;
  --button-text-hover-active: #eff5ff;
  --icon-colors-version-one: #eff5ff;
  --icon-colors-version-two: #eff5ff;
  --map-p-bg: #020a15; 

  --faq-icon-color: #eff5ff;

     /* -------------------------------
     Blog 1 — Science, Ethics, Morality, Philosophy
     ------------------------------- */
  --text-highlight-people-blog-1: #154132;       /* Softer green for dark bg */
  --text-highlight-concepts-blog-1: #073B5A;     /* Light blue */
  --text-highlight-arguments-blog-1: #3D3100;    /* Warm yellow */
  --text-highlight-dates-blog-1: #40296B;        /* Soft purple */
  --text-highlight-dilemmas-blog-1: #8A0000;     /* Bright red */
  --text-highlight-uncertainty-blog-1: #333333;  /* Light gray */

  /* -------------------------------
     Blog 2 — Sexual Themes, Health, Paraphilias, Cases
     ------------------------------- */
  --text-highlight-affection-blog-2: #800040;    /* Lively pink */
  --text-highlight-risk-blog-2: #8A0000;         /* Strong red */
  --text-highlight-medical-blog-2: #073B5A;      /* Soft blue */
  --text-highlight-health-blog-2: #154132;       /* Fresh green */
  --text-highlight-bdsm-blog-2: #40296B;         /* Vivid purple */
  --text-highlight-myths-blog-2: #333333;        /* Lighter gray */
  --text-highlight-cases-blog-2: #3D3100;        /* Bright orange */

  /* -------------------------------
     Teckie | Blog 3 — Tech, UX, Developer Perspective
     ------------------------------- */
  --text-highlight-tools-blog-3: #073B5A;        /* Soft blue */
  --text-highlight-people-blog-3: #154132;       /* Light green */
  --text-highlight-bestpractices-blog-3: #8A0000;/* Soft yellow */
  --text-highlight-innovation-blog-3: #3D3100;   /* Orange pop */
  --text-highlight-limitations-blog-3: #333333;  /* Light gray */
  --text-highlight-philosophy-blog-3: #40296B;   /* Pastel purple */

  /* -------------------------------
     Blog 4 — Music, Art, Hobbies
     ------------------------------- */
  --text-highlight-passion-blog-4: #8A0000;      /* Strong red */
  --text-highlight-calm-blog-4: #073B5A;         /* Calm blue */
  --text-highlight-artists-blog-4: #154132;      /* Soft green */
  --text-highlight-creativity-blog-4: #40296B;   /* Vivid purple */
  --text-highlight-joy-blog-4: #3D3100;          /* Soft yellow */
  --text-highlight-achievements-blog-4: #333333; /* Bright orange */
  --text-highlight-nostalgia-blog-4: #8A0000;    /* Warm pink */
}
/* Color Variables - Light Mode for Teckie */
.theme-3-light {
    --bg-color: #eff5ff;
    --bg-color-tba: #eff5ff;
    --text-color: #020a15;
    --card-bg: #e7ecfd;
    --card-border: #020a15; 
   --button-bg: #1F5898; 
  --button-text-color: #FFFFFF;
  --button-hover-color: #75b4fc;
    --button-border: #020a15;
    --link-color: #093A72;
    --link-hover-color: #1876e0;
    --link-hover-color-active: #282d47; 
    --button-text-hover-active: #2c2b53;
 
    --shadow-color: rgba(4, 13, 51, 0.377);
    --border-color: #020a15;
    --background-color-highlight: rgba(239, 240, 255, 0.6); /* 50% */
    --color-surface-raised: #eff5ff;

    --main-card-border: #020a15;
  --main--card-border: #020a15;
    --link-hover-color-active:  #021502;
    --button-text-hover-active: #021502;
    
    --icon-colors-version-one: #0d1033;
    --icon-colors-version-two: #eff5ff;
    --map-p-bg: #020a15; 

    --faq-icon-color: #eff5ff;
          /* -------------------------------
     Blog 1 — Science, Ethics, Morality, Philosophy
     ------------------------------- */
  --text-highlight-people-blog-1: #79D2A0;       /* Green → philosophers, scientists */
  --text-highlight-concepts-blog-1: #94C9FF;     /* Blue → abstract concepts */
  --text-highlight-arguments-blog-1: #FFE96B;    /* Yellow → key principles */
  --text-highlight-dates-blog-1: #D7CBF1;        /* Purple → historical context */
  --text-highlight-dilemmas-blog-1: #F9C7D1;     /* Red → ethical dilemmas */
  --text-highlight-uncertainty-blog-1: #D1D1D1;  /* Gray → paradoxes, questions */

  /* -------------------------------
     Blog 2 — Sexual Themes, Health, Paraphilias, Cases
     ------------------------------- */
  --text-highlight-affection-blog-2: #F9C7D1;    /* Pink → intimacy */
  --text-highlight-risk-blog-2: #e3b9f3;         /* Red → taboo, warnings */
  --text-highlight-medical-blog-2: #94C9FF;      /* Blue → medical/legal refs */
  --text-highlight-health-blog-2: #79D2A0;       /* Green → safe practices */
  --text-highlight-bdsm-blog-2: #D7CBF1;         /* Purple → intensity, BDSM */
  --text-highlight-myths-blog-2: #D1D1D1;        /* Gray → stigma, critique */
  --text-highlight-cases-blog-2: #FFE96B;        /* Orange → true cases */

  /* -------------------------------
     Blog 3 — Tech, UX, Developer Perspective
     ------------------------------- */
  --text-highlight-tools-blog-3: #94C9FF;        /* Blue → frameworks, tools */
  --text-highlight-people-blog-3: #79D2A0;       /* Green → devs, mentors */
  --text-highlight-bestpractices-blog-3: #FFE96B;/* Yellow → tips, principles */
  --text-highlight-innovation-blog-3: #FFBF70;   /* Orange → breakthroughs */
  --text-highlight-limitations-blog-3: #D1D1D1;  /* Gray → bugs, tradeoffs */
  --text-highlight-philosophy-blog-3: #D7CBF1;   /* Purple → design thinking */

  /* -------------------------------
     Blog 4 — Music, Art, Hobbies
     ------------------------------- */
  --text-highlight-passion-blog-4: #F9C7D1;      /* Red → intensity, emotion */
  --text-highlight-calm-blog-4: #94C9FF;         /* Blue → reflective moods */
  --text-highlight-artists-blog-4: #79D2A0;      /* Green → communities */
  --text-highlight-creativity-blog-4: #e3b9f3;   /* Purple → imagination */
  --text-highlight-joy-blog-4: #FFE96B;          /* Yellow → vibrancy */
  --text-highlight-achievements-blog-4: #FFBF70; /* Orange → milestones */
  --text-highlight-nostalgia-blog-4: #fd9fd6;    /* Pink → sentimental */
}

.theme-4-dark {
       /* Color Variables - Dark Mode for Teckie*/
 --bg-color: #0a0900;
  --bg-color-tba: #110f00;
  --text-color: #fcf3cf;
  --card-bg: #120b00;
  --card-border: #fcf3cf;
  --button-bg: #ffd000; /* main color */
  --button-text-color: #0a0900;
  --button-hover-color: #0a0900;
  --button-border: #fcf3cf;
  --link-color: #ffd000;
  --link-hover-color: #e4c22d;
  --shadow-color: rgba(185, 184, 227, 0.1);
  --border-color: #fcf3cf;
  --background-color-highlight: rgba(34, 36, 2, 0.6);
  --color-surface-raised: #020315;
  --main-card-border: #fcf3cf;
  --main--card-border: #fcf3cf;
  --link-hover-color-active: #fcf3cf;
  --button-text-hover-active: #fcf3cf;
  --icon-colors-version-one: #fcf3cf;
  --icon-colors-version-two: #fcf3cf;

  --faq-icon-color: #fcf3cf;

     /* -------------------------------
     Blog 1 — Science, Ethics, Morality, Philosophy
     ------------------------------- */
  --text-highlight-people-blog-1: #143E2F;       /* Softer green for dark bg */
  --text-highlight-concepts-blog-1: #063A5B;     /* Light blue */
  --text-highlight-arguments-blog-1: #382D00;    /* Warm yellow */
  --text-highlight-dates-blog-1: #42286C;        /* Soft purple */
  --text-highlight-dilemmas-blog-1: #570000;     /* Bright red */
  --text-highlight-uncertainty-blog-1: #333333;  /* Light gray */

  /* -------------------------------
     Blog 2 — Sexual Themes, Health, Paraphilias, Cases
     ------------------------------- */
  --text-highlight-affection-blog-2: #660033;    /* Lively pink */
  --text-highlight-risk-blog-2: #570000;         /* Strong red */
  --text-highlight-medical-blog-2: #063A5B;      /* Soft blue */
  --text-highlight-health-blog-2: #143E2F;       /* Fresh green */
  --text-highlight-bdsm-blog-2: #42286C;         /* Vivid purple */
  --text-highlight-myths-blog-2: #333333;        /* Lighter gray */
  --text-highlight-cases-blog-2: #382D00;        /* Bright orange */

  /* -------------------------------
     Teckie | Blog 3 — Tech, UX, Developer Perspective
     ------------------------------- */
  --text-highlight-tools-blog-3: #063A5B;        /* Soft blue */
  --text-highlight-people-blog-3: #143E2F;       /* Light green */
  --text-highlight-bestpractices-blog-3: #333333;/* Soft yellow */
  --text-highlight-innovation-blog-3: #382D00;   /* Orange pop */
  --text-highlight-limitations-blog-3: #570000;  /* Light gray */
  --text-highlight-philosophy-blog-3: #660033;   /* Pastel purple */

  /* -------------------------------
     Blog 4 — Music, Art, Hobbies
     ------------------------------- */
  --text-highlight-passion-blog-4: #570000;      /* Strong red */
  --text-highlight-calm-blog-4: #063A5B;         /* Calm blue */
  --text-highlight-artists-blog-4: #143E2F;      /* Soft green */
  --text-highlight-creativity-blog-4: #42286C;   /* Vivid purple */
  --text-highlight-joy-blog-4: #333333;          /* Soft yellow */
  --text-highlight-achievements-blog-4: #382D00; /* Bright orange */
  --text-highlight-nostalgia-blog-4: #660033;    /* Warm pink */
 }
/* Color Variables - Light Mode for Teckie */
.theme-4-light {
    --bg-color: #fcf3cf;
    --bg-color-tba: #eff5ff;
    --text-color: #0a0900;
    --card-bg: #fff3c4;
    --card-border: #0a0900; 
   --button-bg: #ffd000; 
  --button-text-color: #0a0900;
  --button-hover-color: #0a0900;
    --button-border: #0a0900;
    --link-color: #312d03;
    --link-hover-color: #5a5301;
    --link-hover-color-active: #5a5301; 
    --button-text-hover-active: #312d03;
 
    --shadow-color: rgba(50, 51, 4, 0.377);
    --border-color: #0a0900;
    --background-color-highlight: rgba(255, 255, 239, 0.6); /* 50% */
    --color-surface-raised: #fcf3cf;

    --main-card-border: #0a0900;
  --main--card-border: #0a0900;
    --link-hover-color-active:  #0a0900;
    --button-text-hover-active: #0a0900;
    
    --icon-colors-version-one: #0d1033;
    --icon-colors-version-two: #fcf3cf;
    --map-p-bg: #0a0900; 
    
    --faq-icon-color: #fcf3cf;

          /* -------------------------------
     Blog 1 — Science, Ethics, Morality, Philosophy
     ------------------------------- */
  --text-highlight-people-blog-1: #C4EED5;       /* Green → philosophers, scientists */
  --text-highlight-concepts-blog-1: #A8D4FF;     /* Blue → abstract concepts */
  --text-highlight-arguments-blog-1: #FFDE24;    /* Yellow → key principles */
  --text-highlight-dates-blog-1: #D1C2EF;        /* Purple → historical context */
  --text-highlight-dilemmas-blog-1: #F6ACBB;     /* Red → ethical dilemmas */
  --text-highlight-uncertainty-blog-1: #D1D1D1;  /* Gray → paradoxes, questions */

  /* -------------------------------
     Blog 2 — Sexual Themes, Health, Paraphilias, Cases
     ------------------------------- */
  --text-highlight-affection-blog-2: #F6ACBB;    /* Pink → intimacy */
  --text-highlight-risk-blog-2: #ffd4a2;         /* Red → taboo, warnings */
  --text-highlight-medical-blog-2: #A8D4FF;      /* Blue → medical/legal refs */
  --text-highlight-health-blog-2: #C4EED5;       /* Green → safe practices */
  --text-highlight-bdsm-blog-2: #D1C2EF;         /* Purple → intensity, BDSM */
  --text-highlight-myths-blog-2: #D1D1D1;        /* Gray → stigma, critique */
  --text-highlight-cases-blog-2: #FFDE24;        /* Orange → true cases */

  /* -------------------------------
     Blog 3 — Tech, UX, Developer Perspective
     ------------------------------- */
  --text-highlight-tools-blog-3: #A8D4FF;        /* Blue → frameworks, tools */
  --text-highlight-people-blog-3: #C4EED5;       /* Green → devs, mentors */
  --text-highlight-bestpractices-blog-3: #FFDE24;/* Yellow → tips, principles */
  --text-highlight-innovation-blog-3: #F6ACBB;   /* Orange → breakthroughs */
  --text-highlight-limitations-blog-3: #D1D1D1;  /* Gray → bugs, tradeoffs */
  --text-highlight-philosophy-blog-3: #D1C2EF;   /* Purple → design thinking */

  /* -------------------------------
     Blog 4 — Music, Art, Hobbies
     ------------------------------- */
  --text-highlight-passion-blog-4: #F6ACBB;      /* Red → intensity, emotion */
  --text-highlight-calm-blog-4: #A8D4FF;         /* Blue → reflective moods */
  --text-highlight-artists-blog-4: #C4EED5;      /* Green → communities */
  --text-highlight-creativity-blog-4: #D1C2EF;   /* Purple → imagination */
  --text-highlight-joy-blog-4: #FFDE24;          /* Yellow → vibrancy */
  --text-highlight-achievements-blog-4: #d1d8d8; /* Orange → milestones */
  --text-highlight-nostalgia-blog-4: #ff69b4;    /* Pink → sentimental */
}

/* Container */
.container {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    padding-right: 24px;
    padding-left: 24px;
}


 /* Container for cards */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 350px));
    gap: 16px;
        justify-content: center;
}

/* Card Style */
.card {
  position: relative;
  width: auto;
  height: auto;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
  border: 1px var(--main-card-border);
  border-style: outset;
   transition: transform 0.3s ease;
   background-color: var(--card-bg);
}

.card:hover {
  transform: scale(1.03);
}

/* Card Image */
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay text on top of image */
.card-text {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-color);
  font-size: 1.1rem;
  font-weight: bold;
  text-align: center;
  padding: 0.5rem 1rem;
  background: var(--background-color-highlight);
  border-radius: 6px;
}

/* Overlay (hidden by default) */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1600;
}

/* Overlay Content */
.overlay-content {
  background: var(--bg-color);
  width: 85%;
  max-width: 700px;
  padding: 2rem;
  border-radius: 16px;
  position: relative;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  animation: scaleUp 0.3s ease;
  border: 1px solid var(--card-border);
  margin: 1rem;

  /*  Fix for scroll */
  max-height: 85vh;          /* keep inside viewport */
  overflow-y: auto;          /* enable vertical scrolling */
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */

}

@keyframes scaleUp {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

        .overlay-grid {
            display: grid;
            grid-template-columns: 1fr; /* 1 column on mobile */
            gap: calc(2 * var(--card-section-spacing-desktop));
         }

/* Close button */
.overlay-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: var(--button-border)
}

/* Next button */
.overlay-next {
  display: block;
  margin: 1.5rem 0 0 auto;
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
}

/* Overlay image defaults */
#overlayImage {
  max-width: 50%;   /* Take up half of overlay width */
  height: auto;
  display: block;
  margin: 0 auto 1rem auto; /* center horizontally, add spacing below */
  border-radius: 8px;
  object-fit: contain; /* keep proportions */
  background-color: var(--card-bg);
}

/* Mobile adjustment */
@media (max-width: 768px) {
  #overlayImage {
    max-width: 70%;   /* slightly larger but still not full screen */
  }
}

@media (max-width: 480px) {
  #overlayImage {
    max-width: 90%;   /* phones, let it breathe but not overflow */
  }
}

.overlay-card {
  position: relative;
  width: 286px;
  height: 205.333px;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.3s ease;
}

.overlay-card:hover {
  transform: scale(1.03);
}

/* Card Image */
.overlay-card img {
  width: 50%;
  height: 50%;
  object-fit: cover;
}

/* Overlay text on top of image */
.overlay-card-text {
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: var(--font-size-subheading-desktop);
   text-align: center;
  text-shadow: 0px 2px 5px rgba(0,0,0,0.6);
  padding: 0.5rem 1rem;
  background: rgba(0,0,0,0.4);
  border-radius: 6px;
}