/* 
 * Reset CSS
 * Modern CSS reset combined with base styles
 */

/* Box sizing rules */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

/* Remove default margin and padding */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
ul,
ol,
dl,
dd {
    margin: 0;
    padding: 0;
}

/* Body defaults */
/* First, update the body style */
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    width: 100%;
    position: relative; /* This ensures proper positioning of the pseudo-element */
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.6;
}

/* Then, update the body::before style */
body::before {
    content: "";
    position: fixed; /* Changed from absolute to fixed */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        rgba(219, 214, 214, 0.3),
        #fdf8f84d
    ),
    url('https://cf.bstatic.com/xdata/images/hotel/max1024x768/485966430.jpg?k=b065a059f0f6c94004d37527856caf43ade0c7049a4741e0ecd2c3412ed4d74c&o=&hp=1') no-repeat center center;
    background-size: cover;
    filter: blur(10px);
    z-index: -1;
    pointer-events: none; /* This prevents any interference with page interactions */
}

/* Add a wrapper to prevent blur edges from showing */
body::after {
    content: "";
    position: fixed;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    z-index: -2;
    background-color: white; /* Or any color that matches your design */
}

/* Make images easier to work with */
img,
picture {
    max-width: 100%;
    display: block;
    height: auto;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

/* Remove default button styles */
button {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

/* Remove list styles */
ul,
ol {
    list-style: none;
}

/* Remove text decoration from links */
a {
    text-decoration: none;
    color: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
    min-height: 10em;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Set core root defaults */
html:focus-within {
    scroll-behavior: smooth;
}

/* Set core body defaults */
html, body {
    height: 100%;
}

/* Remove focus outline for non-keyboard focus */
:focus:not(:focus-visible) {
    outline: none;
}

/* Add focus styles for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Remove default fieldset styles */
fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

/* Responsive font size base */
html {
    font-size: 16px;
}

@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
}

/* Form element resets */
input,
textarea {
    appearance: none;
    border-radius: 0;
}

/* Tables */
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

/* Support for older browsers */
main {
    display: block;
}

/* Typography baseline */
body {
    -webkit-text-size-adjust: 100%;
}

/* Selection styles */
::selection {
    background-color: var(--primary);
    color: var(--text-light);
}