/* -------------------- WEEKLY HOROSCOPE BLOCK -------------------- */

.ez-horoscope-block {
  padding: 1rem;
  border-radius: var(--wp--preset--radius--small, 8px);
  box-shadow: 0 0 4px rgba(0,0,0,0.1);
}

/* Weekly horoscope section container */
.eztype-flexbox-item {
  position: relative;
  z-index: 0;
  overflow: hidden;
}


/* -------------------- SECTION HEADING STYLES -------------------- */

.ez-weekly-section-heading {
  margin: 0 0 0.75rem 0;
  font-weight: 600;
  line-height: 1.3;
}

.ez-weekly-section-heading:is(h2) {
  font-size: 1.5rem;
}

.ez-weekly-section-heading:is(h3) {
  font-size: 1.25rem;
}

.ez-weekly-section-heading:is(h4) {
  font-size: 1.1rem;
}

/* RTL support for section headings */
.ez-horoscope-block.ez-horoscope-rtl .ez-weekly-section-heading,
.ez-horoscope-block[dir="rtl"] .ez-weekly-section-heading {
  text-align: right;
}


/* -------------------- COLUMN LAYOUT SYSTEM -------------------- */

/* Base grid container styles */
.ez-horoscope-block .eztype-flexbox-container,
.editor-styles-wrapper .ez-horoscope-block .eztype-flexbox-container {
  display: grid !important;
  gap: 1.5rem;
  width: 100%;
}

/* 1 Column Layout */
.ez-horoscope-block.ez-weekly-layout-1 .eztype-flexbox-container,
.ez-horoscope-block .eztype-flexbox-container.ez-weekly-columns-1,
.editor-styles-wrapper .ez-horoscope-block.ez-weekly-layout-1 .eztype-flexbox-container,
.editor-styles-wrapper .ez-horoscope-block .eztype-flexbox-container.ez-weekly-columns-1 {
  grid-template-columns: 1fr !important;
}

/* 2 Column Layout */
.ez-horoscope-block.ez-weekly-layout-2 .eztype-flexbox-container,
.ez-horoscope-block .eztype-flexbox-container.ez-weekly-columns-2,
.editor-styles-wrapper .ez-horoscope-block.ez-weekly-layout-2 .eztype-flexbox-container,
.editor-styles-wrapper .ez-horoscope-block .eztype-flexbox-container.ez-weekly-columns-2 {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* 3 Column Layout */
.ez-horoscope-block.ez-weekly-layout-3 .eztype-flexbox-container,
.ez-horoscope-block .eztype-flexbox-container.ez-weekly-columns-3,
.editor-styles-wrapper .ez-horoscope-block.ez-weekly-layout-3 .eztype-flexbox-container,
.editor-styles-wrapper .ez-horoscope-block .eztype-flexbox-container.ez-weekly-columns-3 {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* Individual grid items */
.ez-horoscope-block .eztype-flexbox-item,
.editor-styles-wrapper .ez-horoscope-block .eztype-flexbox-item {
  min-height: 200px;
  border-radius: 8px;
  padding: 1rem;
}

/* Responsive: Stack to 2 columns on medium screens for 3-column layout */
@media (max-width: 900px) {
  .ez-horoscope-block.ez-weekly-layout-3 .eztype-flexbox-container,
  .ez-horoscope-block .eztype-flexbox-container.ez-weekly-columns-3,
  .editor-styles-wrapper .ez-horoscope-block.ez-weekly-layout-3 .eztype-flexbox-container,
  .editor-styles-wrapper .ez-horoscope-block .eztype-flexbox-container.ez-weekly-columns-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Responsive: Stack to 1 column on small screens */
@media (max-width: 600px) {
  .ez-horoscope-block .eztype-flexbox-container,
  .editor-styles-wrapper .ez-horoscope-block .eztype-flexbox-container {
    grid-template-columns: 1fr !important;
  }
}


/* -------------------- HERO IMAGE STYLES -------------------- */

/* Overlay element (for hero background mode) */
.ez-weekly-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.3s ease-in-out;
}

/* Overlay color variants — match daily behavior but scoped to weekly */
.ez-weekly-overlay.light {
  background-color: rgba(255, 255, 255, 0.7) !important;
}

.ez-weekly-overlay.dark {
  background-color: rgba(0, 0, 0, 0.4) !important;
}

/* Ensure text content sits above the overlay */
.eztype-flexbox-content {
  position: relative;
  z-index: 20;
}

/* Hero inline image mode */
.ez-weekly-inline-image {
  position: relative;
}

.ez-weekly-inline-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.ez-weekly-overlay.light {
  background-color: rgba(255, 255, 255, var(--ezhp-overlay-opacity, 0.7)) !important;
}

.ez-weekly-overlay.dark {
  background-color: rgba(0, 0, 0, var(--ezhp-overlay-opacity, 0.4)) !important;
}

/* === Weekly Horoscope Editor Overlay Preview === */

/* Default editor preview (fallback when no data-opacity match found) */
.editor-styles-wrapper .ez-weekly-overlay.light {
  background-color: rgba(255, 255, 255, 0.5);
}

.editor-styles-wrapper .ez-weekly-overlay.dark {
  background-color: rgba(0, 0, 0, 0.5);
}

/* Fine-grained opacity mapping for live preview */

/* White/light overlay variants */
.editor-styles-wrapper .ez-weekly-overlay.light[data-opacity="10"] { background-color: rgba(255, 255, 255, 0.10); }
.editor-styles-wrapper .ez-weekly-overlay.light[data-opacity="20"] { background-color: rgba(255, 255, 255, 0.20); }
.editor-styles-wrapper .ez-weekly-overlay.light[data-opacity="30"] { background-color: rgba(255, 255, 255, 0.30); }
.editor-styles-wrapper .ez-weekly-overlay.light[data-opacity="40"] { background-color: rgba(255, 255, 255, 0.40); }
.editor-styles-wrapper .ez-weekly-overlay.light[data-opacity="50"] { background-color: rgba(255, 255, 255, 0.50); }
.editor-styles-wrapper .ez-weekly-overlay.light[data-opacity="60"] { background-color: rgba(255, 255, 255, 0.60); }
.editor-styles-wrapper .ez-weekly-overlay.light[data-opacity="70"] { background-color: rgba(255, 255, 255, 0.70); }
.editor-styles-wrapper .ez-weekly-overlay.light[data-opacity="80"] { background-color: rgba(255, 255, 255, 0.80); }
.editor-styles-wrapper .ez-weekly-overlay.light[data-opacity="90"] { background-color: rgba(255, 255, 255, 0.90); }
.editor-styles-wrapper .ez-weekly-overlay.light[data-opacity="100"] { background-color: rgba(255, 255, 255, 1.00); }

/* Black/dark overlay variants */
.editor-styles-wrapper .ez-weekly-overlay.dark[data-opacity="10"] { background-color: rgba(0, 0, 0, 0.10); }
.editor-styles-wrapper .ez-weekly-overlay.dark[data-opacity="20"] { background-color: rgba(0, 0, 0, 0.20); }
.editor-styles-wrapper .ez-weekly-overlay.dark[data-opacity="30"] { background-color: rgba(0, 0, 0, 0.30); }
.editor-styles-wrapper .ez-weekly-overlay.dark[data-opacity="40"] { background-color: rgba(0, 0, 0, 0.40); }
.editor-styles-wrapper .ez-weekly-overlay.dark[data-opacity="50"] { background-color: rgba(0, 0, 0, 0.50); }
.editor-styles-wrapper .ez-weekly-overlay.dark[data-opacity="60"] { background-color: rgba(0, 0, 0, 0.60); }
.editor-styles-wrapper .ez-weekly-overlay.dark[data-opacity="70"] { background-color: rgba(0, 0, 0, 0.70); }
.editor-styles-wrapper .ez-weekly-overlay.dark[data-opacity="80"] { background-color: rgba(0, 0, 0, 0.80); }
.editor-styles-wrapper .ez-weekly-overlay.dark[data-opacity="90"] { background-color: rgba(0, 0, 0, 0.90); }
.editor-styles-wrapper .ez-weekly-overlay.dark[data-opacity="100"] { background-color: rgba(0, 0, 0, 1.00); }


/* -------------------- DAILY BACKGROUND IMAGE STYLES -------------------- */

/* Daily overlay element (for custom daily background images) */
.ez-daily-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.3s ease-in-out;
}

/* Daily overlay color variants */
.ez-daily-overlay.light {
  background-color: rgba(255, 255, 255, 0.4);
}

.ez-daily-overlay.dark {
  background-color: rgba(0, 0, 0, 0.4);
}

/* Ensure flexbox background sits behind everything */
.eztype-flexbox-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background-size: cover;
  background-repeat: no-repeat;
}


/* -------------------- DAILY INLINE IMAGE STYLES -------------------- */

/* Daily inline image container */
.ez-daily-inline-image {
  position: relative;
  overflow: hidden;
}

.ez-daily-inline-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* Clearfix for floated inline images */
.eztype-flexbox-content::after {
  content: "";
  display: table;
  clear: both;
}


/* -------------------- RTL SUPPORT -------------------- */

/* RTL base styles */
.ez-horoscope-block.ez-horoscope-rtl,
.ez-horoscope-block[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

/* RTL text alignment for content sections */
.ez-horoscope-block.ez-horoscope-rtl .eztype-flexbox-section,
.ez-horoscope-block.ez-horoscope-rtl .eztype-flexbox-content,
.ez-horoscope-block.ez-horoscope-rtl .eztype-flexbox-heading,
.ez-horoscope-block.ez-horoscope-rtl p,
.ez-horoscope-block[dir="rtl"] .eztype-flexbox-section,
.ez-horoscope-block[dir="rtl"] .eztype-flexbox-content,
.ez-horoscope-block[dir="rtl"] .eztype-flexbox-heading,
.ez-horoscope-block[dir="rtl"] p {
  text-align: right;
  direction: rtl;
}

/* RTL headings */
.ez-horoscope-block.ez-horoscope-rtl h1,
.ez-horoscope-block.ez-horoscope-rtl h2,
.ez-horoscope-block.ez-horoscope-rtl h3,
.ez-horoscope-block[dir="rtl"] h1,
.ez-horoscope-block[dir="rtl"] h2,
.ez-horoscope-block[dir="rtl"] h3 {
  text-align: right;
}

/* RTL list styles */
.ez-horoscope-block.ez-horoscope-rtl ul,
.ez-horoscope-block.ez-horoscope-rtl ol,
.ez-horoscope-block[dir="rtl"] ul,
.ez-horoscope-block[dir="rtl"] ol {
  padding-right: 1.5rem;
  padding-left: 0;
  margin-right: 0;
  margin-left: 0;
}

.ez-horoscope-block.ez-horoscope-rtl li,
.ez-horoscope-block[dir="rtl"] li {
  text-align: right;
}

/* RTL hero section */
.ez-horoscope-block.ez-horoscope-rtl .ez-hero,
.ez-horoscope-block.ez-horoscope-rtl .ez-hero-text,
.ez-horoscope-block[dir="rtl"] .ez-hero,
.ez-horoscope-block[dir="rtl"] .ez-hero-text {
  text-align: right;
}

/* RTL flexbox section alignment */
.ez-horoscope-block.ez-horoscope-rtl .eztype-flexbox-item,
.ez-horoscope-block[dir="rtl"] .eztype-flexbox-item {
  text-align: right;
}

/* Ensure proper unicode-bidi for mixed content */
.ez-horoscope-block.ez-horoscope-rtl,
.ez-horoscope-block[dir="rtl"] {
  unicode-bidi: embed;
}

/* RTL support for any inline zodiac emojis or icons */
.ez-horoscope-block.ez-horoscope-rtl .zodiac-emoji,
.ez-horoscope-block.ez-horoscope-rtl .zodiac-icon,
.ez-horoscope-block[dir="rtl"] .zodiac-emoji,
.ez-horoscope-block[dir="rtl"] .zodiac-icon {
  margin-left: 0.25rem;
  margin-right: 0;
}

/* === RTL Editor Preview Support === */

/* RTL in Gutenberg editor */
.editor-styles-wrapper .ez-horoscope-block.ez-horoscope-rtl,
.editor-styles-wrapper .ez-horoscope-block[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

.editor-styles-wrapper .ez-horoscope-block.ez-horoscope-rtl .eztype-flexbox-content,
.editor-styles-wrapper .ez-horoscope-block.ez-horoscope-rtl p,
.editor-styles-wrapper .ez-horoscope-block[dir="rtl"] .eztype-flexbox-content,
.editor-styles-wrapper .ez-horoscope-block[dir="rtl"] p {
  text-align: right;
  direction: rtl;
}

.editor-styles-wrapper .ez-horoscope-block.ez-horoscope-rtl h1,
.editor-styles-wrapper .ez-horoscope-block.ez-horoscope-rtl h2,
.editor-styles-wrapper .ez-horoscope-block[dir="rtl"] h1,
.editor-styles-wrapper .ez-horoscope-block[dir="rtl"] h2 {
  text-align: right;
}


/* -------------------- CALL TO ACTION STYLES -------------------- */

.ez-weekly-cta {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border-radius: 12px;
  padding: 2rem;
  margin: 1.5rem 0;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.ez-weekly-cta-headline {
  color: #fff;
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.ez-weekly-cta-headline:is(h2) {
  font-size: 1.75rem;
}

.ez-weekly-cta-headline:is(h4) {
  font-size: 1.25rem;
}

.ez-weekly-cta-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.ez-weekly-cta-image-link {
  display: block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ez-weekly-cta-image-link:hover {
  transform: translateY(-2px);
}

.ez-weekly-cta-image-link:hover .ez-weekly-cta-image {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.ez-weekly-cta-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 1.5rem 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.ez-weekly-cta-button {
  display: inline-block;
  background: linear-gradient(135deg, #e94560 0%, #c23a51 100%);
  color: #fff !important;
  text-decoration: none !important;
  padding: 0.875rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ez-weekly-cta-button:hover {
  filter: brightness(1.15);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  color: #fff !important;
}

.ez-weekly-cta-button:active {
  filter: brightness(0.95);
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Transparent CTA variant */
.ez-weekly-cta-transparent {
  padding: 1.5rem 0;
  margin: 1rem 0;
}

.ez-weekly-cta-transparent .ez-weekly-cta-headline {
  color: inherit;
  text-shadow: none;
}

.ez-weekly-cta-transparent .ez-weekly-cta-text {
  color: inherit;
  opacity: 0.85;
}

.ez-weekly-cta-transparent .ez-weekly-cta-image {
  box-shadow: none;
}

/* RTL support for CTA */
.ez-horoscope-block.ez-horoscope-rtl .ez-weekly-cta,
.ez-horoscope-block[dir="rtl"] .ez-weekly-cta {
  text-align: center;
}

.ez-horoscope-block.ez-horoscope-rtl .ez-weekly-cta-headline,
.ez-horoscope-block.ez-horoscope-rtl .ez-weekly-cta-text,
.ez-horoscope-block[dir="rtl"] .ez-weekly-cta-headline,
.ez-horoscope-block[dir="rtl"] .ez-weekly-cta-text {
  text-align: center;
}