@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
:root{
	--primary: #094325;
	--secondery: #f0e0bc;
	--lightGreen: #306419;
	--lightWhite: #fcedb5;
	--white: #ffffff;
	--black: #000000;
}
/*Start of Categories=======================================================*/
.category-tree a{
	color: var(--lightGreen) !important;
	text-decoration: none;
}
.category-tree a:hover{
	text-decoration: underline;
}
/* Container styled as a vertical unordered list stack */
.category-pills {
    display: flex;
    flex-direction: column; /* Stacks items vertically like a list */
    gap: 10px;              /* Spacing between list items */
    padding: 0;
    margin: 20px 0;
}
/* Individual list item style */
.category-pill {
    display: block;
    position: relative;
    padding-left: 20px;     /* Leaves space for the custom bullet point */
    font-size: 0.95rem;
    color: var(--white);         /* List text color */
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.2s ease;
	font-size: 16px;
}
/* Standard square or circle bullet point simulation */
.category-pill::before {
    content: "-";           /* You can change this to "▪" for a square bullet */
    position: absolute;
    left: 0;
    top: 0;
    color: var(--white);         /* Color of the bullet point (WordPress Blue) */
    font-size: 1.2rem;      /* Make the bullet point stand out slightly */
    line-height: 1.1;
}
/* Hover effect on list items */
.category-pill:hover {
    color: #0073aa;         /* Changes text color on hover */
    text-decoration: underline;
}
/*End of Categories=======================================================*/
/*Start of Tags===========================================================*/
/* Container reset and layout */
.article-tags {
    margin: 20px 0;
}
/* Remove default list styling and display items horizontally */
.custom-tag-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap; /* Allows buttons to wrap to the next line on mobile */
    gap: 8px;       /* Even spacing between the buttons */
}
/* Individual list item */
.custom-tag-list li {
    margin: 0;
    padding: 0;
}
/* The tag button itself */
.tag-item {
    display: inline-block;
    box-sizing: border-box;
    border: none;
    border-radius: 25px;
    padding: 10px 20px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    color: var(--primary);
    background-color: var(--lightWhite);
    transition: all 0.2s ease, color 0.2s ease;
}
/* Button Hover State */
.tag-item:hover {
    color: var(--primary);
    background-color: var(--secondery);
}
/* Active / Pressed state */
.tag-item:active {
    transform: translateY(0);
}
/*End of Tags===========================================================*/
/*Start of Comments=====================================================*/
#comments a {
	color: var(--lightGreen);
}
#comments a:hover {
	color: var(--primary);
}
.comments-area {
    margin: 40px 0;
}
/* Section Title */
.comments-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 24px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e9ecef;
}
/* Comment Thread List Wrapper */
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
/* Individual Comment Container */
.comment-list .comment {
    background-color: #f8f9fa; /* Matches standard light container */
    border: 1px solid #e9ecef; /* Same subtle border as the tags */
    border-radius: 6px;        /* Soft modern rounded corners */
    padding: 20px;
    transition: all 0.2s ease-in-out;
}
/* Subtle elevation when interacting with a comment card */
.comment-list .comment:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
/* Nested Reply Indentation (Hierarchical Separation) */
.comment-list .children {
    list-style: none;
    padding-left: 30px; /* Indent replies */
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-left: 2px solid #dee2e6; /* Vertical line linking responses */
}
/* Comment Header Elements (Avatar + Author Info) */
.comment-body {
    position: relative;
}
.comment-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
}
.comment-meta .avatar {
    border-radius: 50%; /* Perfect circular avatar framework */
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.comment-author .fn {
    font-weight: 600;
    color: #212529; /* Dark contrast text */
    font-style: normal;
}
.comment-metadata a {
    font-size: 0.8rem;
    color: #6c757d;
    text-decoration: none;
}
.comment-metadata a:hover {
    color: var(--primary);
    text-decoration: underline;
}
/* Comment Content Output text */
.comment-content {
    font-size: 0.95rem;
    color: #343a40;
    line-height: 1.6;
}
.comment-content p:last-child {
    margin-bottom: 0;
}
/* Reply Action Button - Custom styled like your Tag Buttons */
.reply a {
    display: inline-block;
    box-sizing: border-box;
    border: none;
    border-radius: 25px;
    padding: 10px 20px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    color: var(--primary);
    background-color: var(--lightWhite);
    transition: all 0.2s ease, color 0.2s ease;
}
.reply a:hover {
    color: var(--primary);
    background-color: var(--secondery);
}
.reply a:active {
    transform: translateY(0);
}
#respond {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 24px;
}
.comment-reply-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--black);
    margin-top: 0;
    margin-bottom: 20px;
}
.comment-reply-link {
    display: inline-block;
    box-sizing: border-box;
    border: none;
    border-radius: 25px;
    padding: 10px 20px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    color: var(--primary);
    background-color: var(--lightWhite);
    transition: all 0.2s ease, color 0.2s ease;
}
.comment-reply-link:hover {
	color: var(--primary);
    background-color: var(--secondery);
}
.comment-reply-link::active {
    transform: translateY(0);
}
/* Form Input Field Framework adjustments */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: #ffffff;
    font-size: 0.95rem;
    color: #212529;
    margin-bottom: 15px;
    box-sizing: border-box;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
/* Active focus ring effect matching standard web inputs */
.comment-form input:focus,
.comment-form textarea:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
/* Main Form Submission Button (Matches dark variant tag hover button) */
.comment-form input[type="submit"] {
    display: inline-block;
    box-sizing: border-box;
    border: none;
    border-radius: 25px;
    padding: 10px 20px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    color: var(--primary);
    background-color: var(--lightWhite);
    transition: all 0.2s ease, color 0.2s ease;
}
.comment-form input[type="submit"]:hover {
    color: var(--primary);
    background-color: var(--secondery);
}
.comment-form input[type="submit"]:active {
    transform: translateY(0);
}
/* Closed comment alert banner status */
.no-comments {
    color: var(--white);
    font-style: italic;
    opacity: 0.8;
}
.logged-in-as, .comment-form-comment label, .says, .commentmetadata a{
	color: var(--black) !important;
}
.commentmetadata ~ p{
	color: var(--lightGreen) !important;
}
/*End of Comments=======================================================*/
/*Start of Archive.php==================================================*/
.post-meta a{
    color: var(--lightGreen);
    text-decoration: none;
}
.post-meta a:hover{
    text-decoration: underline;
}
/*End of Archive.php====================================================*/