/*
Theme Name: MJH Kadence Child
Theme URI: https://mjh.yoga/
Description: Small child theme for mjh.yoga — restyles Kadence with the link-in-bio palette (amber + slate + system fonts) and adds templates for the admin-only `note` CPT.
Author: MJH
Template: kadence
Version: 1.8.2
Text Domain: mjh-kadence-child
*/

:root {
    --mjh-bg: #f8fafc;
    --mjh-surface: #ffffff;
    --mjh-text: #0f172a;
    --mjh-text-secondary: #64748b;
    --mjh-border: #e2e8f0;
    --mjh-divider: #cbd5e1;
    --mjh-accent: #d97706;
    --mjh-accent-alt: #0891b2;
    --mjh-hover-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    --mjh-card-radius: 16px;
    --mjh-thumb-radius: 12px;
    --mjh-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --mjh-bg: #0f172a;
        --mjh-surface: #1e293b;
        --mjh-text: #f1f5f9;
        --mjh-text-secondary: #94a3b8;
        --mjh-border: #334155;
        --mjh-divider: #475569;
        --mjh-hover-shadow: 0 4px 24px rgba(0, 0, 0, 0.32);
    }
}

/* Global typography + background */
body,
.site {
    font-family: var(--mjh-font);
    background: var(--mjh-bg);
    color: var(--mjh-text);
}

/* ---- Header ---- */
.site-header,
.site-header-wrap,
.site-header-main,
.site-header-inner-wrap {
    background: var(--mjh-surface) !important;
    border-bottom: 1px solid var(--mjh-border);
    box-shadow: none !important;
}

.site-branding .site-title,
.site-branding .site-title a {
    font-family: var(--mjh-font);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--mjh-text) !important;
    text-decoration: none;
}

/* Hide the public Kadence nav entirely — personal shortcuts live in the
   floating admin bar, and the site doesn't need a public menu. */
.header-navigation,
.header-menu-container,
.main-navigation,
.mobile-toggle-open-container,
.header-main-center,
.header-main-right {
    display: none !important;
}
/* Keep the brand/logo but let it sit alone, centered or left-aligned */
.site-header-main,
.site-header-inner-wrap {
    justify-content: flex-start !important;
}

/* Hide the entire Kadence header on notes pages — the floating admin bar
   handles navigation, and the reading view is cleaner without it. */
.single-note #masthead,
.single-note .site-header,
.post-type-archive-note #masthead,
.post-type-archive-note .site-header {
    display: none !important;
}

/* ---- Links ---- */
.entry-content a,
.site-content a {
    color: var(--mjh-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.entry-content a:hover,
.site-content a:hover {
    color: var(--mjh-accent);
    text-decoration-thickness: 2px;
}

/* ---- Headings ---- */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-title {
    font-family: var(--mjh-font);
    color: var(--mjh-text);
    letter-spacing: -0.01em;
}

.entry-content h2 {
    color: var(--mjh-accent);
    font-weight: 600;
    margin-top: 2rem;
}

/* ---- Buttons ---- */
.wp-block-button__link,
.button,
button[type="submit"] {
    background: var(--mjh-accent) !important;
    border-color: var(--mjh-accent) !important;
    border-radius: 10px !important;
    font-family: var(--mjh-font);
    font-weight: 600;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.wp-block-button__link:hover,
.button:hover,
button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: var(--mjh-hover-shadow);
}

/* ---- Notes CPT — single (reading view) ---- */
.single-note .content-container {
    background: var(--mjh-bg);
}

.single-note .entry-content {
    max-width: 960px;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.65;
}

.single-note .entry-content .wp-block-columns {
    gap: 1.75rem;
    margin: 1.5rem 0 2.5rem;
}

.single-note .entry-content figure.wp-block-image {
    margin: 0 0 1rem;
    border-radius: var(--mjh-thumb-radius);
    overflow: hidden;
    box-shadow: var(--mjh-hover-shadow);
    background: var(--mjh-surface);
}

.single-note .entry-content figure.wp-block-image img {
    border-radius: var(--mjh-thumb-radius);
    cursor: zoom-in;
    display: block;
    width: 100%;
    height: auto;
}

/* Stack columns on narrow screens */
@media (max-width: 700px) {
    .single-note .entry-content .wp-block-columns {
        flex-direction: column !important;
    }
    .single-note .entry-content .wp-block-column {
        flex-basis: 100% !important;
    }
}

/* Shala Daily quick-draft button on single note pages (admin + tag only) */
.mjh-shala-btn-wrap {
    max-width: 960px;
    margin: 0 auto 1.5rem;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.mjh-shala-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    border: 1px solid var(--mjh-accent);
    border-radius: 999px;
    background: var(--mjh-accent);
    color: #ffffff;
    font: 600 0.9375rem / 1 var(--mjh-font);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.mjh-shala-btn:hover { background: #b45309; border-color: #b45309; transform: translateY(-1px); }
.mjh-shala-btn--ts { background: #0ea5e9; border-color: #0ea5e9; }
.mjh-shala-btn--ts:hover { background: #0369a1; border-color: #0369a1; }
.mjh-shala-btn--essay { background: #7c3aed; border-color: #7c3aed; }
.mjh-shala-btn--essay:hover { background: #5b21b6; border-color: #5b21b6; }
.mjh-shala-btn:disabled { opacity: 0.6; cursor: wait; transform: none; }
.mjh-shala-btn__icon { font-size: 1.1rem; line-height: 1; }
.mjh-shala-btn__status { font-size: 0.875rem; color: var(--mjh-text-secondary); }
.mjh-shala-btn__done {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    background: #059669;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 600;
}

/* User annotation section on single note pages */
.mjh-annotation {
    max-width: 960px;
    margin: 0 auto 2rem;
    padding: 1rem 1.125rem 0.875rem;
    background: var(--mjh-surface);
    border: 1px solid var(--mjh-border);
    border-radius: 12px;
}
.mjh-annotation__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}
.mjh-annotation__label { font-weight: 600; font-size: 0.9375rem; }
.mjh-annotation__hint { font-size: 0.75rem; color: var(--mjh-text-secondary); }
.mjh-annotation__text {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--mjh-border);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    font: 0.9375rem / 1.5 var(--mjh-font);
    background: var(--mjh-bg);
    color: var(--mjh-text);
    resize: vertical;
    min-height: 4.5rem;
}
.mjh-annotation__text:focus { outline: 2px solid var(--mjh-accent); outline-offset: 1px; }
.mjh-annotation__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.mjh-annotation__save {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--mjh-accent);
    border-radius: 999px;
    background: var(--mjh-accent);
    color: #ffffff;
    font: 600 0.8125rem / 1 var(--mjh-font);
    cursor: pointer;
}
.mjh-annotation__save:hover { background: #b45309; border-color: #b45309; }
.mjh-annotation__save:disabled { opacity: 0.6; cursor: wait; }
.mjh-annotation__status { font-size: 0.8125rem; color: var(--mjh-text-secondary); }
.mjh-annotation__status.is-ok { color: #059669; font-weight: 600; }

/* Prev/next navigation between notes */
.mjh-note-nav {
    max-width: 960px;
    margin: 3rem auto 1rem;
    padding-top: 2rem;
    border-top: 1px solid var(--mjh-border);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.mjh-note-nav__archive {
    align-self: flex-start;
    color: var(--mjh-text-secondary) !important;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: color 0.15s ease;
}
.mjh-note-nav__archive:hover {
    color: var(--mjh-accent) !important;
}
.mjh-note-nav__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.mjh-note-nav__link {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.125rem;
    background: var(--mjh-surface);
    border: 1px solid var(--mjh-border);
    border-radius: var(--mjh-card-radius);
    text-decoration: none !important;
    color: var(--mjh-text) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    min-width: 0;
}
.mjh-note-nav__link:hover {
    transform: translateY(-1px);
    box-shadow: var(--mjh-hover-shadow);
    border-color: var(--mjh-divider);
}
.mjh-note-nav__link--next {
    flex-direction: row-reverse;
    text-align: right;
}
.mjh-note-nav__arrow {
    font-size: 1.25rem;
    color: var(--mjh-accent);
    flex: 0 0 auto;
    line-height: 1;
}
.mjh-note-nav__body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    flex: 1 1 auto;
}
.mjh-note-nav__direction {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--mjh-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.mjh-note-nav__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--mjh-text);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mjh-note-nav__link--disabled {
    display: block;
    background: transparent;
    border: 1px dashed var(--mjh-border);
    border-radius: var(--mjh-card-radius);
    opacity: 0.35;
    pointer-events: none;
}
@media (max-width: 600px) {
    .mjh-note-nav__pair {
        grid-template-columns: 1fr;
    }
}

.single-note .entry-content h2.wp-block-heading {
    color: var(--mjh-accent);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 3rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--mjh-border);
}

.single-note .entry-content p {
    color: var(--mjh-text);
}

.single-note .entry-title {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 2rem;
}

/* ---- Notes CPT — archive (card grid) ---- */
.post-type-archive-note .content-container,
.tax-post_tag .content-container {
    background: var(--mjh-bg);
    padding: 2rem 1rem;
}

/* Masonry-style columns so each card matches its note's natural orientation
   (tall for A4/A6 portrait, wide for landscape). */
.mjh-notes-grid {
    column-count: 3;
    column-gap: 1.25rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 0;
}
@media (max-width: 900px) {
    .mjh-notes-grid { column-count: 2; }
}
@media (max-width: 600px) {
    .mjh-notes-grid { column-count: 1; }
}

.mjh-note-card {
    display: block;
    background: var(--mjh-surface);
    border: 1px solid var(--mjh-border);
    border-radius: var(--mjh-card-radius);
    overflow: hidden;
    text-decoration: none !important;
    color: inherit !important;
    margin: 0 0 1.25rem 0;
    break-inside: avoid;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.mjh-note-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--mjh-hover-shadow);
    border-color: var(--mjh-divider);
}

.mjh-note-card__thumb {
    background: var(--mjh-bg);
    border-bottom: 1px solid var(--mjh-border);
    display: block;
    overflow: hidden;
}
.mjh-note-card__thumb img,
.mjh-note-card__thumb > img,
a.mjh-note-card .mjh-note-card__thumb img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
}
.mjh-note-card__thumb--empty {
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--mjh-text-secondary);
}

.mjh-note-card__body {
    padding: 1rem 1.125rem 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.mjh-note-card__title {
    font-family: var(--mjh-font);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--mjh-text);
    line-height: 1.35;
    margin: 0;
}

.mjh-note-card__excerpt {
    font-size: 0.875rem;
    color: var(--mjh-text-secondary);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mjh-note-card__meta {
    font-size: 0.8125rem;
    color: var(--mjh-text-secondary);
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.mjh-note-card__tag {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: white;
    background: var(--mjh-accent);
}
.mjh-note-card__pages {
    font-size: 0.75rem;
    color: var(--mjh-text-secondary);
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--mjh-border);
    border-radius: 999px;
    line-height: 1;
    white-space: nowrap;
}
.mjh-note-card__tag--diary       { background: var(--mjh-accent); }
.mjh-note-card__tag--shala-daily { background: #ea580c; }
.mjh-note-card__tag--pickings    { background: var(--mjh-accent-alt); }
.mjh-note-card__tag--seed        { background: #fb923c; }
.mjh-note-card__tag--essay       { background: #7c3aed; }
.mjh-note-card__tag--techsupport { background: #65a30d; }

.mjh-notes-filter {
    max-width: 1100px;
    margin: 0 auto 1.25rem;
    padding: 0 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}
.mjh-notes-filter__btn {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--mjh-border);
    border-radius: 999px;
    background: var(--mjh-surface);
    color: var(--mjh-text);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.mjh-notes-filter__btn:hover {
    border-color: var(--mjh-accent);
    color: var(--mjh-accent);
}
.mjh-notes-filter__btn.is-active {
    background: var(--mjh-accent);
    border-color: var(--mjh-accent);
    color: #ffffff;
}
.mjh-notes-filter__btn.is-active:hover {
    color: #ffffff;
}

.mjh-notes-header {
    max-width: 1100px;
    margin: 0 auto 1rem;
    padding: 0 0.5rem;
}
.mjh-notes-header h1 {
    font-family: var(--mjh-font);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--mjh-text);
    margin: 0 0 0.25rem 0;
}
.mjh-notes-header p {
    color: var(--mjh-text-secondary);
    margin: 0;
}

/* ---- Lightbox — show A4/A6 notes at readable size ---- */
/* WP's native lightbox fits the image to viewport, which shrinks A4 scans
   enough to make handwriting hard to read. Remove the fit constraints and
   scroll inside the overlay when the image exceeds the viewport. */
.wp-lightbox-overlay {
    background: rgba(15, 23, 42, 0.94) !important;
}
.wp-lightbox-overlay .wp-lightbox-image-container,
.wp-lightbox-overlay .scrim,
.wp-lightbox-overlay .lightbox-image-container,
.wp-lightbox-overlay .wp-block-image {
    overflow: auto !important;
    max-height: 100vh !important;
    max-width: 100vw !important;
}
.wp-lightbox-overlay .wp-lightbox-image-container img,
.wp-lightbox-overlay .wp-block-image img,
.wp-lightbox-overlay img.wp-image,
.wp-lightbox-overlay img {
    max-width: none !important;
    max-height: none !important;
    width: auto !important;
    height: auto !important;
    object-fit: initial !important;
    transform: none !important;
    display: block;
    margin: 2rem auto;
}
.wp-lightbox-overlay .close-button {
    position: fixed !important;
    top: 1rem;
    right: 1rem;
    z-index: 10000;
}

/* ---- Admin-only floating command bar ---- */
.mjh-admin-bar {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    display: flex;
    gap: 0.5rem;
}
.mjh-admin-bar a {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: var(--mjh-surface);
    color: var(--mjh-accent) !important;
    border: 1px solid var(--mjh-border);
    border-radius: 999px;
    font-family: var(--mjh-font);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mjh-admin-bar a:hover {
    transform: translateY(-1px);
    box-shadow: var(--mjh-hover-shadow);
    color: var(--mjh-accent) !important;
}
/* Don't let the Kadence header overlap it on scroll */
body.admin-bar .mjh-admin-bar {
    top: calc(var(--wp-admin--admin-bar--height, 32px) + 0.5rem);
}

/* ---- /command page styling ---- */
.page-template-command .entry-content,
body.page-command .entry-content {
    max-width: 960px;
    margin: 0 auto;
}
.mjh-command-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}
.mjh-command-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.25rem;
    background: var(--mjh-surface);
    border: 1px solid var(--mjh-border);
    border-radius: var(--mjh-card-radius);
    text-decoration: none !important;
    color: var(--mjh-text) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mjh-command-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--mjh-hover-shadow);
}
.mjh-command-card__icon {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}
.mjh-command-card__title {
    font-weight: 600;
    font-size: 1rem;
}
.mjh-command-card__sub {
    font-size: 0.8125rem;
    color: var(--mjh-text-secondary);
}

/* ---- Light touchups to generic pages ---- */
.entry-header {
    background: transparent !important;
}

.site-footer {
    background: var(--mjh-surface) !important;
    color: var(--mjh-text-secondary);
    border-top: 1px solid var(--mjh-border);
}
.site-footer a {
    color: var(--mjh-text-secondary) !important;
}
.site-footer a:hover {
    color: var(--mjh-accent) !important;
}