/* Basic Reset */
body, h1, p, ul, li {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.6;
    color: #000;
    background-image: url('../images/background.png'); /* Path relative to CSS file */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
}

/* =================================== */
/* === HEADER, LOGO, NAV STYLING === */
/* (Keep all your existing header styles - unchanged) */
/* =================================== */
.site-header {
    position: sticky; top: 0; z-index: 100; background-color: rgba(240, 240, 240, 0.92); border-bottom: 2px solid #cccccc; display: flex; align-items: center; padding: 0 1rem; min-height: 120px;
   transition: transform 0.3s ease-in-out; /* Smooth slide animation */
}

/* New class to hide the header */
.site-header.header-hidden {
    transform: translateY(-100%); /* Slides header up completely */
}
.main-nav { margin-left: 20px; margin-right: 20px; text-align: center;}
.main-nav ul { list-style: none; display: inline-flex; padding: 0; flex-wrap: wrap; margin: 0; }
.main-nav li { margin: 0 0.8rem; }
.main-nav a { color: #333333; text-decoration: none; font-weight: 600; padding: 0.5rem 0.8rem; transition: background-color 0.3s ease, color 0.3s ease; border-radius: 4px; display: inline-block; white-space: nowrap; }
.main-nav a:hover, .main-nav a:focus { background-color: #dddddd; color: #000000; outline: none; }
.main-nav a.active { background-color: #55aaff; color: #ffffff; font-weight: bold;} /* Ensure this style is present */
.header-icons { display: flex; align-items: center; gap: 15px; margin-left: auto; }
#site-logo { width: 100px; height: auto; display: block; order: 2; }
.social-icon-link { line-height: 0; order: 1; display: block; }
.social-icon { width: 32px; height: 32px; display: block; transition: opacity 0.2s ease; }
.social-icon:hover { opacity: 0.8; }

/* ======================================= */
/* === MAIN CONTENT AREA === */
/* ======================================= */
#main-content {
    max-width: 960px;
    margin: 2rem auto;
    padding: 25px;
    /* Adding background for text legibility, same as MainPage */
    border-radius: 5px;
}

/* --- Styles for Book Review Page --- */
#main-content.review-page h1 {
    color: #000000;
    margin-bottom: 0.5rem; /* Reduced margin */
    font-size: 2.8em; /* Slightly smaller than main page H1 */
    font-weight: 700;
    text-align: center;
    text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.8);
}

#main-content.review-page h2 { /* Style for author name */
     color: #333;
     margin-bottom: 2rem; /* Space below author */
     font-size: 1.4em; /* Smaller than H1 */
     font-weight: 500;
     text-align: center;
     text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.6);
}

.review-text-content p {
    /* Match MainPage font size request */
    font-size: 1.2em;
    font-weight: 600;
    color: #000000;
    text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.6);

    line-height: 1.7;
    margin-bottom: 1.3em;
    /* Justify text */
    text-align: justify;
}
.review-text-content p:last-child {
    margin-bottom: 0; /* Remove margin from last paragraph */
}

/* Ensure links within review text are styled appropriately */
.review-text-content a {
    color: #004a9e;
    text-decoration: underline;
    font-weight: bold; /* Inherit or set explicitly */
    text-shadow: none; /* Optional: Remove shadow from inline links */
}
.review-text-content a:hover {
    color: #00336d;
}

/* --- Floated Book Cover Link/Image Styling --- */
a.book-review-cover-link {
    float: left; /* Keep float */
    /* --- CHANGE: Resize Width --- */
    width: 150px; /* Roughly half the bookshelf size (180px/2) - Adjust as needed */
    /* Adjust margins for smaller size */
    margin-top: 0;      /* Align with top of text flow */
    margin-left: 0;  /* Space to the left */
    margin-right: 15px;
    margin-bottom: 5px; /* Smaller space below */
    line-height: 0;     /* Prevent extra link spacing */
    text-decoration: none;
}

a.book-review-cover-link img {
    max-width: 100%;    /* Image scales within the <a> tag width */
    height: auto;
    display: block;
    border: 1px solid #ddd;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    transition: opacity 0.2s ease;
}

a.book-review-cover-link:hover img {
    opacity: 0.85; /* Optional hover effect */
}

.about-container {
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.5); /* 30% opacity */
    padding: 25px;
    border-radius: 5px;
}


/* ======================================= */
/* === FOOTER === */
/* (Keep existing footer styles - unchanged) */
/* ======================================= */
.site-footer {
    text-align: center; margin-top: 2rem; padding: 1rem; font-size: 0.9em; color: #fff; background-color: rgba(51, 51, 51, 0.8); border-top: 1px solid #ccc;
}

/* ======================================= */
/* === RESPONSIVE ADJUSTMENTS === */
/* (Keep existing responsive styles - unchanged) */
/* ======================================= */
@media (max-width: 600px) {
    .site-header {
        min-height: 90px;
        padding: 0 0.5rem;
        flex-wrap: wrap; /* Allow wrapping */
        justify-content: center; /* Center when wrapped */
    }

    .main-nav {
        width: 100%;
        order: 2;
        margin: 0.5rem 0 0 0;
        text-align: center;
    }
     .main-nav ul { justify-content: center; }
     .main-nav li { margin: 0.3rem 0.4rem; }
     .main-nav a { white-space: normal; text-align: center; }

    .header-icons {
         gap: 10px;
         margin-left: 0;
         order: 1;
         width: 100%;
         justify-content: center;
    }

    #site-logo { width: 60px; order: 2; }
    .social-icon-link { order: 1; }
    .social-icon { width: 28px; height: 28px; }

    /* Content styling */
    #main-content {
         font-size: 1.1em;
         padding: 15px; /* Reduce padding on smaller screens */
    }
    #main-content h1 { font-size: 2.5em; }

    #main-content p {
        text-align: justify; /* Switch back from justify on small screens if desired */
    }
}

/* Styling for the language link to make it look like a button */
a.lang-link {
    display: fixed;      /* Allows padding and behaves like a button */
    padding: 6px 12px;        /* Adjust padding for button size */
    background-color: #e9ecef;  /* Light grey background */
    color: #343a40;            /* Darker text for contrast */
    border: 1px solid #ced4da;  /* Subtle border */
    border-radius: 4px;         /* Rounded corners */
    text-decoration: none;      /* Remove underline from link */
    font-weight: bold;
    font-size: 0.9em;         /* Slightly smaller or same as nav */
    line-height: 1.4;         /* Adjust for vertical text centering */
    text-align: center;
    min-width: 45px;          /* Minimum width to fit "EN" / "PT" nicely */
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;      /* Prevent text like "PT" from wrapping */
}

a.lang-link:hover,
a.lang-link:focus {
    background-color: #dee2e6;  /* Slightly darker on hover */
    color: #000;
    border-color: #adb5bd;
    outline: none;
}