/*

Theme Name: My GLP1 Meals

Theme URI: https://myglp1meals.ie

Author: Sabatino

Author URI: https://myglp1meals.ie

Description: Custom Theme for My GLP1 Meals

Version: 1.0

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Text Domain: myglp1meals

*/



@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap');



:root {

    --bg-dark: #005a5a; /* Darker Teal */

    --bg-card: rgba(0, 70, 70, 0.75); /* Adjusted Glassmorphic card bg */

    --text-main: #f0f8ff; /* Soft white */

    --text-accent: #ffb300; /* Teal for contrast */

    --font-primary: 'Outfit', sans-serif;

    --transition: all 0.3s ease;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: var(--font-primary);

    background-color: var(--bg-dark);

    color: var(--text-main);

    line-height: 1.6;

    overflow-x: hidden;

}



/* Typography */

h1, h2, h3 {

    color: var(--text-accent);

    font-weight: 700;

    margin-bottom: 1rem;

}



h1 {

    font-size: 3rem;

    line-height: 1.2;

}



h2 {

    font-size: 2.2rem;

}



p {

    margin-bottom: 1.5rem;

    font-size: 1.1rem;

    font-weight: 300;

}



a {

    color: var(--text-accent);

    text-decoration: none;

    transition: var(--transition);

}



a:hover {

    color: #ffc84d;

}



/* Navigation */

nav {

    display: flex;

    flex-wrap: wrap; /* Consente la disposizione su due righe su desktop per massima usabilità */

    justify-content: space-between;

    align-items: center;

    padding: 1.5rem 5%;

    background: linear-gradient(135deg, rgba(0, 60, 60, 0.97) 0%, rgba(0, 100, 100, 0.95) 100%);

    backdrop-filter: blur(12px);

    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 1000;

    border-bottom: 1px solid rgba(0, 179, 179, 0.2);

}



.logo {

    order: 1; /* Posizionato al centro sulla prima riga */

    flex: 1 0 100%;

    display: flex;

    justify-content: center;

    position: relative;

    z-index: 1; /* Posizionato sotto il menu per evitare di sovrapporsi ai click */

}



.logo img {

    height: 360px; /* Logo imponente, come richiesto */

    width: auto;

    object-fit: contain;

    margin: -90px 0 -140px 0; /* Avvicinato al menu con margine negativo estremo */

    /* CSS filter per cambiare il logo in color ambra e rimuovere lo sfondo bianco */

    filter: invert(1) sepia(1) saturate(5) hue-rotate(5deg) saturate(3) brightness(1.1);

    mix-blend-mode: screen;

    transition: var(--transition);

}



.social-links {

    display: none; /* Rimossi dall'header per posizionarli nel footer */

}



.nav-links {

    order: 3; /* Spostato alla seconda riga per massima usabilità */

    flex: 1 0 100%; /* Prende il 100% della larghezza forzando l'andata a capo */

    list-style: none;

    display: flex;

    justify-content: center;

    gap: 2.2rem; /* Ampia spaziatura tra i link, altamente cliccabile! */

    margin-top: 0.8rem; /* Distanza tra il logo e il menu ridotta per un look compatto e rifinito */

    padding-top: 0.8rem; /* Distanza interna ridotta per avvicinare i link alla linea ambra */

    border-top: 1px solid rgba(255, 179, 0, 0.15); /* Sottile linea ambra separatrice di classe */

    position: relative;

    z-index: 10; /* Posizionato sopra il logo per essere sempre cliccabile al 100% */

    transition: var(--transition);

}



.nav-links li a {

    color: var(--text-main);

    font-weight: 600;

    font-size: 0.85rem; /* Scritte più piccole, eleganti, raffinate ed estremamente premium */

    text-transform: uppercase;

    letter-spacing: 1.5px; /* Spaziatura tra le lettere aumentata per un tocco di lusso */

    white-space: nowrap;

    transition: var(--transition);

}



.nav-links li a:hover {

    color: var(--text-accent);

}



.nav-links li a.active {

    color: var(--text-accent);

}



.mobile-menu-btn {

    display: none;

    font-size: 2rem; /* Più grande e facile da cliccare */

    color: var(--text-accent);

    cursor: pointer;

    transition: var(--transition);

    padding: 0.3rem 0.5rem;

}



/* Hero Section */

.hero {

    min-height: 70vh; /* Premium, consistent height for all subpage heroes! */

    display: flex;

    align-items: flex-start; /* FONDAMENTALE: impedisce al box di debordare verso l'alto sotto il menu negli schermi più piccoli */

    padding: 280px 5% 60px 2%; /* Top padding massiccio (280px) per uscire da sotto il menu fisso. Left padding (2%) per staccarlo appena dal bordo sinistro. */

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}



/* Page-Specific Hero Backgrounds */

.hero-home {

    min-height: 80vh; /* Grand entry height for the homepage */

    background-image: url('images/meal_beef_chili.png');

}



.hero-high-fibre, .hero-high-fiber {

    background-image: url('images/meal_lentils_dhal.png');

}



.hero-high-protein {

    background-image: url('images/meal_generated_singapore.png');

}



.hero-high-protein-fibre, .hero-high-protein-fiber {

    background-image: url('images/meal_spiced_chicken.png');

}



.hero-keto {

    background-image: url('images/meal_salmon.png');

}



.hero-soups {

    background-image: url('images/soup_thai_chili.png');

}



.hero-science {

    background-image: url('images/meal_pasta_meatballs.png');

}



.hero-faq {

    background-image: url('images/soup_orange.png');

}



.hero-contact {

    background-image: url('images/meal_chicken_curry.png');

}



.hero-content {

    max-width: 600px;

    background: rgba(0, 70, 70, 0.85); /* Sfondo scuro semitrasparente per il box */

    padding: 2.5rem;

    border-radius: 15px;

    backdrop-filter: blur(10px); /* Effetto vetro */

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);

    border: 1px solid rgba(255, 179, 0, 0.15); /* Bordo ambra sottile */

}



.hero-content p {

    font-size: 1.2rem;

}



.btn {

    display: inline-block;

    padding: 0.8rem 2rem;

    background-color: var(--text-accent);

    color: var(--bg-dark);

    font-weight: 700;

    border-radius: 30px;

    margin-top: 1rem;

    text-transform: uppercase;

}



.btn:hover {

    background-color: #ffc84d;

    color: var(--bg-dark);

    transform: translateY(-3px);

    box-shadow: 0 10px 20px rgba(0, 179, 179, 0.2);

}



/* Container */

.container {

    padding: 2rem 5%;

    max-width: 1200px;

    margin: 0 auto;

}



/* Categories Grid */

.categories-grid {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 2rem;

    margin-top: 3rem;

}



.category-card {

    width: calc(33.333% - 1.34rem); /* 3 cards per row considering 2rem gap */

    min-width: 280px;

    background: var(--bg-card);

    border-radius: 15px;

    text-align: center;

    border: 1px solid rgba(255, 179, 0, 0.1);

    backdrop-filter: blur(5px);

    transition: var(--transition);

    cursor: pointer;

    display: flex;

    flex-direction: column;

    overflow: hidden;

}



.category-card:hover {

    transform: translateY(-10px);

    border-color: var(--text-accent);

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);

}



.category-logo-card {

    width: calc(33.333% - 1.34rem);

    min-width: 280px;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 0;

}



.category-logo-card img {

    width: 100%;

    max-width: 600px; /* Molto più grande */

    max-height: 400px; /* Molto più grande */

    object-fit: contain;

    transform: scale(2.2); /* Effetto zoom ulteriormente aumentato */

    /* CSS filter per cambiare il logo in color ambra e rimuovere lo sfondo bianco (se presente) */

    filter: invert(1) sepia(1) saturate(5) hue-rotate(5deg) saturate(3) brightness(1.1);

    mix-blend-mode: screen;

}



.category-img {

    width: 100%;

    height: 250px; /* Grandezza foto aumentata */

    object-fit: cover;

    border-bottom: 2px solid var(--text-accent);

}



.category-card h3 {

    margin: 1.5rem 1rem 0.5rem 1rem;

    font-size: 1.5rem;

}



.category-card p {

    margin: 0 1rem 1.5rem 1rem;

    font-size: 1rem;

}



/* Products Grid */

.products-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 2rem;

    margin-top: 2rem;

}



.product-card {

    background: var(--bg-card);

    border-radius: 15px;

    overflow: hidden;

    border: 1px solid rgba(255, 179, 0, 0.1);

    transition: var(--transition);

    display: flex;

    flex-direction: column;

    cursor: pointer;

}



.product-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);

}



.product-img {

    width: 100%;

    height: 280px; /* Grandezza foto dei prodotti aumentata notevolmente */

    object-fit: cover;

    border-bottom: 3px solid var(--text-accent);

}



.product-info {

    padding: 1.5rem;

    display: flex;

    flex-direction: column;

    flex-grow: 1;

}



.product-info .btn {

    margin-top: auto;

    align-self: flex-start;

}



.product-info h3 {

    font-size: 1.3rem;

    margin-bottom: 0.5rem;

}



/* Two Column Layout */

.two-column {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4rem;

    align-items: center;

}



/* Form Styles */

.contact-form {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.form-group input,

.form-group textarea {

    width: 100%;

    padding: 1rem;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(0, 179, 179, 0.2);

    border-radius: 8px;

    color: var(--text-main);

    font-family: var(--font-primary);

    font-size: 1rem;

}



.form-group input:focus,

.form-group textarea:focus {

    outline: none;

    border-color: var(--text-accent);

    background: rgba(255, 255, 255, 0.1);

}



/* Footer */

footer {

    background: linear-gradient(135deg, rgba(0, 40, 40, 0.98) 0%, rgba(0, 70, 70, 0.98) 100%);

    border-top: 2px solid rgba(255, 179, 0, 0.2);

    margin-top: 5rem;

    padding: 4rem 5% 0;

}



.footer-inner {

    display: grid;

    grid-template-columns: 2fr 1fr 1fr 1fr;

    gap: 3rem;

    padding-bottom: 3rem;

    border-bottom: 1px solid rgba(255, 179, 0, 0.1);

    align-items: start;

}



.footer-logo {

    width: 100%;

    max-width: 280px;

    height: auto;

    object-fit: contain;

    margin-bottom: 1.5rem;

    display: block;

    filter: invert(1) sepia(1) saturate(5) hue-rotate(5deg) saturate(3) brightness(1.1);

}



.footer-tagline {

    font-size: 0.9rem;

    font-weight: 300;

    line-height: 1.7;

    color: rgba(240, 248, 255, 0.75);

    margin-bottom: 1rem;

}



.footer-group {

    font-size: 0.85rem;

    color: rgba(240, 248, 255, 0.55);

    margin-bottom: 0;

}



.footer-group a {

    color: var(--text-accent);

    font-weight: 600;

}



.footer-heading {

    font-size: 0.75rem;

    text-transform: uppercase;

    letter-spacing: 2px;

    color: var(--text-accent);

    font-weight: 700;

    margin-bottom: 1.2rem;

}



.footer-links {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 0.7rem;

}



.footer-links li a {

    color: rgba(240, 248, 255, 0.7);

    font-size: 0.9rem;

    font-weight: 300;

    transition: var(--transition);

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.footer-links li a:hover {

    color: var(--text-accent);

    padding-left: 4px;

}



.footer-bottom {

    text-align: center;

    padding: 1.5rem 0;

}



.footer-bottom p {

    font-size: 0.8rem;

    color: rgba(240, 248, 255, 0.4);

    margin: 0;

    font-weight: 300;

}



.footer-bottom a {

    color: var(--text-accent);

    opacity: 0.8;

}



/* Nav Scroll Behaviour — logo hides, nav compacts */

nav {

    transition: height 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease;

}



.logo {

    transition: opacity 0.3s ease, max-height 0.35s ease, margin 0.35s ease, visibility 0.3s ease;

    overflow: hidden;

    max-height: 280px;

}



nav.nav-scrolled {

    padding-top: 0.5rem;

    padding-bottom: 0.5rem;

    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);

}



nav.nav-scrolled .logo {

    opacity: 0;

    max-height: 0;

    margin: 0;

    visibility: hidden;

    pointer-events: none;

}



nav.nav-scrolled .nav-links {

    margin-top: 0;

    padding-top: 0;

    border-top: none;

}





/* Responsive */

@media (max-width: 1250px) {

    .logo img {

        height: 300px; /* Ridimensionamento proporzionato su laptop */

        margin: -105px 0;

    }

    .nav-links {

        gap: 1.4rem; /* Spaziatura adattata su schermi laptop */

        margin-top: 0.6rem;

        padding-top: 0.6rem;

    }

    .nav-links li a {

        font-size: 0.8rem; /* Testo leggermente più compatto su laptop */

        letter-spacing: 1px;

    }

    nav {

        padding: 1.2rem 3%;

    }

}



@media (max-width: 1024px) {

    nav {

        position: relative;

        display: flex;

        justify-content: center;

        align-items: center;

        padding: 0.5rem 5%;

        height: 125px; /* Altezza stabile e maestosa su mobile per logo XL */

    }



    .logo {

        order: 1;

        flex: 0 0 auto;

        display: flex;

        justify-content: center;

    }



    .logo img {

        height: 130px; /* Logo extra large e di eccezionale impatto su mobile */

        margin: 0; /* Perfettamente centrato visivamente */

    }



    .social-links {

        display: none;

    }



    .mobile-menu-btn {

        position: absolute;

        right: 5%;

        top: 50%;

        transform: translateY(-50%);

        display: block;

        font-size: 2rem; /* Pulsante hamburger grande ed estremamente ergonomico */

    }



    .nav-links {

        display: none;

        flex-direction: column;

        position: absolute;

        top: 125px; /* Inizia esattamente sotto la barra di navigazione mobile */

        left: 0;

        width: 100%;

        background: linear-gradient(180deg, rgba(0, 55, 55, 0.99) 0%, rgba(0, 80, 80, 0.99) 100%);

        backdrop-filter: blur(20px);

        padding: 2rem 5%;

        border-bottom: 2px solid var(--text-accent);

        border-top: none;

        margin-top: 0;

        gap: 0;

        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);

        z-index: 999;

    }



    .nav-links.active {

        display: flex;

    }



    .nav-links li {

        width: 100%;

        text-align: center;

    }



    .nav-links li a {

        display: block;

        font-size: 1.25rem; /* Voce di menu grande ed ergonomica da toccare con le dita */

        padding: 1rem 0;

        border-bottom: 1px solid rgba(255, 179, 0, 0.1);

        width: 100%;

        letter-spacing: 1px;

    }



    .nav-links li:last-child a {

        border-bottom: none;

    }



    .two-column {

        grid-template-columns: 1fr;

    }



    h1 {

        font-size: 2.2rem;

    }

}

@media (max-width: 900px) { .products-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .products-grid { grid-template-columns: 1fr; } }





/* Imported Footer Styles */

.rory_container_left

{

	display:table-cell;

	float:left;

	text-align:left;

	width:59%;

	vertical-align: top;

}

.rory_container_left

		{

			display:table-cell;

			width:100%;

		}

.rory_container_left

		{

			display:table-cell;

			width:100%;

		}

.rory_container_right

{

	display:table-cell;

	float:right;

	width:39%;

	vertical-align: top;

	text-align: center;

}

.rory_container_right

		{

			display:table-cell;

			width:100%;

		}

.rory_container_right

		{

			display:table-cell;

			width:100%;

		}

.socialmedia_container {

    display: table;

    width: auto;

    margin: auto;

    text-align: center;

    font-size: 0.9em;

    font-family: Helvetica, Tahoma, Calibri, Arial;

}

.socialmedia_cell {

    display: table-cell;

    width: 50px;

    float: left;

    margin: 5px;

}

.backlinks

{

	width:100%;

	margin:auto;

	height:30px;

	font-size:0.75em;

	color: #000000;

	text-align:center;

}



/* Placeholder styling for forms */

::placeholder {

    color: var(--text-accent);

    opacity: 0.7;

}

:-ms-input-placeholder {

    color: var(--text-accent);

}

::-ms-input-placeholder {

    color: var(--text-accent);

}



/* Cookie Consent Banner - Beautiful Glassmorphic Design */

.cookie-banner {

    position: fixed;

    bottom: 2rem;

    left: 5%;

    right: 5%;

    max-width: 1200px;

    margin: 0 auto;

    background: rgba(0, 50, 50, 0.9);

    backdrop-filter: blur(15px);

    -webkit-backdrop-filter: blur(15px);

    border: 1px solid rgba(255, 179, 0, 0.25);

    border-radius: 12px;

    padding: 1.5rem 2rem;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);

    z-index: 9999;

    animation: slideUp 0.5s ease-out;

}



.cookie-banner-content {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 2rem;

    flex-wrap: wrap;

}



.cookie-banner-content p {

    margin: 0;

    font-size: 0.95rem;

    color: var(--text-main);

    line-height: 1.5;

    flex: 1;

    font-weight: 300;

}



.cookie-banner-buttons {

    display: flex;

    gap: 1rem;

    align-items: center;

}



.btn-sm {

    padding: 0.5rem 1.5rem !important;

    font-size: 0.8rem !important;

    margin-top: 0 !important;

}



.btn-outline {

    background-color: transparent !important;

    color: var(--text-accent) !important;

    border: 2px solid var(--text-accent) !important;

}



.btn-outline:hover {

    background-color: var(--text-accent) !important;

    color: var(--bg-dark) !important;

}



@keyframes slideUp {

    from {

        transform: translateY(100px);

        opacity: 0;

    }

    to {

        transform: translateY(0);

        opacity: 1;

    }

}



@media (max-width: 768px) {

    .cookie-banner {

        bottom: 1rem;

        left: 1rem;

        right: 1rem;

        padding: 1.2rem;

    }

    .cookie-banner-content {

        flex-direction: column;

        align-items: stretch;

        gap: 1rem;

    }

    .cookie-banner-buttons {

        justify-content: flex-end;

    }

}


/* Smaller button in product cards */
.product-card .btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}