/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 */
/* Hallmark · macrostructure: Editorial Hero + Proof Stack · nav: floating rail · footer: masthead · theme: Nordic Clinical */
/*
Theme Name: Viso Clinic Nova
Theme URI: https://visoclinic.se/
Author: MKDSGN
Description: Native WordPress block theme for Viso Clinic.
Version: 1.0.2
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: viso-clinic-nova
*/

@import url('./tokens.css');

html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--nova-paper); color: var(--nova-ink); font-family: var(--nova-font-body); -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
img, video { max-width: 100%; }
a { transition: color var(--nova-fast) ease, opacity var(--nova-fast) ease; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--nova-focus); outline-offset: 4px; }
.wp-site-blocks { padding: 0; }
.vc-main { min-height: 60vh; }

.vc-header-shell {
  position: absolute;
  z-index: 30;
  top: 1.4rem;
  left: 50%;
  width: min(calc(100% - 3rem), var(--nova-wide));
  min-height: 4.6rem;
  margin: 0 !important;
  padding: .75rem .9rem .75rem 1.4rem !important;
  transform: translateX(-50%);
  border: 1px solid var(--nova-line);
  border-radius: var(--nova-r-md);
  background: var(--nova-glass);
  box-shadow: 0 1rem 3rem var(--nova-shadow-soft);
  backdrop-filter: blur(18px);
}
.vc-brand-lockup { min-width: 11rem; }
.vc-brand-name { margin: 0 !important; line-height: 1; }
.vc-brand-name a { color: var(--nova-ink) !important; font-size: 1.25rem; font-weight: 600; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.vc-brand-sub { margin: .32rem 0 0 !important; color: var(--nova-accent-dark); font-size: .52rem; font-weight: 700; letter-spacing: .28em; line-height: 1; text-transform: uppercase; }
.vc-header-shell .wp-block-navigation__container { align-items: center; gap: clamp(.8rem, 1.6vw, 1.6rem); }
.vc-header-shell .wp-block-navigation a { color: var(--nova-ink); font-size: .68rem; font-weight: 700; letter-spacing: .075em; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.vc-header-shell .wp-block-navigation a:hover { color: var(--nova-accent-dark); }
.vc-header-shell .wp-block-navigation__container > li:first-child { order: 99; }
.vc-header-shell .wp-block-navigation__container > li:first-child > a { padding: .85rem 1.25rem; border-radius: var(--nova-r-sm); background: var(--nova-accent); color: var(--nova-white); }

.vc-ref-hero, .entry-content > .vc-hero:not(.vc-ref-hero) { position: relative; min-height: 49rem !important; padding: 0 !important; background: var(--nova-night); overflow: hidden; }
.vc-ref-hero .wp-block-cover__video-background, .vc-hero .wp-block-cover__image-background { width: 100% !important; height: 100% !important; object-fit: cover; object-position: center 28%; }
.vc-ref-hero .wp-block-cover__background, .vc-hero:not(.vc-ref-hero) .wp-block-cover__background { display: block !important; background: linear-gradient(0deg, var(--nova-night) 0%, var(--nova-clear) 58%) !important; opacity: .68 !important; }
.vc-ref-hero .wp-block-cover__inner-container, .vc-hero:not(.vc-ref-hero) .wp-block-cover__inner-container { position: static !important; width: 100% !important; max-width: none !important; }
.vc-ref-hero-copy, .vc-hero:not(.vc-ref-hero) .vc-hero-copy {
  position: absolute !important;
  z-index: 3;
  bottom: 3rem;
  left: max(1.5rem, calc((100vw - var(--nova-wide)) / 2));
  width: min(40rem, calc(100% - 3rem)) !important;
  margin: 0 !important;
  padding: clamp(2rem, 4vw, 3.75rem) !important;
  border: 1px solid var(--nova-line);
  border-radius: var(--nova-r-lg) var(--nova-r-sm) var(--nova-r-lg) var(--nova-r-sm);
  background: var(--nova-glass);
  color: var(--nova-ink);
  box-shadow: 0 1.5rem 5rem var(--nova-shadow);
  backdrop-filter: blur(18px);
}
.vc-ref-label, .vc-kicker { margin-bottom: var(--nova-md); color: var(--nova-accent-dark); font-family: var(--nova-font-body); font-size: .67rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.vc-ref-display, .vc-page-title, .vc-ref-title, .vc-ref-cta-title { min-width: 0; overflow-wrap: anywhere; font-family: var(--nova-font-display); font-style: normal; font-weight: 500 !important; letter-spacing: -.035em !important; line-height: .93 !important; }
.vc-ref-display { max-width: 11ch; margin: 0; font-size: clamp(4rem, 6vw, 5.8rem) !important; }
.vc-ref-lede, .vc-lead, .vc-ref-copy { max-width: 58ch; color: var(--nova-muted); font-size: clamp(.95rem, 1.1vw, 1.08rem); line-height: 1.7; }

.wp-element-button, .wp-block-button__link { padding: .9rem 1.2rem !important; border: 1px solid var(--nova-accent) !important; border-radius: var(--nova-r-sm) !important; background: var(--nova-accent) !important; color: var(--nova-white) !important; box-shadow: none; cursor: pointer; font-family: var(--nova-font-body); font-size: .68rem !important; font-weight: 700 !important; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; transition: transform var(--nova-fast) var(--nova-ease), background-color var(--nova-fast) ease; }
.wp-element-button:hover, .wp-block-button__link:hover { transform: translateY(-2px); background: var(--nova-accent-dark) !important; }
.wp-element-button:active, .wp-block-button__link:active { transform: translateY(0); }
.wp-element-button:disabled, .wp-block-button__link:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.is-style-outline > .wp-block-button__link { background: transparent !important; color: var(--nova-ink) !important; }

.vc-ref-proof { padding: 0 1.5rem; background: var(--nova-paper); }
.vc-ref-proof-columns { position: relative; z-index: 4; width: min(calc(100% - 3rem), var(--nova-wide)) !important; max-width: var(--nova-wide) !important; margin: -1.4rem auto 0 !important; gap: 0 !important; border: 1px solid var(--nova-line); border-radius: var(--nova-r-md); background: var(--nova-white); box-shadow: 0 1rem 3rem var(--nova-shadow-soft); }
.vc-ref-proof-columns > .wp-block-column { padding: 1.5rem 1.7rem; border-left: 1px solid var(--nova-line); }
.vc-ref-proof-columns > .wp-block-column:first-child { border-left: 0; }
.vc-ref-proof p { margin: 0; color: var(--nova-muted); font-size: .72rem; line-height: 1.55; }
.vc-ref-proof strong { color: var(--nova-ink); }

.vc-ref-section, .entry-content > .vc-section, .entry-content > .vc-section-tight { padding: clamp(5rem, 8vw, 7rem) 1.5rem; background: var(--nova-paper) !important; color: var(--nova-ink) !important; }
.vc-ref-about, .vc-ref-treatment-grid, .vc-ref-rating, .entry-content > .vc-section > .wp-block-columns, .vc-service-columns { width: min(100%, var(--nova-wide)) !important; max-width: var(--nova-wide) !important; margin-inline: auto !important; }
.vc-ref-about { gap: clamp(3rem, 7vw, 7rem) !important; }
.vc-ref-title { max-width: 11ch; margin: 0 0 var(--nova-xl); font-size: clamp(3.5rem, 5.5vw, 5.5rem) !important; }
.vc-ref-about-image { margin: 0; overflow: hidden; border-radius: var(--nova-r-sm) var(--nova-r-xl) var(--nova-r-sm) var(--nova-r-lg); }
.vc-ref-about-image img { width: 100%; min-height: 34rem; object-fit: cover; }

.vc-ref-section-title { margin: 0 auto var(--nova-2xl); color: var(--nova-accent-dark); font-family: var(--nova-font-body); font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-align: center; text-transform: uppercase; }
.vc-ref-treatment-grid { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--nova-lg) !important; }
.vc-ref-treatment-grid > .wp-block-column { grid-column: span 4; min-width: 0; width: auto !important; padding: 1rem; border: 1px solid var(--nova-line); border-radius: var(--nova-r-md); background: var(--nova-white); transition: transform var(--nova-fast) var(--nova-ease), box-shadow var(--nova-fast) ease; }
.vc-ref-treatment-grid > .wp-block-column:first-child { grid-column: span 5; }
.vc-ref-treatment-grid > .wp-block-column:nth-child(2) { grid-column: span 3; }
.vc-ref-treatment-grid > .wp-block-column:hover { transform: translateY(-4px); box-shadow: 0 1.25rem 3.5rem var(--nova-shadow-soft); }
.vc-ref-card-image { aspect-ratio: 4 / 3; margin: 0; overflow: hidden; border-radius: var(--nova-r-sm); }
.vc-ref-treatment-grid > .wp-block-column:first-child .vc-ref-card-image { aspect-ratio: 16 / 10; }
.vc-ref-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--nova-slow) var(--nova-ease); }
.vc-ref-treatment-grid > .wp-block-column:hover img { transform: scale(1.025); }
.vc-ref-treatment-grid h3 { margin: 1.2rem 0 .5rem; font-family: var(--nova-font-display); font-size: clamp(1.55rem, 2vw, 2rem); }
.vc-ref-treatment-grid p { margin: 0 0 .8rem; color: var(--nova-muted); font-size: .78rem; line-height: 1.6; }
.vc-ref-card-link a { color: var(--nova-accent-dark) !important; font-size: .67rem; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }

.vc-ref-dark-band { width: min(calc(100% - 3rem), var(--nova-wide)); margin: 0 auto clamp(5rem, 8vw, 7rem); overflow: hidden; border-radius: var(--nova-r-xl) var(--nova-r-sm) var(--nova-r-xl) var(--nova-r-sm); background: var(--nova-night); color: var(--nova-white); }
.vc-ref-band-columns { width: 100% !important; max-width: none !important; gap: 0 !important; }
.vc-ref-band-image { height: 100%; margin: 0; }
.vc-ref-band-image img { width: 100%; min-height: 31rem; height: 100%; object-fit: cover; filter: saturate(.7) contrast(1.05); }
.vc-ref-band-columns > .wp-block-column:last-child { padding: clamp(2.5rem, 5vw, 5rem); }
.vc-ref-band-title { margin: 0 0 var(--nova-2xl); color: var(--nova-white); font-family: var(--nova-font-body); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; }
.vc-ref-benefits { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 !important; }
.vc-ref-benefits > .wp-block-column { padding: 1.4rem; border-top: 1px solid var(--nova-night-soft); }
.vc-ref-benefits p { color: var(--nova-white); font-size: .78rem; }
.vc-ref-index { color: var(--nova-accent); font-family: var(--nova-font-display); font-size: 2rem !important; }

.vc-ref-rating-section { padding-top: 0; }
.vc-ref-rating { gap: clamp(2rem, 6vw, 6rem) !important; }
.vc-ref-rating > .wp-block-column { padding-top: var(--nova-xl); border-top: 1px solid var(--nova-line); }
.vc-ref-stat { margin: 0; color: var(--nova-accent-dark); font-family: var(--nova-font-display); font-size: clamp(5rem, 8vw, 8rem); line-height: .8; }
.vc-ref-proof-title { max-width: 13ch; font-family: var(--nova-font-display); font-size: clamp(2.5rem, 4vw, 4rem); line-height: .95; }

.vc-ref-cta-wrap { padding: 0 1.5rem clamp(5rem, 8vw, 7rem); background: var(--nova-paper) !important; }
.vc-ref-cta { width: min(100%, 74rem) !important; max-width: 74rem !important; margin: auto; overflow: hidden; border-radius: var(--nova-r-sm) var(--nova-r-xl) var(--nova-r-sm) var(--nova-r-xl); background: var(--nova-surface); }
.vc-ref-cta-columns { width: 100% !important; max-width: none !important; gap: 0 !important; }
.vc-ref-cta-columns > .wp-block-column:first-child { padding: clamp(2.5rem, 6vw, 5rem); }
.vc-ref-cta-title { max-width: 9ch; margin: .5rem 0 1rem; font-size: clamp(3.5rem, 6vw, 5.5rem); }
.vc-ref-cta-image { height: 100%; margin: 0; }
.vc-ref-cta-image img { width: 100%; min-height: 30rem; height: 100%; object-fit: cover; }

/* Interior pages */
.entry-content > .vc-hero:not(.vc-ref-hero) { min-height: 42rem !important; }
.vc-hero:not(.vc-ref-hero) .vc-hero-copy { bottom: 2.5rem; }
.vc-hero:not(.vc-ref-hero) .vc-page-title { margin: 0 0 1rem; font-size: clamp(3.5rem, 5.5vw, 5.3rem); }
.entry-content > .vc-section > .vc-kicker, .entry-content > .vc-section > .vc-page-title, .entry-content > .vc-section > .vc-lead, .entry-content > .vc-section > .wp-block-buttons { width: min(100%, var(--nova-copy)); max-width: var(--nova-copy) !important; margin-inline: auto !important; text-align: center; }
.entry-content > .vc-section .vc-page-title, .entry-content > .vc-section-tight .vc-page-title { color: var(--nova-ink); font-family: var(--nova-font-display); font-size: clamp(3rem, 5vw, 5rem); }
.entry-content > .vc-section p { color: var(--nova-muted); }
.vc-service-columns { align-items: start !important; gap: var(--nova-lg) !important; }
.vc-service-details { margin: 0 0 .8rem; overflow: hidden; border: 1px solid var(--nova-line); border-radius: var(--nova-r-sm); background: var(--nova-white); }
.vc-service-details[open] { box-shadow: 0 1rem 3rem var(--nova-shadow-soft); }
.vc-service-details summary { cursor: pointer; padding: 1.35rem 3.5rem 1.35rem 1.4rem; color: var(--nova-ink); font-family: var(--nova-font-display); font-size: 1.45rem; }
.vc-service-list { margin: 0; padding: 0 2rem 1.5rem 3rem; color: var(--nova-muted); }
.vc-service-list li { margin-block: .55rem; line-height: 1.55; }
.vc-service-list li::marker { color: var(--nova-accent); }
.vc-card, .vc-card-featured { border: 1px solid var(--nova-line); border-radius: var(--nova-r-md); background: var(--nova-white); color: var(--nova-ink); box-shadow: none; }
.vc-card h3, .vc-card-featured h3 { font-family: var(--nova-font-display); font-size: 1.8rem; }
.vc-number { color: var(--nova-accent-dark) !important; font-size: .7rem; font-weight: 700; letter-spacing: .12em; }
.entry-content > .vc-section-tight .vc-cta { width: min(100%, 72rem) !important; max-width: 72rem !important; margin: auto; border: 1px solid var(--nova-line); border-radius: var(--nova-r-lg); background: var(--nova-surface); color: var(--nova-ink); box-shadow: none; }

.vc-footer { padding: clamp(4rem, 7vw, 6rem) 1.5rem 1.5rem; background: var(--nova-night); color: var(--nova-white); }
.vc-footer > .wp-block-columns, .vc-footer > .wp-block-group, .vc-footer > .wp-block-separator { width: min(100%, var(--nova-wide)) !important; max-width: var(--nova-wide) !important; margin-inline: auto !important; }
.vc-footer a { color: var(--nova-white); text-decoration: none; }
.vc-footer .vc-kicker { color: var(--nova-accent); }
.vc-footer-mark { max-width: 13ch; margin: 0; color: var(--nova-white); font-family: var(--nova-font-display); font-size: clamp(3.5rem, 7vw, 7rem); line-height: .88; }
.vc-footer hr { margin-block: 3rem 1.5rem; color: var(--nova-night-soft); }

@media (max-width: 1080px) {
  .vc-header-shell .wp-block-navigation__responsive-container-open { display: flex; }
  .vc-header-shell .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
  .vc-ref-treatment-grid > .wp-block-column, .vc-ref-treatment-grid > .wp-block-column:first-child, .vc-ref-treatment-grid > .wp-block-column:nth-child(2) { grid-column: span 6; }
}

@media (max-width: 782px) {
  .vc-header-shell { top: .75rem; width: calc(100% - 1.5rem); min-height: 4.2rem; padding: .65rem .75rem .65rem 1rem !important; }
  .vc-brand-name a { font-size: 1rem; }
  .vc-brand-sub { font-size: .44rem; }
  .vc-header-shell .wp-block-navigation__responsive-container.is-menu-open { padding: 6rem 1.5rem 2rem; background: var(--nova-paper); color: var(--nova-ink); }
  .vc-ref-hero, .entry-content > .vc-hero:not(.vc-ref-hero) { min-height: 46rem !important; }
  .vc-ref-hero-copy, .vc-hero:not(.vc-ref-hero) .vc-hero-copy { right: 1rem; bottom: 1rem; left: 1rem; width: auto !important; padding: 1.8rem !important; border-radius: var(--nova-r-md); }
  .vc-ref-display { font-size: clamp(3.2rem, 14vw, 4.6rem) !important; }
  .vc-hero:not(.vc-ref-hero) .vc-page-title { font-size: clamp(3rem, 12vw, 3.5rem); }
  .vc-ref-proof { padding-inline: 1rem; }
  .vc-ref-proof-columns { width: 100% !important; margin-top: 1rem !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vc-ref-proof-columns > .wp-block-column { padding: 1rem; border-left: 0; border-top: 1px solid var(--nova-line); }
  .vc-ref-section, .entry-content > .vc-section, .entry-content > .vc-section-tight { padding: 4.5rem 1rem; }
  .vc-ref-about { gap: 2.5rem !important; }
  .vc-ref-about-image img { min-height: 22rem; }
  .vc-ref-treatment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem !important; }
  .vc-ref-treatment-grid > .wp-block-column, .vc-ref-treatment-grid > .wp-block-column:first-child, .vc-ref-treatment-grid > .wp-block-column:nth-child(2) { grid-column: span 1; }
  .vc-ref-treatment-grid p:not(.vc-ref-card-link) { display: none; }
  .vc-ref-dark-band { width: calc(100% - 2rem); }
  .vc-ref-band-image img { min-height: 22rem; max-height: 27rem; }
  .vc-ref-band-columns > .wp-block-column:last-child { padding: 2rem; }
  .vc-ref-rating { gap: 2.5rem !important; }
  .vc-ref-cta-wrap { padding-inline: 1rem; }
  .vc-ref-cta-image img { min-height: 21rem; }
}

@media (max-width: 480px) {
  .vc-ref-proof-columns { grid-template-columns: 1fr; }
  .vc-ref-treatment-grid h3 { font-size: 1.35rem; }
  .vc-ref-card-link { font-size: .62rem !important; }
  .vc-ref-benefits { grid-template-columns: 1fr; }
  .vc-service-details summary { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .vc-ref-hero .wp-block-cover__video-background { display: none; }
  .vc-ref-hero { background: url('https://www.viso.mkdsgn.se/wp-content/uploads/2026/07/2-1-scaled-1.jpg') center 28% / cover no-repeat; }
}