/* One continuous light-theme canvas based on the “Наші ціни” section:
   warm ivory, a quiet architectural grid and fine diagonal strokes. */
html.light[data-theme="light"] {
  --pricing-reference-bg: #fbfaf7;
}

html.light[data-theme="light"] body,
html.light[data-theme="light"] body main {
  background-color: var(--pricing-reference-bg) !important;
  background-image: var(--decor-platinum) !important;
  background-position: 0 0 !important;
  background-repeat: repeat !important;
  background-size: var(--decor-size) !important;
}

/* Let the shared canvas run through regular content sections. Hero imagery,
   dark conversion blocks and the footer retain their own backgrounds. */
html.light[data-theme="light"] body main > section:not(.hero):not([class*="-hero"]):not(.cta):not([class*="-final-cta"]),
html.light[data-theme="light"] body :is(
  #about#about,
  #services#services,
  #popular#popular,
  #why-pro-lex#why-pro-lex,
  #articles#articles,
  #faq#faq,
  .trust-bar,
  .doubts-section,
  .articles-home-section,
  .work-pricing-section,
  .work-pricing-block,
  .reasons-block,
  .workflow-block,
  .pricing-block,
  .service-archive-page,
  .service-detail-page,
  .service-choice-panel,
  .service-quick-overview,
  .pricing-page,
  .pricing-direction,
  .pricing-decision-panel,
  .pricing-choice-cta,
  .contacts-page,
  .legal-page,
  .article-archive-page,
  .article-detail-page,
  .article-summary,
  .subscription-benefits,
  .subscription-hero,
  .subscription-plans-section,
  .subscription-comparison-section,
  .subscription-faq-section
) {
  background-color: transparent !important;
  background-image: none !important;
  background-size: auto !important;
}

/* Keep the navigation visually connected to the hero instead of placing an
   opaque ivory bar over it. The restrained blur protects menu legibility. */
html.light[data-theme="light"] body .site-header {
  border-bottom-color: rgba(23, 52, 75, 0.1) !important;
  background: rgba(247, 241, 232, 0.2) !important;
  box-shadow: 0 6px 18px rgba(23, 52, 75, 0.035) !important;
  backdrop-filter: blur(10px) saturate(1.06) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.06) !important;
}

html.light[data-theme="light"] body .site-header .main-nav {
  gap: clamp(8px, 0.9vw, 16px) !important;
  font-family: "Noto Serif", Georgia, serif !important;
  font-size: 0.72rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

html.light[data-theme="light"] body .site-header .brand > span {
  white-space: nowrap !important;
}

html.light[data-theme="light"] body .site-header .main-nav > .nav-link,
html.light[data-theme="light"] body .site-header .main-nav > .nav-dropdown > .nav-link {
  text-shadow: 0 1px 0 rgba(247, 241, 232, 0.58) !important;
}

/* The source photograph already has natural depth of field. A lighter veil
   and mild tonal lift retain readable copy without washing out the image. */
html.light[data-theme="light"] body .hero .hero-media img {
  filter: contrast(1.08) saturate(1.05) brightness(0.99) !important;
}

html.light[data-theme="light"] body .hero .media-overlay {
  background:
    linear-gradient(
      90deg,
      rgba(247, 241, 232, 0.74) 0%,
      rgba(247, 241, 232, 0.58) 34%,
      rgba(247, 241, 232, 0.17) 62%,
      rgba(247, 241, 232, 0.03) 100%
    ) !important;
}

/* Remove beige wrapper panels while preserving their spacing and content.
   Cards, form surfaces and CTA buttons remain visually distinct. */
html.light[data-theme="light"] body :is(
  .light-block-tone-1,
  .light-block-tone-2,
  .light-block-tone-3
),
html.light[data-theme="light"] body :is(
  .trust-bar-inner,
  .trust-bar .stats-grid,
  .service-directory-heading,
  .pricing-hero,
  .subscription-section-header,
  .article-archive-hero,
  .article-archive-tools,
  .contacts-hero,
  .contacts-visual,
  .workflow-header,
  .doubts-header,
  .contacts-panel.light-block-tone-2,
  .contacts-panel.light-block-tone-3,
  .service-final-cta.light-block-tone-2,
  .service-final-cta.light-block-tone-3,
  .subscription-final-cta.light-block-tone-3,
  .pricing-choice-cta.light-block-tone-3
) {
  border-color: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Page-level styles use equally important beige surfaces for these wrappers.
   Repeat their full context so the shared transparent canvas wins everywhere. */
html.light[data-theme="light"] body main section.service-final-cta.service-final-cta.light-block-tone-2,
html.light[data-theme="light"] body main section.service-final-cta.service-final-cta.light-block-tone-3,
html.light[data-theme="light"] body main section.subscription-final-cta.subscription-final-cta.light-block-tone-3,
html.light[data-theme="light"] body main section.pricing-choice-cta.pricing-choice-cta.light-block-tone-3,
html.light[data-theme="light"] body main section.contacts-panel.contacts-panel.light-block-tone-2,
html.light[data-theme="light"] body main section.contacts-panel.contacts-panel.light-block-tone-3 {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Astro page styles are emitted after the shared stylesheet on several routes.
   The harmless ID branch raises specificity without requiring markup changes. */
:is(#remove-beige-wrapper-panels, html.light[data-theme="light"]) body main :is(
  .light-block-tone-1,
  .light-block-tone-2,
  .light-block-tone-3,
  .trust-bar-inner,
  .trust-bar .stats-grid,
  .service-directory-heading,
  .pricing-hero,
  .subscription-section-header,
  .article-archive-hero,
  .article-archive-tools,
  .contacts-hero,
  .contacts-visual,
  .workflow-header,
  .doubts-header
) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Keep the canvas continuous, but restore a clear rhythm between content sections. */
:is(#restore-section-dividers, html.light[data-theme="light"]):is(#restore-section-lines, html.light[data-theme="light"]):is(#keep-section-lines, html.light[data-theme="light"]) body main > section:not(:first-of-type),
:is(#restore-section-dividers, html.light[data-theme="light"]):is(#restore-section-lines, html.light[data-theme="light"]):is(#keep-section-lines, html.light[data-theme="light"]) body main :is(
  .service-choice-panel,
  .service-final-cta,
  .pricing-decision-panel,
  .pricing-choice-cta,
  .subscription-final-cta,
  .article-summary,
  .contacts-primary-grid
) {
  border-top: 1px solid rgba(23, 52, 75, 0.16) !important;
}

:is(#remove-beige-wrapper-panels, html.light[data-theme="light"]) body main :is(
  .light-block-tone-1,
  .light-block-tone-2,
  .light-block-tone-3,
  .trust-bar-inner,
  .trust-bar .stats-grid,
  .service-directory-heading,
  .pricing-hero,
  .subscription-section-header,
  .article-archive-hero,
  .article-archive-tools,
  .contacts-hero,
  .contacts-visual,
  .workflow-header,
  .doubts-header
)::before,
:is(#remove-beige-wrapper-panels, html.light[data-theme="light"]) body main :is(
  .light-block-tone-1,
  .light-block-tone-2,
  .light-block-tone-3,
  .trust-bar-inner,
  .trust-bar .stats-grid,
  .service-directory-heading,
  .pricing-hero,
  .subscription-section-header,
  .article-archive-hero,
  .article-archive-tools,
  .contacts-hero,
  .contacts-visual,
  .workflow-header,
  .doubts-header
)::after {
  background: transparent !important;
  box-shadow: none !important;
}