/* ============================================
   SHARED / GLOBAL STYLES
   ============================================ */

/* Basic page structure and typography */
body {
  background-color: #f4ecec;
  overflow-x: hidden;
  margin: 0;
  font-weight: 400;
  font-style: normal;
  color: black;
}

/* Paragraph text styling - uses Arbutus font */
p {
  font-family: "Arbutus", serif;
  font-weight: 400;
  font-style: normal;
}

/* Heading 2 styling - uses Rye font */
h2 {
  font-family: "Rye", serif;
  font-weight: 400;
  font-style: normal;
}

/* Heading 1 styling - uses Rye font */
h1 {
  font-family: "Rye", serif;
  font-weight: 400;
  font-style: normal;
}

/* Link styling - removes underline, keeps text black */
a {
  text-decoration: none;
  color: black;
}

/* Header container */
header {
  display: block;
}

/* ============================================
   SHARED NAVIGATION & HEADER STYLES
   ============================================ */

/* Hero section at top of start page */
.hero {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.hero img {
  width: 50%;
  object-fit: cover;
}

/* Hide hero when user scrolls past it */
.hero.hidden {
  opacity: 0;
  visibility: hidden;
}

/* Sticky navigation bar (appears after scrolling past hero on start page) */
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: grid;
  align-items: center;
  grid-template-columns: repeat(6, 1fr);
  
  /* Starts hidden above viewport, slides down when activated */
  transform: translateY(-100%);
  transition: transform 0.6s ease;
  z-index: 9999;
  background-color: #f4ecec8a;
  border-style: solid;
  border-width: 1px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

/* Show navbar when JS adds 'show' class */
#navbar.show {
  transform: translateY(0);
}

/* Fixed navbar at top (used on forum, store, booking pages) */
#navbarfixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: grid;
  align-items: center;
  grid-template-columns: repeat(6, 1fr);
  z-index: 9999;
  background-color: #f4ecec8a;
  border-style: solid;
  border-width: 1px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

/* Logo image in navigation */
.nav-logo {
  margin: 20px;
  grid-column: span 1;
  width: 100px;
  height: auto;
  border-style: solid;
  border-width: 0.5px;
  border-color: black;
  border-radius: 20px;
}

/* Individual navigation links */
.nav-links {
  border-style: solid;
  border-width: 0.5px;
  border-color: black;
  border-radius: 20px;
  width: 100px;
  height: auto;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #f4ecec94;
  transition: 0.3s ease;
}

.nav-links:hover {
  background-color: #d4c4c4;
  transform: scale(1.05);
  cursor: pointer;
}

/* Highlight current page link */
.currentpage {
  background-color: #6392dc;
}

/* Search form in navigation */
.navsearch {
  border-style: solid;
  border-width: 0.5px;
  border-color: black;
  border-radius: 20px;
}

.form {
  padding-left: 20px;
}

/* Navigation heading - styles the main header on start page */
.headernav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  text-align: center;
  padding: 20px;
}

.headernav div {
  background-color: #f4ecec8a;
  border-color: darkgray;
  border-width: 1px;
  border-style: solid;
  border-radius: 20px;
  align-content: center;
  margin-bottom: 40px;
}

/* Shared page title styling */
.title {
  padding: 20px;
  border-radius: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  text-align: center;
}

/* Spacing to push content below fixed navbar (used on all pages) */
.filler {
  height: 150px;
}

/* Standard image styling */
.img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ============================================
   SHARED FOOTER STYLES
   ============================================ */

/* Footer container - 3 column layout */
.Footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  text-align: center;
  background-color: #6392dc;
  border-width: 1px;
  border-style: solid;
  margin-top: 60px;
}

/* Footer social media icons */
.Footerimg {
  width: 20%;
}

/* ============================================
   PAGE-SPECIFIC: START PAGE (12start.html)
   ============================================ */

/* Main content layout on start page */
.content {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

/* Main news image - takes 4 columns */
#mainnews {
  grid-column: span 4;
}

/* News text container - takes 2 columns, next to main image */
.newstext {
  grid-column: span 2;
  padding: 20px;
  background-color: #f4ecec8a;
  border-color: darkgray;
  border-width: 1px;
  border-style: solid;
  border-radius: 20px;
}

#newstitle {
  font-size: 30px;
}

#newsfiller {
  font-size: 20px;
}

#newslink {
  font-size: 20px;
  color: black;
}

/* 3-column layout for room types (honeymoon, single, double) */
.content3plusforum {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-left: 10px;
  margin-right: 10px;
}

/* Heading styling for room type sections */
.content3plusforum h2 {
  text-align: center;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  background-color: #f4ecec8a;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  box-shadow: 10px 10px 20px #f4ecec40;
  margin-bottom: 200px;
  margin-top: 0px;
}

/* Paragraph styling for room type sections */
.content3plusforum p {
  text-align: center;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  background-color: #f4ecec8a;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: 10px 10px 20px #f4ecec40;
  padding-bottom: 20px;
  margin-bottom: 0px;
}

/* 2-column layout for bottom rooms section */
.Content4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-left: 10px;
  margin-right: 10px;
}

.Content4 h2 {
  text-align: center;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  background-color: #f4ecec8a;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  box-shadow: 10px 10px 20px #f4ecec40;
  margin-bottom: 200px;
  margin-top: 0px;
}

.Content4 p {
  text-align: center;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  background-color: #f4ecec8a;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: 10px 10px 20px #f4ecec40;
  padding-bottom: 20px;
  margin-bottom: 0px;
}

/* Background images for room showcase cards */
#img1 {
  background-image: url(../Slutupgift/12img/Honeymoon2.jpg);
  background-size: cover;
  background-position: center;
}

#img2 {
  background-image: url(../Slutupgift/12img/Dubbelroom2.jpg);
  background-size: cover;
  background-position: center;
}

#img3 {
  background-image: url(../Slutupgift/12img/Singleroom2.jpg);
  background-size: cover;
  background-position: center;
}

#img4 {
  background-image: url(../Slutupgift/12img/Familyroom2.jpg);
  background-size: cover;
  background-position: center;
}

#img5 {
  background-image: url(../Slutupgift/12img/OpenairSuite2.jpg);
  background-size: cover;
  background-position: center;
}

#img6 {
  background-image: url(../Slutupgift/12img/utsikthavet2.jpg);
  background-size: cover;
  background-position: center;
}

#img7 {
  background-image: url(../Slutupgift/12img/Resturang2.jpg);
  background-size: cover;
  background-position: center;
}

/* Decoration image - full width separator */
.decorationimg {
  width: 100%;
  height: auto;
}

/* Forum reviews section on start page */
.forumreviews {
  grid-template-columns: repeat(2, 1fr);
  display: grid;
  gap: 20px;
  margin-top: 40px;
  width: 100%;
}

.forumreviews .forum {
  margin-left: auto;
  margin-right: auto;
  grid-column: span 2;
}

/* Forum table styling */
table {
  border-style: solid;
  border-width: 1px;
  border-color: black;
  grid-column: span 2;
}

td {
  padding: 10px;
  margin: 10px;
}

.tableheader {
  background-color: #6392dc;
}

.tablesubheader {
  background-color: #7fa3dd;
}

.tabledark {
  background-color: gray;
}

.tablelight {
  background-color: lightgray;
}
/* ============================================
   PAGE-SPECIFIC: STORE PAGE (12store.html)
   ============================================ */

/* Dropdown menu button */
.dropbtn {
  background-color: #6392DC;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  text-align: center;
  grid-column: span 1;
}

/* Dropdown menu container */
.dropdown {
  position: relative;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  margin: 0 auto;
}

/* Dropdown menu items */
.dropdown-content {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  grid-column: span 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  grid-column: span 1;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3064b7;
}

/* 2x4 grid layout for rooms */
.toox4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 20px;
}

/* 3x2 grid layout for food/restaurant items */
.threex2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 20px;
}

/* 4x2 grid layout for activities */
.fourx2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 20px;
}

/* Room card container - full height with hover effect */
.room {
  border-style: solid;
  border-width: 1px;
  border-color: black;
  border-radius: 20px;
  text-align: center;
  height: 800px;
}

.room:hover {
  transform: scale(1.03);
}

/* Text overlay on room cards - semi-transparent background */
.roomtext {
  background-color: #f4ececc8;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  margin-top: 0px;
  padding-top: 0px;
}

/* Background images for room cards */
#room1 {
  background-image: url(../Slutupgift/12img/room1.jpg);
  background-size: cover;
  background-position: center;
}

#room2 {
  background-image: url(../Slutupgift/12img/room2.jpg);
  background-size: cover;
  background-position: center;
}

#room3 {
  background-image: url(../Slutupgift/12img/room3.jpg);
  background-size: cover;
  background-position: center;
}

#room4 {
  background-image: url(../Slutupgift/12img/room4.jpg);
  background-size: cover;
  background-position: center;
}

#room5 {
  background-image: url(../Slutupgift/12img/room5.jpg);
  background-size: cover;
  background-position: center;
}

#room6 {
  background-image: url(../Slutupgift/12img/room6.jpg);
  background-size: cover;
  background-position: center;
}

#room7 {
  background-image: url(../Slutupgift/12img/room7.jpg);
  background-size: cover;
  background-position: center;
}

#room8 {
  background-image: url(../Slutupgift/12img/room8.jpg);
  background-size: cover;
  background-position: center;
}

/* Background images for restaurant items */
#food1 {
  background-image: url(../Slutupgift/12img/food1.jpg);
  background-size: cover;
  background-position: center;
}

#food2 {
  background-image: url(../Slutupgift/12img/food2.jpg);
  background-size: cover;
  background-position: center;
}

#food3 {
  background-image: url(../Slutupgift/12img/food3.jpg);
  background-size: cover;
  background-position: center;
}

#food4 {
  background-image: url(../Slutupgift/12img/food4.jpg);
  background-size: cover;
  background-position: center;
}

#food5 {
  background-image: url(../Slutupgift/12img/food5.jpg);
  background-size: cover;
  background-position: center;
}

#food6 {
  background-image: url(../Slutupgift/12img/food6.jpg);
  background-size: cover;
  background-position: center;
}

/* Background images for activity items */
#activity1 {
  background-image: url(../Slutupgift/12img/activity1.jpg);
  background-size: cover;
  background-position: center;
}

#activity2 {
  background-image: url(../Slutupgift/12img/utsikthavet2.jpg);
  background-size: cover;
  background-position: center;
}

#activity3 {
  background-image: url(../Slutupgift/12img/activity3.jpg);
  background-size: cover;
  background-position: center;
}

#activity4 {
  background-image: url(../Slutupgift/12img/activity4.jpg);
  background-size: cover;
  background-position: center;
}

#activity5 {
  background-image: url(../Slutupgift/12img/activity5.jpg);
  background-size: cover;
  background-position: center;
}

#activity6 {
  background-image: url(../Slutupgift/12img/activity6.jpg);
  background-size: cover;
  background-position: center;
}

#activity7 {
  background-image: url(../Slutupgift/12img/activity7.jpg);
  background-size: cover;
  background-position: center;
}

#activity8 {
  background-image: url(../Slutupgift/12img/activity8.jpg);
  background-size: cover;
  background-position: center;
}

/* ============================================
   PAGE-SPECIFIC: FORUM PAGE (12forum.html)
   ============================================ */

/* Main forum content layout */
.forumcontent {
  grid-template-columns: repeat(6, 1fr);
  display: grid;
  gap: 20px;
  margin-right: 10px;
  margin-left: 10px;
}

/* Forum posts container - takes 4 columns */
.forumcontent .forum {
  grid-column: span 4;
}

/* Forum rules sidebar - takes 2 columns */
.rules {
  grid-column: span 2;
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f9f9f9cf;
  border: 1px solid #ddd;
  border-radius: 20px;
}

/* Forum rules text alignment */
.rules li, .rules h2, .rules p {
  text-align: center;
}

/* Forum header section */
.forumhead {
  text-align: center;
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f9f9f9cf;
  border: 1px solid #ddd;
  border-radius: 20px;
}

.forumhead table {
  margin: 0 auto;
}

/* Info section at top of forum */
.infoforum {
  background-color: #f9f9f998;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 20px;
}

/* Individual forum post container */
.post {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f9f9f9cf;
  border: 1px solid #ddd;
  border-radius: 20px;
}

.post h2, .post p {
  text-align: center;
}

/* Forum form styling */
.formforum {
  max-width: 600px;
  margin: 0 auto 20px;
  padding: 20px;
  background-color: #f9f9f9cf;
  border: 1px solid #ddd;
  border-radius: 20px;
  text-align: center;
  display: grid;
  gap: 15px;
  justify-items: center;
}

/* Post action images (comment, share, report) */
.postimg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.postimg img {
  height: 40px;
}


/* ============================================
   PAGE-SPECIFIC: BOOKING PAGE (12bokning.html)
   ============================================ */

/* Booking page header section */
.bookinghead {
  text-align: center;
  background-color: #f9f9f98e;
  border: 1px solid #ddd;
  border-radius: 20px;
  margin: 20px;
}

/* Main booking information container - 2 column layout */
.bookinginfo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  text-align: center;
  background-color: #f9f9f98e;
  border: 1px solid #ddd;
  border-radius: 20px;
  margin: 20px;
}

/* Individual booking info card */
.bookinginfo1 {
  background-color: #f9f9f943;
  border: 1px solid #ddd;
  border-radius: 20px;
}

/* Span 2 columns for wide elements */
.span2 {
  grid-column: span 2;
}