/* 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: 28px;
    --font-size-subheading2-mobile: 24px;
    --font-size-subtitle3-mobile: 20px;
    --font-size-subtitle4-mobile: 18px;
    --font-size-normal: 16px; /* Universal normal text size */
    --font-size-small-mobile: 8px;
    --font-size-cta-mobile: 14px;

    /* Typography - Desktop */
    --font-size-title-desktop: 32px;
    --font-size-subheading2-desktop: 26px;
    --font-size-subtitle3-desktop: 24px;
    --font-size-subtitle4-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.5); /* 50% */
    --color-surface-raised: #6C3BAA; 
    
    --color-highlight: rgba(47, 10, 97, 0.8);

    --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: #5c00b3;
    --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.5); /* 50% */
    --color-surface-raised: #6C3BAA;

    --color-highlight: rgba(247, 239, 255, 0.8);

    --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; 
   
     --color-highlight: rgba(12, 36, 2, 0.8);

    --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;

    --color-highlight: rgba(239, 255, 242, 0.8);

    --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-highlight: rgba(36, 2, 2, 0.8);

  --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);  

     --color-highlight: rgba(255, 239, 239, 0.8); 

    --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-highlight: rgba(2, 7, 36, 0.8);

  --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); 

    --color-highlight: rgba(239, 240, 255, 0.8); 
    
    --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-highlight: rgba(34, 36, 2, 0.8);

  --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);  

    --color-highlight: rgba(255, 255, 195, 0.8);

    --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 */
}


/* Base Styles */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
}

/* Leaves space so the navbar can interact well while the action is executed */
section[id] {
  scroll-margin-top: 76px; /* This value is the offset */
}

body {
    font-family: 'karla';
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 2;
    transition: background-color 0.3s, color 0.3s;
    font-weight: 400;
}

body.overlay-active .toc-trigger,
body.overlay-active .AP-trigger,
body.overlay-active .Nt-trigger,
body.overlay-active .footer-trigger,
body.overlay-active .theme-selector {
  z-index: 0; /* or 1 if needed */
  pointer-events: none; /* prevent clicks */
  opacity: 0.6; /* optional: dim slightly for visual cue */
}
 
.scroll-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 2);
}

.scroll-prompt p {
    margin: 0;
    font-size: 16px;
}

.scroll-down-arrow {
    font-size: 36px;
    animation: bounce 2s infinite;
    cursor: pointer;
    transition: transform 0.6s ease-in-out;
}

.scroll-down-arrow:hover {
    transform: scale(1.1);
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

/* Navigation Bar */
.navbar {
    background-color: var(--bg-color);
    padding: calc(2 * var(--base-grid-unit-mobile)) var(--container-padding-mobile);
    text-align: center; 
    border-bottom: 1px solid var(--card-border);
     position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s, box-shadow 0.1s;
}

.navbar ul { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; flex-wrap: wrap; }
.navbar li { margin: 0 var(--button-spacing); }
.navbar a {
    color: var(--text-color); text-decoration: none; font-size: var(--font-size-normal);
    padding: var(--button-padding-vertical) var(--button-padding-horizontal); display: block;
    border-radius: 24px; transition: background-color 0.3s ease, color 0.3s ease;
    height: calc(var(--button-height) - (2 * var(--button-padding-vertical)));
    display: flex; align-items: center; justify-content: center; 
}
.navbar a:hover, .navbar a.active { background-color: var(--button-bg); color:var(--button-text-color);     border: 1px solid var(--main--card-border) }
.light-mode .navbar a:hover, .light-mode .navbar a.active { background-color: transparent; border: 1px solid var(--card-border); color: var(--button-text-hover-active); }

/* Hamburger Menu for Mobile */
.hamburger-icon { cursor: pointer; padding: calc(2 * var(--base-grid-unit-mobile)); display: none; }
.hamburger-icon span { display: block; width: 30px; height: 3px; background-color: var(--text-color); margin: 6px 0; transition: all 0.3s ease, background-color 0.3s; }

.side-menu {
    position: fixed; top: 0; left: -100%; width: 50%; max-width: 400px; min-width: 200px; height: 100%;
    background-color: var(--bg-color); padding-top: 60px; transition: left 0.3s ease, background-color 0.3s;
    z-index: 7050; box-shadow: 2px 0 5px var(--shadow-color); display: flex; flex-direction: column; align-items: flex-start; border-right: solid 1px;
    background-color: var(--card-bg);
}
.side-menu.active { left: 0;  }
.side-menu ul { list-style: none; padding: 0; margin: 0; width: 100%; }
.side-menu li { width: 100%; margin-bottom: var(--button-spacing); }
.side-menu a { width: 100%; box-sizing: border-box; justify-content: flex-start; padding-left: var(--container-padding-mobile); }
.side-menu .theme-toggle-container { margin-top: auto; margin-bottom: 20px; padding-left: var(--container-padding-mobile); }

/* Theme Toggle */
.theme-toggle-container { margin-left: auto; align-self: center; }
.theme-toggle { cursor: pointer; width: 44px; height: 22px; background-color: #eff2ff; border-radius: 22px; position: relative; transition: background-color 0.3s; }
.theme-toggle:before { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background-color: #2584f0 ; border-radius: 50%; transition: transform 0.3s; }
.light-mode .theme-toggle { background-color: #020a15; }
.light-mode .theme-toggle:before { transform: translateX(22px); background-color:#eff2ff; }

/* Main Content Container */
.main-content {
    max-width: 1512px;  
    margin: 80pt auto;  
    padding: 0 var(--container-padding-desktop);
    box-sizing: border-box;
} 

/* Typography */
h1 { font-size: var(--font-size-title-mobile); margin-bottom: calc(2 * var(--base-grid-unit-mobile)) ; font-weight: 700; }
h2 { font-size: var(--font-size-subheading2-mobile); margin-top: 24pt; margin-bottom: 16pt; font-weight:400; }
h3 { font-size: var(--font-size-subtitle3-mobile); margin-top: 0; font-weight:700; }
 p, ul, li { font-size: var(--font-size-normal); margin-bottom: var(--base-grid-unit-mobile); font-weight:400;} 
ul { padding-left: calc(4 * var(--base-grid-unit-mobile)); list-style-type: disc; }
ol {padding-left: calc(7 * var(--base-grid-unit-mobile)); }
li { margin-bottom: calc(2 * var(--base-grid-unit-mobile)); }
.small-text { font-size: var(--font-size-small-mobile); color: var(--text-color); }
.section-subtitle { font-size: 18px; max-width: 600px; margin: 0 auto 40pt auto; }

/* General Hyperlink Styling */
a { color: var(--link-color); text-decoration: none; transition: color 0.3s ease, text-decoration 0.3s ease; text-decoration: underline; }
a:hover { color: var(--link-hover-color); text-decoration: underline; font-weight: bold;}

/* CTA Button & Animation */
.cta-button {
    display: inline-flex; align-items: center; justify-content: center;
    background-color: var(--button-bg); color: var(--button-text-color);
    border: 1px solid var(--button-border); padding: var(--button-padding-vertical) var(--button-padding-horizontal);
    border-radius: 24px; text-decoration: none; font-size: var(--font-size-cta-mobile);
    margin-top: 12px; height: var(--button-height);
    transition: background-color 0.3s, color 0.3s, border-color 0.3s, opacity 0.3s ease-out;
}
.cta-button.dissolve { opacity: 0.5; }
.cta-button:hover { background-color: var(--button-hover-color); color: var(--button-bg); border-color: var(--button-bg); }
.cta-buttons-container { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cta-button.secondary { background-color: var(--text-color); color: var(--bg-color); border-color: var(--text-color); }
.cta-button.secondary:hover { background-color: transparent; color: var(--text-color); border-color: var(--text-color); }


/* Utility Classes */
.text-center { text-align: center; }
section { margin-bottom: 44pt; }

 /* Media Queries for Responsive Design */
@media (max-width: 968px) {
    .navbar ul { display: none; }
    .hamburger-icon { display: block; }
}

/* Typography – Desktop */
@media (min-width: 768px) {
  h1 { font-size: var(--font-size-title-desktop); }
  h2 { font-size: var(--font-size-subheading2-desktop); }
  h3 { font-size: var(--font-size-subtitle3-desktop); }
   p, ul, li { font-size: var(--font-size-normal); }
  .small-text { font-size: var(--font-size-small-desktop); }
}

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

/* Images inside cards instead of icons */
.image2 {
    width: 100%;
    height: 50%;
    display: block;
    border-radius: 8px;
    align-items: center;
}

.image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    align-items: center;
}

.imagechart {
    width: 50%;
    min-width: 270px;
    height: auto;
     border-radius: 8px;
    align-items: center;
    margin: 8pt auto;        /* centers the line horizontally */
  display: block;   
}
/* Features Section */
.card {
    padding: 0px;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
 
}

.card-content {
    background-color: var(--card-bg);
    border-radius: 16px;  
    padding: 2rem;
     transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;

    display: flex;             /* 1. Turns the container into a flexbox */
    flex-direction: column;    /* 2. Stacks items vertically */
    align-items: left;

    position: relative; /* This is essential for the pseudo-elements */
    overflow: hidden;
    border: 1px solid var(--card-border);
    gap: 0.75rem;
}

.card-content h1,
.card-content h2,
.card-content h3,
.card-content h4,
.card-content h5,
.card-content h6,
.card-content p,
.card-content small {
  margin: 0;
  padding: 0;
}

.card-content:hover {
    transform: translatex(4px);
    
 }
 
.card-icon {
    padding-bottom: 20px;
    width: 64px;
    height: 64px;

    /* This sets the COLOR for all icons from your theme variables */
    background-color: var(--color-icons);

    /* General mask settings */
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;

    transition: background-color 0.3s ease;
}

.card-icon svg {
    width: 32px; /* Large Icon Size */
    height: 32px;
}

.card-title {
    font-size: 24px;
    margin-bottom: 0px;
}

.card-description {
     max-width: 100%;  
    margin: 0px;
    padding:0px;
}

 .card h3 { padding-top: 1rem; }
 
.card a {
    color: var(--color-primary);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.9rem;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 2px;
}



/*2 x 2 Grid */
.tbt-card-grid {
  display: grid;
  grid-template-columns: 1fr; /* Single column by default */
  justify-items: center;
  gap: 1rem;
  margin: 1rem auto;
  width: 100%;
  max-width: 1600px; /* Prevent cards from stretching too far */
}

/* Responsive grid for larger screens */
@media (min-width: 640px) {
  .tbt-card-grid {
    max-width: 90%;
    min-width: 240px;
    gap: 1rem;
  }
}

@media (min-width: 1024px) {
  .tbt-card-grid {
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  }
}

/*3 card Grid */
.ct-card-grid {
  display: grid;
  grid-template-columns: 1fr; /* Single column by default */
  justify-items: center;
  gap: 1rem;
  margin: 40px auto;
  width: 100%;
  max-width: 1600px; /* Prevent cards from stretching too far */
}

/* Responsive grid for larger screens */
@media (min-width: 640px) {
  .ct-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 2rem;
  }
}

@media (min-width: 1024px) {
  .ct-card-grid {
    gap: 1rem; 
  }
} 

/* Main product card */
.main-card-grid {
  display: grid;
  grid-template-columns: 1fr; /* Single column by default */
  justify-items: center;
  gap: 24px;
  margin: 40px auto;
  width: 100%;
  max-width: 1600px; /* Prevent cards from stretching too far */
}

/* Responsive grid for larger screens */
@media (min-width: 640px) {
  .main-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
  }
}

@media (min-width: 1024px) {
  .main-card-grid {
    gap: 40px;
  }
}

/* Card container */
.m-card-content {

   background-color: var(--card-bg);
  border-radius: 24px;
  padding: 24px;
  border: 1px solid var(--main-card-border);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* fix invalid value “left” */
}

.m-card-content:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px var(--shadow-color);
}

/* Card icon */
.m-card-icon {
  padding-bottom: 20px;
  width: 64px;
  height: 64px;
  background-color: var(--color-icons);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  transition: background-color 0.3s ease;
}

/* Typography inside cards */
.m-card-title {
  font-size: clamp(1.25rem, 2vw, 1.75rem); /* Scales smoothly */
  font-weight: 600;
  margin-bottom: 8px;
}

.m-card-description {
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  line-height: 1.6;
  color: var(--text-color);
  max-width: 100%;
}

 

/* To be added product - product card */
.card {
    padding: 0px;
}
 


/* line break*/
hr.styled-line {
    border: 0; 
    width: 100%;
    height: 0; 
    border-top: 1px solid var(--card-border); 
    margin: 20pt 0; 
}

/* line break in table*/
hr.styled-line-in {
    border: 0; 
    height: 0; 
    border-top: 1px solid var(--card-border); 
    margin: 8pt 0;
    width: 50%;
    align-items: center;  
}

/* line break in table*/
hr.styled-line-mid {
    border: 0; 
    height: 0; 
    border-top: 1px solid var(--card-border); 
    margin: 8pt auto;
    width: 50%;
    display: block; 

}

 #Resources li,
#works-cited li {
   word-wrap: break-word;
  overflow-wrap: break-word;

   word-break: break-all;
}

 


/* Trigger Button Styling */
        .toc-trigger {
            position: fixed;
            top: 50%;
            left: 0px;
            transform: translateY(-50%);
            background-color: var(--button-bg);
            color: var(--button-text-color);
            border: 1px solid var(--button-border);
            border-left: none;
            padding-top: 4px;
            padding-bottom: 4px;
            padding-right: 8px;
            padding-left: 4px;
            cursor: pointer;
            z-index: 1070;
            border-top-right-radius: 12px;
            border-bottom-right-radius: 12px;
            box-shadow: 0px 0px 0px var(--shadow-color);
            transition: all 0.3s ease;
        }

        .toc-trigger:hover {
            background-color: var(--button-border);
            color: var(--button-bg);
        }

        /* TOC Overlay Panel */
        .toc-overlay {
            /* Positioning & Sizing */
            position: fixed;
            top: 50%;
            left: 0;
            transform: translate(-100%, -50%); /* Start off-screen and vertically centered */
            width: 100%; /* Let max-width control the size */
            max-width: 240px; /* Mobile-first width */
            max-height: 572px;
            z-index: 7001;
            
            /* Appearance */
            background-color: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 24px; /* Match site's border-radius */
            box-shadow: 0px 4px 4px var(--shadow-color);

            /* Layout & Transition */
            display: flex;
            flex-direction: column;
            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother transition */
        }

        .toc-overlay.active {
            transform: translate(28px, -50%); /* Slide in with a small offset from the edge */
        }
 
        /* Header inside the TOC panel */
        .toc-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px;
            border-bottom: 1px solid var(--card-border);
            flex-shrink: 0; /* Prevent header from shrinking */
        }

        .toc-header h3 {
            font-family: 'Karla';
            font-size: var(--font-size-subtitle2-mobile);
            margin: 0;
            color: var(--text-color);
        }

        .toc-close-btn {
            cursor: pointer;
            color: var(--text-color);
            padding: 4px; /* Increase tappable area */
        }

        /* List of contents */
        .toc-list {
            list-style: none;
            padding: 0 16px;
            margin: 12px 0;
            overflow-y: auto; /* Allow scrolling */
            flex-grow: 1;
        }

        .toc-list li a {
            display: block;
            color: var(--text-color);
            text-decoration: none;
            font-size: var(--font-size-normal);
            padding: 0px 0;
            border-bottom: 0px solid var(--border-color);
            transition: color 0.3s ease, padding-left 0.3s ease;
        }
        
        .toc-list li:last-child a {
            border-bottom: none;
        }

        .toc-list li a:hover {
            color: var(--link-hover-color);
            padding-left: 8px;
        }
        
        /* Backdrop for when the menu is open */
        .toc-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.8);
            z-index: 7000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s ease, visibility 0.4s ease;
        }
        
        .toc-backdrop.active {
            opacity: 1;
            visibility: visible;
        }

        /* Responsive adjustments for larger screens */
        @media (min-width: 768px) {
            .toc-overlay {
                max-width: 512px; /* Desktop width */
            }

            .toc-overlay.active {
                 transform: translate(24px, -50%); /* Slightly larger offset for desktop */
            }

            .toc-header {
                padding: 24px;
            }

            .toc-list {
                padding: 0 24px;
                margin: 24px 0;
            }
        }

/* Icon setup */
.icon-info {
  display: inline-block;
  width: 24px;
  height: 24px;

  background-color: currentColor; /* Icon adopts the text color */
  mask: url('info.svg') no-repeat center / contain;
  -webkit-mask: url('info.svg') no-repeat center / contain;

  flex-shrink: 0;
}
  

        /* Footer Trigger Button */
        .footer-trigger {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--button-bg);
            color: var(--button-text-color);
            border: 1px solid var(--button-border);
            border-bottom: none;
            padding: 8px 16px;
            cursor: pointer;

            border-top-left-radius: 12px;
            border-top-right-radius: 12px;            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: var(--font-size-small-mobile);
        }

        .footer-trigger:hover {
            background-color: var(--button-hover-color);
            color: var(--button-text-color);
        }

        /* Footer Overlay Panel */
        .footer-overlay {
            position: fixed;
            bottom: -150%; /* Start off-screen */
            left: 0;
            width: 100%;
            z-index: 9000; /* Below TOC overlay, above content */
            
            max-height: 75vh; /* This caps the height to 85% of the screen's height */
    display: flex; /* This enables flexbox for better inner layout */
    flex-direction: column; /* This stacks the inner content vertically */
    
            background-color: var(--bg-color);
            border-top: 1px solid var(--card-border);
            box-shadow: 0 -4px 15px var(--shadow-color);
            
            transition: bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            text-align: center;
        }

        .footer-overlay.active {
            bottom: 0; /* Slide up */
            
        } 
        
        .footer-content-wrapper {
            max-width: 1512px; /* Match your main content width */
            margin: 0 auto;
            padding: var(--container-padding-desktop);
            overflow-y: auto; /* This adds a vertical scrollbar ONLY if needed */
        }

        /* Close button inside the footer */
        .footer-close-btn {
            position: absolute;
            top: 16px;
            right: 40px;
            cursor: pointer;
            color: var(--button-text-color);
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

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

        .footer-column h3 {
            font-family: 'Karla';
            font-size: var(--font-size-subtitle2-desktop);
            margin-bottom: var(--card-section-spacing-mobile);
            color: var(--text-color);
        }

        .footer-column p, .footer-column li {
            font-size: var(--font-size-normal);
            color: var(--text-color);
            opacity: 0.8;
            margin-bottom: var(--card-section-spacing-mobile);
        }

        .footer-column a {
            color: var(--text-color);
            opacity: 0.8;
            transition: opacity 0.3s ease;
        }

        .footer-column a:hover {
            opacity: 1;
            color: var(--link-hover-color);
        }

        /* Copyright section at the bottom */
        .footer-copyright {
            margin-top: var(--container-padding-desktop);
            padding-top: var(--card-section-spacing-desktop);
            border-top: 1px solid var(--border-color);
            text-align: center;
            font-size: var(--font-size-small-mobile);
            opacity: 0.7;
            margin: 16px;
        }
        
        /* Backdrop for when the footer is open */
        .footer-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            z-index: 7007; /* Below footer, above content */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s ease, visibility 0.4s ease;
        }
        
        .footer-backdrop.active {
            opacity: 1;
            visibility: visible;
        }

        /* Media query for desktop layout */
        @media (min-width: 768px) {
            .footer-grid {
                grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */
            }
        }

         

/* Big button */
.big-button-container {
    width: 100%;  
    display: flex;
    justify-content: center;  
    padding: 0px 0;  
}

.cta-full-width {
    /* --- Inherit from the base button --- */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--button-bg);
    color: var(--button-text-color);
    border: 1px solid var(--button-border);
    padding: var(--button-padding-vertical) var(--button-padding-horizontal);
    border-radius: 24px;
    text-decoration: none;
    margin-top: 0px;
    height: var(--button-height);
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    
    /* --- New rules for this specific button --- */
    width: 100%; /* Takes up 80% of its container's width */
    max-width: 700px; /* Prevents it from getting too wide on large screens */
    font-size: 20px;
}

.cta-full-width:hover {
    background-color: var(--button-hover-color);
    color: var(--button-bg);
}
 

/* --- FAQ Page Styles --- */
.faq-layout {
    display: flex;
    flex-direction: column;
    gap: calc(1 * var(--card-section-spacing-desktop));
    margin-top: calc(6 * var(--spacing-unit));
}

.faq-nav-container {
    flex-shrink: 0;
}

.faq-nav {
    display: flex;
    flex-direction: row;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: var(--spacing-unit);
    padding-bottom: 12px;
}

.faq-nav-link {
    color: var(--text-color);
    text-decoration: none;
    padding: 12px 16px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s;
    border: 1px solid var(--main-card-border);
    border-radius: 8px;
}

.faq-nav-link:hover {
    background-color: var(--button-hover-color);
    color: var(--button-text-hover-active);
}

.faq-nav-link.active {
    background-color: var(--button-bg);
    color: var(--button-text-color);
    border: 1px solid var(--main-card-border);
}

.faq-content {
    flex-grow: 1;
}

.faq-category {
    display: none;
}

.faq-category.active {
    display: block;
}

.faq-item {
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid var(--main-card-border);  
    border-radius: 8px;  
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
     align-items: center;
    text-align: left;
    background: none;
    cursor: pointer;
    padding: 16px;  
    border: none;
    color: var(--text-color);  
}

 .faq-question svg path {
    color: var(--bg-color);
    transition: fill 0.3s ease;
    background-color: var(--bg-color);
 }

.faq-question svg {
    width: 24px;
    height: 24px;
        color: var(--faq-icon-color);
        border-radius: 24px;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.faq-answer p {
    padding: 0 16px 16px;  
    color: var(--text-color);
    line-height: 1.5;
}

.faq-item.open .faq-answer {
    max-height: 300px;   
    text-decoration: none;
}

/* rule for icon rotation */
.faq-item.open svg {
    transform: rotate(180deg);
}

/* Responsive Layout for FAQ Page */
@media (min-width: 768px) {
    .faq-layout {
        flex-direction: row;
        align-items: flex-start;
    }
    .faq-nav-container {
        width: 240px;
    }
    .faq-nav {
        flex-direction: column;
        position: sticky;
        top: 104px;
    }
}
 
  /* === Overlay Base === */
.theme {
  position: fixed; 
  
  display: none; /* hidden by default */
   z-index: 66666;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  }


 /* Themes changer */
.theme-selector {
  position: fixed;
  top: 20%;
  right: 0px;
  z-index: 2500;
    
}

.theme-trigger {
  background: var(--button-bg);
  color: var(--button-text-color);
   padding: 8px;

  border-radius: 12px;
  border-top-left-radius: 24px;
  border-bottom-right-radius: 24px;
   
   cursor: pointer;
  box-shadow: 0 2px 8px var(--shadow-color);
  border: 1px solid var(--button-border);
   font-size: 0.7rem;
    
}

 .theme-trigger:hover {
            background-color: var(--button-border);
            color: var(--button-bg);
        }
        
.overlay-theme { 
  position: relative;
   background: var(--card-bg);
  border: 1px solid var(--card-border);
  padding: 1rem;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  overflow-y: auto;
  margin: 1.5rem;
  max-width: 90%;
  max-height: 80%; 
  max-width: 320px;
  min-width: 200px;
  box-shadow: 0 8px 20px rgba(0,0,0,1);
  transform: rotate(-50%);
  bottom: 8rem;

  text-align: left;
}

.overlay-theme.hidden {
  display: none;
}

.overlay-theme p {
  font-size: 12px;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer; 
  }

.theme-swatch {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--card-border);
  font-size: 1rem;
  text-align: left;
}

.swatch-0 { background: var(--brand-color, #6C3BAA); }
.swatch-1 { background: #3BAA78; }
.swatch-2 { background: #c52929; }
.swatch-3  { background: #2972c5;; } 
.swatch-4  { background: #fbff00;; } 


/* =================
 YouTube iframe 
 ==================*/
.yt-wrapper {
  display: flex;                  
  justify-content: center;       
  margin: 1rem auto;              
  padding: 1rem;                  
  border: 1px solid var(--main--card-border);
  border-radius: 24px;
  max-width: 950px;             
  box-sizing: border-box;      
  background: var(--card-bg);    
}

.yt-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
   background: #000;
}

.yt-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
 

* {
  padding: 0px;
  margin: 0px;
}
 
        
        /* Custom Layout/Spacing Classes (Replacing Tailwind's px-6 and similar) */
        .custom-container-padding {
            padding-left: calc(var(--container-padding-mobile) * 1px);
            padding-right: calc(var(--container-padding-mobile) * 1px);
        }
        @media (min-width: 1024px) { 
            .custom-container-padding {
                padding-left: calc(var(--container-padding-desktop) * 1px);
                padding-right: calc(var(--container-padding-desktop) * 1px);
            }
        }
        .section-margin {
            margin-bottom: calc(var(--base-grid-unit-desktop) * 8px); /* 12pt * 8 grid units for large margin */
        }
        
        /* Custom Button Styles (to ensure 48pt height and padding) */
        .custom-btn {
            height: var(--button-height);
            min-height: var(--button-min-tappable-area);
            padding-left: var(--button-padding-horizontal);
            padding-right: var(--button-padding-horizontal);
            padding-top: var(--button-padding-vertical);
            padding-bottom: var(--button-padding-vertical);
            font-size: var(--font-size-cta-mobile);
            border-radius: 8px; /* Arbitrary, rounded corners look good */
        }

        /* Semantic Utility Classes using  theme colors */
        .bg-theme-main { background-color: var(--bg-color); }
        .bg-theme-card { background-color: var(--card-bg); }
        .text-theme-main { color: var(--text-color); }
        .text-theme-accent1 { color: var(--color-accent-1); }
        .text-theme-accent2 { color: var(--color-accent-2); }
        .btn-theme-primary {
            background-color: var(--button-bg);
            color: var(--button-text-color);
            border: 1px solid var(--button-border);
            transition: background-color 0.3s;
        }
        .btn-theme-primary:hover {
            background-color: var(--button-hover-color);
        }
        .btn-theme-secondary {
            background-color: var(--color-accent-2); 
            color: var(--button-text-color);
            border: 1px solid var(--button-border);
            transition: background-color 0.3s;
        }
        .btn-theme-secondary:hover {
             background-color: var(--color-accent-1);
        }
        .border-theme-card { border-color: var(--card-border); }
        .ring-theme-accent2 { ring-color: var(--color-accent-2); }
        .vertical-line { background-color: var(--color-accent-1); }
        .footer-bg { background-color: var(--bg-color-tba); } 
        
        /* General Layout Styles */
        .chart-container {
            position: relative;
            width: 100%;
            max-width: 450px;
            margin-left: auto;
            margin-right: auto;
            height: 300px;
            max-height: 400px;
        }
        @media (min-width: 768px) {
            .chart-container {
                height: 400px;
            }
        }
        
        /* Accordion style adjustment for new theme */
        .accordion-header:hover {
            background-color: var(--bg-color-tba);
        }
        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-in-out;}



/* Timeline wrapper */
.timeline-custom {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--container-padding-mobile);
  overflow: auto; /* ensure parent contains floated items */
}

/* The vertical line (desktop only) */
.timeline-custom::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: var(--border-color);
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}

/* Item wrapper */
.timeline-item {
  position: relative;
  width: 50%;
  padding: calc(var(--base-grid-unit-desktop) * 3) 
           calc(var(--base-grid-unit-desktop) * 4);
  background-color: inherit;
  box-sizing: border-box;
  z-index: 1; /* keep above line */
}

/* Circles */
.timeline-item::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: var(--bg-color);
  border: 4px solid var(--main--card-border); 
  top: 15px;
  border-radius: 50%;
  z-index: 2;
}

/* Left aligned */
.timeline-left {
  float: left;
  clear: both;
}
.timeline-left::after {
  right: -13px;
}

/* Right aligned */
.timeline-right {
  float: right;
  clear: both;
}
.timeline-right::after {
  left: -13px;
}

/* Arrows for left */
.timeline-left::before {
  content: " ";
  position: absolute;
  top: 22px;
  right: 30px;
  border: medium solid var(--main--card-border);
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent var(--border-color);
  z-index: 2;
}

/* Arrows for right */
.timeline-right::before {
  content: " ";
  position: absolute;
  top: 22px;
  left: 30px;
  border: medium solid var(--main--card-border);
  border-width: 10px 10px 10px 0;
  border-color: transparent var(--main--card-border) transparent transparent;
  z-index: 2;
}

/* Timeline content block */
.timeline-content {
  padding: var(--card-section-spacing-desktop) 
           calc(var(--card-section-spacing-desktop) * 2);
  background-color: var(--card-bg);
  position: relative;
  border-radius: 6px;
  border: 1px solid var(--main--card-border);
  font-size: var(--font-size-normal);
}

/* Responsive - collapse to single column on small screens */
@media screen and (max-width: 600px) {
  .timeline-custom::after {
    display: none; /* hide vertical line */
  }

  .timeline-item {
    width: 100%;
     float: none;
    padding: var(--base-grid-unit-mobile) var(--container-padding-mobile);
  }

  /* hide arrows and circles */
  .timeline-item::before,
  .timeline-item::after {
    display: none;
  }

  .timeline-content {
    padding: var(--card-section-spacing-mobile);
  }
}
/* Timeline wrapper */
.timeline-custom {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--container-padding-mobile);
  overflow: auto; /* ensure parent contains floated items */
}

/* The vertical line (desktop only) */
.timeline-custom::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: var(--border-color);
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}

/* Item wrapper */
.timeline-item {
  position: relative;
  width: 52%;
  padding: calc(var(--base-grid-unit-desktop) * 3) 
           calc(var(--base-grid-unit-desktop) * 4);
  background-color: inherit;
  box-sizing: border-box;
  z-index: 1; /* keep above line */
}

/* Circles */
.timeline-item::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: var(--bg-color);
  border: 4px solid var(--border-color);
  top: 15px;
  border-radius: 50%;
  z-index: 2;
}

/* Left aligned */
.timeline-left {
  float: left;
  clear: both;
}
.timeline-left::after {
  right: -13px;
}

/* Right aligned */
.timeline-right {
  float: right;
  clear: both;
}
.timeline-right::after {
  left: -13px;
}

/* Arrows for left */
.timeline-left::before {
  content: " ";
  position: absolute;
  top: 22px;
  right: 30px;
  border: medium solid var(--main--card-border);
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent var(--border-color);
  z-index: 2;
}

/* Arrows for right */
.timeline-right::before {
  content: " ";
  position: absolute;
  top: 22px;
  left: 30px;
  border: medium solid var(--border-color);
  border-width: 10px 10px 10px 0;
  border-color: transparent var(--border-color) transparent transparent;
  z-index: 2;
}

/* Timeline content block */
.timeline-content {
  padding: var(--card-section-spacing-desktop) 
           calc(var(--card-section-spacing-desktop) * 2);
  background-color: var(--bg-color);
  position: relative;
  border-radius: 6px;
  border: 1px solid var(--main--card-border);
  font-size: var(--font-size-normal);
}

/* Responsive - collapse to single column on small screens */
@media screen and (max-width: 600px) {
  .timeline-custom::after {
    display: none; /* hide vertical line */
  }

  .timeline-item {
    width: 100%;
    float: none;
    padding: var(--base-grid-unit-mobile) var(--container-padding-mobile);
  }

  /* hide arrows and circles */
  .timeline-item::before,
  .timeline-item::after {
    display: none;
  }

  .timeline-content {
    padding: var(--card-section-spacing-mobile);
  }
}

/* === Text Alignment Utility Classes === */
/* Centered Headings */
.text-center-h1 { text-align: center;   font-weight: bold; }
.text-center-h2 { text-align: center;   font-weight: bold; }
.text-center-h3 { text-align: center;  font-weight: bold; }
.text-center-h4 { text-align: center;   font-weight: bold; }
.text-center-h5 { text-align: center;   font-weight: bold; }
.text-center-h6 { text-align: center;  font-weight: bold; }
 
/* Paragraphs */
.text-left-p { text-align: center; font-size: var(--font-size-normal); line-height: 1.6; }
.text-center-p { text-align: center; font-size: var(--font-size-normal); line-height: 1.6; }

/* Lists */
.text-left-ol,
.text-left-ul { text-align: left; margin: 1em 0 1em 2em; line-height: 1.6; }

.text-left-li { text-align: left; margin-bottom: 0.5em; }

/* Small text centered */
.small-center {
  display: block; /* ensures it can be aligned */ text-align: center; margin-bottom: 0.5em; font-size: smaller;       /* keep the semantic "small" look */}



  /* Right Headings */
.text-right-h1 { text-align: right; font-size: var(--font-size-title-desktop); font-weight: bold; }
.text-right-h2 { text-align: right; font-size: var(--font-size-subheading-desktop); font-weight: bold; }
.text-right-h3 { text-align: right; font-size: 1.5rem; font-weight: bold; }
.text-right-h4 { text-align: right; font-size: 1.25rem; font-weight: bold; }
.text-right-h5 { text-align: right; font-size: 1.125rem; font-weight: bold; }
.text-right-h6 { text-align: right; font-size: 1rem; font-weight: bold; }
 
/* Paragraphs */
.text-right-p { text-align: right; font-size: var(--font-size-normal); line-height: 1.6; }

/* Lists */
.text-right-ol,
.text-right-ul { text-align: right; margin: 1em 0 1em 2em; line-height: 1.6; }

.text-right-li { text-align: right; margin-bottom: 0.5em; }

/* Small text centered */
.small-right {
  display: block; text-align: right; margin-bottom: 0.5em; font-size: smaller;       /* keep the semantic "small" look */}




  /* === Overlay Base === */
.overlay {
  position: fixed; 
  
  display: none; /* hidden by default */
   z-index: 66666;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  }

/* Overlay inner box */
.overlay-content {
  position: relative;
  margin: 2rem;
  background: var(--card-bg);
  padding: 1rem;
  border-radius: 12px;
  max-width: 90%;
  max-height: 80%;
  overflow: auto;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  border: solid 1px var(--border-color);
}

/* Close button */
.close-btn {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 2rem;
  border: none;
  background: transparent;
 
  color: var(--text-color, #333);
}

/* Overlay trigger button */
.overlay-btn {
  position: fixed;
  top: 36%;
  right: 0rem;
  transform: translateY(-50%);
  background: var(--button-bg);
  color: var(--text-color);
  border: 1px solid var(--card-border);
  border-radius: 12px;
   border-top-left-radius: 24px;
  border-bottom-right-radius: 24px;

  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  z-index: 1000;
    padding-top: 8px;
  
}

.overlay-btn .btn-icon {
     width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.9rem; 
 }

/* === Table inside overlay === */
.overlay-table-container {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 60vh; /* keeps it scrollable if large */
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.overlay-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  background: var(--bg-color);
  color: var(--text-color);
}

.overlay-table caption {
  font-size: 1.2rem;
  font-weight: 600;
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color,);
}

.overlay-table th,
.overlay-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color, #ccc);
  border-right: 1px solid var(--border-color, #ccc);
}

.overlay-table th {
  background-color: var(--bg-color);
  font-weight: 600;
}
 

.form-wrapper {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.google-form {
  width: 100%;
  height: 700px; /* adjust as needed */
  border: none;
}

/* Responsiveness */
@media (max-width: 768px) {
  .google-form {
    height: 900px;
  }
}

/* Example for theme-adaptable border/background */
.theme-light .form-wrapper {
  background: var(--bg-color);
  border: 1px solid var(--main--card-border);
} 

/* ------------------------------
---------ICONS---------------------
--------------------------------*/
.regular-icon {
  width: 24px;
  height: 24px;
}


.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}
 
 .icon-close {
  display: inline-block;
  width: 24px;
  height: 24px;

  background-color: var(--text-color); /* Icon adopts the text color */
  mask: url('x-circle.svg') no-repeat center / contain;
  -webkit-mask: url('x-circle.svg') no-repeat center / contain;

  flex-shrink: 0;
}

/*Interactive Images */
.main-content-images {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--container-padding-desktop);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden; /* allow page height to expand, but keep flex layout */
}

/* Parent of title / nav / feed - acts as a column flex container */
.image-gallery-container {
  display: flex;
  flex-direction: column;
  min-height: 0; /* allow children to shrink inside a flex parent */
  box-sizing: border-box;
  overflow-x: hidden;
 }

/* Title + nav */
.gallery-title {
  font-size: var(--font-size-title-mobile);
  margin-bottom: var(--card-section-spacing-mobile);
  color: var(--text-color);
}

/* Category nav */
.category-nav-wrapper {
  flex-shrink: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--card-section-spacing-mobile);
}
.category-nav {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: var(--button-spacing);
  white-space: nowrap;
}
.category-button {
  background: transparent;
  border: 1px solid var(--main--border-color);
  color: var(--text-color);
  padding: var(--button-padding-vertical) var(--button-padding-horizontal);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
  font-size: var(--font-size-cta-mobile);
  min-height: var(--button-min-tappable-area);
}
.category-button:hover { background-color: var(--button-hover-color); }
.category-button.active {
  background-color: var(--button-bg);
  border-color: var(--main--card-border);
  color: var(--button-text-color);
}

/* -------------------------
   IMAGE FEED (mobile default)
   - Container scrolls vertically (TikTok-like)
   - Use flex column stack, enable overflow-y:auto
   ------------------------- */
.image-feed-wrapper {
  flex: 1 1 auto;
  min-height: 0;               /* critical for child overflow to work in flex layout */
  overflow-y: auto;
  overflow-x: hidden;         /* force vertical scroll only */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y mandatory;
  display: flex;
  flex-direction: column;
  gap: var(--card-section-spacing-mobile);
  padding-bottom: 40px;
  box-sizing: border-box;
 }

/* Individual card sizing and visual treatment */
.image-card {
  width: 100%;
   background: var(--card-bg);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 12px var(--shadow-color);
  border: 1px solid var(--main-card-border);
  transition: transform 0.2s ease-in-out;
  scroll-snap-align: start;
   box-sizing: border-box;
 }

/* Image fills the card area, cropped nicely */
.image-card img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover; /* important: keeps same visual framing */
 }


 .blogimagechart {
    width: fit-content;
    min-width: auto;
    height: auto;
    max-height: 256px;
    border-radius: 24px;
    align-items: center;
    margin: 8pt auto;        /* centers the line horizontally */
  display: block;   
  background-color: var(--button-bg);
  border: 1px solid var(--border-color);
  padding: 2rem;
} 

.chcfav {
  width: 2rem;
  height: 2rem; 
            position: static; 
             background-color: var(--card-bg);
            color: var(--icon-colors-version-one);
            border: 1px solid var(--button-border);
            border-radius: 50%;
            padding-bottom: 16px;
            padding: 1rem;
            cursor: pointer;
            z-index: 1070; 
            box-shadow: 0px 0px 0px var(--shadow-color);
            transition: all 0.3s ease;
            align-items: center;
        margin: 8pt auto;  
}

.icon2 {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
              margin: 8px auto; 
             align-items: center;
}


.icon-chev {
  display: inline-block;
  width: 2rem;
  height: 2rem;

   background-color: var(--card-bg);
            color: var(--icon-colors-version-one);
            border: 1px solid var(--button-border);
            border-radius: 50%;
            padding-bottom: 16px;
            padding: 1rem;
            margin: 8px auto; 
             align-items: center;

  background-color: currentColor; /* Icon adopts the text color */
  mask: url('caret-circle-down.svg') no-repeat center / contain;
  -webkit-mask: url('caret-circle-down.svg') no-repeat center / contain;

  flex-shrink: 0;
}
/* Like button + count */
.like-button {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(0,0,0,0.5);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  transition: transform 0.2s;
  z-index: 5;
}
.like-button .heart { color: #fff; transition: color 0.2s; }
.like-button.liked .heart { color: #ff4d4f; transform: scale(1.08); }

.like-count {
  font-size: var(--font-size-small-mobile);
  color: var(--text-color);
  position: absolute;
  right: 60px;
  bottom: 24px;
  background: rgba(0,0,0,0.5);
  border-radius: 5px;
  padding: 2px 6px;
  z-index: 5;
}

/* -------------------------
   Desktop / Tablet: GRID layout
   - Switch display to grid explicitly (fixes previous bug)
   - Use grid columns and let the whole page scroll normally (overflow visible)
   ------------------------- */
@media (min-width: 768px) {
  .gallery-title { font-size: var(--font-size-title-desktop); margin-bottom: var(--card-section-spacing-desktop); }
  .category-nav-wrapper { margin-bottom: var(--card-section-spacing-desktop); }
  .category-button { font-size: var(--font-size-cta-desktop); }

  /* Desktop grid: make each card keep aspect and fit grid cell */
  .image-feed-wrapper {
    display: grid;                    /* ensure grid is used explicitly */
    grid-auto-flow: row;              /* place items row by row (not column flow) */
    grid-template-columns: repeat(2, 1fr);
    gap: var(--card-section-spacing-desktop);
    overflow-y: visible;              /* page scroll handles vertical scroll on desktop */
    overflow-x: hidden;
    min-height: auto;
  }

  .image-card {  
  min-width: 0;} /* preserve consistent boxes on larger screens */
  
}

@media (min-width: 1024px) {
  .image-feed-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}

.box {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  padding: 2rem;
  border-radius: 24px;
}


/* Container */
.profile-container {
  position: relative;
  animation: profile-slide-in 0.9s cubic-bezier(0.425, 1.14, 0.47, 1.125) forwards;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}

/* Main card */
.profile-card {
  max-width: 500px;
  width: 100%;
  min-height: 120px;
  padding: 20px;
  border-radius: 8px;
  background-color: var(--card-bg);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--card-border)
}

.profile-card:after {
  content: "";
  display: block;
  width: 190px;
  height: 300px;
  background: var(--button-bg);
  position: absolute;
  animation: profile-rotate-bg 0.75s cubic-bezier(0.425, 1.04, 0.47, 1.105) 1s both;
}

/* Badges */
.profile-badges {
  padding: 5px 20px;
  border-radius: 6px;
  background-color: var(--card-bg);
  max-width: 480px;
  width: 90%;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  position: absolute;
  z-index: -1;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
  animation: profile-badges-in 0.5s cubic-bezier(0.425, 1.04, 0.47, 1.105) 0.75s forwards;
   border: 1px solid var(--card-border);
   padding-top: 20px;
}
.profile-badges span {
  font-size: 1.6em;
  margin: 0 6px;
  opacity: 0.7;
  }

.profile-badges svg {
  fill: var(--card-border);
}

/* First info section */
.profile-main {
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index: 2;
  position: relative;
}

.profile-main img {
  border-radius: 50%;
  width: 120px;
  height: 120px;
  object-fit: cover;
}

.profile-info {
  padding: 0 20px;
}

.profile-info h1 {
  font-size: 1.6rem;
  line-height: 1.2;
}

.profile-info h3 {
  font-size: 1.1rem;
  color: var(--text-color-hl-card);
  font-style: italic;
  margin-top: 0.3rem;
}

.profile-info p.bio {
   color: var(--text-color);
    background-color: var(--card-bg);
  }

 
/* Accessibility: scale for smaller screens */
@media (max-width: 600px) {
  .profile-main {
    flex-direction: column;
    text-align: center;
  }

  .profile-main img {
    width: 80px;
    height: 80px;
    margin-bottom: 12px;
  }

  .profile-info {
    padding: 0;
  }

  .profile-info h1 {
    font-size: 1.3rem;
    background-color: var(--card-bg);
  }

  .profile-info h3 {
    font-size: 1rem;
    background-color: var(--card-bg);
  }

  .profile-info p.bio {
    font-size: 0.9rem;
    background-color: var(--card-bg);
  }

  .profile-badges {
    font-size: 0.85rem;
    padding: 8px 12px;
  }
}

/* Animations */
@keyframes profile-slide-in {
  0% {
    opacity: 0;
    bottom: -500px;
  }
  100% {
    opacity: 1;
    bottom: 0px;
  }
}

@keyframes profile-badges-in {
  0% {
    bottom: 10px;
  }
  100% {
    bottom: -42px;
  }
}

@keyframes profile-rotate-bg {
  0% {
    opacity: 0;
    transform: rotate(0deg);
    top: -24px;
    left: -253px;
  }
  100% {
    transform: rotate(-30deg);
    top: -24px;
    left: -78px;
  }
}

.iframe-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
}


 

/* Override default jsMind styles */
.jsmind-node {
  background-color: var(--mindmap-node-bg) !important;
  border: 1px solid var(--mindmap-node-border) !important;
  color: var(--mindmap-node-text) !important;
  border-radius: 8px;
  padding: 6px 10px;
}

.jsmind-link {
  stroke: var(--mindmap-link-color) !important;
}

/* Hover / selected style */
.jsmind-node:hover {
  background-color: var(--mindmap-node-border);
}

.jsmind-node_selected {
  background-color: var(--mindmap-link-color);
  color: #fff;
}

/* Accessibility Options */
        .AP-trigger {
            position: fixed;
            bottom: 0;
            right: 0px;
            transform: translateY(0%);
            background-color: var(--button-bg);
            color: var(--button-text-color);
            border: 1px solid var(--button-border);
            border-right: none;
            padding-top: 4px; 
            padding-right: 4px;
            padding-left: 8px;
            cursor: pointer;
            z-index: 1070;
            border-top-left-radius: 12px;
            border-bottom-left-radius: 12px;
            box-shadow: 0px 0px 0px var(--shadow-color);
            transition: all 0.3s ease;
        }

        .AP-trigger:hover {
            background-color: var(--button-border);
            color: var(--button-bg);
        }

        /* Nt Overlay Panel */
        .AP-overlay {
            /* Positioning & Sizing */
            position: fixed;
            top: 85%;
            right: 15%;
            transform: translate(240%, 50%); /* Start off-screen and vertically centered */
            width: 100%; /* Let max-width control the size */
            max-width: 220px; /* Mobile-first width */
            max-height: 500px;
            z-index: 1060;
            
            /* Appearance */
            background-color: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 24px; /* Match site's border-radius */
            box-shadow: 0px 4px 4px var(--shadow-color);

            /* Layout & Transition */
            display: flex;
            flex-direction: column;
            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother transition */
        }

        .AP-overlay.active {
            transform: translate(28px, -50%); /* Slide in with a small offset from the edge */
        }
        
        /* Header inside the Nt panel */
        .AP-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px;
            border-bottom: 1px solid var(--card-border);
            flex-shrink: 0; /* Prevent header from shrinking */
        }

        .AP-header h3 {
            font-family: 'Karla';
            font-size: var(--font-size-subtitle2-mobile);
            margin: 0;
            color: var(--text-color);
        }

        .AP-close-btn {
            cursor: pointer;
            color: var(--text-color);
            padding: 4px; /* Increase tappable area */
        }

        /* List of contents */
        .AP-list {
            list-style: none;
            padding: 0 16px;
            margin: 12px 0;
            overflow-y: auto; /* Allow scrolling */
            flex-grow: 1;
        }

        .AP-list li a {
            display: block;
            color: var(--text-color);
            text-decoration: none;
            font-size: var(--font-size-normal);
            padding: 0px 0;
            border-bottom: 0px solid var(--border-color);
            transition: color 0.3s ease, padding-left 0.3s ease;
        }
        
        .AP-list li:last-child a {
            border-bottom: none;
        }

        .AP-list li a:hover {
            color: var(--link-hover-color);
            padding-left: 8px;
        }
        
        /* Backdrop for when the menu is open */
        .AP-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.8);
            z-index: 1055;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s ease, visibility 0.4s ease;
        }
        
        .AP-backdrop.active {
            opacity: 1;
            visibility: visible;
        }
 

        .AP-text {
            font-size: 0.55rem;
        }

.AP-card-grid {
      max-width: auto;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

        .AP-card-content {
   background-color: var(--card-bg);
  border-radius: 24px;
  padding: 3px;
  border: 1px solid var(--main-card-border);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* fix invalid value “left” */
}

/* Responsive adjustments for larger screens */
        @media (min-width: 768px) {
            .AP-overlay {
                max-width: 512px; /* Desktop width */
            }

            .AP-overlay.active {
                 transform: translate(24px, -50%); /* Slightly larger offset for desktop */
            }

            .AP-header {
                padding: 24px;
            }

            .AP-list {
                padding: 0 24px;
                margin: 24px 0;
            }
        }


.icon-hearingaid {
  display: inline-block;
  width: 16px;
  height: 16px;

  background-color: currentColor; /* Icon adopts the text color */
  mask: url('hearing-aid-outline-icon.svg') no-repeat center / contain;
  -webkit-mask: url('hearing-aid-outline-icon.svg') no-repeat center / contain;

  flex-shrink: 0;
}
 
/* ==============
Navigation Tips 
================ */
        .Nt-trigger {
            position: fixed;
            top: 1.5rem;
            right: 1rem;
            transform: translateY(0%);
            background-color: var(--button-bg);
            color: var(--button-text-color);
            border: 1px solid var(--button-border); 
            padding-top: 8px;
            padding-bottom: 8px;
            padding-right: 8px;
            padding-left: 8px;
            cursor: pointer;
            z-index: 1070;
            border-radius: 12px;
            box-shadow: 0px 0px 0px var(--shadow-color);
            transition: all 0.3s ease;
        }

        .Nt-trigger:hover {
            background-color: var(--button-border);
            color: var(--button-bg);
        }

        /* Nt Overlay Panel */
        .Nt-overlay {
            /* Positioning & Sizing */
            position: fixed;
 top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
            width: 100%; /* Let max-width control the size */
            max-width: 300px; /* Mobile-first width */
            max-height: 500px;
            z-index: 7030;
            
            /* Appearance */
            background-color: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 24px; /* Match site's border-radius */
            box-shadow: 0px 4px 4px var(--shadow-color);

            /* Layout & Transition */
            display: flex;
            flex-direction: column;
            
            opacity: 0;               /* make it invisible */
  visibility: hidden;       /* prevent interaction when hidden */
  pointer-events: none;

            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother transition */

            overflow-y: auto;
max-height: 90vh; /* prevents it from going beyond the visible screen height */

        }

        .Nt-overlay.active {
           opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
        }
        
        /* Header inside the Nt panel */
        .Nt-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px;
            border-bottom: 1px solid var(--card-border);
            flex-shrink: 0; /* Prevent header from shrinking */
        }

        .Nt-header h3 {  
            font-family: 'Karla';
            font-size: var(--font-size-subtitle2-mobile);
            margin: 8px;
            color: var(--text-color);        
        }

        .Nt-close-btn {
            cursor: pointer;
            color: var(--text-color);
            padding: 4px; /* Increase tappable area */
        }

        /* List of contents */
        .Nt-list {
            list-style: none;
            padding: 0 8px;
            margin: 8px 0;
            overflow-y: auto; /* Allow scrolling */
            flex-grow: 1;
        }

        .Nt-list li a {
            display: block;
            color: var(--text-color);
            text-decoration: none;
            font-size: var(--font-size-normal);
            padding: 0px 0;
            border-bottom: 0px solid var(--border-color);
            transition: color 0.3s ease, padding-left 0.3s ease;
            margin: 0px;
        }
        
        .Nt-list li:last-child a {
            border-bottom: none;
        }

        .Nt-list li a:hover {
            color: var(--link-hover-color);
            padding-left: 8px;
        }
        
        /* Backdrop for when the menu is open */
        .Nt-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.8);
            z-index: 7030;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s ease, visibility 0.4s ease;
        }
        
        .Nt-backdrop.active {
            opacity: 1;
            visibility: visible;
        }
 

        .Nt-text {
            font-size: 0.7rem;
            padding: 0;
            margin: 0;
        }

.Nt-card-grid {
      max-width: auto;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

        .Nt-card-content {
   background-color: var(--card-bg);
  border-radius: 24px;
  padding: 3px;
  border: 1px solid var(--main-card-border);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* fix invalid value “left” */
}

        /* Responsive adjustments for larger screens */
        @media (min-width: 768px) {
            .Nt-overlay {
                max-width: 512px; /* Desktop width */
            }

            .Nt-overlay.active {
                 transform: translate(-50%, -50%); /* Slightly larger offset for desktop */
            }

            .Nt-header {
                padding: 24px;
            }

            .Nt-list {
                padding: 0 24px;
                margin: 24px 0;
            }
        }

/* ===================================
Text clampable - Important in cards! 
====================================== */
         .clampable {
  display: -webkit-box;
  -webkit-line-clamp: 2;    
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
  transition: all .3s ease;
  text-align: left;
}

 @media (hover: hover) {
  .clampable:hover {
    -webkit-line-clamp: unset;
    overflow: visible;
    white-space: normal;
  }
}

 .clampable.expanded {
  -webkit-line-clamp: unset;
  overflow: visible;
  white-space: normal;
}