html {
  --s: 16px; /* control the size*/
  --c1: #f5f4c1;
  --c2: #f0d77a;
  
  --c:#0000,var(--c1) .5deg 119.5deg,#0000 120deg;
  --g1:conic-gradient(from  60deg at 56.25% calc(425%/6),var(--c));
  --g2:conic-gradient(from 180deg at 43.75% calc(425%/6),var(--c));
  --g3:conic-gradient(from -60deg at 50%   calc(175%/12),var(--c));
  background:
    var(--g1),var(--g1) var(--s) calc(1.73*var(--s)),
    var(--g2),var(--g2) var(--s) calc(1.73*var(--s)),
    var(--g3) var(--s) 0,var(--g3) 0 calc(1.73*var(--s)) 
    var(--c2);
  background-size: calc(2*var(--s)) calc(3.46*var(--s));
}

/* Custom Color Palette & Theming */
:root {
    --primary-gold: #ffd166;
    --pastel-pink: #ff99c8;
    --pastel-yellow: #fcf6bd;
    --text-main: #2b2d42;
    --bg-card: #ffffff;
    
    /* Light mode: Lowered stroke-opacity to 0.15 */
    --honeycomb-bg: url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill-rule='nonzero' stroke='%23ffd166' stroke-width='1' stroke-opacity='0.15'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

[data-bs-theme="dark"] {
    --primary-gold: #c2992b;
    --pastel-pink: #cc5c93;
    --pastel-yellow: #3a3826;
    --text-main: #f8f9fa;
    --bg-card: #2b2d42;
    
    /* Dark mode: Lowered stroke-opacity to 0.03 */
    --honeycomb-bg: url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill-rule='nonzero' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.03'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}



        body {
            background-color: var(--pastel-yellow);
            background-image: var(--honeycomb-bg);
            color: var(--text-main);
            transition: background-color 0.3s, color 0.3s;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
		.navbar {
    		color: #2b2d42;
    		box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    		background-image: url('images/pink-seamless-honeycomb-pattern.jpg') !important;
    		background-repeat: repeat; 
    		width: 100%;
    		/* Swapped height for min-height so it can expand on mobile */
    		min-height: 70px; 
		}

/* Mobile Menu Styling */
@media (max-width: 991.98px) {
    #navbarMenu {
        /* Uses your existing gold variable for a cohesive look */
        background-color: var(--primary-gold); 
        
        /* Adds spacing inside the box so links don't touch the edges */
        padding: 1.5rem; 
        
        /* Gives it nice rounded corners to match your theme */
        border-radius: 1rem; 
        
        /* Pushes it slightly down from the navbar header */
        margin-top: 1rem; 
        
        /* Adds a drop shadow so it floats cleanly over page content */
        box-shadow: 0 10px 20px rgba(0,0,0,0.15); 
    }
}

        .navbar-brand {
            font-weight: 800;
            color: var(--text-main) !important;
            font-size: 1.5rem;
        }

        .btn-pink {
            background-color: #e673a8;
            border-color: #fff;
            color: #fff;
            font-weight: 600;
        }

        .btn-pink:hover {
            background-color: pink !important;
            color: #FFF;
            border-color: yellow;
        }

        .btn-white {
            background-color: white;
            border-color: white;
            color: #2b2d42;
            font-weight: 600;
        }

        .btn-white:hover {
            background-color: whitesmoke;
            color: #2b2d42;
        }

        .custom-card {
            background-color: var(--bg-card);
            border: 2px solid var(--primary-gold);
            border-radius: 1rem;
            box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        }

        .accordion-button:not(.collapsed) {
            background-color: var(--pastel-pink) !important;
            color: #fff;
        }

        .beatingheart{
 				--fa-beat-scale: 2.0;
 				color: pink !important;
 				font-size: 10rem; opacity: 0.8;       
        }
        
/* Default style for the theme toggle button (Light Mode) */
#themeToggle {
    background-color: var(--text-main);
    border-color: var(--bg-card);
    color: var(--bg-card);
    transition: all 0.3s ease; /* Makes the color changes smooth */
}

/* Light mode hover effect */
#themeToggle:hover {
    background-color: var(--pastel-pink);
    border-color: var(--pastel-pink);
    color: #ffffff;
}

/* Style the theme toggle button when dark mode is active */
[data-bs-theme="dark"] #themeToggle {
    background-color: var(--primary-gold);
    border-color: var(--primary-gold);
    color: #2b2d42; 
}

/* Dark mode hover effect */
[data-bs-theme="dark"] #themeToggle:hover {
    background-color: var(--pastel-pink);
    border-color: var(--pastel-pink);
    filter: brightness(1.1);
}