/**
 * Global Reusable Menu Buttons
 * Target folder: custom_code_css/cross counties common.css
 * Project: cross countries native
 */

.menu-button {
    display: block; /* FIXED: Swapped inline-block to block so it fills the portal-dashboard columns perfectly on desktop */
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 15px; /* Restores exact legacy padding metric */
    
    /* Typography Parameters */
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 18px;
    line-height: 20px;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    color: #ffffff !important;
    
    /* Structural Framing Visual Details */
    border: 1px solid #eb8d00; /* Signature orange boundary highlight */
    border-radius: 6px;       /* Smooth rounded edge layout constraints */
    background-color: #182659; /* Core navy base paint */
    cursor: pointer;
    transition: all 0.2s ease-in-out; /* Smooth transition instead of builder lag */
}

/* Hover Interactivity Focus State Layouts */
.menu-button:hover {
    background-color: #ffffff !important;
    color: #eb8d00 !important; /* Swaps text to signature orange on mouse hover */
}

/* Active Click Down State Layout Parameters */
.menu-button:active {
    background-color: #e6e6e6 !important;
    color: #333333 !important; /* Dark charcoal text color on active mouse click down */
}

.menu-button.disabled-btn {
    background-color: #3b4875 !important; /* Muted, slightly grayed-out navy tone */
    color: #a4b0cb !important;            /* Dull slate gray text color instead of bright white */
    border-color: #555555 !important;      /* Drops the signature orange highlight for a dull border */
    cursor: not-allowed;                  /* Shows the circle-slash error icon when hovered */
    opacity: 0.65;                        /* Fades the button look to indicate a locked state */
    pointer-events: none;                 /* Completely blocks hover animations and click actions */
}

/* Fallback protection to ensure hover states never activate on locked elements */
.menu-button.disabled-btn:hover,
.menu-button.disabled-btn:active {
    background-color: #3b4875 !important;
    color: #a4b0cb !important;
    border-color: #555555 !important;
}

/* ==========================================================================
   Generic Layout Container for Standalone Content Pages
   ========================================================================== */

/* Forces a full-width vertical stack with zero gaps across all devices */
.layout-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Stretches buttons to full width and completely removes gaps */
.layout-container .menu-button {
    display: block;
    width: 100% !important;
    max-width: none !important; /* Unlocks any restricted widths from old code */
    margin: 0 !important;       /* Eliminates the gap between stacked buttons */
    box-sizing: border-box;
    text-align: center;
    border-radius: 0;           /* Gives flat edges so stacked items look seamless */
}

/* Structural cleanup for responsive viewports */
@@media (max-width: 767px) {
    /* Removes any structural page padding that creates margins/gaps on mobile */
    body, .layout-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Destroys any legacy mobile max-width limits on the buttons */
    .layout-container .menu-button {
        width: 100% !important;
        max-width: none !important; /* Overrides any old 320px constraints */
        margin: 0 !important;       /* Pinches any vertical or top spacing shut */
        display: block !important;
    }
}