/* Style Sheet - Little Grove Holistic Health */
/* Copyright 2013-2026 Edward J Cadman - All Rights Reserved */

        /* Reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Montserrat', sans-serif;
        }

		html, body {
		    height: 100%;
		}

        body {
            line-height: 1.6;
            background: #D5BADA;
		    min-height: 100vh;
            color: #fff;
		    
		    display: flex;
		    flex-direction: column;
        }

		main {
		    flex: 1; /* pushes footer down */
		}
		
        header {
            background: #263168;
            color: white;
            padding: 1rem;
            position: relative;
		    z-index: 1000;
        }

		.title-group {
		    display: flex;
		    flex-direction: column;
		    line-height: 1.1;
		}

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        nav h1 {
            font-family: 'Great Vibes', cursive;
            font-size: 2rem;
		    font-weight: normal;
			margin: 0;
        }

		.subheading {
		    font-family: 'Montserrat', sans-serif;
		    font-size: 0.8rem;
		    color: #fff;
		    margin-top: -1px; /* pulls it closer to the title */
	        letter-spacing: 1px;
		}
		
        nav ul {
            list-style: none;
            display: flex;
            gap: 1rem;
        }

        nav a {
            color: white;
            text-decoration: none;
        }

        /* Mobile menu */
        .menu-toggle {
            display: none;
            font-size: 1.5rem;
            cursor: pointer;
        }

        .container {
            padding: 1rem;
        }

		.container a:link,a:visited {
			color:#fff;
		}

		.container a:hover,a:active {
			color:#263168;
		}

		.container ul {
			padding-left: 20px;
		}
		
        .grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1rem;
        }

		.card {
		    background: rgba(255, 255, 255, 0.15); /* transparency */
		    backdrop-filter: blur(10px);          /* blur effect */
		    -webkit-backdrop-filter: blur(10px);  /* Safari support */

		    border-radius: 12px;
		    overflow: hidden; /* ensures rounded corners clip content */
		    padding: 1.5rem;

		    border: 1px solid rgba(255, 255, 255, 0.7);
		    color: white;
		    
		    position: relative;
		    z-index: 1;
		}

		.card1 {
		    background: url('balance2.png') center/cover;
		}

		.card2 {
		    background: url('drop-of-water-4531474_1280.jpg') center/cover;
		}

		.card3 {
		    background: url('zen-5533531_1280.jpg') center/cover;
		}

		.card4 {
		    background: url('groyne-7917596_1280.jpg') center/cover;
		}
		
		.card5 {
		    background: url('balance1.png') center/cover;
		}

		.card6 {
		    background: url('reiki.jpg') center/cover;
		}

		.card7 {
		    background: url('reflexology1.jpg') center/cover;
		}

		/* Overlay layer */
		.card::before {
		    content: "";
		    position: absolute;
		    inset: 0;
		    background: rgba(0, 0, 0, 0.5); /* adjust opacity here */
		}

		/* Keep text above overlay */
		.card * {
		    position: relative;
		    z-index: 1;
		}

        footer {
            background: #263168;
            color: white;
            text-align: center;
            padding: 1rem;
            margin-top: 1rem;
        }

        /* Tablet */
        @media (min-width: 600px) {
            .grid {
	        	grid-template-columns: 1fr; /* single column */
	    	    max-width: 600px;           /* optional: keeps it nicely centered */
    	    	margin: 0 auto;
            }
        }

        /* Desktop */
        @media (min-width: 900px) {
            .grid {
	        	grid-template-columns: 1fr; /* single column */
	    	    max-width: 600px;           /* optional: keeps it nicely centered */
    	    	margin: 0 auto;
            }
        }

        /* Mobile nav */
        @media (max-width: 600px) {
            nav ul {
                display: none;
                flex-direction: column;
                background: #5560a9;
                position: absolute;
                top: 60px;
                right: 0;
                width: 200px;
                padding: 1rem;
            }

            nav ul.active {
                display: flex;
            }

            .menu-toggle {
                display: block;
            }
        }
        
        .logo-container {
		    display: flex;
		    align-items: center;
		    gap: 10px;
		}

		.logo {
		    width: 60px;		/* Can make bigger, eg 40 -> 60px */
		    height: 60px;
		    object-fit: contain;
		}

		.ukrf {
		    width: 40px;		/* Can make bigger, eg 40 -> 60px */
		    object-fit: contain;
		    float: left;
		}
		
		.privacy {
			font-size: 0.5rem;
			color: white;
		    object-fit: contain;
			float: right;
		}