/* ============================================================================ */
/* SECTION 2
/* ============================================================================ */

@media only screen and (max-width: 768px) {
    /* Base mobile styles */
    body {
        font-size: 14px;
        margin: 0;
        padding: 10px;
        width: 100%;
    }
    
    h1, h2, h3 {
        margin-top: 15px;
        margin-bottom: 10px;
        font-size: 1.2em;
    }
    
    /* Stack navigation tables vertically */
    table.nav-table td,
    table.policy-nav td {
        display: block;
        width: 100% !important;
        margin: 0;
        padding: 8px 0;
        /* border-bottom: 1px solid #ddd; */
		/* Commenting out above will remove the horizontal rules between the links while keeping them stacked vertically */
    }
    
    table.nav-table td:last-child,
    table.policy-nav td:last-child {
        /* border-bottom: none; */
		/* Commenting out above will remove the horizontal rules between the links while keeping them stacked vertically */
    }
    
    /* Links in navigation become full-width blocks */
    table.nav-table a,
    table.policy-nav a {
        display: block;
        padding: 12px;
        text-align: center;
        text-decoration: none;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* All tables adjust for mobile */
    table {
        width: 100% !important;
        margin: 10px 0;
    }
    
    td {
        padding: 8px;
        font-size: 12px;
        box-sizing: border-box;
    }
    
    /* Constrain images */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Main page outline border - reduce width */
    table[width="95%"],
    table[width="85%"] {
        width: 100% !important;
        margin-left: 0;
        margin-right: 0;
    }
    
    /* Footer table - make flexible */
    table.footer-table {
        width: 100% !important;
    }
    
    table.footer-table td {
        display: block;
        width: 100% !important;
        text-align: center;
        padding: 10px 0;
    }
    
    /* Buttons and links in content */
    a[href*="contact"] {
        display: block;
        padding: 12px;
        margin: 15px auto;
        text-align: center;
        max-width: 100%;
    }

/* ============================================================================ */
/* SECTION 2
/* ============================================================================ */

	/* Stack the main content table columns on mobile */
	table[width="95%"] {
		width: 100% !important;
	}

	table[width="95%"] col {
		width: 100% !important;
	}

	table[width="95%"] td {
		display: block;
		width: 100% !important;
		margin-bottom: 20px;
	}

	/* Make form inputs and textareas full-width on mobile */
	/* .form-input, */
	/* .form-textarea { */
		/* width: 100% !important; */
		/* box-sizing: border-box; */
	/* } */

	/* Stack form groups vertically */
	.form-group-container {
		display: flex;
		flex-direction: column;
	}

	.form-group {
		width: 100% !important;
		margin-bottom: 15px;
	}

	/* Adjust button on mobile */
	/* .form-submit { */
		/* width: 100% !important; */
	/* } */

	/* Reduce heading sizes on mobile */
	h2 {
		font-size: 1.2em;
	}

/* ============================================================================ */
/* SECTION 3
/* ============================================================================ */
 	
	/* Ensure form and all its containers are truly full-width */
	.contact-form {
		width: 100% !important;
		box-sizing: border-box;
	}

	.form-group-container,
	.form-group {
		width: 100% !important;
		box-sizing: border-box;
	}

	.form-input,
	.form-textarea {
		width: 100% !important;
		box-sizing: border-box;
		padding: 8px !important;
	}

	.form-submit {
		width: 100% !important;
		box-sizing: border-box;
	}

	/* Handle hCaptcha responsively */
	/* .h-captcha { */
		/* width: 100% !important; */
		/* max-width: 100% !important; */
		/* transform: scale(0.9); */
		/* transform: scale(0.75); */
		/* transform-origin: 0 0; */
		/* overflow: hidden; */
	/* } */

	.h-captcha {
		width: 100% !important;
		height: auto !important;
		max-width: 100% !important;
		transform: none !important;
		/* transform: scale(0.50); */
		overflow: hidden;
	}

	.h-captcha iframe {
		width: 100% !important;
		height: auto !important;
		max-width: 100% !important;
		margin: 0 !important;
	}

	/* Remove extra padding from table cells on mobile */
	table[width="95%"] td {
		padding: 10px !important;
	}

	/* Prevent horizontal overflow */
	body, html {
		overflow-x: hidden;
	}

	div.b {
		overflow-x: hidden;
	}

/* ============================================================================ */
/* SECTION 4
/* ============================================================================ */

	table.list {
		display: block !important;
		width: 100% !important;
		border-collapse: collapse;
	}

	table.list thead {
		display: none; /* Hide the header row on mobile */
	}

	table.list tbody {
		display: block;
	}

	table.list tr {
		display: block;
		margin-bottom: 1.5rem;
		border: 1px solid #999;
		padding: 0.75rem;
		border-radius: 4px;
	}

	table.list td {
		display: block !important;
		width: 100% !important;
		text-align: left !important;
		vertical-align: top !important;
		padding: 0.5rem 0 !important;
		margin-bottom: 0.5rem;
		border-bottom: 1px solid #ddd;
		font-size: inherit;
	}

	table.list td:last-child {
		border-bottom: none;
		margin-bottom: 0;
	}

	table.list td::before {
		font-weight: bold;
		display: block;
		margin-bottom: 0.25rem;
		/* color: #333; */
		color: #c4c4c4;
		text-decoration: none;
		font-size: inherit;
	}

	/* Label each column */
	/* table.list tr td:nth-child(1)::before { content: "Decision Tier:"; } */
	/* table.list tr td:nth-child(2)::before { content: "Financial Threshold:"; } */
	/* table.list tr td:nth-child(3)::before { content: "Authority:"; } */
	/* table.list tr td:nth-child(4)::before { content: "Documentation:"; } */
	

/* ============================================================================ */
/* SECTION 5
/* ============================================================================ */
	
	/* Add smooth scrolling */
	html {
		scroll-behavior: smooth;
	}

/* ============================================================================ */
/* SLIDESHOW A - CAROUSEL RESPONSIVE STYLING */
/* ============================================================================ */

.carousel-wrapper {
    height: auto !important;
    aspect-ratio: 1.53; /* 480/313 ratio, or adjust as needed */
    width: 100% !important;
}

.carousel-item {
    padding: 15px 40px !important;
}

.carousel-item .arrow {
    width: 40px !important;
    background-size: 16px !important;
}

.carousel-item .arrow-prev {
    left: 0;
}

.carousel-item .arrow-next {
    right: 0;
}

.carousel-item img {
    max-width: 100%;
    height: auto;
}

.bottom-centered,
.bottom-centered_nowrap {
    font-size: 10px !important;
    padding: 4px 6px !important;
    top: 85% !important;
}

.bottom-centered_nowrap {
    white-space: normal;
}

/* ============================================================================ */
/* SLIDESHOW B - MINISLIDE RESPONSIVE ANIMATIONS */
/* ============================================================================ */

/* Make minislides responsive instead of fixed width */
.minislide1, .minislide2, .minislide3, .minislide4 {
    width: 100% !important;
    max-width: 360px !important; /* Constrain to mobile width */
    height: auto !important;
    aspect-ratio: 1.53; /* Maintains 981:640 ratio (or adjust as needed) */
    overflow: hidden;
    position: relative;
    margin: 0 auto; /* Center on screen */
}

/* Ensure images in minislides scale properly */
.minislide1 img, .minislide2 img, .minislide3 img, .minislide4 img {
    width: 100% !important;
    height: auto !important;
    position: absolute;
    top: 0;
    left: 0;
}

/* ============================================================================ */
/* SLIDESHOW B - POPOVER RESPONSIVE STYLING */
/* ============================================================================ */

[popover] {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 95vw !important;
    max-width: 360px !important;
    height: auto !important;
    max-height: 85vh !important;
    padding: 10px !important;
    margin: 0 !important;
    border: 1px solid #3B3B3B !important;
    background-color: #4f4f4f !important;
    overflow: auto;
    z-index: 1000;
}

//* ============================================================================ */
/* SLIDESHOW B - BUTTON GRID (2 COLUMNS ON MOBILE/TABLET) */
/* ============================================================================ */

.button-grid {
    width: 100% !important;
}

.button-grid tr {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100% !important;
}

.button-grid td {
    flex: 0 1 calc(50% - 5px);
    display: block;
    width: auto !important;
    padding: 5px !important;
    text-align: center;
    box-sizing: border-box;
}

.button-grid button {
    display: block;
    width: 100%;
    padding: 8px !important;
    min-height: 44px;
    background-color: #4F4F4F !important;
    border: none !important;
    cursor: pointer;
    transition: opacity 0.2s;
}

.button-grid button:active {
    opacity: 0.8;
}

.button-grid button img {
    width: 100%;
    height: auto;
    display: block;
}


/* ============================================================================ */
/* SMALLEST SCREENS (<380px) - OVERRIDE TO 1 COLUMN */
/* ============================================================================ */

@media only screen and (max-width: 379px) {
    .carousel-wrapper {
        aspect-ratio: 1.53;
    }

    .carousel-item {
        padding: 12px 35px !important;
    }

    .carousel-item .arrow {
        width: 35px !important;
        background-size: 12px !important;
    }

    .minislide1, .minislide2, .minislide3, .minislide4 {
        max-width: 320px !important;
    }

    [popover] {
        max-width: 90vw !important;
        max-height: 80vh !important;
    }

    /* 1 COLUMN BUTTON LAYOUT */
    .button-grid td {
        flex: 0 1 100%;
    }

    .bottom-centered,
    .bottom-centered_nowrap {
        font-size: 9px !important;
        padding: 3px 5px !important;
    }
}

/* ============================================================================ */
/* LANDSCAPE ORIENTATION ADJUSTMENTS */
/* ============================================================================ */

@media only screen and (max-height: 500px) and (orientation: landscape) {
    .carousel-wrapper {
        height: 200px !important;
    }

    .minislide1, .minislide2, .minislide3, .minislide4 {
        max-height: 300px !important;
    }

    [popover] {
        max-height: 80vh !important;
    }
}

/* ============================================================================ */
/* END media only screen and (max-width: 768px) */
/* ============================================================================ */

}