/*!
Theme Name: lightshadestudioworks
Theme URI: https://opencollective.com/lightshadestudioworks
Author: Najubudeen
Author URI: https://www.najubudeen.com
Description: Donate: https://opencollective.com/lightshadestudioworks. Learn: https://lightshadestudioworks.me/. lightshadestudioworks is the definitive WordPress boilerplate starter theme. I've carefully constructed the most clean and minimalist theme possible for designers and developers to use as a base to build websites for clients or to build completely custom themes from scratch. Clean, simple, unstyled, semi-minified, unformatted, and valid code, SEO-friendly, jQuery-enabled, no programmer comments, standardized and as white label as possible, and most importantly, the CSS is reset for cross-browser-compatability, with no intrusive visual CSS styles added whatsoever. A perfect skeleton theme. For support and suggestions, go to: https://github.com/webguyio/lightshadestudioworks/issues. Thank you.
Tags: lightshadestudioworks
Version: 2026
Requires at least: 5.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: lightshadestudioworks

lightshadestudioworks WordPress Theme 2011-2026
lightshadestudioworks is distributed under the terms of the GNU GPL
*/

/* Add this to your CSS file to capture raw WordPress Comments output */
.post-comments-wrapper #commentform {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.post-comments-wrapper #commentform textarea, 
.post-comments-wrapper #commentform input[type="text"], 
.post-comments-wrapper #commentform input[type="email"] {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.75rem;
    background-color: #f8fafc;
}
.post-comments-wrapper #commentform input[type="submit"] {
    background-color: #4f46e5;
    color: white;
    font-weight: 600;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    cursor: pointer;
    align-self: flex-start;
}

/* comments section */
/* ==========================================================================
   Aesthetic WordPress Tailwind Comments Restyling
   ========================================================================== */

/* 1. Hide the ugly default redundant header title */
.post-comments-wrapper #comments {
    display: none;
}

/* 2. Style the Comment List Container */
.post-comments-wrapper .commentlist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* 3. Modern Threading & Nesting Setup */
.post-comments-wrapper .commentlist .children {
    list-style: none;
    margin-left: 1rem; /* Indentation for replies */
    padding-left: 1rem;
    border-left: 2px solid #e2e8f0; /* Indigo/Slate visual thread line */
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .post-comments-wrapper .commentlist .children {
        margin-left: 2.5rem;
    }
}

/* 4. Elegant Comment Card Box Layout */
.post-comments-wrapper .comment-body {
    position: relative;
    background-color: #f8fafc; /* bg-slate-50 */
    border: 1px solid #f1f5f9; /* border-slate-100 */
    padding: 1.25rem;
    border-radius: 1rem;
}

/* 5. Clean Meta & Author Layout */
.post-comments-wrapper .comment-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

@media (min-width: 480px) {
    .post-comments-wrapper .comment-meta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.post-comments-wrapper .comment-author {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.post-comments-wrapper .comment-author .avatar {
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 9999px;
    object-cover: cover;
    background-color: #e2e8f0;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.post-comments-wrapper .comment-author .fn, 
.post-comments-wrapper .comment-author .fn a {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0f172a; /* text-slate-900 */
    text-decoration: none;
}

.post-comments-wrapper .comment-author .says {
    display: none; /* Hide default "says:" plain text */
}

.post-comments-wrapper .comment-metadata a {
    font-size: 0.75rem;
    color: #64748b; /* text-slate-500 */
    text-decoration: none;
}

/* Highlight style specifically if author is the blog writer */
.post-comments-wrapper .bypostauthor > .comment-body {
    border-color: #e0e7ff; /* border-indigo-100 */
    background-color: #f5f3ff/40; /* Indigo ambient accent background */
}

/* 6. Typography Content Styling inside a comment */
.post-comments-wrapper .comment-content p {
    font-size: 0.9375rem;
    line-height: 1.625;
    color: #334155; /* text-slate-700 */
    margin: 0;
}

/* 7. Action reply link button action matching tailwind look */
.post-comments-wrapper .reply {
    margin-top: 0.75rem;
    display: flex;
    justify-content: flex-end;
}

.post-comments-wrapper .comment-reply-link {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #4f46e5; /* text-indigo-600 */
    background-color: #ffffff;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    transition: all 0.2s;
}

.post-comments-wrapper .comment-reply-link:hover {
    background-color: #eef2ff;
    border-color: #c7d2fe;
}

/* 8. Restyling the 'Leave a Reply' Form Elements */
.post-comments-wrapper .comment-respond {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px dashed #e2e8f0;
}

.post-comments-wrapper .comment-reply-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.025em;
    margin-bottom: 1.25rem;
}

.post-comments-wrapper .comment-reply-title a {
    font-size: 0.75rem;
    color: #ef4444; /* Cancel reply color */
    margin-left: 0.5rem;
}

.post-comments-wrapper #commentform {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.post-comments-wrapper .logged-in-as {
    font-size: 0.8125rem;
    color: #64748b;
}

.post-comments-wrapper .logged-in-as a {
    color: #4f46e5;
    font-weight: 600;
}

.post-comments-wrapper .comment-form-comment {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.post-comments-wrapper .comment-form-comment label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
}

/* Style fields and textareas cleanly to respond to focus states */
.post-comments-wrapper #commentform textarea,
.post-comments-wrapper #commentform input[type="text"],
.post-comments-wrapper #commentform input[type="email"] {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    color: #0f172a;
    outline: none;
    transition: all 0.2s;
}

.post-comments-wrapper #commentform textarea:focus,
.post-comments-wrapper #commentform input[type="text"]:focus,
.post-comments-wrapper #commentform input[type="email"]:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Submit Action Button styling */
.post-comments-wrapper #commentform .submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #4f46e5; /* bg-indigo-600 */
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.625rem 1.25rem;
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
    align-self: flex-start;
}

.post-comments-wrapper #commentform .submit:hover {
    background-color: #4338ca;
}

/* contact form7 styles... */
/* Style all text, email, and textarea fields */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    border: 2px solid #e0e0e0; /* Light gray border */
    border-radius: 8px;        /* Rounded corners */
    background-color: #f9f9f9;
    transition: all 0.3s ease; /* Smooth hover/focus effect */
    font-size: 16px;           /* Prevents iOS zoom */
}

/* Add an aesthetic glow/color when the user clicks a field */
.wpcf7 input:focus,
.wpcf7 textarea:focus {
    border-color: #0073e6;     /* Change to your brand color */
    background-color: #ffffff;
    outline: none;
    box-shadow: 0 0 8px rgba(0, 115, 230, 0.2);
}

/* Style the Submit button to pop */
.wpcf7 input[type="submit"] {
    background-color: #0073e6;
    color: #ffffff;
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s;
}

.wpcf7 input[type="submit"]:hover {
    background-color: #005bb5;
}

/* Only apply transparency if the 'none' effect is explicitly selected */
.btn-effect-none .wp-block-button__link {
    background-color: transparent !important;
    background-image: none !important;
    border:none !important;
}

.btn-effect-none .wp-block-button__link:hover {
    background-color: transparent !important;
    border: none !important;
}