/* Make tables responsive on mobile */
table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}

/* Make table cells wrap instead of forcing width */
td, th {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
}

/* Make images inside tables responsive */
table img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
}
/* Make embedded videos responsive */
.responsive-video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.responsive-video iframe,
.responsive-video object,
.responsive-video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}
/* Make embedded videos responsive */
.responsive-video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.responsive-video iframe,
.responsive-video object,
.responsive-video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}
/* Make tables fully responsive */
table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
}

/* Allow table cells to shrink on mobile */
td {
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
}

/* Make embedded videos responsive inside tables */
td iframe,
td embed,
td object {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

.parent-container {
    display: grid;
    place-items: center;
    height: 100vh; /* Takes up the full screen height */
}

/* 1. The Main Container */
.center-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 50vh; /* Adjusts height to 50% of the screen */
    padding: 20px;
    margin: 0 auto;
    max-width: 1200px;
}

/* This targets the container and forces it to use the full width of the Joomla grid */
.center-container {
    grid-column: full-start / full-end; /* Spans from far left to far right */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 0;
}

/* Ensure the content inside doesn't get too wide on giant monitors */
.center-container > * {
    max-width: 800px; 
}

/* Center everything on desktop by disabling the sidebars grid */
.site-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Make the main content area take up the full middle space */
.main-content {
    width: 100% !important;
    max-width: 1100px !important; /* Prevents text from being too wide to read */
    margin: 0 auto !important;
    text-align: center;
}

/* Hide the empty sidebar columns that push content to the side */
.sidebar-left, .sidebar-right {
    display: none !important;
}

/* FORCE CENTERING ON DESKTOP */
body.site {
    display: block !important;
}

.site-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
}

.main-content {
    width: 100% !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* Hide the sidebars completely */
.sidebar-left, .sidebar-right {
    display: none !important;
    width: 0 !important;
}

/* 1. Force the grid to act as a single column on all screens */
body.site .site-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

/* 2. Force the main content container to be centered */
body.site .main-content {
    grid-column: 1 / -1 !important; /* Spans all potential hidden columns */
    width: 100% !important;
    max-width: 1100px !important;   /* Keeps it from getting too wide */
    margin: 0 auto !important;
    text-align: center !important;
}

/* 3. Aggressively hide any sidebar placeholders */
body.site .sidebar-left, 
body.site .sidebar-right {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
}

/* 1. Turn off the 'Grid' entirely */
div.site-grid {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 2. Force the main content area to the middle */
main.main-content {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 900px !important; /* This keeps it from stretching too wide */
    float: none !important;
}

/* 3. Center all text and images inside that area */
main.main-content img, 
main.main-content p, 
main.main-content h1, 
main.main-content h2 {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* This targets the container that 'Static' mode creates */
.container-component, 
.container-main, 
.grid-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

/* This centers the actual content inside that container */
#system-message-container, 
#content {
    width: 100% !important;
    text-align: center !important;
}

/* 1. Force the grid columns to disappear */
.site-grid {
    grid-template-columns: 1fr !important; /* Forces only 1 column */
    display: block !important;
}

/* 2. Remove the 'gutters' (the gaps between columns) */
.site-grid > * {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1000px !important; /* Keeps it centered on big screens */
}

/* 3. Tell the main content to ignore its 'grid area' name */
.main-content {
    grid-column: span 1 / -1 !important;
    width: 100% !important;
    text-align: center !important;
}

.main-content table, 
.main-content tr, 
.main-content td {
    display: table-cell !important; /* Forces the table cells back to side-by-side */
    vertical-align: middle !important;
    text-align: center !important;
    padding: 10px; /* Gives your icons some breathing room */
}

/* Ensure the table itself stays centered as a group */
.main-content table {
    display: table !important;
    margin: 0 auto !important;
    width: auto !important;
}

/* Prevent icons from stretching or stacking */
.main-content td img {
    display: inline-block !important;
    max-width: 40px; /* Adjust this size to fit your icons */
    height: auto;
}
/* The 'Modern' way to align icons without a table */
.social-icons {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 20px; /* Space between icons */
    margin-top: 20px;
}