/* TiVaMo managed-theme layer. Loaded after the legacy stylesheet. */
:root {
  --tvm-content-width: 1220px;
  --tvm-section-spacing: clamp(4.5rem, 8vw, 6rem);
}

html { overflow-x: hidden; }
body { overflow-wrap: anywhere; }
img, svg, video, canvas, iframe { max-width: 100%; }
img, video { height: auto; }

.tvm-section { padding-block: var(--tvm-section-spacing) !important; }
.tvm-section-inner,
.tvm-hero-inner,
.tvm-nav,
.tvm-footer-inner {
  max-width: var(--tvm-content-width) !important;
}

.tvm-brand-image {
  display: block;
  width: auto;
  max-width: min(220px, 46vw);
  max-height: 48px;
}

.tvm-menu-list,
.tvm-footer-menu-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tvm-menu-list li,
.tvm-footer-menu-list li { margin: 0; }

.tvm-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.tvm-nav-toggle:focus-visible,
.tvm-menu a:focus-visible,
.tvm-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 3px;
}

.tvm-block-homepage,
.tvm-flexible-page {
  min-height: 50vh;
}

.tvm-block-homepage > .wp-block-group,
.tvm-flexible-page > .wp-block-group {
  margin-block: 0;
}

.tvm-block-homepage > :not(.alignfull),
.tvm-flexible-page > :not(.alignfull),
.tvm-entry-content > :not(.alignfull) {
  width: min(calc(100% - 40px), var(--tvm-content-width));
  margin-inline: auto;
}

.tvm-block-homepage .alignwide,
.tvm-flexible-page .alignwide,
.tvm-entry-content .alignwide {
  width: min(calc(100% - 40px), var(--tvm-content-width));
  max-width: var(--tvm-content-width);
}

.tvm-block-homepage .alignfull,
.tvm-flexible-page .alignfull,
.tvm-entry-content .alignfull {
  width: 100%;
  max-width: none;
}

.tvm-entry-content {
  font-size: 1rem;
  line-height: 1.75;
}

.tvm-entry-content > * + * { margin-top: 1.35em; }
.tvm-entry-content h2,
.tvm-entry-content h3,
.tvm-entry-content h4 { line-height: 1.2; }

.tvm-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 22px;
}

.tvm-blog-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.tvm-blog-card .tvm-post-body { flex: 1; }
.tvm-blog-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.tvm-pagination {
  margin-top: 36px;
  display: flex;
  justify-content: center;
}

.tvm-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tvm-pagination a,
.tvm-pagination span {
  display: inline-flex;
  min-width: 40px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 10px;
}

.tvm-footer-menu-list { justify-content: flex-end; }

@media (max-width: 1080px) {
  .tvm-site-header .tvm-nav {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    grid-template-areas: "brand toggle actions" !important;
    row-gap: 0 !important;
  }

  .tvm-site-header .tvm-brand { grid-area: brand !important; }
  .tvm-site-header .tvm-nav-toggle { grid-area: toggle !important; }
  .tvm-site-header .tvm-nav-actions { grid-area: actions !important; }
  .tvm-site-header .tvm-menu { grid-area: menu !important; }
}

@media (max-width: 900px) {
  .tvm-site-header .tvm-nav {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    grid-template-areas:
      "brand toggle actions"
      "menu menu menu" !important;
    gap: 10px 12px !important;
    padding-block: 12px !important;
  }

  .tvm-nav-toggle { display: inline-flex; }

  .tvm-site-header .tvm-menu {
    display: none !important;
    width: 100% !important;
    padding: 12px 0 4px !important;
    border-top: 1px solid var(--border) !important;
  }

  .tvm-site-header .tvm-menu.is-open { display: block !important; }

  .tvm-menu-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 12px;
  }

  .tvm-menu-list a {
    display: block !important;
    padding: 10px 8px;
    border-radius: 8px;
  }

  .tvm-menu-list a:hover { background: var(--bg3); }

  .tvm-hero { padding-inline: 20px !important; }
  .tvm-hero-inner { grid-template-columns: 1fr !important; gap: 36px !important; }
  .tvm-visual { min-height: 300px !important; }
  .tvm-floating { max-width: 46%; }
  .tvm-metric-row { gap: 8px; }

  .tvm-grid,
  .tvm-steps,
  .tvm-pricing-grid,
  .tvm-post-grid,
  .tvm-video-grid,
  .tvm-about-grid,
  .tvm-contact-grid,
  .tvm-form-row,
  .tvm-cta {
    grid-template-columns: 1fr !important;
  }

  .tvm-footer-menu-list { justify-content: flex-start; }
}

@media (max-width: 620px) {
  .tvm-site-header .tvm-nav {
    width: min(100% - 24px, var(--tvm-content-width)) !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "brand toggle"
      "actions actions"
      "menu menu" !important;
  }

  .tvm-site-header .tvm-nav-actions {
    width: 100% !important;
    justify-content: stretch !important;
  }

  .tvm-site-header .tvm-nav-actions .tvm-btn { width: 100%; }
  .tvm-menu-list { grid-template-columns: 1fr; }

  .tvm-hero { padding-top: 96px !important; padding-bottom: 56px !important; }
  .tvm-hero h1 { font-size: clamp(2.1rem, 12vw, 3rem) !important; }
  .tvm-hero-actions { display: grid !important; }
  .tvm-hero-actions .tvm-btn { width: 100%; }
  .tvm-visual { min-height: 250px !important; }
  .tvm-dashboard-card { padding: 16px !important; }
  .tvm-chart { height: 120px !important; }
  .tvm-metric-row { grid-template-columns: 1fr !important; }
  .tvm-floating { display: none; }

  .tvm-section,
  .tvm-page-hero,
  .tvm-content-shell,
  .tvm-form-shell { padding-inline: 20px !important; }

  .tvm-card,
  .tvm-step,
  .tvm-form-card,
  .tvm-side-card,
  .tvm-legal-card,
  .tvm-cta { padding: 22px !important; }

  .tvm-block-homepage > :not(.alignfull),
  .tvm-flexible-page > :not(.alignfull),
  .tvm-entry-content > :not(.alignfull),
  .tvm-block-homepage .alignwide,
  .tvm-flexible-page .alignwide,
  .tvm-entry-content .alignwide {
    width: min(calc(100% - 28px), var(--tvm-content-width));
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
