/*
 * Theme Name: Libby Michel Theme (2026)
 * Template:   twentytwentythree
 * ... other header fields
 */


/* =========================================================
   GENERAL SITE STYLES
   ========================================================= */

p {
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-style: normal;
}

a {
}

h1, h2, h3, h4 {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    /*color: #272727*/
}

/* =========================================================
   POST TITLES
   ========================================================= */

.wp-block-post-title,
.wp-block-post-title * {
    color: #9f5635;
}


/* =========================================================
   HEADER
   ========================================================= */

.header-nav-holder {
}

.header-nav-holder a {
    font-family: "Inter", sans-serif;
    text-transform: uppercase;
}


/* =========================================================
   HERO
   ========================================================= */

.hero-holder {
}


/*
 * Main hero container.
 *
 * These variables are the controls for the overall hero
 * composition. You can adjust them without hunting through
 * the rest of the stylesheet.
 */

.libby-hero {
    --hero-height: 680px;
    --hero-portrait-height: 680px;

    /*
     * Positive = move logo + quote DOWN.
     * Negative = move them UP.
     */
    --hero-content-offset: 55px;

    /*
     * Horizontal portrait adjustment.
     */
    --hero-portrait-offset: 0px;

    position: relative;
    min-height: var(--hero-height);
    overflow: visible;
}


/*
 * Media & Text itself.
 */

.libby-hero.wp-block-media-text {
    min-height: var(--hero-height);
}


/*
 * Portrait container.
 */

.libby-hero .wp-block-media-text__media {
    height: var(--hero-height);

    display: flex;
    align-items: flex-end;
    justify-content: center;

    position: relative;

    overflow: visible;

    margin: 0;
}


/*
 * Actual portrait.
 */

.libby-hero .wp-block-media-text__media img {
    width: auto;
    max-width: none;

    height: var(--hero-portrait-height);

    object-fit: contain;
    object-position: bottom center;

    display: block;

    margin-bottom: 0;

    position: relative;
    bottom: 0;

    transform: translateX(var(--hero-portrait-offset));
}


/*
 * Right-hand hero content.
 *
 * This moves the logo + quote slider as a unit.
 */

.libby-hero .wp-block-media-text__content {
    transform: translateY(var(--hero-content-offset));
}


/* =========================================================
   LOGO / HERO TEXT
   ========================================================= */

.hero-sub-logo-text-holder {
}

.hero-logo {
}

/* =========================================================
   IMAGE TREATMENTS
   ========================================================= */

.img-holder-block * img,
.img-holder-block > img {
    border-top-left-radius: 40px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 40px;
}

/* =========================================================
   SINGLE POST
   ========================================================= */

.single-post-data * {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	color: #464d6b;
}

/* =========================================================
   LATEST POSTS & CATEGORY POSTS
   ========================================================= */

.libby-latest-posts-holder {
}


/* Section heading */

.libby-latest-posts-holder .libby-latest-heading,
.libby-category-posts-holder .libby-category-posts-heading {
	font-family: 'Inter', sans-serif;
}

.libby-latest-posts-holder hr,
.libby-category-posts-holder hr {
	border-color: #f8ba4f;
}

/* Post list */

.libby-latest-posts-holder .wp-block-latest-posts__list {
}


/* Individual post */

.libby-latest-posts-holder .wp-block-latest-posts__list > li,
.libby-category-posts-holder .libby-category-posts > li {
    background-color: #f2f2f2;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 30px 40px;
}


/* Post title */

.libby-latest-posts-holder .wp-block-latest-posts__post-title,
.libby-category-posts-holder .wp-block-post-title {
	font-family: 'Playfair Display', serif;
	font-size: xx-large;
	font-style: italic;
	font-weight: 500;
	color: #9f5635;
}

.libby-latest-posts-holder a.wp-block-latest-posts__post-title,
.libby-category-posts-holder .wp-block-post-title a {
	text-decoration: none;
	border-bottom: dotted 1px #9f5635;
}

.libby-latest-posts-holder a.wp-block-latest-posts__post-title:hover,
.libby-category-posts-holder .wp-block-post-title a:hover {

}

/* Post excerpt */

.libby-latest-posts-holder .wp-block-latest-posts__post-excerpt {
	font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-style: normal;
	margin-top: 1em;
}

/* =========================================================
   FOOTER
   ========================================================= */

footer {
    margin-block-start: 0;
}

.footer-holder * {
    font-family: "Inter", sans-serif;
    text-transform: uppercase;
    font-size: small;
}


/* =========================================================
   RESPONSIVE HERO
   ========================================================= */


/*
 * SMALL LAPTOP / LARGE TABLET
 * Hold the composition at this size until 1100px,
 * then make one deliberate step down.
 */

@media (max-width: 1100px) {

    .libby-hero {
        --hero-height: 600px;
        --hero-portrait-height: 600px;
        --hero-content-offset: 45px;
    }

    .libby-hero.wp-block-media-text {
        min-height: var(--hero-height);
    }

    .libby-hero .wp-block-media-text__media {
        height: var(--hero-height);
    }

    .libby-hero .wp-block-media-text__media img {
        height: var(--hero-portrait-height);
    }
}


/*
 * TABLET
 */

@media (max-width: 850px) {

    .libby-hero {
        --hero-height: 520px;
        --hero-portrait-height: 520px;
        --hero-content-offset: 30px;
    }

    .libby-hero.wp-block-media-text {
        min-height: var(--hero-height);
    }

    .libby-hero .wp-block-media-text__media {
        height: var(--hero-height);
    }

    .libby-hero .wp-block-media-text__media img {
        height: var(--hero-portrait-height);
    }
}


/*
 * SMALL TABLET / LARGE PHONE
 */

@media (max-width: 700px) {

    .libby-hero {
        --hero-height: 460px;
        --hero-portrait-height: 460px;
        --hero-content-offset: 15px;
    }

    .libby-hero.wp-block-media-text {
        min-height: var(--hero-height);
    }

    .libby-hero .wp-block-media-text__media {
        height: var(--hero-height);
    }

    .libby-hero .wp-block-media-text__media img {
        height: var(--hero-portrait-height);
    }
}