/* Reactive Core blog theme — colors/fonts ported from the website (main.css). */

:root {
    --rc-light-grey: #d1d3d4;
    --rc-very-light-grey: #f6f6f6;
    --rc-dark-grey: #58595b;
    --rc-white: #ffffff;
    --rc-orange: #df6e4f;
    --rc-light-orange: #e38065;
    --rc-text: #2b2b2d;
    --rc-font: "Source Sans Pro", Helvetica, Arial, sans-serif;
}

@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    src: local('Source Sans Pro'), local('SourceSansPro-Regular'),
        url(../fonts/SourceSansPro-Regular.ttf) format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 400;
    src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'),
        url(../fonts/SourceSansPro-Italic.ttf) format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 700;
    src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'),
        url(../fonts/SourceSansPro-Bold.ttf) format('truetype');
    font-display: swap;
}

* {
    box-sizing: border-box;
}

html {
    font-size: 18px;
}

body {
    margin: 0;
    font-family: var(--rc-font);
    color: var(--rc-text);
    background: var(--rc-white);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--rc-orange);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

h1, h2, h3, h4, h5 {
    line-height: 1.25;
    margin-top: 1.4rem;
}

.inner {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header — orange bar with logo + nav, like the website navbar. */
.site-header {
    background: var(--rc-orange);
    padding: 12px 0;
}
.site-header .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.site-brand {
    display: inline-flex;
    align-items: center;
}
.site-brand img {
    height: 60px;
    width: auto;
}

/* Every link in the orange header is white (covers nav + login regardless of markup). */
.site-header a {
    color: var(--rc-white);
}
.site-header a:hover {
    text-decoration: none;
    opacity: 0.85;
}

.site-header-right {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}
.site-header .nav {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 0;
}
.site-header .nav-current a {
    text-shadow: .25px 0 .1px, -.25px 0 .1px;
}

/* Login button — outlined white pill linking to the Ghost admin. */
.site-login {
    border: 1px solid var(--rc-white);
    border-radius: 4px;
    padding: 4px 14px;
    font-weight: 700;
    white-space: nowrap;
}
.site-login:hover {
    background: var(--rc-white);
    color: var(--rc-orange) !important;
    opacity: 1;
}

/* Main content */
.site-main {
    flex: 1 0 auto;
    padding: 40px 0;
}

/* Post list */
.post-feed {
    display: flex;
    flex-direction: column;
    gap: 36px;
}
.post-card-title {
    margin: 0 0 4px;
}
.post-card-title a {
    color: var(--rc-text);
}
.post-card-title a:hover {
    color: var(--rc-orange);
    text-decoration: none;
}
.post-card-meta,
.post-meta {
    color: var(--rc-dark-grey);
    font-size: 0.85rem;
}
.post-card-excerpt {
    margin: 10px 0;
}

/* Single post */
.post-header {
    margin-bottom: 18px;
}
.post-title {
    margin-top: 0;
}
.post-image img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}
.post-content {
    font-size: 1.05rem;
}
.post-content img {
    max-width: 100%;
    height: auto;
}

/* Footer — light bar, small grey text, like the website footer. */
.site-footer {
    flex-shrink: 0;
    background: var(--rc-very-light-grey);
    padding: 14px 0;
}
.site-footer .footer-box {
    text-align: center;
    font-size: 0.8rem;
    color: var(--rc-dark-grey);
}
.site-footer a {
    color: var(--rc-dark-grey);
    text-decoration: underline;
}

/* --- Koenig editor cards (required by Ghost / GScan) --------------------- */
.kg-width-wide {
    position: relative;
    width: 85vw;
    min-width: 100%;
    margin: auto calc(50% - 50vw);
    transform: translateX(calc(50vw - 50%));
}
.kg-width-full {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
.kg-image {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
.kg-width-full .kg-image {
    width: 100vw;
}

figure.kg-card {
    margin: 1.5em 0;
}
.kg-card figcaption {
    text-align: center;
    font-size: 0.8rem;
    color: var(--rc-dark-grey);
    padding-top: 8px;
}

/* Embed card (YouTube, Vimeo …) — responsive video at ~80% of the post width. */
.kg-embed-card {
    display: flex;
    justify-content: center;
    width: 100%;
}
.kg-embed-card iframe[src*="youtube"],
.kg-embed-card iframe[src*="youtube-nocookie"],
.kg-embed-card iframe[src*="vimeo"] {
    width: 80%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}

/* Gallery card */
.kg-gallery-container {
    display: flex;
    flex-direction: column;
    max-width: 1040px;
    width: 100vw;
}
.kg-gallery-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.kg-gallery-image img {
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;
}
.kg-gallery-row:not(:first-of-type) {
    margin: 0.75em 0 0;
}
.kg-gallery-image:not(:first-of-type) {
    margin: 0 0 0 0.75em;
}

/* Bookmark card */
.kg-bookmark-card,
.kg-bookmark-card * {
    box-sizing: border-box;
}
.kg-bookmark-card {
    width: 100%;
    margin: 1.5em 0;
}
.kg-bookmark-container {
    display: flex;
    min-height: 148px;
    color: var(--rc-text);
    text-decoration: none;
    border: 1px solid var(--rc-light-grey);
    border-radius: 4px;
    overflow: hidden;
}
.kg-bookmark-container:hover {
    text-decoration: none;
}
.kg-bookmark-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: flex-start;
    padding: 20px;
    overflow: hidden;
}
.kg-bookmark-title {
    font-weight: 700;
    color: var(--rc-text);
}
.kg-bookmark-description {
    display: -webkit-box;
    margin-top: 8px;
    color: var(--rc-dark-grey);
    font-size: 0.9rem;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.kg-bookmark-metadata {
    display: flex;
    align-items: center;
    margin-top: 14px;
    color: var(--rc-text);
    font-size: 0.85rem;
}
.kg-bookmark-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}
.kg-bookmark-author,
.kg-bookmark-publisher {
    color: var(--rc-dark-grey);
}
.kg-bookmark-thumbnail {
    position: relative;
    flex-grow: 1;
    min-width: 33%;
}
.kg-bookmark-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}