/* ── Mobile Footer Nav ─────────────────────────────────────────────────────── */
:root {
    --mfn-bg:     #5a8f1e;
    --mfn-fg:     #ffffff;
    --mfn-active: #c8f55a;
    --mfn-height: 80px;
    --mfn-shadow: 0 -2px 16px rgba(0,0,0,0.18);
    --mfn-transition: 0.18s ease;
}

/* The bar itself */
.mfn-bar {
    display:         none; /* hidden on desktop by default */
    position:        fixed;
    bottom:          0;
    left:            0;
    right:           0;
    z-index:         99999;
    height:          var(--mfn-height);
    background:      var(--mfn-bg);
    box-shadow:      var(--mfn-shadow);
    flex-direction:  row;
    align-items:     stretch;
    justify-content: space-around;
    /* safe-area padding for iPhone home bar */
    padding-bottom:  env(safe-area-inset-bottom, 0px);
}


/* Add this to prevent FOUT (flash of unstyled content) */
.mfn-bar { display: none; } /* Hidden until CSS loads */

/* Show only on mobile */
@media (max-width: 768px) {
    .mfn-bar {
        display: flex;
    }

    /* Push page content up so it's not hidden behind the bar */
    body {
        padding-bottom: calc(var(--mfn-height) + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Each nav item */
.mfn-item {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    flex:            1 1 0;
    gap:             3px;
    color:           var(--mfn-fg);
    text-decoration: none;
    padding:         20px 2px 20px;
    transition:      color var(--mfn-transition), transform var(--mfn-transition);
    -webkit-tap-highlight-color: transparent;
    outline:         none;
    position:        relative;
}

/* Tap / active feedback */
.mfn-item:active,
.mfn-item.mfn-active {
    color: var(--mfn-active);
}

.mfn-item:active .mfn-icon svg,
.mfn-item.mfn-active .mfn-icon svg {
    stroke: var(--mfn-active);
}

/* Active label color */
.mfn-item.mfn-active .mfn-label {
    color: var(--mfn-active);
}

/* Icon wrapper */
.mfn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width:  26px;
    height: 26px;
}

.mfn-icon svg {
    width:  100%;
    height: 100%;
    stroke: var(--mfn-fg);
    transition: stroke var(--mfn-transition);
}

/* Label */
.mfn-label {
    font-family:    -apple-system, 'Helvetica Neue', Arial, sans-serif;
    font-size:      10px;
    font-weight:    600;
    letter-spacing: 0.3px;
    line-height:    1;
    white-space:    nowrap;
    color:          var(--mfn-fg);
    transition:     color var(--mfn-transition);
}

/* Hover state (for tablets with pointer) */
@media (hover: hover) {
    .mfn-item:hover {
        color: var(--mfn-active);
    }
    .mfn-item:hover .mfn-icon svg {
        stroke: var(--mfn-active);
    }
    .mfn-item:hover .mfn-label {
        color: var(--mfn-active);
    }
}


/* ── Mobile Header ───────────────────────────────────────────────────────────── */
:root {
    --mfn-header-height: 56px;
    --mfn-header-bg:     #f9f9f9;
    --mfn-header-fg:     #1a1a1a;
    --mfn-header-cta:    #6d6d6d;
    --mfn-header-border: rgba(0,0,0,0.08);
}

.mfn-header {
    display:         none; /* desktop: hidden */
    position:        fixed;
    top:             0;
    left:            0;
    right:           0;
    z-index:         99998; /* just below footer bar */
    height:          var(--mfn-header-height);
    background:      var(--mfn-header-bg);
    
    align-items:     center;
    padding:         0 15px 0 15px;
    gap:             0;
}

@media (max-width: 768px) {
    .mfn-header {
        display: flex;
        height: 70px;
        justify-content: space-between;
    }

    /* Push page content down so it's not hidden under the header */
    body {
        padding-top: var(--mfn-header-height) !important;
    }
}

/* Brand: leaf + site name */
.mfn-header-brand {
    display:         flex;
    align-items:     center;
    gap:             6px;
    text-decoration: none;
    color:           var(--mfn-header-fg);
    flex-shrink:     0;
    /* Removed margin-right: auto to allow CTA to center */
}

.mfn-header-leaf {
    width:  64px;
    height: 64px;
    flex-shrink: 0;
    object-fit: contain;
}

.mfn-header-site-name {
    font-family:  'Lato', -apple-system, 'Helvetica Neue', Arial, sans-serif !important;
    font-size:    23px;
    font-weight:  600;
    letter-spacing: -0.3px;
    color:        #2C2D2F;
    line-height:  1;
}

/* CTA button - centered using flex-grow */
.mfn-header-cta {
    flex-shrink:     0;
    flex-grow:       1; /* Allows it to take available space */
    text-align:      center; /* Centers the text within its space */
    font-size:       15px;
    font-weight:     500;
    color:           #6d6d6d !important;
    text-decoration: none;
    margin:          0 8px; /* Balanced margins on both sides */
    -webkit-tap-highlight-color: transparent;
    transition:      opacity 0.15s ease;
}

.mfn-header-cta:hover,
.mfn-header-cta:active {
    opacity: 0.65;
}

/* 3-dots menu button - stays on far right */
.mfn-menu-btn {
    background: none !important;
    border: none;
    padding: 0px !important;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevents shrinking */
    -webkit-tap-highlight-color: transparent;
}

.mfn-menu-btn svg {
    width: 26px;
    height: 26px;
    stroke: var(--mfn-header-fg);
    stroke-width: 3.2;
    fill: none;
}

.mfn-desktop-footer {
    display: block;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #f9f9f9;
    text-align: center;
    padding: 8px 16px 3px;
    font-family: inherit;
    font-size: 11px;
    color: #666;
    margin-top: auto;
}

/* Ensure body and main content area can push footer to bottom when content is short */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* The main content wrapper (adjust selector if your theme uses a different container) */
#page, .site, .site-content, main, [role="main"] {
    flex: 1 0 auto;
}

.mfn-desktop-footer a {
    color: var(--mfn-bg, #666);
    text-decoration: none;
    transition: opacity 0.18s ease;
}

.mfn-desktop-footer a:hover {
    text-decoration: none;
    opacity: 0.8;
}

.mfn-copyright {
    margin: 0 !important;
    line-height: 1.5;
}

/* Hide desktop footer on mobile (only show mobile bar) */
@media (max-width: 768px) {
    .mfn-desktop-footer {
        display: none;
    }

    /* Remove flex layout on mobile to avoid conflicts */
    body {
        display: block;
        min-height: auto;
    }
}

/* Optional: Add some spacing on desktop when mobile bar is hidden */
@media (min-width: 769px) {
    body {
        padding-bottom: 0 !important;
    }
}

/* ── Desktop Header ──────────────────────────────────────────────────────────── */
:root {
    --mfn-dh-height:      64px;
    --mfn-dh-bg:          #f9f9f9;
    --mfn-dh-fg:          #1a1a1a;
    --mfn-dh-nav-fg:      #474747;
    --mfn-dh-nav-active:  #000000;
    --mfn-dh-btn-bg:      #c8f55a;
    --mfn-dh-btn-fg:      #1a1a1a;
    --mfn-dh-btn-radius:  999px;
    --mfn-dh-border:      rgba(0,0,0,0.07);
    --mfn-dh-shadow:      0 1px 0 var(--mfn-dh-border);
}

/* Hidden on mobile — only show on desktop */
.mfn-desktop-header {
    display: none;
}

@media (min-width: 769px) {
    .mfn-desktop-header {
        display:    block;
        position:   fixed;
        top:        0;
        left:       0;
        right:      0;
        z-index:    99998;
        height:     var(--mfn-dh-height);
        background: var(--mfn-dh-bg);
    }

    /* Compensate body for the fixed header */
    body {
        padding-top: var(--mfn-dh-height) !important;
    }
}

.mfn-dh-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between; /* Changed from default flex behavior */
    height:          100%;
    max-width:       1140px;
    margin:          0 auto;
    padding:         0 24px;
    gap:             32px;
}

/* Brand */
.mfn-dh-brand {
    display:         flex;
    align-items:     center;
    gap:             8px;
    text-decoration: none;
    flex-shrink:     0;
}

.mfn-dh-logo {
    width:       36px;
    height:      36px;
    object-fit:  contain;
    flex-shrink: 0;
}

.mfn-dh-site-name {
    font-family:    'Lato', -apple-system, 'Helvetica Neue', Arial, sans-serif;
    font-size:      22px;
    font-weight:    700;
    letter-spacing: -0.3px;
    color:          #2C2D2F;
    line-height:    1;
    white-space:    nowrap;
}

/* Nav links */
.mfn-dh-nav {
    display:     flex;
    align-items: center;
    gap:         4px;
    margin:      0 auto; /* This centers the nav links */
    flex:        0 1 auto; /* Don't grow, allow shrinking */
}

.mfn-dh-nav-link {
    display:         inline-block;
    padding:         6px 14px;
    font-family:     inherit;
    font-size:       15px;
    font-weight:     500;
    color:           var(--mfn-dh-nav-fg) !important;
    text-decoration: none;
    border-radius:   6px;
    transition:      color 0.15s ease, background-color 0.15s ease;
    white-space:     nowrap;
}

.mfn-dh-nav-link:hover {
    color:            var(--mfn-dh-nav-active) !important;
    background-color: rgba(74, 140, 28, 0.07);
}

.mfn-dh-nav-link.mfn-dh-active {
    color:       var(--mfn-dh-nav-active) !important;
    font-weight: 500;
}

/* Support CTA button */
.mfn-dh-support-btn {
    flex-shrink:      0;
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    height:           38px;
    padding:          13px 24px !important;
    background:       var(--mfn-dh-btn-bg);
    color:            var(--mfn-dh-btn-fg);
    border:           none;
    border-radius:    var(--mfn-dh-btn-radius);
    font-family:      -apple-system, 'Helvetica Neue', Arial, sans-serif;
    font-size:        14px !important;
    font-weight:      500 !important;
    cursor:           pointer;
    transition:       opacity 0.15s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
    outline:          none;
}

.mfn-dh-support-btn:hover {
    opacity: 0.88;
}

.mfn-dh-support-btn:active,
.mfn-dh-support-btn[aria-expanded="true"] {
    opacity:   0.75;
    transform: scale(0.97);
}

/* ── Desktop Header Flyout ───────────────────────────────────────────────────── */
:root {
    --mfn-dh-flyout-width:  220px;
    --mfn-dh-flyout-bg:     #f9f9f9;
    --mfn-dh-flyout-shadow: 0 8px 28px rgba(0,0,0,0.13);
    --mfn-dh-flyout-radius: 10px;
}

.mfn-dh-flyout-overlay {
    display:  none;
    position: fixed;
    inset:    0;
    z-index:  99996;
}

.mfn-dh-flyout-overlay.mfn-dh-open {
    display: block;
}

.mfn-dh-flyout {
    position:      fixed;
    top:           calc(var(--mfn-dh-height) + 6px);
    right:         24px;
    width:         var(--mfn-dh-flyout-width);
    background:    var(--mfn-dh-flyout-bg);
    border-radius: var(--mfn-dh-flyout-radius);
    box-shadow:    var(--mfn-dh-flyout-shadow);
    z-index:       99997;
    overflow:      hidden;
    opacity:       0;
    visibility:    hidden;
    transform:     translateY(-8px);
    transition:    opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.mfn-dh-flyout.mfn-dh-open {
    opacity:    1;
    visibility: visible;
    transform:  translateY(0);
}

.mfn-dh-flyout-nav {
    padding: 6px 0;
}

.mfn-dh-flyout-link {
    display:          block;
    padding:          10px 18px;
    font-family:      inherit;
    font-size:        14px;
    font-weight:      400;
    color:            #232323 !important;
    text-decoration:  none;
    transition:       background-color 0.15s ease;
    white-space:      nowrap;
}

.mfn-dh-flyout-link:hover {
    background-color: rgba(0,0,0,0.04);
}

.mfn-dh-flyout-link:active {
    background-color: rgba(0,0,0,0.08);
}

/* Ensure desktop-only elements are hidden on mobile */
@media (max-width: 768px) {
    .mfn-desktop-header,
    .mfn-dh-flyout,
    .mfn-dh-flyout-overlay {
        display: none !important;
    }
}

/* ── Mobile Flyout Menu (3-dots) ────────────────────────────────────────────── */
:root {
    --mfn-flyout-bg:        #f9f9f9;
    --mfn-flyout-fg:        #1a1a1a;
    --mfn-flyoverlay-bg:    rgba(0,0,0,0.5);
    --mfn-flyout-width:     50vw;
    --mfn-flyout-transition: 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

/* Overlay – transparent tap-catcher for click-outside dismissal */
.mfn-flyout-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--mfn-flyout-transition), visibility var(--mfn-flyout-transition);
}

.mfn-flyout-overlay.mfn-open {
    opacity: 1;
    visibility: visible;
}

/* Flyout menu panel – dropdown anchored below the 3-dots button */
.mfn-flyout-menu {
    position: fixed;
    /* top / right are set dynamically by JS; these are fallback defaults */
    top: 70px;
    right: 12px;
    width: var(--mfn-flyout-width);
    max-width: calc(100vw - 24px);
    height: auto;
    max-height: 60vh;
    background: var(--mfn-flyout-bg);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.15);
    z-index: 100000;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.97);
    transform-origin: top right;
    transition:
        opacity var(--mfn-flyout-transition),
        transform var(--mfn-flyout-transition),
        visibility var(--mfn-flyout-transition);
}

.mfn-flyout-menu.mfn-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Flyout navigation links - clean text-only version */
.mfn-flyout-nav {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    margin-top: 20px;
}

.mfn-flyout-link {
    display: block;
    padding: 8px 20px;
    text-decoration: none;
    color: #232323 !important;
    font-size: 16px;
    font-weight: 400;
    transition: background-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.mfn-flyout-link:active,
.mfn-flyout-link:hover {
    background-color: rgba(0,0,0,0.04);
}

/* Divider in flyout */
.mfn-flyout-divider {
    height: 1px;
    background: rgba(0,0,0,0.08);
    margin: 8px 0;
}

/* Update header layout to accommodate menu button */
@media (max-width: 768px) {
    .mfn-header {
        justify-content: space-between;
    }
    
    .mfn-header-brand {
        flex: 0 0 auto;
        /* Removed margin-right: auto */
    }
    
    .mfn-header-cta {
        flex: 1 1 auto; /* Takes available space, can grow/shrink */
        text-align: center;
        margin: 0 8px;
    }
    
    .mfn-menu-btn {
        flex: 0 0 auto;
    }
}