/* Atharva Theme - screen.css
   This file provides fallback styles if inline styles in default.hbs don't load.
   Main styles are in default.hbs for performance.
*/

/* ============================================
   Tables - following Butterick's Practical Typography
   - No cell borders (text creates implied grid)
   - Generous cell padding for legibility
   - Subtle header separator only
   ============================================ */

.gh-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.gh-content th,
.gh-content td {
    padding: 0.3rem 0.5rem 0.3rem 0;
    vertical-align: top;
    border: none;
}

/* First column needs no left padding */
.gh-content th:first-child,
.gh-content td:first-child {
    padding-left: 0;
}

/* Last column needs no right padding */
.gh-content th:last-child,
.gh-content td:last-child {
    padding-right: 0;
}

/* Header styling - subtle bottom border only */
.gh-content thead th {
    font-weight: 600;
    border-bottom: 1.5px solid var(--color-text, #000);
    padding-bottom: 0.25rem;
}

/* Body rows - clean with no borders */
.gh-content tbody tr {
    border: none;
}

/* Optional: subtle separator between rows for long tables */
.gh-content tbody td {
    border-bottom: 1px solid var(--color-border, rgba(0,0,0,0.08));
}

/* Remove bottom border from last row */
.gh-content tbody tr:last-child td {
    border-bottom: none;
}

/* Respect markdown table alignment (set via :---, :---:, ---:) */
.gh-content th[align="left"],
.gh-content td[align="left"] {
    text-align: left;
}

.gh-content th[align="center"],
.gh-content td[align="center"] {
    text-align: center;
}

.gh-content th[align="right"],
.gh-content td[align="right"] {
    text-align: right;
}

/* Responsive: allow horizontal scroll on small screens */
@media (max-width: 600px) {
    .gh-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .gh-content th,
    .gh-content td {
        padding: 0.25rem 0.4rem 0.25rem 0;
        white-space: nowrap;
    }
}

/* Reset - box-sizing is in default.hbs inline styles */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }

/* Ensure Ghost cards display correctly */
.kg-card {
    margin: 1.5rem 0;
}

.kg-image-card img {
    margin: 0 auto;
}

.kg-width-wide {
    max-width: 100%;
}

.kg-width-full {
    max-width: 100%;
}

.kg-bookmark-card {
    border: 1px solid var(--color-border, rgba(0,0,0,0.1));
    border-radius: 6px;
    overflow: hidden;
}

.kg-bookmark-container {
    display: flex;
    text-decoration: none;
    color: inherit;
}

.kg-bookmark-content {
    flex: 1;
    padding: 1rem;
}

.kg-bookmark-title {
    font-weight: 500;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.kg-bookmark-description {
    font-size: 0.9rem;
    color: var(--color-text-secondary, #666);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kg-bookmark-metadata {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--color-text-secondary, #666);
}

.kg-bookmark-icon {
    width: 20px;
    height: 20px;
}

.kg-bookmark-author,
.kg-bookmark-publisher {
    font-weight: 500;
}

.kg-bookmark-thumbnail {
    width: 150px;
    flex-shrink: 0;
}

.kg-bookmark-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Gallery cards */
.kg-gallery-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.kg-gallery-row {
    display: flex;
    gap: 0.5rem;
    width: 100%;
}

.kg-gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Embed cards */
.kg-embed-card {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.kg-embed-card iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Toggle/Accordion cards */
.kg-toggle-card {
    border: 1px solid var(--color-border, rgba(0,0,0,0.1));
    border-radius: 6px;
    padding: 1rem;
    margin: 1.5rem 0;
}

.kg-toggle-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
}

.kg-toggle-content {
    margin-top: 1rem;
    display: none;
}

.kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-content {
    display: block;
}

/* Callout/Info cards */
.kg-callout-card {
    padding: 1.25rem;
    border-radius: 6px;
    margin: 1.5rem 0;
}

.kg-callout-card-grey {
    background: rgba(128, 128, 128, 0.1);
}

.kg-callout-card-white {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--color-border, rgba(0,0,0,0.1));
}

.kg-callout-card-blue {
    background: rgba(33, 150, 243, 0.1);
}

.kg-callout-card-green {
    background: rgba(76, 175, 80, 0.1);
}

.kg-callout-card-yellow {
    background: rgba(255, 193, 7, 0.15);
}

.kg-callout-card-red {
    background: rgba(244, 67, 54, 0.1);
}

.kg-callout-card-pink {
    background: rgba(233, 30, 99, 0.1);
}

.kg-callout-card-purple {
    background: rgba(156, 39, 176, 0.1);
}

.kg-callout-emoji {
    margin-right: 0.5rem;
}

/* Button cards */
.kg-button-card {
    display: flex;
    justify-content: center;
    margin: 1.5rem 0;
}

.kg-btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--color-text, #2c2c2c);
    color: var(--color-bg, #FAF7ED);
    text-decoration: none;
    border-radius: 4px;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.kg-btn:hover {
    opacity: 0.9;
    color: var(--color-bg, #FAF7ED);
}

/* Product cards */
.kg-product-card {
    border: 1px solid var(--color-border, rgba(0,0,0,0.1));
    border-radius: 6px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.kg-product-card-title {
    font-weight: 500;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

/* File cards */
.kg-file-card {
    border: 1px solid var(--color-border, rgba(0,0,0,0.1));
    border-radius: 6px;
    overflow: hidden;
    margin: 1.5rem 0;
}

.kg-file-card-container {
    display: flex;
    align-items: center;
    padding: 1rem;
    text-decoration: none;
    color: inherit;
}

.kg-file-card-contents {
    flex: 1;
}

.kg-file-card-title {
    font-weight: 500;
}

.kg-file-card-metadata {
    font-size: 0.8rem;
    color: var(--color-text-secondary, #666);
    margin-top: 0.25rem;
}

/* Audio cards */
.kg-audio-card {
    border: 1px solid var(--color-border, rgba(0,0,0,0.1));
    border-radius: 6px;
    padding: 1rem;
    margin: 1.5rem 0;
}

/* Video cards */
.kg-video-card {
    margin: 1.5rem 0;
}

.kg-video-card video {
    width: 100%;
    border-radius: 6px;
}

/* Header cards */
.kg-header-card {
    padding: 4rem 2rem;
    text-align: center;
    margin: 1.5rem 0;
    border-radius: 6px;
}

.kg-header-card h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

@media (max-width: 600px) {
    .kg-bookmark-container {
        flex-direction: column;
    }

    .kg-bookmark-thumbnail {
        width: 100%;
        height: 150px;
        order: -1;
    }
}

/* ============================================
   Comments Section Styling
   Matches site theme: warm cream (#FAF7ED light, #1f1e1b dark)
   Font: Newsreader, Black text (#000000)
   ============================================ */

.post-comments {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border, rgba(0,0,0,0.1));
}

/* Comments section heading */
.post-comments h2,
.post-comments .comments-title {
    font-family: var(--font-body, 'Newsreader', Georgia, serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text, #000000);
    margin-bottom: 1.5rem;
    letter-spacing: -0.01em;
}

/* Ghost comments iframe container styling */
.gh-comments,
[data-ghost-comments] {
    background-color: var(--color-bg, #FAF7ED);
    border-radius: 8px;
    overflow: hidden;
}

/* Comments wrapper - ensure proper spacing */
.post-comments > * {
    max-width: 100%;
}

/* Style the Ghost comments container frame */
.post-comments iframe {
    border: none !important;
    width: 100% !important;
    min-height: 200px;
}

/* Comments area visual enhancements */
.post-comments::before {
    display: none; /* Remove any pseudo-element decorations if not needed */
}

/* Fallback styling for comments loading state */
.post-comments:empty::after {
    content: 'Loading comments...';
    display: block;
    text-align: center;
    padding: 2rem;
    color: var(--color-text-secondary, #444);
    font-family: var(--font-body, 'Newsreader', Georgia, serif);
    font-style: italic;
}

/* ============================================
   Custom CSS Properties for Ghost Comments UI
   These variables are passed to the comments iframe
   when Ghost supports CSS custom property inheritance
   ============================================ */

:root {
    /* Ghost comments theming variables */
    --ghost-accent-color: var(--color-accent, #915109);
    --ghost-comment-bg: var(--color-bg, #FAF7ED);
    --ghost-comment-text: var(--color-text, #000000);
    --ghost-comment-border: var(--color-border, rgba(0,0,0,0.1));
}

/* Dark mode comment variables */
@media (prefers-color-scheme: dark) {
    html:not(.light-mode) {
        --ghost-accent-color: var(--color-accent, #d4a574);
        --ghost-comment-bg: var(--color-bg, #1f1e1b);
        --ghost-comment-text: var(--color-text, #e8e6e0);
        --ghost-comment-border: var(--color-border, rgba(255,255,255,0.1));
    }
}

html.dark-mode {
    --ghost-accent-color: var(--color-accent, #d4a574);
    --ghost-comment-bg: var(--color-bg, #1f1e1b);
    --ghost-comment-text: var(--color-text, #e8e6e0);
    --ghost-comment-border: var(--color-border, rgba(255,255,255,0.1));
}

html.light-mode {
    --ghost-accent-color: var(--color-accent, #915109);
    --ghost-comment-bg: var(--color-bg, #FAF7ED);
    --ghost-comment-text: var(--color-text, #000000);
    --ghost-comment-border: var(--color-border, rgba(0,0,0,0.1));
}

/* ============================================
   Comments section responsive adjustments
   ============================================ */

@media (max-width: 600px) {
    .post-comments {
        margin-top: 2rem;
        padding-top: 1.5rem;
    }
    
    .post-comments h2,
    .post-comments .comments-title {
        font-size: 1.25rem;
    }
}

/* ============================================
   Sign-in/Sign-up CTA styling within comments
   These styles target Ghost's default comment CTAs
   ============================================ */

.post-comments a {
    color: var(--color-link, #1a5f7a);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.post-comments a:hover {
    color: var(--color-link-hover, #915109);
}

/* Button styling for comment actions */
.post-comments button,
.post-comments .btn {
    font-family: var(--font-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    background-color: var(--color-text, #000000);
    color: var(--color-bg, #FAF7ED);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.post-comments button:hover,
.post-comments .btn:hover {
    opacity: 0.85;
}