:root {
        --banana-cream: #F2E856ff;
        --bright-gold: #FFE100ff;
        --oxidized-iron: #A22113ff;
        --silver: #B4B2B0ff;
        --white: #FFFFFFff;
        --half-blue: rgba(29, 33, 57, 0.561);
        --accent-blue: rgba(30, 45, 131, 0.727);
        --roman-blue:#0c6ad5;
    }

    @font-face {
    font-family: roman; 
    src: url(./RomanesqueSerif.ttf);
    }

    /*
    @keyframes shine {
        0%   { background-position: 0% 0%; }
        100% { background-position: 100% 100%; }
    }
        */

    html, body {
        margin: 0;
        padding: 0;
        overflow-x: hidden;

        background-size: 200% 200%;


        animation: shine 8s linear infinite;

        font-family: roman;


    }


            .header.fixed {
                position: fixed;
                width: 100%;
                z-index: 1000;
                padding-bottom: 50px;
            }

                .header-spacer {
                height: 100px;
                 }




    body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;

            background: linear-gradient(
            77deg,
            #bfbfbf 0%,
            #e6e6e6 25%,
            #ffffff 40%,
            #f8f8f8 50%,
            #ffffff 60%,
            #e6e6e6 75%,
            #bfbfbf 100%
        );
    }












    .container {
        width: 100%;
    }


    .header {
        position: sticky;
        display: flex;
        top: 0;      
        flex-direction: column;   /* stack items */
        align-items: center;
        gap: 12px;
        padding: 10px;
        z-index: 1000;
    }



    /*NEW HEADER*/
.header {
    position: sticky;
    top: 0;
    z-index: 1000;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease,
        background 0.3s ease,
        backdrop-filter 0.3s ease;
}

/* applied only after scrolling */
.header.scrolled {
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(6px);
}

/* mobile hide while scrolling */
.header.hide-mobile {
    transform: translateY(-120%);
    opacity: 0;
}



    .checkbox-group {
        display: flex;
        flex-wrap: wrap;         
        gap: 15px;
        justify-content: center;
    }


    .checkbox-group input[type="checkbox"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }


    .checkbox-group label {
        font-size: 16px;
        cursor: pointer;
    }

    .checkbox-group label:hover {
        color: #007BFF;
    }




    #searchIcon {
        font-size: 1.4rem;
        cursor: pointer;
        border-width:0px;
        border:none;
        background: none;
        background-color: #e6e6e600;
        height: 3rem;
        font-family: roman;
        outline: none
    }


    #searchIcon::placeholder {
        color: var(--);
        font-family: roman;
        font-style: italic;
        text-align: center;
    /* text-decoration: underline; */


    }

    #searchIcon:focus {
        border-width:0px;
        border:none;
        text-align: center;
        color: var(--silver);

    }




        #phrases-container {
            position: absolute;
            left: 50%;
            transform: translate(-50%);

        }

        


            .original {
                position: relative;
                font-weight: bold;
                color: #0c6ad5;
                font-size: 2rem;
                font-family: 'roman';
                margin-bottom: 10px;
                margin-top: 40px;
            }

            .original:hover {
                cursor: pointer;
                    text-shadow:
                        0 0 50px var(--silver),   
                        0 0 70px #fff;
            }

            .translation {
                font-style: italic;
                color: rgba(29, 33, 57, 0.561);
                font-size: 1.4rem;
                margin-bottom: 10px;
                font-family: 'Times New Roman', Times, serif;
            }

            .hrvatski {
                font-style: italic;
                color: rgba(29, 33, 57, 0.561);
                font-size:1.4rem;
                margin-bottom: 10px;
                font-family: 'Times New Roman', Times, serif;
            }


            /*meaning*/
        .meaning { 
                color: rgba(30, 45, 131, 0.727);
                font-size: 1.2rem;           
                font-family: 'Times New Roman', Times, serif;
                margin-bottom: 30px;

            }


            .phrase { 
                color: rgba(30, 45, 131, 0.727);
                font-size: 1.2rem;           
                font-family: 'Times New Roman', Times, serif;
                margin-bottom: 40px;
            }

            .znacenje {
                color: rgba(30, 45, 131, 0.727);
                font-size: 1.2rem;
                margin-bottom: 30px;       
                font-family: 'Times New Roman', Times, serif;
            }



            .meaning, .znacenje, .translation.en, .hrvatski.hr {
                overflow: hidden;
                max-height: 500px;       
                opacity: 1;    
                transform-origin: top;
                transition: 
                    opacity 0.5s ease,
                    transform 100ms ease;
                    
            }

            .meaning.collapsed, .znacenje.collapsed, .translation.en.collapsed, .hrvatski.hr.collapsed { 
                max-height: 0;
                display: none;
                transform: scaleY(0.4);
            }



            .bookmark {
    position: absolute; /* absolute inside .original */
    top: 50%;           /* vertically center */
    right: 0;           /* align to the right edge */
    transform: translateY(-50%); /* true vertical centering */
    width: 30px;
    height: 30px;
    cursor: pointer;
    opacity: 0.7;
                
            }





            /* arrow styling */
            .arrow-icon {
                width: 100px;
                cursor: pointer;
                opacity: 0.5;
                transition: transform 0.2s ease, opacity 0.2s ease;
                float: right;
                margin-right: 10%
                ;
            }

            .arrow-icon:hover {
                transform: translateX(-3px);
                opacity: 1;
            }




    .bookmarks {
        width: 30px;
    }



    
/*====================================
/////////////////////////////////
BOOK MARKS
///////////////////////////////
*/

    .title-bookmark {
    text-decoration: none;
    }


    .bookmark {
            width: 70px;
        height: 70px;
    }




            .top-nav-icons {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .home-bookmark-icon {
            width: 30px;
            height: 30px;
            opacity: 0.8;
            cursor: pointer;
            transition: transform 0.2s ease, opacity 0.2s ease;
        }

        .home-bookmark-icon:hover {
            transform: scale(1.15);
            opacity: 1;
        }



    /*==================================*/
    /*==================================*/
    /*=========PHRASE PAGE===============*/
    /*==================================*/
    /*==================================*/
    /*==================================*/

        #phrase-container {
            padding: 40px;
            overflow-x: hidden ;
            width: 100vw;
            height: 100vh;
            margin-left: 30px;
            margin-right:30px;
        }

        
    



        .phrasepage.h3, .phrasepage.p {
            margin-left: 20px;
            margin-right: 20px;
            margin-top: 0px;
        }




        .phraseh3 {
            margin-top: 70px;
            color: var(--accent-blue);

            font-size: 1.5rem;
        }

        .phrasep {
            color: var(--half-blue);
            font-size: 1.5rem;
        }

        .phrasepage.h1{
            font-size: 4rem;
            margin-left: 50px;
            margin-right: 20px;
            margin-bottom: 0px;

            font-style: italic;
            color: black ;

            margin-bottom: 20px;
        }

        .phrase-meta {
            display: flex;
            justify-content: flex-end;
            gap: 0.5rem;
            margin-right: 100px;
        }

        .phrasepage.author {
            font-size: 2.5rem;
            color: var(--accent-blue);
            margin: 0;
        }

        .phrasepage.book {
            font-size: 2rem;
            color: var(--accent-blue);
            opacity: 0.8;
            font-style: italic;

    }

        .phrasepage.year {
            display: flex;
            color: var(--silver);
            justify-content: flex-end;
            margin-right: 100px;
            font-size: 2rem;
            opacity: 1;
            margin-top: 0.2rem;
        }

        .phrase-block  {

            margin-top: 50px;

        }


        .silver_bookmark {
            display: flex;
            justify-content: flex-end;         
            max-width: 50px;
            padding: 0px;
            margin-top: 15px;
            margin-right: 20px;
            cursor: pointer;
            opacity: 0.7;
        }

        




            /*==================================*/
    /*==================================*/
    /*=========ANALYSIS PAGE===============*/
    /*==================================*/
    /*==================================*/
    /*==================================*/


            .analysis-table {
            margin-top: 1.5rem;
            border-top: 1px solid rgba(255,255,255,0.2);
        }

        .analysis-row {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            padding: 0.4rem 0;
            font-family: monospace;
        }

        .analysis-form {
            font-weight: bold;
        }

        .analysis-pos {
            opacity: 0.7;
            text-align: right;
        }



         .latin-analysis {
            font-size: 1.2rem;
            line-height: 2;
        }

        .latin-word {
            position: relative;
            cursor: help;
            padding: 0 2px;
        }







    /*==================================*/
    /*==================================*/
    /*=========Animations===============*/
    /*==================================*/
    /*==================================*/
    /*==================================*/




        .chrome-text {
        background: linear-gradient(
            120deg,
            #d9d9d9,
            #7fdcff,
            #9b7cff,
            #ff8ad8,
            #7fffd4,
            #ffffff
        );
        background-size: 300% 300%;

        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

        background-clip: text;
        color: transparent;

        animation: chromeShift 6s ease infinite;
    }

    @keyframes chromeShift {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }






    .chrome-sweep {
        position: relative;
        display: inline-block;


        background: linear-gradient(
            120deg,
            #dcdcdc 0%,
            #9bdcff 20%,
            #c9a0ff 40%,
            #ff9edb 60%,
            #7ffff0 80%,
            #ffffff 100%
        );
        background-size: 300% 300%;

        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;

        animation: chromeBase 8s ease infinite;
    }



    .chrome-sweep::after {
        content: "";
        position: absolute;
        inset: 0;

        background: linear-gradient(
            120deg,
            transparent 30%,
            rgba(255,255,255,0.9) 45%,
            rgba(255,255,255,0.2) 50%,
            transparent 60%
        );

        background-size: 200% 100%;
        mix-blend-mode: screen;
        pointer-events: none;

        animation: lightSweep 3.5s ease-in-out infinite;
    }

    @keyframes chromeBase {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    @keyframes lightSweep {
        0%   { background-position: -200% 0; opacity: 0; }
        20%  { opacity: 1; }
        50%  { background-position: 200% 0; opacity: 1; }
        100% { opacity: 0; }
    }






        @keyframes pop {
            0% {
                transform: scale(1);
            }
            40% {
                transform: scale(1.25);
            }
            100% {
                transform: scale(1);
            }
        }

        .bookmark-pop {
            animation: pop 0.25s ease-out;
        }







        

    /*==============================================*/
    /*=================RESPONSIVENESS=============================*/
    /*==============================================*/
    /*==============================================*/
    /*==============================================*/


    @media (min-width: 768px) {
        .header {
            flex-direction: row;
            justify-content: space-between;
        }
    }


    @media (max-width: 1000px) {

                   .original {
                margin-top: 60px;
                margin-bottom: -30px;
                padding:0px;
                    }

                    .znacenje, .hrvatski {
                        margin-top: 0px;
                    }


      /*  MAKE BOOK MARK LEFT ON SMALL SCREEN */
                    .bookmark {
                position: relative;
                top: -50px;
                width: 20px;
                cursor: pointer;
                opacity: 0.7;
                
            }


        #phrases-container {
            max-width: 100%;
            width: 100%;
            margin: 0 auto;

        }

        .original,
        .translation,
        .hrvatski,
        .phrase,
        .znacenje {
            word-wrap: break-word;
            overflow-wrap: break-word;
            white-space: normal;
            text-align: center;
            max-width: 100%;
        }




        .meaning {
            margin-bottom: 50px;
        }


}





    
/* ==========================================================================
   ISOLATED PHRASE DEDICATED PAGE
   ========================================================================== */

/* Completely resets any layout leaks from index.html container settings */
.phrasepage-body-wrapper {
    position: relative !important;
    width: 100vw !important;
    left: 0 !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* Base frame setup — sets 20% whitespace margins on each side using 60vw width */
.phrasepage-layout {
    max-width: 60vw !important; 
    margin: 0 auto !important;
    padding: 30px 20px !important;
    box-sizing: border-box !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative !important;
    left: 0 !important;
    transform: none !important;
}

/* Nav header layout adjustment */
.top-nav-icons {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 20px;
    margin-bottom: 30px;
}

/* Amplified Navigation controls */
.top-nav-icons .arrow-icon {
    width: 65px !important; /* Larger back arrow button scale */
    height: auto !important;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.top-nav-icons .arrow-icon:hover {
    opacity: 1;
    transform: translateX(-5px);
}

.top-nav-icons .silver_bookmark {
    width: 45px !important; /* Proportional sizing balance match */
    height: auto !important;
    cursor: pointer;
    opacity: 0.9;
}

/* Prominent Core Phrase Typography */
.phrasepage.h1 {
    font-size: 5rem !important; 
    line-height: 1.1 !important;
    text-align: center !important;
    margin: 20px auto 15px auto !important;
    width: 100% !important;
}

/* Forces author/book metadata to stick directly to the right margin */
.phrase-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important; /* Aligns metadata content to the right side */
    align-items: baseline !important;
    gap: 12px !important;
    margin-bottom: 5px !important;
    width: 100% !important;
}

.phrasepage.author {
    font-size: 2.2rem !important;
    font-weight: bold !important;
}

.phrasepage.book {
    font-size: 1.8rem !important;
}

.phrasepage.year {
    font-size: 1.6rem !important;
    text-align: right !important; /* Aligns year text to the right side */
    margin-top: 5px !important;
    margin-bottom: 40px !important;
    width: 100% !important;
}

/* Side-by-side card sections utilizing the rest of the available viewport height */
.phrase-block {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
    margin-top: 20px !important;
    flex-grow: 1 !important; /* Spreads the cards vertically */
    width: 100% !important;
}

.lang-section {
    background: rgba(255, 255, 255, 0.45) !important;
    border-radius: 14px !important;
    padding: 35px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    backdrop-filter: blur(4px) !important;
    display: flex !important;
    flex-direction: column !important;
}

.phraseh3 {
    font-size: 1.5rem !important;
    border-bottom: 3px solid var(--roman-blue) !important;
    padding-bottom: 8px !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}

.phrasep.translation-main {
    font-size: 1.7rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    margin-bottom: 15px !important;
}

.phrasep.translation-sub {
    font-size: 1.4rem !important;
    line-height: 1.5 !important;
}

/* ==========================================================================
   RESPONSIVE DESIGN BREAKPOINTS
   ========================================================================== */

@media (max-width: 1150px) {
    .phrasepage-layout {
        max-width: 85vw !important; /* Safely scales layout on smaller desktop screens */
    }


    .meaning {margin-bottom: 100px;}
}

@media (max-width: 768px) {
    .phrasepage-layout {
        max-width: 100vw !important;
        padding: 15px !important;
    }
    
    .top-nav-icons .arrow-icon {
        width: 45px !important;
    }

    .phrasepage.h1 {
        font-size: 3rem !important;
    }

    .phrase-meta, .phrasepage.year {
        justify-content: center !important;
        text-align: center !important; /* Fall back to center on stacked mobile devices */
    }

    .phrase-block {
        grid-template-columns: 1fr !important; /* Vertically stacks cards on mobile devices */
        gap: 25px !important;
    }




            .phrasepage.author {
            font-size: 2rem !important;
            font-weight: bold !important;
        }

        .phrasepage.book {
            font-size: 1.6rem !important;
        }

        .phrasepage.year {
            font-size: 1.4rem !important;
            text-align: right !important; /* Aligns year text to the right side */
            margin-top: 5px !important;
            margin-bottom: 40px !important;
            width: 100% !important;
        }
   
}