/**
 * RAK Fest 2026 events: listing (/rak-fest-2026/) and the event preview seen by editors.
 * Loaded only on those pages and scoped to .rkf-* classes. Fonts, colours, radius and
 * spacing come from the theme's CSS variables, so Theme Options changes apply here too.
 *
 * Event titles use the theme heading colour. The theme defines no blue; for blue listing titles add
 * --title-color: var(--wp--preset--color--vivid-cyan-blue); to the .rkf-event rule below.
 */

.rkf-event,
.rkf-single {
    --rkf-accent: var(--g-color);
}

/* the theme accent is too dark to read on the dark background, use the theme link colour there */
[data-theme='dark'] .rkf-event,
[data-theme='dark'] .rkf-single {
    --rkf-accent: var(--hyperlink-color, var(--g-color));
}

.rkf-event {
    overflow-wrap: break-word;
}

.rkf-event__header,
.rkf-event__title,
.rkf-event__when,
.rkf-event__desc,
.rkf-event__desc > *,
.rkf-event__reg {
    margin: 0;
}

.rkf-event__subtitle {
    font-weight: 500;
}

/* event status above the event name, in the theme's meta font; the four colours stay apart and readable on light
   and dark backgrounds (the theme accent is too close to the red of Cancelled) */
.rkf-event__status {
    font-family: var(--meta-family);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    align-self: flex-start;
    margin: 0;
    padding: 5px 10px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--rkf-status);
    border: 1px solid currentColor;
    border-radius: var(--round-3);
    background-color: color-mix(in srgb, currentColor 8%, transparent);
}

.rkf-event__status.is-upcoming {
    --rkf-status: #1d6fb8;
}

.rkf-event__status.is-ongoing {
    --rkf-status: #1a7f37;
}

.rkf-event__status.is-completed {
    --rkf-status: var(--meta-fcolor);
}

.rkf-event__status.is-cancelled {
    --rkf-status: #c62828;
}

[data-theme='dark'] .rkf-event__status.is-upcoming {
    --rkf-status: #6cb4f0;
}

[data-theme='dark'] .rkf-event__status.is-ongoing {
    --rkf-status: #4cc272;
}

[data-theme='dark'] .rkf-event__status.is-cancelled {
    --rkf-status: #ff6b6b;
}

/* the separator is followed by a space in the markup, so the right margin is smaller */
.rkf-sep {
    margin: 0 .2em 0 .45em;
    font-weight: 400;
    color: var(--flex-gray-40);
}

.rkf-event__when {
    font-family: var(--h4-family);
    font-size: var(--h4-fsize);
    font-weight: 500;
    line-height: 1.45;
}

.rkf-event__date {
    font-weight: 700;
    color: var(--rkf-accent);
}

.rkf-event__desc {
    line-height: 1.6;
    color: var(--excerpt-color);
}

.rkf-event__desc > * + * {
    margin-top: .75em;
}

/* formatting from the Event Description editor: lists as in the site's posts */
.rkf-event__desc ul {
    list-style: circle inside;
}

.rkf-event__desc ol {
    list-style: decimal inside;
}

.rkf-event__desc ul ul {
    list-style-type: disc;
}

.rkf-event__desc li + li {
    margin-top: .5rem;
}

.rkf-event__desc li > ul,
.rkf-event__desc li > ol {
    padding-top: .5rem;
    padding-left: 1rem;
}

/* headings keep the theme's heading styles. The editor offers Heading 3 to 6, below the event name (h2);
   a larger heading in pasted text is shown at the h3 size, so it never outweighs the event name */
.rkf-event__desc h1,
.rkf-event__desc h2 {
    font-family: var(--h3-family);
    font-size: var(--h3-fsize);
    font-weight: var(--h3-fweight);
    font-style: var(--h3-fstyle);
    line-height: var(--h3-fheight, 1.3);
    letter-spacing: var(--h3-fspace);
    text-transform: var(--h3-transform);
    color: var(--h3-fcolor);
}

.rkf-event__reg {
    font-weight: 600;
}

/* Registration Closed and Ticket Booking: (Yet to be announced) in red, the red of the Cancelled status */
.rkf-event__reg.is-closed,
.rkf-event__reg.is-tba {
    color: #c62828;
}

[data-theme='dark'] .rkf-event__reg.is-closed,
[data-theme='dark'] .rkf-event__reg.is-tba {
    color: #ff6b6b;
}

/* links in the description look like the registration link: the theme's hyperlink style */
.rkf-event__reg-link,
.rkf-event__desc a {
    font-weight: var(--hyperlink-weight, 700);
    font-style: var(--hyperlink-style, normal);
    transition: var(--effect);
    text-decoration: underline;
    color: var(--hyperlink-color, var(--rkf-accent));
    text-decoration-color: var(--hyperlink-line-color, currentColor);
    text-underline-offset: 2px;
}

.rkf-event__reg-link:hover,
.rkf-event__reg-link:focus,
.rkf-event__desc a:hover,
.rkf-event__desc a:focus {
    color: var(--rkf-accent);
    text-decoration-color: var(--rkf-accent);
}

/* listing banner, chosen in RAK Fest Events > Listing Banner */
.rkf-banner,
.rkf-banner picture {
    display: block;
}

/* the whole image at full width: its height follows the image's own proportions, nothing is cropped */
.rkf-banner img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* listing header: centred heading (theme h1) and optional subtitle (theme tagline) between banner and events */
.rkf-listing-header {
    padding: 32px 0 10px;
    text-align: center;
}

/* same weight as the site's section headings, e.g. the category name on category pages */
.rkf-listing-header__title {
    font-weight: var(--heading-fweight, 700);
    margin: 0;
    text-wrap: balance;
}

.rkf-listing-header__subtitle {
    max-width: 760px;
    margin: 10px auto 0;
    text-wrap: balance;
}

/* same weight as post titles in the site's lists and grids (theme h3 weight) */
.rkf-events .rkf-event__title {
    font-weight: var(--h3-fweight, 700);
}

/* listing: poster about one third, details two thirds */
.rkf-events .rkf-event {
    display: grid;
    align-items: center;
    padding: 30px 0;
    border-bottom: 1px solid var(--flex-gray-15);
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 30px;
}

.rkf-events .rkf-event:first-child {
    padding-top: 0;
}

.rkf-events .rkf-event:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

/* the whole poster at its own proportions: no fixed ratio, no cropping (the theme's .p-featured keeps the
   rounded corners); the date placeholder without a poster keeps the theme's box ratio */
.rkf-events .rkf-event__poster:not(.is-empty) .p-featured {
    padding-bottom: 0;
}

.rkf-events .rkf-event__poster:not(.is-empty) img {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.rkf-event__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 12px;
}

.rkf-event__poster.is-empty .p-featured {
    background-color: var(--flex-gray-7);
}

.rkf-event__badge {
    font-family: var(--h1-family);
    line-height: 1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    color: var(--rkf-accent);
}

.rkf-event__badge-day {
    font-size: var(--h1-fsize);
    font-weight: var(--h1-fweight);
}

.rkf-event__badge-month {
    font-size: var(--h5-fsize);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.rkf-empty {
    font-size: var(--h4-fsize);
    margin: 0;
    text-align: center;
    color: var(--meta-fcolor);
}

/* event preview (single template); visitors are redirected to the listing */
.rkf-single {
    margin-top: 30px;
    margin-bottom: 50px;
}

.rkf-single__back {
    font-family: var(--meta-family);
    font-size: var(--bcrumb-fsize, 14px);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    margin-bottom: 20px;
    transition: var(--effect);
    color: var(--meta-fcolor);
    gap: 4px;
}

.rkf-single__back:hover,
.rkf-single__back:focus {
    color: var(--rkf-accent);
}

.rkf-single .rkf-event {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.rkf-single .rkf-event__poster {
    margin: 10px 0;
}

.rkf-single .rkf-event__poster img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 85vh;
    margin: 0 auto;
    border-radius: var(--round-5);
}

.rkf-single .entry-content {
    margin-top: 15px;
}

@media (max-width: 1024px) {
    .rkf-events .rkf-event {
        padding: 25px 0;
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .rkf-events .rkf-event {
        grid-template-columns: minmax(0, 1fr);
        gap: 15px;
    }

    /* without a poster, the date placeholder only repeats the details below it */
    .rkf-event__poster.is-empty {
        display: none;
    }
}