/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Description: Child theme for Astra
Author: Your Name
Author URI: https://example.com
Template: astra
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
*/

/* =========== CUSTOM UTILITY CLASSES (matching index.html) =========== */
/* These replace Tailwind CDN for critical visual styles.
   Tailwind CDN still handles layout (grid, flex, spacing, sizing). */

/* --- Custom Colors: Primary --- */
.bg-primary-50  { background-color: #eef5ff; }
.bg-primary-100 { background-color: #d9e8ff; }
.bg-primary-600 { background-color: #1a4ff5; }
.bg-primary-700 { background-color: #133ae1; }
.bg-primary-800 { background-color: #1630b6; }
.text-primary-500 { color: #3371ff; }
.text-primary-600 { color: #1a4ff5; }
.text-primary-700 { color: #133ae1; }
.border-primary-100 { border-color: #d9e8ff; }
.border-primary-500 { border-color: #3371ff; }

/* --- Custom Colors: Navy --- */
.bg-navy-900 { background-color: #0a1929; }
.text-navy-400 { color: #627d98; }
.text-navy-500 { color: #486581; }
.text-navy-600 { color: #334e68; }
.text-navy-700 { color: #243b53; }
.text-navy-800 { color: #102a43; }
.text-navy-900 { color: #0a1929; }
.border-navy-100 { border-color: #d9e2ec; }
.border-navy-200 { border-color: #b6c4d6; }

/* --- Custom Colors: Accent --- */
.bg-accent-100 { background-color: #ffeed4; }
.bg-accent-200 { background-color: #ffd9a8; }
.bg-accent-400 { background-color: #ff9838; }
.bg-accent-500 { background-color: #ff7a11; }
.bg-accent-600 { background-color: #f05e07; }
.text-accent-400 { color: #ff9838; }
.text-accent-500 { color: #ff7a11; }
.text-accent-600 { color: #f05e07; }
.border-accent-200 { border-color: #ffd9a8; }
.border-accent-400 { border-color: #ff9838; }
.border-accent-500 { border-color: #ff7a11; }

/* --- White with opacity --- */
.bg-white\/10  { background-color: rgba(255,255,255,0.1); }
.bg-white\/20  { background-color: rgba(255,255,255,0.2); }
.bg-white\/60  { background-color: rgba(255,255,255,0.6); }
.bg-black\/50  { background-color: rgba(0,0,0,0.5); }
.border-white\/10 { border-color: rgba(255,255,255,0.1); }
.border-white\/20 { border-color: rgba(255,255,255,0.2); }
.text-white\/40  { color: rgba(255,255,255,0.4); }
.text-white\/60  { color: rgba(255,255,255,0.6); }
.text-white\/70  { color: rgba(255,255,255,0.7); }
.text-white\/80  { color: rgba(255,255,255,0.8); }
.text-white\/90  { color: rgba(255,255,255,0.9); }

/* --- Standard Colors --- */
.bg-white   { background-color: #fff; }
.bg-gray-50 { background-color: #f9fafb; }
.bg-gray-100 { background-color: #f3f4f6; }
.text-white { color: #fff; }

/* --- Colored backgrounds --- */
.bg-red-50   { background-color: #fef2f2; }
.bg-red-100  { background-color: #fee2e2; }
.bg-red-200  { background-color: #fecaca; }
.bg-blue-50  { background-color: #eff6ff; }
.bg-blue-100 { background-color: #dbeafe; }
.bg-blue-200 { background-color: #bfdbfe; }
.bg-green-50   { background-color: #f0fdf4; }
.bg-green-100  { background-color: #dcfce7; }
.bg-green-200  { background-color: #bbf7d0; }
.bg-purple-50  { background-color: #faf5ff; }
.bg-purple-100 { background-color: #f3e8ff; }
.bg-purple-200 { background-color: #e9d5ff; }
.bg-pink-100   { background-color: #fce7f3; }
.bg-pink-200   { background-color: #fbcfe8; }
.bg-orange-100 { background-color: #ffedd5; }
.bg-orange-200 { background-color: #fed7aa; }
.bg-emerald-100 { background-color: #d1fae5; }
.bg-emerald-200 { background-color: #a7f3d0; }
.bg-yellow-100 { background-color: #fef9c3; }
.bg-yellow-200 { background-color: #fef08a; }
.bg-indigo-100 { background-color: #e0e7ff; }
.bg-indigo-200 { background-color: #c7d2fe; }
.bg-teal-100 { background-color: #ccfbf1; }
.bg-teal-200 { background-color: #99f6e4; }

/* --- Colored text --- */
.text-red-500    { color: #ef4444; }
.text-blue-500   { color: #3b82f6; }
.text-blue-600   { color: #2563eb; }
.text-green-500  { color: #22c55e; }
.text-green-600  { color: #16a34a; }
.text-purple-500 { color: #a855f7; }
.text-purple-600 { color: #9333ea; }
.text-pink-600   { color: #db2777; }
.text-orange-600 { color: #ea580c; }
.text-emerald-600 { color: #059669; }
.text-yellow-600 { color: #ca8a04; }
.text-indigo-600 { color: #4f46e5; }
.text-teal-600   { color: #0d9488; }

/* --- Hero gradient (used in hero widget) --- */
.hero-gradient {
    background: linear-gradient(135deg, rgba(10,25,41,0.92) 0%, rgba(20,29,87,0.85) 50%, rgba(10,25,41,0.9) 100%) !important;
}

/* Stat & CTA section backgrounds */
.stat-card {
    background: linear-gradient(135deg, #102a43 0%, #1a4ff5 100%);
}
.cta-section {
    background: linear-gradient(135deg, #102a43 0%, #141d57 50%, #182d8f 100%);
}

/* --- Shadows with custom colors --- */
.shadow-accent-500\/30 {
    box-shadow: 0 10px 15px -3px rgba(255,122,17,0.3), 0 4px 6px -4px rgba(255,122,17,0.3);
}
.shadow-xl.shadow-accent-500\/30 {
    box-shadow: 0 20px 25px -5px rgba(255,122,17,0.3), 0 8px 10px -6px rgba(255,122,17,0.3);
}
.shadow-primary-700\/30 {
    box-shadow: 0 10px 15px -3px rgba(19,58,225,0.3), 0 4px 6px -4px rgba(19,58,225,0.3);
}

/* --- Font family --- */
.font-display { font-family: 'Playfair Display', serif; }

/* --- Text gradient --- */
.text-gradient {
    background: linear-gradient(135deg, #ff7a11, #ff9838);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Layout --- */
html { scroll-behavior: smooth; }
.card-hover { transition: all .3s ease; }
.card-hover:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }
.mobile-menu { transform: translateX(100%); transition: transform .3s ease; }
.mobile-menu.open { transform: translateX(0); }
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease; opacity: 0; }
.faq-answer.open { max-height: 400px; opacity: 1; }
.faq-item .faq-toggle svg { transition: transform 0.4s ease; }
.faq-item.active .faq-toggle svg { transform: rotate(180deg); }

/* ============ BUTTON STYLES ============ */
/* Override Astra global button CSS. These use element selectors for higher specificity. */

a.bg-accent-500,
button.bg-accent-500,
div.bg-accent-500 {
    background-color: #ff7a11 !important;
    color: #fff !important;
    border-radius: 9999px !important;
    border: none !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    transition: all 0.15s ease !important;
}
a.bg-accent-500,
button.bg-accent-500 {
    padding: 1rem 2rem !important;
    box-shadow: 0 20px 25px -5px rgba(255,122,17,0.3), 0 8px 10px -6px rgba(255,122,17,0.3) !important;
}
a.bg-accent-500:hover,
button.bg-accent-500:hover {
    background-color: #f05e07 !important;
}

/* --- Accent Orange Small (Header + Membership) --- */
a.px-5.bg-accent-500 {
    padding: 0.625rem 1.25rem !important;
    font-size: 0.875rem !important;
}

/* --- Primary Blue --- */
a.bg-primary-700,
button.bg-primary-700 {
    background-color: #133ae1 !important;
    color: #fff !important;
    padding: 0.875rem 2rem !important;
    border-radius: 9999px !important;
    border: none !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    box-shadow: 0 10px 15px -3px rgba(19,58,225,0.3), 0 4px 6px -4px rgba(19,58,225,0.3) !important;
    transition: all 0.15s ease !important;
}
a.bg-primary-700:hover,
button.bg-primary-700:hover {
    background-color: #1630b6 !important;
}

/* --- Ghost/Outline buttons (not social icons) --- */
a.bg-white\/10:not(.pjhiro-social-icon) {
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
    padding: 1rem 2rem !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    backdrop-filter: blur(4px) !important;
    transition: all 0.15s ease !important;
}
a.bg-white\/10:not(.pjhiro-social-icon):hover {
    background: rgba(255,255,255,0.2) !important;
}

/* --- Outline border --- */
a.border-white\/20 {
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
    padding: 0.875rem 2rem !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    transition: all 0.15s ease !important;
}
a.border-white\/20:hover {
    background: rgba(255,255,255,0.2) !important;
}

/* --- SVG in buttons --- */
a.inline-flex svg,
button.inline-flex svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
}

/* ============ SOCIAL ICONS ============ */
.pjhiro-social-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: opacity 0.2s ease !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
}
.pjhiro-social-icon:hover {
    opacity: 0.8 !important;
}
.pjhiro-social-icon .pjhiro-social-svg,
.pjhiro-social-icon svg {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    flex-shrink: 0 !important;
}

/* ============ FAQ TOGGLE ============ */
.faq-toggle {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    text-align: left !important;
    background: transparent !important;
    border: none !important;
    padding: 1rem !important;
    font: inherit !important;
    color: inherit !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ============ DONATION BUTTONS ============ */
.donation-btn {
    cursor: pointer !important;
    border-radius: 0.75rem !important;
    font-weight: 600 !important;
    padding: 0.75rem 1rem !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
    box-shadow: none !important;
    transition: all 0.15s ease !important;
}
.donation-btn:hover {
    background: #ff7a11 !important;
    border-color: #ff7a11 !important;
}
.donation-btn.bg-accent-500 {
    background: #ff7a11 !important;
    border-color: #ff7a11 !important;
}

/* Project thumb */
.pjhiro-project-thumb { position:relative;overflow:hidden;background-size:cover;background-position:center;background-repeat:no-repeat; }
.pjhiro-project-thumb::before { content:'';display:block;padding-bottom:100%; }

/* Gallery cards */
.pjhiro-gallery-card { position:relative;border-radius:1rem;overflow:hidden;cursor:pointer; }
.pjhiro-gallery-card::before { content:'';display:block;padding-bottom:100%; }
.pjhiro-gallery-card > * { position:absolute;inset:0; }
.pjhiro-gallery-card img { width:100%;height:100%;object-fit:cover;transition:transform 0.5s; }
.pjhiro-gallery-card:hover img { transform:scale(1.1); }
.pjhiro-gallery-card .pjhiro-gallery-overlay { display:flex;align-items:center;justify-content:center;background:rgba(20,29,87,0);transition:background 0.3s; }
.pjhiro-gallery-card:hover .pjhiro-gallery-overlay { background:rgba(20,29,87,0.6); }
.pjhiro-gallery-card .pjhiro-gallery-overlay svg { width:2.5rem;height:2.5rem;color:#fff;opacity:0;transition:all 0.3s;transform:scale(0.5); }
.pjhiro-gallery-card:hover .pjhiro-gallery-overlay svg { opacity:1;transform:scale(1); }

/* Lightbox */
.pjhiro-lightbox { display:none;position:fixed;inset:0;z-index:999999;background:rgba(0,0,0,0.9);align-items:center;justify-content:center;padding:1rem;cursor:pointer; }
.pjhiro-lightbox.active { display:flex; }
.pjhiro-lightbox img { max-width:90%;max-height:90%;border-radius:1rem;object-fit:contain;cursor:default; }
.pjhiro-lightbox-close { position:absolute;top:1rem;right:1rem;background:rgba(255,255,255,0.15);color:#fff;border:none;width:3rem;height:3rem;border-radius:50%;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s; }
.pjhiro-lightbox-close:hover { background:rgba(255,255,255,0.3); }

/* ============ CONTACT FORM 7 STYLES ============ */
.wpcf7-form {
    max-width: 800px;
    margin: 0 auto;
}

/* Desktop: 2-column grid */
@media (min-width: 768px) {
    .wpcf7-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 1.25rem;
        align-items: start;
    }
}

.wpcf7-form > p {
    margin: 0 0 1rem;
}

.wpcf7-form h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0a1929;
    margin: 1.5rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #d9e2ec;
}

.wpcf7-form h3:first-child {
    margin-top: 0;
}

@media (min-width: 768px) {
    .wpcf7-form h3 {
        grid-column: 1 / -1;
        margin: 1rem 0 0.5rem;
    }
    .wpcf7-form h3:first-child {
        margin-top: 0;
    }
    .wpcf7-form > p:has(.wpcf7-acceptance),
    .wpcf7-form > p:has(.wpcf7-checkbox) {
        grid-column: 1 / -1;
    }
    .wpcf7-form > p:has(input[type="submit"]) {
        grid-column: 1 / -1;
    }
}

.wpcf7-form label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #243b53;
}

.wpcf7-form label > br {
    display: none;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="date"],
.wpcf7-form input[type="file"],
.wpcf7-form select,
.wpcf7-form textarea {
    display: block;
    width: 100% !important;
    margin-top: 0.375rem;
    padding: 0.75rem 1rem;
    border: 1px solid #b6c4d6;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    color: #102a43;
    background: #fff;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
    line-height: 1.5;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="date"]:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
    border-color: #3371ff;
    box-shadow: 0 0 0 3px rgba(51,113,255,0.15);
}

.wpcf7-form input[type="text"]::placeholder,
.wpcf7-form input[type="email"]::placeholder,
.wpcf7-form input[type="tel"]::placeholder,
.wpcf7-form textarea::placeholder {
    color: #627d98;
}

.wpcf7-form textarea {
    min-height: 6rem;
    resize: vertical;
}

.wpcf7-form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23486581' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
    cursor: pointer;
}

.wpcf7-form input[type="file"] {
    padding: 0.5rem;
    font-size: 0.8125rem;
    color: #486581;
    cursor: pointer;
}

.wpcf7-form input[type="file"]::file-selector-button {
    padding: 0.375rem 1rem;
    border: 1px solid #b6c4d6;
    border-radius: 0.5rem;
    background: #f9fafb;
    color: #243b53;
    font-size: 0.8125rem;
    cursor: pointer;
    margin-right: 0.75rem;
    transition: background 0.15s ease;
}

.wpcf7-form input[type="file"]::file-selector-button:hover {
    background: #f3f4f6;
}

.wpcf7-form input[readonly] {
    background: #f9fafb;
    color: #486581;
    cursor: not-allowed;
}

/* Checkbox fields (acceptance & checkbox) */
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item,
.wpcf7-form .wpcf7-checkbox .wpcf7-list-item {
    margin: 0;
}

.wpcf7-form .wpcf7-acceptance .wpcf7-list-item label,
.wpcf7-form .wpcf7-checkbox .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-weight: 400;
    font-size: 0.9375rem;
    color: #243b53;
    cursor: pointer;
}

.wpcf7-form .wpcf7-acceptance input[type="checkbox"],
.wpcf7-form .wpcf7-checkbox input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
    border: 1.5px solid #b6c4d6;
    border-radius: 0.25rem;
    accent-color: #ff7a11;
}

.wpcf7-form .wpcf7-acceptance .wpcf7-list-item-label,
.wpcf7-form .wpcf7-checkbox .wpcf7-list-item-label {
    line-height: 1.5;
}

/* Submit button */
.wpcf7-form input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem 2rem;
    background: #ff7a11;
    color: #fff;
    border: none;
    border-radius: 9999px;
    font-size: 1.125rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 20px 25px -5px rgba(255,122,17,0.3), 0 8px 10px -6px rgba(255,122,17,0.3);
    transition: background 0.15s ease;
    font-family: inherit;
    line-height: 1.5;
}

.wpcf7-form input[type="submit"]:hover {
    background: #f05e07;
}

/* Error states */
.wpcf7-form .wpcf7-not-valid-tip {
    font-size: 0.8125rem;
    color: #ef4444;
    margin-top: 0.25rem;
}

.wpcf7-form .wpcf7-not-valid {
    border-color: #ef4444 !important;
}

.wpcf7-form .wpcf7-response-output {
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    margin-top: 1rem;
    text-align: center;
}

.wpcf7-form .wpcf7-validation-errors,
.wpcf7-form .wpcf7-acceptance-missing {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.wpcf7-form .wpcf7-mail-sent-ok {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.wpcf7-form .wpcf7-mail-sent-ng {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

/* Spinner */
.wpcf7-form .wpcf7-spinner {
    display: block;
    margin: 1rem auto 0;
}

/* Field wrap */
.wpcf7-form .wpcf7-form-control-wrap {
    display: block;
}