/*
Theme Name: Bountify
Theme URI: https://bountify.app/
Author: Bountify
Author URI: https://bountify.app/
Description: The custom WordPress theme for the Bountify landing page.
Version: 1.0.0
Requires at least: 5.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bountify
Tags: custom-theme, tailwindcss, landing-page, blog

This theme is based on an HTML/Tailwind prototype and adapted for WordPress.
*/
 
/* --------------------------------------------------------------------------------
WordPress Core CSS Styles
(Translated from @apply to plain CSS)
-------------------------------------------------------------------------------- */

/* == Typography == /
.entry-content h2,
.comment-content h2 {
font-family: 'Poppins', 'sans-serif';
font-size: 2.25rem; / text-4xl /
line-height: 2.5rem;
font-weight: 700; / font-bold /
color: #0F172A; / text-brand-slate-900 /
margin-top: 3rem; / mt-12 /
margin-bottom: 1.5rem; / mb-6 /
}
.entry-content h3,
.comment-content h3 {
font-family: 'Poppins', 'sans-serif';
font-size: 1.875rem; / text-3xl /
line-height: 2.25rem;
font-weight: 700; / font-bold /
color: #0F172A; / text-brand-slate-900 /
margin-top: 2.5rem; / mt-10 /
margin-bottom: 1rem; / mb-4 /
}
.entry-content h4,
.comment-content h4 {
font-family: 'Poppins', 'sans-serif';
font-size: 1.5rem; / text-2xl /
line-height: 2rem;
font-weight: 700; / font-bold /
color: #0F172A; / text-brand-slate-900 /
margin-top: 2rem; / mt-8 /
margin-bottom: 1rem; / mb-4 */
}

/* == Paragraphs and Links == /
.entry-content p,
.comment-content p,
.comment-form p {
font-family: 'Inter', 'sans-serif';
font-size: 1.125rem; / text-lg /
line-height: 1.75rem;
color: #475569; / text-brand-slate-600 /
margin-bottom: 1.5rem; / mb-6 /
line-height: 1.625; / leading-relaxed /
}
.entry-content a,
.comment-content a {
color: #E6B800; / text-brand-accent-600 /
text-decoration: underline;
text-decoration-color: #FFD700; / decoration-brand-accent-500 /
}
.entry-content a:hover,
.comment-content a:hover {
color: #FFD700; / hover:text-brand-accent-500 */
}

/* == Lists == /
.entry-content ul,
.comment-content ul {
list-style-type: disc;
list-style-position: outside;
padding-left: 2rem; / pl-8 /
margin-bottom: 1.5rem; / mb-6 /
}
.entry-content ol,
.comment-content ol {
list-style-type: decimal;
list-style-position: outside;
padding-left: 2rem; / pl-8 /
margin-bottom: 1.5rem; / mb-6 /
}
.entry-content li,
.comment-content li {
font-size: 1.125rem; / text-lg /
line-height: 1.75rem;
color: #475569; / text-brand-slate-600 /
margin-bottom: 0.5rem; / mb-2 /
line-height: 1.625; / leading-relaxed */
}

/* == Blockquotes == /
.entry-content blockquote {
border-left-width: 4px;
border-color: #FFD700; / border-brand-accent-500 /
padding-left: 1.5rem; / pl-6 /
padding-top: 0.5rem; / py-2 /
padding-bottom: 0.5rem; / py-2 /
margin-top: 2rem; / my-8 /
margin-bottom: 2rem; / my-8 /
font-style: italic;
}
.entry-content blockquote p {
font-size: 1.25rem; / text-xl /
line-height: 1.75rem;
font-weight: 500; / font-medium /
color: #1E293B; / text-brand-slate-800 */
}

/* == Image Alignment == /
.alignleft {
float: left;
margin-right: 1.5rem; / mr-6 /
margin-bottom: 1rem; / mb-4 /
}
.alignright {
float: right;
margin-left: 1.5rem; / ml-6 /
margin-bottom: 1rem; / mb-4 */
}
.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

/* --------------------------------------------------------------------------------
Comment Section Styles
(Translated from @apply to plain CSS)
-------------------------------------------------------------------------------- */

/* == Main Comments Wrapper == /
.comments-area {
margin-top: 4rem; / mt-16 */
}

/* == Comments Title == /
.comments-title,
.comment-reply-title {
font-family: 'Poppins', 'sans-serif';
font-size: 1.875rem; / text-3xl /
line-height: 2.25rem;
font-weight: 700; / font-bold /
color: #0A192F; / text-brand-navy-900 /
margin-bottom: 2rem; / mb-8 /
border-bottom-width: 1px;
border-color: #E2E8F0; / border-brand-slate-200 /
padding-bottom: 1rem; / pb-4 /
}
.comment-reply-title small {
display: block;
font-size: 0.875rem; / text-sm /
line-height: 1.25rem;
font-family: 'Inter', 'sans-serif';
font-weight: 400; / font-normal /
color: #475569; / text-brand-slate-600 /
margin-top: 0.5rem; / mt-2 */
}

/* == Comment List == /
.comment-list {
list-style: none;
margin: 0;
padding: 0;
}
.comment-list > li {
margin-bottom: 2rem; / space-y-8 */
}

/* == Individual Comment == /
.comment-body {
background-color: #ffffff;
padding: 1.5rem; / p-6 /
border-radius: 0.5rem; / rounded-lg /
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); / shadow-md */
position: relative;
}

/* == Comment Author/Avatar == /
.comment-author .avatar {
border-radius: 9999px; / rounded-full /
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); / shadow-sm /
float: left;
margin-right: 1rem; / mr-4 /
}
.comment-author .fn {
font-family: 'Poppins', 'sans-serif';
font-weight: 700; / font-bold /
font-size: 1.125rem; / text-lg /
line-height: 1.75rem;
color: #0A192F; / text-brand-navy-900 */
font-style: normal;
}

/* == Comment Meta (Date/Time) == /
.comment-meta {
font-size: 0.875rem; / text-sm /
line-height: 1.25rem;
color: #475569; / text-brand-slate-600 /
font-family: 'Inter', 'sans-serif';
margin-bottom: 1rem; / mb-4 /
}
.comment-meta a {
color: #475569; / text-brand-slate-600 */
text-decoration: none;
}
.comment-meta a:hover {
text-decoration: underline;
}

/* == Comment Content == /
.comment-content {
font-family: 'Inter', 'sans-serif';
color: #475569; / text-brand-slate-600 /
line-height: 1.625; / leading-relaxed /
overflow: hidden; / Clearfix for the floated avatar /
}
.comment-content p {
font-size: 1rem; / text-base */
line-height: 1.5rem;
}

/* == Reply Link == /
.reply {
font-size: 0.875rem; / text-sm /
line-height: 1.25rem;
font-family: 'Inter', 'sans-serif';
font-weight: 700; / font-bold /
}
.reply a {
color: #E6B800; / text-brand-accent-600 /
text-decoration: none;
}
.reply a:hover {
color: #FFD700; / hover:text-brand-accent-500 */
}

/* == Comment Form == /
.comment-form {
background-color: #ffffff;
padding: 2rem; / p-8 /
border-radius: 0.5rem; / rounded-lg /
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); / shadow-md /
margin-top: 3rem; / mt-12 */
}

/* == Form Fields Layout (Grid) == /
@media (min-width: 768px) {
.comment-form-author,
.comment-form-email,
.comment-form-url {
width: 33.333333%;
display: inline-block;
padding-right: 1rem; / pr-4 */
}
.comment-form-url {
padding-right: 0;
}
}

/* == Form Labels == /
.comment-form label {
display: block;
font-family: 'Inter', 'sans-serif';
font-weight: 500; / font-medium /
color: #1E293B; / text-brand-slate-800 /
margin-bottom: 0.5rem; / mb-2 /
}
.comment-form .required {
color: #EF4444; / text-red-500 /
margin-left: 0.25rem; / ml-1 */
}

/* == Form Inputs (Text, Email) == /
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
width: 100%;
padding: 0.75rem; / p-3 /
border-width: 1px;
border-color: #CBD5E1; / border-brand-slate-300 /
border-radius: 0.375rem; / rounded-md /
font-family: 'Inter', 'sans-serif';
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-color: #FFD700; / ring-brand-accent-500 */
box-shadow: 0 0 0 2px var(--tw-ring-color);
border-color: transparent;
}

/* == Submit Button == /
.comment-form .submit {
background-color: #FFD700; / bg-brand-accent-500 /
color: #0A192F; / text-brand-navy-900 /
font-family: 'Inter', 'sans-serif';
font-weight: 700; / font-bold /
padding: 0.75rem 2rem; / py-3 px-8 /
border-radius: 9999px; / rounded-full /
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); / shadow-lg /
transition: all 0.3s ease;
cursor: pointer;
border: none;
}
.comment-form .submit:hover {
background-color: #E6B800; / hover:bg-brand-accent-600 /
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); / hover:shadow-xl /
transform: translateY(-2px); / hover:-translate-y-0.5 */
}

/* == "Logged in as" Text == /
.logged-in-as {
font-family: 'Inter', 'sans-serif';
font-size: 0.875rem; / text-sm /
line-height: 1.25rem;
color: #475569; / text-brand-slate-600 /
margin-bottom: 1rem; / mb-4 /
}
.logged-in-as a {
color: #E6B800; / text-brand-accent-600 /
}
.logged-in-as a:hover {
color: #FFD700; / hover:text-brand-accent-500 */
}