/*
Theme Name: ChatKE Child
Template: twentytwentyfour
Description: Child theme for ChatKE customization
Version: 1.0
*/

/* ------------------------------
   General Layout
------------------------------ */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f0f2f5;
    color: #333;
}

/* ------------------------------
   Front Page Wrapper
------------------------------ */
.front-chatke-wrapper {
    min-height: 100vh;
}

/* Chatbox */
.chatke-box textarea {
    width: 100%;
    max-width: 95%;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #ddd;
    resize: none;
}

/* ------------------------------
   Layout Wrapper
------------------------------ */
.front-chatke-layout {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 15px;
}

.front-chatke-content {
    flex: 3;
    min-width: 300px;
}

.front-chatke-sidebar {
    flex: 1;
    min-width: 250px;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.05);
    position: sticky;
    top: 20px;
    align-self: flex-start;
}

/* Sidebar widgets */
.front-chatke-sidebar h2,
.front-chatke-sidebar h3.widget-title {
    font-size: 1.2rem;
    margin-bottom: 15px;
}

/* ------------------------------
   Single & Page Styling
------------------------------ */
.single-chatke-article,
.page-chatke-article {
    max-width: 800px;
    margin: 40px auto;
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.single-chatke-article h1,
.page-chatke-article h1 {
    font-size: 2rem;
    margin-bottom: 15px;
    text-align: center;
}

.single-chatke-article .post-thumbnail,
.page-chatke-article .post-thumbnail {
    margin-bottom: 20px;
    text-align: center;
}

.single-chatke-article .post-thumbnail img,
.page-chatke-article .post-thumbnail img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.single-chatke-article .post-meta {
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 20px;
    text-align: center;
}

.single-chatke-article .post-content,
.page-chatke-article .post-content {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #333;
}

/* ------------------------------
   Header & Logo
------------------------------ */
.site-header .custom-logo,
.site-header .site-logo img {
    max-height: 60px !important;
    width: auto !important;
    height: auto !important;
}

.site-header {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

/* ------------------------------
   Mobile Responsiveness
------------------------------ */
@media screen and (max-width: 768px) {
    .front-chatke-layout {
        flex-direction: column; /* stack on mobile */
        gap: 15px;
    }

    .front-chatke-content,
    .front-chatke-sidebar {
        width: 100%; /* full width on mobile */
    }

    form button {
        width: 100%; /* buttons stretch on mobile */
    }
}