body{
    margin:0;
    background:#f7eadf;
    color:#222;
    font-family:'Baloo 2', cursive;
    animation:fadeIn 0.5s ease;
}

/* TOP BUTTONS */

.top-buttons{
    background:#1d3f72;
    padding:18px;
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.top-button{
    color:white;
    text-decoration:none;
    padding:16px 28px;
    border-radius:18px;
    font-size:1.2rem;
    font-weight:700;
    transition:all 0.25s ease;
    box-shadow:0 4px 10px rgba(0,0,0,0.2);
    min-width:280px;
    text-align:center;
}

.top-button:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 18px rgba(0,0,0,0.28);
}

.football-button{
    background:#00b050;
}

.week-button{
    background:#ff7f50;
}

/* HEADER */

/* HEADER */

header{
    position: relative;
    height: 420px;
    overflow: hidden;
    border-bottom: 8px solid #ffcc00;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom:25px;
}

/* PAGE HEADER IMAGES */

.focus-header{
    background-image: url('images/focus_header_3.jpg');
}

.index-header{
    background-image: url('images/tinneys_header.jpg');
}

/* MAIN CONTAINER */

.container{
    max-width:1000px;
    margin:auto;
    padding:16px;
}

/* DAY CARDS */

.day{
    background:white;
    margin-bottom:16px;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 5px 15px rgba(0,0,0,0.15);
    transition:transform 0.2s ease;
}

.day:hover{
    transform:translateY(-2px);
}

/* DAY HEADER */

.day-header{
    background:#4a86e8;
    color:white;
    padding:2px;
    font-size:2rem;
    text-align:center;
    font-weight:700;
}

/* SECTION */

.section{
    padding:14px;
    text-align:center;
}

/* SESSION TAGS */

.session-tag{
    color:white;
    padding:14px 18px;
    border-radius:18px;
    display:table;
    margin:0 auto 12px auto;
    font-size:1.6rem;
    box-shadow:0 3px 6px rgba(0,0,0,0.15);
    text-align:center;
    max-width:620px;
    line-height:1.25;
}

.session-tag p{
    margin:1px 0 0 0;
    font-weight:400;
    font-size:1.15rem;
}

.session-tag.morning{
    background:#ff7f50;
}

.session-tag.afternoon{
    background:#9c6ade;
}

/* FOOTBALL BOX */

.football{
    background:#00b050;
    color:white;
    padding:10px 18px;
    border-radius:14px;
    display:table;
    margin:0 auto 1px auto;
    font-weight:bold;
    font-size:1.2rem;
    box-shadow:0 3px 6px rgba(0,0,0,0.15);
    text-align:center;
    line-height:1.4;
}

/* LUNCH BAR */

.highlight{
    background:#fff200;
    padding:1px;
    text-align:center;
    font-weight:800;
    font-size:1.2rem;
    color:#333;
}

/* SPECIAL BOXES */

.special{
    background:#cfefff;
    padding:14px;
    border-radius:18px;
    margin-top:10px;
    font-size:1.2rem;
    line-height:1.4;
    max-width:500px;
    margin-left:auto;
    margin-right:auto;
}

/* SIDE BY SIDE ACTIVITIES */

.activity-row{
    display:flex;
    justify-content:center;
    gap:2px;
    flex-wrap:wrap;
    margin-top:6px;
}

.side-by-side{
    width:220px;
    min-height:120px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.special-title{
    font-weight:bold;
    margin-bottom:4px;
    line-height:1.1;
}

/* CLICKABLE BOXES */

.clickable-box{
    text-decoration:none;
    display:block;
    width:fit-content;
    margin:auto;
    color:inherit;
    transition:transform 0.2s ease,
               box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.clickable-box:hover{
    transform:translateY(-4px) scale(1.02);
}

.clickable-box .session-tag,
.clickable-box .football,
.clickable-box .special{
    cursor:pointer;
}

.clickable-box:hover .session-tag,
.clickable-box:hover .football,
.clickable-box:hover .special{
    box-shadow:0 8px 18px rgba(0,0,0,0.22);
}

/* INFO SECTION */

.info-section{
    background:white;
    padding:22px;
    border-radius:24px;
    margin-top:20px;
    box-shadow:0 5px 15px rgba(0,0,0,0.15);
    text-align:center;
}

.info-section h2{
    color:#ff6600;
    font-size:2rem;
    margin-top:0;
}

.info-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
    gap:15px;
    margin:18px 0;
}

.info-item{
    background:#ffe0ec;
    padding:15px;
    border-radius:16px;
    font-size:1.1rem;
    font-weight:bold;
}

.price-box{
    background:#fff7c7;
    padding:18px;
    border-radius:18px;
    margin-top:18px;
    font-size:1.1rem;
    line-height:1.6;
}

.booking-box{
    background:#d9ead3;
    padding:18px;
    border-radius:18px;
    margin-top:18px;
    font-size:1.1rem;
    font-weight:bold;
}

.booking-box a{
    color:#008000;
    text-decoration:none;
}

/* FOOTER */

.footer{
    background:#1d3f72;
    color:white;
    padding:16px;
    text-align:center;
    font-weight:bold;
    border-top:5px solid #6d9eeb;
    font-size:1.2rem;
    margin-top:20px;
}

/* HOME PAGE BUTTONS */

.home-buttons{
    display:flex;
    justify-content:center;
    padding:40px 20px;
}

.home-button{
    background:#ff7f50;
    color:white;
    text-decoration:none;
    padding:22px 40px;
    border-radius:22px;
    font-size:2rem;
    font-weight:700;
    box-shadow:0 6px 16px rgba(0,0,0,0.2);
    transition:all 0.25s ease;
    text-align:center;
}

.home-button:hover{
    transform:translateY(-4px) scale(1.03);
    box-shadow:0 10px 22px rgba(0,0,0,0.28);
}

/* MOBILE */

@media (max-width:700px){

    header{
        height:220px;
        background-size:cover;
        background-position:center;
    }

    .container{
        padding:8px;
    }

    .day{
        margin-bottom:12px;
    }

    .day-header{
        font-size:1.3rem;
        padding:12px;
    }

    .section{
        padding:10px;
    }

    .session-tag{
        font-size:1rem;
        width:auto;
        max-width:100%;
        padding:12px 14px;
        margin-bottom:10px;
    }

    .session-tag p{
        font-size:0.9rem;
    }

    .football{
        font-size:0.95rem;
        padding:10px 14px;
        margin-bottom:10px;
    }

    .special{
        font-size:0.95rem;
        padding:12px;
    }

    .highlight{
        font-size:0.95rem;
        padding:8px;
    }

    .info-item{
        font-size:0.95rem;
    }

    .price-box,
    .booking-box{
        font-size:0.95rem;
        padding:14px;
    }

    .info-grid{
        grid-template-columns:1fr;
        gap:10px;
    }

    .top-buttons{
        padding:10px;
        gap:10px;
        position:sticky;
        top:0;
        z-index:1000;
    }

    .top-button{
        width:100%;
        max-width:320px;
        text-align:center;
        font-size:0.95rem;
        padding:12px 14px;
    }

    .activity-row{
    flex-direction:column;
    align-items:center;
}

.side-by-side{
    width:100%;
    max-width:320px;
    min-height:auto;
}

.home-buttons{
    padding:20px 12px;
}

.home-button{
    width:100%;
    max-width:320px;
    font-size:1.3rem;
    padding:18px 20px;
}

}

/* PAGE FADE */

@keyframes fadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}