/*
Theme Name: Agencia Ili
Author: Agência Ili
Description: Tema personalizado WordPress desenvolvido pela Agência Ili.
Version: 1.0
*/

/* Importar fontes do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Variáveis CSS para fontes e tamanhos */
:root {
    --font-primary: 'Raleway', sans-serif;
    --font-secondary: 'Poppins', sans-serif;
    
    /* Tamanhos de fonte em rem */
    --h1-size: 2.5rem;    /* 40px */
    --h2-size: 2.5rem;    /* 40px */
    --h3-size: 1.75rem;   /* 28px */
    --p-size: 1rem;       /* 16px */
    
    /* Breakpoints Bootstrap 5 */
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
}

body {
    font-family: var(--font-primary);
    font-size: var(--p-size);
    line-height: 1.6;
    color: #121212;
    font-weight: 400;
}

/* Classes de títulos reutilizáveis */
.h1, h1 {
    font-family: var(--font-primary);
    font-size: var(--h1-size);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: #121212;
}

.h2, h2 {
    font-family: var(--font-primary);
    font-size: var(--h2-size);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.875rem;
    color: #121212;
}

.h3, h3 {
    font-family: var(--font-primary);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 0.75rem;
    color: #121212;
}

/* Parágrafos */
p {
    font-family: var(--font-primary);
    font-size: var(--p-size);
    line-height: 1.6;
    margin-bottom: 1rem;
    color: #333;
}

/* Estilos gerais */
/* Usando containers padrão do Bootstrap 5 */

/* Header */
.site-header {
    background-color: #f8f9fa;
    padding: 1rem 0;
   
}

.site-title {
    font-size: 2rem;
    font-weight: bold;
    color: #484847;
    text-decoration: none;
}

.site-title:hover {
    color: #F96F35;
}

/* Navigation */
.navbar-nav .nav-link {
    color: #484847;
    font-weight: 500;
}

.navbar-nav .nav-link:hover {
    color: #F96F35;
}

/* Main content */
.main-content {
    padding: 2rem 0;
    min-height: 60vh;
}

/* Layout sem sidebar */

/* Footer */
.site-footer {
    background-color: #343a40;
    color: #fff;
    padding: 2rem 0;
    margin-top: 2rem;
}
.pt-80 {
    padding-top: 80px;
}
.pb-80{
    padding-bottom: 80px;
}

/* Posts */
.post {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #dee2e6;
}

.post-title {
    color: #333;
    margin-bottom: 1rem;
}

.post-meta {
   display: flex;
   gap: 20px;
   align-items: center;
}
.post-meta span {
  font-size: 13px;
  font-weight: 400;
  color: #121212;
}
.post-content {
    line-height: 1.8;
}

/* Widgets */
.widget {
    margin-bottom: 2rem;
}

.widget-title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #333;
}

/* Responsive - Breakpoints Bootstrap 5 */
@media (max-width: 575.98px) {
    /* Extra small devices (portrait phones, less than 576px) */
    :root {
        --h1-size: 2rem;     /* 32px */
        --h2-size: 1.875rem; /* 30px */
        --h3-size: 1.5rem;   /* 24px */
        --p-size: 0.9375rem; /* 15px */
    }
    
    .site-title {
        font-size: 1.5rem;
    }
    
    .main-content {
        padding: 1rem 0;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    /* Small devices (landscape phones, 576px and up) */
    :root {
        --h1-size: 2.25rem;  /* 36px */
        --h2-size: 2.125rem; /* 34px */
        --h3-size: 1.625rem; /* 26px */
        --p-size: 0.96875rem; /* 15.5px */
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    /* Medium devices (tablets, 768px and up) */
    :root {
        --h1-size: 2.375rem; /* 38px */
        --h2-size: 2.25rem;  /* 36px */
        --h3-size: 1.6875rem; /* 27px */
        --p-size: 0.984375rem; /* 15.75px */
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Large devices (desktops, 992px and up) */
    :root {
        --h1-size: 2.4375rem; /* 39px */
        --h2-size: 2.375rem;  /* 38px */
        --h3-size: 1.71875rem; /* 27.5px */
        --p-size: 0.9921875rem; /* 15.875px */
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    /* Extra large devices (large desktops, 1200px and up) */
    :root {
        --h1-size: 2.5rem;    /* 40px */
        --h2-size: 2.5rem;    /* 40px */
        --h3-size: 1.75rem;   /* 28px */
        --p-size: 1rem;       /* 16px */
    }
}

@media (min-width: 1400px) {
    /* Extra extra large devices (larger desktops, 1400px and up) */
    :root {
        --h1-size: 2.5rem;    /* 40px */
        --h2-size: 2.5rem;    /* 40px */
        --h3-size: 1.75rem;   /* 28px */
        --p-size: 1rem;       /* 16px */
    }
}