/*
Theme Name: AstroJB Theme Child
Template: twentytwenty
Version: 1.0.3
Text Domain: astrojb-theme-child
*/

/* ---------------------------
   Base & Typography
---------------------------- */
@import url('https://rsms.me/inter/inter.css');

body, input, button, select, textarea {
    font-family: 'Inter', 'Inter var', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--global--color-primary, #333);
    background-color: var(--global--color-background, #f5f5f5);
}

/* Links */
body a {
    color: var(--global--color-primary, #007acc);
    transition: color 0.3s ease;
}
body a:hover {
    color: var(--global--color-primary-hover, #005fa3);
}

/* Hide powered-by line in footer */
.powered-by-wordpress {
    display: none !important;
}

/* ---------------------------
   Full-width & Header Fix
---------------------------- */
.page .entry-header { display: none !important; }
.page .post-inner {
    max-width: 90% !important;
    margin: 0 auto !important;
    padding: 0 !important;
}
.page .entry-content,
.page .entry-content > *,
.page .entry-content p,
.page .entry-content ul,
.page .entry-content ol,
.page .entry-content blockquote,
.page .entry-content h1,
.page .entry-content h2,
.page .entry-content h3,
.page .entry-content h4,
.page .entry-content h5,
.page .entry-content h6 {
    max-width: 100% !important;
    width: 100% !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.page main { padding-top: 0 !important; }

/* Headings */
body h1, body h2, body h3, body h4, body h5, body h6 {
    font-weight: 700;
    color: #222;
    margin-bottom: 0.5em;
    letter-spacing: 0.03em;
}

/* Buttons */
body button,
body input[type="submit"],
body .wp-block-button__link {
    background-color: var(--global--color-primary, #007acc);
    color: #fff;
    border-radius: 6px;
    padding: 0.75em 1.5em;
    border: none;
    cursor: pointer;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
body button:hover,
body input[type="submit"]:hover,
body .wp-block-button__link:hover {
    background-color: var(--global--color-primary-hover, #005fa3);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Section spacing */
section, .widget, .container {
    padding: 2em 1em;
    margin-bottom: 2em;
}
p { margin-bottom: 1em; }

/* ---------------------------
   Match Checker Form
---------------------------- */
.match-checker-form-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}
.match-checker-form-column {
    flex: 1;
    background: var(--global--color-background, #fff);
    padding: 1rem;
    border: 1px solid var(--global--color-border, #ddd);
    border-radius: 8px;
}
.match-checker-form-column label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}
.match-checker-form-column input[type="text"],
.match-checker-form-column input[type="date"],
.match-checker-form-column select {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--global--color-border, #ccc);
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}
.match-checker-form-column input:focus,
.match-checker-form-column select:focus {
    border-color: var(--global--color-primary, #007acc);
    outline: none;
}
@media (max-width: 768px) {
    .match-checker-form-container { flex-direction: column; }
}

/* ---------------------------
   Horoscope Charts
---------------------------- */
.chart-frame {
    border: 1px solid var(--global--color-border, #ddd);
    padding: 15px;
    border-radius: 8px;
    background: #fff;
    overflow-x: auto;
    text-align: center;
    margin-top: 10px;
}
.horoscope-charts-response svg {
    max-width: 100%;
    height: auto;
}
@media (max-width: 600px) {
    .chart-frame { padding: 10px; }
}

/* ---------------------------
   Status Messages
---------------------------- */
.astro-error-message {
    background: #fdecea;
    color: #c0392b;
    padding: 10px 14px;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
}

/* ---------------------------
   Predictions & Results
---------------------------- */
.astro-prediction-wrapper,
.match-results-box {
    max-width: 800px;
    margin: 1.5em auto;
    padding: 20px;
    border-radius: 8px;
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
}
.astro-prediction-wrapper {
    background: #f7f7f7;
    border: 1px solid var(--global--color-border, #ddd);
}
.match-results-box {
    background: #e8f5e9;
    border: 1px solid #4caf50;
}

/* ---------------------------
   Service Cards
---------------------------- */
.QuickLinksHolder {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em;
}
.QuickLinksHolder .service-card {
    flex: 1 1 calc(33.333% - 1.5em);
    min-height: 250px;
    background: #fff;
    border-radius: 10px;
    padding: 1.5em;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
@media (max-width: 768px) {
    .QuickLinksHolder .service-card { flex: 1 1 100%; }
}
.QuickLinksHolder .service-card .ratio img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* ---------------------------
   Contact Form 7 – Global Style
---------------------------- */
body .wpcf7 form {
    background-color: #fafafa;
    border-radius: 8px;
    padding: 1.25em;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    max-width: 600px;
    margin: 0 auto 2em;
}
/* Input & select fields */
body .wpcf7 input[type="text"],
body .wpcf7 input[type="email"],
body .wpcf7 input[type="url"],
body .wpcf7 input[type="tel"],
body .wpcf7 input[type="number"],
body .wpcf7 select,
body .wpcf7 textarea {
    width: 100%;
    padding: 0.55em 0.75em;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.95em;
    line-height: 1.4;
    background-color: #fff;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
/* Focus state */
body .wpcf7 input:focus,
body .wpcf7 textarea:focus,
body .wpcf7 select:focus {
    border-color: var(--global--color-primary, #007acc);
    box-shadow: 0 0 4px rgba(0,122,204,0.25);
    outline: none;
}
/* Submit button */
body .wpcf7 input[type="submit"] {
    background-color: var(--global--color-primary, #007acc);
    color: #fff;
    border: none;
    padding: 0.6em 1.4em;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95em;
    letter-spacing: 0.03em;
    transition: background-color 0.25s ease, transform 0.15s ease;
}
body .wpcf7 input[type="submit"]:hover {
    background-color: var(--global--color-primary-hover, #005fa3);
    transform: translateY(-1px);
}

/* = Form Spacing fixes = */
body .wpcf7 form p { margin-bottom: 0.5em; }
body .wpcf7 form label {
    display: block;
    margin-bottom: 0.25em;
}
body .wpcf7 .wpcf7-form-control-wrap {
    display: block;
    margin-top: 0.25em;
}
body .wpcf7 form label > input,
body .wpcf7 form label > select,
body .wpcf7 form label > textarea {
    margin-top: 0 !important;
}

/* ---------------------------
   Block Editor Background Fix
---------------------------- */
body.block-editor-page .edit-post-visual-editor,
body.block-editor-page .editor-styles-wrapper {
    background-color: var(--global--color-background, #f5f5f5) !important;
    color: var(--global--color-primary, #333);
}
body.block-editor-page .block-editor-writing-flow {
    background-color: inherit;
    padding: 2em;
}

/* Override background for singular pages */
body.singular {
    --global--color-background: #f5f5f5;
}

/* Form labels & inputs in specific container */
.wp-container-core-columns-is-layout-9d6595d7 label,
.wp-container-core-columns-is-layout-9d6595d7 input,
.wp-container-core-columns-is-layout-9d6595d7 textarea {
    color: #222;
}
.wp-container-core-columns-is-layout-9d6595d7 input,
.wp-container-core-columns-is-layout-9d6595d7 textarea {
    background-color: rgba(255, 255, 255, 0.9);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .wp-container-core-columns-is-layout-9d6595d7 {
        padding: 40px 15px;
    }
    .wp-container-core-columns-is-layout-9d6595d7 h1 {
        font-size: 2rem;
    }
}


/* Changed from here */
/* Keep all form fields consistent height & font */
input[type="text"],
input[type="date"],
select,
.select2-container .select2-selection--single {
    height: 40px; /* match your text/date fields height */
    padding: 6px 12px;
    font-size: 16px; /* match theme */
    line-height: 1.4;
    border: 1px solid #ccc; /* match theme's border */
    border-radius: 4px; /* match theme's style */
    box-sizing: border-box;
}

/* Make Select2's chosen text align like normal inputs */
.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 26px; /* adjust so text sits in the middle of the 40px height */
}

/* Ensure the select2 arrow sits aligned */
.select2-container .select2-selection--single .select2-selection__arrow {
    height: 38px;
}


/* Personalized Intro Hi Name in form response styling */
.astrojb-response-wrap {
    background: #f9f9f9;
    padding: 15px;
    margin-top: 20px;
    border-left: 4px solid #0073aa;
    font-size: 15px;
}
.astrojb-response-wrap p {
    margin: 5px 0;
}
.astrojb-response-wrap pre {
    white-space: pre-wrap;
    background: #fff;
    padding: 8px;
    border: 1px solid #ddd;
    overflow-x: auto;
}