/*
Theme Name: GreenMart Child
Theme URI: https://demo.thembay.com/greenmart/
Author: Thembay
Description: This is a child theme for GreenMart
Version: 1.0
Author URI: https://thembay.com/
Template: greenmart
Text Domain: greenmart-child
*/

/*  [ Add your custom css below ]
- - - - - - - - - - - - - - - - - - - - */

/* =================================================
   GOOGLE FONTS (ENTWICKLUNG)
   ================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&family=Literata:wght@400;500&display=swap');


/* =================================================
   ROOT VARIABLEN (DEUTSCH)
   ================================================= */

:root {

    /* SCHRIFTEN */
    --schrift-text: 'Manrope', sans-serif;
    --schrift-ueberschrift: 'Literata', serif;
    --schrift-marke: 'CalibanStd', sans-serif;

    /* GEWICHTE */
    --gewicht-normal: 400;
    --gewicht-mittel: 500;
    --gewicht-stark: 600;

    /* GRÖSSEN */
    --groesse-text: 17px;
    --zeilenhoehe-text: 1.6;
    --zeilenhoehe-ueberschrift: 1.2;

    --groesse-h1: 42px;
    --groesse-h2: 32px;
    --groesse-h3: 24px;
    --groesse-h4: 20px;
    --groesse-h5: 18px;
    --groesse-h6: 16px;

    /* FARBEN */
    --farbe-text: #222222;
    --farbe-primär: #7a6a9d;
    --farbe-primär-hover: #66558a;
    --farbe-link: #7a6a9d;
    --farbe-link-hover: #4e3f6f;
    --farbe-weiss: #ffffff;
    --farbe-fokus: #c9b6ff;
}


/* =================================================
   GLOBAL
   ================================================= */

html {
    font-family: var(--schrift-text);
}

body {
    font-family: inherit;
    font-size: var(--groesse-text);
    line-height: var(--zeilenhoehe-text);
    font-weight: var(--gewicht-normal);
    color: var(--farbe-text);
    margin: 0;
}


/* =================================================
   ÜBERSCHRIFTEN
   ================================================= */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--schrift-ueberschrift);
    font-weight: var(--gewicht-mittel);
    line-height: var(--zeilenhoehe-ueberschrift);
    margin-top: 0;
}

h1 { font-size: var(--groesse-h1); }
h2 { font-size: var(--groesse-h2); }
h3 { font-size: var(--groesse-h3); }
h4 { font-size: var(--groesse-h4); }
h5 { font-size: var(--groesse-h5); }
h6 { font-size: var(--groesse-h6); }


/* =================================================
   MENÜ
   ================================================= */

nav a,
.menu a {
    font-family: var(--schrift-text);
    font-weight: var(--gewicht-mittel);
    font-size: 16px;
    letter-spacing: 0.02em;
}


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

a {
    color: var(--farbe-link);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--farbe-link-hover);
    text-decoration: underline;
}

a:focus {
    outline: 3px solid var(--farbe-fokus);
    outline-offset: 3px;
}


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

button,
input[type="submit"],
.elementor-button,
.woocommerce button.button,
.woocommerce a.button {

    background-color: var(--farbe-primär);
    color: var(--farbe-weiss);

    font-family: var(--schrift-text);
    font-weight: var(--gewicht-stark);

    padding: 12px 24px;
    border-radius: 6px;
    border: none;

    transition: all 0.25s ease;
}

button:hover,
.elementor-button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover {

    background-color: var(--farbe-primär-hover);
    transform: translateY(-1px);
}

button:focus,
.elementor-button:focus,
.woocommerce button.button:focus,
.woocommerce a.button:focus {

    outline: 3px solid var(--farbe-fokus);
    outline-offset: 3px;
}


/* =================================================
   BUTTON GROSS (Hero CTA)
   ================================================= */

.button-gross {
    padding: 16px 32px;
    font-size: 18px;
    border-radius: 8px;
}


/* =================================================
   FORMULARE
   ================================================= */

input,
textarea,
select {
    font-family: var(--schrift-text);
}


/* =================================================
   WOOCOMMERCE
   ================================================= */

.woocommerce {
    font-family: var(--schrift-text);
}

.woocommerce div.product .price {
    font-size: 20px;
    font-weight: var(--gewicht-stark);
}


/* =================================================
   MARKE / LOGO
   ================================================= */

.site-logo,
.marke,
.omjaah-marke {
    font-family: var(--schrift-marke);
}


/* =================================================
   MOBILE OPTIMIERUNG
   ================================================= */

@media (max-width: 768px) {

    :root {
        --groesse-text: 16px;
        --groesse-h1: 30px;
        --groesse-h2: 24px;
    }

}