/**
 * Custom CSS
 *
 * This file is for your custom styles.
 * You can add any CSS rules here to customize the Ghost theme.
 *
 * Note: Changes made directly to this file may be overwritten during theme updates.
 * It's recommended to use the Code Injection feature in Ghost for persistent customizations.
 */

/* Your custom CSS goes below this line */

/* Custom CSS */
html[data-color-scheme="dark"] body,
:root[data-color-scheme="dark"] {
    --ghost-accent-color: var(--color-dark-accent) !important;
    --color-accent-foreground: var(--color-dark-accent-foreground, #fff) !important;
    --color-contrast: #fff !important;
    --color-background: #080808 !important;
    --color-background-100: #0E0E0E !important;
    --color-background-200: #141414 !important;
    --color-background-300: #181818 !important;
    --color-foreground: #BABABA !important;
    --color-secondary: #8C8C8C !important;
    --color-mute: #8b8b8b !important;
    --color-border: rgba(173, 173, 173, 0.3) !important;
    color-scheme: dark !important;
}

@media (prefers-color-scheme: dark) {

    html[data-color-scheme="system"] body,
    :root[data-color-scheme="system"] {
        --ghost-accent-color: var(--color-dark-accent) !important;
        --color-accent-foreground: var(--color-dark-accent-foreground, #fff) !important;
        --color-contrast: #fff !important;
        --color-background: #080808 !important;
        --color-background-100: #0E0E0E !important;
        --color-background-200: #141414 !important;
        --color-background-300: #181818 !important;
        --color-foreground: #DCDCDC !important;
        --color-secondary: #8C8C8C !important;
        --color-mute: #8b8b8b !important;
        --color-border: rgba(173, 173, 173, 0.3) !important;
        color-scheme: dark !important;
    }
}

/* Light mode */
:root {
    /* Colors. */
    --color-contrast: #0B0C0A;
    --color-background: #FFF;
    --color-background-100: #F5F2EF;
    --color-background-200: #EEEBE6;
    --color-background-300: #E6E2D9;
    --color-foreground: #232220;
    --color-secondary: #6C6A66;
    --color-mute: #A4A19E;
    --color-border: rgba(135 131 127 / 15%);
    --color-success: #348f3f;
    --color-error: #f25151;
}

body {
    /* Increase regular container width */
    --container--width: 620px;

    /* Increase wide container width*/
    --container-wide--width: 940px;
  /* Increase fontsize */
  font-size: 17px;
  /* Font smoothing */
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}


/* Apply the gradient everywhere except the toggle color-scheme button */
.nav-link:not(.toggle-color-scheme-button) > .label,
.post-header-author > .label,
.post-tag > .label,
.post-tags a > .label,
a.button-link > .label {
  background-image: linear-gradient(
    90deg,
    transparent,
    transparent 25%,
    var(--ghost-accent-color) 37.5%,
    var(--ghost-accent-color) 62.5%,
    transparent 75%,
    transparent
  );
}

/* button fixes*/
:root {
    --button--padding-v: 1rem;
    --button--padding-h: 1.25rem;
}

/* Remove card scaling */
.card-link:hover~.card-content,
.card:hover .card-content {
    background-color: var(--color-background-300);
    transform: none !important;
}

/* Hero bio fixes */
:root {
    --container-small--width: 450px;
}

.section-hero p {
    font-size: 16px;
}

/* Date format in uppercase */
.card-count,
.card-date {
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.post-header-meta {
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Bigger author name */
.post-header-author {
    font-size: 0.95rem;
}

/* Read more divider in uppercase */
.section-title {
    font-size: var(--font-x-small);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: var(--font-weight-semibold);
}
/* Bigger, Left aligned post titles */
body.page-template .section-hero-content  {
    text-align: left;
    align-items: flex-start; 
    max-width: var(--container--width);
}
body.page-template .section-hero.container .section-hero-content h1 { 
    font-size: 1.5rem;
    font-variation-settings: "wght" var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
}

body.page-template .section-hero p {
    font-size: 18px;
      color: var(--color-contrast);
} 

/* Easier to read card titles */
.card-title,
.section-hero h1,
.section-subscription h2 {
    font-variation-settings: "wght" var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
}

.card-title {
    font-size: 1.2rem;
}

.card-image+.card-title {
    padding-top: .05em;
}

.card-recommendation .card-title {
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  font-variation-settings: "wght" var(--font-weight-semibold);
}

.card-recommendation .card-image+.card-title {
    padding-top: .18em;
}

/* Fixed year badge linebreak */
.section-list-badge {
    padding-bottom: 1rem;
}

/* Fixed dropdown color in light mode */
.dropdown {
    background-color: var(--color-background);
}

/* Better styling for general links */
a {
    text-decoration-thickness: 0.08em;
    text-decoration: none !important;
    font-weight: var(--font-weight-medium) !important;
    font-variation-settings: "wght" var(--font-weight-medium);
}

/* More spacing at the top of headings */
.post-content>:where(h1, h2, h3, h4, h5, h6) {
    margin-top: var(--spacing-7);
    font-weight: var(--font-weight-semibold) !important;
    font-variation-settings: "wght" var(--font-weight-semibold) !important;
}

.post-content p {
    margin-top: var(--spacing-4);

    /* Ensure compatibility across all browsers */
    -webkit-font-feature-settings: "cv03" 1, "cv05" 1, "cv06" 1, "cv10" 1, "cv11" 1, "cv13" 1, "cv14" 1, "cv15" 1;
    -moz-font-feature-settings: "cv03" 1, "cv05" 1, "cv06" 1, "cv10" 1, "cv11" 1, "cv13" 1, "cv14" 1, "cv15" 1;
    -ms-font-feature-settings: "cv03" 1, "cv05" 1, "cv06" 1, "cv10" 1, "cv11" 1, "cv13" 1, "cv14" 1, "cv15" 1;
    font-feature-settings: "cv03" 1, "cv05" 1, "cv06" 1, "cv10" 1, "cv11" 1, "cv13" 1, "cv14" 1, "cv15" 1;
}

.post .post-header .post-header-container {
    text-align: left;
    align-items: flex-start;
    width: var(--container--width);
}

/* MISC */
.footer-copyright > span {
    display: none;
}
  .post-content .kg-bookmark-title {
    font-variation-settings: "wght" var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
}
 .post-title {
    font-size: 1.85rem;
    font-variation-settings: "wght" var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
}

.post-content .kg-gallery-card {
    --gap: 8px;
}
  
.kg-gallery-container {
    position: relative;
    padding-top: 4px;
    padding-bottom: 4px;
}
/* Better Italics */
p em {
    font-variation-settings: "ital" 0.9 !important;
    font-style: normal !important;
}