/* ===========================================
   UNIVERSAL THEME-INHERITING STYLES
   =========================================== */

/* FORM (uses theme fonts + colors) */
.chinese-horoscope-block .ezhp-form {
    margin: 1.25rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;

    /* NO backgrounds, theme controls colors */
    background: transparent !important;
}

/* DATE INPUT — fully theme-inheriting */
.chinese-horoscope-block .ezhp-form input[type="date"] {
    font: inherit;
    color: inherit;
    background: inherit;
    border: 1px solid currentColor;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
}

/* BUTTON — theme controls colors */
.chinese-horoscope-block .ezhp-form button.ezhp-fetch-button {
    font: inherit;
    color: inherit;
    background: inherit;
    border: 1px solid currentColor;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
}

.chinese-horoscope-block .ezhp-form button.ezhp-fetch-button:hover {
    opacity: 0.8;
}

/* RESULT WRAPPER */
.chinese-horoscope-block .chinese-horoscope-result {
    margin-top: 1rem;
}

/* TYPOGRAPHY — FULLY INHERITED */
.chinese-horoscope-block h2,
.chinese-horoscope-block p {
    font-family: inherit;
    color: inherit;
}

/* Improve paragraph readability with line-height */
.chinese-horoscope-block p {
    line-height: 1.65;
}

/* ===========================================
   HERO — NO BACKGROUNDS EXCEPT IMAGE ITSELF
   =========================================== */

.ez-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0 !important;

    /* REMOVE background color so theme controls it */
    background: none !important;
}

.ez-hero-content {
    position: relative;
    z-index: 10;
    padding: 0 !important;
    color: inherit;
}

/* Dark/light overlay based ONLY on user-selected opacity */
.ez-hero-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

/* Inline hero image */
.ez-daily-inline-image img {
    display: block;
    height: auto;
    border-radius: 8px;
}

/* Ensure inline images do not break floats */
.ez-hero-text::after {
    content: "";
    display: block;
    clear: both;
}

/* Ensure button inherits all theme styles */
.chinese-horoscope-block .ezhp-form .wp-element-button {
    font: inherit;
    color: inherit;
    background: inherit;
    border: inherit;
    padding: var(--wp--custom--button--padding, 0.5rem 1rem);
    border-radius: inherit;
}

/* Ensure no browser reset overrides theme */
.chinese-horoscope-block .ezhp-form .wp-element-button {
    appearance: none;
    -webkit-appearance: none;
}

/* ===========================================
   RTL SUPPORT
   =========================================== */

/* Ensure text aligns properly based on direction */
.chinese-horoscope-block[dir="rtl"],
.chinese-horoscope-block[dir="rtl"] .chinese-horoscope,
.chinese-horoscope[dir="rtl"] {
    text-align: right;
}

.chinese-horoscope-block[dir="ltr"],
.chinese-horoscope-block[dir="ltr"] .chinese-horoscope,
.chinese-horoscope[dir="ltr"] {
    text-align: left;
}

/* RTL-aware form layout (flexbox auto-handles direction) */
.chinese-horoscope-block[dir="rtl"] .ezhp-form {
    flex-direction: row;
}

/* RTL float adjustments for inline images */
.chinese-horoscope-block[dir="rtl"] .ez-daily-inline-image[style*="float:left"] {
    float: right !important;
    margin: 0 0 1rem 1rem !important;
}

.chinese-horoscope-block[dir="rtl"] .ez-daily-inline-image[style*="float:right"] {
    float: left !important;
    margin: 0 1rem 1rem 0 !important;
}