/**
 * Islamshub Core - Base Styles
 * 
 * These are OPTIONAL base styles that themes can override
 * The plugin is headless - all design is theme-controlled
 * 
 * @package Islamshub_Core
 * @since 1.0.0
 */

/* ===================================
   PRAYER TIMES TABLE
   =================================== */

.islamshub-prayers {
    margin: 20px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
}

.islamshub-prayers-title {
    font-size: 1.5em;
    margin-bottom: 15px;
    color: #2c3e50;
}

.islamshub-prayers-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.islamshub-prayers-table thead {
    background: #27ae60;
    color: #fff;
}

.islamshub-prayers-table th,
.islamshub-prayers-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ecf0f1;
}

.islamshub-prayers-table tbody tr:hover {
    background: #f8f9fa;
}

.islamshub-prayers-table .prayer-name {
    font-weight: 600;
    color: #2c3e50;
}

.islamshub-prayers-table .prayer-start,
.islamshub-prayers-table .prayer-end {
    color: #7f8c8d;
}

/* ===================================
   SUN TIMES
   =================================== */

.islamshub-sun-times {
    margin: 20px 0;
    padding: 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    color: #fff;
}

.islamshub-sun-times .sun-time {
    margin: 10px 0;
    font-size: 1.1em;
}

.islamshub-sun-times .sun-time strong {
    font-weight: 600;
}

.islamshub-sun-times .sunrise {
    /* Optional: Add sunrise icon */
}

.islamshub-sun-times .sunset {
    /* Optional: Add sunset icon */
}

/* ===================================
   ERROR MESSAGES
   =================================== */

.islamshub-error {
    padding: 12px 15px;
    background: #e74c3c;
    color: #fff;
    border-radius: 4px;
    margin: 15px 0;
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

@media (max-width: 768px) {

    .islamshub-prayers-table th,
    .islamshub-prayers-table td {
        padding: 10px 8px;
        font-size: 0.9em;
    }

    .islamshub-prayers-title {
        font-size: 1.3em;
    }

    .islamshub-sun-times {
        padding: 12px;
    }

    .islamshub-sun-times .sun-time {
        font-size: 1em;
    }
}

/* ===================================
   THEME OVERRIDE HOOKS
   =================================== */

/* Themes can override these classes:
   - .islamshub-prayers
   - .islamshub-prayers-table
   - .islamshub-sun-times
   - .islamshub-error
   - .islamshub-content-intro
   - .islamshub-content-explanation
   
   Or completely replace this stylesheet by dequeuing it:
   wp_dequeue_style('islamshub-core');
*/

/* ===================================
   CONTENT ENRICHMENT (SEO & AdSense)
   =================================== */

.islamshub-content-intro {
    margin-bottom: 2rem;
    line-height: 1.8;
}

.islamshub-content-intro h2 {
    color: #2c3e50;
    font-size: 1.8rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.islamshub-content-intro p {
    color: #34495e;
    font-size: 1.05rem;
    margin-bottom: 1rem;
}

.islamshub-content-explanation {
    margin-top: 2.5rem;
    line-height: 1.8;
}

.islamshub-content-explanation h3 {
    color: #2c3e50;
    font-size: 1.5rem;
    margin: 2rem 0 1rem;
    font-weight: 600;
    border-bottom: 2px solid #27ae60;
    padding-bottom: 0.5rem;
}

.islamshub-content-explanation h4 {
    color: #27ae60;
    font-size: 1.2rem;
    margin: 1.5rem 0 0.5rem;
    font-weight: 600;
}

.prayer-explanation {
    margin-bottom: 1.5rem;
}

.prayer-explanation p {
    color: #34495e;
    font-size: 1.05rem;
    line-height: 1.8;
}

@media (max-width: 768px) {
    .islamshub-content-intro h2 {
        font-size: 1.5rem;
    }

    .islamshub-content-explanation h3 {
        font-size: 1.3rem;
    }

    .islamshub-content-explanation h4 {
        font-size: 1.1rem;
    }

    /* ===================================
   LOCATION CONTROLS UI
   =================================== */

    .islamshub-location-controls {
        margin: 20px 0;
        max-width: 100%;
    }

    .islamshub-form-group {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }

    .islamshub-input-wrapper {
        flex: 1;
        min-width: 200px;
    }

    .islamshub-select,
    .islamshub-input-wrapper input {
        width: 100%;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 16px;
        color: #2c3e50;
        box-sizing: border-box;
        /* Ensure padding doesn't affect width */
    }

    /* Specific styling for the manual input to spacing */
    #islamshub-city-manual {
        margin-top: 10px;
    }

    .islamshub-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 15px;
        background: #27ae60;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
        transition: background 0.3s;
        text-decoration: none;
        line-height: 1.2;
    }

    .islamshub-btn:hover {
        background: #219150;
        color: #fff;
    }

    .islamshub-btn-icon {
        padding: 10px;
        background: #34495e;
    }

    .islamshub-btn-icon:hover {
        background: #2c3e50;
    }

    /* Status Messages */
    .islamshub-status-msg {
        margin-top: 10px;
        padding: 8px 12px;
        border-radius: 4px;
        font-size: 14px;
    }

    .islamshub-error {
        background: #fadbd8;
        color: #c0392b;
        border-left: 3px solid #c0392b;
    }

    .islamshub-success {
        background: #d5f5e3;
        color: #27ae60;
        border-left: 3px solid #27ae60;
    }

    .islamshub-info {
        background: #d6eaf8;
        color: #2980b9;
        border-left: 3px solid #2980b9;
    }

    /* Loading animation for button */
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .islamshub-loading svg {
        animation: spin 1s linear infinite;
    }

    /* Responsive adjustments */
    @media (max-width: 480px) {
        .islamshub-form-group {
            flex-direction: column;
            align-items: stretch;
        }

        .islamshub-btn {
            width: 100%;
        }
    }

    /* List Layout Styles */
    .islamshub-prayers-list {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-top: 20px;
    }

    .islamshub-prayers-list .prayer-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f8f9fa;
        padding: 15px 20px;
        border-radius: 8px;
        border-left: 4px solid #2ecc71;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .islamshub-prayers-list .prayer-name {
        font-size: 1.1rem;
        font-weight: 700;
        color: #2c3e50;
    }

    .islamshub-prayers-list .prayer-time {
        text-align: right;
    }

    .islamshub-prayers-list .time-start {
        display: block;
        font-size: 1.2rem;
        font-weight: 600;
        color: #2ecc71;
    }

    .islamshub-prayers-list .time-label {
        display: block;
        font-size: 0.8rem;
        color: #7f8c8d;
        margin-top: 2px;
    }

    /* Dark mode support for list view */
    @media (prefers-color-scheme: dark) {
        .islamshub-prayers-list .prayer-item {
            background: #2d3436;
            border-color: #2ecc71;
        }

        .islamshub-prayers-list .prayer-name {
            color: #ecf0f1;
        }

        .islamshub-prayers-list .time-label {
            color: #bdc3c7;
        }
    }