/* =====================================================
   AGRIGLANCE MOBILE HOTFIX
   Fix iPhone layout and remove menu customization UI
   ===================================================== */

/* Prevent horizontal overflow */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Prevent mobile text zoom/layout breaking */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Images and embeds must stay inside screen */
img,
video,
iframe,
embed,
object,
svg {
    max-width: 100%;
    height: auto;
}

/* Normal links should not create desktop-style overflow */
a {
    overflow-wrap: anywhere;
}

/* -----------------------------------------------------
   COMPLETELY REMOVE MENU SETTINGS / CUSTOMIZATION UI
   ----------------------------------------------------- */

/* Hide common settings buttons */
.menu-settings,
.menu-setting,
.menu-customize,
.menu-customizer,
.menu-options,
.nav-settings,
.nav-customize,
.header-settings,
.mobile-settings,
#menuSettings,
#menu-settings,
#menuCustomize,
#menu-customize,
#navSettings,
#nav-settings,
#mobileSettings,
#mobile-settings,
[data-menu-settings],
[data-menu-customize],
[data-menu-customizer] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Hide customization modal/panel */
.menu-settings-panel,
.menu-customize-panel,
.menu-customizer-panel,
.menu-settings-modal,
.menu-customize-modal,
.menu-selection-modal,
.menu-items-modal,
.mobile-menu-settings,
.mobile-menu-customizer,
#menuSettingsPanel,
#menu-settings-panel,
#menuCustomizePanel,
#menu-customize-panel,
#menuSelectionModal,
#menu-selection-modal {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* -----------------------------------------------------
   IPHONE / SMALL SCREEN LAYOUT
   ----------------------------------------------------- */

@media (max-width: 768px) {

    html,
    body {
        min-width: 0 !important;
        width: 100% !important;
    }

    * {
        box-sizing: border-box;
    }

    /* Header must fit phone width */
    header,
    .header,
    .site-header,
    .topbar,
    .top-bar,
    .navbar,
    .nav-bar {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Main page */
    main,
    .main,
    .container,
    .content,
    .page-content,
    .home-content,
    .site-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Cards/content blocks */
    .card,
    .content-card,
    .post-card,
    .category-card,
    .home-card,
    article,
    section {
        max-width: 100%;
    }

    /* Navigation links must not appear as one broken row */
    nav,
    .nav,
    .navigation,
    .site-nav,
    .main-nav {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    nav a,
    .nav a,
    .navigation a,
    .site-nav a,
    .main-nav a {
        white-space: normal;
    }

    /* Hide desktop navigation on mobile when mobile menu exists */
    .desktop-nav,
    .desktop-menu {
        max-width: 100%;
    }

    /* Mobile menu button should remain visible */
    .menu-toggle,
    .mobile-menu-toggle,
    .hamburger,
    #menuToggle,
    #mobileMenuToggle {
        display: inline-flex !important;
        visibility: visible !important;
        align-items: center;
        justify-content: center;
    }

    /* Form controls */
    input,
    select,
    textarea,
    button {
        max-width: 100%;
    }
}

/* -----------------------------------------------------
   SAFARI IPHONE SPECIFIC
   ----------------------------------------------------- */

@supports (-webkit-touch-callout: none) {
    html,
    body {
        width: 100% !important;
        min-width: 0 !important;
    }
}


/* AGRIGLANCE_FINAL_MOBILE_LAYOUT_FIX_V2 */

html,
body{
    max-width:100%;
    overflow-x:hidden;
}

*{
    box-sizing:border-box;
}

img,
video,
iframe,
table{
    max-width:100%;
}

header{
    width:100%;
    max-width:100%;
}

.mobile-nav-tools{
    display:flex;
    align-items:center;
}

#siteMenuPrefs,
#siteNavPrefs{
    display:none !important;
}

@media(max-width:800px){

    header{
        width:100%;
        max-width:100%;
        min-height:100px;
        padding:16px 18px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        flex-wrap:wrap !important;
        gap:12px !important;
    }

    .brand{
        display:flex !important;
        align-items:center !important;
        min-width:0 !important;
        flex:1 1 auto !important;
    }

    .brand-logo{
        display:block !important;
        width:auto !important;
        height:auto !important;
        max-width:110px !important;
        max-height:72px !important;
        object-fit:contain !important;
    }

    .mobile-nav-tools{
        display:flex !important;
        align-items:center !important;
        justify-content:flex-end !important;
        flex:0 0 auto !important;
    }

    #siteMenuToggle{
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        min-height:54px !important;
        padding:12px 20px !important;
        white-space:nowrap !important;
        font-size:18px !important;
        border-radius:14px !important;
    }

    #siteNav{
        display:none !important;
        width:100% !important;
        flex-basis:100% !important;
        margin:0 !important;
        padding:12px !important;
        border-radius:16px !important;
    }

    #siteNav.is-open{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:4px !important;
    }

    #siteNav a{
        display:block !important;
        width:100% !important;
        padding:14px 16px !important;
        margin:0 !important;
        white-space:normal !important;
        text-align:left !important;
    }

    .container,
    main.container{
        width:100% !important;
        max-width:100% !important;
        margin:0 auto !important;
        padding:18px 14px !important;
    }

    .hero,
    .card,
    .grid,
    article.card{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
    }

    .hero,
    .card{
        overflow:hidden !important;
        overflow-wrap:anywhere !important;
    }

    .hero h1{
        font-size:clamp(30px,9vw,46px) !important;
        line-height:1.15 !important;
        overflow-wrap:anywhere !important;
    }

    .hero p{
        font-size:clamp(18px,5vw,24px) !important;
        line-height:1.45 !important;
    }

    .grid{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) !important;
        gap:16px !important;
    }

    .tag{
        display:inline-block !important;
        max-width:100% !important;
        white-space:normal !important;
        overflow-wrap:anywhere !important;
    }

    h1,h2,h3,p,a,small,span{
        overflow-wrap:anywhere;
        word-break:normal;
    }
}

@media(max-width:430px){

    header{
        padding:14px 14px !important;
    }

    .brand-logo{
        max-width:90px !important;
        max-height:62px !important;
    }

    #siteMenuToggle{
        min-height:50px !important;
        padding:10px 16px !important;
        font-size:16px !important;
    }

    .container,
    main.container{
        padding:14px 12px !important;
    }

    .hero,
    .card{
        padding:18px 14px !important;
    }
}


/* =====================================================
   AGRIGLANCE_MOBILE_FINAL_WIDTH_FIX_V3
   FINAL iPhone / mobile horizontal overflow protection
   ===================================================== */

@media screen and (max-width: 767px) {

    html {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    body {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    header,
    main,
    footer,
    .container,
    main.container,
    .content,
    .page-content,
    .hero,
    .card,
    .grid,
    article,
    article.card {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    main.container,
    .container {
        width: 100% !important;
    }

    .hero,
    .card,
    article.card {
        overflow: hidden !important;
    }

    .grid {
        display: grid !important;
        width: 100% !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .grid > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    h1,
    h2,
    h3,
    h4,
    p,
    a,
    span,
    small,
    strong {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    .hero h1 {
        font-size: clamp(28px, 8vw, 42px) !important;
        line-height: 1.15 !important;
    }

    .hero p {
        font-size: clamp(16px, 4.8vw, 22px) !important;
    }

    .tag,
    .button {
        max-width: 100% !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    img,
    svg,
    video,
    iframe,
    table,
    pre,
    code {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    pre,
    code {
        white-space: pre-wrap !important;
        overflow-wrap: anywhere !important;
    }
}

@media screen and (max-width: 430px) {

    main.container,
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .hero,
    .card {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .brand-logo {
        max-width: 90px !important;
        height: auto !important;
    }
}


/* =====================================================
   AGRIGLANCE_CLEAN_MOBILE_FINAL_V3
   Clean mobile layout protection
   ===================================================== */

@media screen and (max-width: 767px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    main.container,
    .container {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .hero,
    .card,
    article.card,
    .grid {
        min-width: 0;
        max-width: 100%;
    }

    .grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .hero h1,
    .hero h2,
    .hero h3,
    .card h1,
    .card h2,
    .card h3,
    .hero p,
    .card p {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    img,
    video,
    iframe,
    table {
        max-width: 100%;
        height: auto;
    }

    .tag,
    .button {
        max-width: 100%;
    }
}


/* =====================================================
   AGRIGLANCE_LOGO_MENU_ICON_FIX_V1
   Hide broken mobile logo and remove duplicate menu icon
   ===================================================== */

/* Remove any CSS-generated duplicate hamburger icon
   on ALL devices */
#siteMenuToggle::before,
#siteMenuToggle::after,
.site-menu-toggle::before,
.site-menu-toggle::after {
    content: none !important;
    display: none !important;
}

/* Mobile only: hide broken/missing logo image */
@media screen and (max-width: 767px) {

    header .brand-logo,
    header .brand img.brand-logo {
        display: none !important;
    }

    /* Prevent empty logo area from taking space */
    header .brand:has(.brand-logo) {
        min-width: 0 !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Keep only the actual menu icon/text */
    #siteMenuToggle {
        white-space: nowrap !important;
    }
}


/* =====================================================
   AGRIGLANCE_UNIVERSAL_RESPONSIVE_V1
   Universal responsive layout and table scrolling
   ===================================================== */

/* Safe box sizing for the complete website */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Prevent flex/grid children from forcing page overflow */
main,
section,
article,
aside,
div,
form,
fieldset,
.grid,
.card,
.container,
.content,
.page-content {
    min-width: 0;
}

/* Images and embedded content must never exceed screen */
img,
video,
iframe,
canvas,
svg {
    max-width: 100%;
}

/* =====================================================
   UNIVERSAL TABLE SCROLL SYSTEM
   Tables remain full-width and can be swiped horizontally
   instead of being cut off on small devices.
   ===================================================== */

.ag-table-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    padding-bottom: 4px;
}

/* Do not force large data tables to shrink/cut columns */
.ag-table-scroll > table {
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
}

/* Preserve readable table columns */
.ag-table-scroll th,
.ag-table-scroll td {
    white-space: normal;
    vertical-align: middle;
}

/* Tables with many columns can still be swiped */
@media screen and (max-width: 767px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
    }

    main,
    main.container,
    .container,
    .content,
    .page-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    /* Grid children must never overflow their columns */
    .grid,
    .grid > *,
    .card,
    article.card {
        min-width: 0;
        max-width: 100%;
    }

    /* Responsive text */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    small,
    span,
    label {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    /* Tables must never be clipped by mobile card rules */
    .card:has(.ag-table-scroll),
    article:has(.ag-table-scroll) {
        overflow: visible !important;
    }

    .ag-table-scroll {
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
        touch-action: pan-x pan-y;
    }

    .ag-table-scroll > table {
        width: max-content !important;
        min-width: 100% !important;
        max-width: none !important;
    }

    /* Keep important table data readable */
    .ag-table-scroll th,
    .ag-table-scroll td {
        min-width: 90px;
    }

    /* First number/serial columns can stay compact */
    .ag-table-scroll th:first-child,
    .ag-table-scroll td:first-child {
        min-width: 50px;
    }
}

/* =====================================================
   SMALL MOBILE DEVICES
   ===================================================== */

@media screen and (max-width: 480px) {

    .container,
    main.container {
        max-width: 100%;
    }

    .ag-table-scroll {
        width: 100%;
        max-width: 100%;
    }

    .ag-table-scroll th,
    .ag-table-scroll td {
        min-width: 100px;
    }

    .ag-table-scroll th:first-child,
    .ag-table-scroll td:first-child {
        min-width: 52px;
    }
}


/* AGRIGLANCE_MENU_VISIBILITY_FIX_START */

/* Desktop: mobile menu button must NEVER be visible */
@media (min-width: 801px) {
    #siteMenuToggle,
    .mobile-nav-tools {
        display: none !important;
        visibility: hidden !important;
    }

    #siteNav {
        display: flex !important;
        visibility: visible !important;
    }
}

/* Mobile only */
@media (max-width: 800px) {
    .mobile-nav-tools {
        display: flex !important;
        visibility: visible !important;
    }

    #siteMenuToggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        visibility: visible !important;
    }

    #siteNav {
        display: none !important;
    }

    #siteNav.is-open {
        display: grid !important;
    }
}

/* AGRIGLANCE_MENU_VISIBILITY_FIX_END */