:root{
  /* Header metrics */
  --header-h: 72px;
  --header-top: 0px;

  /* Spacing scale (design tokens) */
  --vt-spacing-2xs: 4px;
  --vt-spacing-xs: 6px;
  --vt-spacing-s: 12px;
  --vt-spacing-m: 16px;
  --vt-spacing-l: 24px;
  --vt-spacing-xl: 32px;
  --vt-spacing-2xl: 40px;
  --vt-spacing-3xl: 55px;

  /* Page rhythm */
  --vt-page-gap-top: 28px;
  --vt-page-gap-bottom: 40px;

  /* Layout */
  --vt-sidebar-w: 240px;
  --vt-layout-gap: 32px;

  /* Radii */
  --vt-radius-card: 18px;
  --vt-radius-card-lg: 22px;
  --vt-radius-pill: 999px;

  /* Glass system */
  --vt-glass-bg: rgba(255, 255, 255, 0.82);
  --vt-glass-bg-strong: rgba(255, 255, 255, 0.88);
  --vt-glass-border: rgba(255, 255, 255, 0.45);
  --vt-glass-blur: 18px;
  --vt-shadow-card: 0 14px 40px rgba(0, 0, 0, 0.12);
  --vt-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.10);
}

:root{
  --vtr-text: #1f2937;
  --vtr-heading: #0f172a;
  --vtr-muted: #64748b;

  --vtr-lh-body: 1.7;
  --vtr-lh-small: 1.55;
  --vtr-lh-card: 1.25;
  --vtr-lh-copy: 1.6;
  --vtr-lh-h2: 1.2;
  --vtr-lh-h3: 1.25;
  --vtr-lh-h4: 1.3;
}

body,
.content-main,
.tab-content,
.vtr-page{
  color: var(--vtr-text);
}

.content-main p,
.tab-content p,
.vtr-page p,
.content-main li,
.tab-content li,
.vtr-page li{
  color: var(--vtr-text);
}

h1, h2, h3, h4, h5, h6{
  color: var(--vtr-heading);
}


@media (max-width: 1023px) {
  :root {
    --header-h: 84px;
  }
}

/* ===== Glass utilities ===== */
.vt-glass{
  background: var(--vt-glass-bg);
  border: 1px solid var(--vt-glass-border);
  backdrop-filter: blur(var(--vt-glass-blur));
  -webkit-backdrop-filter: blur(var(--vt-glass-blur));
}
.vt-glass--strong{ background: var(--vt-glass-bg-strong); }
.vt-glass-card{
  background: var(--vt-glass-bg);
  border: 1px solid var(--vt-glass-border);
  border-radius: var(--vt-radius-card-lg);
  backdrop-filter: blur(var(--vt-glass-blur));
  -webkit-backdrop-filter: blur(var(--vt-glass-blur));
  box-shadow: var(--vt-shadow-card);
}

html, body{
  margin: 0;
  padding: 0;
}

body{
  margin: 0;

  font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 15.5px;
  line-height: var(--vtr-lh-body);
  color: var(--vtr-text);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  background-color: #e9f0f8;

 
  background-image: url("/wp-content/uploads/2026/03/bg-truskavets-composite-1920-HQ.webp");
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
  background-attachment: fixed;

  /* layout */
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  /* Компенсація fixed header */
  padding-top: calc(var(--header-h) + var(--header-top));

  transition: none;
}

.content-main{
  scroll-behavior:smooth;
}

.container.main-layout{
  display: grid;
  grid-template-columns: var(--vt-sidebar-w) minmax(0, 1fr);
  gap: var(--vt-layout-gap);
  align-items: start;
}

.sidebar{
  width: 100%;
  max-width: 370px;
  margin: 0 auto;
}


* {
  box-sizing: border-box;
}


.visually-hidden{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

.phone,
.hm-phone,
.mm-phone-number a,
.booking-phone,
.card-price,
.card-price strong,
.vtr-prices .vtr-price-table th,
.vtr-prices .vtr-price-table td{
  font-variant-numeric: tabular-nums;
}
/* Компенсація для fixed topbar */
/* WP admin bar */
body.admin-bar{ --header-top: 32px; }
@media (max-width: 782px){
  body.admin-bar{ --header-top: 46px; }
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 1400px){
  .container{
    max-width: 1320px;
  }
}

.content-main,
.tab-content,
.vtr-page{
  font-size: 14px;
  line-height: var(--vtr-lh-body);
  color: var(--vtr-text);
}

.content-main p,
.tab-content p,
.vtr-page p{
  margin: 0 0 14px;
}

.content-main h2,
.tab-content h2,
.vtr-page h2{
  margin: 28px 0 12px;
  line-height: var(--vtr-lh-h2);
}

.content-main h3,
.tab-content h3,
.vtr-page h3{
  margin: 22px 0 10px;
  line-height: var(--vtr-lh-h3);
}

.content-main h4,
.tab-content h4,
.vtr-page h4{
  margin: 18px 0 8px;
  line-height: var(--vtr-lh-h4);
}

.content-main ul,
.tab-content ul,
.vtr-page ul{
  margin: 0 0 16px;
  padding-left: 18px;
}

.content-main li,
.tab-content li,
.vtr-page li{
  margin-bottom: 6px;
}

.content-main li:last-child,
.tab-content li:last-child,
.vtr-page li:last-child{
  margin-bottom: 0;
}

.content-main p:empty,
.tab-content p:empty,
.vtr-page p:empty{
  display: none;
}

main#main-content:focus,
main#main-content:focus-visible {
  outline: none;
  box-shadow: none;
}

.vtr-page {
  font-size: 15px;
  line-height: var(--vtr-lh-body);
  max-width: 760px;
}

.vtr-page h2 {
  font-size: 22px;
  margin: 32px 0 14px;
  line-height: var(--vtr-lh-h2);
}

.vtr-page h3 {
  font-size: 18px;
  margin: 24px 0 10px;
  line-height: var(--vtr-lh-h3);
}

.vtr-page p {
  margin: 0 0 14px;
  line-height: var(--vtr-lh-body);
}

.vtr-page ul {
  margin: 0 0 16px;
  padding-left: 18px;
}

.vtr-page li {
  margin-bottom: 6px;
}

.vtr-page h2 + p,
.vtr-page h3 + p {
  margin-top: 8px;
}

.vtr-contact-card {
  line-height: var(--vtr-lh-copy);
}

.vtr-contact-item {
  margin-bottom: 10px;
}