/*=====================Calculadora Científica=====================*/

/* --- Base Styles & Layout (Merged from original and inline) --- */
body {
    font-family: 'Arial', sans-serif;
    background-color: #121212; /* Fallback/Overlay color */
    /* 2) Imagem de fundo */
    background-image: url('calculadora-cientificax.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Keep background fixed while scrolling */
    color: #fff;
    min-height: 100vh;
    margin: 0;
    padding: 0; /* Reset default padding */
    box-sizing: border-box;
    /* Flexbox for full page layout (header, main, footer) */
    display: flex;
    flex-direction: column;
}

/* Styles for the <main> wrapper (Merged from original and inline) */
main.tool-content {
    padding: 0 15px 20px 15px; /* Padding lateral/inferior */
    flex-grow: 1; /* Allows main to take available space */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    /* Add some background color/overlay if background image is too bright */
    /* background-color: rgba(0, 0, 0, 0.3); /* Subtle dark overlay */
}

/* H1 original da ferramenta - Adjustment */
main.tool-content > h1:first-of-type { /* Adjusted selector to be more robust */
/* body > h1:first-of-type { /* Original inline/style.css selector */
    color: #fff; /* Manter texto branco */
    text-align: center; /* Manter centralizado */
    margin: 20px auto; /* Centraliza o bloco do H1 e adiciona margem superior/inferior */
    flex-shrink: 0; /* Prevent shrinking */

    /* --- Novas Estilos para a Caixa Azul --- */
    background-color: #3498db; /* Fundo azul */
    padding: 10px 25px; /* Padding interno (vertical, horizontal) */
    border-radius: 8px; /* Bordas arredondadas */
    display: block; /* Garante que é um bloco para margin: auto funcionar */
    width: fit-content; /* Ajusta a largura ao conteúdo */
    max-width: 95%; /* Limita a largura em telas pequenas */
    box-sizing: border-box; /* Inclui padding na largura total */
    /* --- Fim Estilos Caixa Azul --- */
}


/* --- Calculator Container (Original styles + Glass Effect) --- */
.calculator {
    background-color: #222; /* Original fallback color */
    border-radius: 15px;
    padding: 20px;
    /* Original shadow */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    width: 550px;
    max-width: 95%;
    flex-shrink: 0;
    margin-left: auto; /* Centering */
    margin-right: auto; /* Centering */
    margin-top: 10px; /* Espaço abaixo do H1 */
    margin-bottom: 20px; /* Adicionado margem-bottom para separar da descrição/adsense */

    /* 3) Efeito Vidro (Glassmorphism) */
    background-color: rgba(34, 34, 34, 0.6); /* Semi-transparent dark background */
    backdrop-filter: blur(10px); /* Apply blur effect to elements behind it */
    -webkit-backdrop-filter: blur(10px); /* Safari support */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle light border */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7); /* Updated shadow for depth */
}


/* --- Display --- */
.display {
    background-color: #333; /* Original background */
    color: #fff;
    font-size: 1.8em;
    text-align: right;
    padding: 10px 15px;
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    box-sizing: border-box;
     /* Optional: Subtle glass effect for display? */
     /* background-color: rgba(51, 51, 51, 0.7); /* Slightly more transparent */
     /* border: 1px solid rgba(255, 255, 255, 0.05); */
}

#expression {
    font-size: 0.6em;
    color: #aaa;
    min-height: 1.2em;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    height: 1.5em;
    line-height: 1.5em;
}

#result {
    font-size: 1em; /* Adjusted relative to container font size */
    min-height: 1.3em;
    line-height: 1.3em;
    text-align: right;
    overflow: hidden;
    text-overflow: clip; /* Use clip to avoid trailing "..." on long results */
    white-space: nowrap;
    word-break: keep-all;
    /* Use a mono font for consistent number width if preferred */
    /* font-family: 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace; */
}


/* --- Buttons --- */
.buttons {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(50px, auto);
    grid-gap: 8px;
}

button {
    background-color: #444;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1.15em;
    padding: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    /* Optional: Add subtle glass effect to buttons */
    /* background-color: rgba(68, 68, 68, 0.7); /* Semi-transparent */
    /* border: 1px solid rgba(255, 255, 255, 0.08); /* Subtle border */
}

button:hover {
    background-color: #555; /* Darker hover for normal buttons */
     /* background-color: rgba(85, 85, 85, 0.8); /* Darker hover for glass buttons */
}
button:active {
    transform: scale(0.97);
}

/* Specific Button Colors */
.operator {
    background-color: #ffab40; /* Orange */
    color: #000;
}
.operator:hover { background-color: #ffd180; }

.equal {
    background-color: #03a9f4; /* Blue */
    color: #fff;
    font-size: 1.3em;
}
.equal:hover { background-color: #0288d1; }

.backspace {
    background-color: #78909c; /* Blue-grey */
    color: #fff;
    font-size: 1.3em;
}
.backspace:hover { background-color: #607d8b; }

.clear {
    background-color: #ef5350; /* Red */
    color: #fff;
    font-weight: bold;
}
.clear:hover { background-color: #e53935; }

.scientific {
    background-color: #6a1b9a; /* Purple */
    color: #fff;
}
.scientific:hover { background-color: #8e24aa; }


/* --- Grid Layout Areas --- */
.numbers {
    grid-column: 1 / span 3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(50px, auto);
    grid-gap: 8px;
}

.basic-operators {
    grid-column: 4 / span 1;
    display: grid;
    grid-auto-rows: minmax(50px, auto);
    grid-gap: 8px;
}

.scientific-functions {
    grid-column: 5 / span 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(50px, auto);
    grid-gap: 8px;
}

/* Specific button placements within .numbers */
.numbers button:nth-child(10) { grid-column: 1 / span 2; } /* Button '0' */
.numbers button:nth-child(11) { grid-column: 3 / span 1; } /* Button '.' */

.numbers .last-row-controls {
    grid-column: 1 / -1; /* Span all columns */
    display: flex;
    gap: 8px;
}
.numbers .last-row-controls button { flex: 1; } /* Make = and ⌫ fill space */

/* CE button placement */
.scientific-functions .clear { grid-column: 1 / span 2; } /* Make CE span 2 columns */


/* --- Styles for Header and Footer (Moved from inline) --- */
.header-compact {
    background-color: #3498db; /* Primary blue */
    color: white;
    padding: 10px 15px;
    text-align: center;
    border-bottom: 3px solid #2980b9; /* Darker blue border */
    flex-shrink: 0; /* Prevent header from shrinking */
    width: 100%; /* Ensure header spans full width */
    box-sizing: border-box; /* Include padding in width */
}

.header-compact-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap; /* Allow content to wrap on small screens */
}

.header-compact img {
    height: 35px;
    width: 35px;
    flex-shrink: 0;
}

.header-compact-text {
    text-align: left; /* Align text to the left */
}

.header-compact-text h1 {
    font-size: 1.3em;
    color: white;
    margin: 0 0 2px 0;
    font-weight: 600;
    line-height: 1.2;
    border-bottom: none; /* Ensure no border on H1 */
    padding-bottom: 0;
}

.header-compact-text p {
    font-size: 0.85em;
    color: yellow; /* Accent color for tagline */
    margin: 0;
    line-height: 1.2;
}

.tool-footer {
    background-color: #2c3e50; /* Dark blue-grey */
    color: #95a5a6; /* Light grey text */
    text-align: center;
    padding: 15px;
    font-size: 0.8em;
    border-top: 3px solid #3498db; /* Primary blue border */
    margin-top: auto; /* Push footer to the bottom */
    flex-shrink: 0; /* Prevent footer from shrinking */
    width: 100%; /* Ensure footer spans full width */
    box-sizing: border-box; /* Include padding in width */
}

.tool-footer-links {
    margin-bottom: 8px;
}

.tool-footer a {
    color: #bdc3c7; /* Lighter grey for links */
    margin: 0 8px;
    text-decoration: none;
}

.tool-footer a:hover {
    text-decoration: underline;
}


/* --- AdSense Section (Moved from inline) --- */
.adsense-tool {
    margin: 30px auto 20px auto; /* Centered with vertical margins */
    padding: 15px 0;
    max-width: 960px; /* Max width */
    width: 95%; /* Responsive width */
    border-top: 1px solid #333; /* Dark top border */
    text-align: center;
    min-height: 90px; /* Standard ad unit height */
    box-sizing: border-box;
    flex-shrink: 0; /* Prevent shrinking */
}

/* --- Estilos para a seção de descrição da ferramenta (Adicionado) --- */
.tool-description {
    max-width: 800px; /* Define uma largura máxima razoável */
    width: 95%; /* Garante que seja responsivo em telas menores */
    margin: 20px auto; /* Centraliza o bloco e adiciona margem superior/inferior */
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.7); /* Fundo semi-transparente escuro para contraste */
    color: #fff; /* Cor do texto branca */
    border-radius: 10px; /* Bordas arredondadas */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Sombra suave */
    line-height: 1.6; /* Melhorar legibilidade do texto */
    /* Explicitamente garantir que não tem backdrop-filter, embora só esteja no .calculator */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.tool-description h2 {
    margin-top: 0; /* Remove margem superior padrão do h2 */
    color: #3498db; /* Cor de destaque para o título */
    text-align: center; /* Centraliza o título */
    margin-bottom: 15px;
}


/* --- Responsive Adjustments --- */
@media (max-width: 600px) {
    main.tool-content > h1:first-of-type {
        font-size: 1.6em;
        padding: 8px 15px; /* Ajuste padding para telas menores */
    }

    .calculator { width: 95%; padding: 15px; }
    .buttons {
        grid-template-columns: repeat(5, 1fr); /* Adjust grid */
        grid-gap: 6px;
    }
    button { font-size: 1.1em; }
    .display { font-size: 1.6em; min-height: 60px; }
    #expression { font-size: 0.5em; height: 1.4em; line-height: 1.4em;}
    #result { font-size: 0.9em; }

    /* Adjust grid areas for 5 columns */
     .numbers { grid-column: 1 / span 3; }
     .basic-operators { grid-column: 4 / span 1; }
     .scientific-functions {
         grid-column: 5 / span 1;
         grid-template-columns: 1fr; /* Stack scientific buttons */
     }
     .scientific-functions .clear { grid-column: 1 / -1; } /* CE spans all columns in its section */
}

@media (max-width: 450px) {
     main.tool-content > h1:first-of-type {
         font-size: 1.4em;
         padding: 6px 10px; /* Ajuste padding para telas menores */
     }


    .buttons {
        grid-template-columns: repeat(4, 1fr); /* Adjust grid */
        grid-gap: 5px;
    }
    button { font-size: 1em; }
    .display { font-size: 1.5em; min-height: 55px;}
    #expression { height: 1.3em; line-height: 1.3em;}
    #result { font-size: 0.85em;}

     /* Adjust grid areas for 4 columns */
     .numbers { grid-column: 1 / span 3; }
     .basic-operators { grid-column: 4 / span 1; }
     .scientific-functions {
         grid-column: 1 / -1; /* Scientific functions below numbers/basic ops */
         grid-template-columns: repeat(4, 1fr); /* New grid for scientific */
         margin-top: 8px; /* Space above scientific row */
     }
     /* Specific placement adjustments in the new 4-column scientific grid */
     .scientific-functions .clear { grid-column: 3 / span 2; } /* CE spans two columns */
     /* Adjust other scientific buttons as needed for the 4-column layout */
     /* Example:
     .scientific-functions button:nth-child(1) { grid-column: 1 / span 1; } /* x! */
     /* .scientific-functions button:nth-child(2) { grid-column: 2 / span 1; } /* sin */
     /* etc. based on the HTML order */

     .numbers .last-row-controls { gap: 5px; }
}