/*--------------------------------------------------------------
# Event race skin
#
# Gives a race event's description the visual identity of the race's
# own landing site: its palette, its Morabba display type, its
# folded-corner ("origami") cards and its diamond markers.
#
# This file is enqueued only on the events opted in through
# inc/event-race-skin.php, and every selector below is confined to
# #about-content — the description block. The club's header, footer,
# navigation, event banner, registration, gallery and video sections
# are untouched, as is every other page of the site.
--------------------------------------------------------------*/

/* --- Display face of the race site. Declared here only; nothing
       outside this stylesheet references the family. --- */
@font-face {
    font-family: "Morabba";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/Morabba/Morabba-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Morabba";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/Morabba/Morabba-Bold.woff2") format("woff2");
}

@font-face {
    font-family: "Morabba";
    font-weight: 900;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/Morabba/Morabba-Black.woff2") format("woff2");
}

/*--------------------------------------------------------------
# Tokens — the race palette, scoped to the description block.
--------------------------------------------------------------*/

.event-race-skin #about-content {
    --rs-navy: #17235F;
    --rs-red: #B8102A;
    --rs-gold: #E7B32C;
    --rs-cream: #D3D2C5;
    --rs-ink: #1C1C1C;
    --rs-body: #3A3833;
    --rs-muted: #6B6459;
    --rs-line: rgba(23, 35, 95, .12);
    --rs-shadow: 0 18px 50px -24px rgba(23, 35, 95, .35);

    /* Size of the folded-paper corner. The panel folds wider than
       the cards inside it. */
    --rs-fold: 26px;

    /* Panel padding, as a token so the closing band can bleed back
       out to the panel edges. */
    --rs-pad: clamp(22px, 3vw, 42px);

    /* Colour showing through a fold: whatever sits behind the
       element. Cards sit on the cream panel, the panel sits on the
       white .side-right card. */
    --rs-behind: #fff;

    --rs-display: "Morabba", "IRANSansWeb", Tahoma, sans-serif;
}

/*--------------------------------------------------------------
# The panel — turns the description into a race-branded band
# inside the club page.
--------------------------------------------------------------*/

.event-race-skin #about-content {
    position: relative;
    margin: 0 0 46px;
    padding: var(--rs-pad);
    background: var(--rs-cream);
    border-top: 3px solid var(--rs-red);
    color: var(--rs-body);
    font-size: 17px;
    line-height: 1.95;
    clip-path: polygon(var(--rs-fold) 0, 100% 0, 100% 100%, 0 100%, 0 var(--rs-fold));
}

/* Closing band: the race site's origami Tehran skyline, over white
   with the red rule above it. Signs off the description the way the
   band under the race site's hero does. Decoration only — it needs
   no markup, so it cannot interfere with the content. */
.event-race-skin #about-content::after {
    content: "";
    display: block;
    height: clamp(150px, 22vw, 290px);
    margin: clamp(34px, 4vw, 52px) calc(-1 * var(--rs-pad)) calc(-1 * var(--rs-pad));
    background: #fff url("../image/race/tehran-skyline.png") no-repeat center bottom;

    /* `contain` so the whole illustration is in frame at any width — with a
       fixed width it would be cropped to the band's height. */
    background-size: contain;
    border-top: 3px solid var(--rs-red);
}

/* The folded corner itself. */
.event-race-skin #about-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: var(--rs-fold);
    height: var(--rs-fold);
    background: linear-gradient(225deg, transparent 50%, var(--rs-behind) 50%);
    box-shadow: 3px 3px 6px -2px rgba(23, 35, 95, .28);
    pointer-events: none;
}

/* Google-Translate widget leftovers that were saved into the post
   content. They are absolutely positioned and carry a duplicate id,
   so they can only get in the way. */
.event-race-skin #about-content div[id="gtx-trans"] {
    display: none;
}

/*--------------------------------------------------------------
# Folded-corner card treatment — the race site's signature.
--------------------------------------------------------------*/

.event-race-skin #about-content .rs-card,
.event-race-skin #about-content .rs-rule,
.event-race-skin #about-content .rs-acc,
.event-race-skin #about-content .rs-note,
.event-race-skin #about-content ul > li,
.event-race-skin #about-content .vc_single_image-wrapper,
.event-race-skin #about-content .vc_col-sm-6 > .vc_column-inner > .wpb_wrapper {
    position: relative;
    --rs-fold: 18px;
    border-radius: 0;
    clip-path: polygon(var(--rs-fold) 0, 100% 0, 100% 100%, 0 100%, 0 var(--rs-fold));
}

.event-race-skin #about-content .rs-card::before,
.event-race-skin #about-content .rs-rule::before,
.event-race-skin #about-content .rs-acc::before,
.event-race-skin #about-content .rs-note::before,
.event-race-skin #about-content ul > li::before,
.event-race-skin #about-content .vc_single_image-wrapper::before,
.event-race-skin #about-content .vc_col-sm-6 > .vc_column-inner > .wpb_wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: var(--rs-fold);
    height: var(--rs-fold);
    background: linear-gradient(225deg, transparent 50%, var(--rs-cream) 50%);
    box-shadow: 3px 3px 6px -2px rgba(23, 35, 95, .28);
    pointer-events: none;
}

/*--------------------------------------------------------------
# Headings
--------------------------------------------------------------*/

/* "درباره رویداد" — the panel headline. */
.event-race-skin #about-content > h2.title {
    margin: 0 0 8px;
    padding: 0;
    font-family: var(--rs-display);

    /* global.css sets `h2 { font-size: 22px !important }` for the whole site,
       which no amount of specificity can beat. */
    font-size: clamp(1.8rem, 3.6vw, 2.5rem) !important;
    font-weight: 900;
    line-height: 1.35;

    /* The event page centres its section titles; the race site sets them
       against the reading edge. */
    text-align: start;
    color: var(--rs-navy);
}

/* The theme prefixes .side-right headings with a shoe icon; the race
   identity uses a diamond marker instead. */
.event-race-skin #about-content > h2.title::before {
    content: "";
    display: inline-block;
    position: static;
    top: auto;
    width: 12px;
    height: 12px;
    margin: 0 0 0 14px;
    background: var(--rs-red);
    transform: rotate(45deg);
}

.event-race-skin #about-content > h2.title::after {
    content: "";
    display: block;
    width: 72px;
    height: 4px;
    margin-top: 18px;
    background: var(--rs-gold);
}

/* Section headings inside the description. */
.event-race-skin #about-content h4 {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    text-align: start;
    gap: 12px;
    margin: 52px 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rs-line);
    font-family: var(--rs-display);
    font-size: clamp(1.35rem, 2.6vw, 1.8rem);
    font-weight: 900;
    line-height: 1.4;
    color: var(--rs-navy);
}

.event-race-skin #about-content h4::before {
    content: "";
    flex: none;
    width: 11px;
    height: 11px;
    margin-top: .45em;
    background: var(--rs-red);
    transform: rotate(45deg);
}

/* The description sets its heading colour inline, so it has to be
   overridden explicitly to land on the race navy. */
.event-race-skin #about-content h4 span[style],
.event-race-skin #about-content h4 strong {
    color: var(--rs-navy) !important;
    background: none !important;
    font-weight: inherit;
}

/*--------------------------------------------------------------
# Body copy
--------------------------------------------------------------*/

.event-race-skin #about-content p {
    margin: 0 0 16px;
    text-align: justify;
    color: var(--rs-body);
}

.event-race-skin #about-content p span[style] {
    color: inherit !important;
    background: none !important;
}

/* Opening paragraph, read as the race site's lede. */
.event-race-skin #about-content .rs-lede {
    font-family: var(--rs-display);
    font-size: clamp(1.12rem, 2.2vw, 1.32rem);
    font-weight: 700;
    line-height: 1.75;
    color: var(--rs-navy);
    text-align: right;
}

.event-race-skin #about-content strong {
    color: var(--rs-navy);
}

.event-race-skin #about-content a {
    color: var(--rs-red);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

.event-race-skin #about-content a:hover {
    color: var(--rs-navy);
}

/*--------------------------------------------------------------
# Lists — white folded cards with the race's check marker.
--------------------------------------------------------------*/

.event-race-skin #about-content ul {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.event-race-skin #about-content ul > li {
    display: flex;
    gap: 13px;
    padding: 15px 18px;
    background: #fff;
    border: 1px solid var(--rs-line);
    list-style: none;
    font-weight: 500;
    color: var(--rs-body);
    line-height: 1.8;
}

.event-race-skin #about-content ul > li::after {
    content: "✔";
    order: -1;
    flex: none;
    color: var(--rs-red);
    font-weight: 900;
}

.event-race-skin #about-content li span[style] {
    color: inherit !important;
    background: none !important;
}

/* Ordered lists that were not rebuilt into an accordion. */
.event-race-skin #about-content ol {
    margin: 0 0 18px;
    padding-inline-start: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.event-race-skin #about-content ol > li {
    padding-inline-start: 6px;
    color: var(--rs-body);
}

.event-race-skin #about-content ol > li::marker {
    color: var(--rs-red);
    font-weight: 900;
}

/*--------------------------------------------------------------
# Registration steps — numbered squares, as on the race site.
--------------------------------------------------------------*/

.event-race-skin #about-content [data-race-block="steps"] ul {
    counter-reset: rs-step;
    gap: 14px;
}

.event-race-skin #about-content [data-race-block="steps"] ul > li {
    align-items: center;
    font-weight: 600;
    color: var(--rs-navy);
}

.event-race-skin #about-content [data-race-block="steps"] ul > li::after {
    counter-increment: rs-step;
    content: counter(rs-step);
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    background: var(--rs-red);
    color: #fff;
    font-family: var(--rs-display);
    font-size: 1.15rem;
    font-weight: 900;
}

/*--------------------------------------------------------------
# Race services — the compact chip grid.
--------------------------------------------------------------*/

.event-race-skin #about-content [data-race-block="services"] ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.event-race-skin #about-content [data-race-block="services"] ul > li {
    align-items: center;
    font-weight: 600;
    color: var(--rs-navy);
    text-align: right;
}

.event-race-skin #about-content [data-race-block="services"] ul > li::after {
    content: "";
    width: 10px;
    height: 10px;
    background: var(--rs-gold);
    transform: rotate(45deg);
}

/*--------------------------------------------------------------
# Rules — white cards with the race's red edge.
--------------------------------------------------------------*/

.event-race-skin #about-content .rs-rule-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 22px 0 8px;
}

.event-race-skin #about-content .rs-rule {
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--rs-line);
    border-inline-start: 4px solid var(--rs-red);
}

.event-race-skin #about-content .rs-rule-t {
    margin-bottom: 6px;
    font-family: var(--rs-display);
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--rs-navy);
    line-height: 1.5;
}

.event-race-skin #about-content .rs-rule-d {
    font-size: .98rem;
    line-height: 1.85;
    color: var(--rs-body);
    text-align: justify;
}

.event-race-skin #about-content .rs-rule-d span[style],
.event-race-skin #about-content .rs-rule-d strong {
    color: inherit !important;
    background: none !important;
}

/*--------------------------------------------------------------
# FAQ — the race site's accordion.
--------------------------------------------------------------*/

.event-race-skin #about-content .rs-acc-list {
    margin: 22px 0 8px;
}

.event-race-skin #about-content .rs-acc {
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid var(--rs-line);
}

.event-race-skin #about-content .rs-acc > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 17px 22px;
    list-style: none;
    cursor: pointer;
    font-family: var(--rs-display);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--rs-navy);
}

.event-race-skin #about-content .rs-acc > summary::-webkit-details-marker {
    display: none;
}

.event-race-skin #about-content .rs-acc > summary::marker {
    content: "";
}

.event-race-skin #about-content .rs-plus {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    background: var(--rs-cream);
    border: 1px solid var(--rs-line);
    color: var(--rs-red);
    font-family: Tahoma, sans-serif;
    font-size: .95rem;
    font-weight: 900;
    line-height: 1;
    transition: transform .2s ease, background .2s ease, color .2s ease;
}

.event-race-skin #about-content .rs-acc[open] .rs-plus {
    background: var(--rs-red);
    color: #fff;
    transform: rotate(45deg);
}

.event-race-skin #about-content .rs-acc-a {
    padding: 0 22px 20px;
    color: var(--rs-body);
    text-align: justify;
}

.event-race-skin #about-content .rs-acc-a strong,
.event-race-skin #about-content .rs-acc-a span[style] {
    color: inherit !important;
    background: none !important;
}

/*--------------------------------------------------------------
# Images — framed as folded cards.
--------------------------------------------------------------*/

.event-race-skin #about-content .wpb_single_image {
    margin: 26px 0;
}

.event-race-skin #about-content .vc_single_image-wrapper {
    display: block;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--rs-line);
    box-shadow: var(--rs-shadow);
    transition: transform .15s ease;
}

.event-race-skin #about-content .vc_single_image-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
}

.event-race-skin #about-content a.vc_single_image-wrapper:hover {
    transform: translateY(-3px);
}

/*--------------------------------------------------------------
# Separators — the race site's diamond divider.
--------------------------------------------------------------*/

.event-race-skin #about-content .vc_separator {
    position: relative;
    margin: 46px 0;
}

.event-race-skin #about-content .vc_sep_line {
    border-color: var(--rs-line) !important;
}

.event-race-skin #about-content .vc_separator_no_text::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    background: var(--rs-gold);
    transform: translate(-50%, -50%) rotate(45deg);
}

/* A separator's own label is a divider caption, not a section
   heading, so it opts out of the h4 treatment above. */
.event-race-skin #about-content .vc_separator h4 {
    display: inline-block;
    margin: 0;
    padding: 0 18px;
    border: 0;
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    font-weight: 700;
    color: var(--rs-muted);
}

.event-race-skin #about-content .vc_separator h4::before {
    display: none;
}

/*--------------------------------------------------------------
# Two-column contact row — folded cards.
--------------------------------------------------------------*/

.event-race-skin #about-content .vc_col-sm-6 > .vc_column-inner > .wpb_wrapper {
    height: 100%;
    padding: 24px 22px 10px;
    background: #fff;
    border: 1px solid var(--rs-line);
}

.event-race-skin #about-content .vc_col-sm-6 .wpb_wrapper p {
    font-family: var(--rs-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--rs-navy);
    text-align: center;
}

.event-race-skin #about-content .vc_col-sm-6 .vc_single_image-wrapper {
    padding: 0;
    border: 0;
    box-shadow: none;
    clip-path: none;
}

.event-race-skin #about-content .vc_col-sm-6 .vc_single_image-wrapper::before {
    display: none;
}

/*--------------------------------------------------------------
# Gallery grid
--------------------------------------------------------------*/

.event-race-skin #about-content .vc_col-sm-4 .wpb_single_image {
    margin: 0 0 22px;
}

.event-race-skin #about-content .vc_col-sm-4 .vc_single_image-wrapper {
    padding: 8px;
}

/*--------------------------------------------------------------
# Narrow screens
--------------------------------------------------------------*/

@media only screen and (max-width: 900px) {
    .event-race-skin #about-content .rs-rule-grid,
    .event-race-skin #about-content [data-race-block="services"] ul {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 600px) {
    .event-race-skin #about-content {
        --rs-fold: 20px;
        --rs-pad: 16px;
        font-size: 16px;
    }

    .event-race-skin #about-content h4 {
        margin-top: 38px;
    }

    .event-race-skin #about-content .rs-acc > summary {
        padding: 15px 16px;
    }

    .event-race-skin #about-content .rs-acc-a {
        padding: 0 16px 18px;
    }
}