@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&family=Lato&display=swap');
/* font-family: 'Lato', sans-serif;
  font-family: 'Goudy Bookletter 1911', serif;*/

/*Header Content*/
header {
	background-color: #23392E;
	padding: 15px 0;
}

#header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
}

#header-content img {
	max-width: 160px;
	height: auto;
}

nav ul {
	display: flex;
	gap: 40px;
	margin: 0;
	padding: 0;
}

nav a {
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	text-transform: uppercase;
	text-decoration: none;
	color: #F8F5F0;
	padding-bottom: 5px;
	position: relative;
}
nav a:hover {
	color: #C0AC7E;
}

/* ----- MAIN CONTENT ---- */

#main-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 60px 4%;
}

/* ----- WELCOME SECTION ----- */
#welcome-section {
	text-align: center;
	max-width: 800px;
	margin: 0 auto 60px auto;
}

#welcome-section h1 {
	font-family: 'Goudy Bookletter 1911', serif;
	font-size: 40px;
	color: #23392E;
	margin-bottom: 20px;
}

#welcome-section p {
	font-size: 18px;
	line-height: 1.6;
	color: #555555;
}

/* ----- EXPLORE SECTION ----- */
#explore-resort {
	display: flex;
	gap: 40px;
	justify-content: space-between;
}

/*even gap for pics*/
.column-card {
	flex: 1;
}

.column-card a {
	text-decoration: none;
	color: inherit;
	display: block;
	transition: transform 0.3s ease;
}

/* hover effect - had to look this one up but I like it a lot so I'm keeping it */
.column-card a:hover {
	transform: translateY(-5px);
}

/* Image Styling */
.column-card img {
	width: 100%;
	height: 350px;
	object-fit: cover;
	border-radius: 4px;
	margin-bottom: 20px;
}

/* Text Styling */
.column-card h2 {
	font-family: 'Goudy Bookletter 1911', serif;
	font-size: 28px;
	color: #23392E;
	margin-bottom: 15px;
}

.column-card p {
	font-size: 16px;
	line-height: 1.5;
	color: #333333;
}

/* ----- FOOTER ----- */
footer {
	background-color: #23392E;
	color: #F8F5F0;
	padding: 60px 0 40px 0;
	margin-top: 60px;
	font-family: 'Lato', sans-serif;
}

#footer-content {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 4%;
}

.footer-section {
	flex: 1;
}

.footer-section h3 {
	font-family: 'Goudy Bookletter 1911', serif;
	color: #C0AC7E;
	font-size: 22px;
	margin-bottom: 20px;
	text-transform: uppercase;
}

.footer-section p {
	font-size: 14px;
	line-height: 1.8;
	margin-bottom: 10px;
}

.footer-section ul {
	list-style: none;
	padding: 0;
}

.footer-section ul li {
	margin-bottom: 10px;
}

.footer-section ul li a {
	color: #F8F5F0;
	text-decoration: none;
	font-size: 14px;
	transition: color 0.3s ease;
}

.footer-section ul li a:hover {
	color: #C0AC7E;
}

.copyright {
	text-align: right;
	font-size: 12px;
	opacity: 0.8;
}

/* ---- ACTIVITIES PAGE ---- */
#activities-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 4%;
    box-sizing: border-box;
}

/* Main Page Heading */
.page-title {
    font-family: 'Goudy Bookletter 1911', serif;
    font-size: 40px;
    color: #23392E;
    text-align: center;
    margin-bottom: 50px;
}

/* ----- ROWS ----- */
.gallery-row {
    display: flex;
    gap: 30px; 
    justify-content: center;
    align-items: center;
    margin-bottom: 30px; 
}

.gallery-row img {
    flex: 1 1 0px; 
    width: 100%;
    height: 280px; 
    object-fit: cover; 
    border: 4px solid #C0AC7E; 
    border-radius: 2px; 
    box-sizing: border-box;
}

/* ----- TEXT ----- */
.gallery-text {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px auto; 
}

.gallery-text h2 {
    font-family: 'Goudy Bookletter 1911', serif;
    font-size: 32px;
    color: #23392E; 
    margin-bottom: 15px;
}

.gallery-text p {
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #555555;
}

/*---- TAVERN PAGE ----*/

#tavern-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 4%;
    box-sizing: border-box;
}

.tavern-header {
    text-align: center;
    margin-bottom: 80px;
}

.tavern-banner {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border: 3px solid #C0AC7E;
    border-radius: 2px;
    margin: 30px 0;
    box-sizing: border-box;
}

.reservation-info h2 {
    font-family: 'Goudy Bookletter 1911', serif;
    font-size: 32px;
    color: #23392E;
    margin-bottom: 10px;
}

.reservation-info p {
    font-family: 'Lato', sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: #555555;
}

/* ----- MENU ----- */
.menu-section {
    display: flex;
    gap: 50px;
    align-items: flex-start;
    margin-bottom: 80px;
}

/*Had a load of issues getting the images to not squish/overlap the text. */
.menu-items {
    width: 50%;
    flex-shrink: 0;
}

.menu-items h2 {
    font-family: 'Goudy Bookletter 1911', serif;
    font-size: 36px;
    color: #23392E;
    border-bottom: 2px solid #C0AC7E;
    padding-bottom: 10px;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.menu-items ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-items li {
    font-size: 16px;
    line-height: 1.6;
    color: #555555;
    margin-bottom: 25px;
}

.menu-items li strong {
    font-family: 'Goudy Bookletter 1911', serif;
    font-size: 22px;
    color: #23392E;
}


.menu-images {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.menu-images img {
    flex: 1 1 200px;
    max-width: 100%;
    height: 200px;
    object-fit: cover;
    border: 3px solid #C0AC7E;
    border-radius: 2px;
    box-sizing: border-box;
}

/* ----- ACCOMMODATIONS TABLE ----- */

.accommodations-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 60px;
	background-color: #ffffff;
}

/* Table Header */
.accommodations-table thead {
	background-color: #23392E;
	color: #F8F5F0;
}

.accommodations-table th {
    font-family: 'Lato', serif;
    font-size: 18px;
    padding: 20px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid #EAEAEA;
}

/* Table Body */
.accommodations-table td {
    font-family: 'Lato', sans-serif;
    padding: 20px;
    border: 1px solid #EAEAEA;
    text-align: center;
    vertical-align: middle;
    color: #333333;
    line-height: 1.5;
}

/* image styling*/
.table-thumb {
	width: 150px;
	height: auto;
	border-radius: 4px;
	transition: transform 1.5s ease, box-shadow 1.5s ease;
}
.table-thumb:hover {
	transform: scale(2.2);
	position: relative;
	z-index: 10; /* zoomed image overlaps the surrounding table boxes */
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* shadow */
	border-radius: 2px;
}
/* Price & Bold Text */
.accommodations-table td strong {
	font-family: 'Goudy Bookletter 1911', serif;
	font-size: 20px;
	color: #23392E;
}
.category-heading {
    font-family: 'Goudy Bookletter 1911', serif;
    font-size: 32px;
    color: #23392E;
    border-bottom: 2px solid #C0AC7E;
    padding-bottom: 10px;
    margin-top: 50px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.no-results {
    font-family: 'Lato', sans-serif;
    color: #555555;
    font-style: italic;
    margin-bottom: 40px;
}

/* ----- CONTACT FORM ----- */
#contact-section {
	max-width: 800px;
	margin: 60px auto;
	background-color: #F8F5F0;
	padding: 40px;
	border-radius: 4px;
	border: 1px solid #C0AC7E;
}

#contact-section h2 {
	font-family: 'Goudy Bookletter 1911', serif;
	font-size: 32px;
	color: #23392E;
	text-align: center;
	margin-bottom: 30px;
}

.contact-form .form-group {
	margin-bottom: 20px;
}

.contact-form label {
	display: block;
	font-family: 'Lato', sans-serif;
	font-weight: bold;
	margin-bottom: 8px;
	color: #23392E;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	box-sizing: border-box;
}

.submit-btn {
	background-color: #23392E;
	color: #F8F5F0;
	padding: 15px 30px;
	border: none;
	border-radius: 4px;
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.3s ease;
	width: 100%;
	margin-top: 10px;
}

.submit-btn:hover {
	background-color: #C0AC7E;
}

/* ----- CONFIRMATION PAGE ----- */

#confirmation-section {
	max-width: 800px;
	margin: 0 auto 60px auto;
	background-color: #F8F5F0;
	padding: 40px;
	border-radius: 4px;
	border: 1px solid #EAEAEA;
}

.confirm-message {
	text-align: center;
	font-weight: bold;
	margin-bottom: 30px;
}

.confirmation-details ul {
	list-style: none;
	padding: 0;
	font-family: 'Lato', sans-serif;
	font-size: 18px;
	line-height: 2;
}

.confirmation-details ul li strong {
	color: #23392E;
	font-family: 'Goudy Bookletter 1911', serif;
	font-size: 20px;
}
/* --------- SLIDESHOW --------- */

#slideshow-wrapper {
    width: 100%; 
    height: 441px;
}

#slideshow {
    width: 100%;
    height: 441px;
    overflow: hidden;
    display: flex;
}

#slideshow img {
    flex: 0 0 100%;
    height: 100%;
    object-fit: cover;
}

.circle {display: inline-block;
	background-color: lightgrey;
	width: 12px; height: 12px;
	border-radius: 50%;
	margin-right: 1.56%;
}
#circle-nav {margin-top: -50px;
	text-align: center;
}


/* ----- TABLET ----- */
@media only screen and (max-width: 1024px) {
    
    #header-content {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    /* multi-column layouts become grids */
    #explore-resort,
    .gallery-row {
        flex-wrap: wrap;
    }
    
    .column-card {
        flex: 1 1 45%; 
    }
    
    .gallery-row img {
        flex: 1 1 45%; 
    }

    /* Tavern menu text and images stack */
    .tavern-banner {
        height: 250px; 
    }
    
    .menu-section {
        flex-direction: column; 
        gap: 30px;
    }
    
    .menu-items, 
    .menu-images {
        width: 100%;
    }

    /* Slideshow*/
    #slideshow-wrapper,
    #slideshow {
        height: 300px;
    }

    #footer-content {
        flex-wrap: wrap;
        gap: 30px;
    }

    .footer-section {
        flex: 1 1 45%; /* split 2x2 on tablet */
    }

/* ADDED: Table Responsiveness (Allows horizontal scroll so layout doesn't break) */
    .accommodations-table {
        display: block;
        overflow-x: auto;
        /* Removed the global white-space: nowrap from here */
    }

    /* Keep short columns (Price, Sleeps, etc.) on a single line so they don't squish */
    .accommodations-table th,
    .accommodations-table td {
        white-space: nowrap;
    }

    /* Specifically target the 7th column (Description) */
    .accommodations-table th:nth-child(7),
    .accommodations-table td:nth-child(7) {
        white-space: normal; /* Allows the description text to wrap into paragraphs */
        min-width: 320px; /* Gives the description box plenty of room on small screens */
    }
}

/* ----- SMARTPHONE ----- */
@media only screen and (max-width: 480px) {
    
    nav ul {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }

    /* Scale down headings */
    #welcome-section h1,
    .page-title,
    .category-heading,
    .tavern-header h1 {
        font-size: 28px;
    }
    
    #welcome-section p,
    .gallery-text p {
        font-size: 16px;
    }

    /* Grid items fully stacked */
    #explore-resort,
    .gallery-row {
        flex-direction: column;
    }
    
    .column-card,
    .gallery-row img {
        flex: 1 1 100%;
        width: 100%;
    }

    /* Tavern items */
    .menu-items h2 {
        font-size: 28px;
    }

    .menu-images img {
        flex: 1 1 100%; 
        height: auto;
        aspect-ratio: 4/3;
    }

    .tavern-banner {
        height: 180px;
        margin: 15px 0;
    }
    
    /* Slideshow */
    #slideshow-wrapper,
    #slideshow {
        height: 200px;
    }

    /* ADDED: Footer elements fully stack */
    .footer-section {
        flex: 1 1 100%;
        text-align: center;
    }

    .copyright {
        text-align: center;
        margin-top: 20px;
    }

    /* ADDED: Reduced padding on mobile to give content more room */
    #main-content,
    #activities-content,
    #tavern-content {
        padding: 40px 4%;
    }

    #contact-section,
    #confirmation-section {
        padding: 20px;
        margin: 30px auto;
    }
}