/* =========================================================
   FARMNOVA AI
   RESPONSIVE STYLES
   responsive.css

   RESPONSIVE BREAKPOINTS

   > 1250px     Large Desktop
   1101-1250px  Laptop
   951-1100px   Small Laptop
   769-950px    Tablet
   481-768px    Large Mobile
   381-480px    Small Mobile
   <= 380px     Very Small Mobile
   ========================================================= */


/* =========================================================
   1. LARGE LAPTOPS
   1250px AND BELOW
   ========================================================= */

@media (max-width: 1250px) {

    .fn-header-container {
        width: min(100% - 40px, 1440px);

        gap: 14px;
    }

    .fn-nav {
        gap: 0;
    }

    .fn-nav-link {
        padding-left: 9px;
        padding-right: 9px;

        font-size: 13px;
    }

    .fn-nav-link:hover::after,
    .fn-nav-link.active::after {
        width: calc(100% - 18px);
    }

    .fn-header-actions {
        gap: 7px;
    }

    .fn-register-btn,
    .fn-analyze-btn {
        min-height: 46px;

        padding-left: 15px;
        padding-right: 15px;

        font-size: 13px;
    }
}


/* =========================================================
   2. SMALL LAPTOPS
   1100px AND BELOW
   ========================================================= */

@media (max-width: 1100px) {

    :root {
        --fn-header-height: 80px;
    }

    .fn-header-container {
        width: min(100% - 35px, 1440px);

        min-height: 80px;

        gap: 12px;
    }

    /* -----------------------------------------------------
       BRAND
    ----------------------------------------------------- */

    .fn-brand-icon {
        width: 40px;
        height: 40px;

        border-radius: 12px;

        font-size: 19px;
    }

    .fn-brand-name {
        font-size: 16px;
    }

    /* -----------------------------------------------------
       NAVIGATION
    ----------------------------------------------------- */

    .fn-nav {
        gap: 0;
    }

    .fn-nav-link {
        padding-left: 7px;
        padding-right: 7px;

        font-size: 12px;
    }

    .fn-nav-link:hover::after,
    .fn-nav-link.active::after {
        width: calc(100% - 14px);
    }

    /* -----------------------------------------------------
       HEADER ACTIONS
    ----------------------------------------------------- */

    .fn-header-actions {
        gap: 6px;
    }

    .fn-register-btn,
    .fn-analyze-btn {
        min-height: 44px;

        padding-left: 12px;
        padding-right: 12px;

        font-size: 12px;
    }

    .fn-register-btn i,
    .fn-analyze-btn i {
        font-size: 14px;
    }
}


/* =========================================================
   3. TABLET / MOBILE NAVIGATION
   950px AND BELOW
   ========================================================= */

@media (max-width: 950px) {

    :root {
        --fn-header-height: 80px;
    }

    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .fn-header-container {
        width: min(100% - 32px, 1440px);

        min-height: 80px;

        gap: 10px;
    }

    /* -----------------------------------------------------
       DESKTOP NAVIGATION
    ----------------------------------------------------- */

    .fn-nav {
        display: none;
    }

    /* -----------------------------------------------------
       DESKTOP ACTION BUTTONS
    ----------------------------------------------------- */

    .fn-header-actions {
        display: none;
    }

    /* -----------------------------------------------------
       HAMBURGER BUTTON

       IMPORTANT:
       This MUST remain visible.
    ----------------------------------------------------- */

    .fn-menu-toggle {
        display: inline-flex !important;

        align-items: center;
        justify-content: center;

        width: 44px;
        height: 44px;

        margin-left: auto;

        padding: 0;

        flex-shrink: 0;

        border: 1px solid var(--fn-border);
        border-radius: 12px;

        background: var(--fn-white);
        color: var(--fn-text);

        font-size: 21px;

        line-height: 1;

        transition:
            background 0.25s ease,
            color 0.25s ease,
            border-color 0.25s ease,
            transform 0.25s ease;
    }

    .fn-menu-toggle:hover {
        background: var(--fn-green-soft);

        border-color: var(--fn-border-green);

        color: var(--fn-green);

        transform: translateY(-1px);
    }

    /* -----------------------------------------------------
       MOBILE MENU — CLOSED

       VERY IMPORTANT:

       display:none means the menu takes ZERO space.

       This fixes the blank-space problem.
    ----------------------------------------------------- */

    .fn-mobile-menu {
        display: none;

        width: 100%;

        margin: 0;

        padding: 0;

        max-height: none;

        overflow: visible;

        opacity: 1;

        border: 0;

        background: var(--fn-white);

        box-shadow: none;
    }

    /* -----------------------------------------------------
       MOBILE MENU — OPEN

       JS adds .open
    ----------------------------------------------------- */

    .fn-mobile-menu.open {
        display: block;

        width: 100%;

        margin: 0;

        padding: 10px 20px 20px;

        border-top: 1px solid var(--fn-border);

        background: rgba(255, 255, 255, 0.98);

        box-shadow:
            0 18px 35px rgba(32, 32, 32, 0.08);

        animation:
            fnMobileMenuOpen 0.25s ease both;
    }

    /* -----------------------------------------------------
       MOBILE LINKS
    ----------------------------------------------------- */

    .fn-mobile-link {
        min-height: 52px;

        padding-left: 4px;
        padding-right: 4px;

        display: flex;

        align-items: center;
        justify-content: space-between;

        gap: 15px;

        border-bottom: 1px solid var(--fn-border);

        color: #4e554f;

        font-size: 14px;
        font-weight: 600;

        text-decoration: none;

        transition:
            color 0.25s ease,
            padding-left 0.25s ease,
            background 0.25s ease;
    }

    .fn-mobile-link span {
        display: inline-flex;

        align-items: center;

        gap: 10px;
    }

    .fn-mobile-link > i {
        flex-shrink: 0;

        font-size: 16px;
    }

    .fn-mobile-link:hover {
        color: var(--fn-green);

        padding-left: 8px;
    }

    .fn-mobile-link.active {
        color: var(--fn-green);

        font-weight: 700;
    }

    /* -----------------------------------------------------
       CREATE ACCOUNT MOBILE LINK
    ----------------------------------------------------- */

    .fn-mobile-register {
        margin-top: 8px;

        padding-top: 0;

        border-top: 1px solid var(--fn-border);

        border-bottom: 0;

        color: var(--fn-green);

        font-weight: 700;
    }

    .fn-mobile-register:hover {
        color: var(--fn-green-dark);
    }

    /* -----------------------------------------------------
       ANALYZE MY FARM MOBILE BUTTON
    ----------------------------------------------------- */

    .fn-mobile-analyze {
        width: 100%;

        min-height: 50px;

        margin-top: 14px;

        padding-left: 18px;
        padding-right: 18px;

        display: flex;

        align-items: center;
        justify-content: center;

        gap: 9px;

        border: 1px solid var(--fn-green);

        border-radius: var(--fn-radius-pill);

        background: var(--fn-green);

        color: var(--fn-white);

        font-size: 14px;
        font-weight: 700;

        text-decoration: none;

        transition:
            background 0.25s ease,
            border-color 0.25s ease,
            transform 0.25s ease,
            box-shadow 0.25s ease;
    }

    .fn-mobile-analyze:hover {
        background: var(--fn-green-dark);

        border-color: var(--fn-green-dark);

        color: var(--fn-white);

        transform: translateY(-2px);

        box-shadow:
            0 10px 24px rgba(47, 143, 53, 0.18);
    }
}


/* =========================================================
   4. MOBILE MENU ANIMATION
   ========================================================= */

@keyframes fnMobileMenuOpen {

    from {
        opacity: 0;

        transform: translateY(-6px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }
}


/* =========================================================
   5. LARGE MOBILE / TABLET
   768px AND BELOW
   ========================================================= */

@media (max-width: 768px) {

    html {
        scroll-padding-top: 85px;
    }

    body {
        font-size: 15px;
    }

    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .fn-header-container {
        width: calc(100% - 28px);

        min-height: 78px;

        gap: 10px;
    }

    /* -----------------------------------------------------
       BRAND
    ----------------------------------------------------- */

    .fn-brand {
        gap: 9px;

        min-width: 0;
    }

    .fn-brand-icon {
        width: 39px;
        height: 39px;

        flex-shrink: 0;

        border-radius: 11px;

        font-size: 18px;
    }

    .fn-brand-text {
        min-width: 0;
    }

    .fn-brand-name {
        font-size: 15px;
    }

    .fn-brand-tagline {
        font-size: 8px;

        letter-spacing: 0.65px;
    }

    /* -----------------------------------------------------
       HAMBURGER
    ----------------------------------------------------- */

    .fn-menu-toggle {
        display: inline-flex !important;

        width: 44px;
        height: 44px;

        flex-shrink: 0;
    }

    /* -----------------------------------------------------
       MOBILE MENU
    ----------------------------------------------------- */

    .fn-mobile-menu.open {
        padding-left: 16px;
        padding-right: 16px;
    }

    .fn-mobile-link {
        min-height: 50px;

        font-size: 14px;
    }

    .fn-mobile-analyze {
        min-height: 50px;
    }

    /* -----------------------------------------------------
       MAIN CONTENT
    ----------------------------------------------------- */

    #farmNovaApp {
        min-height: calc(100vh - 78px);
    }

    .fn-container {
        width: calc(100% - 32px);
    }
}


/* =========================================================
   6. MOBILE
   600px AND BELOW
   ========================================================= */

@media (max-width: 600px) {

    :root {
        --fn-header-height: 74px;
    }

    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .fn-header-container {
        width: calc(100% - 24px);

        min-height: 74px;
    }

    /* -----------------------------------------------------
       BRAND
    ----------------------------------------------------- */

    .fn-brand {
        gap: 8px;
    }

    .fn-brand-icon {
        width: 38px;
        height: 38px;

        border-radius: 10px;

        font-size: 17px;
    }

    .fn-brand-name {
        font-size: 14px;
    }

    /*
     * Hide tagline on smaller phones.
     */
    .fn-brand-tagline {
        display: none;
    }

    /* -----------------------------------------------------
       HAMBURGER
    ----------------------------------------------------- */

    .fn-menu-toggle {
        display: inline-flex !important;

        width: 42px;
        height: 42px;

        border-radius: 11px;

        font-size: 20px;
    }

    /* -----------------------------------------------------
       MOBILE MENU
    ----------------------------------------------------- */

    .fn-mobile-menu.open {
        padding-left: 12px;
        padding-right: 12px;

        padding-bottom: 18px;
    }

    .fn-mobile-link {
        min-height: 49px;

        font-size: 13px;
    }

    .fn-mobile-link span {
        gap: 9px;
    }

    .fn-mobile-link > i {
        font-size: 16px;
    }

    .fn-mobile-analyze {
        min-height: 48px;

        font-size: 13px;
    }

    /* -----------------------------------------------------
       MAIN CONTENT
    ----------------------------------------------------- */

    .fn-container {
        width: calc(100% - 24px);
    }

    #farmNovaApp {
        min-height: calc(100vh - 74px);
    }
}


/* =========================================================
   7. SMALL PHONES
   480px AND BELOW
   ========================================================= */

@media (max-width: 480px) {

    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .fn-header-container {
        width: calc(100% - 22px);

        min-height: 74px;
    }

    /* -----------------------------------------------------
       BRAND
    ----------------------------------------------------- */

    .fn-brand {
        gap: 7px;
    }

    .fn-brand-icon {
        width: 37px;
        height: 37px;

        border-radius: 10px;

        font-size: 17px;
    }

    .fn-brand-name {
        font-size: 14px;
    }

    /* -----------------------------------------------------
       HAMBURGER
    ----------------------------------------------------- */

    .fn-menu-toggle {
        display: inline-flex !important;

        width: 41px;
        height: 41px;

        flex-shrink: 0;
    }

    /* -----------------------------------------------------
       MOBILE MENU
    ----------------------------------------------------- */

    .fn-mobile-menu.open {
        padding-left: 10px;
        padding-right: 10px;
    }

    .fn-mobile-link {
        min-height: 48px;

        font-size: 13px;
    }

    .fn-mobile-analyze {
        min-height: 48px;

        padding-left: 16px;
        padding-right: 16px;

        font-size: 13px;
    }

    /* -----------------------------------------------------
       PAGE ERROR
    ----------------------------------------------------- */

    .fn-page-error {
        min-height: 60vh;

        padding-left: 18px;
        padding-right: 18px;
    }

    .fn-page-error h2 {
        font-size: 22px;
    }

    .fn-page-error p {
        font-size: 14px;
    }
}


/* =========================================================
   8. VERY SMALL PHONES
   380px AND BELOW
   ========================================================= */

@media (max-width: 380px) {

    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .fn-header-container {
        width: calc(100% - 18px);
    }

    /* -----------------------------------------------------
       BRAND
    ----------------------------------------------------- */

    .fn-brand {
        gap: 6px;
    }

    .fn-brand-icon {
        width: 35px;
        height: 35px;

        border-radius: 9px;

        font-size: 16px;
    }

    .fn-brand-name {
        font-size: 13px;
    }

    /* -----------------------------------------------------
       HAMBURGER
    ----------------------------------------------------- */

    .fn-menu-toggle {
        display: inline-flex !important;

        width: 40px;
        height: 40px;

        border-radius: 10px;

        font-size: 19px;
    }

    /* -----------------------------------------------------
       MOBILE MENU
    ----------------------------------------------------- */

    .fn-mobile-menu.open {
        padding-left: 8px;
        padding-right: 8px;
    }

    .fn-mobile-link {
        min-height: 47px;

        font-size: 12.5px;
    }

    .fn-mobile-analyze {
        min-height: 47px;

        font-size: 12.5px;
    }

    .fn-container {
        width: calc(100% - 20px);
    }
}


/* =========================================================
   9. VERY NARROW PHONES
   340px AND BELOW
   ========================================================= */

@media (max-width: 340px) {

    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .fn-header-container {
        width: calc(100% - 14px);
    }

    /* -----------------------------------------------------
       BRAND
    ----------------------------------------------------- */

    .fn-brand {
        gap: 5px;
    }

    .fn-brand-icon {
        width: 33px;
        height: 33px;

        font-size: 15px;
    }

    .fn-brand-name {
        font-size: 12px;
    }

    /* -----------------------------------------------------
       HAMBURGER
    ----------------------------------------------------- */

    .fn-menu-toggle {
        display: inline-flex !important;

        width: 38px;
        height: 38px;

        font-size: 18px;
    }

    /* -----------------------------------------------------
       MOBILE MENU
    ----------------------------------------------------- */

    .fn-mobile-link {
        min-height: 46px;

        font-size: 12px;
    }

    .fn-mobile-analyze {
        min-height: 46px;

        font-size: 12px;
    }
}


/* =========================================================
   10. TOUCH DEVICES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    /*
     * Remove hover movement on touch screens.
     */

    .fn-nav-link:hover,
    .fn-register-btn:hover,
    .fn-analyze-btn:hover,
    .fn-mobile-link:hover,
    .fn-mobile-analyze:hover,
    .fn-btn:hover {
        transform: none;
    }

    /*
     * Comfortable touch targets.
     */

    .fn-menu-toggle {
        min-width: 42px;
        min-height: 42px;
    }

    .fn-mobile-link {
        min-height: 52px;
    }

    .fn-mobile-analyze {
        min-height: 50px;
    }
}


/* =========================================================
   11. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;
    }
}
@media (max-width: 600px) {
    .fn-brand-logo {
        width: 125px;
    }
}

@media (max-width: 380px) {
    .fn-brand-logo {
        width: 110px;
    }
}