/* ===== APPLIED GLOBAL STYLING ===== */
/* defines default visual identity, animations and typography behaviour and prevents any layout overflows from ocurring.  */
body{
    margin: 0;/*removes the browsers default spacing so that a full layout control can be achieved */
    padding: 0;
    font-family: 'Franklin Gothic Medium','Lucida Sans'; /* primary body font for text used across website*/
    background: linear-gradient(-45deg, #f9f9f9, #e6f0ff, #fff9e6, #ffe6e6); /*soft gradient applied to improve visual appeal and engagement */
    background-size: 400% 400%; /* allows for enlarged background to enable a smooth animation effect */
    animation: gradientBG 20s ease infinite; /* subtle moving gradient/animation */
    color: #000; /* high contrast text color for readability */
    text-align: center; /* centers alignment for headings and main content */
    overflow-x: hidden; /* prevents any horizontal scrolling caused by the animated background or other elements *
}

/* controls background animation to create a looping effect */
@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* =====HEADER/NAVBAR SECTION===== */
/* sticky navbar improving usabilty by keeping all site links in one easy to access place, while the box shadow adds depth and separation from the content */
.navbar {
    background-color: #111;/* a dark background to provide some contrast for nav text*/
    padding: 10px 20px;/*internal spacing to improve clickability and visual balance */
    position: sticky;
    top: 0;
    z-index: 1000;/* ensures navbar stays above other elements when scrolling */
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);/* subtle shadow for depth and separation from content */
}

/*horizontal menu layout that adapts to screen size with flexbox, and styling for links to improve visibility and interactivity */
.navbar ul {
    list-style: none;/*remove bullet styling*/
    margin: 0;
    padding: 0;
    display: flex;/*enable horizontal layout*/
    justify-content: center;/*keeps navigation visually centered*/
    flex-wrap: wrap;/* prevent overflow on smaller screens by allowing items to wrap to the next line */
}

/*individual nav items spacing*/
.navbar ul li {
    margin-right: 20px;/*creates clear seperation between links*/
}

/*navigation links styling focused on visibility and interactivity*/
.navbar ul li a {
    color: #fff;
    text-decoration: none;/*removes underline for a cleaner sleek look*/
    font-weight: bold;/*improves readabilty and emphasis on navigation links*/
    padding: 5px 10px;
    transition: background 0.3s, color 0.3s;/*smooth hover effect*/
}

/*active and hover states help users identify current page and provide feedback on interactivity, with a contrasting color and background for visibility */
.navbar ul li a:hover,
.navbar ul li a.active,
.navbar ul li a.active-link {
    color: #ff4747;/*red color for brand accent and visibility*/
    background-color: #333;
    border-radius: 4px;
}

/* ===== MAIN CONTENT ===== */
/* central layout container using flexbox for adaptive and responsive design, with a max-width to prevent content from stretching too wide on large screens, and padding for internal spacing */
main {
    max-width: 1200px;/* prevents excessive line length on larger screens, improving readability */
    margin: 20px auto;
    padding: 20px;
    display: flex;/* allows for side by side content and sidebar */
    gap: 30px; /* consistent spacing between sections */
    flex-wrap: wrap; /* enables stacking on smaller devices for better mobile experience */
}

/* primary area of content prioritised for visibility and engagement*/
.main-content {
    flex: 2; /* allocates more space than sidebar, emphasizing main content */
}

/* secondary content container used for supporting information, offers and news, with a contrasting background and box shadow to visually separate it from the main content and draw attention */
.sidebar {
    flex: 1;
    background: #fff;
    padding: 20px;
    border-radius: 12px;/* rounded corners for a softer look making it visually appealing*/
    box-shadow: 0 8px 15px rgba(0,0,0,0.1); /* viusal depth and separation from main content */
}

/* ===== GAME SECTION ===== */
/* container for interactive tabbed content*/
.tab-container {
    width: 90%;
    margin: 30px auto;
    text-align: center;
}

/* radio inputs are hidden to allow for custom visual tabs using labels, improving aesthetics and user experience */
input[type="radio"] { display: none; }

/* tab buttons styled for clarity and accessibility*/
.tab-label {
    display: inline-block;
    background: #444;
    padding: 12px 25px;
    margin: 0 15px;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    transition: background 0.3s;
}

/* hover effect feedback reinforces interactivity and encourages user engagement with the tabs */
.tab-label:hover { background: #666; }

/* highlights selected tab using CSS knowledge of the checked state of the hidden radio inputs, providing clear visual feedback on which tab is active */
input#tab1:checked ~ label[for="tab1"],
input#tab2:checked ~ label[for="tab2"],
input#tab3:checked ~ label[for="tab3"] {
    background: #ff4747;
}

/* content panels hidden by default to reduce clutter and only show relevent information*/
.tab-content {
    display: none;
    background: #f4f4f4;
    color: #000;
    padding: 20px;
    margin-top: 20px;
    border-radius: 8px;
    animation: fadeIn 0.6s ease;/* soft fade into animation to improve user experience*/
}

/* allows for correct display of content based on which tab is selected, using the sibling combinator to show the relevant content panel when its corresponding radio input is checked */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 { display: block; }

/* individual game card spacing*/
.simple-slide {
    margin-bottom: 20px;
}

/* responsive imagery with optional zoom interation on hover to enhance user engagement, while maintaining a clean and modern aesthetic with rounded corners and centered display */
.simple-slide img {
    width: 100%;
    max-width: 500px;
    border-radius: 6px;
    display: block;
    margin: 0 auto;
    transition: transform 0.3s ease;
}

/*hover zoom draws user attention to featured images  */
.simple-slide img.hover-zoom:hover { transform: scale(1.05); }

/* caption container improves content readability and visual appeal by providing a clear separation from the image, with a background and padding for emphasis */
.simple-slide p {
    margin-top: 10px;
    background: #ddd;
    padding: 10px;
    border-radius: 4px;
}

/* reusable fade in animation for dynamic elements*/
@keyframes fadeIn {
    from {opacity: 0; transform: translateY(20px);}
    to {opacity: 1; transform: translateY(0);}
}

/* emphasises highlighted or featured content with a bold border, shadow and scale effect */
.highlight {
    border: 3px solid #ff4747;
    box-shadow: 0 0 20px rgba(255, 71, 71, 0.6);
    transform: scale(1.05);
    transition: all 0.3s;
}

/* ===== SIDEBAR SECTION ===== */

/* removes default list styling for cleaner sidebar layout*/
ul { list-style: none; padding: 0; }
/* styles sidebar links to appear prominent and interactive*/
ul li a { text-decoration: underline; font-weight: bold; color: #000; transition: color 0.3s; }
/* feedback visually on hover*/
ul li a:hover { color: #ff4747; }

/* style sidebar section headings for emphasis*/
.sidebar h3 { color: #ff4747; font-size: 22px; margin-bottom: 15px; }

/* container for promotional or highlighted sidebar content*/
.offer {
    background: #ffeaea;
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 8px;
    border-left: 5px solid #ff4747;
}

/* heading for individual promotional offers/items*/
.offer h4 {
    margin: 0 0 5px 0;
    font-size: 18px;
    color: #111;
}

/* supporting text for promotional content*/
.offer p { margin: 0; font-size: 16px; }

/* ===== FOOTER SECTION ===== */

/* Footer visually closes the page and reinforces showcased branding*/
.site-footer {
    background-color: #1a1a1a;
    color: #ccc;
    text-align: center;
    padding: 20px 10px;
    font-family: 'Gill Sans';/* secondary font for footer contrast*/
    font-size: 14px;
    border-top: 2px solid #444;
}

/* footer links styled to remain readable on a dark background*/
.site-footer a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}

/* hover effect maintains consistency with brand color*/
.site-footer a:hover { color: #ff4747; }

/* ===== FAQ SECTION ===== */
/* styles individual faq entries for clarity, emphasis and user interaction*/
.faq-item {
    background: #fff;/* clean card style background for readability and visual separation from the page background*/
    padding: 15px 20px;/* readable spacing within each faq item*/
    margin-bottom: 15px;/* visual separation between faq items*/
    border-left: 5px solid #ff4747;/* accent bar to highlight importance*/
    border-radius: 5px;/* softens edges for modern ui */
    scroll-margin-top: 250px;/*prevent sticky navbar overlap when navigating to faq items via anchor links*/
    transition: transform 0.3s, background 0.3s;/* smooth hover effect for interactivity and engagement */
}
/* subtle movement and color change to indicate interactivity and encourage user engagement with the faq items */
.faq-item:hover {
    transform: translateX(5px);/* draws attention to active faq item*/
    background: #fff1f1;/* light highlight without overwhelming the content*/
}

/* ===== ABOUT PAGE SECTION ===== */

/* used for section titles to ensure hierarchy and consistency*/
.page-title {
    display: inline-block;/* keep background tight around text for emphasis*/
    background-color: #000;/* contrasting background to make the title stand out and reinforce brand identity*/
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    margin-top: 20px;
    margin-bottom: 15px;
}

/* controls readabilty and line length for about page content*/
.main-content p {
    max-width: 900px;/* optimal reading width*/
    margin: 0 auto 20px;/* centers content and adds spacing between paragraphs*/
    text-align: left;/* left align for better readability on longer text blocks*/
    line-height: 1.6;/* improves readability by increasing space between lines*/
    font-size: 18px;
}

/* container for core values or key information, styled to visually separate it from the rest of the content and draw attention to its importance, with a dark background and light text for contrast */
.values-box {
    background: #111;/* dark contrast section*/
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    color: white;
}

/* individual value items styled to create a card-like appearance with a bold accent border, improving visual hierarchy and making key information stand out */
.value-item {
    margin-bottom: 15px;
    padding: 12px;
    background: #1c1c1c;/* slightly lighter than the values box to create a layered effect and improve readability*/
    border-left: 4px solid #ff4747;/* accent border to draw attention to each value item and reinforce brand identity*/
    border-radius: 4px;
}

/* headings emphasised for scanability*/
.value-item h3 { margin: 0 0 5px; color: #ff4747; }
.value-item p { margin: 0 0 10px; }

/* highlight inline links to maintain brand color consistency*/
.highlight-link { color: #ff4747; text-decoration: none; }
/* hover effect provides feedback and encourages user interaction with links, while maintaining a clean look by only underlining on hover */
.highlight-link:hover { text-decoration: underline; }

/* ===== CONTACT PAGE SECTION ===== */

/*overides global flex behaviour to ensure a clean single column layout*/ 
.contact-page {
    max-width: 900px;
    margin: 40px auto;
    padding: 20px;
    text-align: center;
    display: block;
}

/*spacing control for contact page section headings */
.contact-page h2,
.contact-page h3 { margin-bottom: 15px; } /*seperates headings from content below*/

/*paragraph formatting for readable contact info*/
.contact-page p { font-size: 16px;/*standard body size for forms*/
     line-height: 1.6;/*improves readbily by increasing space between lines*/
      margin-bottom: 10px;/*prevents crowding of text*/
       text-align: left; } /*aligns with form fields for consistency*/

/* =====CONTACT FORM SECTION===== */
/*flex based layout ensures clean vertical alignment*/
.contact-page form {
    display: flex;/*allows for column based form layout*/
    flex-direction: column;/*stacks form elements vertically for a natural flow*/
    align-items: stretch;/*ens form elements to fill the container width for better usability*/
    gap: 15px;/*consistent spacing between form fields and buttons*/
    background: #fff;/*clean background for readability and focus on form elements*/
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);/*elevates form visually*/
    margin-bottom: 30px;/*separates form from other content on the page*/
}

/*label allows for improved clarity*/
.contact-page form label {
    font-weight: bold;/*clearly identifies each input*/
    text-align: left;/*aligns with form fields for consistency and readability*/
}

/*shared styling for text inputs and textarea fields*/
.contact-page form input,
.contact-page form textarea {
    width: 100%;/*ensures form fields fill the container for better usability*/
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box;/*prevents padding from increasing overall width, ensuring consistent layout*/
}

/*primary call to action button styling*/
.contact-page form button {
    padding: 12px;
    font-size: 16px;
    background: #ff4747;/*brand consistent color*/
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;/*indicates interactivity*/
    transition: background 0.3s;/*smooth hover effect*/
}

/*hover feedback reinforces clickability*/
.contact-page form button:hover { background: #e63a3a; }

/* =====  GOOGLE MAPS SECTION ===== */

/*container for embedded google map, with spacing to separate it from other content and centered alignment for visual balance, while the iframe styling ensures it is responsive and visually integrated with the rest of the page through rounded corners and a border */
.contact-page .map-container {
    margin-top: 30px; /*separates map from form and other content*/
    text-align: center;
}

/*embedded map styled to be responsive and visually cohesive with the rest of the page, with a max-width to prevent it from stretching too wide on larger screens, and a border to visually integrate it with the design*/
.contact-page .map-container iframe {
    width: 100%;/*adpats to smaller screens*/
    max-width: 600px;
    height: 400px;
    border-radius: 8px;
    border: 2px solid #444;/*clearly defines map boundary*/
}

/* ===== CALENDAR SECTION ===== */

/*groups calendar elements as a single section with spacing to separate it from other content, and centers the calendar for visual balance*/
.contact-page #calendar-section { margin-top: 40px; /*separates calendar from other content*/
    text-align: center; }

 /*calendar container styling for consistency with form*/   
.contact-page #calendar {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 600px;
    border: 2px solid #444;
    border-radius: 8px;
    padding: 15px;
    background: #fff;
}

/*header layout for month navigation*/
.contact-page #calendar-header {
    display: flex;/*allows for buttons and title to be evenly spaced and positioned*/
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

/*navigation button styling */
.contact-page #calendar-header button {
    background-color: #ff4747;
    color: white;
    border: none;
    padding: 5px 12px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

/*hover effect provides feedback and encourages user interaction with the calendar navigation buttons, while maintaining brand consistency */
.contact-page #calendar-header button:hover { background-color: #e63a3a; }

/*calendar table layout*/
.contact-page #calendar-table {
    width: 100%;
    border-collapse: collapse;/*removes spacing between table cells for a cleaner look*/
}

/*shared cell styling for alignment and interactivity, with padding for readability, borders for clear separation, and a cursor change to indicate that the cells are interactive (e.g., for event details) */
.contact-page #calendar-table th,
.contact-page #calendar-table td {
    padding: 10px;
    border: 1px solid #ccc;
    text-align: center;
    position: relative;/*enables pseudo-elements for event details*/
    cursor: pointer;
}
/*viual indicator for dates with events*/
.contact-page #calendar-table td.event { background-color: #ffdcdc; border-radius: 6px; }

/*marker for selected date, using a pseudo-element to create a small red dot below the date number, providing a clear visual cue for the selected date while maintaining a clean and modern design */
.contact-page #calendar-table td.selected::after {
    content:"";
    position:absolute;
    bottom:5px;
    left:50%;
    transform:translateX(-50%);
    width:10px;
    height:10px;
    background:red;
    border-radius:50%;
    z-index:2;
}

/*tooltip dsiplaying event details*/
.contact-page #calendar-table td.event.selected::before,
.contact-page #calendar-table td.event:hover::before {
    content: attr(data-event);/*pulls event text from HTML*/
    position:absolute;
    bottom:25px;
    left:50%;
    transform:translateX(-50%);
    background:#ff4747;
    color:white;
    padding:4px 8px;
    border-radius:4px;
    font-size:12px;
    white-space:nowrap;
    z-index:3;
}

/* ===== OTHER CONTACT INFO SECTION ===== */

/*Seperates secondary contact info from interactive elements*/
.contact-page .contact-info {
    margin-top: 20px;
    text-align: left;
}

/*keeps contact details compact and readable, with spacing to prevent crowding and improve scanability*/
.contact-page .contact-info p { margin: 8px 0; }

/* ===== RESPONSIVE SECTION ===== */

/*optimises layout for smaller screens*/
@media(max-width:900px){
    main { flex-direction: column; } /*stacks content vertically*/
    .sidebar { margin-top: 20px; }/*maintains spacing*/
    .contact-page { width:95%; padding:15px; } /*prevents horizontal overflow*/
    .contact-page .map-container iframe { height:300px; } /*preserve aspect ratio on smaller screens*/
    .contact-page #calendar { max-width: 100%; } /*allows calendar to fill available width*/
}