/* =====================================================
   EVERYDAY INSIGHT
   MAIN.CSS

   Global Styles
   Typography
   Layout
   Buttons
   Cards
   Utilities

===================================================== */


/* =====================================================
   RESET
===================================================== */

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


/* =====================================================
   ROOT VARIABLES
===================================================== */

/* =====================================================
   ROOT VARIABLES
===================================================== */

:root{

    /* ==========================
       Brand Colors
    ========================== */

    --primary:#9c8061;
    --primary-dark:#7f6750;
    --primary-light:#cbb79c;

    --secondary:#4f463f;

    /* ==========================
       Background Colors
    ========================== */

    --background:#faf8f4;
    --surface:#ffffff;
    --surface-light:#fdfbf8;

    /* ==========================
       Text Colors
    ========================== */

    --text:#3d3a36;
    --text-light:#777777;
    --text-muted:#9a948c;

    /* ==========================
       Borders
    ========================== */

    --border:#ebe6df;
    --border-dark:#ddd3c7;

    /* ==========================
       Basic Colors
    ========================== */

    --white:#ffffff;
    --black:#000000;

    /* ==========================
       Shadows
    ========================== */

    --shadow-sm:0 2px 8px rgba(0,0,0,.05);

    --shadow:
        0 10px 30px rgba(0,0,0,.08);

    --shadow-lg:
        0 20px 40px rgba(0,0,0,.12);

    /* ==========================
       Border Radius
    ========================== */

    --radius-sm:10px;
    --radius:18px;
    --radius-lg:24px;

    /* ==========================
       Transition
    ========================== */

    --transition:.3s ease;

    /* ==========================
       Maximum Width
    ========================== */

    --container:1200px;

}

/* =====================================================
   BODY
===================================================== */

body{

    background:var(--background);

    color:var(--text);

    font-family:"Inter",sans-serif;

    line-height:1.7;

    font-size:16px;

}


/* =====================================================
   IMAGES
===================================================== */

img{

    max-width:100%;

    display:block;

}


/* =====================================================
   LINKS
===================================================== */

a{

    text-decoration:none;

    color:inherit;

    transition:var(--transition);

}


/* =====================================================
   HEADINGS
===================================================== */

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:"Playfair Display",serif;

    color:var(--secondary);

    line-height:1.2;

}


h1{

    font-size:3rem;

}

h2{

    font-size:2.4rem;

}

h3{

    font-size:1.4rem;

}


/* =====================================================
   PARAGRAPHS
===================================================== */

p{

    color:var(--text-light);

    line-height:1.8;

}


/* =====================================================
   LISTS
===================================================== */

ul{

    list-style:none;

}


/* =====================================================
   CONTAINER
===================================================== */

.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}


/* =====================================================
   SECTIONS
===================================================== */

section{

    padding:80px 0;

}


/* =====================================================
   SECTION HEADER
===================================================== */

.section-header{

    max-width:700px;

    margin:0 auto 60px;

    text-align:center;

}


.section-tag{

    display:inline-block;

    padding:8px 18px;

    background:var(--primary);

    color:white;

    font-size:.8rem;

    font-weight:700;

    letter-spacing:2px;

    border-radius:50px;

    margin-bottom:20px;

}


.section-header h2{

    margin-bottom:20px;

}


.section-header p{

    font-size:1.05rem;

}


/* =====================================================
   CARD
===================================================== */

.card{

    background:var(--surface);

    border-radius:var(--radius);

    overflow:hidden;

    border:1px solid var(--border);

    box-shadow:var(--shadow);

    transition:var(--transition);

}


.card:hover{

    transform:translateY(-8px);

}


/* =====================================================
   CARD IMAGE
===================================================== */

.card img{

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

}


/* =====================================================
   CARD CONTENT
===================================================== */

.card-content{

    padding:25px;

}


.card-content h3{

    margin-bottom:15px;

}


.card-content p{

    margin-bottom:20px;

}


/* =====================================================
   BUTTONS
===================================================== */

.btn-primary{

    display:inline-block;

    padding:14px 28px;

    background:var(--primary);

    color:white;

    border-radius:10px;

    font-weight:600;

    transition:var(--transition);

}


.btn-primary:hover{

    background:var(--primary-dark);

}


.btn-secondary{

    display:inline-block;

    padding:14px 28px;

    border:2px solid var(--primary);

    color:var(--primary);

    border-radius:10px;

    font-weight:600;

    transition:var(--transition);

}


.btn-secondary:hover{

    background:var(--primary);

    color:white;

}


/* =====================================================
   READ MORE LINKS
===================================================== */

.read-more{

    color:var(--primary);

    font-weight:600;

}


.read-more:hover{

    color:var(--primary-dark);

}


/* =====================================================
   GRID
===================================================== */

.grid{

    display:grid;

    gap:30px;

}


/* =====================================================
   SPACING UTILITIES
===================================================== */

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}

.text-center{

    text-align:center;

}


/* =====================================================
   SELECTION
===================================================== */

::selection{

    background:var(--primary);

    color:white;

}


/* =====================================================
   SMOOTH SCROLL
===================================================== */

html{

    scroll-behavior:smooth;

}
/* ==========================================
   SCROLL ANIMATION
========================================== */

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .7s ease,

        transform .7s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}
/* ==========================================
   FOOTER NEWSLETTER
========================================== */

.footer-newsletter-form {
    width: 100%;
    max-width: 300px;
    margin-top: 18px;
}

/* Email bar */

.footer-newsletter-form input[type="email"] {
    display: block;
    width: 100%;
    height: 46px;

    padding: 0 15px;

    background: #ffffff;
    color: #3d3a36;

    border: 1px solid #ebe6df;
    border-radius: 8px;

    font-family: "Inter", sans-serif;
    font-size: 14px;

    box-sizing: border-box;

    margin-bottom: 12px;
}

.footer-newsletter-form input[type="email"]::placeholder {
    color: #777777;
}

.footer-newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: #b08c64;
}

/* Subscribe button */

.footer-newsletter-form .footer-button {
    display: block;

    width: 100%;
    height: 44px;

    padding: 0 20px;

    background: #b08c64;
    color: #ffffff;

    border: none;
    border-radius: 10px;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
}

.footer-newsletter-form .footer-button:hover {
    opacity: 0.9;
}

/* Success / error message */

.footer-newsletter-message {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.5;
}