/* ================================================
   CONTACT FORM 7 STYLING
   ================================================ */

.cf7-row {
    margin-bottom: 20px;
}

.cf7-row label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    color: #333;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    color: #333 !important;
    background: #fff !important;
    box-sizing: border-box !important;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus {
    border-color: #999 !important;
    outline: none !important;
}

.wpcf7 textarea {
    height: 150px !important;
    resize: vertical !important;
}

.wpcf7 input[type="submit"] {
    background: #333 !important;
    color: #fff !important;
    padding: 12px 30px !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    cursor: pointer !important;
    width: 100% !important;
}

.wpcf7 input[type="submit"]:hover {
    background: #555 !important;
}


/* ================================================
   HOMEPAGE NEWS/POST GRID
   STILL OPEN: no mobile breakpoint defined for this grid,
   3 columns will persist at all viewport widths as is.
   ================================================ */

.signexa-posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.signexa-posts .post-item {
  display: flex;
  flex-direction: column;
}


/* ================================================
   HOMEPAGE PRODUCT GRID (id-scoped feed, not shop archive)
   Equal height cards, add to cart button pinned to bottom
   ================================================ */

#signexa-products ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

#signexa-products ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#signexa-products ul.products li.product a.add_to_cart_button {
    margin-top: auto !important;
    align-self: center !important;
    width: 80% !important;
    text-align: center !important;
    position: relative !important;
    bottom: 0 !important;
}


/* ================================================
   THREE COLUMN PAGE BOXES (fadeInLeft container)
   Homepage About Us / Equipment Hire / Our Services boxes.
   Equal height columns, button pinned to bottom,
   forced 3-across width, thumbnail highlight removed,
   heading made bigger + bold + linked with orange hover.
   ================================================ */

.container.fadeInLeft {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

.container.fadeInLeft .threepagebox.three_column {
    display: flex !important;
    flex-direction: column !important;
    float: none !important;
}

.container.fadeInLeft .threepagebox.three_column .pagecontent {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.container.fadeInLeft .threepagebox.three_column .pagecontent p {
    flex-grow: 1 !important;
}

.container.fadeInLeft .threepagebox.three_column .pagecontent a.button {
    margin-top: auto !important;
    display: block !important;
    text-align: center !important;
}

.threepagebox.three_column {
    flex: 1 1 29%;
    max-width: 31%;
}

.threepagebox.three_column .thumbbx {
    background: none !important;
    background-color: transparent !important;
}

.threepagebox.three_column .thumbbx::before,
.threepagebox.three_column .thumbbx::after {
    display: none !important;
    content: none !important;
}

.threepagebox.three_column .thumbbx img {
    filter: none !important;
    opacity: 1 !important;
}

.threepagebox.three_column .pagecontent h2 {
    font-size: 130%;
    font-weight: 700;
}

.threepagebox.three_column .pagecontent h2 a {
    color: #000;
    text-decoration: none;
    transition: color 0.2s ease;
}

.threepagebox.three_column .pagecontent h2 a:hover {
    color: #e67e22;
}


/* ================================================
   MOBILE OVERRIDES (max-width: 768px)
   STILL OPEN: the .signexa_posts (underscore) selector below
   does not match .signexa-posts (hyphen) defined above, so this
   rule currently matches nothing. Confirm intended target.
   ================================================ */

@media (max-width: 768px) {
    .container.fadeInLeft {
        display: block !important;
        flex-wrap: unset !important;
    }

    .threepagebox.three_column {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
    }

    h2.section_title {
        text-align: center !important;
        width: 100% !important;
    }

    .signexa_posts,
    .news-box,
    .latest-news {
        text-align: center !important;
        width: 100% !important;
        float: none !important;
        clear: both !important;
    }
}


/* ================================================
   WOOCOMMERCE SHOP ARCHIVE PAGES
   Equal height product cards
   (near duplicate of homepage product grid rules above,
   kept separate as it targets standard shop/archive templates
   rather than the homepage id-scoped feed)
   ================================================ */

.woocommerce ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

.woocommerce ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link img {
    flex-shrink: 0 !important;
}

.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
    flex-grow: 1 !important;
}

.woocommerce ul.products li.product a.add_to_cart_button {
    margin-top: auto !important;
    align-self: center !important;
    width: 80% !important;
    text-align: center !important;
}


/* ================================================
   EQUIPMENT HIRE PAGE - CATEGORY CARDS
   Real class confirmed via devtools: li.product-category
   containing h2.woocommerce-loop-category__title (count
   wrapped in a <mark> tag, now hidden). Orange outline card
   with shadow, fills orange and text goes white on hover,
   title centred via flex on the wrapping <a>, quantity
   count removed entirely. Applies automatically to any
   new categories WooCommerce adds later, no class targets
   a specific category by name.
   ================================================ */

.woocommerce ul.products li.product-category {
    border: 3px solid #e67e22 !important;
    border-radius: 4px !important;
    padding: 10px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
    text-align: center !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}

.woocommerce ul.products li.product-category > a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
}

.woocommerce ul.products li.product-category:hover {
    background-color: #e67e22 !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25) !important;
}

.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
    color: #000 !important;
    background-color: transparent !important;
    border: none !important;
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transition: color 0.2s ease !important;
}

.woocommerce ul.products li.product-category:hover .woocommerce-loop-category__title {
    color: #fff !important;
}

.woocommerce ul.products li.product-category .woocommerce-loop-category__title mark {
    display: none !important;
}


/* ================================================
   EQUIPMENT HIRE CATEGORY CARDS - MOBILE SPACING v3
   Fix: card borders touching on mobile.
   v2 had broken wrapping (one card alone, then two, then
   one). Cause found: WooCommerce adds ::before/::after
   clearfix pseudo-elements to ul.products, and in a flex
   container these become invisible flex items that steal
   a slot in the row. v3 removes them inside the media
   query, adds box-sizing: border-box so the 3px card
   borders and padding fit inside the calc width, and
   keeps the flex gap approach for spacing. Scoped via
   :has() so only lists containing category cards are
   affected. Desktop untouched.
   ================================================ */

@media (max-width: 768px) {
    .woocommerce ul.products:has(li.product-category)::before,
    .woocommerce ul.products:has(li.product-category)::after {
        display: none !important;
        content: none !important;
    }

    .woocommerce ul.products:has(li.product-category) {
        gap: 16px !important;
    }

    .woocommerce ul.products li.product-category {
        box-sizing: border-box !important;
        width: calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
        flex: 0 0 calc(50% - 8px) !important;
        margin: 0 !important;
        clear: none !important;
    }
}


/* ================================================
   FORCE HIDDEN/ANIMATED ELEMENTS VISIBLE ON LOAD
   STILL OPEN: comment says "homepage" but selectors below are
   not scoped to a homepage class/body id, so this applies
   sitewide to any element matching these attribute patterns.
   Confirm that sitewide scope is intended.
   ================================================ */

.elementor-invisible,
[data-aos],
.wow,
.animated,
[class*="animation"],
[data-settings*="animation"],
[style*="opacity:0"],
[style*="opacity: 0"],
#pagearea,
#pagearea .threepagebox,
#pagearea .thumbbx,
#pagearea .pagecontent,
#pagearea .pagecontent > *,
#pagearea img {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
}