/*
Theme Name: EPFC Blocksy Child
Description: Custom child theme for EPFC.net extending Blocksy
Author: EPFC Admin
Template: blocksy
Version: 1.0.0
*/

/* ==========================================================================
   EPFC Global Variables
   ========================================================================== */
:root {
    --epfc-font-main: 'Open Sans', 'HelveticaNeue', 'Helvetica Neue', 'Helvetica-Neue', Helvetica, Arial, sans-serif;
    --epfc-color-primary: #A1932B;
    --epfc-color-secondary: #6a611c;
    --epfc-color-btn: #c4ca3b;
    --epfc-color-btn-hover: #a0a62c;
    --epfc-color-black: #000000;
}

/* ==========================================================================
   Typography & Headings
   ========================================================================== */
body, p, li, a {
    font-family: var(--epfc-font-main);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--epfc-font-main);
}

h2 {
    font-weight: 700;
    color: var(--epfc-color-primary);
}

h3 {
    font-weight: 600;
    color: var(--epfc-color-secondary);
}

/* ==========================================================================
   Buttons (Replicating .btn-cta1 and .btn-secondary)
   ========================================================================== */
.epfc-button, 
.btn-cta1, 
.btn-secondary {
    background-color: var(--epfc-color-btn) !important;
    border: 1px solid var(--epfc-color-btn) !important;
    color: var(--epfc-color-black) !important;
    font-family: var(--epfc-font-main);
    padding: 10px 20px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.epfc-button:hover, 
.epfc-button:focus,
.btn-cta1:hover, 
.btn-cta1:focus, 
.btn-secondary:hover, 
.btn-secondary:focus {
    background-color: var(--epfc-color-btn-hover) !important;
    border-color: var(--epfc-color-btn-hover) !important;
}

/* ==========================================================================
   Utility Classes from Original Site
   ========================================================================== */
.epfc-border {
    border: 1px solid var(--epfc-color-secondary);
}

.epfc-border-top {
    border-top: 1px solid var(--epfc-color-secondary);
}

.epfc-border-bottom {
    border-bottom: 1px solid var(--epfc-color-secondary);
}

/* Container background from previous step */
.epfc-content-area {
    background-color: #ffffff; 
}

/* ==========================================================================
   Custom overrides
   ========================================================================== */
   
/* Plain White 244px Square Frame */
.epfc-framed-logo img {
    border: 12px solid #ffffff;
    background-color: #ffffff; 
}

/* White Frame with Soft Drop Shadow */
.epfc-softframed-logo img {
    border: 12px solid #ffffff;
    background-color: #ffffff;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
}


/* 1. Anchor the header and ensure the triangle isn't clipped */
.page-bar-bottom {
    position: relative;
    overflow: visible; 
}

/* 2. Generate the brown triangle pointing down */
.page-bar-bottom::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 25px solid #6a611c;
    z-index: 10; /* Ensures the triangle sits on top of the content below it */
}

/* Flexbox layout for the footer logos */
.epfc-footer-logos {
    display: flex;
    flex-wrap: wrap; /* Allows logos to wrap to a new line on small mobile screens */
    justify-content: space-evenly; /* Spaces them out perfectly */
    align-items: center; /* Vertically centers them if some are taller than others */
    gap: 25px; /* Adds a comfortable minimum space between them */
    width: 100%;
    margin: 0 auto;
}

/* Ensure the logos scale uniformly and don't break the container */
.epfc-footer-logos img {
    max-width: 200px; /* Prevents any single logo from being too massive */
    height: auto;
    object-fit: contain; /* Ensures the logo ratio is preserved without stretching */
    filter: grayscale(100%); /* Optional: makes them all grey for a uniform look */
    transition: filter 0.3s ease;
}

/* Optional: Make them colorized when hovered over */
.epfc-footer-logos img:hover {
    filter: grayscale(0%);
}

/* Globally change the color of all list bullets and numbers */
li::marker {
    color: var(--epfc-color-primary);
    
    /* Optional: Makes the bullets slightly thicker so the color pops */
    font-weight: bold; 
}

.page-description.ct-hidden-sm p {
    font-size: 28px;
}
.page-description.ct-hidden-sm { margin-top: 0 !important; margin-bottom: 10px; }


/* 2. Generate the yellow newsletter bar triangle pointing down */
.epfc-newsletter-bar::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 25px solid #dce08b;
    z-index: 10; /* Ensures the triangle sits on top of the content below it */
}

/* Shrink the newsletter button to fit its text */
.epfc-newsletter-button {
    width: fit-content;
    
    
    
    /* Force exactly 10px padding on the sides */
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
/* 1. Strip the default link styling */
.epfc-newsletter-button a {
    text-decoration: none !important;
    color: inherit !important; /* Forces the link to use the button's standard text color */
}

/* 2. Prepare the button for a smooth transition */
.epfc-newsletter-button {
    transition: filter 0.3s ease;
}

/* 3. Darken the entire button on hover */
.epfc-newsletter-button:hover {
    filter: brightness(0.90); /* Drops the brightness by 10% to create a natural darker shade */
    cursor: pointer; /* Ensures the mouse turns into a hand pointer */
}

/* Tidy up the login popup */
#wpmem_login legend, #wpmem_reg legend { margin-bottom:20px !important; }

/* Force the excerpt "Read More" link to sit inline with the text */
.wp-block-post-excerpt__more-text,
.wp-block-post-excerpt__more-link,
.read-more-link,
.excerpt-more {
    display: inline-block !important;
    margin-left: 5px !important;
}

/* Ensure the paragraph wrapping the text doesn't force a line break */
.wp-block-post-excerpt p {
    display: inline !important;
}