/*! styles.css for danjewett.net
 * Author: Dan Jewett
 * -------------------------------------------------- */

/* ==========================================================================
   Table of Contents:
   1. CSS Reset & Base Styles
   2. Typography & Fonts
   3. Colors & Theme
   4. Layout & Grid
   5. Components
      5.1 Navigation
      5.2 Cards
      5.3 Book Grid
      5.4 Footer
   6. Utilities & Helpers
   ========================================================================== */

/* ==========================================================================
   1. CSS Reset & Base Styles
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin-block-end: 0;
}

ul[role='list'],
ol[role='list'] {
    list-style: none;
}

img,
picture {
    max-width: 100%;
    display: block;
}

input,
button,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
}

textarea:not([rows]) {
    min-height: 10em;
}

:target {
    scroll-margin-block: 5ex;
}

/* ==========================================================================
      2. Typography & Fonts
========================================================================== */

@font-face {
    font-family: 'Zilla Slab';
    src: url('../fonts/ZillSlab-Regular.woff2') format('woff2'),
        url('../fonts/ZillaSlab-Regular.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'Zilla Slab Italic';
    src: url('../fonts/ZillaSlab-Italic 2.woff2') format('woff2'),
        url('../fonts/ZillaSlab-Italic 2.ttf') format('truetype');
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter.woff2') format('woff2'),
        url('../fonts/Inter.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'Inter Italic';
    src: url('../fonts/Inter-Italic.woff2') format('woff2'),
        url('../fonts/Inter-Italic.ttf') format('truetype');
    font-style: italic;
}

/* Base Typography */
body {
    font-family: "Zilla Slab";
    font-size: 1.2rem;
    line-height: 2rem;
}

h1,
h2,
h3,
h4 {
    font-family: "Zilla Slab";
    font-weight: 400;
    line-height: 1.1;
    text-wrap: balance;
    margin-bottom: 1rem;
}

p {
    margin: 0 0 1rem 0;
    padding: 0;
}

sub {
    font-family: sans-serif;
    font-size: .72rem;
    color: rgb(94, 142, 87);
    margin-left: 1px;
    line-height: 0;
  }


.small {
    font-size: 0.9rem;
    position: relative;
    top: 0.1em;
}

small {
    font-size: 0.9rem;
}

/* Links */
a {
    text-decoration: none;
    color: rgb(94, 142, 87);
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size 0.3s ease-in-out;
}

a:hover,
a:focus {
    background-size: 100% 1px;
}

h3 a {
    display: inline-flex;
    align-items: center;
}

/* Figure Images */
figure {
    margin: 2em 0 1em 0;
    padding: 0;
  }
  
  figure img {
    display: block;
    width: 90%;
    height: auto;
    margin: 0 auto;
    border-radius: 8px;
  }
 
  figcaption,
  .default-card figcaption {
    font-family: sans-serif;
    font-size: 0.9rem;
    color: rgb(127, 108, 76);
    padding: 0.5rem 0;
    text-align: center;
  }
  .default-card figure {
    margin-top: 0.9rem;
  }
  a {
    text-decoration: none;
    color: rgb(94, 142, 87);
  }

/* Typography Utilities */
.logo {
    font-size: 2rem;
}

.arrow {
    font-size: 1.2rem;
}

.post-header {
    margin-bottom: 3rem;
}

.post-status,
.post-dates {
    margin: 0 0 0.5rem 0;
    padding: 0;
    font-size: 1rem;
    line-height: 1.2rem;
    color: #999;
}

.text-with-newlines {
    white-space: pre-line;
}

/* ==========================================================================
      3. Colors & Theme
========================================================================== */

body {
    background-color: rgb(254, 250, 224);
    color: rgb(127, 108, 76);
}

.home-header blockquote {
    background-color: #f7eecf;
    color: rgb(127, 108, 76);
    /* border: 1px solid #d0d6fd; */
    border-radius: 8px;
    padding: 1rem 2rem;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
}

hr {
    margin-top: 2rem;
    border: 0;
    border-top: 1px solid rgb(94, 142, 87);
}

.navbar {
    background-color: rgb(250, 237, 205);
}

footer {
    background-color: rgb(250, 237, 205);
}

/* ==========================================================================
      4. Layout & Grid
========================================================================== */

/* Page Layout */
body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    margin: 0;
}

.home-header {
    display: flex;
    justify-content: space-around;
}
.main-quote {
    /* align-items: center; */
    align-content: center;
    text-align: center;
    /* padding: 2em; */
}

/* Main Content */
main {
    display: grid;
    justify-content: center;
    width: 100%;
    padding: 2rem 0 4rem 0;

}

/* main>* {
    width: 100%;
    max-width: 1440px;
    padding: 0 2rem;
} */

.content-wide {
    width: 100%;
    min-width: 0;
    max-width: 1440px;
    padding: 0 2rem;
}

.content-narrow {
    width: 100%;
    max-width: 768px;
    padding: 0 2rem;
}

.content-poem {
    width: 100%;
    max-width: 600px;
    padding: 0 2rem;
}

/* Categories Grid */
.categories {
    display: grid;
    gap: 2em;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        "poems poems essays"
        "notes books books";
    max-width: 1440px;
    margin: 0 auto;
}

.essays {
    grid-area: essays;
}

.poems {
    grid-area: poems;
}

.notes {
    grid-area: notes;
}

.books {
    grid-area: books;
}

@media (max-width: 768px) {
    .categories {
        grid-template-columns: 1fr;
        grid-template-areas:
            "poems"
            "essays"
            "notes"
            "books";
    }
    .home-header {
        flex-direction: column;
    }
}

.page-description,
.category-description {
    max-width: 600px;
}

.main-quote blockquote {
    max-width: 600px;
}
.collection-header {
    margin-bottom: 1rem;
}

/* ==========================================================================
      5. Components
========================================================================== */

/* 5.1 Navigation */
.navbar {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 1rem 0;
}

.navbar>div {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1440px;
    padding: 0 2rem;
}

.nav-links {
    display: flex;
    gap: 1rem;
}

/* 5.2 Cards */

/* Masonry/Column Layout */
.mosaic-layout {
    /* margin-top: 2rem; */
    column-count: 1;
    column-gap: 1.5rem;
    width: 100%;
}

@media (min-width: 768px) {
    .mosaic-layout {
        column-count: 2;
    }
}

@media (min-width: 1024px) {
    .mosaic-layout {
        column-count: 3;
    }
}

/* Base card styles */
.default-card {
    width: 100%;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s ease;
}

.default-card:hover {
    transform: translateY(-4px);
}

/* Card content container */
.card-content {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
}

/* Card Typography */
.default-card h4 {
    margin: 0 0 0.5rem 0;
}

.entry-date {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}

.entry-excerpt {
    font-size: 0.9rem;
    line-height: 1.4rem;
    margin: 0.5rem 0 0 0;
    flex-grow: 1;
}

/* Add minimum width to inner content */
.entry-excerpt,
.entry-date,
h4 {
    width: 100%;
    min-width: 100%;
}

/* Category-specific card styles */
.card-essay,
.card-poem,
.card-note,
.card-moment {
    position: relative;
    width: 100%;
}

.card-essay {
    background-color: rgb(233, 237, 201);
}

.card-poem {
    background-color: rgb(250, 237, 205);
}

.card-note {
    background-color: rgb(250, 237, 205);
    background-color: rgb(239, 233, 216);
    /* border: 1px solid rgb(217, 205, 159); */
}

.card-moment {
    font-size: 1rem;
    background-color: rgb(233, 237, 201);
}


.card-image-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Layout variations */
.single-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 65ch;
}

/* Topics */
.post-topics {
    font-size: 1rem;
    margin: 2rem 0;
}

.topic-count {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
}

/* 5.3 Book Grid */
.books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 4rem 2rem;
    padding: 1rem 0;
}

/* Override for dedicated books page */
.content-wide > .books > .books-grid {
    max-width: 1000px;
    margin: 0 auto;
}

.book-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    transition: transform 0.2s ease;
}

.book-card:hover {
    transform: translateY(-4px);
}

.book-cover {
    width: 100%;
    aspect-ratio: 2/3;
    border-radius: 5px;
    object-fit: cover;
    object-position: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.book-info {
    width: 100%;
    font-family: "Inter", sans-serif;
    padding-left: 0;
}

.book-info h3 {
    font-size: 1rem;
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

.book-author {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    line-height: 1.3rem;
    color: #666;
}

.book-date {
    font-size: 0.8rem;
    line-height: 1rem;
    color: #888;
    margin: 0;
}

/* Base layout */
.first-paragraphs-grid.books-grid {
    display: block;
    column-count: 2;
    column-gap: 2.5rem;
    width: 100%;
    padding: 0;
}

.first-paragraphs-grid .book-card {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    display: inline-block;
    width: 100%;
    margin-bottom: 2.5rem;
}

/* Default two-column layout with compact covers */
.book-card-inner {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 2rem;
    padding: 1.5rem;
    border-radius: 8px;
    background-color: rgb(250, 237, 205);
    align-items: start;
}

/* Keep your existing card content styles */
.first-paragraphs-grid .book-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.first-paragraphs-grid .first-paragraph {
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
    font-style: italic;
}

.first-paragraphs-grid .book-date {
    margin-top: 1rem;
}

.first-paragraphs-grid .book-cover {
    width: 100%;
    height: auto;
    aspect-ratio: 2/3;
    object-fit: cover;
    border-radius: 5px;
}

/* Tablet and below - single column layout with slightly wider covers */
@media (max-width: 1040px) {
    .first-paragraphs-grid.books-grid {
        column-count: 1 !important;
    }
    
    .book-card-inner {
        grid-template-columns: minmax(120px, 180px) 1fr;
    }
}

/* Mobile styles - stacked layout */
@media (max-width: 600px) {
    .book-card-inner {
        grid-template-columns: 1fr;
    }

    .first-paragraphs-grid .book-cover {
        width: 120px;
    }
}

/* 5.4 Footer */
footer {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.footer-main {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 4rem 2rem;
    background-color: rgb(250, 237, 205);
}

.footer-content {
    width: 100%;
    max-width: 1440px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* gap: 4rem; */
}

.footer-left {
    display: flex;
    flex-direction: column;
}

.footer-subscription {
    max-width: 600px;
}

.footer-subscription h2 {
    font-size: 2rem;
    margin: 0 0 1.5rem 0;
}

.footer-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    justify-self: end;
    width: 75%;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-column a {
    color: rgb(94, 142, 87);
    font-size: 1.1rem;
    width: fit-content;
}

.footer-copyright {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 1rem;
}

.copyright-content {
    width: 100%;
    max-width: 1440px;
    text-align: center;
    font-size: 0.9rem;
    color: rgb(127, 108, 76);
}

@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .footer-right {
        justify-self: start;
        width: 100%;
    }

    .footer-subscription h2 {
        font-size: 1.75rem;
    }
}

/* 6. Utilities & Helpers */
kbd {
    --kbd-color-background: var(--color-background-primary);
    --kbd-color-border: gray;
    --kbd-color-text: var(--color-text-primary);
    background-color: var(--kbd-color-background);
    color: var(--kbd-color-text);
    border-radius: 0.25rem;
    border: 1px solid var(--kbd-color-border);
    box-shadow: 0 2px 0 1px var(--kbd-color-border);
    cursor: default;
    font-family: monospace;
    font-size: 0.75em;
    min-width: 0.75rem;
    display: inline-block;
    text-align: center;
    padding: 2px 5px;
    position: relative;
    top: -1px;
    margin: 0 0.5em;
}

kbd:hover {
    box-shadow: 0 1px 0 0.5px grey;
    top: 1px;
}

.youtube {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    margin-bottom: 2rem;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}