/* =========================================
   SO TYRED
   MASTER ADDITIONAL CSS
   ========================================= */


/* =========================================
   1. REMOVE ORIGINAL LODESTAR HEADER IMAGE
   ========================================= */

.lodestar-front-page .custom-header,
.custom-header {
    display: none !important;
}


/* =========================================
   2. HOMEPAGE - PAGE 4584
   ========================================= */

/* Hide original Home page title */
#post-4584 .entry-header {
    display: none !important;
}

/* Remove extra space above homepage */
.page-id-4584 .site-content {
    padding-top: 0 !important;
}

/* Hide sidebar/widgets on homepage */
.page-id-4584 #secondary {
    display: none !important;
}

/* Give homepage full available width */
.page-id-4584 #primary,
.page-id-4584 .content-area {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    margin-right: 0 !important;
}

/* Remove Lodestar's internal width restrictions */
.page-id-4584 .site-main,
.page-id-4584 .hentry,
.page-id-4584 .entry-content {
    width: 100% !important;
    max-width: none !important;
}

/* Overall homepage width */
.page-id-4584 .wrap {
    max-width: 1600px !important;
    width: 96% !important;
}

.page-id-4584 .entry-content {
    margin-top: 0 !important;
}


/* =========================================
   3. HOMEPAGE HERO
   ========================================= */

.page-id-4584 .wp-block-cover {
    max-width: 1600px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Hero headline */
.page-id-4584 .wp-block-cover h1,
.page-id-4584 .wp-block-cover .wp-block-heading {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;

    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    font-weight: 700 !important;

    max-width: 750px !important;
}

/* Hero subtitle */
.page-id-4584 .wp-block-cover p {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Hero buttons */
.page-id-4584 .wp-block-cover .wp-block-button__link {
    color: #ffffff !important;
}

.page-id-4584 .wp-block-buttons {
    flex-wrap: wrap;
}


/* =========================================
   4. REMOVE POST FEATURES FROM HOMEPAGE
   ========================================= */

.page-id-4584 .sd-sharing-enabled,
.page-id-4584 .sd-sharing,
.page-id-4584 .sharedaddy,
.page-id-4584 .sd-like,
.page-id-4584 .jp-relatedposts {
    display: none !important;
}


/* =========================================
   5. REUSABLE SO TYRED WIDE MENU PAGES
   ========================================= */

/*
   Add this class to the outer Group block
   of each redesigned menu page:

   so-tyred-wide-page
*/

/* Hide Lodestar's original page title */
body.page:has(.so-tyred-wide-page) .entry-header {
    display: none !important;
}

/* Remove Lodestar's extra top padding */
body.page:has(.so-tyred-wide-page) .site-content {
    padding-top: 0 !important;
}

/* Hide sidebar/widgets */
body.page:has(.so-tyred-wide-page) #secondary {
    display: none !important;
}

/* Give page full available width */
body.page:has(.so-tyred-wide-page) #primary,
body.page:has(.so-tyred-wide-page) .content-area {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    margin-right: 0 !important;
}

/* Remove internal Lodestar width restrictions */
body.page:has(.so-tyred-wide-page) .site-main,
body.page:has(.so-tyred-wide-page) .hentry,
body.page:has(.so-tyred-wide-page) .entry-content {
    width: 100% !important;
    max-width: none !important;
}

/* Overall internal page width */
body.page:has(.so-tyred-wide-page) .wrap {
    max-width: 1200px !important;
    width: 80% !important;
}

body.page:has(.so-tyred-wide-page) .entry-content {
    margin-top: 0 !important;
}

/* Display page headings using the case entered in WordPress */
.so-tyred-wide-page .wp-block-heading {
    text-transform: none !important;
}


/* =========================================
   6. INTERNAL PAGE BANNER
   ========================================= */

/*
   Synced pattern:
   So Tyred Page Header

   Cover block class:
   so-tyred-page-header
*/

/* First Cover block fills available page width */
.so-tyred-wide-page .wp-block-cover:first-child {
    width: 100% !important;
    max-width: 100% !important;
}

/* Crop banner image cleanly */
.so-tyred-wide-page
.wp-block-cover:first-child
.wp-block-cover__image-background {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}


/* =========================================
   7. BLOG GRID
   ========================================= */

/*
   Add this class to the Blog Query Loop:

   so-tyred-blog-grid
*/

/* Give featured images consistent
   landscape proportions */
.so-tyred-blog-grid .wp-block-post-featured-image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

/* Crop images without distortion */
.so-tyred-blog-grid
.wp-block-post-featured-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}


/* =========================================
   8. HOMEPAGE ABOUT SO TYRED
   ========================================= */

/*
   Outer About Group uses:

   so-tyred-about-home
*/

/* Ensure paragraph text has good contrast */
.so-tyred-about-home p {
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
    opacity: 1 !important;
}

/* About heading */
.so-tyred-about-home h2,
.so-tyred-about-home .wp-block-heading {
    color: #444444 !important;
    -webkit-text-fill-color: #444444 !important;
    opacity: 1 !important;
}

/* About button */
.so-tyred-about-home .wp-block-button__link {
    background-color: #173B6C !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}


/* =========================================
   9. MAIN NAVIGATION
   ========================================= */

.main-navigation ul {
    text-align: center !important;
}

.main-navigation ul li {
    float: none !important;
    display: inline-block !important;
}

/* Prevent sticky navigation covering the top
   of redesigned menu pages */
body.page:has(.so-tyred-wide-page) .site-header-fixed .site-header,
body.page:has(.so-tyred-wide-page) .site-navigation-fixed.navigation-top,
body.page:has(.so-tyred-wide-page) .navigation-top.site-navigation-fixed {
    position: static !important;
    top: auto !important;
}


/* =========================================
   10. MOBILE
   ========================================= */

@media screen and (max-width: 768px) {

    /* Homepage width */
    .page-id-4584 .wrap {
        width: 94% !important;
    }

    /* Internal menu page width */
    body.page:has(.so-tyred-wide-page) .wrap {
        width: 94% !important;
    }

    /* Homepage hero */
    .page-id-4584 .wp-block-cover {
        width: 100% !important;
    }

    /* Stack homepage buttons */
    .page-id-4584 .wp-block-buttons {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* =========================================
   11. MONTHLY ARCHIVES
   ========================================= */


/* -----------------------------------------
   ARCHIVE PAGE WIDTH
   ----------------------------------------- */

/* Give monthly archives the same wide layout
   as the redesigned So Tyred pages */
body.archive.date #primary.content-area {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    margin-right: 0 !important;
}

body.archive.date #main.site-main {
    width: 100% !important;
    max-width: none !important;
}

/* Control overall archive width */
body.archive.date .wrap {
    max-width: 1200px !important;
    width: 80% !important;
}


/* -----------------------------------------
   ARCHIVE HEADING
   ----------------------------------------- */

body.archive.date .page-header {
    grid-column: 1 / -1;
    margin: 24px 0 4px 0 !important;
    padding: 0 !important;
}

/* Hide WordPress's "Month:" text */
body.archive.date .page-title {
    font-size: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Display only the dynamic month and year */
body.archive.date .page-title span {
    font-size: 28px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}


/* -----------------------------------------
   MONTH NAVIGATION
   ----------------------------------------- */

/* Previous / next month navigation */
body.archive.date .so-tyred-month-nav {
    grid-column: 1 / -1;
    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;

    margin: 0 0 28px 0;
    padding: 20px 16px;

    background: #f2f2ef;
    border-top: 1px solid #4f776d;
    border-bottom: 1px solid #4f776d;
    box-sizing: border-box;
}

/* Navigation links */
body.archive.date .so-tyred-month-nav a {
    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;

    color: #3f695f !important;
    text-decoration: none !important;
}

/* Previous month */
body.archive.date .so-tyred-month-prev {
    text-align: left;
}

/* Next month */
body.archive.date .so-tyred-month-next {
    margin-left: auto;
    text-align: right;
}

/* Navigation hover */
body.archive.date .so-tyred-month-nav a:hover {
    text-decoration: underline !important;
}


/* -----------------------------------------
   FOUR-COLUMN POST GRID
   ----------------------------------------- */

body.archive.date #main.site-main {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 40px;
}

/* Individual archive posts */
body.archive.date #main.site-main > article {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* -----------------------------------------
   FEATURED IMAGES
   ----------------------------------------- */

/* Consistent landscape proportions */
body.archive.date article .post-thumbnail {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: 14px;
}

/* Crop images without distortion */
body.archive.date article .post-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}


/* -----------------------------------------
   POST TITLES
   ----------------------------------------- */

body.archive.date article .entry-title {
    font-size: 17px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.02em !important;
    margin-top: 0 !important;
    margin-bottom: 5px !important;
}


/* -----------------------------------------
   REMOVE SHARE / LIKE CONTROLS
   FROM ARCHIVE CARDS
   ----------------------------------------- */

body.archive.date article .sd-sharing-enabled,
body.archive.date article .sd-sharing,
body.archive.date article .sharedaddy,
body.archive.date article .sd-like,
body.archive.date article .jp-relatedposts {
    display: none !important;
}


/* -----------------------------------------
   FIX LODESTAR STICKY NAVIGATION
   ----------------------------------------- */

/* Prevent the main menu moving into the
   middle of the archive while scrolling */
body.archive.date .site-header-fixed .site-header,
body.archive.date .site-navigation-fixed.navigation-top,
body.archive.date .navigation-top.site-navigation-fixed {
    position: static !important;
    top: auto !important;
}


/* -----------------------------------------
   TABLET
   ----------------------------------------- */

@media screen and (max-width: 1000px) {

    body.archive.date #main.site-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.archive.date .wrap {
        width: 90% !important;
    }
}


/* -----------------------------------------
   MOBILE
   ----------------------------------------- */

@media screen and (max-width: 600px) {

    body.archive.date .wrap {
        width: 94% !important;
    }

    body.archive.date #main.site-main {
        grid-template-columns: 1fr;
        row-gap: 32px;
    }

    body.archive.date .page-title {
        font-size: 24px !important;
    }

    body.archive.date .so-tyred-month-nav {
        padding: 16px 12px;
        margin-bottom: 24px;
        gap: 12px;
    }

    body.archive.date .so-tyred-month-nav a {
        font-size: 15px !important;
    }

    body.archive.date article .entry-title {
        font-size: 18px !important;
    }
}


/* -----------------------------------------
   CLEAN UP ARCHIVE POST CARDS
   ----------------------------------------- */

/* Remove comment/edit footer beneath each archive card */
body.archive.date article .entry-footer {
    display: none !important;
}


/* =========================================
   12. SPACE ABOVE REDESIGNED MENU PAGES
   ========================================= */

/* Creates the visual gap between the black
   navigation bar and the page banner */
body.page:has(.so-tyred-wide-page) .site-content {
    border-top: 30px solid transparent !important;
}