/*
Theme Name: moviestar.photo-theme
Author: Walter Gilgen
Author URI: https://waltergilgen.net/about
Description: A minimalistic responsive WordPress theme for photographers.
Version: 0.1.0
License: (c) 2025 Walter Gilgen
License URI: https://waltergilgen.net/about
*/
/* --- grid definition ... --- */
.grid-3-4 {
    display: grid;
    grid-template-columns: 100px auto 50px;
    grid-template-rows: 100px auto 50px 150px; /* header photo nav footer */
}

/* --- ... portrait layout grid --- */
.logo  {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 1;
    grid-row-end: 1;
    display: none; /* flex; */
    justify-content: center;
    align-items: center;
}
.header-top {
    grid-column-start: 1; /* 2, set to 1 because logo disabled, ewww problem */
    grid-column-end: 3; /* 2, set to 3 because logo disabled, ewww problem */
    grid-row-start: 1;
    grid-row-end: 1;
    /*background-color: green;*/
}
.header-left {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 2;
    grid-row-end: 3;
    display: none;
    /*background-color: yellow;*/
}

.header-menu {
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 1;
    z-index: 2;
    /*background-color: blue;*/
}

.photo {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 2;
    /*background-color: orange;*/
}

.text, .text-toc {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 2;
    padding-top: 3em;
    padding-bottom: 1em;
}

.footer-nav {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 3;
    display: flex;
    flex-direction: column;
    /*background-color: lightgreen;*/
}
.about-and-copyright {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 4;
    grid-row-end: 4;
    display: flex;
    flex-direction: column;
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: silver;
    margin-top: 1em;
    /*background-color: purple;*/
}

/* --- emd grid definition --- */

/* --- fonts definition --- */
@font-face {
    font-display: swap;
    font-family: 'Anton'; /* https://gwfh.mranftl.com/fonts/anton?subsets=latin */
    font-style: normal;
    font-weight: 400;
    src: url('./fonts/anton-v27-latin-regular.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Lato'; /* https://gwfh.mranftl.com/fonts/lato?subsets=latin */
    font-style: normal;
    font-weight: 400;
    src: url('./fonts/lato-v25-latin-regular.woff2') format('woff2');
}
h1, .h1-font, h2, h3, h4, h5 {
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.8rem;
    color: #505050;
}
h2, .h2-font {
    font-size: 1.5rem;
}
h2:first-of-type {
    margin-top: 0;
}
h3, h4, h5 {
    font-size: 1.3rem;
}
.text:first-child, .text-toc:first-child {
    margin-top: 0;
}
h3, .h3-font, h4, h5, h6 {
    font-size: 1.3rem;
}
h3.toc {
    margin-bottom: 0.3em;
}

/* --- end fonts definition --- */

/* --- basic definitions --- */
body {
    display: grid;
    padding-top: 10px;
    height: 96vh;
    width: 97vw; /* CANVAS_WITH_PERCENT */
    max-width: 2500px; /* MAX_CANVAS_WITH */
    margin-left: auto;
    margin-right: auto;
    overflow-y: scroll !important;
    /*background-color: cyan;*/
}

body * {
}

main {
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
}

p, th, td, a {
    font-family: "Lato", sans-serif;
    font-size: 1.1rem;
    color: #3A3A3A;
    line-height: 1.5;
}
th, td {
    padding-right: 2em;
    text-align: left;
}

img {
    border-radius: 3%;
}

.logo > a > img {
    max-height: 4em;
    max-width: 4em;
    border-radius: 50%;
}

/* --- end basic definitions --- */


/* --- header definition default / portrait layout */
.wrap-header-top {
    display: flex;
}

.wrap-header-top-menu {
    display: flex;
    flex-direction: row-reverse;
    height: 80%
}

/* --- about and copyright --- */
.about-and-copyright {
    height: 150px; /* FOOTER_SIZE */;
}
.about {
    margin-top: 1em;
    margin-bottom: .5em;
}

.copyright {
    text-align: left;
}
.copyright > p, .social-links > p {
    margin-top: 1em;
    margin-bottom: 0.5em;
}
h2.abstract-title {
    display: inline;
    padding-left: 0;
    padding-right: 0.5em;
}

/* --- end about and copyright --- */

/* --- hamburger menu definition --- */
#header-hamburger-menu {
    font-family: "Lato", sans-serif;
    font-size: 1.1rem;
    color: #3A3A3A;
    line-height: 1.5;
    position: fixed;
    display: none;
    width: 12em;
    overflow: auto;
    top: 120px;
    left: auto;
    right: 0;
    bottom: auto;
    background-color: white;
    z-index: 2;
    cursor: pointer;
    border-radius: 1em 0 0 1em;
    border-color: #505050;
    border-width: 6px;
    border-style: solid none solid solid;
    padding: 1em;
}

#header-hamburger-menu-button {
    font-size: 1.8rem;
    color: #3A3A3A;
    background-color: transparent;
    border-style: none;
    padding: 0;
    margin: 0;
}
.menu > li > a {
    text-decoration: none !important;
    font-family: "Lato", sans-serif;
    font-size: 1.1rem;
    color: #3A3A3A;
    line-height: 1.5;
    text-transform: capitalize;
}

.menu-item {
    text-align: left;
    margin-bottom: .6em;
}

/* --- end hamburger menu definition --- */

/* --- figure definition --- */
div.photo > figure {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    /* background-color: darkolivegreen; */
}

div.photo > figure > picture > img {
    object-fit: contain;
    /*background-color: black;*/
}

/* --- end figure definition --- */

/* --- end about and copyright definition wide screen --- */

/* --- ... landscape layout grid --- */
@media (min-aspect-ratio: 4/3) {
    /* LANDSCAPE_ASPECT_RATIO */
    /* body {
        background-color: gray;
    } */

    .logo {
        grid-column-start: 1;
        grid-column-end: 1;
        grid-row-start: 1;
        grid-row-end: 1;
        display: none;
        /*background-color: red;*/
    }
    .header-top {
        height: 50px; /* HEADER_SIZE_LANDSCAPE */
    }
    .wrap-header-top {
        display: none;
        /* background-color: green; */
    }
    .header-left {
        grid-column-start: 1;
        grid-column-end: 1;
        grid-row-start: 1;
        grid-row-end: 3;
        display: inline-flex;
        /*background-color: yellow;*/
    }

    .header-menu {
        grid-column-start: 3;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 1;
        text-align: center;
        height: 50px; /* HEADER_SIZE_LANDSCAPE */
        /*background-color: blue;*/
    }

    .wrap-header-left {
        transform: rotate(180deg);
        display: flex;
        flex-direction: row-reverse;
        writing-mode: vertical-lr;
        height: calc(98vh - 150px); /* vh - FOOTER_SIZE */
        overflow: hidden;
        z-index: 1;
    }

    .wrap-header-left > .header-title {
        width: 100px;
        line-height: 100px;
        text-align: left;
        vertical-align: middle;
        padding-bottom: 0;
        margin-bottom: 8.5vh;
        margin-top: auto;
    }

    .photo {
        grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 3;
        margin-top: auto;
        margin-bottom: auto;
        /*background-color: orange;*/
    }
    main {
        margin-top: 100px;
    }
    .text {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 3;
        margin-left: 1em;
        margin-right: 1em;
    }

    div.photo > figure  {
        flex-direction: row;
    }

    div.photo > figure > figcaption {
        padding-left: 2em;
    }
}
/* --- end landscape layout grid --- */

/* --- image navigation --- */
span.left {
    float: left;
}
span.right {
    float: right;
}

/* --- about and copyright definition wide screen --- */
@media (min-width: 768px) {
    .about-and-copyright {
        flex-direction: row;
    }
    .about {
        padding-right: 1em;
        text-align: left;
        width: 100%;
    }
    .social-links {
        text-align: center;
        padding-left: .5em;
        padding-right: .5em;
        border-left-style: solid;
        border-left-width: 1px;
        border-left-color: silver;
    }
    .copyright {
        text-align: right;
        padding-left: 1em;
        border-left-style: solid;
        border-left-width: 1px;
        border-left-color: silver;
    }
}
.copy-text-button {
    font-size: 1.08rem;
    color: #3A3A3A;
    background-color: transparent;
    border-style: none;
    padding: 0;
    margin: 0;
}

/* --- column text layout --- */
@media (min-width: 1025px) {
    p, a {
        font-size: 1.21rem;
        color: #3A3A3A;
    }
    .text, .text-toc {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 2;
        column-gap: 2em;
        column-width: 350px;
        column-rule-style: solid;
        column-rule-width: 1px;
        column-rule-color: silver;
        column-fill: auto;
        height: 72vh;
        overflow-y: scroll !important;
    }
    .text-toc {
        column-width: 200px;
    }
    .text, .text-toc {
        widows: 2;
        orphans: 2;
    }
    .text h3, .text-toc h3 {
        break-after: avoid-column;
    }
    .h3-toc {
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0;
        margin-bottom: 0;
    }
    .p-toc {
        padding-top: 0;
        padding-bottom: 1em;
        margin-top: 0;
        margin-bottom: 0;
    }
}
@media (min-width: 1500px) {
    p, a {
        font-size: 1.32rem;
        color: #3A3A3A;
    }
}