/* =========================================================
   SIVUSTON PÄÄVÄRIT
   ========================================================= */

:root {
  --color-primary:   #193A53; /* tumma sininen / pääväri */
  --color-secondary: #547792; /* keskitumma sininen */
  --color-accent:    #1D9AC8; /* vaalea sininen */
  --color-light:     #C0A472; /* vaalea hiekan sävy */
  --color-yellow:    #E6B534; /* Keltainen */
  --color-yellowish: #C0A767; /* Keltainen */
}

/* =========================================================
   YLEISET SÄÄDÖT
   ========================================================= */

body {
  color: var(--color-primary);
  overflow-x: hidden;
}

/*Lisää tilaa buttonin ja tekstin väliin*/
.hero .btn-primary {
  margin-top: 1.5rem; /* säädä arvoa tarpeen mukaan */
}

p, a, li, span, h2, h3 {
  font-family: 'Open Sans', sans-serif;
}

card{
	min-width: 250px;
}

/* =========================================================
   TAUSTAT + TEKSTIVÄRIT määiteltynä
   ========================================================= */

.bg-dark-blue {
  background: linear-gradient(135deg, #213448, #415D73);
  color: #ffffff;
}

.bg-deeb-blue {
  background-color: var(--color-primary);
  color: #ffffff;
}

.bg-mid-blue {
  background-color: var(--color-secondary);
  color: #ffffff;
}

.bg-light-blue {
  background-color: var(--color-accent);
  color: var(--color-primary);
}

.bg-light {
  background-color: var(--color-light);
  color: var(--color-primary);
}

/* =========================
   Fonttien määrittelyä (DESKTOP JA MOBIIILI)
   ========================= */

h2 {
  font-size: clamp(1.4rem, 3vw, 1.7rem);
  font-weight: 600;
}

.hero p {
  font-size: 1.2rem;
  color: #fff;
  text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
  text-align: center;
}


/* =========================================================
   HERO-OSIO (DESKTOP JA MOBIIILI)
   ========================================================= */

.hero {
  position: relative;      /* tarvitaan absolute-kuvalle ja overlaylle */
  height: 100vh;
  min-height: 600px;
  overflow: hidden;        /* overlay pysyy rajojen sisällä */
  display: flex;
  align-items: center;     /* keskittää sisältö pystysuunnassa */
  justify-content: center; /* keskittää sisältö vaakasuunnassa */
  color: #fff;
  z-index: 0;
}

/* Hero-kuva */
.hero-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2; /* taustalle */
}

/* Gradient overlay */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,0.5), rgba(5,10,25,0.6));
  z-index: -1; /* kuvan ja sisällön välissä */
}

/* Hero-sisältö */
.hero-content {
  position: relative; /* pysyy overlayn päällä */
  z-index: 1;
  text-align: center; /* keskittää tekstit vaakasuunnassa */
  display: flex;
  flex-direction: column;
  align-items: center; /* varmistaa napit ja tekstit keskelle */
  gap: 1rem; /* pieni tila elementtien väliin */
  padding-top: 3rem;
}


.hero-title-main {
  display: block;
  font-family: 'WindSong', cursive; /* kaunokirjoitus */
  font-size: clamp(3.1rem, 5vw, 5rem);
  font-weight: 400;
}

.hero-title-sub {
  display: block;
  font-size: clamp(1rem, 1.8vw, 2rem);
  letter-spacing: 0.40em;
  font-weight: 300;
  line-height: 1.6;
  margin-top: clamp(0.5rem, 1.2vw, 1.5rem);
  margin-bottom: clamp(1.5rem, 3vw, 3rem);
}

.hero-title-sub::before {
  content: "";
  display: block;
  width: clamp(150px, 15vw, 300px);
  height: clamp(1px, 0.1vw, 1.5px);
  background: currentColor;
  margin: clamp(1.2rem, 2vw, 2rem) auto;
}

/* =========================================================
   BUTTONIEN DESING (DESKTOP JA MOBIIILI)
   ========================================================= */
.btn-primary {
  display: inline-block;
  padding: 0.7rem 1.2rem;        /* em/rem-yksiköitä voi käyttää myös responsiivisesti */
  font-size: 1.0625rem;          /* ~17px */
  letter-spacing: 0.1em;
  color: #d4af37;
  background-color: transparent;
  border: 2px solid #d4af37; 
  /* GPU-optimoidut transitionit */
  transition: transform 0.2s ease, background-color 0.3s ease, color 0.3s ease;
}

.btn-primary:hover {
  transform: scale(1.02);        /* maltillinen hover-zoom, ei aiheuta CLS:ää */
  background-color: transparent;  /* ei muutu, joten transition kevyempi */
  border-color: #d4af37;
}

.btn-primary:active {
  transform: scale(0.98);         /* pieni “painallus”-efekti */
  background-color: #d4af37 !important;            
  border-color: #d4af37 !important;
}

/* Valinnainen focus-efekti saavutettavuuteen */
.btn-primary:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(212,175,55,0.4); /* hienovarainen korostus */
}

.btn-secondary {
  display: inline-block;
  padding: 0.7rem 1.2rem;        /* em/rem-yksiköitä voi käyttää myös responsiivisesti */
  font-size: 1.0625rem;          /* ~17px */
  letter-spacing: 0.1em;
  color: #0C3B55;
  background-color: transparent;
  border: 2px solid #d4af37; 
  /* GPU-optimoidut transitionit */
  transition: transform 0.2s ease, background-color 0.3s ease, color 0.3s ease;
}

.btn-secondary:hover {
  transform: scale(1.02);        /* maltillinen hover-zoom, ei aiheuta CLS:ää */
  background-color: #d4af37;  /* ei muutu, joten transition kevyempi */
  border-color: #d4af37;
}

.btn-secondary:active {
  transform: scale(0.98);         /* pieni “painallus”-efekti */
  background-color: #d4af37 !important;            
  border-color: #d4af37 !important;
}

/* Valinnainen focus-efekti saavutettavuuteen */
.btn-secondary:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(212,175,55,0.4); /* hienovarainen korostus */
}

.text-link-gold {
  color: #d6b25e;              /* sama kultainen sävy kuin logossa */
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
}

.text-link-gold:hover {
  color: #f0d98a;
  text-decoration: none;
}

.text-link-blue {
  color: #009DF4;              /* sama kultainen sävy kuin logossa */
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
}

.text-link-blue:hover {
  color: #009DF4;
  text-decoration: none;
}

/* Tarjousteksti */
.hero-offer {
  max-width: clamp(320px, 70vw, 600px);
  text-align: center;
}

.hero-offer .offer-main {
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  font-weight: 400;
  line-height: 1.6;
}
/* =========================================================
   NAVIGAATIO HERO-KUVAN PÄÄLLÄ (alkutila: läpinäkyvä) (DESKTOP JA MOBIIILI)
   ========================================================= */

/* Alkutila: läpinäkyvä – pakotetaan myös Bootstrapin taustamuuttuja */
nav.navbar.fixed-top.navbar-transparent {
  background-color: transparent !important;
}

/* Tekstivärit alussa (hero päällä) */
nav.navbar.fixed-top.navbar-transparent .navbar-brand,
nav.navbar.fixed-top.navbar-transparent .nav-link {
  color: #ffffff !important;
}

/* Hover-efekti alussa */
nav.navbar.fixed-top.navbar-transparent .nav-link:hover,
nav.navbar.fixed-top.navbar-transparent .nav-link:focus {
  color: var(--color-yellow, #d4af37) !important;
}

/* Togglerin tyyli (FA-ikoni valkoiseksi) */
nav.navbar.fixed-top .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.5);
}
nav.navbar.fixed-top .navbar-toggler i {
  color: #ffffff; /* Font Awesome -ikonin väri */
}

/* Estä sisäkontin tausta vuotamasta */
nav.navbar > .container,
nav.navbar > .container-fluid {
  background: transparent !important;
}

nav.navbar {
  z-index: 1000;     /* nav pysyy päällä */
}

/*Navigaation varaa painike*/
.btn-yellow {
  color: #FFFFFF; /* tekstin väri */
  border-color: #FFFFFF; /* reunus sama kuin tausta */
}

.btn-yellow:hover {
  background-color: #C9A526; /* hieman tummempi hover-efekti */
  color: #FFFFFF;
}

/* =========================================================
   NAVIGAATIO SCROLLISSA (kiinteä tumma tausta) (DESKTOP JA MOBIIILI)
   ========================================================= */

nav.navbar.fixed-top.scrolled {
  background-color: rgba(33,58,81,1.00) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background-color 0.25s ease, backdrop-filter 0.25s ease;
}

/* Scroll-tilassa linkkien sävy (valkoinen teksti + kultainen hover) */
nav.navbar.fixed-top.scrolled .nav-link {
  color: #ffffff !important;
}
nav.navbar.fixed-top.scrolled .nav-link:hover {
  color: var(--color-yellow, #d4af37) !important;
}

/* =========================================================
   NAGAATON DESKTOP-LAYOUT: pidä Bootstrapin oletusflow, pieni siistiminen
   ========================================================= */
@media (min-width: 991px) {
  /* Älä keskitytä koko navia – säilytä Bootstrapin oletus */
  .navbar {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* Keskitys toteutetaan linkkilistassa, ei navissa */
  .navbar-nav {
    margin: 0 auto;            /* linkit keskelle rivillä */
    text-align: center;
    min-height: 64px;
    display: flex;
    align-items: center;
  }

  .navbar-brand {
    display: flex;
    align-items: center;
  }

  /* Desktop logon koko */
  .navbar-brand img {
    height: 40px;
  }

  /* Linkkien typografia */
  .navbar-nav .nav-link {
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 0.5rem 1rem;
    color: #fff !important;
    transition: color 0.15s ease;
  }

  .navbar-nav .nav-link:hover {
    color: var(--color-yellow, #d4af37) !important;
  }
	
 /* Desktop hover-parannus ja togglerin piilotus LG+:ssa */
  .navbar .navbar-toggler { display: none; } /* toggler vain mobiilissa */
  .navbar-collapse { background: transparent !important; box-shadow: none !important; }
}


/* =========================================================
 HUONEKORTTIEN ASETTELUT
   ========================================================= */

/* Kortit */
.card {
  border: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}

.card-img-top {
  object-fit: cover;
}

.huoneet-section .card-body h3 {
  color: #d4af37; /* korttien otsikot keltaiseksi */
  font-size: 1.2rem;
}

/* Lue lisää -painikkeet hotellihuoneissa */
.huoneet-section .btn-outline-primary {
  border: 1px solid #d4af37;       /* kullanvärinen reuna */
  color: #d4af37;                   /* tekstin väri */
  background-color: transparent;    /* läpinäkyvä tausta */
  padding: 0.5rem 1rem;             /* hieman tiiviimpi padding */
  font-weight: bold;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
  display: inline-block;
  border-radius: 0.25rem;
}

.huoneet-section .btn-outline-primary:hover {
  background-color: #d4af37;  /* kullanvärinen tausta hoverissä */
  color: #213448;              /* tummansininen teksti hoverissä */
  transform: scale(1.05);      /* kevyt zoom-efekti */
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* pieni varjo */
}

.huoneet-section .btn-outline-primary:focus {
  outline: none;               /* poistaa ruman sinisen outline-efektin */
  box-shadow: 0 0 0 0.2rem rgba(212,175,55,0.4); /* hienovarainen hover-focus efekti */
}

.huoneet-section .card {
  border: 1px solid transparent; /* ei jyrkkää reunan väriä */
  border-radius: 0.5rem;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.5); /* kultainen, hieman läpinäkyvä reuna */
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.huoneet-section .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 0 0 2px rgba(212,175,55,0.7);
}

/* =========================
   KÄYNTIKORTTIN JA YHTEYSTIETOJEN ASETTELU
   ========================= */

/* Sisennys yhteystietokortissa */
  .contact-card .contact-content {
    padding-left: 2rem;
  }

 /*Ikonien väri*/
.fa-solid {
  color: var(--color-yellowish);
  padding-bottom: 0.8rem;
}

.contact-content {
  margin-top: 1.3rem;
}

.contact-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0.75rem;
  align-items: start;
  margin-bottom: 0.6rem;
}

.contact-row i {
  margin-top: 0.2rem;
}

/* LINKIT */

.contact-row a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
}

.contact-row a:hover {
  text-decoration: underline;
   color: var(--color-light);
  
}

/* AUKIOLOT */

.contact-hours {
  border-top: 1px solid rgba(255,255,255,0.15);
}

.hours-text {
  margin-left: 2.75rem;
  color: #e0e0e0;
  font-size: 0.95rem;
}

/* Palvelut-osio: kortit */
.service-card {
  background-color: #ffffff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

/* Ikonien väri ja koko */
.service-card i {
  font-size: 2rem;
  color: var(--color-accent); /* voit vaihtaa hotellin brändiväriin */
}

/* Tekstin tyyli */
.service-card p {
  font-size: 0.95rem;
  color: #555555;
}


/* =========================================================
   KARTAN ASETTELU YHTEYSTIETOIHIN
   ========================================================= */

/* Vasemman sarakkeen flexbox */
.left-content {
  display: flex;
  flex-direction: column;
}

/* Kartta täyttää jäljellä olevan tilan */
.left-content .map-container {
  flex-grow: 1;
  min-height: 200px; /* varmuus mobiilissa */
}

.left-content .map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* =========================
   Palvelut osion tyylit
   ========================= */

.service-card {
  position: relative;
  height: 380px;                 /* KAIKKI KORTIT SAMAN KOKOISIA */
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.15);
}

/* Kuva täyttää kortin */
.service-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Tumma overlay + vaalea teksti */
.service-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.65),
    rgba(0,0,0,0.25)
  );
  color: #ffffff;
  padding: 1.75rem;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Otsikko */
.service-overlay h3 {
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-yellow);
}

/* Teksti – vaaleampi */
.service-overlay p {
  font-size: 1rem;
  color: rgba(255,255,255,0.9);
}

/* Hover-efekti */
.service-card:hover {
  transform: translateY(-4px);
  transition: transform 0.2s ease;
}

/* =========================================================
   FAQ-ACCORDION – TYYLITTELY
   ========================================================= */

.faq-section {
  background-color: #f8f9fa;
}

/* Accordion-kortti */
.faq-accordion .accordion-item {
  border: none;
  border-radius: 0.75rem;
  margin-bottom: 1rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  overflow: hidden;
}

/* Kysymys */
.faq-accordion .accordion-button {
  background-color: #ffffff;
  font-weight: 600;
  font-size: 1.05rem;
  padding: 1.25rem 1.5rem;
  color: #213448;
}

/* Hover-efekti */
.faq-accordion .accordion-button:hover {
  background-color: #f1f4f7;
}

/* Avattu tila */
.faq-accordion .accordion-button:not(.collapsed) {
  background-color: #213448;
  color: #fffff;
  box-shadow: none;
}

/* Nuolen väri */
.faq-accordion .accordion-button::after {
  filter: brightness(0) invert(1);
}

/* Vastausteksti */
.faq-accordion .accordion-body {
  background-color: #ffffff;
  color: #444;
  font-size: 0.95rem;
  line-height: 1.6;
  padding: 1.25rem 1.5rem;
}

/* =========================================================
   MOBIILISÄÄDÖT + MODERNI HAMPURILAISVALIKKO (puolikas overlay)
   ========================================================= */
@media (max-width: 991px) {
	
	.hero {
  height: 90vh;
}
	
.navbar .fa-phone {
  font-size: 1.4rem; /* haluamasi koko */
  padding: 0.1rem;
  color: #EBC55C;
}
	
	/* Nykyiset mobiilisäädöt */
  #mainNav .d-flex {
    justify-content: flex-end !important;
    width: 100%;
    margin-top: 0.5rem;
  }

  #mainNav .navbar-nav {
    margin: 0;
    text-align: right;
    width: 100%;
  }

  .navbar-brand img {
    height: 40px;
  }

  #mainNav .navbar-nav .nav-item {
    width: 100%;
    text-align: right;
  }

  #faqCarousel .carousel-item .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  #yhteystiedot .contact-card-wrapper,
  #yhteystiedot .map-container {
    margin-left: 0 !important;
    padding-left: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }

  .contact-card-wrapper {
    margin-top: 1rem;
  }

	/* NAV alkutila: läpinäkyvä – pakota myös Bootstrapin muuttuja */
	nav.navbar.fixed-top.navbar-transparent {
	  background-color: transparent !important;
	}
	nav.navbar > .container,
	nav.navbar > .container-fluid { background: transparent !important; }

	/* Scrollattuna tumma tausta (brändisävy) */
	nav.navbar.fixed-top.scrolled {
	  background-color: rgba(28,52,74,1.00) !important;
	  backdrop-filter: blur(4px);
	  -webkit-backdrop-filter: blur(4px);
	  transition: background-color .25s ease, backdrop-filter .25s ease;
	}

	/* OFFCANVAS drawer: leveys, tausta, tyylit */
	.offcanvas-main {
	  width: min(80vw, 360px);                     /* säädä: esim. 70vw tai 400px */
	  background: rgba(8, 20, 35, 0.95) !important;
	  backdrop-filter: blur(6px);
	  -webkit-backdrop-filter: blur(6px);
	  border-left: 1px solid rgba(255,255,255,0.08);
	}
	.offcanvas-main .nav-link {
	  color: #fff !important;
	  font-weight: 500;
	  font-size: 1.125rem;
	  padding: .45rem 0;
	}
	.offcanvas-main .nav-link:hover { color: #d4af37 !important; }
	.offcanvas-backdrop.show {
	  background-color: rgba(0,0,0,.35);
	  backdrop-filter: blur(2px);
	}

	/* Togglerin FA-ikoni valkoiseksi ja koon kasvattamien */
	nav.navbar.fixed-top .navbar-toggler i {
		color: #E2BD57;
		font-size: 1.8rem; 
		}

  .navbar-toggler {
    padding: .35rem .45rem;
  }

	.navbar-toggler:focus,
	.navbar-toggler:active {
	  outline: none !important;
	  box-shadow: none !important;
	}

}

/* =========================================================
   HOTELLIHUONEISEN ESITTELYJEN ASETTELUT (Economy, Standard, Superior (Ei Villa Wiik))
   ========================================================= */

	.badge-quiet {
		  background: #eef3fc;
		  color: #1f3d8a;
		  border: 1px solid #d9e3fb;
		}
    .nav-pills .nav-link {
      padding: .6rem 1rem;
      border-radius: 999px;
      font-weight: 600;
	  color: var(--color-yellowish);
    }
    .nav-pills .nav-link.active {
      background: var(--color-yellowish);
    }
    .room-card {
      border: 1px solid #d4af37;
      border-radius: 16px;
      overflow: hidden;
      
    }
    .carousel-item img {
      object-fit: cover;
      width: 100%;
      height: 420px; /* yhtenäinen korkeus */
    }
    
    .thumbs img {
      height: 76px;
      width: 100%;
      object-fit: cover;
      border-radius: 8px;
      border: 2px solid transparent;
      cursor: pointer;
      transition: border-color .2s ease;
    }
    .thumbs img.active-thumb {
      border-color: var(--brand);
    }
    .feature-grid .icon {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      font-size: 1.1rem;
      margin-right: .75rem;
    }
	  
    .feature-item {
      display: flex;
      padding: .5rem 0;
    }

    .note {
      font-size: .95rem;
      color: var(--color-light);
    }

/* =========================================================
   FOOTER
   ========================================================= */

footer {
  font-size: 0.95rem;
}

/* Facebook-nappi footerissa */
.facebook-btn {
  background-color: #3b5998; /* Facebookin sininen */
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.facebook-btn:hover {
  background-color: #2d4373;
  transform: translateY(-2px);
  text-decoration: none;
}

.facebook-btn i {
  font-size: 1.2rem;
}