/* ============================================
   HERO SECTION
============================================ */

/* Background wrapper */
.hero-background {
    background-color: #F7F3EF; /* hero background color */
    position: relative;
    padding-top: 40px;
    padding-bottom: 40px;
}

/* Stack container for hero images */
.hero-container {
    position: relative;
    text-align: center;
    --wp--style--block-gap: 0 !important;
    gap: 0 !important;
    row-gap: 0 !important;
}

/* Remove default margins/padding inside stack */
.hero-container > * {
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove inline spacing from images */
.hero-container img {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hero layers */

/* Floral (top layer) */
.hero-floral {
    position: relative;
    z-index: 5;
    width: 900px;              /* adjust for size */
    margin-bottom: -140px;     /* pulls floral down into couple image */
}

/* Couple PNG */
.hero-couple {
    position: relative;
    z-index: 4;
    width: 380px;
    margin-top: -80px;         /* pulls couple up into floral */
    margin-left: 0px;
}

/* Names PNG */
.hero-names {
    position: relative;
    z-index: 6;
    width: 420px;
    margin-top: -20px;
    margin-bottom: -10px;
}

/* Date PNG */
.hero-date {
    position: relative;
    z-index: 6;
    width: 240px;
    margin-top: -10px;
    margin-bottom: 20px;
}

/* Arc PNG (bottom) */
.hero-arc {
    position: relative;
    z-index: 3;
    width: 100%;
    margin-top: -140px;        /* makes couple overlap the arc */
}

/* Hero fade-up animation */
.hero-floral,
.hero-couple,
.hero-names,
.hero-date,
.hero-arc {
    opacity: 0;
    animation: fadeUp 1.2s ease-out forwards;
}

.hero-floral { animation-delay: 0.2s; }
.hero-couple { animation-delay: 0.4s; }
.hero-names  { animation-delay: 0.6s; }
.hero-date   { animation-delay: 0.8s; }
.hero-arc    { animation-delay: 1.0s; }

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================
   COUNTDOWN TIMER (Countdown Timer Ultimate)
   Applies only to container with class "floral-countdown"
============================================ */

/* Base layout on wide screens: 1 row, plugin-style */
.floral-countdown .wpcdt-clock,
.floral-countdown .wpcdt-timer {
    display: flex !important;
    justify-content: center !important;
    gap: 24px;                  /* space between circles on desktop */
}

/* Each time unit (Days / Hours / Minutes / Seconds) */
.floral-countdown .wpcdt-col {
    display: flex !important;
    justify-content: center !important;
}

/* Circle style */
.floral-countdown .wpcdt-countdown-timer {
    background: #f3e9f3 !important;       /* pastel circle */
    border: 3px solid #e4d8e6 !important;
    border-radius: 50% !important;
    width: 220px !important;
    height: 220px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column !important;
    padding: 10px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}

/* Numbers */
.floral-countdown .wpcdt-timer-number {
    font-size: 72px !important;
    font-weight: 400 !important;
    color: #111 !important;
    line-height: 1 !important;
    font-family: 'Mulish', sans-serif !important;
}

/* Labels (DAYS, HOURS, etc.) */
.floral-countdown .wpcdt-timer-title {
    margin-top: 10px !important;
    font-size: 22px !important;
    color: #555 !important;
    text-transform: none !important;
    font-family: 'Mulish', sans-serif !important;
}


/* ============================================
   RESPONSIVE LAYOUT FOR COUNTDOWN
   > 1024px  : 1 row (desktop/laptop)
   <= 1024px : 2 rows, 2 columns (mobile + tablet portrait)
============================================ */
@media (max-width: 1024px) {

    /* Turn wrapper into 2-column grid */
    .floral-countdown .wpcdt-clock,
    .floral-countdown .wpcdt-timer {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 16px;          /* row and column gaps */
        justify-items: center;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Make each unit just sit in its grid cell, no extra spacing */
    .floral-countdown .wpcdt-col {
        margin: 0 !important;
        padding: 0 !important;
        justify-content: center !important;
    }
}
/* Hide text site title and tagline, but keep logo */
.site-title,
.site-title a,
.site-description {
    display: none !important;
}