/*!
 Theme Name: Rubrum
 Theme URI:
 Author: Dev Team
 Author URI:
 Description: Rubrum is a blank canvas for your ideas and it makes the block editor your best brush.
 Requires at least: 6.6
 Tested up to: 7.0
 Requires PHP: 8.0
 Version: 7.0
 Text Domain: rubrum
*/


/** Add your custom styles here **/


/* Smooth scroll for the "Scroll to learn more" link */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

.mark, mark {
    padding: unset !important;
}

.wp-block-heading,
.has-text-box-trim,
.has-text-box-trim p {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

/* Hero: scale height with the viewport instead of cropping on small screens
   (420px at 1600px wide, same aspect ratio as the Figma frame) */
.hero-cover {
    min-height: clamp(140px, 26.25vw, 420px) !important;
}

/* Headline callout: one H1 that mixes H2-size regular text
   with H1-size bold highlights ("lost their job", the candidate's name) */
.callout-headline {
    font-size: var(--wp--preset--font-size--x-large);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1;
}
@media (min-width: 570px) {
    .callout-headline {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0 20px;
        flex-wrap: wrap;
    }
}
.callout-headline strong {
    font-size: var(--wp--preset--font-size--xx-large);
    font-weight: 700;
    letter-spacing: -0.05em;
}

/* Yellow ticker: diamond separators between items */
.callout-ticker > p {
    margin: 0;
}
.callout-ticker > p + p::before {
    content: "";
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: var(--wp--preset--spacing--30);
    background-color: var(--wp--preset--color--base);
    transform: rotate(45deg);
    vertical-align: 0.15em;
}
@media (max-width: 781.98px) {
    .callout-ticker {
        flex-direction: column;
        text-align: center;
    }
    .callout-ticker p {
        font-size: clamp(16px, 3vw, 21px) !important;
    }
    .callout-ticker > p + p::before {
        display: none;
    }
}

/* "Scroll to learn more" with chevrons on both sides */
.scroll-cue a {
    display: inline-flex;
    align-items: center;
    gap: var(--wp--preset--spacing--30);
    color: inherit;
    text-decoration: none;
}
.scroll-cue a::before,
.scroll-cue a::after {
    content: "";
    flex: none;
    width: 15px;
    height: 8px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.56 7.78'%3E%3Cpath d='M7.78 1.72 15.56 0 7.78 7.78 0 0z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.56 7.78'%3E%3Cpath d='M7.78 1.72 15.56 0 7.78 7.78 0 0z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.scroll-cue a:hover,
.scroll-cue a:focus-visible {
    color: var(--wp--preset--color--contrast);
}

/* Curved divider between the black intro and the gray story sections.
   The group is filled with Primary and masked to the arc, so the page's
   Base background shows through above the curve. */
.section-curve {
    background-color: var(--wp--preset--color--primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 77.5' preserveAspectRatio='none'%3E%3Cpath d='M1600 77.5H0S234.43 0 796.25 0 1600 77.5 1600 77.5Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 77.5' preserveAspectRatio='none'%3E%3Cpath d='M1600 77.5H0S234.43 0 796.25 0 1600 77.5 1600 77.5Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}

/* Story rows: image fills the full height of its column */
.fill-column {
    height: 100%;
    margin: 0;
}
.fill-column img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 781px) {
    .fill-column img {
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

/* Footnote superscripts (Figma: 64.5% of the parent size) */
.wp-block-heading sup,
.content-copy sup {
    font-size: 0.645em;
    line-height: 0;
}

/* Tight bullet lists in the story copy (theme default adds 0.5rem per item) */
.wp-block-list.is-tight {
    padding-left: 1.5em;
}
.wp-block-list.is-tight li {
    margin-bottom: 0;
}

footer a {
    text-decoration: none;
}