/*
Theme Name: FibrePro
Theme URI: https://fibreprocarpetcleaning.co.nz/
Author: Graphinxt
Author URI: https://graphinxt.com/
Description: Custom lightweight theme for FibrePro Carpet Cleaning, Christchurch. Built from the original Webflow markup so the front end is visually identical, but content is editable in WordPress and pages carry full LocalBusiness, Service, FAQ and Article schema.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: fibrepro
*/

/* Real styling lives in assets/css/style.css, enqueued from functions.php. */


/* ---------------------------------------------------------------
   Components added by the WordPress rebuild.
   Everything here inherits the original palette and type scale.
   --------------------------------------------------------------- */

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}
.skip-link:focus {
    position: fixed !important;
    top: 12px; left: 12px;
    width: auto; height: auto;
    clip: auto; z-index: 9999;
    padding: 12px 20px; background: #fff;
    border-radius: 6px; box-shadow: 0 2px 12px rgba(0,0,0,.2);
}

/* Mobile navigation */
@media screen and (max-width: 991px) {
    .nav-menu.is-open { display: block; }
    body.nav-open { overflow: hidden; }
}

/* Sticky call bar */
.fibrepro-sticky-bar { transition: transform .25s ease, opacity .25s ease; }
@media screen and (max-width: 767px) {
    .fibrepro-sticky-bar { transform: translateY(120%); opacity: 0; }
    .fibrepro-sticky-bar.is-visible { transform: translateY(0); opacity: 1; }
}

/* Card grids */
.service-grid, .blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-column-gap: 28px;
    grid-row-gap: 28px;
    margin-top: 40px;
    margin-bottom: 40px;
}
.service-card, .blog-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 18px rgba(16, 42, 67, .08);
    display: flex;
    flex-direction: column;
}
.service-card { padding: 28px; }
.service-card-image img, .blog-card-image img {
    width: 100%; height: auto; display: block; object-fit: cover;
}
.service-card-title, .blog-card-title { margin: 16px 0 10px; font-size: 22px; line-height: 1.3; }
.service-card-title a, .blog-card-title a { color: inherit; text-decoration: none; }
.service-card-title a:hover, .blog-card-title a:hover { text-decoration: underline; }
.blog-card-content { padding: 24px 28px 28px; }
.blog-card-date { font-size: 14px; opacity: .7; }
.blog-feature-image img { width: 100%; height: auto; border-radius: 16px; margin-bottom: 32px; }

/* FAQ accordion - native details/summary, no JS required */
.faq-wrap { max-width: 860px; margin: 40px auto 0; }
.faq-item {
    border-bottom: 1px solid rgba(16, 42, 67, .12);
    padding: 20px 0;
}
.faq-question { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after { content: "+"; font-size: 26px; line-height: 1; flex: 0 0 auto; }
.faq-item[open] .faq-question::after { content: "\2013"; }
.faq-question-text { margin: 0; font-size: 19px; line-height: 1.4; }
.faq-answer { padding-top: 12px; }
.faq-answer p { margin: 0; }

/* Rich text defaults so editor content never looks unstyled */
.rich-text h2 { margin-top: 40px; }
.rich-text h3 { margin-top: 28px; }
.rich-text ul, .rich-text ol { padding-left: 22px; margin-bottom: 20px; }
.rich-text li { margin-bottom: 8px; }
.rich-text img { max-width: 100%; height: auto; border-radius: 12px; }

/* Pagination */
.pagination { display: flex; justify-content: center; margin-top: 32px; }
.pagination .page-numbers {
    display: inline-block; padding: 10px 16px; margin: 0 4px;
    border-radius: 8px; text-decoration: none;
}
.pagination .page-numbers.current { font-weight: 700; }

/* Turnstile widget spacing inside the quote form */
.quote-form .cf-turnstile { margin: 8px 0 16px; }


/* ---------------------------------------------------------------
   Webflow animation fallback.
   Webflow shipped inline opacity:0 on animated elements and faded
   them in with its own 450 KB JS bundle. That bundle is gone, so
   anything still carrying a Webflow animation hook must be visible
   by default or it disappears entirely (this is what emptied the
   footer). The reveal below is added by JS only, so with JS off or
   reduced-motion on, everything is simply visible.
   --------------------------------------------------------------- */
[data-w-id] {
    opacity: 1 !important;
    transform: none !important;
}

.fp-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .5s ease;
    will-change: opacity, transform;
}
.fp-reveal.is-in {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .fp-reveal,
    .fp-reveal.is-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ---------------------------------------------------------------
   Rich-text corrections.
   The Webflow stylesheet colours list items and headings with the
   brand blue, which is fine for short marketing blocks but unreadable
   for body content. Body copy inherits the normal text colour, and
   in-page headings step down to a sensible scale.
   --------------------------------------------------------------- */
.rich-text li,
.rich-text ul,
.rich-text ol {
    color: #434f59;
    font-size: 17px;
    line-height: 1.7;
}
.rich-text li::marker { color: #2bb1e9; }

.rich-text h2 {
    color: #1a1d21;
    font-size: 32px;
    line-height: 1.25;
    margin-top: 44px;
    margin-bottom: 14px;
}
.rich-text h3 {
    color: #1a1d21;
    font-size: 23px;
    line-height: 1.3;
    margin-top: 30px;
    margin-bottom: 10px;
}
.rich-text p {
    font-size: 17px;
    line-height: 1.75;
    margin-bottom: 18px;
}
.rich-text a { color: #2bb1e9; text-decoration: underline; }
.rich-text a:hover { text-decoration: none; }

@media screen and (max-width: 767px) {
    .rich-text h2 { font-size: 26px; }
    .rich-text h3 { font-size: 20px; }
}


/* ---------------------------------------------------------------
   Rich-text lists flow into columns on wider screens.
   Service inclusions and suburb lists ran to a full screen of
   single-column bullets otherwise, which nobody reads.
   --------------------------------------------------------------- */
.rich-text ul,
.rich-text ol {
    padding-left: 20px;
    margin: 0 0 24px;
}
.rich-text li {
    margin-bottom: 6px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}
@media screen and (min-width: 768px) {
    .rich-text ul {
        column-count: 2;
        column-gap: 44px;
    }
}
@media screen and (min-width: 1100px) {
    .rich-text ul {
        column-count: 3;
    }
}
/* Ordered lists stay single column - the sequence matters. */
.rich-text ol {
    column-count: 1 !important;
}