/*
Theme Name: Fuel Form
Theme URI: https://fuelform.co.za
Author: Taun Bewsher
Version: 1.0
Text Domain: fuelform
*/

/* ==================================================
   FUEL FORM DESIGN SYSTEM
================================================== */

:root{

    --ff-green:#79C44A;
    --ff-dark-green:#4E6F31;
    --ff-yellow:#D7D13A;

    --ff-bg:#F5F4EF;
    --ff-white:#FFFFFF;

    --ff-text:#444444;
    --ff-text-light:#777777;

    --container-width:1280px;

}

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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    background:var(--ff-bg);

    color:var(--ff-text);

    font-family:'Montserrat',sans-serif;

    font-size:18px;

    line-height:1.7;

    overflow-x:hidden;
}

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

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

/* ========
container
============ */

.container{

    width:min(
        var(--container-width),
        calc(100% - 40px)
    );

    margin-inline:auto;
}

/* ==================================================
   TYPOGRAPHY
================================================== */

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

    font-family:'Oswald',sans-serif;

    color:var(--ff-dark-green);

    line-height:1.1;

    font-weight:600;
}

h1{
    font-size:72px;
}

h2{
    font-size:48px;
}

h3{
    font-size:30px;
}

h4{
    font-size:24px;
}

p{
    margin-bottom:20px;
}

strong{
    font-weight:600;
}

/* =============================
buttons
================================ */

.button,
.hero-cta{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:60px;

    padding:16px 40px;

    background:var(--ff-white);

    color:var(--ff-text);

    border-radius:18px;

    font-weight:600;

    transition:.25s;
}

.button:hover,
.hero-cta:hover{

    transform:translateY(-2px);

    box-shadow:0 5px 20px rgba(0,0,0,.12);
}


/* ==========================
   Hero Styling
========================== */

.hero-logo{

    width:320px;

    height:auto;

    margin-bottom:30px;
}

.hero{
    position:relative;
    min-height:650px;

    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
}

.hero-overlay{

    position:absolute;

    inset:0;

    display:flex;
    flex-direction:column;

    justify-content:center;

    align-items:flex-start;

    padding-left:8%;
}

.custom-logo{
    width:280px;
    height:auto;
}

.hero-cta{

    margin-top:30px;

    padding:18px 40px;

    background:#f7f5ef;

    color:#4c4c4c;

    text-decoration:none;

    border-radius:18px;

    font-family:'Montserrat',sans-serif;

    font-weight:600;

    transition:.3s;
}

.hero-cta:hover{
    transform:translateY(-2px);
}

.feature-cards{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:40px;

    max-width:1200px;

    margin:50px auto;

    padding:0 30px;
}

.feature-card{

    text-decoration:none;

    text-align:center;

    color:#4e6f31;
}

.feature-card img{

    width:120px;
    height:120px;

    border-radius:50%;

    object-fit:cover;

    display:block;

    margin:0 auto 15px;
}

.feature-card h3{

    font-family:'Oswald',sans-serif;

    letter-spacing:2px;

    font-size:24px;
}

@media(max-width:768px){

    .hero{

        min-height:500px;
    }

    .hero-overlay{

        align-items:center;

        text-align:center;

        padding:20px;
    }

    .custom-logo{

        width:180px;
    }

    .feature-cards{

        grid-template-columns:1fr 1fr;
    }
}

.hero-logo{

    width:220px;
}

@media(max-width:480px){

    .feature-cards{

        grid-template-columns:1fr;
    }
}

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

.site-header{

    background:var(--ff-bg);

    border-bottom:1px solid rgba(0,0,0,.08);

    padding:20px 0;
}

.header-inner{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;
}

.header-logo img{

    width:55px;

    height:auto;
}

.main-nav ul{

    display:flex;

    gap:40px;
}

.main-nav a{

    color:var(--ff-dark-green);

    font-size:15px;

    font-weight:500;

    text-transform:uppercase;

    letter-spacing:1px;
}

.main-nav a:hover{

    color:var(--ff-green);
}

.header-social{

    display:flex;

    gap:15px;
}

.header-social a{

    color:var(--ff-dark-green);

    font-size:14px;
}

/* ==================================================
   FOOTER
================================================== */

.site-footer{

    margin-top:80px;

    background:var(--ff-dark-green);

    color:white;

    padding:40px 0;
}

.site-footer p{

    margin:0;

    text-align:center;
}

/* WooCommerce */

.woocommerce,
.woocommerce-page {
    font-family: inherit;
    color: inherit;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    background: #000;
    color: #fff;
    border-radius: 4px;
    padding: 12px 24px;
    text-transform: uppercase;
}

.woocommerce ul.products li.product h2 {
    font-family: inherit;
    font-size: 1rem;
}

.woocommerce div.product .price,
.woocommerce ul.products li.product .price {
    color: inherit;
    font-weight: 600;
}

/* Add left and right spacing to standard page content */
main,
.site-main,
.page-content,
.entry-content,
.about-content,
.content-wrapper {
    padding-left: clamp(20px, 4vw, 70px);
    padding-right: clamp(20px, 4vw, 70px);
    box-sizing: border-box;
}

/* Space between page titles and the content below */
.page-title,
.entry-title,
.post-title,
h1 {
    margin-bottom: 28px;
}

/* Featured image above page/post title */
.featured-image {
    width: 100%;
    margin-bottom: 32px;
    overflow: hidden;
}

.featured-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
}

/* Spacing between title and content */
.page-title {
    margin-bottom: 28px;
}