/*
 * Modern styles for the Betting Calculators Hub
 *
 * This stylesheet defines a clean, modern look with a cohesive color
 * palette and responsive navigation.  CSS variables are used for
 * easy customization of accent colors and spacing.  Mobile-friendly
 * layouts ensure the hub works well on phones and desktops alike.
 */

/* Color and spacing variables */
:root {
    /* Dark high‑tech theme variables */
    --accent: #00a9e0;          /* vivid cyan/blue accent */
    --accent-light: #075985;    /* darker shade for hover backgrounds */
    --header-bg: #0a192f;       /* very dark blue header */
    --nav-bg: #0f2342;          /* dark navigation background */
    --nav-text: #d1d5db;        /* light gray text for nav */
    --border: #334155;          /* dark border color */
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.5); /* stronger shadow for depth */
    --body-bg: #0a192f;         /* dark page background */
    --text-color: #e2e8f0;      /* light text color */
    --error-color: #f87171;     /* soft red for errors */
    --success-color: #4ade80;   /* soft green for positives */
    --card-bg: #112240;         /* dark card background */
    --result-bg: #1e293b;       /* dark result panel background */
    --table-header-bg: #1f2d45; /* dark header row background */
}

/* Global styles */
body {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: var(--body-bg);
    color: var(--text-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Smooth scrolling and anchor offset to account for the sticky header/nav */
html {
    scroll-behavior: smooth;
    /* Leave room at the top when scrolling to anchor links so section headings
       aren’t obscured by the sticky header/navigation bar. Adjust the value
       (in px) to match the combined height of your header and nav. */
    scroll-padding-top: 80px;
}

header {
    background-color: var(--header-bg);
    color: #ffffff;
    padding: 1.5rem 1rem;
    text-align: center;
    border-bottom: 3px solid var(--accent);
}

header .subtitle {
    font-size: 0.9rem;
    margin-top: 0.25rem;
    font-weight: normal;
    opacity: 0.9;
}

nav {
    background-color: var(--nav-bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    /* Sticky navigation bar stays at the top of the viewport on scroll.
       Sticky elements are considered positioned, so they can act as the
       containing block for absolutely positioned children (e.g., the
       mobile menu toggle). */
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

nav li {
    margin: 0;
    padding: 0;
}

nav a {
    text-decoration: none;
    color: var(--nav-text);
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hide the mobile-only close item on larger screens */
nav li.close-item {
    display: none;
}

nav a:hover,
nav a:focus {
    background-color: var(--accent);
    color: var(--body-bg);
    outline: none;
}

/* Overlay behind the mobile navigation. Initially hidden, covers the rest of the page when the menu is open. */
.nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 150;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nav-overlay.open {
    display: block;
    opacity: 1;
}

/* Menu toggle button – hidden on larger screens, displayed on mobile */
.menu-toggle {
    display: none;
    font-size: 1.5rem;
    color: var(--nav-text);
    cursor: pointer;
    padding: 0.5rem;
    /* Hidden by default; displayed on small screens via media query */
    z-index: 101;
}

main {
    padding: 1rem;
    max-width: 960px;
    margin: 0 auto;
}

.calculator-section {
    background-color: var(--card-bg);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    /* Leave space when scrolled to via anchor to ensure section title is not obscured by the sticky header/nav */
    scroll-margin-top: 90px;
}

.calculator-section h2 {
    margin-top: 0;
    color: var(--accent);
}

.format-selector {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.format-selector label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
    color: var(--nav-text);
}

.input-group {
    margin-bottom: 0.75rem;
    display: flex;
    flex-direction: column;
}

.input-group label {
    margin-bottom: 0.25rem;
    font-weight: 600;
    color: var(--nav-text);
}

/*
 * Form input styles
 *
 * On the dark theme the original inputs used a white background with
 * very light text, which made typed characters nearly invisible.  To
 * improve contrast and align with the overall dark aesthetic, inputs
 * now use the same dark card background and the light text colour.
 * Placeholder text is slightly muted to distinguish it from user
 * input.  Borders remain subtle to maintain a clean look.
 */
.input-group input {
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 1rem;
    background-color: var(--card-bg);
    color: var(--text-color);
}

/* Placeholder colour for inputs on dark backgrounds */
.input-group input::placeholder {
    color: #94a3b8;
}

.buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.buttons button {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.buttons button[type="submit"] {
    background-color: var(--accent);
    color: #ffffff;
}

.buttons button[type="button"] {
    background-color: var(--accent-light);
    color: var(--accent);
}

.buttons button:hover,
.buttons button:focus {
    opacity: 0.95;
    outline: none;
}

.result {
    margin-top: 1rem;
    padding: 0.75rem;
    background-color: var(--result-bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow-x: auto;
}

.result .error {
    color: var(--error-color);
    font-weight: bold;
}

.result .success,
.result .positive {
    color: var(--success-color);
    font-weight: bold;
    /* Increase font size slightly on successful result lines to make
       numeric values stand out without overwhelming the layout */
    font-size: 1.05rem;
}

.result .negative {
    color: var(--error-color);
    font-weight: bold;
}

.result table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.75rem;
    font-size: 0.95rem;
}

.result th,
.result td {
    border: 1px solid var(--border);
    padding: 0.5rem;
    text-align: left;
}

.result th {
    background-color: var(--table-header-bg);
    font-weight: 700;
    color: var(--accent);
}

footer {
    text-align: center;
    padding: 1.5rem 1rem;
    background-color: var(--nav-bg);
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
    color: var(--nav-text);
}

/* Responsive navigation: collapse links into a drop‑down on small screens */
@media (max-width: 600px) {
    /* Tools bar: show the toggle and style it like a full‑width button */
    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        background-color: var(--nav-bg);
        color: var(--nav-text);
        font-weight: 600;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border);
        cursor: pointer;
    }
    .menu-toggle .menu-label {
        margin-left: 0.5rem;
    }
    /* Make nav sticky at the top and ensure it spans full width */
    nav {
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 200;
        display: block;
        padding: 0;
    }
    /* Hide nav links by default; show them when nav has class 'open' */
    nav ul {
        display: none;
        flex-direction: column;
        list-style: none;
        margin: 0;
        padding: 0;
        background-color: var(--nav-bg);
        border-bottom: 1px solid var(--border);
    }
    nav.open ul {
        display: block;
    }
    /* Style individual nav items */
    nav li {
        border-bottom: 1px solid var(--border);
    }
    nav li a {
        display: block;
        padding: 0.75rem 1rem;
        color: var(--nav-text);
        text-decoration: none;
        font-weight: 600;
    }
    nav li a:hover,
    nav li a:focus {
        background-color: var(--accent);
        color: var(--body-bg);
        outline: none;
    }
    /* Style the close item at the bottom of the drop‑down */
    nav li.close-item a {
        color: var(--error-color);
        font-weight: 700;
    }
    nav li.close-item a:hover,
    nav li.close-item a:focus {
        background-color: var(--error-color);
        color: var(--body-bg);
    }
    /* Ensure the close item is visible on mobile */
    nav li.close-item {
        display: block;
    }
    /* Adjust padding of calculator sections on mobile */
    .calculator-section {
        padding: 1rem;
    }
    /* Hide the obsolete close button on mobile */
    .close-nav-top {
        display: none;
    }
}