/*
Theme Name: Kids Lab
Theme URI: https://github.com/eshafik/kids-lab
Author: WebnLive
Author URI: https://webnlive.com
Description: A fun, colorful, and modern kids education theme built from the Kids Lab HTML template.
Version: 1.0.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kids-lab
*/

/* Body default font */
body {
  font-family: "Arvo", serif;
}

/* Header menu font */
header nav a,
.main-navigation a,
.site-header .menu a,
.menu-primary a {
  font-family: "Gochi Hand", cursive !important;
  color: #98785b !important;
  font-size: 31px;
  font-weight:500;
}

/* Header menu hover effect */
header nav a:hover,
.main-navigation a:hover,
.site-header .menu a:hover,
.menu-primary a:hover {
  color: #EA6B6E !important;
}

/* ===================== Comments Section Custom ===================== */

/* Comment Form Labels & Inputs */
.comment-form label {
    color: #fff !important;
}

.comment-form input,
.comment-form textarea {
    background-color: #fff;  
    color: #EA7185;            
    border: 3px solid #EA6B6E;  
    border-radius: 8px;         
    padding: 12px;              
    width: 100%;
    transition: all 0.3s ease;
}

.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: #ffd6e0;    
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

/* Submit Button */
.comment-form button,
.comment-form input[type="submit"] {
    background-color: #ffffff;       
    color: #EA7185;                  
    border: 2px solid #ffffff;       
    padding: 10px 20px;              
    border-radius: 10px;             
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

.comment-form button:hover,
.comment-form input[type="submit"]:hover {
    background-color: #EA7185;  
    color: #ffffff;             
    border-color: #ffffff;      
    box-shadow: 0 6px 15px rgba(0,0,0,0.25);
}

/* ------------------- Comment List ------------------- */
.comment-list li {
    background-color: #EA7185; 
    padding: 15px 20px;
    margin-bottom: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Nested Comments */
.comment-list li .children li {
    margin-left: 20px;
    background-color: #e57191;
}

/* Author Name & Username */
.comment-list li .comment-author,
.comment-list li .comment-author cite,
.comment-list li .fn {
    color: #ffffff !important; /* Username white */
    font-weight: bold;
}

/* Comment Metadata (date/time) */
.comment-list li .comment-meta,
.comment-list li .comment-metadata,
.comment-list li .comment-metadata a {
    color: #fce4ec !important; /* Slightly lighter for contrast */
    font-size: 0.85rem;
}

/* Comment Text */
.comment-list li .comment-content,
.comment-list li .comment-content p,
.comment-list li .comment-content a,
.comment-list li .comment-content span,
.comment-list li .comment-content h3 {
    color: #ffffff !important; /* All comment text white */
}

/* Reply Link */
.comment-list li .reply a {
    color: #ffffff !important;
    font-weight: bold;
    text-decoration: underline;
}

.comment-list li .reply a:hover {
    color: #ffd6e0 !important;
}

/* Optional: Ensure all child elements inherit color */
.comment-list li * {
    color: inherit;
}
.commentlist p{
    color: #fff;
}
.reply a{
    color: #fff;
}
.comment-respond h3{
    color: #fff;
}
.comment-notes span{
    color: #fff;
}
.post-comments h3{
    color: #fff;
}
.comment-meta a{
     color: #fff;
}
.fn{
    color: #fff; 
}
.says{
    color: #fff; 
}

/* ==========================
   Gutenberg Image Alignment Fix
   ========================== */
/* ==============================
   Gutenberg & Classic Image Alignment Fix
============================== */

/* Default block image wrapper */
.wp-block-image {
    width: 100%;
    margin: 1em 0;
}

/* Ensure figure inside block respects alignment */
.wp-block-image figure {
    display: block;        /* Block-level wrapper */
    margin: 0;             /* Reset default margin */
}

/* Left aligned image */
.wp-block-image figure.alignleft {
    float: left !important;
    margin-right: 1.5em !important;
    margin-bottom: 1em !important;
}

/* Right aligned image fix */
.wp-block-image figure.alignright {
    float: right !important;
    margin-left: 1.5em !important;
    margin-bottom: 1em !important;
    text-align: right !important; /* Add this to ensure right alignment */
    display: inline-block !important; /* Ensure it's not overridden by parent flex */
}

/* Center aligned image */
.wp-block-image figure.aligncenter {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    text-align: center !important;
}

/* Actual image inside figure */
.wp-block-image img {
    display: inline-block !important; /* Respects figure alignment */
    max-width: 100% !important;
    height: auto !important;
}

/* Clear floats after content */
.entry-content::after {
    content: "";
    display: table;
    clear: both;
}

/* Global Input & Textarea Text Color */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
    color: #222 !important;    /* Dark text color */
    background-color: #fff;    /* Optional: white background */
    border: 1px solid #ccc;    /* Optional: subtle border */
}

/* Placeholder text color */
input::placeholder,
textarea::placeholder {
    color: #888 !important;    /* Light gray for placeholder */
}