/* ================================================
   NACCHO Group Allocation Portal - Custom Styles
   ================================================ */

/* Hide the Accommodation and Travel sections completely
   (heading, table, everything inside) */
#hotel-bookings-options,
#hotel-bookings,
#travel-bookings {
    display: none !important;
}

/* Remove the Accommodation and Travel columns from the Group
   Members table on the Register Delegates page - heading and
   every row's cell, both empty since nobody uses them.
   This table is built by a script (DataTables) that sets a
   fixed pixel width up front, so we also tell the header row
   to resize itself once those two columns are gone - otherwise
   you'd be left with an empty gap on the right where they used
   to sit. */
#GroupMembersTable_wrapper th:nth-child(9),
#GroupMembersTable_wrapper td:nth-child(9),
#GroupMembersTable_wrapper th:nth-child(10),
#GroupMembersTable_wrapper td:nth-child(10) {
    display: none !important;
}

#GroupMembersTable_wrapper .dataTables_scrollHeadInner,
#GroupMembersTable_wrapper .dataTables_scrollHeadInner table {
    width: auto !important;
}

/* Nav bar refresh - light touch only.
   Text colour is left exactly as it is - this just softens the
   corners, adds a bit of breathing room, a subtle shadow under
   the bar, and a smooth hover instead of things just snapping
   on/off. The tab you're currently on gets a soft navy tint
   (using your own logo navy, very faint) instead of the old
   solid grey box, so it's obvious where you are without it
   looking like a big blue button. */
.navbar.navbar-inverse {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.navbar.navbar-inverse .navbar-nav > li > a {
    border-radius: 6px;
    margin: 8px 4px;
    transition: background-color 0.15s ease;
}

.navbar.navbar-inverse .navbar-nav > li > a:hover,
.navbar.navbar-inverse .navbar-nav > li > a:focus {
    border-radius: 6px;
}

.navbar.navbar-inverse .navbar-nav > li.active > a {
    border-radius: 6px;
    background-color: rgba(0, 20, 66, 0.08);
}

/* Page background image
   Swap YOUR_IMAGE_URL_HERE for the actual image link, then
   this sits centred at the bottom of the page and won't
   scroll with the content */
body, html {
    height: 100%;
    margin: 0;
}

body {
    background-image: url('YOUR_IMAGE_URL_HERE');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    background-attachment: scroll;
}

/* Adds breathing room under a specific element so the
   background image doesn't sit flush against it -
   swap .your-element for the real class or ID once you know it */
.your-element {
    padding-bottom: 20px;
}