/* =========================================
   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: 1600px !important;
    width: 96% !important;
}


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

/* =========================================
   EXPLORE BY CATEGORY
   ========================================= */

.so-tyred-categories {
    max-width: 950px !important;
    margin: 20px 0 30px 0 !important;
    padding: 0 !important;
}

/* Category list */
ul.so-tyred-categories,
.so-tyred-categories ul,
.so-tyred-categories .wp-block-categories-list {
    list-style: none !important;
    list-style-type: none !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

/* Individual categories */
ul.so-tyred-categories > li,
.so-tyred-categories ul > li,
.so-tyred-categories .wp-block-categories-list > li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove bullets */
ul.so-tyred-categories > li::marker,
.so-tyred-categories ul > li::marker,
.so-tyred-categories .wp-block-categories-list > li::marker {
    content: "" !important;
}

/* Category pill buttons */
ul.so-tyred-categories > li > a,
.so-tyred-categories ul > li > a,
.so-tyred-categories .wp-block-categories-list > li > a {
    display: inline-block !important;

    padding: 10px 18px !important;

    background-color: #ffffff !important;
    color: #173B6C !important;

    border: 1px solid #173B6C !important;
    border-radius: 24px !important;

    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;

    text-decoration: none !important;
    text-transform: none !important;
    opacity: 1 !important;
}

/* Hover effect */
ul.so-tyred-categories > li > a:hover,
.so-tyred-categories ul > li > a:hover,
.so-tyred-categories .wp-block-categories-list > li > a:hover {
    background-color: #173B6C !important;
    color: #ffffff !important;
}

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

    ul.so-tyred-categories > li > a,
    .so-tyred-categories ul > li > a,
    .so-tyred-categories .wp-block-categories-list > li > a {
        padding: 8px 14px !important;
        font-size: 14px !important;
    }
}

/* =========================================
   EXPLORE SO TYRED - ALIGN CARD BUTTONS
   ========================================= */

/* Force all four columns to the same height */
.wp-block-columns.so-tyred-explore-cards {
    align-items: stretch !important;
}

/* Make each card a vertical flex container */
.wp-block-columns.so-tyred-explore-cards > .wp-block-column {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
}

/* Push the button to the bottom of every card */
.wp-block-columns.so-tyred-explore-cards
> .wp-block-column
> .wp-block-buttons {
    margin-top: auto !important;
    padding-top: 20px !important;
}

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

/*
   Applies to the first Cover block inside
   a So Tyred wide page.
*/

.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. SO TYRED HEADINGS
   ========================================= */

/* Main headings on homepage */
.page-id-4584 .entry-content h2,
.page-id-4584 .entry-content h3 {
    color: #444444 !important;
    -webkit-text-fill-color: #444444 !important;
    opacity: 1 !important;
}


/* Main headings on redesigned menu pages */
body.page:has(.so-tyred-wide-page) .entry-content h2,
body.page:has(.so-tyred-wide-page) .entry-content h3 {
    color: #444444 !important;
    -webkit-text-fill-color: #444444 !important;
    opacity: 1 !important;
}


/* Post titles in grids */
.so-tyred-blog-grid .wp-block-post-title,
.so-tyred-blog-grid .wp-block-post-title a {
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
    opacity: 1 !important;
}


/* Keep homepage hero heading white */
.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;
}


/* =========================================
   LATEST POSTS - STRONG DARK TEXT
   ========================================= */

/* Titles */
.page-id-4584 .wp-block-query .wp-block-post-title,
.page-id-4584 .wp-block-query .wp-block-post-title a {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    opacity: 1 !important;
}

/* Excerpt text */
.page-id-4584 .wp-block-query .wp-block-post-excerpt,
.page-id-4584 .wp-block-query .wp-block-post-excerpt p {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    opacity: 1 !important;
}

/* Dates */
.page-id-4584 .wp-block-query .wp-block-post-date,
.page-id-4584 .wp-block-query .wp-block-post-date time {
    color: #222222 !important;
    -webkit-text-fill-color: #222222 !important;
    opacity: 1 !important;
}

/* Catch inherited Lodestar text colour */
.page-id-4584 .wp-block-query {
    color: #111111 !important;
    opacity: 1 !important;
}

/* =========================================
   9. 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;
    }

}