/* ==========================================================================
   THEME6 — MODERN VISUAL OVERRIDE LAYER  (modern-theme.css)
   ==========================================================================

   WHAT THIS FILE IS
   ------------------
   A pure "paint & motion" pass on top of theme6's existing markup and CSS.
   It does NOT change any HTML structure, does NOT touch app.css / style.css /
   custom-styles.css, and does NOT redefine the per-company brand variables
   (--primary / --secondary / --accent) — it only *consumes* them so every
   one of the 79 live sites keeps its own colors.

   LOAD ORDER
   ----------
   Loaded in header.php AFTER bootstrap.min.css, app.css, style.css and
   custom-styles.css (last <link>). Because it loads last, same-specificity
   rules here naturally win over the earlier stylesheets without needing
   heavy use of !important. !important is used only in the few spots where
   app.css/style.css already applies !important on the same property.

   IMPORTANT CONSTRAINT — FONT FAMILY
   -----------------------------------
   header.php calls googleFonts($site->meta->webFont) which prints:
       body { font-family: '<company font>' !important; }
   This is per-company and MUST keep working, so this file intentionally
   never sets `font-family` on body/global text. "Modern typography" here is
   achieved through type scale, line-height, letter-spacing, weight and
   spacing — not by swapping the font stack.

   THINGS DELIBERATELY LEFT ALONE (fragile / already-handled elsewhere)
   ----------------------------------------------------------------------
   - .menu-item-has-children > a::before/::after   -> plus/minus submenu icon
   - .menu .children / .menu ul.children           -> dropdown redesign that
                                                        lives in custom-styles.css
   - .room__item-content / .room__item-body        -> hover slide-up reveal
                                                        mechanic (bottom/display)
   - .category-tab                                 -> already a modern pill
                                                        control in custom-styles.css
   - .roomCard / .subPageTitle (campaign.php)       -> legacy layout held
                                                        together by many
                                                        !important rules;
                                                        out of scope for a
                                                        low-risk pass
   - .callmeArea / .callArea contents               -> arbitrary per-company
                                                        HTML injected from the
                                                        DB; only lightly
                                                        touched (generic
                                                        anchor/button polish)

   Respects prefers-reduced-motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Radius scale */
  --mt-radius-sm: 8px;
  --mt-radius-md: 14px;
  --mt-radius-lg: 20px;
  --mt-radius-pill: 999px;

  /* Shadow scale (soft, neutral — colors still come from --primary etc. where relevant) */
  --mt-shadow-xs: 0 1px 3px rgba(15, 23, 42, 0.06);
  --mt-shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.07);
  --mt-shadow-md: 0 12px 32px rgba(15, 23, 42, 0.1);
  --mt-shadow-lg: 0 24px 48px rgba(15, 23, 42, 0.14);

  /* Motion */
  --mt-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --mt-transition: 0.35s var(--mt-ease);
  --mt-transition-fast: 0.2s var(--mt-ease);
}

/* --------------------------------------------------------------------------
   2. ACCESSIBILITY — REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY POLISH (no font-family changes — see header comment)
   -------------------------------------------------------------------------- */
body {
  line-height: 1.7;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 700;
}

.common-header p,
.section-header p,
.room__item-body p,
.blog p {
  line-height: 1.8;
}

.common-header,
.section-header {
  margin-bottom: 2.25rem;
}

a {
  transition:
    color var(--mt-transition-fast),
    background-color var(--mt-transition-fast),
    border-color var(--mt-transition-fast);
}

img {
  max-width: 100%;
}

/* Clear, modern focus ring instead of the browser default outline being
   removed with no replacement (keeps keyboard users covered). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.custom-btn:focus-visible {
  outline: 2px solid var(--primary, #13172b);
  outline-offset: 2px;
  border-radius: var(--mt-radius-sm);
}

/* --------------------------------------------------------------------------
   4. BUTTONS / CTAs
   -------------------------------------------------------------------------- */

/* .custom-btn already has position:relative + overflow:hidden (style.css),
   which means the diagonal-wipe hover effect will now be neatly clipped by
   the rounder corners below instead of flaring past a square edge. */
.custom-btn {
  border-radius: var(--mt-radius-pill);
  box-shadow: var(--mt-shadow-xs);
  transition:
    transform var(--mt-transition-fast),
    box-shadow var(--mt-transition-fast),
    color 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease;
}
.custom-btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--mt-shadow-md);
}
.custom-btn:active {
  transform: translateY(-1px);
}
.custom-btn--sm {
  border-radius: var(--mt-radius-pill);
}

/* Blog "read more" pill button (style.css .blog-btn uses the same
   diagonal-wipe pattern as .custom-btn) */
.blog-btn {
  display: inline-block;
  border-radius: var(--mt-radius-pill);
  padding-inline: 1.1rem;
  box-shadow: var(--mt-shadow-xs);
  transition:
    transform var(--mt-transition-fast),
    box-shadow var(--mt-transition-fast),
    color 0.3s ease,
    border-color 0.3s ease;
}
.blog-btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--mt-shadow-sm);
}

/* Gallery/category filter pills */
.common-filter__btn {
  border-radius: var(--mt-radius-pill);
  transition:
    background-color var(--mt-transition-fast),
    color var(--mt-transition-fast),
    box-shadow var(--mt-transition-fast);
}
.common-filter__btn:hover {
  box-shadow: var(--mt-shadow-sm);
}

/* Contact form submit button (app.css hardcodes #785757 — bring it into the
   per-company brand palette and give it the same pill treatment). */
.formCon input[type="submit"],
.submitForm {
  background: var(--primary, #785757);
  border: 1px solid var(--primary, #785757);
  border-radius: var(--mt-radius-pill);
  padding: 12px 28px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: var(--mt-shadow-xs);
  transition:
    transform var(--mt-transition-fast),
    box-shadow var(--mt-transition-fast),
    filter var(--mt-transition-fast);
}
.formCon input[type="submit"]:hover,
.submitForm:hover {
  transform: translateY(-2px);
  box-shadow: var(--mt-shadow-sm);
  filter: brightness(1.06);
}

/* Scroll-to-top button — already well built in style.css; just round it out
   and let it ride the shared shadow scale for consistency. */
.scrollToTop {
  border-radius: var(--mt-radius-pill);
  box-shadow: var(--mt-shadow-sm);
}
.scrollToTop:hover {
  box-shadow: var(--mt-shadow-md);
}

/* Floating call/whatsapp widget markup is injected per-company from the DB
   (getFooter()), so its structure is unknown — only polish generic
   interactive children, never their positioning/visibility logic. */
.callmeArea a,
.callmeArea button,
.callArea a,
.callArea button {
  border-radius: var(--mt-radius-pill);
  transition:
    transform var(--mt-transition-fast),
    box-shadow var(--mt-transition-fast);
}
.callmeArea a:hover,
.callmeArea button:hover,
.callArea a:hover,
.callArea button:hover {
  transform: translateY(-2px) scale(1.04);
}

/* --------------------------------------------------------------------------
   5. HEADER / NAVIGATION
   -------------------------------------------------------------------------- */
.header-section {
  transition:
    background-color var(--mt-transition),
    box-shadow var(--mt-transition);
}

/* Sticky/scrolled state (custom.js adds "header-fixed" once scrollTop > 300).
   style.css sets a flat `background-color:#fff`; give it a modern
   translucent glass treatment instead. Falls back gracefully where
   backdrop-filter isn't supported (stays solid white). */
.header-section.header-fixed {
  background-color: rgba(255, 255, 255, 0.86);
  box-shadow: var(--mt-shadow-md);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .header-section.header-fixed {
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
  }
}

.header-top-area,
.header_phone_number a,
.adress_text a {
  transition: color var(--mt-transition-fast);
}

.langs .active {
  border-radius: var(--mt-radius-pill);
  transition:
    background-color var(--mt-transition-fast),
    color var(--mt-transition-fast);
}

.brand-logo .logo img {
  transition: transform var(--mt-transition-fast);
}
.brand-logo .logo:hover img {
  transform: scale(1.04);
}

/* Top-level nav links — subtle rounded hover tint. Deliberately avoids
   ::before/::after (those pseudo-elements already render the +/- submenu
   indicator on .menu-item-has-children and must not be redefined). */
.menu > li > a {
  border-radius: var(--mt-radius-sm);
  transition:
    color var(--mt-transition-fast),
    background-color var(--mt-transition-fast);
}
@media (min-width: 992px) {
  .menu > li:hover > a {
    background-color: rgba(0, 0, 0, 0.045);
  }
}

/* Rounder hamburger bars */
.header-bar span {
  border-radius: 2px;
}

/* Reservation CTA sitting inside the nav gets the same pill/lift treatment
   as every other .custom-btn automatically; just tighten its shadow so it
   doesn't look heavier than the surrounding nav. */
.header-wrapper .menu-area .custom-btn {
  box-shadow: none;
}
.header-wrapper .menu-area .custom-btn:hover {
  box-shadow: var(--mt-shadow-sm);
}

/* --------------------------------------------------------------------------
   6. HERO / PAGE HEADER BANNERS — premium redesign

   Targets both `.page-header__content` (the BEM-ish class most templates
   use) and `.page-header-content` (the variant contract.php /
   contract-detail.php ship with) so every inner page gets the same premium
   treatment without having to touch each template's markup. Same reasoning
   for `.breadcrumb` — scoped only through the `.page-header` ancestor, not a
   dedicated wrapper class, since not every template has one.
   -------------------------------------------------------------------------- */
.hero__content .custom-btn {
  box-shadow: var(--mt-shadow-md);
}

.page-header {
  position: relative;
  isolation: isolate;
  background-position: center;
  background-size: cover;
  background-attachment: scroll;
  padding-block: 100px;
}
@media (min-width: 768px) {
  .page-header {
    padding-block: 130px;
  }
}
@media (min-width: 1200px) {
  .page-header {
    padding-block: 170px;
  }
}

/* Replaces the old flat image + hard text-shadow crutch with a proper
   gradient scrim, so heading/breadcrumb contrast no longer depends on the
   per-company banner image being dark enough. */
.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    165deg,
    rgba(8, 10, 20, 0.82) 0%,
    rgba(8, 10, 20, 0.58) 45%,
    rgba(8, 10, 20, 0.78) 100%
  );
}

.page-header__content,
.page-header-content {
  position: relative;
  z-index: 1;
  animation: mt-page-header-rise 0.6s var(--mt-ease) both;
}

@keyframes mt-page-header-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-header__content h2,
.page-header-content h2 {
  position: relative;
  display: inline-block;
  padding-bottom: 20px;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -0.01em;
  text-shadow: none;
}

.page-header__content h2::after,
.page-header-content h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 46px;
  height: 3px;
  transform: translateX(-50%);
  border-radius: var(--mt-radius-pill);
  background: var(--primary, #fff);
  opacity: 0.9;
}

/* Breadcrumb — glass pill capsule instead of bare Bootstrap text-with-slashes */
.page-header .breadcrumb {
  display: inline-flex;
  margin-top: 4px;
  padding: 10px 24px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--mt-radius-pill);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: var(--mt-shadow-sm);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .page-header .breadcrumb {
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
  }
}

.page-header .breadcrumb-item {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.page-header .breadcrumb-item + .breadcrumb-item {
  padding-left: 0.7rem;
}

/* Swap Bootstrap's default "/" divider for a softer chevron glyph. */
.page-header .breadcrumb-item + .breadcrumb-item::before {
  float: none;
  padding-right: 0.7rem;
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: rgba(255, 255, 255, 0.45);
}

.page-header .breadcrumb-item a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.82);
  transition: color var(--mt-transition-fast);
}

.page-header .breadcrumb-item:first-child a::before {
  content: "\f015";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
}

.page-header .breadcrumb-item a:hover {
  color: #fff;
}

.page-header .breadcrumb-item.active {
  color: #fff;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   7. ROOM CARDS  (.room__item.room__item--style1)
   -------------------------------------------------------------------------- */
.room__item-inner {
  border-radius: var(--mt-radius-lg);
  box-shadow: var(--mt-shadow-sm);
  transition:
    box-shadow var(--mt-transition),
    transform var(--mt-transition);
}
.room__item--style1:hover .room__item-inner,
.room__item--style1.active .room__item-inner {
  box-shadow: var(--mt-shadow-lg);
  transform: translateY(-4px);
}
.room__item-thumb {
  border-radius: var(--mt-radius-lg) var(--mt-radius-lg) 0 0;
}

.rating__star i {
  color: var(--accent, #e8a41d);
}

.room__meta-inline span {
  transition: color var(--mt-transition-fast);
}

/* --------------------------------------------------------------------------
   8. GALLERY GRID
   -------------------------------------------------------------------------- */
.gallery__grid-image {
  border-radius: var(--mt-radius-md);
  box-shadow: var(--mt-shadow-sm);
  transition:
    box-shadow var(--mt-transition),
    transform var(--mt-transition);
}
.gallery__grid-item:hover .gallery__grid-image {
  box-shadow: var(--mt-shadow-lg);
  transform: translateY(-4px);
}

/* --------------------------------------------------------------------------
   9. BLOG LIST + SIDEBAR (blog.php's custom class set)
   -------------------------------------------------------------------------- */
.blogItem {
  border-radius: var(--mt-radius-lg);
  box-shadow: var(--mt-shadow-sm);
  transition:
    box-shadow var(--mt-transition),
    transform var(--mt-transition);
}
.blogItem:hover {
  box-shadow: var(--mt-shadow-lg);
  transform: translateY(-4px);
}
.blogImgDiv {
  overflow: hidden;
  border-radius: var(--mt-radius-lg) 0 0 var(--mt-radius-lg);
}
.blogImgDiv img {
  transition: transform var(--mt-transition);
}
.blogItem:hover .blogImgDiv img {
  transform: scale(1.08);
}
@media (max-width: 991.98px) {
  .blogImgDiv {
    border-radius: var(--mt-radius-lg) var(--mt-radius-lg) 0 0;
  }
}

.blogRight {
  border-radius: var(--mt-radius-lg);
  box-shadow: var(--mt-shadow-xs);
}
.enItemDiv {
  transition: transform var(--mt-transition-fast);
}
.enImg img {
  border-radius: var(--mt-radius-sm);
  transition: transform var(--mt-transition);
}
.enItemDiv:hover .enImg img {
  transform: scale(1.06);
}

/* --------------------------------------------------------------------------
   10. FOOTER
   -------------------------------------------------------------------------- */
.footer__about .social__block .social__link,
.socialConn a {
  border-radius: var(--mt-radius-pill);
  transition:
    transform var(--mt-transition-fast),
    background-color var(--mt-transition-fast),
    box-shadow var(--mt-transition-fast);
}
.footer__about .social__block .social__link:hover,
.socialConn a:hover {
  transform: translateY(-3px);
  box-shadow: var(--mt-shadow-sm);
}

.footer a {
  transition: color var(--mt-transition-fast);
}

/* --------------------------------------------------------------------------
   11. CONTACT PAGE
   -------------------------------------------------------------------------- */
.contactItem {
  border-radius: var(--mt-radius-md);
  transition:
    box-shadow var(--mt-transition-fast),
    transform var(--mt-transition-fast),
    border-color var(--mt-transition-fast);
}
.contactItem:hover {
  box-shadow: var(--mt-shadow-sm);
  transform: translateY(-2px);
  border-color: var(--primary, #cbc3c3);
}

.formCon input:not([type="submit"]),
.formCon textarea {
  border-radius: var(--mt-radius-md);
  transition:
    border-color var(--mt-transition-fast),
    box-shadow var(--mt-transition-fast);
}
.formCon input:not([type="submit"]):focus,
.formCon textarea:focus {
  outline: none;
  border-color: var(--primary, #13172b);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.contactgmaps iframe {
  border-radius: var(--mt-radius-lg);
}