/*
Theme Name: Starfruit
Theme URI: https://starfruit.com
Author: Starfruit Team
Author URI: https://starfruit.com
Description: A modern corporate WordPress theme with Turbo.js for SPA-like transitions, Alpine.js for interactive UI, and DaisyUI for styling.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: starfruit
Tags: corporate, business, turbo, alpine, daisyui, responsive
*/
/* 
This file is mainly for WordPress theme identification.
Actual styles will be loaded through the build process.
*/
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap");

:root {
  --color-base-100         : #eef4fa;
  --color-base-200         : oklch(93.982% 0.007 61.449);
  --color-base-300         : oklch(91.586% 0.006 53.44);
  --color-base-content     : oklch(23.574% 0.066 313.189);
  --color-primary          : #f68920;
  --color-primary-content  : #fff;
  --color-secondary        : #164678;
  --color-secondary-content: #fff;
  --color-accent           : oklch(66% 0.295 322.15);
  --color-accent-content   : oklch(47% 0.157 37.304);
  --color-neutral          : oklch(27% 0.006 286.033);
  --color-neutral-content  : oklch(92% 0.004 286.32);
  --color-info             : oklch(68% 0.169 237.323);
  --color-info-content     : oklch(29% 0.066 243.157);
  --color-success          : oklch(69% 0.17 162.48);
  --color-success-content  : oklch(26% 0.051 172.552);
  --color-warning          : oklch(79% 0.184 86.047);
  --color-warning-content  : oklch(28% 0.066 53.813);
  --color-error            : oklch(64% 0.246 16.439);
  --color-error-content    : oklch(27% 0.105 12.094);
  --radius-selector        : 0rem;
  --radius-field           : 0rem;
  --radius-box             : 0rem;
  --size-selector          : 0.25rem;
  --size-field             : 0.25rem;
  --border                 : 1px;
  --depth                  : 1;
  --noise                  : 0;
  --container              : 1268px;
  --padding-container      : calc(calc(100vw - var(--container)) / 2);
}

@media (max-width: 1440px) {
  :root {
    --container: calc(100vw - 170px);
  }
}

@media (max-width: 1280px) {
  :root {
    --container: calc(100vw - 120px);
  }
}

@media (max-width: 769px) {
  :root {
    --container: calc(100vw - 32px);
  }
}

.pr-container {
  padding-right: var(--padding-container);
}

@media (max-width: 769px) {
  .pr-container {
    padding: var(--padding-container);
  }
}

.pl-container {
  padding-left: var(--padding-container);
}

@media (max-width: 769px) {
  .pl-container {
    padding: var(--padding-container);
  }
}

.container-fluid {
  width  : var(--container);
  margin : 0 auto;
  display: block;
}

@keyframes zoomEffect {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes shine {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

.backHome {
  width          : 40px;
  aspect-ratio   : 1;
  display        : flex;
  justify-content: center;
  align-items    : center;
  background     : var(--color-primary);
  height         : -moz-max-content;
  height         : max-content;
  border-radius  : 50%;
  overflow       : hidden;
  position       : relative;
  animation      : zoomEffect 1s ease-in-out infinite;
}

.backHome::after {
  content   : "";
  position  : absolute;
  top       : 0;
  left      : -100%;
  width     : 150%;
  height    : 100%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 70%);
  transform : skewX(-30deg);
  animation : shine 1.5s infinite linear;
}

@media (max-width: 769px) {
  .backHome {
    display: none;
  }
}

html {
  font-weight: 300;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.btn-outline:hover {
  background-color: transparent;
}

.tabs-border {
  -moz-column-gap: 2.5rem;
  column-gap     : 2.5rem;
  row-gap        : 1rem;
  width          : 100%;
  overflow-x     : auto;
  width          : -moz-max-content;
  width          : max-content;
}

.tabs-border .tab {
  text-transform: uppercase;
  font-weight   : 400;
  padding       : 0;
}

.tabs-border .tab.tab-active {
  border-color: var(--color-primary);
  color       : var(--color-primary);
}

.tabs-border .tab:before {
  width: 100%;
  left : 0;
}

@media (max-width: 769px) {
  .tabs-border {
    gap      : 8px 20px;
    width    : 100%;
    flex-wrap: nowrap;
  }

  .tabs-border .tab {
    flex : 0 0 auto;
    width: -moz-max-content;
    width: max-content;
  }
}

.marker-container .--title {
  position        : absolute;
  bottom          : 100%;
  left            : 50%;
  transform       : translateX(-50%);
  opacity         : 0;
  width           : 100%;
  height          : 100%;
  background-color: var(--color-secondary);
  border-radius   : 4px 12px;
  border-radius   : 20px;
  color           : #fff;
  padding         : 0.5rem;
  transition      : all 0.3s ease-in-out;
  width           : -moz-max-content;
  width           : max-content;
}

.marker-container:hover .--title,
.marker-container.active .--title {
  bottom : calc(100% + 6px);
  opacity: 1;
}

.itemMarkerLocation.active .marker-circle {
  background-color: var(--color-primary);
}

.badge {
  text-transform: uppercase;
  padding-block : 0.75rem;
  padding-inline: 1rem;
  border-style  : none;
  font-size     : 0.75rem;
}

.btn-link {
  text-decoration: none;
  font-weight    : var(--font-weight-medium);
  position       : relative;
  color          : var(--color-primary);
  padding-left   : 0;
  padding-right  : 0;
}

.btn-link::after {
  content         : "";
  position        : absolute;
  bottom          : 0;
  left            : 0;
  width           : 100%;
  height          : 1px;
  background-color: var(--color-primary);
  width           : 100%;
}

@media (max-width: 769px) {
  .btn-link {
    height: auto;
  }

  .btn-link::after {
    display: none;
  }
}

article p:not(:last-child) {
  margin-bottom: 1rem;
}

article .mejs-video {
  width        : 100%;
  height       : auto;
  border-radius: 0.5rem;
  overflow     : hidden;
}

article .mejs-video .mejs-controls {
  display: none;
}

article .mejs-video br {
  display: none;
}

article h1,
article h2,
article h3,
article h4,
article h5 {
  font-weight: 600;
}

article h1 {
  font-size    : 2.5rem;
  margin-bottom: 1rem;
}

article h2 {
  font-size    : 1.5rem;
  margin-bottom: 0.875rem;
}

article h3 {
  font-size    : 1.25rem;
  margin-bottom: 0.75rem;
}

article h4 {
  font-size    : 1rem;
  margin-bottom: 0.5rem;
}

article h5 {
  font-size    : 0.875rem;
  margin-bottom: 0;
}

article table {
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
}

article table tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.05);
}

article table th {
  background-color: rgba(255, 255, 255, 0.1);
  padding         : 0.5rem;
  font-weight     : 600;
}

article table td {
  border : 1px solid rgba(255, 255, 255, 0.2);
  padding: 1rem;
}

article table tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.05);
}

article figure {
  margin-bottom: 1.5rem !important;
}

article figure img {
  width        : auto;
  max-width    : 100% !important;
  height       : auto !important;
  border-radius: 0.5rem;
  margin       : 0 auto;
  border       : 1px solid rgba(255, 255, 255, 0.1);
}

article figure figcaption {
  font-size : 0.875rem;
  color     : #888;
  text-align: center;
}

article ul {
  list-style   : disc;
  margin-left  : 1.5rem;
  margin-bottom: 1rem;
}

article ul li {
  margin-bottom: 0.5rem;
}

article ul li:last-child {
  margin-bottom: 0;
}

article ol {
  list-style   : decimal;
  margin-left  : 1.5rem;
  margin-bottom: 1rem;
}

article iframe {
  width        : 100%;
  height       : auto;
  min-height   : 400px;
  border-radius: 0.5rem;
  overflow     : hidden;
  margin-bottom: 2rem;
}

article .wp-block-separator {
  margin : 2rem 0;
  opacity: 0;
}

article a {
  font-weight    : 600;
  color          : var(--color-base-content);
  text-decoration: underline;
}

/**
 * Hotel Gallery Styles
 */
/* Masonry layout refinements */
@media (min-width: 768px) {
  .media-masonry {
    margin-left : -12px;
    margin-right: -12px;
  }

  .masonry-column-1,
  .masonry-column-2,
  .masonry-column-3 {
    padding-left : 12px;
    padding-right: 12px;
  }
}

/* Mobile-friendly adjustments */
@media (max-width: 767px) {
  .media-masonry {
    display: none;
  }

  .masonry-column-1,
  .masonry-column-2,
  .masonry-column-3 {
    width  : 100%;
    padding: 0;
  }

  .media-item {
    margin-bottom: 16px;
  }

  .hidden {
    display: none !important;
  }
}

/*# sourceMappingURL=style.css.map */