/**
 * Theme Name:     Essencealism
 * Author:         Aven Kaien
 * Template:       quire-ink
 * Text Domain:    Essencealism
 * Description:    Essencealism.com theme
 */

/* =====================================================
   ESSENCEALISM — TYPOGRAPHY CONTROL
   Edit values in this section only.
   ===================================================== */

:root {
    --type-base: 17px;
    --type-h1: 2.5rem;
    --type-h2: 0.875rem;
    --type-h3: 1.5rem;
    --type-h4: 1.25rem;
    --type-body: 1rem;
    --type-small: 0.875rem;
    --type-caption: 0.75rem;
    --line-heading: 1.2;
    --line-body: 1.7;
    --reading-width: 680px;
}

h2.reading-font.fs-h2 { font-weight: 400 !important; }

html { font-size: var(--type-base); }

h1, .fs-h1 { font-size: var(--type-h1); line-height: var(--line-heading); }
h2, .fs-h2 { font-size: var(--type-h2); line-height: var(--line-heading); }
h3, .fs-h3 { font-size: var(--type-h3); line-height: var(--line-heading); }
h4, .fs-h4 { font-size: var(--type-h4); line-height: var(--line-heading); }

body, .t-body { font-size: var(--type-body); line-height: var(--line-body); }
.t-small { font-size: var(--type-small); }
.caption, .t-caption { font-size: var(--type-caption); }
.reading-font { max-width: var(--reading-width); }

@media (max-width: 767px) {
    :root { --type-base: 15px; --reading-width: 100%; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    :root { --type-base: 16px; --reading-width: 100%; }
}
@media (min-width: 1024px) {
    :root { --type-base: 17px; }
}

/* Category badge and post number */
.pn-heading-meta .pn-cat {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    letter-spacing: -1px;
    border: 1px solid currentColor;
    border-radius: 10px;
    padding: 2px 8px;
}

.pn-heading-meta .pn-num {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    letter-spacing: 0;
    white-space: nowrap;
}

/* Author and comments links: underline only on hover */
.card-meta a { text-decoration: none; }
.card-meta a:hover { text-decoration: underline; }

span.tl-year-tag { display: none !important; }
.cat-item::before { display: none !important; }
.menu-item::before { display: none !important; }

/* Always align sidebar left */
aside#site-rail,
aside#site-rail .rail-inner,
aside#site-rail .widget,
aside#site-rail .widget h2,
aside#site-rail .widget ul,
aside#site-rail .widget li,
aside#site-rail .widget a,
aside#site-rail .widget span {
    direction: ltr !important;
    text-align: left !important;
}
aside#site-rail .widget a.rail-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
aside#site-rail .widget ul {
    padding-left: 0;
    margin-left: 0;
    list-style: none;
}

.rail::after { display: none; }
.post-list::after { display: none; }

.pager, .feed-more {
    border-top: 0px solid var(--c-rule);
    padding-top: 3rem;
}

#menu-languages .rail-count { display: none !important; }
#menu-languages > li > a.rail-row::before {
    content: none !important;
    display: none !important;
}
#menu-languages > li > a.rail-row { justify-content: flex-start !important; }
#menu-languages > li > a.rail-row > span {
    flex: 0 1 auto !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    gap: 21px;
}

.tl-feed .tl-yr article { margin-top: 3rem; }

/* Italic text for Dictionary posts */
article.post.category-dictionary .card-exc {
    font-style: italic;
    border-left: 5px solid #C8DDB8;
    padding-left: 15px;
}

/* Blog card title layout */
article.reveal > h2 {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* Category and optional post number — first row */
article.reveal > h2 .pn-heading-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0.25em;
}

/* Post title — second row */
article.reveal > h2 .pn-post-title {
    display: block;
    width: 100%;
    min-width: 0;
    font-size: 1.3em;
    font-weight: 700;
    line-height: 1.2;
}

article.reveal > h2 .pn-post-title a {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* Dictionary posts */
article.post.category-dictionary > p:not(.card-meta) {
    border-left: 5px solid #C8DDB8;
    padding-left: 15px;
    margin-top: 15px;
    font-style: italic;
}

/* Social menu: no post counts or dots */
#menu-social .rail-count { display: none !important; }
#menu-social > li > a.rail-row::before {
    content: "";
    display: inline-block;
    flex: 0 0 0.9em;
    width: 0.9em;
    height: 0.9em;
    margin-right: 8px;
    border-radius: 0;
    background-color: transparent !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Instagram — classic gradient logo */
#menu-social > #menu-item-151 > a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3CradialGradient id='g' cx='30%25' cy='107%25' r='150%25'%3E%3Cstop offset='0%25' stop-color='%23fdf497'/%3E%3Cstop offset='5%25' stop-color='%23fdf497'/%3E%3Cstop offset='45%25' stop-color='%23fd5949'/%3E%3Cstop offset='60%25' stop-color='%23d6249f'/%3E%3Cstop offset='90%25' stop-color='%232854a8'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect x='2' y='2' width='20' height='20' rx='6' fill='none' stroke='url(%23g)' stroke-width='3'/%3E%3Ccircle cx='12' cy='12' r='4.5' fill='none' stroke='url(%23g)' stroke-width='2.5'/%3E%3Ccircle cx='18' cy='6.5' r='1.5' fill='%23d6249f'/%3E%3C/svg%3E");
}

/* TikTok — cyan and pink accents */
#menu-social > #menu-item-150 > a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 3h3c.4 2.5 1.8 4.1 4 4.7v3.2c-2.6-.1-4.8-1.2-6.8-2.8v6.7a6.5 6.5 0 1 1-6.5-6.5c.5 0 1 .1 1.5.2v3.5a3.2 3.2 0 1 0 1.8 2.9V3h3z' fill='%2300f2ea' transform='translate(-1 1)'/%3E%3Cpath d='M15 3h3c.4 2.5 1.8 4.1 4 4.7v3.2c-2.6-.1-4.8-1.2-6.8-2.8v6.7a6.5 6.5 0 1 1-6.5-6.5c.5 0 1 .1 1.5.2v3.5a3.2 3.2 0 1 0 1.8 2.9V3h3z' fill='%23ff0050' transform='translate(1 -0.5)'/%3E%3Cpath d='M15 3h3c.4 2.5 1.8 4.1 4 4.7v3.2c-2.6-.1-4.8-1.2-6.8-2.8v6.7a6.5 6.5 0 1 1-6.5-6.5c.5 0 1 .1 1.5.2v3.5a3.2 3.2 0 1 0 1.8 2.9V3h3z' fill='%23000000'/%3E%3C/svg%3E");
}

/* Main page scrollbar when the rail is displayed as a sidebar */
html:not([data-col]) #site-rail,
html:not([data-col]) #site-rail .rail-inner,
html:not([data-col]) .rail,
html:not([data-col]) .rail-inner {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
}


/* === Card heading layout: keep original typography, separate metadata === */
article.reveal > .post-card-heading {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* Category and number: one line, same baseline, number at the right edge */
article.reveal > .post-card-heading > .post-card-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: var(--type-h2);
    line-height: var(--line-heading);
    box-sizing: border-box;
}

article.reveal > .post-card-heading > .post-card-meta .pn-cat {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    padding: 2px 8px;
    border: 1px solid currentColor;
    border-radius: 10px;
    letter-spacing: -1px;
    font-size: inherit !important;
    line-height: inherit !important;
}

article.reveal > .post-card-heading > .post-card-meta .pn-num {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin: 0 0 0 auto !important;
    padding: 0;
    letter-spacing: 0;
    white-space: nowrap;
    text-align: right;
    font-size: inherit !important;
    line-height: inherit !important;
}

/* Keep the original H2 classes and title sizing; only add independent spacing. */
article.reveal > .post-card-heading > h2.post-card-title {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0.5em 0 0 !important;
    padding: 0;
    font-size: 1.3em !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

article.reveal > .post-card-heading > h2.post-card-title a {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}