/*
Theme Name: Houzez Child
Theme URI: http://www.favethemes.com/
Author: Favethemes
Author URI: http://www.favethemes.com/
Description: Houzez is a premium WordPress theme for real estate agents where modern aesthetics are combined with tasteful simplicity, and where the ease of use is achieved without compromise in your ability to customise the design. Whether you are a real estate agent looking to build a website for your company or a web developer seeking a perfect WordPress theme for your next project, you are certain to appreciate the numerous features and benefits that our theme provides.
Version: 1.0
Tags: white, right-sidebar, left-sidebar, custom-colors, custom-menu, featured-images, post-formats, theme-options, translation-ready
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: houzez
Template: houzez
*/

@import url("../houzez/style.css");

#header-section {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  
}

/* === Cookie Banner Styling === */
#cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85); /* Halvgenomskinlig svart bakgrund */
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    max-width: 90%;
    width: 610px; /* Fast bredd */
    font-size: 14px;
    z-index: 9999;
}

#cookie-banner p {
    margin: 0;
}

/* Cookie Banner Buttons */
#accept-all {
    background-color: var(--theme-button-bg-color, #0073aa);
    color: var(--theme-button-text-color, white);
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 14px;
    transition: 0.3s;
}

#accept-all:hover {
    background-color: var(--theme-button-hover-color, #005f8d);
}

/* Anpassa val och Spara val */
#customize, #save-settings {
    background-color: #d3d3d3;
    color: black;
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 14px;
    transition: 0.3s;
}

#customize:hover, #save-settings:hover {
    background-color: #b0b0b0;
}

/* Cookie Settings Popup */
#cookie-settings {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    color: black;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    max-width: 90%;
    width: 500px;
    text-align: center;
    z-index: 10000;
}

/* Styling för cookie-info */
.cookie-info {
    display: block;
    font-size: 12px;
    color: #555;
    margin-top: 5px;
    line-height: 1.4;
}

/* Mobile Anpassning */
@media screen and (max-width: 850px) {
    #cookie-banner, #cookie-settings {
        width: 90%;
        flex-direction: column;
        text-align: center;
    }

    #cookie-banner button, #cookie-settings button {
        width: 100%;
    }
}

/* === Banner Styling === */
.banner-inner, .property-slider-wrap {
    clip-path: ellipse(100% 80% at 50% 20%);
}

.footer-top-wrap {
    clip-path: ellipse(100% 80% at 50% 80%);
}

.footer-copyright {
    color: #5b5b5b;
}

@media (max-width: 767px) {
    .top-banner-wrap {
        height: 350px !important;
    }
}

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

/* Hero Sektion */
.homepage-section {
    margin: 100px auto;
}

.homepage-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 100px;
    width: 100%;
    margin-bottom: 100px;
}

/* Profilbild */
.homepage-profile {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: #F3F4F6 url('https://renatum.com/wp-content/uploads/2025/02/DALL%C2%B7E-2025-02-09-13.55.42-A-realistic-photograph-of-a-lush-green-forest-with-sunlight-streaming-through-the-gaps-between-the-trees.-The-forest-floor-is-covered-in-soft-moss-and.webp') no-repeat center center;
    background-size: cover; /* Ser till att bilden täcker hela ytan */
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Textdel */
.homepage-hero-text {
    flex: 1;
    text-align: left;
}

.homepage-hero-text h1 {
    font-size: 2rem;
}

/* Responsiv anpassning för mobil */
@media screen and (max-width: 768px) {
    .homepage-hero {
        flex-direction: column;
        text-align: center;
        gap: 30px;
        margin: 50px auto;
    }

    .homepage-profile {
        width: 150px;
        height: 150px;
    }
}

/* === Grid Layout med exakt två rader === */
/* === Styling för tjänsterubrik === */
.homepage-grid-heading {
    margin: 0 auto 30px; /* Justerar avståndet till grid */
}

.homepage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Två kolumner */
    gap: 30px;
    margin-bottom: 100px;
}

/* Rad 1: Litet kort till vänster, stort till höger */
.homepage-card:nth-child(1) {
    grid-column: span 2;
}

.homepage-card:nth-child(2) {
    grid-column: span 1;
}

/* Rad 2: Stort kort till vänster, litet till höger */
.homepage-card:nth-child(3) {
    grid-column: span 1; /* Större kort tar hela vänstra sidan */
}

.homepage-card:nth-child(4) {
    grid-column: span 2; /* Mindre kort till höger */
}

.homepage-card:nth-child(1):hover, .homepage-card:nth-child(2):hover, .homepage-card:nth-child(3):hover, .homepage-card:nth-child(4):hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease-in-out;
}

/* Grundläggande kortdesign */
/* Gör kortinnehållet till en flexbox */
.homepage-card {
    display: flex;
    flex-direction: row; /* Lägger ikonen till vänster och texten till höger */
    align-items: center;
    gap: 12px; /* Mellanrum mellan ikon och text */
    padding: 20px;
    border-radius: 12px;
    text-align: left;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    min-height: 120px;
}

/* Se till att ikonen ligger till vänster */
.homepage-icon {
    font-size: 50px; /* Anpassa storlek efter behov */
    flex-shrink: 0; /* Hindrar ikonen från att krympa */
}

/* Se till att texten tar upp resterande utrymme */
.homepage-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* === Färgkategorier === */
.white { background-color: #FFFFFF; }

.white:hover { background-color: #f9f9f9; }


.homepage-card h2 {
    margin: 10px 0 0;
}
 
@media screen and (max-width: 768px) {
    .homepage-grid {
        display: grid; /* Säkerställer att grid används även på mobil */
        grid-template-columns: 1fr; /* Endast en kolumn på mobil */
    }

    .homepage-card:nth-child(1),
    .homepage-card:nth-child(2),
    .homepage-card:nth-child(3),
    .homepage-card:nth-child(4) {
        grid-column: span 1; /* Alla kort blir lika breda på mobil */
    }
} /* <-- Denna stänger media queryn korrekt */

/* Homepage information */

.homepage-information {
    margin: 100px 0;
}

/* === Featured Image Styling === */
.homepage-featured-image {
    width: 100%; /* Full bredd */
    height: 400px; /* Fast höjd */
    border-radius: 12px;
    overflow: hidden; /* Dölj bildens overflow */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Samma skuggning som korten */
}

.homepage-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ser till att bilden täcker ytan */
    display: block;
}

/* === Textsektion under bilden === */
.homepage-text-section {
    margin: 40px auto 0;
}

@media screen and (max-width: 768px) {
    .homepage-information {
    margin: 100px 0;
}
.homepage-featured-image {
    height: 200px; /* Fast höjd */
}
}

/* === Articles  === */
.homepage-articles {
    padding: 100px 20px;
}

/* === Featured  === */
.homepage-featured {
    padding: 60px 20px;
    text-align: center;
}

.homepage-featured h2 {
    margin-bottom: 10px;
}

.homepage-featured p {
    font-size: 16px;
    color: #374151;
    max-width: 700px;
    margin: 0 auto 30px;
}

/* === Grid-layout för korten === */
.homepage-featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin: 0 auto;
}

/* === Styling för varje kort === */
.homepage-featured-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    text-align: center;
    transition: transform 0.3s ease-in-out;
    overflow: hidden;
}

.homepage-featured-card:hover {
    transform: translateY(-5px);
}

.homepage-featured-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.featured-content {
    padding-top: 10px;
}

/* === Knapp för att läsa mer === */
.homepage-featured-button {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 20px;
    border-radius: 8px;
}

/* === Listingvy === */
.listing-view-switcher {
    text-align: center;
    margin: 20px 0;
}

.view-btn {
    display: inline-block;
    padding: 10px 20px;
    background: #0073aa;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    margin: 5px;
    transition: background 0.3s;
}

.view-btn.active {
    background: #005f8d;
}

.view-btn:hover {
    background: #004a70;
}


/* === HOUZEZ ELEMENTS === */

/* === Search === */
.horizontal-search-wrap .search-banner-wrap {
    border-radius: 12px;    
}

/* === Images === */
.slick-list, .img-fluid {
    border-radius: 12px;
}

/* === Property page === 
.block-wrap, .property-form-wrap {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
}

.content-wrap-style-boxed .block-wrap, .content-wrap-style-boxed .property-form-wrap {
    border: none;
}

.property-overview-data {
    padding: 30px;
}

@media screen and (max-width: 767px) {
   .block-wrap { margin: 30px 0;}
}
*/

/* === ABOUT US PAGE === */

/* === Teamsektion Styling === */
.homepage-team {
    background-color: #f4f4f4; /* Lätt grå bakgrund */
    padding: 60px 0;
    text-align: center;
}

.homepage-team h2 {
    margin-bottom: 10px;
}

.homepage-team p {
    color: #374151;
    max-width: 700px;
}

/* === Grid-layout för teammedlemmar === */
.homepage-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    max-width: 900px;
    margin: 20px 0 0;   
}

/* === Styling för varje teammedlem === */
.team-card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    cursor: pointer;
}

.team-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

/* === Profilbilder === */
.team-card img {
    width: 100%;
    max-width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 15px;
}

/* === Namn och titel === */
.team-card h3 {
    margin-bottom: 5px;
}

.team-card p {
    color: #555;
}

/* === CTA-sektion Styling === */
.homepage-cta {
    padding: 50px 20px;
    text-align: center;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin: 100px auto;
    max-width: 900px;
}

.homepage-cta h2 {
    margin-bottom: 10px;
}

.homepage-cta p {
    max-width: 600px;
    margin: 0 auto 20px;
}

/* Property Page */

.block-wrap, .property-form-wrap {
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
}

.detail-wrap {
    padding: 0;
}

.property-overview-wrap h2,
.property-detail-wrap h2,
.property-description-wrap h2,
.property-contact-agent-wrap h2,
.property-address-wrap h2 {
    font-size: 2rem;
}

.block-title-wrap {
    border: none;
    margin: 0;
    padding-bottom: 20px;
}

@media screen and (max-width: 768px) {
.block-wrap, .detail-wrap {
    padding: 30px;
    box-shadow: none;
    border-radius: 0;
    border-top: none;
}
}