/* Make the page use full viewport height and allow sticky footer */
html, body {
    height: 100%;
    margin: 0;
}

/* Body: typography, background, and flex layout 
 Flex layout: header at top, footer at bottom, main grows in between */
body {
    font-family: Arial, sans-serif;
    padding: 0;
    background-color: #FFEFD5;
    display: flex;
    flex-direction: column;
    min-height: 100vh;  /* at least viewport height */
}

/* Main content area flexes to fill space */
main {
    flex: 1;                 /* makes main stretch between header and footer */
    padding: 20px;
    text-align: center;      /* Center headings, buttons, etc. */
}

main p,
main table {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Responsive header */
.site-header {
    background-color: #D2691E;
    color: white;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;           /* Allow wrapping on small screens */
    align-items: center;
    justify-content: center;   /* Center logo + text */
    text-align: center;
}

.logo-img {
    max-width: 150px;          /* Scales on small screens */
    width: 25vw; 
    height: auto;
    flex: 0 0 auto;
    border: 4px solid #ccc;
}

.header-text {
    flex: 1 1 200px;
}

.header-text h1 {
    margin: 0.2rem 0 0.5rem 0;
}

/* Navigation */
.main-nav a {
    color: white;
    text-decoration: none;
    margin: 0 10px;
}

/* Footer */
.site-footer {
    background-color: #000000;
    color: white;
    padding: 70px 40px;
    display: flex;
    justify-content: space-between;  /* left, center, right */
    align-items: center;
    flex-wrap: wrap;                 /* allow wrapping on small screens */
}

/* Left, center, right areas */
.footer-left,
.footer-right {
    flex: 0 0 auto;      /* only as wide as their content */
}

.footer-center {
    flex: 1 1 auto;      /* take up the remaining space */
}


/* Developer text (left) */
.footer-left p {
    margin: 0;
    text-align: left;
    padding-left: 0px;      
}

/* Center copyright text */
.footer-center p {
    margin: 0;
    text-align: center;
}

/* Social icons (right) */
.footer-right {
    text-align: right;
}

.footer-right .links {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.footer-right .links span {
    margin-right: 5px;
}

.footer-right .links a {
    margin: 0;
    text-decoration: none;
    color: #1E90FF;
}

/* Social media block */
#mysocialmediaDiv {
    margin-top: 1rem;
}


/* Room list / cards */
.room-list {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.room {
    border: 1px solid #ccc;
    padding: 10px;
    width: 220px;
    max-width: 100%;
    text-align: center;
}

/* Container for room details page */
.room-details {
    max-width: 700px;      /* can be adjusted to 600–800px */
    margin: 0 auto;        /* centers the whole block */
    text-align: center;    /* headings, price, etc. centered */
}

/* Description text inside details */
.room-details .room-description {
    text-align: left;      /* or 'center' if needed to */
    line-height: 1.5;      /* improves readability */
}

/* Images in room cards (room list page) */
.room img {
    max-width: 100%; /* image will never be wider than its container (card or .room-details block) */
    height: auto;   /* keeps correct aspect ratio */
    display: block;
    margin: 0 auto 0.5rem;  /* center image in card, with small bottom gap */
}

/* Images in room details / booking / review pages */
.room-details img,
.room-details .room-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 1rem;    /* center with a bit more bottom space */
}

/* Reviews on room page */
.review {
    border-left: 4px solid #f90;
    padding-left: 10px;
    margin-bottom: 15px;
}

.moderation-intro {
    max-width: 800px;
    margin: 0 auto;        /* centers the block horizontally */
    text-align: center;    /* centers the text inside */
}

/* Links section */
.links {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.links a {
    margin: 5px;
    text-decoration: none;
    color: #1E90FF;
}

/* Tables on admin pages: allow horizontal scroll on small screens */
.table-wrapper {
    width: 100%;
    overflow-x: auto;   /* for small screens */
}

/* Table styling */
.table-wrapper table {
    border-collapse: collapse;
    width: 80%;         /* narrower than full width */
    max-width: 100%;
    margin-left: auto;  /* center horizontally */
    margin-right: auto; /* center horizontally */
}

/* This draws the grid lines */
.table-wrapper th,
.table-wrapper td {
    border: 2px solid #000;   /* thicker lines and color can be adjusted */
    padding: 10px;  /* optional: ensures spacing if cellpadding i removed  */
}

/* Optional outer frame */
.table-wrapper table {
    border: 2px solid #000;   /* thicker border around the whole table */
}

/* Room availability colours on dashboard */
.status-available {
    color: green;
    font-weight: bold;
}

.status-booked {
    color: blue;
    font-weight: bold;
}

/* Responsive adjustments for tablets / phones */
@media (max-width: 768px) {
    .site-header {
        flex-direction: column;    /* Stack logo and text vertically */
        padding: 15px;
    }

    .logo-img {
        max-width: 120px;
        width: 35vw;
    }

    .room-list {
        justify-content: center;
    }
    
    /* Footer adjustments */
    .site-footer {
        flex-direction: column;
        text-align: center;
    }

    .footer-left p,
    .footer-center p,
    .footer-right {
        text-align: center;
        padding-left: 0;
        margin-top: 5px;
    }

    .footer-right .links {
        justify-content: center;
    }
}