/*
Theme Name: Morena Singer 2026
*/

@font-face {
    font-family: Cormorant;
    src: url('/wp-content/themes/ms2026/font/Cormorant-VariableFont_wght.ttf');
    font-weight: 400;
}

@font-face {
    font-family: Poppins;
    src: url('/wp-content/themes/ms2026/font/Poppins-ExtraLight.ttf');
    font-weight: 200;
}

@font-face {
    font-family: Poppins;
    src: url('/wp-content/themes/ms2026/font/Poppins-Light.ttf');
    font-weight: 300;
}

@font-face {
    font-family: Poppins;
    src: url('/wp-content/themes/ms2026/font/Poppins-LightItalic.ttf');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: Poppins;
    src: url('/wp-content/themes/ms2026/font/Poppins-Regular.ttf');
    font-weight: 400;
}

@font-face {
    font-family: Poppins;
    src: url('/wp-content/themes/ms2026/font/Poppins-Medium.ttf');
    font-weight: 500;
}

@font-face {
    font-family: Poppins;
    src: url('/wp-content/themes/ms2026/font/Poppins-Bold.ttf');
    font-weight: 700;
}

:root {
    /*--color-primary: #eee8d5;*/
    --color-primary: white;
    --color-secondary: #002b36;
    --color-accent-1: #268bd2;
    --color-accent-2: #cb4b16;
    --color-accent-2b: #dc322f;
    --color-accent-3: #d33682;

    --menu-toggle-size: 1.25rem;
    --menu-toggle-weight: 0.125rem;

    --transition-duration: 200ms;
    --transition-timing: ease-out;

    font-family: Poppins, system-ui, Avenir, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    font-weight: 400;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--color-primary);
    color: var(--color-secondary);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
}

.body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-header {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "logo title nav"
        "logo description nav";
    column-gap: 1em;
    align-items: center;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding: 1em 0.6em;
    width: 100%;
    height: 6.75em;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
}

.site-header .custom-logo-link {
    grid-area: logo;
}

.site-header .custom-logo-link .custom-logo {
    filter: drop-shadow(2px 2px 2px var(--color-secondary));
    transition: filter var(--transition-duration) var(--transition-timing);
}

.site-header .custom-logo-link:hover .custom-logo {
    filter: drop-shadow(2px 2px 2px var(--color-accent-2));
}

.site-header .site-title {
    grid-area: title;
    text-shadow: 1px 1px var(--color-secondary), 2px 2px 4px var(--color-secondary);
    font-family: Cormorant, serif;
    font-variant: small-caps;
}

.site-header .site-title a {
    color: var(--color-primary);
    text-decoration: none;
}

.site-header .site-description {
    grid-area: description;
    margin-top: -1em;
    font-family: Poppins, system-ui, Avenir, Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-style: italic;
    filter: drop-shadow(2px 2px 4px var(--color-primary));
}

.site-header .site-nav {
    grid-area: nav;
}

.site-header .site-nav .menu-state .menu-state__toggle {
    position: relative;
    width: var(--menu-toggle-size);
    height: var(--menu-toggle-size);
    cursor: pointer;
    list-style-type: none;
}

.site-header .site-nav .menu-state .menu-state__toggle::-webkit-details-marker {
    display: none;
}

.site-header .site-nav .menu-state .menu-state__toggle .menu-state__label {
    font-size: 0;
    display: block;
    position: absolute;
    top: calc(50% - var(--menu-toggle-weight) / 2);
    width: var(--menu-toggle-size);
    height: var(--menu-toggle-weight);
    box-shadow: 0 2px 4px var(--color-secondary);
    background-color: var(--color-secondary);
    transition: opacity var(--transition-duration) var(--transition-timing);
}

.site-header .site-nav .menu-state .menu-state__toggle::before,
.site-header .site-nav .menu-state .menu-state__toggle::after {
    content: '';
    display: block;
    position: absolute;
    width: var(--menu-toggle-size);
    height: var(--menu-toggle-weight);
    box-shadow: 0 2px 4px var(--color-secondary);
    background-color: var(--color-secondary);
    transform-origin: left;
}

.site-header .site-nav .menu-state .menu-state__toggle::before {
    transition:
        transform var(--transition-duration) var(--transition-timing),
        top var(--transition-duration) var(--transition-timing);
}

.site-header .site-nav .menu-state .menu-state__toggle::after {
    bottom: 0;
    transition:
        transform var(--transition-duration) var(--transition-timing),
        bottom var(--transition-duration) var(--transition-timing);
}

.site-header .site-nav .menu-state .menu-state__toggle:hover .menu-state__label,
.site-header .site-nav .menu-state .menu-state__toggle:hover::before,
.site-header .site-nav .menu-state .menu-state__toggle:hover::after {
    background-color: var(--color-primary);
}

.site-header .site-nav .menu {
    visibility: hidden;
    display: flex;
    flex-direction: column;
    place-items: center;
    gap: 1em;
    position: absolute;
    top: 6.75em;
    right: 0;
    bottom: calc(6.75em - 100vh);
    width: 0;
    padding: 3em 0 0 0;
    overflow: hidden;
    background-color: var(--color-primary);
    transition:
        width var(--transition-duration) var(--transition-timing),
        visibility var(--transition-duration) var(--transition-timing);
}

.site-header .site-nav .menu .menu-item {
    list-style-type: none;
}

.site-header .site-nav .menu .menu-item a {
    position: relative;
    text-decoration: none;
    font-size: 1.25em;
    font-weight: 200;
    color: var(--color-secondary);
}

.site-header .site-nav .menu .menu-item a::after {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 2px;
    background-color: var(--color-accent-2);
    transition: width var(--transition-duration) var(--transition-timing);
}

.site-header .site-nav .menu .menu-item a:hover::after {
    width: 100%;
}

.site-header .site-nav .menu .current-menu-item a {
    color: var(--color-accent-2);
}

.site-header .site-nav .menu-state[open] .menu-state__toggle .menu-state__label {
    opacity: 0;
}

.site-header .site-nav .menu-state[open] .menu-state__toggle::before {
    top: calc(-1 * var(--menu-toggle-weight) / 2);
    width: calc(var(--menu-toggle-size) / 0.707106781187);
    transform: rotate(45deg);
}

.site-header .site-nav .menu-state[open] .menu-state__toggle::after {
    bottom: calc(-1 * var(--menu-toggle-weight) / 2);
    width: calc(var(--menu-toggle-size) / 0.707106781187);
    transform: rotate(-45deg);
}

.site-header .site-nav .menu-state[open] ~ .menu {
    visibility: visible;
    width: 100%;
    overflow: auto;
}

body:has(.site-header .site-nav .menu-state[open]) {
    overflow: hidden;
}

.main {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    place-items: center;
}

.main .site-hero {
    margin-top: -6.75em;
    width: 100vw;
    height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}

.main .post {
    margin: 2em;
    max-width: 40em;
}

.main .post .post__title {
    margin-block: 1.5em;
}

.main .post .wp-block-paragraph {
    margin-block: 1em;
}

.site-footer {
    display: flex;
    place-content: center;
    column-gap: 1em;
    margin-top: 2em;
    padding: 1em;
    box-shadow: 0 0 4px var(--color-secondary);
    background-color: var(--color-accent-2);
}

.site-footer .site-nav .menu {
    padding: 0;
}

.site-footer .site-nav .menu .menu-item {
    list-style-type: none;
}

.site-footer .site-nav .menu .menu-item a {
    color: var(--color-secondary);
    text-decoration: none;
}

/* WordPress admin bar is sticky. */
@media (width > 37.5em) {
    .site-header {
        position: fixed;
        top: initial;
        grid-template-columns: auto 1fr auto;
    }

    .main .site-hero {
        margin-top: 0;
    }
}

@media (min-width: 42.5em) {
    .site-header .site-nav .menu-state {
        display: none;
    }

    .site-header .site-nav .menu {
        text-shadow: 2px 2px 4px var(--color-secondary);
        visibility: visible;
        flex-direction: row;
        position: initial;
        padding: 0 0 2px;
        width: initial;
        background-color: initial;
        overflow: auto;
    }
}