/*
 * Ingebjørg brand overrides for Simple Event Planner
 * v2 – palette, spacing and single-event layout fixes
 * Palette: Cream White / Deep Terracotta / Leaf Green
 */

.sep-page {
    --sep-brand-primary: #9E3A45;
    --sep-brand-primary-hover: #762B33;
    --sep-brand-primary-light: #C45F6A;
    --sep-brand-success: #2F8C6A;
    --sep-brand-success-hover: #20614A;
    --sep-brand-success-light: #45C093;
    --sep-brand-secondary: #DEC9DB;
    --sep-brand-ghost: #E8E0E0;
    --sep-brand-surface: #F4EDF4;
    --sep-brand-text: #3A3333;
    --sep-brand-heading: #1A1A1A;
    color: var(--sep-brand-text);
}

/* Keep plugin widths predictable even if the active theme changes box sizing. */
.sep-page,
.sep-page *,
.sep-page *::before,
.sep-page *::after {
    box-sizing: border-box;
}

/* Use the site's typography instead of forcing Roboto. */
.sep-page .list-view,
.sep-page .listing,
.sep-page .grid,
.sep-page .sep-detail,
.sep-page .sep-calendar {
    font-family: inherit !important;
}

/* Links and interactive elements */
.sep-page a,
.sep-page .sep-detail a,
.sep-page .google-calendar-ical a,
.sep-page .event-organizer span a,
.sep-page .pagination > li > a,
.sep-page .pagination > li > span {
    color: var(--sep-brand-primary) !important;
}

.sep-page a:hover,
.sep-page a:focus,
.sep-page .google-calendar-ical a:hover,
.sep-page .google-calendar-ical a:focus {
    color: var(--sep-brand-primary-hover) !important;
}

/* Primary fills */
.sep-page .list-view article .date,
.sep-page .grid-view article .date,
.sep-page .grid .search button,
.sep-page .sep-calendar .search button,
.sep-page .listing .search button,
.sep-page .sep-calendar .eventCalendar-day-header,
.sep-page .sep-calendar li.dayWithEvents,
.sep-page .sep-detail .single-segments .timeline,
.sep-page .pagination li a:hover,
.sep-page .pagination li span.current,
.sep-page .btn.btn-primary {
    background-color: var(--sep-brand-primary) !important;
    border-color: var(--sep-brand-primary) !important;
}

.sep-page .btn.btn-primary:hover,
.sep-page .btn.btn-primary:focus {
    background-color: var(--sep-brand-primary-hover) !important;
    border-color: var(--sep-brand-primary-hover) !important;
}

/* ---------------------------------------------------------
   Single event layout
   --------------------------------------------------------- */

.sep-page .sep-detail {
    margin: 32px 0 !important;
    padding: 0 12px !important;
}

/* Left information card */
.sep-page .sep-detail .left-column {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--sep-brand-secondary) !important;
    background: rgba(244, 237, 244, 0.34);
}

.sep-page .sep-detail .left-column .event-schedule .single-date,
.sep-page .sep-detail .left-column .event-organizer,
.sep-page .sep-detail .left-column .single-event-time,
.sep-page .sep-detail .left-column .event-title,
.sep-page .sep-detail .left-column .event-venue,
.sep-page .sep-detail .left-column .single-segments,
.sep-page .sep-detail .left-column .single-event-description {
    width: 100%;
    padding: 15px 18px !important;
    border-color: var(--sep-brand-secondary) !important;
}

.sep-page .sep-detail .left-column .google-calendar-ical {
    width: 100%;
    padding: 14px 18px !important;
    border-color: var(--sep-brand-secondary) !important;
}

/* Right/full content is one consistent card – no stepped widths. */
.sep-page .sep-detail .right-column,
.sep-page .sep-detail .full-column {
    width: 100%;
    overflow: hidden;
    background: var(--sep-brand-ghost);
}

.sep-page .sep-detail .right-column > *,
.sep-page .sep-detail .full-column > * {
    width: 100%;
    max-width: 100%;
}

/* Event title – balanced padding, no inherited h2 margin. */
.sep-page .sep-detail .right-column .event-title,
.sep-page .sep-detail .full-column .event-title {
    float: none !important;
    width: 100% !important;
    padding: 14px 20px !important;
    margin: 0 !important;
    background: var(--sep-brand-ghost) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sep-brand-secondary) !important;
}

.sep-page .sep-detail .right-column .event-title h2,
.sep-page .sep-detail .full-column .event-title h2 {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--sep-brand-heading) !important;
    font-size: 20px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
}

/* Featured image / countdown container */
.sep-page .sep-detail .right-column .single-event-image,
.sep-page .sep-detail .full-column .single-event-image {
    position: relative;
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    background: var(--sep-brand-ghost);
}

.sep-page .sep-detail .right-column .single-event-image img,
.sep-page .sep-detail .full-column .single-event-image img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

/*
 * No featured image: make the countdown a normal full-width panel.
 * The plugin normally uses an absolutely positioned translucent overlay,
 * which is what caused the oversized/misaligned red block.
 */
.sep-page .sep-detail .single-event-image .countdown.no-image {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 24px 18px 18px !important;
    text-align: center;
    background: var(--sep-brand-primary) !important;
}

.sep-page .sep-detail .single-event-image .countdown.no-image + .overlay-counter {
    display: none !important;
}

.sep-page .sep-detail .single-event-image .countdown.no-image #countdownwrapp {
    padding: 0 !important;
}

.sep-page .sep-detail .single-event-image .countdown.no-image #countdownwrapp .is-countdown {
    margin: 0 !important;
}

/* With an event image: keep the countdown overlay contained inside the image. */
.sep-page .sep-detail .single-event-image .countdown:not(.no-image) {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
}

.sep-page .sep-detail .single-event-image .overlay-counter {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    padding: 38px 10px !important;
    background: var(--sep-brand-primary) !important;
    opacity: 0.78 !important;
}

/* Countdown typography */
.sep-page .sep-detail .main-digit-wrapp {
    vertical-align: top;
}

.sep-page .sep-detail .main-digit-wrapp .digit-wrapp {
    margin: 0 2px !important;
    padding: 3px 9px !important;
    color: #fff !important;
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.9) !important;
}

.sep-page .sep-detail .main-digit-wrapp .countdown-period {
    margin-top: 3px !important;
    color: #fff !important;
    line-height: 1.1 !important;
}

/* Calendar links + content now share the same full-width card surface. */
.sep-page .sep-detail .right-column .google-calendar-ical,
.sep-page .sep-detail .full-column .google-calendar-ical {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 15px 20px !important;
    background: var(--sep-brand-ghost) !important;
    border-top: 1px solid var(--sep-brand-secondary) !important;
}

.sep-page .sep-detail .right-column .single-event-description,
.sep-page .sep-detail .full-column .single-event-description,
.sep-page .sep-detail .right-column .single-event-time,
.sep-page .sep-detail .full-column .single-event-time,
.sep-page .sep-detail .right-column .event-organizer,
.sep-page .sep-detail .full-column .event-organizer,
.sep-page .sep-detail .right-column .event-venue,
.sep-page .sep-detail .full-column .event-venue,
.sep-page .sep-detail .right-column .single-segments,
.sep-page .sep-detail .full-column .single-segments {
    width: 100% !important;
    padding: 16px 20px !important;
    margin: 0 !important;
    background: var(--sep-brand-ghost) !important;
}

.sep-page .sep-detail .right-column .single-event-description p,
.sep-page .sep-detail .full-column .single-event-description p {
    margin: 0 0 12px !important;
}

.sep-page .sep-detail .right-column .single-event-description p:last-child,
.sep-page .sep-detail .full-column .single-event-description p:last-child {
    margin-bottom: 0 !important;
}

/* Typography */
.sep-page h1,
.sep-page h2,
.sep-page h3,
.sep-page h4,
.sep-page h5,
.sep-page h6,
.sep-page strong {
    color: var(--sep-brand-heading);
}

.sep-page .sep-detail .single-event-description p,
.sep-page .sep-detail .event-date-time time,
.sep-page .sep-detail .event-organizer span,
.sep-page .sep-detail .single-segments .item,
.sep-page .sep-detail .event-venue {
    color: var(--sep-brand-text) !important;
}

/* Listing cards */
.sep-page .list-view article,
.sep-page .grid-view article {
    background: var(--sep-brand-surface) !important;
    border: 1px solid var(--sep-brand-secondary);
}

.sep-page .list-view article .description {
    padding: 20px 24px !important;
}

.sep-page .grid-view article .description {
    padding: 17px 19px !important;
}

/* Search fields */
.sep-page input[type="text"],
.sep-page input[type="search"],
.sep-page select,
.sep-page textarea {
    border-color: var(--sep-brand-secondary) !important;
    color: var(--sep-brand-text) !important;
    background: #fff !important;
}

/* Calendar */
.sep-page .sep-calendar .eventsCalendar-currentTitle,
.sep-page .sep-calendar .eventsCalendar-list-wrap {
    color: var(--sep-brand-heading) !important;
}

.sep-page .sep-calendar .eventsCalendar-day a:hover,
.sep-page .sep-calendar .eventsCalendar-day.dayWithEvents a {
    color: #fff !important;
}

/* Mobile */
@media (max-width: 768px) {
    .sep-page {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .sep-page .sep-detail {
        margin: 22px 0 !important;
        padding: 0 !important;
    }

    .sep-page .sep-detail .right-column .event-title,
    .sep-page .sep-detail .full-column .event-title {
        padding: 13px 16px !important;
    }

    .sep-page .sep-detail .right-column .google-calendar-ical,
    .sep-page .sep-detail .full-column .google-calendar-ical,
    .sep-page .sep-detail .right-column .single-event-description,
    .sep-page .sep-detail .full-column .single-event-description,
    .sep-page .sep-detail .right-column .single-event-time,
    .sep-page .sep-detail .full-column .single-event-time,
    .sep-page .sep-detail .right-column .event-organizer,
    .sep-page .sep-detail .full-column .event-organizer,
    .sep-page .sep-detail .right-column .event-venue,
    .sep-page .sep-detail .full-column .event-venue,
    .sep-page .sep-detail .right-column .single-segments,
    .sep-page .sep-detail .full-column .single-segments,
    .sep-page .sep-detail .left-column .event-schedule .single-date,
    .sep-page .sep-detail .left-column .event-organizer,
    .sep-page .sep-detail .left-column .single-event-time,
    .sep-page .sep-detail .left-column .event-title,
    .sep-page .sep-detail .left-column .event-venue,
    .sep-page .sep-detail .left-column .single-segments,
    .sep-page .sep-detail .left-column .single-event-description {
        padding: 13px 16px !important;
    }

    .sep-page .sep-detail .single-event-image .countdown.no-image {
        padding: 20px 12px 15px !important;
    }
}