/**
 * BSB Building Contractors – assets/css/theme.css
 * Custom styles on top of Tailwind.
 * Imported/enqueued after tailwind.css via enqueue.php.
 */

/* ── Tailwind layer for custom utilities ─────────────────────────────────────
   These supplement the compiled tailwind.css from the HTML source.
   ─────────────────────────────────────────────────────────────────────────── */

/* Smooth scroll for the whole page */
html {
    scroll-behavior: smooth;
}

/* ── Typography: system font-stack fallbacks ─────────────────────────────────
   Montserrat and Open Sans load via Google Fonts.
   These ensure text renders before the webfont loads.
   ─────────────────────────────────────────────────────────────────────────── */
body {
    font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
}

/* ── Selection colour matches HTML ───────────────────────────────────────────*/
::selection {
    background-color: var(--bsb-primary, #2ea3f2);
    color: #ffffff;
}

/* ── Focus ring: accessible, brand-coloured ──────────────────────────────────*/
:focus-visible {
    outline: 2px solid var(--bsb-primary, #2ea3f2);
    outline-offset: 3px;
}

/* ── Header – shadow upgrade on scroll (JS adds style; this is the base) ──── */
header.sticky {
    transition: box-shadow 0.3s ease;
}

/* ── Mobile menu panel transition ────────────────────────────────────────────*/
.bsb-mobile-panel {
    will-change: transform;
}

/* ── Services grid hover card ────────────────────────────────────────────────*/
.bsb-service-card .relative img {
    transition: transform 0.4s ease;
}

.bsb-service-card:hover .relative img {
    transform: scale(1.04);
}

/* ── Gallery item hover ──────────────────────────────────────────────────────*/
.bsb-gallery-item img {
    transition: transform 0.35s ease, opacity 0.25s ease;
}

.bsb-gallery-item:hover img {
    transform: scale(1.05);
    opacity: 0.88;
}

/* ── Testimonial accent bar ──────────────────────────────────────────────────*/
.bsb-testimonial-card::before,
.bg-white.p-8.relative .absolute.w-2 {
    background-color: var(--bsb-primary, #2ea3f2);
}

/* ── Primary button base ─────────────────────────────────────────────────────*/
.bsb-btn,
[style*="background-color:var(--bsb-primary)"],
[style*="background-color: rgb(46, 163, 242)"] {
    transition: opacity 0.2s ease;
}

/* ── CF7 form field focus ────────────────────────────────────────────────────*/
.wpcf7 input:not([type="submit"]):focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--bsb-primary, #2ea3f2);
}

/* ── Footer nav active link ──────────────────────────────────────────────────*/
footer nav a.active {
    color: #ffffff;
}

/* ── Pagination ──────────────────────────────────────────────────────────────*/
.nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-family: 'Montserrat', sans-serif;
}

.nav-links a,
.nav-links span {
    padding: 0.5rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.125rem;
    font-size: 0.875rem;
    font-weight: 600;
    transition: background-color 0.2s, color 0.2s;
    color: var(--bsb-dark, #171717);
}

.nav-links a:hover {
    background-color: var(--bsb-primary, #2ea3f2);
    border-color: var(--bsb-primary, #2ea3f2);
    color: #ffffff;
}

.nav-links span.current {
    background-color: var(--bsb-primary, #2ea3f2);
    border-color: var(--bsb-primary, #2ea3f2);
    color: #ffffff;
}

/* ── Lightbox ────────────────────────────────────────────────────────────────*/
#bsb-lightbox {
    animation: bsb-fade-in 0.2s ease;
}

@keyframes bsb-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Back to top button ──────────────────────────────────────────────────────*/
#bsb-back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 3rem;
    height: 3rem;
    background-color: var(--bsb-primary, #2ea3f2);
    color: #ffffff;
    border: none;
    border-radius: 0.125rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

#bsb-back-to-top:hover {
    opacity: 0.9;
}

/* ── Accessible skip link ────────────────────────────────────────────────────*/
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    padding: 0.75rem 1.5rem;
    background-color: var(--bsb-primary, #2ea3f2);
    color: #ffffff;
    font-weight: 700;
    z-index: 999;
    border-radius: 0 0 0.25rem 0.25rem;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 0;
    color: #ffffff;
}

/* ── WordPress admin bar compensate sticky header ────────────────────────────*/
.admin-bar header.sticky {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar header.sticky {
        top: 46px;
    }
}

/* ── Print ───────────────────────────────────────────────────────────────────*/
@media print {
    header.sticky,
    #bsb-mobile-menu,
    #bsb-mobile-overlay,
    footer,
    .bsb-btn,
    #bsb-back-to-top {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
    }
}