/*  phpBB3 Style Sheet
    --------------------------------------------------------------
	Style name:			prosilver (the default phpBB 3.3.x style)
	Based on style:
	Original author:	Tom Beddard ( http://www.subblue.com/ )
	Modified by:		phpBB Limited ( https://www.phpbb.com/ )
    --------------------------------------------------------------
*/

@import url("normalize.css?hash=48eb3f89");
@import url("base.css?hash=7c5543be");
@import url("utilities.css?hash=d8f72c42");
@import url("common.css?hash=843d5d5f");
@import url("links.css?hash=18286e16");
@import url("content.css?hash=d6d1338b");
@import url("buttons.css?hash=56f0d25f");
@import url("cp.css?hash=50d868ab");
@import url("forms.css?hash=9016b55c");
@import url("icons.css?hash=64da33ce");
@import url("colours.css?hash=fcb2f289");
@import url("responsive.css?hash=c9d32cba");

.footer-boxes {
    display: flex;
    gap: 12px;
    margin: 10px 0 0;
    padding: 0 5px;
    box-sizing: border-box;
}

/* Main 3 boxes */
.footer-box {
    flex: 1;
    height: 142px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    color: #fff;

    border-radius: 8px;

    transition: opacity 0.2s ease;
}

/* 4th split container */
.box4-split {
    flex: 1;
    height: 142px;

    display: flex;
    flex-direction: column;

    border-radius: 8px;
    overflow: hidden;
}

/* Split links */
.split-top,
.split-bottom {
    flex: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    text-decoration: none;
    font-weight: 600;
    color: #fff;

    min-height: 0;
}

/* Colours */
.box1 {
    background: #006699;
}

.box2 {
    background: #666666;
}

.box3 {
    background: #999999;
}

/* optional background fallback if image fails */
.split-top {
    background: #d3d3d3;
}

.split-bottom {
    background: #d3d3d3;
}

/* IMAGE HANDLING (desktop + mobile safe base) */
.split-top img,
.split-bottom img {
    max-width: 90%;
    max-height: 90%;

    width: auto;
    height: auto;

    object-fit: contain;

    display: block;
    margin: auto;
}

/* Hover */
.footer-box:hover,
.split-top:hover,
.split-bottom:hover {
    opacity: 0.9;
}

/* Link reset */
.footer-boxes a {
    color: #fff;
    text-decoration: none;
}

.footer-boxes a:hover {
    color: #fff !important;
    text-decoration: underline;
}

/* MOBILE */
@media (max-width: 768px) {

    .footer-boxes {
        flex-direction: column;
        gap: 12px;
    }

    .footer-box,
    .box4-split {
        width: 100%;
        height: 142px;
        flex: none;
    }

    .box4-split {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .split-top,
    .split-bottom {
        flex: 1;
        width: 100%;
        min-height: 0;
    }

    /* MOBILE IMAGE FIX (critical) */
    .split-top img,
    .split-bottom img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: auto;
    }
}
.box4-top,
.box4-bottom {
    flex: 1;
    height: 142px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;
    overflow: hidden;

    text-decoration: none;
}
.box4-top {
    margin-bottom: 10px;
}
.box4-top img,
.box4-bottom img {
    max-width: 80%;
    max-height: 80%;

    object-fit: contain;

    display: block;
    margin: auto;
}
.box4-top,
.box4-bottom {
    background: #d3d3d3; /* or whatever colours you want */
}