/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* ================================
   COLOR SYSTEM – FÖRDE HAUSVERWALTUNG AKGÜL
   ================================= */
:root {
    --color-primary: #00AEB5;
    --color-secondary: #E6DED2;
    --color-dark: #3C3834;
    --color-light: #ECECEC;
    --color-accent: #00AEB5;
    --color-white: #FFFFFF;
}


/* Global text */
body {
    font-family: "Inter", sans-serif;
    color: var(--color-dark);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.65;
    background: var(--color-white);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.4;
    margin-bottom: 0.6em;
}

h1 { font-size: 48px; }
h2 { font-size: 38px; }
h3 { font-size: 30px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 18px; }

/* Responsive heading scaling */
@media (max-width: 767px) {
    h1 { font-size: 32px; }
    h2 { font-size: 28px; }
    h3 { font-size: 24px; }
}

/* Paragraph spacing */
p {
    margin-bottom: 1.2em;
}

/* ================================
   LINKS
   ================================= */
a {
    color: var(--color-primary);
    transition: 0.25s ease;
}
a:hover {
    color: var(--color-accent);
}

/* ================================
   BUTTONS (Elementor)
   ================================= */
.elementor-button {
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: 600;
    border-radius: 6px;
    padding: 14px 28px;
    transition: 0.25s ease;
    border: none;
}

.elementor-button:hover {
    background: var(--color-accent);
    color: var(--color-white);
}

/* Secondary button */
.btn-secondary,
.elementor-button.btn-secondary {
    background: var(--color-secondary);
    color: var(--color-dark);
}

.btn-secondary:hover {
    background: var(--color-accent);
    color: var(--color-white);
}

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

.section-light {
    background: var(--color-light);
}

.section-secondary {
    background: var(--color-secondary);
}

.section-dark {
    background: var(--color-dark);
    color: var(--color-white);
}
.section-dark h1,
.section-dark h2,
.section-dark h3 {
    color: var(--color-white);
}

/* ================================
   CARDS
   ================================= */

.card {
    background: var(--color-white);
    border: 1px solid var(--color-light);
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
    transition: 0.3s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 22px rgba(0,0,0,0.08);
}

/* ================================
   FORMS
   ================================= */

input, textarea, select {
    border: 1px solid var(--color-light);
    padding: 12px 14px;
    border-radius: 6px;
    width: 100%;
    font-size: 16px;
    transition: 0.25s ease;
}

input:focus, textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0,174,181,0.2);
}

button[type="submit"] {
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
    border-radius: 6px;
    padding: 14px 28px;
    border: none;
    cursor: pointer;
    transition: 0.2s ease;
}

button[type="submit"]:hover {
    background: var(--color-accent);
}


/* ================================
   NAVIGATION
   ================================= */

header, .site-header {
    background: var(--color-white);
}

.site-navigation a {
    color: var(--color-dark);
    font-weight: 500;
}
.site-navigation a:hover {
    color: var(--color-primary);
}

/* Mobile menu adjustments */
@media (max-width: 767px) {
    .site-navigation a {
        font-size: 18px;
        padding: 12px 0;
    }
	.footer-menu ul {
		flex-direction: column
	}
}