/*
Theme Name: newrafael2025
Theme URI: 
Description: Custom theme for newrafael.com
Version: 1.1.1
Author: Reinier Feijen
*/

:root {
    --content-width: 652px;
    --font-family: system-ui;
    --font-size-normal: 17px;
    --font-size-menu: 17px;
    --font-size-header: 24px;
    --font-size-caption: 14px;
    --first-image-padding-top: 0px;
    --between-image-padding: 20px;
    --color-background: black;
    --color-text: white;
    --color-hover: #29abe2;
    --border-color: white;

    --menu-button-top: 30px;
    --menu-button-left: 34px;
    --menu-button-margin: -12px;

    --page-padding-inline-narrow: 12px;
    --page-padding-top: 112px;

    --page-padding-top-narrow: calc(var(--menu-button-top) * 2 + 20px);

    --single-vertical-position: 48; /* %, for short single posts. See newrafael.js */
    --single-min-height-threshold: 80vh; 

    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-family);
    font-size: var(--font-size-normal);
}

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

/******* PAGE & CONTENT ***************/

#page {
    width: var(--content-width);
    margin: 0 auto;
    box-sizing: border-box;
    padding: var(--page-padding-top) 0 40px 30px;
}


/* Position content below menu button below ...px (experiential value) */
@media (max-width: 860px) {
    #page {
        width: auto;
        padding-top: var(--page-padding-top);
        padding-bottom: 40px;
        padding-inline: var(--menu-button-left);
    }
}

@media (max-width: 615px) { /* NARROW */
    #page {
        padding-top: var(--page-padding-top-narrow);
        padding-bottom: calc(var(--page-padding-top-narrow) - 28px);
        padding-inline: var(--page-padding-inline-narrow);
    }
}

h2 {
    display: list-item;
    list-style-position: outside;
    list-style-type: "🌹";
    font-size: var(--font-size-header);
    padding: 0 0 12px 5px;
    margin: 0 0 4px calc(var(--font-size-header)* .875) ;
    font-weight: normal;
    line-height: 1.35;
}

body.mac-os h2 {
    margin-left: calc(var(--font-size-header) * .75);
}

h2::marker {
    font-size: calc(var(--font-size-header) * .875);
}

body.mac-os h2::marker {
    margin-left: -2px;
    font-size: calc(var(--font-size-header) * .75);
}

h2 a {
    text-decoration: none;
}

h2 a:hover {
    color: var(--color-hover);
    text-decoration: underline;
}


.entry {
    padding: 0px;
}

.entry p {
    margin-top: 0px;
}

/* Fix spacing between post title and entry if it starts with an image/iframe (even when wrapped in <a> tags) */
.entry>:first-of-type:is(p, div)>a:first-child>:is(img, iframe),
.entry>:first-of-type:is(p, div)>:first-child:is(img, iframe) {
    padding-top: var(--first-image-padding-top) !important;
    /* also see newrafael.js:fixImageSpacing */
}

/* Fix spacing between consecutive images/iframes in entry content */
.entry p:has(> img:first-child, > iframe:first-child, > a:first-child > img)+p:has(> img:first-child, > iframe:first-child, > a:first-child > img)> :first-child {
    padding-top: var(--between-image-padding);
}

a {
    color: var(--color-text);
    text-decoration: underline;
}

a:hover {
    color: var(--color-hover);
}

.post {
    padding-bottom: 200px;
}
@media (max-width: 615px) { /* NARROW */
    .post {
        padding-bottom: calc(var(--page-padding-top-narrow) * 1.2);
    }
}

.post p {
    line-height: 1.65;
}

.post .caption {
    font-size: var(--font-size-caption);
    margin-top: -4px;
    margin-bottom: 24px;
}

body.single .post {
    display: flow-root; /* needed for robustly measuring single post height for centering. See newrafael.js */
    padding-bottom: 72px;
}

body.single.short-post .post {
    padding-bottom: 0;
}

@media (max-width: 615px) { /* NARROW */
    body.single .post {
        padding-bottom: 0;
    }
}

html :where(img[class*=wp-image-]) {
    height: auto;
    max-width: 100%;
}

/****************** MENU ********************/

#menu-button {
    position: fixed;
    top: calc(var(--menu-button-top) - 5px);
    left: calc(var(--menu-button-left) - 5px);
    cursor: pointer;
    z-index: 1000;
    user-select: none;
    /* Overwrite native button styles */
    background: none;
    border: none;
    padding: 8px; /* larger hitarea */
    margin: -8px; /* compensate for padding */
}

#menu {
    /* anchoring currently not working in safari, hence the position:fixed etc */
    position: fixed;
    top: calc(var(--menu-button-top) + 50px);
    left: var(--menu-button-left);
    background-color: var(--color-background);
    border: 1px solid var(--border-color);
    margin: 0;
    padding: 38px 47px 38px 13px;
    z-index: 1001;
    user-select: none;
    flex-direction: column;
    gap: 24px;
    line-height: 1.5;
}

@media (max-width: 615px) {
    #menu-button {
        left: calc(var(--menu-button-left) - 27px);
    }
    #menu {
        left: calc(var(--menu-button-left) - 22px);
    }
}

#menu:popover-open {
    display: flex;
}

.menu-item {
    font-size: var(--font-size-menu);
    display: flex;
}

.menu-item .hand {
    width: 30px;
}

/*************** VERSION ************************/

.version {
    font-size: calc(.8 * var(--font-size-normal));
    position: fixed;
    bottom: 12px;
    left: var(--menu-button-left);
    z-index: 9999;
}


@media (max-width: 615px) { /* NARROW */
    .version {
        font-size: calc(.6 * var(--font-size-normal));
        left: calc(var(--menu-button-left) - 22px);
    }
}