/*
Theme Name: Canyon Creek Ridge HOA
Theme URI: https://canyoncreekridge-hoa.net
Description: Custom child theme for Canyon Creek Ridge Condominiums Homeowners Association. Features a green, white, and black color scheme designed for community engagement and professional HOA management.
Author: Canyon Creek Ridge HOA
Template: twentytwentyfour
Version: 1.0.0
Text Domain: ccr-hoa
Tags: hoa, community, condominium, association, green, two-columns
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ====================================
   Color Scheme: Green, White, and Black
   ==================================== */
:root {
    /* Primary Colors */
    --ccr--color--primary: #2d5016;        /* Deep Forest Green */
    --ccr--color--secondary: #4a7c2d;      /* Medium Green */
    --ccr--color--accent: #7cb342;         /* Light Green */
    --ccr--color--dark: #1a1a1a;           /* Near Black */
    --ccr--color--light: #f5f5f5;          /* Off White */
    --ccr--color--white: #ffffff;          /* Pure White */
    
    /* Alert Colors */
    --ccr--color--emergency: #c62828;      /* Emergency Red */
    --ccr--color--warning: #f57c00;        /* Warning Orange */
    --ccr--color--success: #7cb342;        /* Success Green */
    --ccr--color--info: #1976d2;           /* Info Blue */
    
    /* Override WordPress default colors */
    --wp--preset--color--primary: var(--ccr--color--primary);
    --wp--preset--color--secondary: var(--ccr--color--secondary);
    --wp--preset--color--contrast: var(--ccr--color--dark);
    --wp--preset--color--base: var(--ccr--color--white);
}

/* ====================================
   Global Typography
   ==================================== */
body {
    color: var(--ccr--color--dark);
    background-color: var(--ccr--color--white);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ccr--color--primary);
}

a {
    color: var(--ccr--color--secondary);
    text-decoration: none;
}

a:hover {
    color: var(--ccr--color--accent);
    text-decoration: underline;
}

/* ====================================
   Header Styling
   ==================================== */
.site-header,
.wp-block-template-part header {
    background-color: var(--ccr--color--primary);
    color: var(--ccr--color--white);
    padding: 1rem 0;
}

.site-title,
.wp-block-site-title a {
    color: var(--ccr--color--white) !important;
    font-weight: 700;
    font-size: 1.5rem;
}

.site-description,
.wp-block-site-tagline {
    color: var(--ccr--color--light);
    font-size: 0.9rem;
}

/* ====================================
   Navigation Menu
   ==================================== */
.wp-block-navigation a,
.wp-block-navigation .wp-block-navigation-item a {
    color: var(--ccr--color--white);
    padding: 0.5rem 1rem;
}

.wp-block-navigation a:hover,
.wp-block-navigation .wp-block-navigation-item a:hover {
    color: var(--ccr--color--accent);
    background-color: rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

.wp-block-navigation .current-menu-item a {
    color: var(--ccr--color--accent);
    font-weight: 600;
}

/* ====================================
   Buttons and Call-to-Actions
   ==================================== */
.wp-block-button__link,
.wp-element-button,
button[type="submit"],
input[type="submit"] {
    background-color: var(--ccr--color--secondary);
    color: var(--ccr--color--white);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    background-color: var(--ccr--color--accent);
    color: var(--ccr--color--white);
}

.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent;
    color: var(--ccr--color--secondary);
    border: 2px solid var(--ccr--color--secondary);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: var(--ccr--color--secondary);
    color: var(--ccr--color--white);
}

/* ====================================
   Footer
   ==================================== */
.site-footer,
.wp-block-template-part footer {
    background-color: var(--ccr--color--dark);
    color: var(--ccr--color--light);
    padding: 2rem 0;
}

.site-footer a,
.wp-block-template-part footer a {
    color: var(--ccr--color--accent);
}

.site-footer a:hover,
.wp-block-template-part footer a:hover {
    color: var(--ccr--color--white);
}

/* ====================================
   Bulletin Board Styling
   ==================================== */
.post-type-archive-bulletin .entry,
.single-bulletin .entry {
    border-left: 4px solid var(--ccr--color--secondary);
    padding-left: 1rem;
    margin-bottom: 2rem;
}

/* Bulletin Category Specific Styling */
.bulletin-category-community-notices {
    border-left-color: var(--ccr--color--accent);
    background-color: #f0f7e8;
    padding: 1rem;
}

.bulletin-category-emergency-alerts {
    border-left-color: var(--ccr--color--emergency);
    background-color: #ffebee;
    padding: 1rem;
}

.bulletin-category-maintenance-updates {
    border-left-color: var(--ccr--color--warning);
    background-color: #fff3e0;
    padding: 1rem;
}

.bulletin-category-board-announcements {
    border-left-color: var(--ccr--color--primary);
    background-color: #e8f5e9;
    padding: 1rem;
}

.bulletin-category-event-notices {
    border-left-color: var(--ccr--color--info);
    background-color: #e3f2fd;
    padding: 1rem;
}

/* ====================================
   Forums (bbPress) Styling
   ==================================== */
#bbpress-forums {
    background-color: var(--ccr--color--white);
}

#bbpress-forums li.bbp-header {
    background-color: var(--ccr--color--primary);
    color: var(--ccr--color--white);
}

#bbpress-forums .bbp-forum-title,
#bbpress-forums .bbp-topic-title {
    color: var(--ccr--color--secondary);
}

#bbpress-forums .bbp-forum-title:hover,
#bbpress-forums .bbp-topic-title:hover {
    color: var(--ccr--color--accent);
}

#bbpress-forums li.bbp-body ul.forum,
#bbpress-forums li.bbp-body ul.topic {
    border-top: 1px solid var(--ccr--color--light);
}

.bbp-reply-header {
    background-color: var(--ccr--color--light);
}

/* ====================================
   Events Calendar Styling
   ==================================== */
.tribe-events-list .tribe-events-list-event-title a {
    color: var(--ccr--color--secondary);
}

.tribe-events-list .tribe-events-list-event-title a:hover {
    color: var(--ccr--color--accent);
}

.tribe-events-calendar td.tribe-events-present div[id*="tribe-events-daynum-"],
.tribe-events-calendar td.tribe-events-present div[id*="tribe-events-daynum-"] a {
    background-color: var(--ccr--color--accent);
    color: var(--ccr--color--white);
}

/* ====================================
   Forms Styling
   ==================================== */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select {
    border: 1px solid #ddd;
    padding: 0.5rem;
    border-radius: 4px;
    width: 100%;
    max-width: 100%;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
    border-color: var(--ccr--color--secondary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(74, 124, 45, 0.1);
}

.wpcf7-not-valid-tip {
    color: var(--ccr--color--emergency);
}

.wpcf7-response-output {
    border: 2px solid var(--ccr--color--success);
    padding: 1rem;
    margin-top: 1rem;
}

.wpcf7-response-output.wpcf7-validation-errors {
    border-color: var(--ccr--color--emergency);
}

/* ====================================
   Document Download Buttons
   ==================================== */
.download-link,
.download-button {
    background-color: var(--ccr--color--secondary);
    color: var(--ccr--color--white);
    padding: 0.5rem 1rem;
    display: inline-block;
    border-radius: 4px;
    text-decoration: none;
}

.download-link:hover,
.download-button:hover {
    background-color: var(--ccr--color--accent);
    color: var(--ccr--color--white);
    text-decoration: none;
}

/* ====================================
   Widgets and Sidebars
   ==================================== */
.announcement-widget {
    background-color: var(--ccr--color--light);
    padding: 1rem;
    margin-bottom: 1rem;
    border-left: 4px solid var(--ccr--color--secondary);
}

.announcement-title {
    color: var(--ccr--color--primary);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

/* ====================================
   Quick Links Section (Homepage)
   ==================================== */
.ccr-quick-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.ccr-quick-link {
    background-color: var(--ccr--color--light);
    padding: 1.5rem;
    text-align: center;
    border-radius: 8px;
    border-top: 4px solid var(--ccr--color--secondary);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ccr-quick-link:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-top-color: var(--ccr--color--accent);
}

.ccr-quick-link a {
    color: var(--ccr--color--primary);
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
}

/* ====================================
   Alert Boxes
   ==================================== */
.ccr-alert {
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 4px;
    border-left: 4px solid;
}

.ccr-alert-emergency {
    background-color: #ffebee;
    border-left-color: var(--ccr--color--emergency);
    color: #b71c1c;
}

.ccr-alert-warning {
    background-color: #fff3e0;
    border-left-color: var(--ccr--color--warning);
    color: #e65100;
}

.ccr-alert-success {
    background-color: #e8f5e9;
    border-left-color: var(--ccr--color--success);
    color: #2e7d32;
}

.ccr-alert-info {
    background-color: #e3f2fd;
    border-left-color: var(--ccr--color--info);
    color: #0d47a1;
}

/* ====================================
   Welcome Section (Homepage Hero)
   ==================================== */
.ccr-welcome-section {
    text-align: center;
    padding: 2rem 1.5rem;
    background-color: var(--ccr--color--light);
}

/* ====================================
   Board Member Cards (About Us)
   ==================================== */
.board-member {
    padding: 1rem;
    background-color: var(--ccr--color--light);
    border-left: 4px solid var(--ccr--color--secondary);
}

.board-member h3 {
    margin-top: 0;
    color: var(--ccr--color--primary);
}

/* ====================================
   Utility Classes
   ==================================== */
.ccr-text-primary {
    color: var(--ccr--color--primary);
}

.ccr-text-secondary {
    color: var(--ccr--color--secondary);
}

.ccr-text-accent {
    color: var(--ccr--color--accent);
}

.ccr-bg-primary {
    background-color: var(--ccr--color--primary);
    color: var(--ccr--color--white);
}

.ccr-bg-secondary {
    background-color: var(--ccr--color--secondary);
    color: var(--ccr--color--white);
}

.ccr-bg-light {
    background-color: var(--ccr--color--light);
}

/* ====================================
   Account Balance
   ==================================== */
.ccr-account-balance {
    max-width: 900px;
    margin: 0 auto;
}

.ccr-balance-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0;
}

.ccr-balance-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: var(--ccr--color--light);
    border-radius: 8px;
    padding: 1.25rem;
    border-top: 4px solid var(--ccr--color--secondary);
}

.ccr-balance-card--hoa-dues {
    border-top-color: var(--ccr--color--primary);
}

.ccr-balance-card--utilities {
    border-top-color: var(--ccr--color--info);
}

.ccr-balance-card--penalties {
    border-top-color: var(--ccr--color--warning);
}

.ccr-balance-card__icon {
    font-size: 36px;
    width: 36px;
    height: 36px;
    color: var(--ccr--color--secondary);
}

.ccr-balance-card--hoa-dues .ccr-balance-card__icon {
    color: var(--ccr--color--primary);
}

.ccr-balance-card--utilities .ccr-balance-card__icon {
    color: var(--ccr--color--info);
}

.ccr-balance-card--penalties .ccr-balance-card__icon {
    color: var(--ccr--color--warning);
}

.ccr-balance-card__content {
    display: flex;
    flex-direction: column;
}

.ccr-balance-card__label {
    font-size: 0.85rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ccr-balance-card__amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ccr--color--dark);
}

.ccr-balance-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.ccr-balance-total--owed {
    background-color: #fff3e0;
    border: 2px solid var(--ccr--color--warning);
}

.ccr-balance-total--clear {
    background-color: #e8f5e9;
    border: 2px solid var(--ccr--color--success);
}

.ccr-balance-total__label {
    font-size: 1.1rem;
    color: var(--ccr--color--dark);
}

.ccr-balance-total__amount {
    font-size: 1.5rem;
    color: var(--ccr--color--dark);
}

.ccr-transactions-wrapper {
    overflow-x: auto;
    margin: 1rem 0;
}

.ccr-transactions-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.ccr-transactions-table thead {
    background-color: var(--ccr--color--primary);
    color: var(--ccr--color--white);
}

.ccr-transactions-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

.ccr-transactions-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e0e0e0;
}

.ccr-transactions-table tbody tr:hover {
    background-color: var(--ccr--color--light);
}

.ccr-txn-status {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: capitalize;
}

.ccr-txn-status--completed {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.ccr-txn-status--pending {
    background-color: #fff3e0;
    color: #e65100;
}

.ccr-txn-status--partially-paid {
    background-color: #e3f2fd;
    color: #0d47a1;
}

.ccr-no-transactions {
    text-align: center;
    color: #666;
    padding: 2rem 0;
}

.ccr-balance-disclaimer {
    text-align: center;
    color: #888;
    font-size: 0.85rem;
    margin-top: 1.5rem;
}

/* ====================================
   Responsive Design
   ==================================== */
@media (max-width: 768px) {
    .ccr-quick-links {
        grid-template-columns: 1fr;
    }
    
    .site-title,
    .wp-block-site-title a {
        font-size: 1.2rem;
    }
    
    .wp-block-navigation a,
    .wp-block-navigation .wp-block-navigation-item a {
        padding: 0.5rem;
    }

    .ccr-balance-cards {
        grid-template-columns: 1fr;
    }

    .ccr-balance-total {
        flex-direction: column;
        text-align: center;
        gap: 0.25rem;
    }

    .ccr-transactions-table thead {
        display: none;
    }

    .ccr-transactions-table,
    .ccr-transactions-table tbody,
    .ccr-transactions-table tr,
    .ccr-transactions-table td {
        display: block;
        width: 100%;
    }

    .ccr-transactions-table tr {
        margin-bottom: 1rem;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        overflow: hidden;
    }

    .ccr-transactions-table td {
        text-align: right;
        padding: 0.5rem 1rem;
        border-bottom: 1px solid #f0f0f0;
    }

    .ccr-transactions-table td::before {
        content: attr(data-label);
        float: left;
        font-weight: 600;
        color: var(--ccr--color--primary);
    }

    .ccr-transactions-table td:last-child {
        border-bottom: none;
    }
}

/* ====================================
   Print Styles
   ==================================== */
@media print {
    .site-header,
    .site-footer,
    .wp-block-navigation,
    .ccr-quick-links {
        display: none;
    }
    
    body {
        color: #000;
        background: #fff;
    }

    .ccr-balance-card {
        border: 1px solid #ccc;
    }

    .ccr-transactions-table thead {
        background-color: #eee;
        color: #000;
    }

    .ccr-txn-status {
        border: 1px solid #999;
        background: none;
    }
}