html {
  font-size: 14px;
}

a {
    text-decoration: none;
}

.highlight {
    background-color: #dbeafe; /* light blue, adjust as needed */
    color: #1d4ed8; /* dark blue text */
    padding: 0 2px;
    border-radius: 3px;
}

.recipe-snippet {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Change this to 2 or 3 as desired */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 4.5em; /* Adjust based on line height */
}

.card-title {
    font-size: 20px;
    font-weight: 600;
}

#recipeModal .carousel-item img {
    max-width: 100%;
    max-height: 250px;
    object-fit: contain;
}

.titleDateContainer {
    display: flex;
    justify-content: space-between; /* Distributes space evenly between items */
    align-items: center; /* Vertically aligns items in the middle */
}

.starsDifficultyLevelContainer {
    display: flex;
    justify-content: space-between; /* Distributes space evenly between items */
    align-items: center; /* Vertically aligns items in the middle */
}

.diffIcons{
    padding: 20px;
    color: Green;
    margin-left: 0px;
    font-size:20px;
}

.diffIcons .easy {
    color: green;
}

.diffIcons .medium {
    color: orange;
}

.diffIcons .difficult {     
    color: red;
}

.viewRecipeBtn {
    
}

@media (min-width: 768px) {
    html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

#recipeModal img {
    max-width: 100%;
    height: auto;
}

.titleImage {
    width: 70px;
}

.titleContainer {
    display: flex;
    justify-content: space-between; /* Distributes space evenly between items */
    align-items: center; /* Vertically aligns items in the middle */
}

.recipeStatsContainer {
    /*    display: flex;
    justify-content: space-between;
    align-items: center;*/
}

/* Copyright */

.wave-text {
    font-size: 1rem;
    font-family: verdana;
    margin-right:20px;
}

.wave-text span {
    display: inline-block;
    font-size: .8rem;
    animation: wave 2s ease-in-out infinite;
}

@keyframes wave {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

/* Privacy */

.privacyImg {
    display: flex;
    width: 100px;
}

.privSubTitle .privLanguageFacts {
    margin-bottom: 20px;
}

 /* Admin Secrion */

.addRecipeBtn {
    color: white;
    Background: cornflowerblue;
}

.addRecipeBtn .plusIcon {
    color: white; /* or whatever color you want */
    margin-right: 5px; /* optional spacing */
}

/* Add Recipe */

.diff-label {
    flex: 1;
    color: gray;
    font-weight: 400;
    transition: color 0.3s ease, font-weight 0.3s ease;
}

.diff-label.active {
    color: #198754; /* Bootstrap green */
    font-weight: 700;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

.star-container i {
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
    color: #ccc;
}

    .star-container i:hover {
        transform: scale(1.3);
    }

    .star-container i.filled {
        color: gold;
        text-shadow: 0 0 3px rgba(255, 215, 0, 0.5);
    }


/* Go to top */
#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: red; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
}

    #myBtn:hover {
        background-color: #555; /* Add a dark-grey background on hover */
    }


/* Grid layout: left | divider | right */
.meta-grid {
    display: grid;
    grid-template-columns: auto 1px 1fr; /* ← key change */
    align-items: center;
    gap: 1rem;
}

/* full-height divider */
.meta-divider {
    background: rgba(0,0,0,.15);
    min-height: 100%;
}

/* left facts stack neatly */
.meta-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    row-gap: .25rem;
    column-gap: .5rem;
    font-size: .95rem;
}

    .meta-facts dt {
        margin: 0;
        font-weight: 600;
    }

    .meta-facts dd {
        margin: 0;
    }

/* left column hugs content and stays top-aligned */
.meta-left {
    align-self: start;
}

.meta-list li {
    margin-bottom: .25rem;
}

/* full-height vertical divider */
.meta-divider {
    background: rgba(0,0,0,.18);
    min-height: 100%;
}

.meta-right {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    container-type: inline-size; /* enables cqi units */
    min-width: 0; /* lets it shrink without overflowing */
}

.category-title {
    font-family: 'Magical Mystery Tour';
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.05;
    /* scales with the width of .meta-right */
    font-size: clamp(1rem, 10cqi, 2.6rem);
    /* NEVER overflow the box */
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere; /* breaks long single words like “CONDIMENTS” */
    hyphens: auto; /* prettier breaks on supported browsers */
    text-wrap: balance; /* nicer multi-line headings (safe to leave on) */
}

/* stars a bit tighter */
#metaStars .bi {
    margin-right: 2px;
}

/* responsive: stack on small screens */
/* stack nicely on small screens */
@media (max-width: 768px) {
    .meta-grid {
        grid-template-columns: 1fr;
    }

    .meta-divider {
        display: none;
    }

    .meta-right {
        justify-content: flex-start;
        margin-top: .5rem;
    }
}





@media print {
    /* Hide all body content except the modal */
    body * {
        display: none !important;
        visibility: hidden !important;
    }

    #recipeModal,
    #recipeModal * {
        display: block !important;
        visibility: visible !important;
        position: static !important;
        overflow: visible !important;
        height: auto !important;
    }

    /* Clean layout for printing */
    .modal-dialog,
    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        background: white !important;
    }

    .modal-body {
        padding: 1rem !important;
    }

    /* Hide modal UI elements not needed for print */
    .modal-header .btn-close,
    .modal-footer,
    .carousel-control-prev,
    .carousel-control-next,
    .modal-backdrop {
        display: none !important;
    }

    /* Prevent page breaks mid-content */
    .modal-body > *,
    .carousel-item {
        page-break-inside: avoid;
    }

    html, body {
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }
}