/* Fonts */
@font-face {
    font-family: 'Luminari';
    src: url('../fonts/Luminari-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'LibreBaskerville';
    src: url('../fonts/LibreBaskerville-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'MrsEavesSmallCaps';
    src: url('../fonts/Mrs Eaves Small Caps.otf') format('opentype');
}

/* Global Styles */
body {
    background-color: #f4f1ea;
    /* background-image: url('../images/background_detail.png');  */
    /* This ensures it tiles naturally */
    /* background-repeat: repeat; */
    /* background-size: auto; */
    /* background-attachment: fixed; */
    /* background-size: cover; */
    overflow-x: hidden;
    
    /* font-family: 'LibreBaskerville', serif !important; */
}

body::before {
    content: "";
    position: fixed; /* Keeps it in place while scrolling */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Your texture image */
    background-image: url('../images/background_detail.png');
    background-repeat: repeat;
    background-size: auto;
    
    /* Adjust this value (0.0 to 1.0) to change transparency */
    opacity: 0.3; 
    
    /* Layers it behind your text/content */
    z-index: -1; 
    pointer-events: none;
}

.container{
    max-width: 1600px;
}

/* Fix white gaps in card headers */
.card .card-header {
    margin: -1px -1px 0 -1px; /* Pulls the header over the card border to eliminate gaps */
    border-radius: calc(0.375rem - 1px) calc(0.375rem - 1px) 0 0; /* Matches default Bootstrap radius */
    border: 1px solid transparent; /* Ensures alignment with the parent border */
}

/* Specifically for your dark headers to ensure seamless blending */
.card-header.bg-dark {
    border-color: #212529; /* Matches the dark background color */
}

.navbar-brand, a, button{
    font-family: 'MrsEavesSmallCaps', sans-serif !important;
    font-size: 1.5rem !important;
}

.card-title, h2, h4,h5{
    font-family: 'Luminari', sans-serif !important;
}

.background-header {
    /* Overlay gradient (darkening the image) followed by the static image fallback */
    background-image: url('../images/woodlandbanner.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 80%;
	overflow:hidden;
    aspect-ratio: 1536 / 737;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(5px 10px 5px rgba(0, 0, 0, 0.2));
}

/* Remove default Bootstrap margins that might push the title down */
.woodland-title {
    margin-top: 0;
}


.ripped-panel {
    position: relative;
    /* Remove any background/filter from the main container */
    background: none !important; 
    filter: none !important;
    mask-image: none !important;
    overflow: visible;
    
}

.ripped-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1; /* Places the background behind the text */
    
    /* Apply your background image here */
    background: linear-gradient(rgb(248, 249, 250), rgb(248, 249, 250));
    
    /* Apply the Ripped Effect ONLY to this layer */
    filter: url(#torn-paper-filter) drop-shadow(5px 10px 5px rgba(0, 0, 0, 0.2));
    /* If you want to keep the image slightly away from the container edges 
       to see the rip better, add a small negative margin or inset */
    margin: -2px;
}

.woodland-title {
	color: #2c2129;
    font-family: 'Luminari', serif;
    letter-spacing: 1px;
    font-size: 5rem;
}

.subtitle {
	color: #ffffff;
    font-family: 'MrsEavesSmallCaps', serif;
    font-size: 2rem;
    letter-spacing: 0.05em;
}

.btn {
    font-variant-ligatures: no-common-ligatures;
    -webkit-font-variant-ligatures: no-common-ligatures;
}

.btn-carved {
    /* Top-left, Top-right, Bottom-right, Bottom-left 
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    border: 2px solid #67b2b5;
    background: #67b2b5;  Woodland Green 
    color: white;*/
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    border: 2px solid #2c2129;
    background-color: #66b1b4; /* Woodland Brown */
    color: #080808 !important;
    font-family: 'Luminari', serif;
    transition: all 0.2s ease;
}
.btn-carved:hover {
    background-color: #487e80; /* Marquise Orange - pops against the background */
    border-color: #2c2129;
    color: #ffffff !important;
    transform: translateY(-2px); /* Lifts the button slightly */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.oak-divider {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    height: 60px;
    background-image: url('../images/oakbanner.png');
    background-repeat: repeat-x;
    background-position: left center;
    background-size: auto 101%;
    margin-top: 2rem;
    margin-bottom: 4rem;
    z-index: 1;
}

.card { border: 2px solid #8b5e3c; }