/* ==========================================================================
   KJF Custom Trim - conversion enhancements

   Loaded after styles.min.css so these rules win without editing the
   minified stylesheet, which has no source file in this repo.

   Note: the .btn / .btn-filled classes already in the markup were never
   defined in any stylesheet -- the submit button gets its look purely from
   skeleton.css's input[type="submit"] rules. Anchors styled as buttons
   therefore need their own classes, below.
   ========================================================================== */

/* --- Buttons ------------------------------------------------------------- */

.kjf-btn {
    display: inline-block;
    height: 46px;
    line-height: 46px;
    padding: 0 26px;
    margin: 0 6px 10px 0;
    font-family: 'Open Sans', arial, sans-serif;
    font-size: 1.4em;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .2s ease-out, color .2s ease-out, border-color .2s ease-out;
}

.kjf-btn i {
    margin-right: 8px;
}

/* Solid: white on the dark hero, reads as the primary action. */
.kjf-btn--solid {
    background-color: rgba(0, 0, 0, .55);
    border-color: #fff;
    color: #fff;
}

.kjf-btn--solid:hover,
.kjf-btn--solid:focus {
    background-color: #000;
    border-color: #fff;
    color: #fff;
    text-decoration: none;
}

.kjf-btn--ghost {
    background-color: rgba(0, 0, 0, .45);
    border-color: #fff;
    color: #fff;
}

.kjf-btn--ghost:hover,
.kjf-btn--ghost:focus {
    background-color: #fff;
    border-color: #fff;
    color: #000;
    text-decoration: none;
}

/* --- Hero content --------------------------------------------------------
   Sits inside the sequence slide, which previously held nothing at all.    */

.kjf-hero-content {
    /* The site runs html{font-size:62.5%}, so 1em = 10px. Pinned here so the
       em sizes below stay predictable wherever this block is anchored. */
    font-size: 10px;
    position: absolute;
    /* .logo-main is absolutely positioned at top:25% with z-index:100, so
       anything lower than that renders behind the logo artwork. Sit below
       the logo AND above it in the stack. */
    z-index: 110;
    top: auto;
    bottom: 13%;
    left: 0;
    right: 0;
    padding: 0 6%;
    text-align: center;
    color: #fff;
}

/* The hero headline stays in the markup for SEO but never renders -- the
   logo artwork sits where it would be. */
.kjf-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.kjf-hero-actions {
    margin: 0;
}

@media only screen and (max-width: 959px) {
    .kjf-hero-content { bottom: 9%; }
    .kjf-btn { height: 42px; line-height: 42px; padding: 0 18px; font-size: 1.3em; }
}

/* --- Sticky mobile contact bar -------------------------------------------
   The whole nav -- phone number included -- is visibility:hidden below
   960px until the hamburger is tapped, and the form sits in the footer.
   This keeps one-tap contact on screen the entire time.

   z-index stays below the nav overlay (99999) so an open menu covers it.  */

.kjf-callbar {
    display: none;
}

@media only screen and (max-width: 959px) {
    .kjf-callbar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        background: #000;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, .35);
    }

    .kjf-callbar a {
        flex: 1 1 0;
        padding: 16px 8px;
        font-family: 'Open Sans', arial, sans-serif;
        font-size: 1.5em;
        font-weight: 600;
        letter-spacing: .06em;
        text-align: center;
        text-transform: uppercase;
        text-decoration: none;
        color: #fff;
    }

    .kjf-callbar a + a {
        border-left: 1px solid rgba(255, 255, 255, .25);
    }

    .kjf-callbar a i {
        margin-right: 8px;
    }

    .kjf-callbar a:active {
        background: #222;
    }

    /* Keep the bar from covering the last of the footer. */
    body {
        padding-bottom: 56px;
    }

    /* Lift the scroll-to-top button clear of the bar. */
    .scrollTop {
        bottom: 70px !important;
    }
}

/* --- FAQ ------------------------------------------------------------------ */

#faq {
    background: #fff;
    padding: 70px 0 60px;
}

#faq h2 {
    margin-bottom: 10px;
    font-size: 3em;
    text-transform: uppercase;
    text-align: center;
    color: #000;
}

#faq .kjf-faq-intro {
    max-width: 640px;
    margin: 0 auto 40px;
    font-size: 1.6em;
    font-weight: 300;
    line-height: 1.8;
    text-align: center;
    color: #5f5f5f;
}

.kjf-faq-item {
    max-width: 780px;
    margin: 0 auto;
    border-top: 1px solid #e4e4e4;
    padding: 22px 0;
}

.kjf-faq-item:last-child {
    border-bottom: 1px solid #e4e4e4;
}

.kjf-faq-item h3 {
    margin: 0 0 8px;
    font-size: 1.9em;
    font-weight: 600;
    color: #000;
}

.kjf-faq-item p {
    margin: 0;
    font-size: 1.5em;
    font-weight: 300;
    line-height: 1.8;
    color: #5f5f5f;
}

/* --- Contact form additions ----------------------------------------------- */

#main-footer #contactform .kjf-field-hint {
    display: block;
    margin: -6px 0 14px;
    font-size: 1.25em;
    font-weight: 300;
    line-height: 1.5;
    color: #777;
}

#main-footer #contactform .kjf-photo-field {
    margin-bottom: 14px;
}

/* The native file input is hidden rather than removed: the label's `for`
   opens the picker, so click-to-browse and keyboard access still work
   without any JavaScript. */
.kjf-dropzone {
    display: block;
    padding: 22px 16px;
    background: #fff;
    border: 2px dashed #bbb;
    border-radius: 6px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease-out, background-color .15s ease-out;
}

.kjf-dropzone:hover,
.kjf-photo-field:focus-within .kjf-dropzone {
    border-color: #000;
    background: #fafafa;
}

.kjf-dropzone.is-dragging {
    border-color: #000;
    border-style: solid;
    background: #f0f0f0;
}

.kjf-dropzone i {
    display: block;
    margin-bottom: 8px;
    font-size: 2.6em;
    color: #999;
}

.kjf-dropzone .kjf-dropzone-title {
    display: block;
    margin-bottom: 4px;
    font-size: 1.5em;
    font-weight: 600;
    color: #444;
}

.kjf-dropzone .kjf-dropzone-hint {
    display: block;
    font-size: 1.25em;
    font-weight: 300;
    line-height: 1.5;
    color: #888;
}

.kjf-photo-previews {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.kjf-photo-previews:empty {
    margin-top: 0;
}

.kjf-photo-thumb {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 4px;
    overflow: hidden;
    background: #ddd;
}

.kjf-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#kjf-photo-status {
    display: block;
    margin-top: 6px;
    font-size: 1.25em;
    font-weight: 300;
    color: #777;
}

#kjf-photo-status.kjf-photo-error {
    color: #c0392b;
}