/* General styles */
body {
    background-color: #785ef0;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Header Styling */
header {
    background-color: #785ef0;
    padding: 20px;
    text-align: center;
}

header h1 {
    color: #ffffff;
    font-size: 2em;
    margin: 0;
}

.logo {
    width: 100%;       /* Makes the logo responsive, filling the header width */
    max-width: 800px;  /* Limits the logo to a maximum width of 800px */
    height: auto;      /* Maintains aspect ratio */
}

h1 {
    margin: 0.5rem 0;
}

/* Burger Menu */
.burger-menu {
    display: none;
    cursor: pointer;
    width: 30px;
    margin: 10px auto;
}

.burger-menu span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #333;
    margin: 5px 0;
}

/* Navigation Menu */
nav {
    text-align: center;
}

nav ul.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

nav ul.menu li {
    display: inline;
}

nav ul.menu li a {
    text-decoration: none;
    color: #333;
    font-size: 1.2rem;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    background-color: #ffb000;
    transition: background-color 0.3s ease;
}

nav ul.menu li a:hover {
    background-color: #ddd;
}

/* Main Content */
main {
    flex: 1;
    padding: 2rem;
}

section {
    padding: 1rem;
    padding-bottom: 3rem;
    color: #000000 ;
    margin-bottom: 1rem;
    border-color: #dc267f;
    border-style: solid;
    border-width: 4px;
    background-color: #ffffff;
    border-radius: 8px;
}

section h2 {
    color: #ffffff;
    margin-top: 0;
}

section h1 {
    color: #fe6100;
    margin-top: 0;
}

/* Card Draw List */
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Exactly 3 columns */
    gap: 50px 20px;
}

.card-draw {
    background-color: #dc267f;
    color: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: center;

    /* Flexbox for vertical centering */
    display: flex;
    flex-direction: column;
    justify-content: center;  /* Center content vertically */
    align-items: center;      /* Optionally center content horizontally */
    height: 100%;             /* Ensure the card takes full height */
}

.card-draw h2 {
    margin-top: 0;
}

.card-draw img {
    max-width: 100%;
    height: auto;
    margin-bottom: 1rem;
}

.card-draw label {
    margin-bottom: 5px; /* Ensure space between textarea and the button */
}

.card-draw textarea {
    margin-bottom: 10px; /* Ensure space between textarea and the button */
}

.card-draw button {
    padding: 0.5rem 1rem;
    background-color: #785ef0;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    margin-top: 10px;
}

.card-draw button:hover {
    background-color: #555;
}

/* Footer */
footer {
    background-color: #785ef0;
    color: white;
    text-align: center;
    padding: 1rem;
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    main {
        flex: 1;
        padding: 0.5rem;
    }

    .logo {
        width: 20em;
        height: auto;
    }

    /* Show burger menu on mobile */
    .burger-menu {
        display: block;
    }

    /* Hide navigation menu initially on mobile */
    nav {
        display: none;
    }

    nav.show {
        display: block;
    }

    nav ul.menu {
        flex-direction: column;
        gap: 1rem;
    }

    /* Single column for mobile */
    .container {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 20px; /* Add gap between each card-draw */
    }

    .card-draw {
        height: auto; /* Ensure height adapts naturally on mobile */
    }

    .card-draw textarea {
        margin-bottom: 10px; /* Add space between the textarea and the button */
    }

    .card-draw label {
        margin-bottom: 5px; /* Add space between the textarea and the button */
    }

    .card-draw button {
        margin-top: 10px; /* Add space above the button if needed */
    }


}

/* Cards Shuffling Section Styles */
#cards_shuffling {
    border-radius: 5px;
    background-color: #dc267f;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc(95vw);             /* Full width of the container */
    margin: 0;
    /*padding: 1rem;           !* Uniform padding *!*/
    text-align: center;
    /*box-sizing: border-box;   !* Include padding and borders in element width/height *!*/
}

.card, .selected-card {
    position: absolute;
    width: 84px;
    height: 164px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    transition: transform 0.3s, top 0.3s, left 0.3s;
    cursor: pointer;
}

.selected-card {
    margin-right: 10px;
    display: inline-block;
    position: relative;
}

/* Shuffling Area */
.shuffling-area {
    position: relative;
    width: 900px;           /* Set a fixed width on desktop */
    height: 40vh;           /* Maintain the height at 40% of the viewport */
    margin-bottom: 20px;
    background-color: #dc267f;
    border: 30px solid #dc267f;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shuffling-title {
    color: #000000;
}

.shuffling-title h2 {
    color: #000000;
}

/* Buttons for shuffling and stopping the shuffle */
.shuffling_btn_div {
    display: flex;
    justify-content: center; /* Centre horizontalement les boutons */
    align-items: center; /* Centre verticalement les boutons */
    gap: 20px; /* Optionnel : espace entre les deux boutons */
    height: 60px; /* Ajuste selon la hauteur nécessaire */
}

.shuffling_btn_div button {
    background-color: #648fff;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1rem;
    margin-top: 10px;
    margin-bottom: 10px;
}

.shuffling_btn_div button:disabled {
    background-color: grey; /* Change the background color */
    color: white; /* Change the text color */
    border: 1px solid darkgrey; /* Optional: change the border color */
    cursor: not-allowed; /* Change the cursor to indicate the button is disabled */
    opacity: 0.7; /* Optional: add some transparency */
}

.shuffling_btn_div button:hover {
    background-color: #0056b3;
}

.shuffling_btn_div-area {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
}

button:hover {
    background-color: #555;
}

/* Selection Area */
.selection-area {
    margin-top: 20px;
}

.selection-area h2 {
    margin-bottom: 10px;
}

#selectedPile {
    background-color: #f4f4f4;
    padding: 1rem;
    border-radius: 8px;
    min-height: 150px;
    width: 80%;
    max-width: 600px;
    margin: 0 auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.interpretation_btn_div button {
    background-color: #648fff;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1rem;
    margin-top: 10px;
    margin-bottom: 10px;
}

.interpretation_btn_div button:hover {
    background-color: #555;
}

#interpretSpreadBtn {
    display:none;
}

/* Responsive adjustments for the cards_shuffling section */
@media (max-width: 768px) {
    #cards_shuffling {
        border-radius: 5px;
        background-color: #dc267f;
        display: flex;
        flex-direction: column;
        align-items: center;        /* Centers content horizontally */
        justify-content: center;     /* Centers content vertically */
        width: 100%;                 /* Full width of the container, not viewport */
        margin: 0 auto;              /* Center horizontally */
        padding: 0;
        text-align: center;
        box-sizing: border-box;      /* Include padding and borders in width */
    }

    /* Centering and styling for .shuffling-area */
    .shuffling-area {
        border: 0px solid #dddddd;
        margin: 0 auto;              /* Center horizontally */
        width: 90%;                  /* Set width as 90% of #cards_shuffling */
        height: 60vh;                /* Set height to 60% of viewport height */
        display: flex;
        align-items: center;         /* Center content vertically */
        justify-content: center;     /* Center content horizontally */
    }

    .card {
        width: 44px;         /* Reduce card width on mobile */
        height: 82px;       /* Reduce card height on mobile */
    }

    #selectedPile {
        width: 84vw;
    }

    /* Buttons for shuffling and stopping the shuffle */
    .shuffling_btn_div {
        display: flex;
        justify-content: center; /* Centre horizontalement les boutons */
        align-items: center; /* Centre verticalement les boutons */
        gap: 10px; /* Optionnel : espace entre les deux boutons */
        height: 60px; /* Ajuste selon la hauteur nécessaire */
    }

    .shuffling_btn_div button {
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 5px;
        padding: 10px 15px;
        cursor: pointer;
        font-size: 0.8rem;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .shuffling_btn_div button:disabled {
        background-color: grey; /* Change the background color */
        color: white; /* Change the text color */
        border: 1px solid darkgrey; /* Optional: change the border color */
        cursor: not-allowed; /* Change the cursor to indicate the button is disabled */
        opacity: 0.7; /* Optional: add some transparency */
    }

    .shuffling_btn_div button:hover {
        background-color: #0056b3;
    }

    .shuffling_btn_div-area {
        background-color: #f0f0f0;
        border: 1px solid #ccc;
    }
}


/********************************************************************/
/********************************************************************/
/*                                                                  */
/*                 styles for div readings                          */
/*                                                                  */
/********************************************************************/
/********************************************************************/
#readings {
    display: none;
}

#energy_of_the_day, #energy_of_the_week, #the_path_of_light,
#the_way_of_light, #the_cross_of_truth, #under_the_full_moon {
    display: none;
    flex: 1;
    justify-self: center;
    border: 1px solid #ccc;
    padding: 10px;
}

#text_interpretation {
    flex: 1;
    border: 1px solid #ccc;
    padding: 10px;
}

/* Card patterns depending on the chosen draw */
.card-layout {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}

.card-layout img, .card-wrapper img {
    width: 180px; /* Card size on desktop */
    border-radius: 10px;
    height: auto;
}

.card-wrapper {
    position: relative;
    display: inline-block;
}

/* Triangle layout for "Energy of the Week" */
.triangle-layout {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.triangle-layout .card-wrapper:nth-child(2) {
    transform: translateY(-20px);
}

/* Pyramid layout for "The Path of Light" */
.pyramid-layout {
    display: grid;
    grid-template-columns: repeat(7, 180px);
    grid-template-rows: auto auto auto;
    gap: 10px;
    justify-content: center;
}

.pyramid-layout .card-wrapper:nth-child(1) {
    grid-column: 4;
    grid-row: 1;
}
.pyramid-layout .card-wrapper:nth-child(2) {
    grid-column: 3;
    grid-row: 2;
}
.pyramid-layout .card-wrapper:nth-child(3) {
    grid-column: 5;
    grid-row: 2;
}
.pyramid-layout .card-wrapper:nth-child(4) {
    grid-column: 2;
    grid-row: 3;
}
.pyramid-layout .card-wrapper:nth-child(5) {
    grid-column: 3;
    grid-row: 3;
}
.pyramid-layout .card-wrapper:nth-child(6) {
    grid-column: 5;
    grid-row: 3;
}
.pyramid-layout .card-wrapper:nth-child(7) {
    grid-column: 6;
    grid-row: 3;
}

/* Line layout for "The Way of Light" */
.line-layout .card-wrapper:nth-child(1) {
    transform: translateY(-10px);
}

/* Cross layout for "The Cross of Truth" */
.cross-layout {
    display: grid;
    grid-template-columns: 180px 180px 180px;
    grid-template-rows: auto auto auto;
    gap: 10px;
    justify-items: center;
    align-items: center;
}

.cross-layout .card-wrapper:nth-child(1) {
    grid-column: 1;
    grid-row: 2;
}
.cross-layout .card-wrapper:nth-child(2) {
    grid-column: 3;
    grid-row: 2;
}
.cross-layout .card-wrapper:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
}
.cross-layout .card-wrapper:nth-child(4) {
    grid-column: 2;
    grid-row: 3;
}
.cross-layout .center-card {
    grid-column: 2;
    grid-row: 2;
}

/* Full Moon layout */
.fullmoon-layout {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.row {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.row:nth-child(1) .card-wrapper:nth-child(2) {
    transform: translateY(-10px);
}

.row:nth-child(2) .card-wrapper:nth-child(2) {
    transform: translateY(10px);
}

/********************************************************************/
/*                                                                  */
/*                 Responsive styles for mobile                     */
/*                                                                  */
/********************************************************************/
@media (max-width: 768px) {
    /*#readings {*/
    /*    display: none;*/
    /*    flex-direction: column;*/
    /*    justify-content: center;  !* Vertically center the content *!*/
    /*    height: 100vh;            !* Full viewport height for vertical centering *!*/
    /*    width: 100%;              !* Full width *!*/
    /*    margin: 0 auto;           !* Ensure horizontal centering *!*/
    /*    box-sizing: border-box;   !* Ensure padding and borders are included in the width *!*/
    /*}*/

    /* Ensure #readings is centered */
    #readings {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;              /* Full container width */
        padding: 0;
        margin: 0 auto;           /* Center horizontally */
        box-sizing: border-box;    /* Include padding and borders in width */
        overflow: hidden;         /* Prevent overflow */
    }

    /* Ensure #text_interpretation fits and is fully visible */
    #text_interpretation {
        width: 100%;               /* Ensure full width of the parent */
        max-width: 100%;           /* Prevent it from exceeding parent width */
        padding: 10px;             /* Add padding for readability */
        margin: 0;                 /* Remove any margins */
        box-sizing: border-box;     /* Ensure padding is included in width */
        overflow-wrap: break-word;  /* Ensure long text breaks properly */
        text-align: left;           /* Align text to the left */
        position: relative;         /* Ensure normal positioning */
        overflow: hidden;           /* Prevent any overflow */
    }

    .card-layout img, .card-wrapper img {
        width: 60px;  /* Reduce card size for mobile */
    }

    .pyramid-layout {
        grid-template-columns: repeat(7, 60px);  /* Adjust for smaller card size */
        gap: 5px;                                /* Reduce the gap between cards */

        justify-content: center;   /* Center horizontally */
        align-items: center;       /* Center vertically */
        margin: 0 auto;            /* Center the grid container horizontally */
    }

    #the_path_of_light {
        display: flex;
        justify-content: center;   /* Horizontally center */
        align-items: center;       /* Vertically center */
    }

    .cross-layout {
        grid-template-columns: 60px 60px 60px; /* Reduce cross layout size */
    }

    .triangle-layout {
        gap: 5px;  /* Reduce gap for triangle layout */
    }

    .fullmoon-layout {
        gap: 5px;  /* Reduce gap for full moon layout */
    }

    .row {
        gap: 5px;  /* Reduce gap for rows in full moon layout */
    }
}