/*
|--------------------------------------------------------------------------
| 0. Reset & Base Styles
|--------------------------------------------------------------------------
| Global styles for reset, base typography, links, and images.
*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Definindo o tamanho base para 16px. Isso torna 1rem = 16px */
/* Você pode ajustar este valor para escalar toda a sua tipografia */
html {
    font-size: 100%; /* 100% de 16px (tamanho padrão do navegador) = 16px */
}

body {
    background-color: #f4f4f4;
    font-family: 'Inter', Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6; /* Espaçamento entre linhas, importante para legibilidade */
    color: #333;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

a:hover {
    color: #007bff;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Base Typography - Tamanhos e Espaçamentos */
h1 {
    font-size: 3rem; /* 48px */
    line-height: 1.2;
    margin-bottom: 0.75em; /* Ou 1.5rem, mantenha a consistência */
}

h2 {
    font-size: 2.25rem; /* 36px */
    line-height: 1.3;
    margin-bottom: 0.6em;
}

h3 {
    font-size: 1.75rem; /* 28px */
    line-height: 1.4;
    margin-bottom: 0.5em;
}

h4 {
    font-size: 1.3rem; /* ~21px */
    line-height: 1.4;
    margin-bottom: 0.4em;
}

h5 {
    font-size: 1.15rem; /* ~18.4px */
    line-height: 1.5;
    margin-bottom: 0.3em;
}

h6 {
    font-size: 1rem; /* 16px */
    line-height: 1.5;
    margin-bottom: 0.2em;
}

p {
    font-size: 1rem; /* 16px */
    line-height: 1.7; /* Maior line-height para parágrafos longos */
    margin-bottom: 1rem; /* Espaço entre parágrafos */
}

ul, ol {
    list-style: none; /* Já está no seu reset */
    padding: 0;
    margin: 0 0 1rem 0; /* Margem inferior consistente para listas */
}

li {
    margin-bottom: 0.5rem; /* Espaço entre itens de lista */
}

/* Pequeno ajuste para garantir que os cabeçalhos em componentes não sobrescrevam */
/* A menos que você queira um comportamento diferente */
.post-card h3 {
    font-size: 1.1em; /* Relativo ao font-size do .post-card, ou 1.1rem se quiser relativo ao root */
    font-weight: 700;
    /* ... outras propriedades ... */
}

.book-card__title {
    font-size: 1.1rem; /* Usar rem para consistência com o resto da tipografia base */
    /* ... outras propriedades ... */
}

.book-card__description p {
    font-size: 0.85rem; /* Usar rem */
    /* ... outras propriedades ... */
}

.ad-card__description {
    font-size: 0.9rem; /* Usar rem */
    /* ... outras propriedades ... */
}

.ad-card__button {
    font-size: 0.85rem; /* Usar rem */
    /* ... outras propriedades ... */
}

footer p {
    font-size: 0.9rem; /* Usar rem */
    /* ... outras propriedades ... */
}

/*
|--------------------------------------------------------------------------
| 1. Header Section
|--------------------------------------------------------------------------
| Specific styles for the website header.
*/
header {
    display: flex;
    flex-direction: row;
    background-color: #46b9b6;
    padding: 15px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Added subtle shadow */
}

/* Header Elements */
.header__logo {
    order: 0;
    flex-shrink: 0; /* Prevents logo from shrinking on small screens */
}

.header__logo img {
    max-width: 100px; /* Ensures logo doesn't exceed 100px */
}

.header__menu {
    background-color: #29DBD8;
    width: 300px; /* Consider making this fluid with flex-grow or max-width */
    padding: 10px 15px; /* Adjusted padding */
    border-radius: 8px;
    order: 0;
    flex-grow: 1; /* Allows menu to grow */
    margin-right: 15px; /* Spacing between elements */
    max-width: 300px; /* Added max-width to prevent excessive growth */
}

.header__menu select {
    padding: 8px;
    width: 100%;
    border: none;
    border-radius: 5px;
    outline: none;
    background-color: #e0fafa; /* Lighter background for select */
    color: #333;
    font-size: 1em;
}

.header__search {
    order: 0;
    width: 300px; /* Consider making this fluid as well */
    flex-grow: 1; /* Allows search to grow */
    max-width: 300px; /* Added max-width */
}

.header__search form {
    background-color: #29DBD8;
    width: 100%; /* Ensures form takes full width of its container */
    display: flex;
    border-radius: 5px; /* Applied to form for consistency */
    overflow: hidden; /* Ensures child elements respect border-radius */
}

.header__search input[type="text"] {
    /*padding: 8px;*/
    width: 100%;
    border: none;
    border-radius: 5px 0px 0px 5px; 
    outline: none;
    font-size: 1em;
    flex-grow: 1; /* Allows input to take available space */
}

.header__search button {
    padding: 8px 15px;
    background-color: #333;
    color: white;
    border: none;
    border-radius: 0px 5px 5px 0px; /* Removed individual border-radius, handled by form */
    cursor: pointer;
    flex-shrink: 0; /* Prevents button from shrinking */
    transition: background-color 0.3s ease;
}

.header__search button:hover {
    background-color: #555;
}

/*
|--------------------------------------------------------------------------
| 1.1. Header Media Queries
|--------------------------------------------------------------------------
| Responsiveness for the header.
*/
@media (max-width: 764px) {
    header {
        flex-direction: column;
        align-items: center;
        padding: 10px; /* Adjusted padding for smaller screens */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
        z-index: 10;
    }

    .header__logo {
        margin-bottom: 10px;
        order: 1;
    }

    .header__menu {
        width: 95%; /* Adjusted width for better fit */
        max-width: none; /* Allows it to take full width */
        order: 2;
        margin-bottom: 10px;
        margin-right: 0; /* Remove margin-right when stacked */
    }

    .header__search {
        width: 95%; /* Adjusted width for better fit */
        max-width: none; /* Allows it to take full width */
        order: 3;
    }

    .header__search form {
        width: 100%; /* Ensures form takes full width of its container */
    }

    /* Input and button within search form will naturally adjust due to flex */
}

/*
|--------------------------------------------------------------------------
| 2. Main Content Section
|--------------------------------------------------------------------------
| Styles for the main content area of the page.
*/
.main-container {
    max-width: 1200px;
    margin: 0px auto; /* Centered with vertical margin */
    background-color: aliceblue;
    padding: 20px;
    /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Added shadow for container */
    /*border-radius: 10px; /* Rounded corners */
    /*display: flex; /* Changed to flex for main sections (featured + content/sidebar) */
    /*flex-direction: column; /* Stack sections vertically by default */
    gap: 20px; /* Gap between sections */
}

/*
|--------------------------------------------------------------------------
| 2.1. Featured Section
|--------------------------------------------------------------------------
| Styles for featured articles.
*/

.panel { /* Generic container, consider more specific class if needed */
    flex: 1 1 65%; /* Allows it to grow and shrink, minimum 65% of parent */
    display: flex;
    /*flex-direction: column;*/
    gap: 10px;
}

.featured-section {
    /*display: flex;*/
    flex: 2;    /*gap: 20px;*/
    /*flex-wrap: wrap; /* Allows items to wrap on smaller screens */
    /*justify-content: space-between; /* Distributes items */
}

.featured-section h4 {
    grid-row: 1;
    grid-column: 1;
    margin-top: 0;
    margin-bottom: 0;
    padding: 10px;
    background-color: #5ccac6;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Lighter shadow */
    color: rgb(28, 27, 27);
    text-align: center;
    width: 100%; /* Ensures H3 takes full width */
}

.featured-section__article {
    display: flex;
    gap: 20px;
    align-items: center;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 100%;
    padding: 20px;
    border-radius: 0px 0px 10px 10px;
    flex-wrap: wrap; /* Allows image and text to wrap */
}

.featured-section__image {
    flex-shrink: 0;
    max-width: 30%; /* Adjusted for better responsiveness */
    border-radius: 10px; /* Matches article border-radius */
    overflow: hidden; /* Ensures image respects border-radius */
}

.featured-section__image img {
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Lighter shadow */
}

.featured-section__text {
    flex-grow: 1;
}

.featured-section__text h3 a {
    color: #2a6c6a; /* Color for the title link */
    font-size: 1.5em;
}

.read-more-link {
    display: inline-block;
    padding: 8px 15px;
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    margin-top: 10px;
    transition: background-color 0.3s ease;
}

.read-more-link:hover {
    background-color: #8fcdee;
    color: rgb(21, 21, 21);
}

/*
|--------------------------------------------------------------------------
| 2.1.1. Featured Section Media Queries
|--------------------------------------------------------------------------
| Responsiveness for the featured section.
*/
@media (max-width: 900px) {
    .featured-section {
        flex-direction: column;
        /*gap: 20px; /* Keep gap consistent */
    }

    .panel {
        flex: 1 1 100%; /* Take full width on smaller screens */
        flex-direction: column;
    }

    .featured-section__article {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px; /* Adjusted gap */
    }

    .featured-section__image {
        max-width: 100%; /* Image takes full width */
        margin-bottom: 0; /* No extra margin */
    }
}


/*
|--------------------------------------------------------------------------
| 2.2. Posts Grid
|--------------------------------------------------------------------------
| Styles for the display of multiple posts.
*/
.posts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 20px;
}

.post-card {
    background-color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden; /* Ensures content respects border-radius */
    display: flex;
    flex-direction: column; /* Stack title, image, text vertically */
}

.post-card h3 {
    padding: 10px;
    margin-top: 0;
    background-color: #a7edeb;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    color: #333;
    text-align: center;
}

.post-card h3 a {
    color: inherit; /* Inherit color from h3 */
    font-size: 1.1em;
}

.post-card p {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 0.9em; /* Smaller font size */
    padding: 0 10px;
    font-weight: 200;
    text-align: justify;
    color: #1d1c1c;
    margin-bottom: 10px; /* Space before read more link */
    flex-grow: 1; /* Allows paragraph to take available space */
}

.post-card__image-wrapper {
    padding: 10px; /* Padding around the image */
}

.post-card__image-wrapper img {
    border-radius: 8px; /* Slightly smaller radius for image */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    
    width: 100%;
    height: auto;
    display: block;
}

.post-card .read-more-link { /* Using the generic read-more-link class */
    margin: 0px 10px 10px 10px; /* Adjusted for better bottom spacing */
    align-self: flex-start; /* Aligns link to start within flex column */
}

/*
|--------------------------------------------------------------------------
| 2.2.1. Main Content & Sidebar
|--------------------------------------------------------------------------
| Styles for the main content area and the sidebar.
*/
@media (min-width: 901px) { /* Apply flex for main content and sidebar on larger screens */
    .main-container {
        flex-direction: row; /* Layouts them side-by-side */
        align-items: flex-start; /* Align items to the top */
    }

    .panel { /* This panel now contains featured and posts-grid */
        flex: 1 1 70%; /* Give more space to the main content */
    }

    .sidebar {
        flex: 1; /* Give space to the sidebar */
        max-width: 600px; /* Prevent sidebar from getting too wide */
        margin-left: 0px; /* Space between main content and sidebar */
        order: 1; /* Sidebar comes after featured section on large screens */
        display: flex; /* Ensure sidebar items stack correctly */
        flex-direction: column;
        gap: 10px; /* Gap between widgets */
    }
}

/*
|--------------------------------------------------------------------------
| 2.2.2. Main Content & Posts Grid Media Queries
|--------------------------------------------------------------------------
| Responsiveness for the middle section and posts grid.
*/
@media (max-width: 999px) {
    /* For smaller screens, main-container already flex-direction: column */
    .main-container {
        flex-direction: column; /* Ensure sections stack */
        gap: 20px;
    }

    .sidebar {
        width: 100%;
        max-width: none; /* Allow sidebar to take full width */
        margin-bottom: 20px;
        order: 0; /* Sidebar comes first on small screens if desired, or keep order 1 */
        padding: 0 10px; /* Add some horizontal padding */
    }

    /* .posts-grid already has auto-fit, which handles single column on small screens */
    /* @media (max-width: 900px) is redundant due to auto-fit, but can be used for specific adjustments */
    @media (max-width: 600px) { /* Example for smaller screens where auto-fit might create very narrow columns */
        .posts-grid {
            grid-template-columns: 1fr; /* Force single column on very small screens */
        }
    }
}

/*
|--------------------------------------------------------------------------
| 2.3. Widgets (within the Sidebar)
|--------------------------------------------------------------------------
| Styles for widget components (e.g., Recommended Books, Suggested Movies, TOP 10).
*/
.widget {
    display: grid;
    grid-template-rows: auto 1fr;
    align-items: start;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 100%;
    background-color: white;
    border-radius: 10px;
    margin-bottom: 10px; /* Consistent spacing between widgets */
    overflow: hidden; /* Ensures content respects border-radius, especially for h3 */
}

.widget h4 {
    grid-row: 1;
    grid-column: 1;
    margin-top: 0;
    margin-bottom: 0;
    padding: 10px;
    background-color: #2a6c6a;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Lighter shadow */
    color: white;
    text-align: center;
    width: 100%; /* Ensures H3 takes full width */
}

.widget ul {
    grid-row: 2;
    grid-column: 1;
    padding: 10px; /* Padding for the list content */
}

.widget ul li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.widget ul li:last-child {
    border-bottom: none;
}

.widget ul li a {
    color: #333;
    display: block; /* Makes the entire list item clickable */
}

.widget ul li a:hover {
    color: #007bff;
    background-color: #f8f9fa;
}

.widget ul li::before {
    /*content: "\27A5";*/ /* Unicode arrow, uncomment to use */
    color: #04274c;
    display: inline-block;
    width: 1em;
    margin-left: -0.8em;
    margin-right: 0.5em;
}

/*
|--------------------------------------------------------------------------
| 2.4. Book Card Styles (used in Widgets)
|--------------------------------------------------------------------------
| Styles for book cards displayed within widgets.
*/
.book-card {
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column; /* Stack title, then content */
}

.book-card__title {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
    margin-bottom: 5px; /* Spacing below title */
}

.book-card__content {
    display: flex;
    align-items: flex-start;
    gap: 10px; /* Spacing between image and description */
}

.book-card__image {
    flex-shrink: 0; /* Prevents image from shrinking */
    width: 70px; /* Fixed width for image within book card */
    height: auto;
}

.book-card__image img {
    height: auto;
    width: 100%; /* Image fills its container */
    /*border-radius: 5px;*/
    box-shadow: 0 1px 3px rgba(0, 0, 0, 1);
}

.book-card__description {
    flex-grow: 1; /* Description takes remaining space */
}

.book-card__description p {
    margin-top: 0;
    font-style: italic;
    font-size: 0.85em; /* Smaller font size for description */
    margin-left: 0; /* Removed margin-left, relying on gap */
    color: #555;
}

/*
|--------------------------------------------------------------------------
| 2.5. Ads Section
|--------------------------------------------------------------------------
| Styles for horizontal scrolling advertisements/affiliate products.
*/
.ads-section {
    width: 100%;
    background-color: white;
    padding: 10px 0; /* Padding for the section */
    /* No box-sizing here as it's global */
}

.ads-carousel {
    width: 100%;
    overflow-x: auto; /* Enables horizontal scrolling */
    display: flex;
    gap: 15px; /* Space between ad cards */
    padding-bottom: 15px; /* Space for scrollbar */
    -webkit-overflow-scrolling: touch; /* Smoother scrolling on iOS */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #888 #f1f1f1; /* Firefox */
}

/* Custom scrollbar for Webkit browsers */
.ads-carousel::-webkit-scrollbar {
    height: 8px;
}

.ads-carousel::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.ads-carousel::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.ads-carousel::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.ad-card {
    flex-shrink: 0; /* Prevents cards from shrinking */
    width: 200px;
    height: auto; /* Allows height to adjust */
    border: 1px solid #eee; /* Lighter border */
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* Distributes content vertically */
    text-align: center;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    background-color: white;
}

.ad-card a {
    display: block; /* Makes the whole image/text block clickable */
    width: 100%; /* Ensures link takes full width of card */
    margin-bottom: 5px; /* Spacing below link content */
}

.ad-card img {
    max-width: 100px;
    height: auto;
    object-fit: contain; /* Ensures image fits without cropping */
    margin: 0 auto 5px; /* Center image and add bottom margin */
}

.ad-card__description {
    font-size: 0.9em;
    margin-bottom: 10px; /* Space before button */
    color: #555;
    flex-grow: 1; /* Allows description to take available space */
}

.ad-card__button {
    display: inline-block;
    padding: 6px 10px; /* Adjusted padding */
    background-color: #28a745;
    color: white;
    border-radius: 5px;
    font-size: 0.8em;
    transition: background-color 0.3s ease;
}

.ad-card__button:hover {
    background-color: #74c285;
}

/*
|--------------------------------------------------------------------------
| 3. PostView
|--------------------------------------------------------------------------
*/
.post-date {
    text-align: center;
}

/*
|--------------------------------------------------------------------------
| 4. Footer Section
|--------------------------------------------------------------------------
*/
footer {
    background-color: #46b9b6;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 60px;
    padding: 15px; /* Added padding for responsiveness */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); /* Shadow for footer */
    margin-top: 20px; /* Space above footer */
}

footer p {
    margin: 0;
    font-size: 0.9em;
}