/* beholder/assets/css/style.css */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&family=Libre+Baskerville:ital@0;1&display=swap');

body {
    background-image: url('./beholder/assets/img/SolivoyageBGpic.png'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-color: #808080; /* Fallback grey */
    color: #eee;
    font-family: 'Libre Baskerville', serif;
}

/* The main 'parchment' card style */
.parchment {
    /* Added the URL from your comment so the texture shows */
/*    background-image: url('https://solivoyage.com/beholder/assets/img/parchment.jpg'); */
    background-color: #fdf5e6; /* Fallback color */
    background-size: cover;
    background-repeat: no-repeat;
    color: #3a2a1a; /* Dark brown text */
    border: 3px solid #5a4a3a;
    border-radius: 2px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.7);
}

/* Title Font */
.medieval-title {
    font-family: 'MedievalSharp', cursive;
    color: #8b0000; /* Dark red */
    font-weight: bold;
    font-size: 2.5rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2); /* Slight shadow for readability */
}

.card-title.medieval-title {
     font-size: 2.2rem;
}

.modal-title.medieval-title {
    font-size: 1.8rem;
}

/* Label Font */
.medieval-label {
    font-family: 'MedievalSharp', cursive;
    font-size: 1.3rem;
    color: #5a4a3a;
    font-weight: bold;
}

/* Story Text */
.story-text {
    font-size: 1.1rem;
    line-height: 1.8;
}

/* Button Style */
.medieval-btn {
    font-family: 'MedievalSharp', cursive;
    font-size: 1.3rem;
    letter-spacing: 1px;
    background-color: #5a4a3a;
    border-color: #3a2a1a;
    color: #fdf5e6;
    border-radius: 2px;
    padding: 0.6rem 1.5rem;
    transition: all 0.2s ease-in-out;
}

.medieval-btn:hover {
    background-color: #3a2a1a;
    border-color: #1a0a00;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

/* Form inputs on parchment */
.parchment .form-control,
.parchment .form-select {
    background-color: rgba(255, 255, 255, 0.6);
    border: 1px solid #8a7a6a;
    color: #3a2a1a;
    font-family: 'Libre Baskerville', serif;
}

.parchment .form-control:focus,
.parchment .form-select:focus {
    background-color: #fff;
    border-color: #5a4a3a;
    box-shadow: 0 0 0 0.25rem rgba(90, 74, 58, 0.25);
    color: #3a2a1a;
}

/* Modal styling overrides if you use modals later */
.modal-content.parchment {
    border: 3px solid #5a4a3a;
}

.modal-header {
    border-bottom: 2px solid #8a7a6a;
}
.modal-footer {
    border-top: 2px solid #8a7a6a;
}