/* Global */
* {
    box-sizing: border-box;
}

:root {
    --background-color: #D8D5C1;
    --secondary-background: #E6E2CC;
    --text-color: #262727;
    --primary-color: #13741D;
    --secondary-color: #295A2C;
    --input-background: #F2EFDA;
    --borders: #cbc59b;
    --focus-color: #95916c;
}

/* Typography */
body {
    font-family: arial, sans-serif;
    line-height: 1.5;
    background-color: var(--background-color);
    color: var(--text-color);
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.25rem;
}


/* Page Layout */
.container {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}

.calculator-layout { 
    display: flex;
    gap: 30px;
}

#calculator-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    flex: 2;
}



/* Forms */
.input-group {
    padding: 20px;
    margin: 0;
    border: 2px solid var(--borders);
    background-color: var(--secondary-background);
}

.input-group:last-of-type {
    grid-column: 1 / -1;
}

label {
    display: block;
}

input {
    display: block;
    width: 100%;
    margin-bottom: 15px;
    padding: 6px;
    background-color: var(--input-background);
    border: 1px solid var(--borders);
    border-radius: 5px;
}

input:focus {
    border-color: var(--focus-color);
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

#calculate-button {
    grid-column: 1 / -1;
}

/* Buttons */
button {
    cursor: pointer;
    background-color: var(--primary-color);
    color: var(--background-color);
    border: 2px solid var(--secondary-color);
    padding: 10px 15px;
    font-size: 1.125rem;
}

button:not(:disabled):hover {
    background-color: var(--secondary-color);
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Results */
.results {
    flex: 1;
    padding: 20px;
    border: 1px solid var(--secondary-color);
    background-color: var(--secondary-background);
    align-self: flex-start;
}

.result-row {
    display: flex;
    justify-content: space-between;
}

#true-cost {
    color: var(--secondary-color);
}

#selling-price {
    color: var(--primary-color);
    font-size: 1.25rem;
}

.important-result {
    font-weight: bold;
}

.main-result {
    font-weight: bold;
    font-size: 1.125rem;
    margin-top: 30px;
    align-items: baseline;
}


.profitability {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 3px solid var(--secondary-color);
}

.profitability-content {
    max-width: 700px;
}

#profitability-form {
    display: flex;
    gap: 20px;
    align-items: flex-end;
}

.profitability-input input{
    margin-bottom: 0;
}
.profitability-input {
    flex: 3;
}
#check-profitability-button {
    flex: 1;
}

.profitability .result-row{
    max-width: 200px;
    font-weight: bold;
}

.positive-result {
    color: var(--primary-color);
}

.negative-result {
    color: red;
}


/* CTA */
.feedback-cta {
    margin-top: 50px;
    padding-top: 30px;
    padding-bottom: 30px;
    border-top: 3px solid var(--secondary-color);
}

#tally-link {
    font-size: 1.125rem;
    color: var(--primary-color);
}


/* Responsive Styles */
@media (max-width: 950px) {
    .calculator-layout {
        flex-direction: column;
    }
}

@media (max-width: 750px) {
    #calculator-form {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 720px) {
    #profitability-form {
        flex-direction: column;
        align-items: stretch;
    }
}





/* =========================
   Homepage
   ========================= */

/* Header */

.header {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 0;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header > a {
    color: var(--text-color);
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
}

.header ul,
footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.header nav a {
    color: var(--primary-color);
    font-weight: bold;
    text-decoration: none;
}


/* Hero */

#hero-section {
    width: 90%;
    max-width: 800px;
    margin: 80px auto;
    text-align: center;
}

#hero-section h1 {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

#hero-section p {
    max-width: 600px;
    margin: 0 auto 30px;
    font-size: 1.125rem;
}

#hero-section a {
    display: inline-block;

    padding: 12px 20px;
    background-color: var(--primary-color);
    border: 2px solid var(--secondary-color);
    border-radius: 5px;

    color: var(--background-color);
    font-weight: bold;
    text-decoration: none;
}

#hero-section a:hover {
    background-color: var(--secondary-color);
}


/* Benefits */

#benefits {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto 80px;
}

.benefits-heading {
    max-width: 650px;
    margin: 0 auto 35px;
    text-align: center;
}

.benefits-heading h2 {
    margin-bottom: 10px;
    font-size: 1.75rem;
}

.benefits-heading p {
    margin: 0;
    line-height: 1.6;
}

.benefits-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.benefit-card {
    padding: 25px;
    background-color: var(--secondary-background);
    border: 1px solid var(--borders);
    border-radius: 5px;
}

.benefit-number {
    margin: 0 0 15px;
    color: var(--primary-color);
    font-size: 0.875rem;
    font-weight: bold;
}

.benefit-card h3 {
    margin: 0 0 15px;
    color: var(--secondary-color);
}

.benefit-card p:last-child {
    margin-bottom: 0;
}

.benefit-card span {
    font-weight: bold;
}

@media (max-width: 750px) {
    .benefits-container {
        grid-template-columns: 1fr;
    }
}


/* Footer */

footer {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 25px 0;

    border-top: 2px solid var(--secondary-color);
}

footer ul {
    display: flex;
    justify-content: center;
    gap: 30px;
}

footer a {
    color: var(--text-color);
    text-decoration: none;
}

footer a:hover,
.header nav a:hover {
    text-decoration: underline;
}


/* Homepage responsive styles */

@media (max-width: 750px) {
    #hero-section {
        margin: 50px auto;
    }

    #hero-section h1 {
        font-size: 2rem;
    }

    .benefits-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 500px) {
    

    footer ul {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
}