/* =========================================================
   THE ILLUMINATED PATHWAY
   CUSTOM CSS
   ========================================================= */


/* =========================================================
   GLOBAL BACKGROUND
   ========================================================= */

body,
#page {
    background-color: #f7f4ec !important;
}

.home #page {
    background: transparent !important;
}

.site-content,
.content-area,
.site-main {
    background-color: #f7f4ec;
}


/* =========================================================
   HEADER
   Remove Penscratch 2's unused branding area
   ========================================================= */

.site-branding,
.site-header .site-branding {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.site-header {
    padding-top: 0 !important;
    margin-top: 0 !important;
    min-height: 0 !important;
}


/* =========================================================
   SITE-WIDE FOREST HEADER
   Centred at 70vw, 300px high
   ========================================================= */

#content > a[rel="home"] {
    display: block;
    width: 60vw;
    max-width: none;

    position: relative;
    left: 50%;
    transform: translateX(-50%);

    margin: 0;
}

#content > a[rel="home"] .custom-header {
    display: block;
    width: 100%;
    max-width: none;

    height: 300px;
    object-fit: cover;
    object-position: center;

    margin: 0;
}


/* =========================================================
   MAIN NAVIGATION
   Full-width green navigation bar
   ========================================================= */

.main-navigation {
    background-color: #28643f !important;

    width: 60vw !important;
    max-width: none !important;

    position: relative;
    left: 50%;
    transform: translateX(-50%);

    box-sizing: border-box;

    margin-top: 0 !important;
}


/* Navigation links */

.main-navigation a {
    color: #f7f4ec !important;
    font-size: 16px !important;
    font-weight: 500;
    letter-spacing: 0.5px;
}


/* Hover and current page */

.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
    color: #d6b36a !important;
}


/* =========================================================
   SITE CONTENT
   ========================================================= */

.site-content {
    padding-top: 0 !important;
}


/* =========================================================
   HOMEPAGE
   Hide automatic WordPress page title
   ========================================================= */

.home .entry-title {
    display: none !important;
}


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

.homepage-hero p {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.homepage-hero p:first-of-type {
    font-weight: 500;
}


/* =========================================================
   EXPLORE THE ILLUMINATED PATHWAY
   ========================================================= */

.pathway-cards > .wp-block-column {
    display: flex;
    flex-direction: column;
}

.pathway-cards .wp-block-image {
    margin-bottom: 0 !important;
}

.pathway-cards .wp-block-image + .wp-block-heading {
    margin-top: 5px !important;
}

.pathway-cards > .wp-block-column > .wp-block-buttons:last-child {
    margin-top: auto;
}

.pathway-cards .wp-block-button__link {
    padding: 7px 16px !important;
    font-size: 13px !important;
}


/* =========================================================
   LATEST FROM THE PATH – FEATURED POST
   ========================================================= */

.latest-featured {
    align-items: flex-start;
}

.latest-featured .wp-block-post-featured-image {
    margin: 0 !important;
}

.latest-featured .wp-block-post-date {
    margin: 0 0 6px 0 !important;
    font-size: 13px;
}

.latest-featured .wp-block-post-title {
    margin: 0 0 10px 0 !important;
    min-height: 0 !important;
    font-size: 24px;
    line-height: 1.2;
}

.latest-featured .wp-block-post-excerpt {
    margin: 0 0 8px 0 !important;
}

.latest-featured .wp-block-post-excerpt__excerpt {
    margin: 0 !important;
    font-size: 15px;
    line-height: 1.5;
}

.latest-featured .wp-block-read-more {
    margin-top: 0 !important;
    font-size: 14px;
}


/* =========================================================
   LATEST FROM THE PATH – SECONDARY POSTS
   ========================================================= */

.latest-secondary .wp-block-post-template > :first-child {
    display: none !important;
}

.latest-secondary .wp-block-post {
    margin-bottom: 20px !important;
}

.latest-secondary .wp-block-post-title {
    margin: 0 0 6px 0 !important;
}

.latest-secondary .wp-block-post-date {
    margin: 0 !important;
}


/* =========================================================
   HOMEPAGE POST EXCERPTS
   ========================================================= */

.home .wp-block-post-excerpt {
    margin-bottom: 4px !important;
}

.home .wp-block-post-excerpt__excerpt {
    margin-bottom: 0 !important;
}

.home .wp-block-post-date {
    margin-top: 0 !important;
}


/* =========================================================
   SEASONAL FEATURE
   ========================================================= */

.seasonal-feature .wp-block-media-text__content {
    background-image:
        url("https://theilluminatedpathway.co.uk/wp-content/uploads/2026/08/autumn-equinox-nackground.png");

    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.seasonal-feature .wp-block-buttons {
    transform: translateY(-15px);
}

.seasonal-content .wp-block-heading {
    margin-bottom: 10px !important;
}

.seasonal-content p {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

.seasonal-content .wp-block-buttons {
    margin-top: 0 !important;
}


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

.footer-links p {
    margin-top: 0;
    margin-bottom: 8px;
}


/* Hide Penscratch 2's original footer */

.site-footer {
    display: none !important;
}


/* =========================================================
   AUTOMATIC SITE HERO
   Used on BOTH individual posts and ordinary pages
   ========================================================= */

.ip-global-hero {
    width: 840px;
    max-width: calc(100% - 40px);

    margin-left: auto;
    margin-right: auto;

    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.1),
            rgba(0, 0, 0, 0.1)
        ),
        url("https://theilluminatedpathway.co.uk/wp-content/uploads/2025/10/pathway_16_9.jpg");

    background-size: cover;
    background-position: center;

    min-height: 270px;

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

    text-align: center;
    box-sizing: border-box;

    padding: 35px 30px;
}

.ip-global-hero-inner {
    width: 100%;
}


/* Site title */

.ip-global-hero h1 {
    color: #fff !important;

    font-size: 42px;
    line-height: 1.15;

    margin: 0 0 18px 0;
}


/* Tagline */

.ip-hero-tagline {
    color: #fff !important;

    font-size: 17px;
    font-weight: 700;

    margin: 0 0 22px 0;
}


/* Description */

.ip-hero-description {
    color: #fff !important;

    font-size: 16px;
    font-weight: 700;

    margin: 0;
}


/* =========================================================
   POSTS AND PAGES – REMOVE SIDEBAR
   Homepage excluded because it has its own layout
   ========================================================= */

.single-post #secondary,
.page:not(.home) #secondary {
    display: none !important;
}


/* =========================================================
   POSTS AND PAGES – MAIN CONTENT WIDTH
   Match the 840px site hero
   ========================================================= */

.single-post #primary,
.page:not(.home) #primary {
    width: 840px !important;
    max-width: calc(100% - 40px) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    float: none !important;
}


/* Remove Penscratch's narrower internal content widths */

.single-post .site-main,
.single-post article,
.single-post .entry-header,
.single-post .entry-content,
.single-post .entry-footer,
.page:not(.home) .site-main,
.page:not(.home) article,
.page:not(.home) .entry-header,
.page:not(.home) .entry-content,
.page:not(.home) .entry-footer {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* =========================================================
   SINGLE POSTS – HIDE AUTOMATIC WORDPRESS TITLE
   Manual H1 is added within the post
   ========================================================= */

.single-post .entry-header .entry-title {
    display: none !important;
}


/* Hide Penscratch's original post metadata */

.single-post .entry-header .entry-meta {
    display: none !important;
}


/* =========================================================
   SINGLE POSTS – AUTOMATIC POST DATE
   ========================================================= */

.single-post .ip-post-date {
    margin-top: -4px;
    margin-bottom: 20px;

    font-size: 14px;
    font-weight: 500;

    color: #666 !important;

    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* =========================================================
   SINGLE POSTS – HIDE AUTOMATIC FEATURED IMAGE
   Images are placed manually within articles
   ========================================================= */

.single-post .post-thumbnail,
.single-post .entry-thumbnail,
.single-post .featured-image {
    display: none !important;
}


/* =========================================================
   HOMEPAGE – HIDE AUTOMATIC SITE HERO
   Homepage already has its own hero
   ========================================================= */

.home .ip-global-hero {
    display: none !important;
}


/* =========================================================
   SPACE BETWEEN AUTOMATIC HERO AND PAGE TITLE
   ========================================================= */

.page .ip-global-hero {
    margin-bottom: 24px !important;
}


/* =========================================================
   REDUCE GAP BEFORE EXPLORE SECTION
   ========================================================= */

.home .explore-heading {
    margin-top: -45px !important;
}


/* =========================================================
   FOOTER – COMPACT COPYRIGHT AREA
   ========================================================= */

.home footer .wp-block-group:last-child {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    min-height: 0 !important;
}

.home footer .wp-block-group:last-child p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.4 !important;
}


/* Footer copyright – remove Gutenberg block spacing */

.footer-copyright {
    margin-top: -40px !important;
    margin-bottom: 0 !important;
}


/* =========================================================
   POST BODY TEXT
   ========================================================= */

.single-post .entry-content p {
    font-size: 18px;
    color: #000000 !important;
}

.single-post .entry-content h1,
.single-post .entry-content h2,
.single-post .entry-content h3,
.single-post .entry-content h4,
.single-post .entry-content h5,
.single-post .entry-content h6 {
    color: #000000 !important;
}


/* =========================================================
   HUB PAGES – INTRODUCTION TEXT
   ========================================================= */

.hub-intro {
    font-size: 18px !important;
    color: #000000 !important;
}


/* =========================================================
   HUB PAGES – LATEST ARTICLES
   ========================================================= */

.hub-latest .wp-block-post-template {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px !important;
}

.hub-latest .wp-block-post {
    margin: 0 !important;
}

.hub-latest .wp-block-post-featured-image {
    width: 100% !important;
}


/* =========================================================
   SECOND-LEVEL MENU – ALIGN DESCRIPTIONS
   ========================================================= */

.menu-heading {
    min-height: 2.6em;
}


/* =========================================================
   CATALOGUE – ALIGN EXCERPTS
   ========================================================= */

.catalogue-title {
    min-height: 3.3em;
}


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

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

    /* Navigation */

    .main-navigation a {
        font-size: 14px !important;
    }


    /* Site hero */

    .ip-global-hero {
        max-width: calc(100% - 24px);

        min-height: 220px;

        padding: 25px 20px;
    }

    .ip-global-hero h1 {
        font-size: 30px;
    }

    .ip-hero-tagline {
        font-size: 15px;
        margin-bottom: 16px;
    }

    .ip-hero-description {
        font-size: 14px;
    }


    /* Post/page content */

    .single-post #primary,
    .page:not(.home) #primary {
        max-width: calc(100% - 24px) !important;
    }
}

/* REMOVE LINE BETWEEN HEADER IMAGE AND NAVIGATION */
.main-navigation {
 border-top: 0 !important;
}

/* PENSCRATCH 2 – REMOVE EMPTY SPACE ABOVE HEADER */
#masthead {
    transform: translateY(-24px) !important;
    margin-bottom: -120px !important;
}

/* =========================================================
   FOREST HEADER – SITE TITLE AND TAGLINE
   ========================================================= */

#content > a[rel="home"] {
    position: relative;
}

.ip-header-text {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    padding: 30px;
    box-sizing: border-box;

    color: #ffffff;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.85),
        0 1px 2px rgba(0, 0, 0, 0.9);

    pointer-events: none;
}

.ip-header-title {
    font-size: 48px;
    line-height: 1.15;
    font-weight: 700;

    margin-bottom: 16px;
}

.ip-header-tagline {
    font-size: 20px;
    line-height: 1.4;
    font-weight: 600;
}

/* HOMEPAGE – SPACE BELOW NAVIGATION */
.home #primary {
    padding-top: 18px !important;
}

/* =========================================================
   MOBILE – FOREST HEADER & NAVIGATION
   ========================================================= */

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

    /* Make header almost full width */
    #content > a[rel="home"] {
        width: calc(100vw - 30px) !important;
    }

    /* Better mobile header proportions */
    #content > a[rel="home"] .custom-header {
        height: 210px !important;
        object-fit: cover;
        object-position: center;
    }

    /* Mobile title positioning */
    .ip-header-text {
        padding: 20px 16px !important;
    }

    .ip-header-title {
        font-size: 27px !important;
        line-height: 1.1 !important;
        margin-bottom: 12px !important;
    }

    .ip-header-tagline {
        font-size: 16px !important;
        line-height: 1.3 !important;
    }

    /* Menu matches header width */
    .main-navigation {
        width: calc(100vw - 30px) !important;
    }

    /* Remove desktop masthead offset on mobile */
    #masthead {
       transform: translateY(-50px) !important;
    margin-bottom: -50px !important;
    }
	/* Reduce space below mobile navigation */
.home #primary {
    padding-top: 0 !important;
}

.main-navigation {
    margin-bottom: 0 !important;
}
	/* Mobile – tighten space below header */
.home #primary {
    position: relative;
    top: -10px;
}
	/* Homepage featured article – mobile image */
.home .latest-featured .wp-block-post-featured-image {
    width: 70% !important;
    max-width: 70% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
	/* Homepage featured article – mobile spacing */

.home .latest-featured .wp-block-post-featured-image {
    margin-bottom: 20px !important;
}

.home .latest-featured .wp-block-post-date {
    margin-bottom: 12px !important;
}

.home .latest-featured .wp-block-post-title {
    margin-bottom: 14px !important;
}
	/* Homepage featured article – remove stacked column gap on mobile */
.home .latest-featured.wp-block-columns {
    gap: 10px !important;
    row-gap: 10px !important;
}

.home .latest-featured.wp-block-columns > .wp-block-column {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
}
/* =========================================================
   PAGE CONTENT – SPACE BELOW GLOBAL NAVIGATION
   ========================================================= */

.page:not(.home) #primary {
    padding-top: 30px !important;
}

.blog-grid-title {
    min-height: 2.5em;
}

.single-post .auto-post-title {
    line-height: 1.2;
    margin-bottom: 40px;
}


.single-post .auto-post-featured-image {
    width: 100%;
    margin-bottom: 30px;
}

.single-post .auto-post-featured-image img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Pages/hubs align with the header */
body.page #primary.content-area {
    width: 60vw !important;
    max-width: none !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* Normal page text – but not the custom footer */
.page .entry-content > p {
    color: #000000 !important;
}

/* Tighten spacing between secondary latest posts */
.latest-secondary .wp-block-post {
    margin-bottom: 8px !important;
}

/* Tighten spacing between secondary latest posts */
.latest-secondary .wp-block-post {
    margin-bottom: 8px !important;
}


/* Latest from the path – section box */
.latest-section {
    border: 2px solid #d8d3c7;
    padding: 20px;
    margin-bottom: 60px;
}

/* Explore section box */
.explore-section {
    border: 2px solid #d8d3c7;
    padding: 20px;
    margin-bottom: 60px;
}
/* Keep Explore heading inside its box */
.explore-section .explore-heading {
    margin-top: 0 !important;
}

/* Reduce gap below Explore titles */
.explore-description {
    margin-top: 8px !important;
}

/* Reduce gap between Explore titles and descriptions */
.explore-section h3 {
    margin-bottom: 8px !important;
}

/* Hide wpForo's redundant Forum heading */
#wpforo-title {
    display: none !important;
}
/* Hide the home-only breadcrumb on the main forum page */
#wpforo .wpf-breadcrumb:has(.wpf-root.active) {
    display: none !important;
}

/* Illuminated Pathway colours for wpForo */
#wpforo #wpforo-wrap a {
    color: #286B45;
}

#wpforo #wpforo-wrap .wpforo-active,
#wpforo #wpforo-wrap .wpf-active,
#wpforo #wpforo-wrap .wpforo-forum-title {
    color: #286B45 !important;
}

#wpforo #wpforo-wrap .wpforo-section {
    border-bottom-color: #286B45 !important;
}

/* Improve wpForo readability */
#wpforo #wpforo-wrap {
    font-size: 17px;
}

#wpforo #wpforo-wrap .wpforo-forum-description {
    font-size: 17px !important;
    line-height: 1.5;
}

#wpforo #wpforo-wrap .wpforo-forum-title {
    font-size: 17px !important;
    font-weight: 600;
}

/* Forum descriptions */
#wpforo #wpforo-wrap .wpforo-forum-description p {
    font-size: 17px !important;
    line-height: 1.5 !important;
}


/* =========================================================
   HEADER SEARCH
   Search box permanently visible in navigation bar
   ========================================================= */

/* Navigation provides the positioning reference */
.main-navigation {
    position: relative;
}

/* Search area at the right-hand end of navigation */
.ip-site-search {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);

    display: flex;
    align-items: center;

    z-index: 20;
}

/* Hide the separate magnifying-glass toggle */
.ip-search-toggle {
    display: none !important;
}

/* Search form permanently visible */
.ip-search-form {
    display: flex !important;
    align-items: center;
    gap: 0;

    width: 260px;

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

    background: transparent !important;

    position: static !important;
    transform: none !important;
}

/* Search text field */
.ip-search-form input[type="search"] {
    flex: 1;

    width: 210px;
    height: 36px;

    min-width: 0;

    margin: 0 !important;
    padding: 6px 10px !important;

    background: #ffffff !important;
    color: #222222 !important;

    border: 1px solid #d8d3c7 !important;
    border-radius: 3px 0 0 3px !important;

    font-size: 14px !important;
    line-height: 1.2 !important;

    box-sizing: border-box;
    box-shadow: none !important;
}

/* Placeholder text */
.ip-search-form input[type="search"]::placeholder {
    color: #666666;
    opacity: 1;
}

/* Search button */
.ip-search-form button {
    width: 50px;
    height: 36px;

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

    background: #f7f4ec !important;
    color: #28643f !important;

    border: 1px solid #d8d3c7 !important;
    border-left: 0 !important;
    border-radius: 0 3px 3px 0 !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 36px !important;

    box-shadow: none !important;
    text-shadow: none !important;

    cursor: pointer;
}

/* Search button hover */
.ip-search-form button:hover,
.ip-search-form button:focus {
    background: #e8e3d8 !important;
    color: #28643f !important;
}

/* =========================================================
   TABLET & MOBILE HEADER SEARCH
   ========================================================= */

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

    /* Show magnifying-glass button */
    .ip-search-toggle {
        display: block !important;

        width: 42px;
        height: 42px;

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

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;

        font-size: 24px !important;
        line-height: 42px !important;

        cursor: pointer;
    } 

    /* Search container at right of navigation */
 .ip-site-search {
    right: 18px;
    top: auto;
    bottom: 8px;
    transform: none;
}
    /* Hide search form until icon is tapped */
  .ip-search-form {
    display: none !important;

    position: absolute !important;
    right: 0 !important;
    top: 48px !important;
    bottom: auto !important;

    width: 280px !important;

    padding: 8px !important;

    background: #28643f !important;

    z-index: 100;
}
 
    /* Show form after magnifying glass is tapped */
    .ip-site-search.is-open .ip-search-form {
        display: flex !important;
    }
}

/* Clean white search icon on tablet/mobile */
@media screen and (max-width: 1400px) {

    .ip-search-toggle {
        font-size: 0 !important;
        color: #f7f4ec !important;
    }

    .ip-search-toggle::before {
        content: "\2315";
        display: block;

        font-size: 30px;
        font-family: Arial, sans-serif;
        font-weight: normal;
        line-height: 42px;
 
        color: #f7f4ec;
    }
}



/* Tablet only – centre ordinary and hub page content */
@media screen and (min-width: 601px) and (max-width: 1400px) {

    body.page:not(.home) #primary.content-area {
        left: auto !important;
        transform: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

}

/* Single posts – display featured images at 16:9 */
.single-post .post-thumbnail {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.single-post .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}