/* Base: page, type, links, controls. Uses tokens.css. */
body {
    background-color: var(--rrd-bg);
    color: var(--rrd-ink);
    font-family: var(--rrd-font);
    font-size: var(--rrd-text-17);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.home .main {
    background: var(--rrd-bg);
    margin-top: 0;
    margin-bottom: 0; /* not `margin: 0`: the parent centres .wrap with auto side margins */
    padding-top: var(--rrd-space-3);
    padding-bottom: var(--rrd-space-5);
}
/* Category, search, article and page views keep a white container. */
body:not(.home) .main {
    margin-top: 0;
    margin-bottom: 0;
    background-color: var(--rrd-card);
    padding: 60px;
}
@media (max-width: 767px) { body:not(.home) .main { padding: 16px; } }

h1, h2, h3, h4, h5, h6,
.block-head .title {
    color: var(--rrd-navy);
    font-family: var(--rrd-font);
    font-weight: 600;
    line-height: 1.2;
}

/* The parent theme sets Roboto on ~67 selectors that beat body/h1-h6. Re-assert the brand font. */
.post-title, .post-title-alt, .post-meta, .post-meta a, .post-content, .post-excerpt,
.navigation, .navigation a, .mobile-menu, .mobile-menu a, .main-head .title, .top-bar-content,
.search-action .search-field, .block-head-c, .block-heading, .section-head, .cat-label a,
.archive-head, .archive-head .description, .main-pagination, .main-pagination a, .text,
.wp-block-button__link, .button, select, .social-icons .label { font-family: var(--rrd-font); }

a { color: var(--rrd-link); }
a:hover { color: var(--rrd-navy); }

.post-meta .post-cat,
.post-meta .post-cat a,
.meta-cat-label a {
    color: var(--rrd-link);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.post-meta .post-date,
.post-meta .meta-sep,
.post-meta .author {
    color: var(--rrd-muted);
    font-size: var(--rrd-text-14);
}

.post-meta .post-title a,
.grid-post .meta-title h2 a,
.list-post .meta-title h2 a,
.large-post .post-title a {
    color: var(--rrd-ink);
}
.post-meta .post-title a:hover,
.grid-post .meta-title h2 a:hover,
.list-post .meta-title h2 a:hover,
.large-post .post-title a:hover {
    color: var(--rrd-link);
}

.post-excerpt,
.post-content.description {
    color: var(--rrd-muted);
    font-size: 15px;
}

button,
.button,
input[type="submit"],
.post-content .read-more a,
.read-more a {
    box-sizing: border-box;
    min-height: var(--rrd-hit);
    padding: 0 20px;
    border: 0;
    border-radius: var(--rrd-radius-img);
    background: var(--rrd-navy);
    color: #FFFFFF;
    font-family: var(--rrd-font);
    font-size: var(--rrd-text-16);
    font-weight: 600;
}

.post-content .read-more a,
.read-more a {
    display: inline-flex;
    align-items: center;
    color: #FFFFFF;
}

input[type="text"],
input[type="search"],
input[type="email"],
textarea {
    box-sizing: border-box;
    min-height: var(--rrd-hit);
    padding: 0 14px;
    border: 1px solid var(--rrd-field);
    border-radius: var(--rrd-radius-img);
    font-family: var(--rrd-font);
    font-size: var(--rrd-text-16);
    color: var(--rrd-ink);
}

:focus-visible {
    outline: 2px solid var(--rrd-accent);
    outline-offset: 2px;
}

.featured img,
.post-thumb img {
    border-radius: var(--rrd-radius-img);
    box-shadow: none;
}

/* Resets: third-party / parent buttons that must not take the navy button look. */
.slick-arrow,
.slick-dots li button,
.search-submit {
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    font-weight: inherit;
}

.post-content .read-more a::after { display: none; }

/* Text selection. The parent writes `rgba(var(--c-main), .95)`, which expects an
   RGB triplet; with our hex token that declaration is invalid, leaving white text on
   no background. Give selection an explicit navy background. */
::selection { background: var(--rrd-navy); color: #FFFFFF; text-shadow: none; }
::-moz-selection { background: var(--rrd-navy); color: #FFFFFF; text-shadow: none; }
img::selection { background: transparent; }
img::-moz-selection { background: transparent; }

/* Phone: parent .ts-row has -15px side margins, so .main.wrap needs a 15px gutter
   (parent .wrap gives 0 35px only above 767px). Slick arrows default to +-25px outside. */
@media (max-width: 767px) {
    body { font-size: var(--rrd-text-16); }
    .home .main.wrap { padding-left: 15px; padding-right: 15px; }
    .slick-prev.slick-arrow { left: 0; }
    .slick-next.slick-arrow { right: 0; }
}