/* Product page inquiry CTA and modal.
 *
 * WHY THE BUTTON SPEC IS REPEATED HERE
 * kf-about.css owns the definition of a Kino Flo button, and the rule in this codebase is to alias
 * into it rather than restate it. That is not available on a product page: kf-about.css is the
 * whole about-page design system and it aliases site-wide components, .uk-button included, so
 * enqueuing it here restyled the header nav into yellow pills on every product page.
 *
 * So the CTA carries its own copy of the tokens and the button geometry, scoped to .kf-inquiry-cta
 * and .kf-inquiry-modal so nothing escapes into the rest of the page. The values are copied from
 * the .kf-sec token block and the .kf-btn block in kf-about.css and must be kept in step with them.
 * The real fix is to lift the token block and the button component out of kf-about.css into a
 * small shared stylesheet that any page can load; until then this is the containable option. */

.kf-inquiry-cta,
.kf-inquiry-modal {
    --kf-yellow: #FED208;
    --kf-ink: #161616;
    --kf-ink-2: #2A2B2C;
    --kf-ink-3: #414243;
    --kf-line: #E5E5E5;
    --kf-display: 'Roboto Condensed', 'Roboto', system-ui, sans-serif;
    --kf-body: 'Roboto', system-ui, sans-serif;
}

/* Copied from the .kf-btn block in kf-about.css. */
.kf-inquiry-cta .kf-btn,
.kf-inquiry-modal .kf-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 52px; padding-inline: 30px; border-radius: 30px;
    font-family: var(--kf-body); font-size: 15px; line-height: 20px; font-weight: 700;
    letter-spacing: normal; text-transform: uppercase; text-decoration: none;
    transition: background-color .15s ease-out, color .15s ease-out;
}

.kf-inquiry-cta .kf-btn--primary,
.kf-inquiry-modal .kf-btn--primary { background: var(--kf-yellow); color: var(--kf-ink); border: 0; }
.kf-inquiry-cta .kf-btn--primary:hover,
.kf-inquiry-modal .kf-btn--primary:hover { background: #D9B201; color: var(--kf-ink); }

.kf-inquiry-cta .kf-btn--ghost { border: 1px solid var(--kf-ink); color: var(--kf-ink); background: transparent; }
.kf-inquiry-cta .kf-btn--ghost:hover { background: var(--kf-ink); color: #fff; }

.kf-inquiry-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

/* Equal widths read as a considered pair rather than two buttons that happen to sit together.
   They grow together and wrap to full width on a narrow column. */
/* An explicit half-minus-half-the-gap basis, not `1 1 auto` or `1 1 0`.
 *
 * The ghost carries a 1px border and the primary does not, so under flexbox the two never come out
 * the same width on their own: a zero basis is floored at each item's padding plus border, leaving
 * the ghost 2px wider at every container width (measured 393 vs 395 at 800px). An `auto` basis is
 * worse, splitting from each button's own text width. Stating the basis makes the pair identical,
 * and border-box keeps the ghost's border inside that width. */
.kf-inquiry-cta__btn {
    flex: 1 1 calc(50% - 6px);
    min-width: 200px;
    box-sizing: border-box;
}

@media (max-width: 639px) {
    .kf-inquiry-cta__btn { flex-basis: 100%; }
}

/* --- modal ---------------------------------------------------------------- */

.kf-inquiry-modal .kf-inquiry-modal__dialog {
    max-width: 620px;
    padding: 40px;
}

.kf-inquiry-modal .kf-inquiry-modal__title {
    margin: 0;
    font-family: var(--kf-display, inherit);
    font-size: 28px;
    line-height: 34px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--kf-ink);
}

/* The product name is the reason the modal is open; it reads as a kicker under the title. */
.kf-inquiry-modal .kf-inquiry-modal__product {
    margin: 4px 0 24px;
    font-family: var(--kf-body);
    font-size: 13px;
    line-height: 20px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kf-ink-3);
}

/* Form controls are deliberately NOT restyled here. The site already styles Gravity Forms
 * globally: 30px pill inputs on #f2f2f2 and a yellow 52px submit, measured on /contact-us/. The
 * inquiry form is the same component as every other form on the site and should not diverge from
 * it, so this file stops at the modal chrome.
 *
 * WITH ONE EXCEPTION: the submit button.
 *
 * That global styling is an inline customizer rule scoped to `#tm-main .gform_button`. A modal is
 * printed in wp_footer and UIkit then moves it to the end of <body> when it opens, so it is never
 * inside #tm-main and the rule has never reached it. Every inquiry modal on the site has therefore
 * been showing Gravity Forms' default blue 3px button instead of the house pill. The values below
 * are the ones measured on /contact-us/, so the two match rather than merely resembling each other.
 *
 * Scoped to .kf-inquiry-modal, so it cannot leak onto forms that ARE inside #tm-main. */
/* Set through Gravity Forms' OWN custom properties, not plain declarations. GF 2.10's framework
   paints the button from these tokens with selectors that outrank a plain class rule — the same
   finding already recorded in lg-forms.css ("GF 2.10 paints from these, not from plain
   declarations"). A background: declaration here simply loses and the button stays blue. */
.kf-inquiry-modal .gform_wrapper,
.kf-inquiry-modal .gform-theme--framework {
    --gf-ctrl-btn-bg-color-primary: #ffd200;
    --gf-ctrl-btn-bg-color-hover-primary: #e6bd00;
    --gf-ctrl-btn-color-primary: #000;
    --gf-ctrl-btn-color-hover-primary: #000;
    --gf-ctrl-btn-border-color-primary: #ffd200;
    --gf-ctrl-btn-border-color-hover-primary: #e6bd00;
    --gf-ctrl-btn-radius: 30px;
    --gf-ctrl-btn-size: 52px;
    --gf-ctrl-btn-padding-x: 34px;
}

@media (max-width: 639px) {
    .kf-inquiry-modal .kf-inquiry-modal__dialog { padding: 28px 20px; }
    .kf-inquiry-modal .kf-inquiry-modal__title { font-size: 22px; line-height: 28px; }
}

/* --- imported product gallery --------------------------------------------- */
/* The gallery slideshow crops with object-fit: cover, which is right for Kino Flo's wide product
 * photography. The imported LiteGear images are mostly square, so cover cut the top and bottom off
 * the fixture. The clone templates set the box to 1:1; `contain` then guarantees nothing is cropped
 * whatever the source aspect. The images sit on white and so does the page, so the letterboxing on
 * a non-square image is not visible.
 *
 * Scoped to .kf-imported-product (added in inc/products/product-inquiry.php) so Kino Flo's own
 * products keep the cover framing their photography is shot for. */
.kf-imported-product .uk-slideshow-items .el-image,
.kf-imported-product .uk-slideshow-nav .el-image {
    object-fit: contain;
}