/* =========================================================
   KATULYAFARM — GLOBAL DESIGN SYSTEM
   Typography: Jost (Google Fonts)
   Purpose: Global colours, typography, spacing and UI tokens
   Brand colours extracted directly from KATULYA FARMS.svg
   ========================================================= */

:root {

    /* -----------------------------------------------------
       KATULYAFARM BRAND COLOURS — VERIFIED FROM LOGO SVG
       .s0 = Dark Forest Green | .s2 = Mid Leaf Green | .s1 = Gold/Amber
       ----------------------------------------------------- */

    --kf-primary: #1c5c30;
    --kf-primary-dark: #123d20;
    --kf-primary-light: #76bf70;
    --kf-secondary: #76bf70;
    --kf-secondary-dark: #5a9955;
    --kf-secondary-light: #a3d69e;
    --kf-accent: #e4ae44;
    --kf-accent-dark: #c48f2c;
    --kf-accent-light: #efc978;

    /* -----------------------------------------------------
       NEUTRAL COLOURS
       Not brand-specific — kept as a near-black/warm-grey
       scale that reads well alongside forest green + gold.
       ----------------------------------------------------- */

    --kf-dark: #1a2418;
    --kf-dark-soft: #2c352a;

    --kf-text: #3d443b;
    --kf-text-light: #666e62;

    --kf-white: #FFFFFF;
    --kf-off-white: #FAF9F5;

    --kf-light: #F3F1E9;
    --kf-light-green: #EEF3EA;

    --kf-border: #E1E3DC;
    --kf-border-dark: #C9CEC3;

    /* -----------------------------------------------------
       BACKGROUNDS
       ----------------------------------------------------- */

    --kf-bg-primary: var(--kf-white);
    --kf-bg-soft: var(--kf-off-white);
    --kf-bg-light: var(--kf-light);
    --kf-bg-green: var(--kf-light-green);
    --kf-bg-dark: var(--kf-dark);

    /* -----------------------------------------------------
       TYPOGRAPHY — Jost, Google Fonts, default everywhere
       ----------------------------------------------------- */

    --kf-font-primary: "Jost", sans-serif;
    --kf-font-heading: "Jost", sans-serif;
    --kf-font-body: "Jost", sans-serif;

    --kf-font-weight-light: 300;
    --kf-font-weight-regular: 400;
    --kf-font-weight-medium: 500;
    --kf-font-weight-semibold: 600;
    --kf-font-weight-bold: 700;

    /* -----------------------------------------------------
       TYPOGRAPHY SCALE
       ----------------------------------------------------- */

    --kf-text-xs: 0.75rem;
    --kf-text-sm: 0.875rem;
    --kf-text-base: 1rem;
    --kf-text-lg: 1.125rem;
    --kf-text-xl: 1.25rem;
    --kf-text-2xl: 1.5rem;
    --kf-text-3xl: 1.875rem;
    --kf-text-4xl: 2.25rem;
    --kf-text-5xl: 3rem;
    --kf-text-6xl: 3.75rem;

    /* -----------------------------------------------------
       HEADINGS
       ----------------------------------------------------- */

    --kf-h1-size: clamp(2.5rem, 5vw, 4.5rem);
    --kf-h2-size: clamp(2rem, 4vw, 3.25rem);
    --kf-h3-size: clamp(1.5rem, 3vw, 2.25rem);
    --kf-h4-size: 1.5rem;
    --kf-h5-size: 1.25rem;
    --kf-h6-size: 1.1rem;

    --kf-heading-line-height: 1.15;
    --kf-body-line-height: 1.7;

    /* -----------------------------------------------------
       SPACING SYSTEM
       ----------------------------------------------------- */

    --kf-space-xs: 0.25rem;
    --kf-space-sm: 0.5rem;
    --kf-space-md: 1rem;
    --kf-space-lg: 1.5rem;
    --kf-space-xl: 2rem;
    --kf-space-2xl: 3rem;
    --kf-space-3xl: 4rem;
    --kf-space-4xl: 5rem;
    --kf-space-5xl: 6rem;
    --kf-space-6xl: 8rem;

    /* -----------------------------------------------------
       SECTION SPACING
       ----------------------------------------------------- */

    --kf-section-padding-desktop: 6rem;
    --kf-section-padding-tablet: 4.5rem;
    --kf-section-padding-mobile: 3.5rem;

    /* -----------------------------------------------------
       CONTAINER
       ----------------------------------------------------- */

    --kf-container-width: 1280px;
    --kf-container-padding: 1.5rem;

    /* -----------------------------------------------------
       BORDER RADIUS
       Classic premium design = restrained radius
       ----------------------------------------------------- */

    --kf-radius-sm: 4px;
    --kf-radius-md: 8px;
    --kf-radius-lg: 12px;
    --kf-radius-xl: 18px;
    --kf-radius-pill: 999px;

    /* -----------------------------------------------------
       SHADOWS
       ----------------------------------------------------- */

    --kf-shadow-sm: 0 2px 8px rgba(26, 36, 24, 0.06);
    --kf-shadow-md: 0 8px 25px rgba(26, 36, 24, 0.10);
    --kf-shadow-lg: 0 18px 50px rgba(26, 36, 24, 0.14);

    /* -----------------------------------------------------
       TRANSITIONS
       ----------------------------------------------------- */

    --kf-transition-fast: 180ms ease;
    --kf-transition: 300ms ease;
    --kf-transition-slow: 500ms ease;

    /* -----------------------------------------------------
       Z-INDEX
       ----------------------------------------------------- */

    --kf-z-header: 1000;
    --kf-z-dropdown: 1100;
    --kf-z-overlay: 1200;
    --kf-z-modal: 1300;

}


/* =========================================================
   GLOBAL TYPOGRAPHY
   ========================================================= */

html,
body {
    font-family: var(--kf-font-body)!important;
    color: var(--kf-text);
    background: var(--kf-bg-primary);
    line-height: var(--kf-body-line-height);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--kf-font-heading);
    color: var(--kf-dark);
    font-weight: var(--kf-font-weight-semibold);
    line-height: var(--kf-heading-line-height);
    margin-top: 0;
}

h1 { font-size: var(--kf-h1-size); }
h2 { font-size: var(--kf-h2-size); }
h3 { font-size: var(--kf-h3-size); }
h4 { font-size: var(--kf-h4-size); }
h5 { font-size: var(--kf-h5-size); }
h6 { font-size: var(--kf-h6-size); }

p {
    font-family: var(--kf-font-body);
    font-size: var(--kf-text-base);
    line-height: var(--kf-body-line-height);
}

/* Links use the gold accent, per the SVG's own colour intent
   ("interactive elements ... dividers" = .s1 gold), rather than
   the forest green — ASSUMPTION, easy to flip if you want green
   links instead: swap --kf-accent for --kf-primary below. */
a {
    color: var(--kf-accent-dark);
    transition: color var(--kf-transition-fast), opacity var(--kf-transition-fast);
}

a:hover {
    color: var(--kf-accent);
}


/* =========================================================
   GLOBAL BUTTON SYSTEM
   ========================================================= */

/* NOTE: ".elementor-button" is bumped to "body .elementor-button" throughout
   this block (not touching .kf-btn*). Elementor's own frontend.min.css ships
   an equal-specificity .elementor-button{background-color:#69727d} rule that
   this site loads AFTER this file (Elementor prints some of its CSS from a
   later hook than theme wp_enqueue_scripts, so dependency ordering alone
   can't win this one) — without the extra specificity, Elementor's default
   would silently win and this override would do nothing. Verified: no page
   on the site currently renders a native Elementor Button widget, so this
   is a latent-bug fix, not a visible regression fix. */
.kf-btn,
body .elementor-button {
    font-family: var(--kf-font-primary);
    font-weight: var(--kf-font-weight-medium);
    letter-spacing: 0.02em;
    padding: 0.85rem 1.75rem;
    border-radius: var(--kf-radius-sm);
    transition: all var(--kf-transition);
}

/* Primary button — main CTAs, forest green */
.kf-btn-primary,
body .elementor-button {
    background: var(--kf-primary);
    color: var(--kf-white);
    border: 1px solid var(--kf-primary);
}

.kf-btn-primary:hover,
body .elementor-button:hover {
    background: var(--kf-primary-dark);
    border-color: var(--kf-primary-dark);
    color: var(--kf-white);
    transform: translateY(-2px);
}

/* Secondary button — leaf green, for alternate/lower-emphasis actions */
.kf-btn-secondary {
    background: var(--kf-secondary);
    color: var(--kf-white);
    border: 1px solid var(--kf-secondary);
}

.kf-btn-secondary:hover {
    background: var(--kf-secondary-dark);
    border-color: var(--kf-secondary-dark);
    color: var(--kf-white);
}

/* Accent button — gold, for standout/highlight CTAs
   (new: split out from "secondary" in the original draft,
   since gold and leaf-green are different brand colours) */
.kf-btn-accent {
    background: var(--kf-accent);
    color: var(--kf-dark);
    border: 1px solid var(--kf-accent);
}

.kf-btn-accent:hover {
    background: var(--kf-accent-dark);
    border-color: var(--kf-accent-dark);
    color: var(--kf-white);
}

/* Outline button */
.kf-btn-outline {
    background: transparent;
    color: var(--kf-primary);
    border: 1px solid var(--kf-primary);
}

.kf-btn-outline:hover {
    background: var(--kf-primary);
    color: var(--kf-white);
}


/* =========================================================
   GLOBAL SECTIONS
   ========================================================= */

.kf-section {
    padding-top: var(--kf-section-padding-desktop);
    padding-bottom: var(--kf-section-padding-desktop);
}

.kf-section-light { background: var(--kf-bg-soft); }
.kf-section-green { background: var(--kf-bg-green); }

.kf-section-dark {
    background: var(--kf-bg-dark);
    color: var(--kf-white);
}

.kf-section-dark h1,
.kf-section-dark h2,
.kf-section-dark h3,
.kf-section-dark h4,
.kf-section-dark h5,
.kf-section-dark h6 {
    color: var(--kf-white);
}


/* =========================================================
   CONTAINER
   ========================================================= */

.kf-container {
    width: 100%;
    max-width: var(--kf-container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--kf-container-padding);
    padding-right: var(--kf-container-padding);
}


/* =========================================================
   PREMIUM CARD SYSTEM
   ========================================================= */

.kf-card {
    background: var(--kf-white);
    border: 1px solid var(--kf-border);
    border-radius: var(--kf-radius-md);
    box-shadow: var(--kf-shadow-sm);
    transition: transform var(--kf-transition), box-shadow var(--kf-transition);
}

.kf-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--kf-shadow-md);
}


/* =========================================================
   IMAGE SYSTEM
   ========================================================= */

.kf-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.kf-image-hover { overflow: hidden; }

.kf-image-hover img {
    transition: transform var(--kf-transition-slow);
}

.kf-image-hover:hover img {
    transform: scale(1.04);
}


/* =========================================================
   EYEBROW / SECTION LABEL
   Uses gold accent — matches the SVG's "interactive elements" role
   ========================================================= */

.kf-eyebrow {
    display: inline-block;
    font-family: var(--kf-font-primary);
    font-size: var(--kf-text-sm);
    font-weight: var(--kf-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--kf-accent-dark);
    margin-bottom: var(--kf-space-md);
}


/* =========================================================
   SECTION TITLE
   ========================================================= */

.kf-section-title {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.kf-section-title h2 {
    margin-bottom: var(--kf-space-lg);
}

.kf-section-title p {
    color: var(--kf-text-light);
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.kf-header {
    position: relative;
    z-index: var(--kf-z-header);
    background: var(--kf-white);
}

.kf-header a {
    font-weight: var(--kf-font-weight-medium);
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.kf-navigation a {
    position: relative;
    color: var(--kf-dark);
    text-decoration: none;
}

.kf-navigation a:hover {
    color: var(--kf-primary);
}


/* =========================================================
   FORM ELEMENTS
   ========================================================= */

.kf-form input,
.kf-form textarea,
.kf-form select {
    width: 100%;
    font-family: var(--kf-font-primary);
    font-size: var(--kf-text-base);
    padding: 0.85rem 1rem;
    border: 1px solid var(--kf-border);
    border-radius: var(--kf-radius-sm);
    background: var(--kf-white);
    color: var(--kf-text);
    transition: border-color var(--kf-transition-fast), box-shadow var(--kf-transition-fast);
}

.kf-form input:focus,
.kf-form textarea:focus,
.kf-form select:focus {
    outline: none;
    border-color: var(--kf-primary);
    box-shadow: 0 0 0 3px rgba(28, 92, 48, 0.12);
}


/* =========================================================
   GLOBAL UTILITY CLASSES
   ========================================================= */

.kf-text-primary { color: var(--kf-primary) !important; }
.kf-text-secondary { color: var(--kf-secondary) !important; }
.kf-text-accent { color: var(--kf-accent-dark) !important; }
.kf-text-dark { color: var(--kf-dark) !important; }
.kf-text-light { color: var(--kf-text-light) !important; }

.kf-bg-primary { background: var(--kf-primary) !important; }
.kf-bg-light { background: var(--kf-bg-light) !important; }
.kf-bg-soft { background: var(--kf-bg-soft) !important; }
.kf-bg-dark { background: var(--kf-dark) !important; }


/* =========================================================
   "WHAT WE OFFER" CARD FIX
   Masterlayer's .master-image-box ships .thumb img{height:auto} —
   fine for the original demo images (all one shared aspect ratio),
   but our real product photography has mixed aspect ratios, which
   made the four "What We Offer" cards render at different heights
   and stagger out of alignment. Force a shared crop so the row
   stays level regardless of a given photo's native dimensions.
   Height raised from an initial 320px to 440px — at 320px the photo
   read as small/cropped against the card's white text area below;
   440px gives the photography more visual weight, closer to the
   circular photo composition's presence in the section above.
   ========================================================= */

.custom-image-box-1 .thumb {
    height: 440px;
}

.custom-image-box-1 .thumb img {
    height: 440px !important;
    object-fit: cover;
}


/* =========================================================
   ABOUT PAGE — "Our Approach" step connectors
   Elementor columns don't support pseudo-element connectors
   natively, so this replicates the prototype's horizontal
   line + gold dot marking the top of each of the 5 steps.
   ========================================================= */

.kf-approach-step {
    position: relative;
}

.kf-approach-step::before {
    content: "";
    position: absolute;
    top: 0;
    left: 15px;
    right: 15px;
    height: 1px;
    background: rgba(238, 242, 234, 0.16);
}

.kf-approach-step::after {
    content: "";
    position: absolute;
    top: -4px;
    left: 15px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--kf-accent);
}

/* ABOUT PAGE — People & Community feature photo: match the
   prototype's fixed-height, object-fit-cover treatment. */
.kf-feature-photo img {
    height: 340px;
    object-fit: cover;
    border-radius: var(--kf-radius-md);
}


/* =========================================================
   CONTACT PAGE — remove the theme's default #main-content
   top/bottom padding (120px, style.css:1460)
   The theme ships a .no-padding-content #main-content override
   (style.css:1464) for exactly this, but nothing in the theme
   ever adds that body class — checked framework/elementor-options.php
   and body_class in framework/theme-hooks.php, no toggle exists
   anywhere. Rather than edit core theme CSS, scope the override to
   this page only via Elementor's own page-specific body class
   (.elementor-page-2393, reliably present since Elementor renders
   this page's template — WP core's usual .page-id-2393 isn't
   present on Elementor-templated pages here).
   ========================================================= */

.elementor-page-2393 #main-content {
    padding: 0;
}


/* =========================================================
   PRODUCTS PAGE — filter pills + product grid
   Ported verbatim from katulya-html/css/components.css so the
   gallery section (rendered via shortcodes, see functions.php)
   matches the prototype exactly.
   ========================================================= */

.kf-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 2.5rem;
}
.kf-filters button {
    padding: 0.55rem 1.2rem;
    border: 1px solid var(--kf-border, #dedad0);
    border-radius: 999px;
    font-size: 0.88rem;
    font-family: var(--kf-font-primary);
    color: #5b6459;
    background: transparent;
    cursor: pointer;
    transition: background 300ms ease, color 300ms ease, border-color 300ms ease;
}
.kf-filters button.is-active,
.kf-filters button:hover {
    background: var(--kf-primary);
    border-color: var(--kf-primary);
    color: #ffffff;
}
[data-filter-item][hidden] { display: none; }

.kf-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}
.kf-product-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--kf-radius-md, 6px);
    background: #0c2014;
    aspect-ratio: 4/5;
}
.kf-product-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms ease;
}
.kf-product-card:hover img { transform: scale(1.07); }
.kf-product-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12,32,20,0) 40%, rgba(12,32,20,0.92) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    color: #eef2ea;
}
.kf-product-card__cat {
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: var(--kf-accent);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
}
.kf-product-card__overlay h3 {
    color: #eef2ea;
    margin-bottom: 0.4rem;
    font-family: var(--kf-font-heading);
    font-weight: 500;
    font-size: 1.25rem;
}
.kf-product-card__overlay p {
    font-size: 0.85rem;
    color: #a9b8ac;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    transition: max-height 400ms ease, opacity 300ms ease, margin 400ms ease;
}
.kf-product-card:hover .kf-product-card__overlay p,
.kf-product-card:focus-within .kf-product-card__overlay p {
    max-height: 6rem;
    opacity: 1;
    margin-top: 0.5rem;
}
.kf-product-card__enquire {
    margin-top: 0.9rem;
    font-size: 0.82rem;
    color: var(--kf-accent);
    display: inline-block;
}
@media (max-width: 860px) {
    .kf-products-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .kf-products-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   GALLERY PAGE — masonry grid + lightbox
   Ported from katulya-html/css/components.css. The prototype's
   `1.25rem` gap/margin assumes a 16px root font-size (its global.css
   sets body font-size:16px, no root rescale). This theme's style.css
   sets `html { font-size: 62.5% }` (1rem = 10px), so porting the same
   rem value silently under-shoots (1.25rem -> 12.5px instead of the
   intended 20px). Written as explicit px below so it's immune to that
   mismatch and renders the same 20px the prototype does.
   ========================================================= */

.kf-gallery {
    columns: 3 260px;
    column-gap: 20px;
}
.kf-gallery__item {
    break-inside: avoid;
    margin-bottom: 20px;
    position: relative;
    border-radius: var(--kf-radius-md, 6px);
    overflow: hidden;
    cursor: zoom-in;
}
/* Elementor's frontend.min.css ships
   ".elementor .elementor-widget:not(.elementor-widget-text-editor)
   :not(.elementor-widget-theme-post-content) figure { margin: 0 }" —
   specificity (0,4,1), which silently wins over the single-class rule
   above and was zeroing out margin-bottom entirely (confirmed via
   computed style: items were rendering with 0px between them, not just
   a smaller gap). #gallery-grid is the shortcode's own wrapper id, so
   scoping through it gives (1,1,0) — an id beats any number of classes,
   so this reliably wins without resorting to !important. */
#gallery-grid .kf-gallery__item {
    margin-bottom: 20px;
}
.kf-gallery__item img {
    width: 100%;
    display: block;
    transition: transform 500ms ease;
}
.kf-gallery__item:hover img { transform: scale(1.04); }
.kf-gallery__caption {
    position: absolute;
    left: 0.9rem;
    right: 0.9rem;
    bottom: 0.8rem;
    color: #eef2ea;
    font-size: 0.82rem;
    opacity: 0;
    transition: opacity 300ms ease;
}
.kf-gallery__item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12,32,20,0) 55%, rgba(12,32,20,0.8) 100%);
    opacity: 0;
    transition: opacity 300ms ease;
}
.kf-gallery__item:hover::after,
.kf-gallery__item:hover .kf-gallery__caption { opacity: 1; }

.kf-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(12,32,20,0.96);
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 5vw, 3rem);
}
.kf-lightbox.is-open { display: flex; }
.kf-lightbox img {
    max-width: 90vw;
    max-height: 85vh;
    border-radius: var(--kf-radius-sm, 3px);
}
.kf-lightbox__close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    color: #eef2ea;
    font-size: 1rem;
    border: 1px solid rgba(238,242,234,0.16);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    cursor: pointer;
}
.kf-lightbox__caption {
    position: absolute;
    bottom: 2rem;
    left: 0;
    right: 0;
    text-align: center;
    color: #a9b8ac;
    font-size: 0.85rem;
}
@media (max-width: 700px) {
    .kf-gallery { columns: 2 160px; }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1024px) {
    :root {
        --kf-section-padding-desktop: var(--kf-section-padding-tablet);
    }
}

@media (max-width: 767px) {
    :root {
        --kf-section-padding-desktop: var(--kf-section-padding-mobile);
        --kf-container-padding: 1.25rem;
    }

    .kf-section-title {
        text-align: left;
    }
}