/*
Theme Name: Cave les Essetions
Author: TNT Concept
Description: WordPress theme for Cave les Essetions based on static HTML.
Version: 1.0
*/
@font-face {
    font-family: 'Montserrat'; /*a name to be used later*/
    src: url('./fonts/Montserrat-VariableFont_wght.ttf'); /*URL to font*/
}
@font-face {
    font-family: 'Playfair Display'; /*a name to be used later*/
    src: url('./fonts/PlayfairDisplay-VariableFont_wght.ttf'); /*URL to font*/
}
@font-face {
    font-family: 'Algerian'; /*a name to be used later*/
    src: url('./fonts/Algerian_regular.ttf'); /*URL to font*/
}
@font-face {
    font-family: 'Instrument Sans'; /*a name to be used later*/
    src: url('./fonts/InstrumentSans-VariableFont_wdth,wght.ttf'); /*URL to font*/
}
:root {
    --montserrat: 'Montserrat', sans-serif;
    --playfair: 'Playfair Display', serif;
    --algerian: 'Algerian';
    --instrument: 'Instrument Sans', sans-serif;
    --title-color: rgb(255, 255, 255); /* rgb(201 36 82) */
    --text-color: rgb(254 205 211 / 1);
    --link-color: rgb(255, 255, 255);
    /* orange-300 */
}

body {
    background-color: #000;
    color: #fff;
    font-family: var(--montserrat);
    overflow-x: hidden;
}

h1,
h2,
h3
{
    font-family: var(--algerian) !important;
    color: var(--title-color) !important;
}

h4,h5,h6{
    font-family: var(--instrument) !important;
    color: var(--title-color) !important;
}

p,
a {
    font-family: var(--instrument) !important;
    color: var(--text-color) !important;
}

a:hover {
    color: var(--link-color) !important;
    /* orange-300 */
    /* text-decoration: underline !important; */
}

ul,
li {
    /* all: unset !important; */
    list-style: initial !important;
    margin: initial;
    padding: revert !important;
    color: var(--text-color) !important;
}

ul,
li {
    font-family: var(--instrument) !important;
}

/* svg{
    stroke: var(--title-color) !important;
} */

/* Target CF7 Inputs and Textareas within our form */
.cave-form input[type="text"],
.cave-form input[type="email"],
.cave-form textarea {
    width: 100% !important;
    background-color: #ffffff !important;
    border-radius: 0.5rem !important;
    /* rounded-lg */
    border: 1px solid #e7e5e4 !important;
    /* border-stone-200 */
    padding: 0.625rem 1rem !important;
    /* px-4 py-2.5 */
    font-size: 0.875rem !important;
    /* text-sm */
    color: #2E211D !important;
    /* text-[#2E211D] */
    transition: all 0.2s;
    outline: none !important;
}

/* Focus States */
.cave-form input:focus,
.cave-form textarea:focus {
    border-color: #fdba74 !important;
    /* border-orange-300 */
    box-shadow: 0 0 0 2px #fff7ed !important;
    /* ring-orange-100 */
}

/* Fix for CF7 adding span wrappers that break layouts */
.wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
}

/* Message Area specific height */
.cave-form textarea {
    resize: none !important;
    min-height: 100px;
}

#gallery img {
    cursor: zoom-in;
}

/* .bg-blur {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    filter: brightness(0.25) blur(10px);
    z-index: -1;
} */

/* #contact > div{
    background: none !important;
    border: 1px solid #e7e5e4 !important;
} */
footer {
    background: none !important;
}


@keyframes animationIn {
    0% {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0px);
    }
}

body {
    font-family: var(--instrument), sans-serif;
}

h1,
h2,
h3{
    font-family: var(--algerian) !important;
}

/* Smooth fade for images */
.fade-in-up {
    animation: fadeUp 0.8s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1c1315;
}

::-webkit-scrollbar-thumb {
    background: #4a2c2c;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #6b3d3d;
}

/* Container reset for CF7 */
.cave-dark-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* Base Input & Textarea Styles */
.cave-dark-form input[type="text"],
.cave-dark-form input[type="email"],
.cave-dark-form textarea {
    width: 100% !important;
    background-color: rgba(0, 0, 0, 0.2) !important; /* bg-black/20 */
    border: 1px solid rgba(255, 255, 255, 0.1) !important; /* border-white/10 */
    border-radius: 0.5rem !important; /* rounded-lg */
    padding: 0.625rem 1rem !important; /* px-4 py-2.5 */
    font-size: 0.875rem !important; /* text-sm */
    color: #fff1f2 !important; /* text-rose-50 */
    transition: all 0.2s ease-in-out;
    outline: none !important;
}

/* Placeholder Color */
.cave-dark-form input::placeholder,
.cave-dark-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.2) !important; /* placeholder-white/20 */
}

/* Focus States */
.cave-dark-form input:focus,
.cave-dark-form textarea:focus {
    background-color: rgba(0, 0, 0, 0.4) !important; /* focus:bg-black/40 */
    border-color: rgba(244, 63, 94, 0.5) !important; /* focus:border-rose-500/50 */
}

/* Textarea specific */
.cave-dark-form textarea {
    resize: none !important;
}

/* Validation Errors styling (Optional but recommended) */
.wpcf7-not-valid-tip {
    color: #fb7185 !important;
    font-size: 0.75rem !important;
    margin-top: 0.25rem;
}

/* Success & Error Message Containers */
.wpcf7-response-output {
    margin: 1.5rem 0 0 !important;
    padding: 1rem !important;
    border-radius: 0.75rem !important;
    font-size: 0.875rem !important;
    border: 1px solid transparent !important;
}

/* Green Success state */
.wpcf7-mail-sent-ok {
    background: rgba(16, 185, 129, 0.1) !important; /* Green/10 */
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #34d399 !important;
}

/* Red Error state */
.wpcf7-validation-errors, .wpcf7-acceptance-missing {
    background: rgba(244, 63, 94, 0.1) !important; /* Rose/10 */
    border-color: rgba(244, 63, 94, 0.3) !important;
    color: #fb7185 !important;
}

/* Loading Spinner Styling */
.wpcf7-spinner {
    background-color: #E5D4C0 !important; /* Matches your button color */
    margin: 0 0 0 10px !important;
}

/* Hide the default span if it's empty to keep the grid clean */
span.wpcf7-form-control-wrap:empty {
    display: none !important;
}

.masonry-item{
    background: transparent !important;
}