/*!
Theme Name: Sandee
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: sandee
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Sandee is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle !important;
}

iframe {
  height: clamp(370px, 50vw, 520px);
  display: block;
}

/* ==========================================================================
   Layout
   ========================================================================== */

/* Container Grid System */
.container {
  --gap: 16px;
  --full: minmax(var(--gap), 1fr);
  --wide: minmax(0, calc(var(--gap) * 4));
  --content: min(1200px, calc(100% - var(--gap) * 2));
  display: grid;
  grid-template-columns:
    [full-start] var(--full) [wide-start] var(--wide) [content-start] var(
      --content
    )
    [content-end] var(--wide) [wide-end] var(--full) [full-end];
}

.container > * {
  grid-column: content;
}

/* Site Main */
body:not(.home) .site-main {
  margin-block: var(--wp--preset--spacing--32);
}

@media screen and (min-width: 992px) {
  body:not(.home) .site-main {
    margin-block: var(--wp--preset--spacing--56);
  }
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */

/* Header */
.site-header {
  padding-block: 16px;
}

.custom-logo {
  max-width: 88px;
    height: auto;
}

/* Main Navigation */
.site-main-navigation {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  justify-content: center;
  align-items: center;
  gap: var(--wp--preset--spacing--32);
}

.menu {
  display: none;
  list-style: none;
  margin: 0;
  padding-left: 0;
  font-weight: 600;
}

.current-menu-item > a {
  color: var(--wp--preset--color--primary-800);
}

.site-header-desktop {
  display: none;
}

.site-header-mobile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-inline: var(--wp--preset--spacing--16);
  position: relative;
}

.site-header-mobile .main-navigation .mobile-menu-wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 0;
  background-color: var(--wp--preset--color--white);
  border-radius: 0;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  overflow: hidden;
  opacity: 0;
  -webkit-overflow-scrolling: touch;
}

.site-header-mobile .main-navigation.toggled .mobile-menu-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--24);
  max-height: calc(100vh - 100px);
  padding-block: var(--wp--preset--spacing--32);
  padding-inline: var(--wp--preset--spacing--16);
  opacity: 1;
  overflow-y: auto;
  overflow-x: hidden;
  text-align: center;
}

.site-header-mobile .main-navigation .menu {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--24);
  padding: 0;
  box-shadow: none;
  position: static;
  background: transparent;
}

.site-header-mobile .menu li {
  list-style: none;
  line-height: var(--wp--preset--spacing--24);
}

.site-header-mobile .menu a {
  text-decoration: none;
  color: var(--wp--preset--color--primary-500);
  font-weight: 600;
}

.site-header-mobile .menu a:hover {
  background-color: var(--wp--preset--color--primary-100);
}

.site-header-mobile .menu a:active,
.site-header-mobile .current-menu-item > a {
  color: var(--wp--preset--color--primary-800);
}

/* Menu Toggle Button */
.menu-toggle {
  padding: 0;
  font-size: 36px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: transform 0.3s ease, opacity 0.2s ease, font-size 0.1s ease;
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: var(--wp--preset--color--primary-500);
  font-weight: 400;
}

.menu-toggle:active {
  transform: scale(0.9);
}

.main-navigation.toggled .menu-toggle {
  transform: rotate(90deg);
  font-size: 24px;
}

body.mobile-menu-open {
  overflow: hidden;
  height: 100vh;
  touch-action: none;
}

body.mobile-menu-open.admin-bar {
  height: calc(100vh - 46px);
}

@media screen and (min-width: 768px) {
  body.mobile-menu-open.admin-bar {
    height: calc(100vh - 32px);
  }
}

.mobile-language-switcher {
  justify-self: center;
}

.mobile-language-switcher .trp-shortcode-switcher {
  padding: 0;
}

/* Mobile Booking Button */
.mobile-booking-btn .booking-btn {
  display: block;
  width: 100%;
  padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--24);
  background-color: var(--wp--preset--color--primary-500);
  color: var(--wp--preset--color--white);
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
}

.mobile-booking-btn .booking-btn:hover {
  background-color: var(--wp--preset--color--primary-600);
}

.mobile-booking-btn .booking-btn:active {
  background-color: var(--wp--preset--color--primary-600);
}

@media screen and (min-width: 1200px) {
  .custom-logo {
    max-width: 124px;
  }

  .site-main-navigation {
    gap: var(--wp--preset--spacing--24);
  }

  .menu-toggle {
    display: none;
  }

  .menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--wp--preset--spacing--16);
  }

  .main-navigation {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--16);
  }

  .main-navigation.left-menu {
    justify-content: flex-end;
  }

  .main-navigation.right-menu {
    justify-content: flex-start;
  }

  .trp-shortcode-switcher {
    display: block !important;
  }

  .site-header-desktop {
    display: block;
  }

  .site-header-mobile {
    display: none;
  }
}

@media screen and (min-width: 1200px) {
  .site-main-navigation {
    gap: var(--wp--preset--spacing--32);
  }

  .menu {
    gap: var(--wp--preset--spacing--32);
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background-color: var(--wp--preset--color--primary-400);
  padding-block-start: var(--wp--preset--spacing--32);
  padding-block-end: var(--wp--preset--spacing--16);
  font-size: var(--wp--preset--font-size--md);
  line-height: var(--wp--custom--line-height--base);
}

.site-footer .widget_block {
  justify-self: center;
  text-align: center;
}

.site-footer .wp-block-social-links {
  justify-content: center;
}

.site-info {
  display: flex;
  flex-direction: column-reverse;
  border-bottom: 1px solid var(--wp--preset--color--white);
  padding-block-end: var(--wp--preset--spacing--24);
}

.site-footer .widget_nav_menu {
  display: none;
}

.site-footer p {
  color: var(--wp--preset--color--white);
}

.site-footer .menu {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--8);
}

.site-footer .menu a {
  font-weight: 400;
  color: var(--wp--preset--color--white);
  line-height: var(--wp--preset--spacing--32);
}

@media screen and (min-width: 768px) {
  .site-footer .widget_block {
    justify-self: flex-start;
    text-align: left;
  }

  .site-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 140px;
    padding-block-end: var(--wp--preset--spacing--32);
  }

  .site-footer .widget_nav_menu {
    display: block;
  }

  .site-footer .wp-block-social-links {
    justify-content: flex-start;
  }
}

/* Breadcrumb */
.breadcrumb {
  font-size: var(--wp--preset--font-size--lg);
  color: var(--wp--preset--color--light-gray);
  margin-block-end: var(--wp--preset--spacing--8);
}

.breadcrumb a {
  color: var(--wp--preset--color--light-gray);
}

.breadcrumb .current-item {
  color: var(--wp--preset--color--primary-800);
  line-height: var(--wp--custom--line-height--lg);
}

/* Banner */
.banner-th-font {
  font-size: clamp(2.5rem, 1.875rem + 2vw, 3rem);
  line-height: normal;
}

.banner-en-font {
  font-size: clamp(1.5rem, -0.375rem + 6vw, 3rem);
  line-height: normal;
  font-weight: 600;
}

.main-banner {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-banner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: 1;
}

.main-content {
  background-size: cover;
  background-repeat: no-repeat;
}

/* Pagination */
.page-numbers {
  color: var(--wp--preset--color--primary-500);
  border: 1px solid var(--wp--preset--color--primary-500);
  border-radius: var(--wp--preset--spacing--8);
  padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--24);
  box-shadow: -2px 2px 6px 0px #3a3a3a40;
  max-width: 56px;
}

.page-numbers.current {
  color: var(--wp--preset--color--white);
  background-color: var(--wp--preset--color--primary-800);
  border: 1px solid var(--wp--preset--color--primary-800);
}

/* 404 Error Page */
.error-404 {
  min-height: 500px;
  max-height: 600px;
  height: minmax(min-content, max-content);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.error-404 .page-title {
  font-size: clamp(11.25rem, 9.6875rem + 5vw, 12.5rem);
  line-height: normal;
  font-weight: 600;
  margin-block: 0;
}

.error-404 .page-description {
  font-weight: 600;
  margin-block: 0;
}

/* Post Thumbnail */
.single .post-thumbnail img {
  max-height: 560px;
  object-fit: cover;
}

.post-thumbnail img {
  width: 100%;
  object-fit: cover;
}

/* Post Header */
.post-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-start: var(--wp--preset--spacing--32);
  margin-block-end: var(--wp--preset--spacing--16);
}

.post-title {
  font-size: var(--wp--preset--font-size--2-xl);
  line-height: var(--wp--custom--line-height--lg);
  color: var(--wp--preset--color--primary-500);
  margin-block-start: 0;
}

/* Post Categories */
.post-categories {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  gap: var(--wp--preset--spacing--8);
}

/* Post Meta */
.post-meta {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--8);
  color: var(--wp--preset--color--support-600);
}

.post-meta-item {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--8);
  font-size: var(--wp--preset--font-size--md);
  color: var(--wp--preset--color--support-600);
}

/* Post Share */
.post-share {
  position: relative;
  display: flex;
  gap: var(--wp--preset--spacing--4);
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.share-btn:hover {
  transform: scale(1.1);
  opacity: 0.8;
}

.share-btn:active {
  transform: scale(0.95);
}

.link-copied-notification {
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 9999;
  pointer-events: none;
  display: none;
  opacity: 0;
}

@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Article Query Block */
.block-query-article {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--24);
}

.block-query-article-content {
  padding: var(--wp--preset--spacing--16);
}

.block-query-article .block-query-article-title {
  font-size: var(--wp--preset--font-size--lg);
  line-height: var(--wp--custom--line-height--lg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-block-start: var(--wp--preset--spacing--8);
  margin-block-end: 0;
}

.block-query-article .block-query-article-image {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  height: auto;
}

@media screen and (min-width: 768px) {
  .block-query-article {
    grid-template-columns: repeat(3, 1fr);
  }

  .post-title {
    line-height: var(--wp--custom--line-height--xl);
    color: var(--wp--preset--color--primary-800);
  }

  .post-meta {
    flex-direction: row;
  }

  .post-share {
    gap: var(--wp--preset--spacing--16);
  }
}

/* ==========================================================================
   Testimonials Section
   ========================================================================== */
.testimonials-list {
  grid-column-end: content;
}

.testimonial-item {
  background-color: var(--wp--preset--color--secondary-100);
  padding: var(--wp--preset--spacing--24);
  box-shadow: 0px 16px 24px 0px rgba(146, 146, 146, 0.25);
  height: 100%;
}

.testimonial-content {
  color: var(--wp--preset--color--primary-500);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 600;
  line-height: 32px;
}

.testimonial-title {
  color: var(--wp--preset--color--support-600);
  margin-block-start: var(--wp--preset--spacing--16);
  margin-block-end: 0;
}

.testimonials-section .splide__slide {
  width: 100%;
}

.testimonials-section p {
  margin-block-start: 0;
  margin-block-end: var(--wp--preset--spacing--8);
}

.testimonials-pagination-wrapper {
  margin-block-start: var(--wp--preset--spacing--32);
  display: flex;
  justify-content: center;
  align-items: center;
}

.testimonials-custom-pagination {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

.testimonial-slider-wrap {
  width: 100vw;
  position: relative;
  margin-left: calc(-50vw + 50%);
}

.testimonial-slider-wrap .splide__slide > div {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 2rem;
}

@media screen and (min-width: 768px) {
  .testimonials-list {
    grid-column-start: content;
    grid-column-end: full;
  }

  .testimonials-section .splide__slide {
    width: 520px;
  }
}

/* ==========================================================================
   Splide Slider & Galleries
   ========================================================================== */

/* Splide Pagination */
.splide__pagination {
  bottom: -32px;
}

.splide__pagination__page.is-active {
  background: var(--wp--preset--color--primary-800);
}

.splide__pagination__page {
  background: var(--wp--preset--color--white);
}

/* Splide Gallery */
.splide-gallery {
  padding-block: var(--wp--preset--spacing--32);
}

.splide-gallery .wp-block-image {
  margin-block-end: 0;
}

.splide-gallery .splide__slide .wp-block-image {
  aspect-ratio: 274 / 256;
  overflow: hidden;
}

.splide-gallery .splide__slide .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media screen and (min-width: 768px) {
  .splide-gallery {
    padding-block: 0;
  }

  .splide-gallery .splide__slide {
    aspect-ratio: 385 / 307;
  }
}

/* Gallery Block */
.wp-block-gallery img {
  aspect-ratio: 1.27 / 1;
  object-fit: cover;
  width: 100%;
  height: auto;
}

figure.wp-block-gallery.has-nested-images {
  gap: var(--wp--preset--spacing--16);
}

/* ==========================================================================
   WordPress Block Editor Styles
   ========================================================================== */

/* Buttons */
.wp-block-buttons {
  margin-block-start: var(--wp--preset--spacing--32);
}

.is-style-outline-large .wp-block-button__link:hover {
  color: var(--wp--preset--color--primary-500);
  background-color: var(--wp--preset--color--primary-800);
  border-color: var(--wp--preset--color--primary-800);
  box-shadow: -2px 2px 6px 0px rgba(58, 58, 58, 0.25);
}

/* Groups */
.wp-block-group.alignwide {
  padding-inline: 16px;
}

.wp-block-group.has-background {
  padding-block: var(--wp--preset--spacing--56);
  padding-inline: 0;
}

/* Quote & Cover */
.wp-block-quote br,
.wp-block-cover__inner-container br {
  display: none;
}

@media screen and (min-width: 768px) {
  .wp-block-quote br,
  .wp-block-cover__inner-container br {
    display: block;
  }
}

/* ==========================================================================
   Menus & Contact Info
   ========================================================================== */

/* Menu List */
.menu-list .wp-block-group-is-layout-grid {
  grid-template-columns: 1fr;
  grid-template-areas:
    "right"
    "left";
}

.menu-list .menu-left {
  grid-area: left;
}

.menu-list .menu-right {
  grid-area: right;
}

@media screen and (min-width: 768px) {
  .menu-list .wp-block-group-is-layout-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "left right";
  }
}

/* Contact Info */
.contact-info-1 p {
  margin-block-start: 0;
}

@media screen and (min-width: 768px) {
  .contact-info-1 {
    display: flex;
    gap: var(--wp--preset--spacing--16);
  }
}

/* ==========================================================================
   Floating Menu
   ========================================================================== */

/* Mobile Floating Menu */
.mobile-social-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--wp--preset--spacing--32);
  padding-block: var(--wp--preset--spacing--16);
}

.mobile-social-menu-item {
  background-color: var(--wp--preset--color--primary-500);
  padding: var(--wp--preset--spacing--16);
  border-radius: 50%;
  line-height: var(--wp--custom--line-height--base);
}

.mobile-social-menu-item .floating-menu-item-icon {
  filter: brightness(0) invert(1);
}

/* Desktop Floating Menu */
.floating-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 1000;
  padding: var(--wp--preset--spacing--8);
  border-radius: 8px 8px 0 0;
  background: var(--wp--preset--color--white);
  width: 100%;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.floating-menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  text-decoration: none;
  overflow: hidden;
  padding-inline: var(--wp--preset--spacing--16);
  border-right: 1px solid var(--wp--preset--color--primary-500);
}

.floating-menu-item:first-child {
  padding-inline-start: 0;
}

.floating-menu-item:last-child {
  padding-inline-end: 0;
  padding-block-end: 0;
  border-bottom: none;
  border-right: none;
}

.floating-menu-item-icon {
  width: 24px;
  height: 24px;
  margin: 0;
}

.floating-menu-item-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--8);
  background-color: var(--wp--preset--color--primary-500);
  padding: var(--wp--preset--spacing--8);
  border-radius: var(--wp--preset--spacing--8);
  justify-items: center;
}

.floating-menu-text {
  font-size: 14px;
  font-weight: 500;
  line-height: var(--wp--custom--line-height--base);
  color: var(--wp--preset--color--white);
  white-space: nowrap;
}

.floating-menu.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
}

@media screen and (min-width: 992px) {
  .floating-menu {
    display: block;
    position: fixed;
    bottom: 40%;
    right: 0;
    z-index: 1000;
    padding: var(--wp--preset--spacing--8);
    border-radius: 8px 0 0 8px;
    background: var(--Support-White, #fff);
    box-shadow: 0 16px 24px 0 rgba(74, 74, 74, 0.25);
    width: auto;
  }

  .floating-menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    text-decoration: none;
    overflow: hidden;
    padding-inline: 0px;
    padding-block: var(--wp--preset--spacing--16);
    border-right: none;
    border-bottom: 1px solid var(--wp--preset--color--primary-500);
  }

  .floating-menu-item:first-child {
    padding-block-start: var(--wp--preset--spacing--8);
  }
  
  .floating-menu-item-content {
    flex-direction: column;
    gap: 0;
  }
  
  .floating-menu-text {
    font-size: 14px;
    font-weight: 500;
    line-height: var(--wp--custom--line-height--base);
    color: var(--wp--preset--color--white);
    white-space: nowrap;
  }  
}

.mobile-menu-open .floating-menu {
  display: none;
}

/* ==========================================================================
   Utilities
   ========================================================================== */

/* Icons */
.icon {
  width: 24px;
  height: 24px;
}

.icon-text {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--8);
}

.icon-text p {
  margin-block: 0;
}

.icon-text img {
  width: 24px;
  margin: 0;
  display: block;
}

/* Language Switcher */
.trp-language-item-name {
  font-family: var(--wp--preset--font-family--krub) !important;
  font-weight: 600 !important;
}

.contact-us {
  margin: 0 auto;
  border-radius: 8px;
  padding-block-start: var(--wp--preset--spacing--56);
}