/*
 * Theme Name: Turnover Craft
 * Version: 2.4
 * Description: Custom wordpress theme configured for sites made with Site Builder by Corporate Tools
 * Author: Turnover Craft
 */

/**
 * Custom Styling for the FluentForm Submission Button
 */
form.fluent_form_3 .wpf_has_custom_css.ff-btn-submit {
    background-color: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--background) !important;
    border-color: var(--wp--preset--color--primary) !important;
    transition: filter 0.2s ease !important;
}

form.fluent_form_3 .wpf_has_custom_css.ff-btn-submit:hover {
    filter: brightness(1.1) !important;
}

/*
 * When clicking links, make the scrolling behavior smooth to improve the user experience.
 */
html {
    scroll-behavior: smooth;
}

.wp-block-site-title a:hover {
    opacity: 80%;
}

.wp-block-navigation-item {
    color: var(--wp--preset--color--text);
}

.wp-block-navigation-item:hover {
    opacity: 80%;
}

.wp-block-button:hover {
    opacity: 80%;
}

/*
Get rid of the padding above/below the blocks wrapper,
which was leaving whitespace above/below the header/footer
*/
.wp-site-blocks {
    padding: 0;
}

/*
Get rid of the default margin-top around all of the outer blocks (example: hero section after header),
changing here instead of theme.json so that global blockGap is not changed for inner blocks and elements
 */
:where(.wp-site-blocks)>* {
    margin-block-start: 0;
}

/*
Adjust positioning of the "details" block summary when it is an H4
 */
summary h4 {
    display: inline;
    margin-left: 10px;
}

.header-block {
    position: relative;
    z-index: 1;
    border-bottom: 2px solid;
}

/*
Hide an info box/block from the frontend of the site (like the info box on the contact page block pattern.
 */
.hide-from-site-frontend {
    display: none;
}

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
    text-decoration-thickness: 1px !important;
    text-underline-offset: 0.1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
    outline-width: 2px;
    outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
    margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
    outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
caption,
figcaption,
p {
    text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
    display: block;
}

/*
 * Fix website header to always show at top of page and have colors from the theme
 */
.site-header {
    position: fixed;
    width: 100%;
    background-color: var(--wp--preset--color--background);
    z-index: 1000;
    border-bottom: 1px solid;
    box-shadow:
        0 1px 3px 0 rgb(0 0 0 / 0.1),
        0 1px 2px -1px rgb(0 0 0 / 0.1);
    /* Add a bottom box shadow to the header block */
}

.site-header img {
    height: auto;
    width: calc(var(--wp--preset--spacing--40) * 2);
}

/* Adjust for admin bar on desktop */
.admin-bar .site-header {
    top: 32px !important;
    /* WordPress admin bar height on desktop */
}

/* Adjust for admin bar on mobile devices */
@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px !important;
        /* WordPress admin bar height on mobile */
    }
}

/* For very small screens where WP removes the admin bar */
@media screen and (max-width: 600px) {
    .admin-bar .site-header {
        top: 0 !important;
    }
}

/*
 * Make the separator between the footer and content, not so thick
 */
.wp-block-separator {
    border: none !important;
    border-top: 1px solid !important;
}

#products .wp-block-column {
    transition: scale 0.15s ease-in-out;
}

#products .wp-block-column:hover {
    scale: 105%;
}

/*Fix overflow of some unsplash images in certain browsers  */
img {
    width: 100%;
}

.footer-contact-columns .wp-block-group {
    text-align: center;
}

.footer-contact-columns {
    align-items: center;
}


/* === Turnover Craft polish pass (v2.2) === */
:root {
    --tc-primary: #0F2730;
    --tc-secondary: #00C9B7;
    --tc-accent: #009F98;
    --tc-bg: #F8FAFC;
    --tc-text: #334155;
}

/* Keep the navigation present without letting a fixed header cover page content. */
.site-header {
    position: sticky !important;
    top: 0;
    background: rgba(248, 250, 252, 0.97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom-color: color-mix(in srgb, var(--tc-primary) 12%, transparent);
}

.admin-bar .site-header { top: 32px !important; }
@media screen and (max-width: 782px) { .admin-bar .site-header { top: 46px !important; } }
@media screen and (max-width: 600px) { .admin-bar .site-header { top: 0 !important; } }

/* Make the actual horizontal Turnover Craft wordmark readable in the header. */
.site-header .wp-block-image {
    margin: 0;
    line-height: 0;
}
.site-header .wp-block-image img {
    width: clamp(180px, 19vw, 270px) !important;
    max-width: 100%;
    height: auto !important;
    object-fit: contain;
}
.site-header > .wp-block-group,
.site-header .alignwide {
    min-height: 64px;
}

/* Hero: strong desktop presence without consuming an entire phone screen. */
.wp-block-bronkbuilderwp-hero-block .wp-block-cover {
    min-height: clamp(560px, 76vh, 780px) !important;
    padding-top: clamp(7rem, 12vw, 10rem) !important;
    padding-bottom: clamp(5rem, 10vw, 8rem) !important;
}
.wp-block-bronkbuilderwp-hero-block h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
    line-height: 1.05;
}
.wp-block-bronkbuilderwp-hero-block p {
    max-width: 760px;
    margin-inline: auto;
}
.wp-block-bronkbuilderwp-hero-block .wp-block-button__link {
    border-radius: 999px;
    padding: 0.9rem 1.5rem;
    font-weight: 700;
}

/* About section image keeps a stable crop and scales naturally. */
.wp-block-bronkbuilderwp-about-block .wp-block-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
}

/* Service cards: use poster artwork as visual art only; WordPress text below remains readable/SEO-friendly. */
#products .wp-block-columns {
    align-items: stretch;
}
#products .wp-block-column {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
#products .wp-block-column:hover {
    scale: 1;
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgb(15 39 48 / 0.12) !important;
}
#products .turnovercraft-service-image {
    background: #fff;
    margin-bottom: 0 !important;
}
#products .turnovercraft-service-image img {
    width: 100%;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block;
}
#products h3 {
    margin-top: 1.35rem !important;
    margin-bottom: 0.45rem !important;
    line-height: 1.18 !important;
    font-size: clamp(1.35rem, 2vw, 1.8rem);
}
#products .wp-block-column > p {
    margin-top: 0.25rem !important;
    margin-bottom: 0 !important;
    line-height: 1.6 !important;
}

/* Contact form should look like the site, not the page-builder defaults. */
#contact input,
#contact textarea,
.fluentform input,
.fluentform textarea,
.fluentform select {
    border: 1px solid color-mix(in srgb, var(--tc-primary) 22%, transparent) !important;
    border-radius: 10px !important;
    background: #fff !important;
}
#contact input:focus,
#contact textarea:focus,
.fluentform input:focus,
.fluentform textarea:focus,
.fluentform select:focus {
    border-color: var(--tc-secondary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc-secondary) 16%, transparent) !important;
    outline: none !important;
}

@media (max-width: 900px) {
    .site-header { padding-inline: 1rem !important; }
    .site-header .alignwide { padding-block: 0.65rem !important; }
    .site-header .wp-block-image img { width: clamp(155px, 42vw, 210px) !important; }
    #products .wp-block-columns { gap: 1.25rem !important; }
}

@media (max-width: 781px) {
    .wp-block-bronkbuilderwp-hero-block .wp-block-cover {
        min-height: 68vh !important;
        padding-top: 6rem !important;
        padding-bottom: 4rem !important;
    }
    .wp-block-bronkbuilderwp-about-block .wp-block-columns {
        gap: 2rem !important;
    }
    #products .wp-block-column:hover { transform: none; }
}


/* v2.2: local artwork and consistent service-card crop behavior. */
#products .turnovercraft-service-image img {
    object-position: 50% 0% !important;
}

/* Keep the About artwork visually aligned with the service-card art direction. */
.wp-block-bronkbuilderwp-about-block .wp-block-image {
    overflow: hidden;
    border-radius: 12px;
}

@media (max-width: 781px) {
    #products .turnovercraft-service-image img {
        aspect-ratio: 16 / 9 !important;
    }
}

/* === Turnover Craft refinement pass (v2.3) === */

/* Global finish */
html {
    scroll-padding-top: 84px;
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#about,
#products,
#contact {
    scroll-margin-top: 84px;
}

/* Header: keep the wordmark readable while reclaiming vertical space. */
.site-header {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-shadow: 0 5px 20px rgb(15 39 48 / 0.06) !important;
}
.site-header > .wp-block-group,
.site-header .is-style-section-1 {
    margin-block: 0 !important;
}
.site-header .alignwide {
    min-height: 58px !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}
.site-header .wp-block-image img {
    width: clamp(175px, 17vw, 240px) !important;
}
.site-header .wp-block-navigation-item__content {
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: color 0.18s ease, opacity 0.18s ease;
}
.site-header .wp-block-navigation-item__content:hover {
    color: var(--tc-accent) !important;
    opacity: 1;
}

/* Hero: slightly quieter typography so the before/after image carries more of the message. */
.wp-block-bronkbuilderwp-hero-block .wp-block-cover {
    min-height: clamp(520px, 70vh, 700px) !important;
    padding-top: clamp(5.5rem, 9vw, 7.5rem) !important;
    padding-bottom: clamp(4.5rem, 8vw, 6.5rem) !important;
}
.wp-block-bronkbuilderwp-hero-block .wp-block-cover__background {
    background: linear-gradient(
        90deg,
        rgb(15 39 48 / 0.48) 0%,
        rgb(15 39 48 / 0.34) 48%,
        rgb(15 39 48 / 0.30) 100%
    ) !important;
    opacity: 1 !important;
}
.wp-block-bronkbuilderwp-hero-block h1 {
    font-size: clamp(2.35rem, 5vw, 3.9rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.025em;
    text-shadow: 0 2px 18px rgb(0 0 0 / 0.2);
    margin-bottom: 0.8rem !important;
}
.wp-block-bronkbuilderwp-hero-block p {
    max-width: 720px;
    font-size: clamp(1.05rem, 1.8vw, 1.3rem) !important;
    line-height: 1.55;
    text-shadow: 0 1px 12px rgb(0 0 0 / 0.18);
}
.wp-block-bronkbuilderwp-hero-block .wp-block-button__link {
    box-shadow: 0 8px 22px rgb(15 39 48 / 0.22);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.wp-block-bronkbuilderwp-hero-block .wp-block-button__link:hover {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgb(15 39 48 / 0.28);
}

/* About: cleaner rhythm and a little more editorial polish. */
#about {
    padding-top: clamp(3.75rem, 7vw, 5.5rem) !important;
    padding-bottom: clamp(3.75rem, 7vw, 5.5rem) !important;
}
#about .wp-block-columns {
    align-items: center;
    column-gap: clamp(2.5rem, 5vw, 5rem) !important;
}
.wp-block-bronkbuilderwp-about-block .wp-block-image {
    box-shadow: 0 20px 45px rgb(15 39 48 / 0.10);
}
.wp-block-bronkbuilderwp-about-block .wp-block-image img {
    border-radius: 12px !important;
}
#about h1,
#about h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 1.15 !important;
    letter-spacing: -0.02em;
}
#about p {
    font-size: clamp(1rem, 1.25vw, 1.08rem);
    line-height: 1.75;
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Services: larger visual windows, stronger cards, and cleaner spacing. */
#products {
    padding-top: clamp(4rem, 7vw, 5.5rem) !important;
    padding-bottom: clamp(4rem, 7vw, 5.5rem) !important;
}
#products > h2,
#products > .wp-block-heading {
    margin-bottom: clamp(1.75rem, 3vw, 2.5rem) !important;
}
#products .wp-block-columns {
    gap: clamp(1.25rem, 2.4vw, 2rem) !important;
}
#products .wp-block-column {
    border: 1px solid rgb(15 39 48 / 0.07);
    box-shadow: 0 14px 34px rgb(15 39 48 / 0.10) !important;
    min-width: 0;
}
#products .turnovercraft-service-image {
    overflow: hidden;
}
#products .turnovercraft-service-image img {
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    object-position: center !important;
}
#products h3 {
    font-size: clamp(1.45rem, 2vw, 1.85rem) !important;
    margin-top: 1.25rem !important;
    margin-bottom: 0.55rem !important;
}
#products .wp-block-column > p {
    flex: 1 1 auto;
    font-size: 1rem !important;
    line-height: 1.65 !important;
    margin-top: 0.15rem !important;
}

/* Quote section: contained, calm, and clearly actionable. */
#contact {
    background: linear-gradient(180deg, #f8fafc 0%, #f2f7f7 100%);
    padding-top: clamp(4rem, 7vw, 5.5rem) !important;
    padding-bottom: clamp(4rem, 7vw, 5.5rem) !important;
}
#contact > h1,
#contact > h2 {
    margin-bottom: 1.25rem !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em;
}
#contact > .wp-block-group.alignwide {
    max-width: 820px !important;
    background: #fff;
    border: 1px solid rgb(15 39 48 / 0.07);
    border-radius: 18px;
    box-shadow: 0 18px 42px rgb(15 39 48 / 0.09);
    padding: clamp(1.4rem, 3vw, 2.25rem) !important;
}
#contact label,
.fluentform label {
    color: var(--tc-primary) !important;
    font-weight: 600 !important;
}
#contact input,
#contact textarea,
#contact select,
.fluentform input,
.fluentform textarea,
.fluentform select {
    min-height: 48px;
    padding: 0.75rem 0.9rem !important;
    font-size: 1rem !important;
}
#contact textarea,
.fluentform textarea {
    min-height: 132px;
    resize: vertical;
}
#contact .ff-btn-submit,
.fluentform .ff-btn-submit,
#contact button[type="submit"] {
    min-height: 50px;
    border-radius: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
#contact .ff-btn-submit:hover,
.fluentform .ff-btn-submit:hover,
#contact button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgb(15 39 48 / 0.18);
}

/* Footer: give the page a deliberate branded finish. */
.site-footer {
    background: var(--tc-primary) !important;
    color: #fff !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1.25rem !important;
}
.site-footer .wp-block-separator {
    display: none;
}
.site-footer p,
.site-footer a {
    color: rgb(255 255 255 / 0.88) !important;
}
.site-footer a:hover {
    color: var(--tc-secondary) !important;
    opacity: 1;
}
.site-footer > .wp-block-group,
.site-footer .wp-block-group {
    margin-bottom: 0 !important;
}

/* Mobile refinement */
@media (max-width: 900px) {
    html { scroll-padding-top: 74px; }
    #about, #products, #contact { scroll-margin-top: 74px; }
    .site-header .alignwide {
        min-height: 54px !important;
        padding-top: 0.4rem !important;
        padding-bottom: 0.4rem !important;
    }
    .site-header .wp-block-image img {
        width: clamp(150px, 40vw, 200px) !important;
    }
}

@media (max-width: 781px) {
    .wp-block-bronkbuilderwp-hero-block .wp-block-cover {
        min-height: 60vh !important;
        padding-top: 4.75rem !important;
        padding-bottom: 3.75rem !important;
    }
    .wp-block-bronkbuilderwp-hero-block h1 {
        font-size: clamp(2.15rem, 10vw, 3rem) !important;
    }
    .wp-block-bronkbuilderwp-hero-block p {
        font-size: 1.05rem !important;
    }
    #about .wp-block-columns {
        gap: 2rem !important;
    }
    #products .wp-block-column {
        max-width: 560px;
        margin-inline: auto;
        width: 100%;
    }
    #products .turnovercraft-service-image img {
        aspect-ratio: 4 / 3 !important;
    }
    #contact > .wp-block-group.alignwide {
        border-radius: 14px;
        padding: 1.25rem !important;
    }
}

@media (max-width: 480px) {
    .site-header .wp-block-image img {
        width: 150px !important;
    }
    .wp-block-bronkbuilderwp-hero-block .wp-block-cover {
        min-height: 56vh !important;
    }
    #products h3 {
        font-size: 1.4rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}
\n\n/* === Turnover Craft final functional polish (v2.4) === */\n.wp-block-bronkbuilderwp-hero-block .wp-block-button__link { min-width:190px; text-align:center; padding-inline:1.55rem !important; }\n#about .wp-block-columns { column-gap:clamp(1.75rem,3vw,3.25rem) !important; }\n#products .wp-block-columns.alignwide { width:min(94vw,1240px) !important; max-width:1240px !important; margin-inline:auto !important; }\n#products .wp-block-column { border-radius:14px !important; }\n#products .turnovercraft-service-image, #products .turnovercraft-service-image img { border-top-left-radius:14px !important; border-top-right-radius:14px !important; }\n#contact .fluentform .ff-t-container { margin-bottom:0 !important; }\n#contact .fluentform .ff-t-container > .ff-t-cell { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:1.15rem; row-gap:.95rem; }\n#contact .fluentform .tc-form-half { grid-column:span 1; margin-bottom:0 !important; }\n#contact .fluentform .tc-form-full { grid-column:1/-1; margin-bottom:0 !important; }\n#contact .fluentform .ff-el-group { margin-bottom:0 !important; }\n#contact .fluentform .ff-el-input--label { margin-bottom:.38rem !important; }\n#contact .fluentform input, #contact .fluentform select, #contact .fluentform textarea { width:100%; border:1px solid rgb(15 39 48 / .16) !important; background:#fff !important; box-shadow:inset 0 1px 1px rgb(15 39 48 / .02); }\n#contact .fluentform select { appearance:auto; }\n#contact .fluentform input::placeholder, #contact .fluentform textarea::placeholder { color:#718096; opacity:1; }\n#contact .fluentform .ff-btn-submit, #contact .fluentform button[type=\"submit\"] { width:100% !important; min-width:0 !important; margin-top:.35rem !important; }\n#contact .fluentform .error, #contact .fluentform .text-danger { font-size:.875rem; }\n#contact input[type=\"date\"] { min-height:48px; }\n@media (max-width:700px) {\n  #contact .fluentform .ff-t-container > .ff-t-cell { grid-template-columns:1fr; row-gap:.9rem; }\n  #contact .fluentform .tc-form-half, #contact .fluentform .tc-form-full { grid-column:1; }\n  #products .wp-block-columns.alignwide { width:min(92vw,560px) !important; }\n}\n@media (max-width:420px) {\n  #contact { padding-inline:.75rem !important; }\n  #contact > .wp-block-group.alignwide { padding:1.1rem !important; }\n  #products .wp-block-column > p { font-size:.97rem !important; }\n}\n