/* Optional site-specific CSS loaded after components.css. Keep global writer components in components.css. */

/* Maison Mag palette: keep every inherited surface tied to the site tokens. */
:root {
  --wi2-ink: var(--color-text, #24312B);
  --wi2-paper: var(--color-bg, #F7F3EC);
  --wi2-paper-2: var(--color-bg-alt, #E8EEE8);
  --wi2-night: var(--color-dark-bg, #24312B);
  --wi2-coral: var(--color-accent, #C65D3B);
  --wi2-gold: var(--color-accent2, #C7A64A);
  --wi2-accent-rgb: 198, 93, 59;
  --wi2-accent-2-rgb: 199, 166, 74;
  /* The standard theme still consumes these historical aliases. Map every
     one to the Maison Mag palette so no control falls back to white. */
  --wi2-cyan: var(--wi2-coral);
  --wi2-lime: var(--wi2-gold);
  --wi2-accent-strong: var(--wi2-coral);
  --wi2-on-accent: #FFFFFF;
  --wi2-on-accent-2: var(--wi2-ink);
  --wi2-text: var(--wi2-ink);
  --wi2-muted: var(--color-text-muted, #637067);
  --wi2-line: var(--color-border, #D9DDD5);
  --wi2-canvas: var(--wi2-paper);
  --wi2-card-radius: var(--radius-lg, .5rem);
  --wi2-card-shadow: 0 10px 24px rgba(36, 49, 43, .09);
  --wi2-type-display: clamp(40px, 4.8vw, 68px);
  --wi2-type-display-wide: clamp(42px, 5.1vw, 74px);
  --wi2-type-display-xl: clamp(44px, 5.5vw, 76px);
  --wi2-type-section: clamp(30px, 3.8vw, 54px);
  --wi2-type-feature: clamp(28px, 3.2vw, 46px);
  --wi2-type-display-mobile: clamp(34px, 9.5vw, 48px);
  --wi2-dark-section: color-mix(in srgb, var(--wi2-night) 90%, var(--wi2-coral));
  --wi2-dark-section-2: color-mix(in srgb, var(--wi2-night) 84%, var(--wi2-gold));
}

.wi2-footer {
  background: var(--wi2-night) !important;
  color: #fff !important;
}

.wi2-footer :is(a, p, strong, span) {
  color: inherit;
}

.wi2-footer__brand p,
.wi2-footer__nav a,
.wi2-footer__note p,
.wi2-footer__bottom {
  color: color-mix(in srgb, #fff 76%, transparent) !important;
}

.wi2-footer__nav strong,
.wi2-footer__note strong,
.wi-wordmark--footer span:last-child {
  color: var(--wi2-gold) !important;
}

.wi2-footer__nav a:hover {
  color: var(--wi2-coral) !important;
}

/* View-timeline is not stable enough for a public editorial card grid. */
.page-home :is(.wi2-section-head, .wi2-positioning__feature, .wi2-positioning__grid article, .wi2-topic-card),
.page-about :is(.wi2-section-head, .wi2-author-card, .wi2-about-grid article) {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.page-home .wi2-topic-card {
  min-height: 390px;
  border-color: var(--color-border, #D9DDD5);
  box-shadow: 0 12px 28px rgba(36, 49, 43, .10);
}

.page-home .wi2-topic-card strong {
  color: var(--wi2-ink) !important;
  font-size: 23px;
}

.page-home .wi2-topic-card p {
  color: var(--color-text-muted, #637067) !important;
}

.page-home .wi2-section--topics {
  background: var(--wi2-dark-section);
}

.page-home .wi2-section--topics :is(.cms-section-heading, .cms-section-heading__title, h2) {
  color: #fff;
}

.page-home .wi2-section--topics :is(.cms-section-heading__label, .section-kicker) {
  color: var(--wi2-gold);
}

.page-home .wi2-section--topics .cms-scroll-rail-arrow {
  border-color: color-mix(in srgb, #fff 30%, transparent);
  color: #fff;
}

.page-home .wi2-section-cta .wi2-btn--dark,
.page-home .wi2-btn--dark,
.page-about .wi2-btn--dark,
.page-contact .wi2-btn--dark {
  border-color: var(--wi2-night);
  background: var(--wi2-night);
  color: #fff;
}

.page-home .wi2-positioning__grid article,
.page-about .wi2-about-grid article,
.page-contact .wi2-contact-info,
.page-contact .wi2-contact-form {
  border: 1px solid var(--wi2-line);
  box-shadow: var(--wi2-card-shadow);
}

@media (max-width: 720px) {
  .cms-editorial-hero__shade {
    background: linear-gradient(180deg, rgba(20, 29, 25, .18) 0%, rgba(20, 29, 25, .42) 45%, rgba(20, 29, 25, .90) 100%) !important;
  }

  .cms-editorial-hero__content {
    padding-bottom: 8px;
  }
}

/* CMS_VISUAL_BREADCRUMB_20260609 */
.cms-breadcrumb {
  position: relative;
  z-index: 2;
  width: min(var(--container, 1200px), calc(100% - 40px));
  margin: clamp(18px, 3vw, 34px) auto 0;
  color: var(--color-text-muted, #6b7280);
  font-family: var(--font-body, inherit);
  font-size: clamp(12px, 1.4vw, 13.5px);
}

.cms-breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cms-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.cms-breadcrumb__item + .cms-breadcrumb__item::before {
  content: "/";
  margin-right: 7px;
  color: color-mix(in srgb, currentColor 42%, transparent);
}

.cms-breadcrumb__link,
.cms-breadcrumb__current {
  display: inline-block;
  max-width: min(54vw, 52ch);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cms-breadcrumb__link {
  color: inherit;
  text-decoration: none;
}

.cms-breadcrumb__link:hover {
  color: var(--color-accent, currentColor);
}

.cms-breadcrumb__current {
  color: var(--color-text, #111827);
  font-weight: 650;
}

@media (max-width: 720px) {
  .cms-breadcrumb {
    width: min(100% - 24px, var(--container, 1200px));
    margin-top: 14px;
    font-size: 12px;
  }

  .cms-breadcrumb__link,
  .cms-breadcrumb__current {
    max-width: 68vw;
  }
}

/* CMS_BREADCRUMB_SIDEBAR_COLUMN_20260610
   On sidebar article layouts, align the visual breadcrumb with the content
   column instead of spanning into the sidebar area. */
@media (min-width: 1021px) {
  .page-post--with-sidebar .cms-breadcrumb {
    --cms-breadcrumb-sidebar-width: 320px;
    --cms-breadcrumb-sidebar-gap: clamp(32px, 4vw, 60px);
    width: min(
      calc(100% - 40px - var(--cms-breadcrumb-sidebar-width) - var(--cms-breadcrumb-sidebar-gap)),
      calc(var(--container, 1200px) - var(--cms-breadcrumb-sidebar-width) - var(--cms-breadcrumb-sidebar-gap))
    );
    margin-left: max(20px, calc((100vw - var(--container, 1200px)) / 2));
    margin-right: auto;
  }
}

/* CMS_SITE_BASELINE_ROLLOUT
   Required on deployed sites: compact paginated listing heroes, no card reveal
   animation on mobile/tablet, and no table expand icon on mobile/tablet. */

.page-listing-paged :is(
  .cms-hero-min,
  .cms-hero-fc,
  .cms-hero-post-overlay,
  .cms-hero-post-centered,
  .cms-hero-cwm,
  .cms-hero-centered,
  .cms-hero-split,
  .cms-hero-slider,
  .cms-hero-glow,
  .cms-hero-lt,
  .gdn-hero,
  .rse-editorial-hero,
  .nix-category-hero,
  .ic-hero
) {
  --cms-hero-post-centered-height: clamp(210px, 28vh, 320px) !important;
  min-height: clamp(210px, 28vh, 320px) !important;
}

.page-listing-paged .cms-hero-fc {
  padding-top: clamp(84px, 10vh, 118px) !important;
  padding-bottom: 34px !important;
}

.page-listing-paged :is(
  .cms-hero-fc__content,
  .cms-hero-post-centered__content,
  .cms-hero-cwm__content,
  .cms-hero-centered__content,
  .cms-hero-split__content,
  .cms-hero-glow__content,
  .cms-hero-lt__content,
  .gdn-hero__content
) {
  max-width: 820px !important;
  gap: 10px !important;
}

.page-listing-paged :is(
  .cms-hero-fc__title,
  .cms-hero-post-centered__title,
  .cms-hero-cwm__title,
  .cms-hero-centered__title,
  .cms-hero-split__title,
  .cms-hero-glow__title,
  .cms-hero-lt__title,
  [class*="hero"][class*="__title"]
) {
  font-size: clamp(28px, 4vw, 44px) !important;
  line-height: 1.05 !important;
}

.page-listing-paged :is(
  .cms-hero-fc__subtitle,
  .cms-hero-fc__meta,
  .cms-hero-fc__scroll,
  .cms-hero-post-centered__subtitle,
  .cms-hero-post-centered__meta,
  .cms-hero-post-centered__scroll,
  [class*="hero"][class*="__subtitle"],
  [class*="hero"][class*="__scroll"]
) {
  display: none !important;
}

:is(
  .cms-footer-mega,
  .cms-footer-cta,
  .cms-ftr-col3,
  .cms-ftr-col4,
  footer
) :is(.cms-obfuscated-link, .cms-legal-link) {
  appearance: none !important;
  display: inline-flex !important;
  align-items: baseline !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-align: inherit !important;
  text-decoration: inherit !important;
  text-transform: inherit !important;
}

.cms-header-std__item--has-children:hover > :is(.cms-header-std__link, .cms-header-std__link--button),
.cms-header-std__item--has-children:focus-within > :is(.cms-header-std__link, .cms-header-std__link--button) {
  color: var(--cms-header-std-parent-hover-color, var(--cms-hstd-text, var(--color-text))) !important;
}

:is(
  .cms-cf-info,
  .cms-contact-form,
  .cms-form,
  .cms-newsletter,
  .cms-consent-banner,
  .cms-consent-banner__card,
  .steps-ng,
  .steps-ng *,
  .listing-layout,
  .listing-layout *
) {
  box-sizing: border-box;
}

:is(.cms-cf-info, .cms-contact-form, .cms-form, .cms-tool, .cms-simulator) :is(select, option) {
  color: var(--color-text, #111827) !important;
  background-color: var(--color-bg, #fff) !important;
}

:is(.cms-cf-info, .cms-contact-form, .cms-form, .cms-tool, .cms-simulator) select {
  color-scheme: light;
}

.cms-utility-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 980px;
  margin: 0 auto;
}

.cms-utility-links__card {
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.cms-utility-links__title {
  margin: 0 0 14px;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.15;
}

.cms-utility-links__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cms-utility-links__item + .cms-utility-links__item {
  margin-top: 12px;
}

.cms-utility-links__link {
  color: var(--color-accent);
  font: 500 16px/1.6 var(--font-body);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 800px) {
  :is(
    [data-reveal],
    .cms-post-card,
    .cms-generic-card,
    .cms-ds-card,
    .cms-bl-card,
    .cms-bl-grid,
    .cms-bl-ff,
    .cms-bl-fg,
    .cms-cb,
    .cms-cc-edgrid,
    .cms-cc-horiz,
    .cms-cmp-vs__card,
    .cms-fg-c3__card,
    .cms-fg-car__card,
    .cms-fg-i2__card,
    .cms-fg-imgtop__card,
    .cms-fg-num__item,
    .cms-cs-grid__card,
    .cms-cs-osc__card,
    .cms-cs-ovr__card,
    .cms-cs-split__card,
    .cms-cs-test__card
  ):is([data-reveal], .cms-reveal, .reveal-on-scroll) {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition-delay: 0s !important;
    transition-property: background-color, border-color, color, box-shadow !important;
    transition-duration: 0.18s !important;
    will-change: auto !important;
  }

  :is(.page-home, .page-blog, .page-blog-categorie, .page-category, .page-author, .page-listing) :is(
    [data-reveal],
    .cms-reveal,
    .reveal-on-scroll,
    .cms-post-card,
    .cms-generic-card,
    .cms-ds-card,
    .cms-bl-card,
    .cms-card
  ) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
    transition-delay: 0s !important;
  }

  :is(.page-home, .page-blog, .page-blog-categorie, .page-category, .page-author, .page-listing) :is(
    .cms-post-card:hover,
    .cms-generic-card:hover,
    .cms-ds-card:hover,
    .cms-bl-card:hover,
    .cms-card:hover,
    .cms-post-card:hover img,
    .cms-generic-card:hover img,
    .cms-ds-card:hover img,
    .cms-bl-card:hover img,
    .cms-card:hover img
  ) {
    transform: none !important;
  }

  :is(.cms-post-card, .cms-generic-card, .listing-grid, .cms-bl-grid__grid) * {
    transition-delay: 0s !important;
  }

  :is(.cms-section__inner--contained, .cms-section__inner--narrow, .cms-section__inner--full) {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  :is(.cms-cf-info, .cms-contact-form, .cms-form) :is(input, select, textarea) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  :is(.cms-contact-form, .cms-cf-info, .cms-newsletter, .cms-consent-banner__card) {
    max-width: calc(100vw - 20px) !important;
  }

  .steps-ng {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    overflow-x: clip !important;
  }

  .steps-ng__card {
    height: auto !important;
    min-height: 0 !important;
  }

  .cms-header-std__bar {
    box-sizing: border-box !important;
    width: min(calc(100% - 28px), var(--container, 1400px)) !important;
    max-width: calc(100vw - 28px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  :is(
    .cms-header-mobile,
    .cms-header-mobile__link,
    .cms-header-mobile__toggle,
    .cms-header-mobile__child-link,
    .cms-header-mobile__cta
  ) {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  :is(.cms-header-mobile__link, .cms-header-mobile__toggle) {
    width: 100% !important;
    display: flex !important;
    justify-self: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .cms-header-mobile__children {
    box-sizing: border-box !important;
    width: 100% !important;
    padding-left: 12px !important;
  }

  .cms-header-mobile__cta {
    width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .cms-utility-links {
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: calc(100vw - 20px);
  }

  :is(.cms-pc-std__content, .article-content, .post-content, .prose)
    :is(.pc-table-expand, .tb-expand-btn, .cms-content-table__expand-btn) {
    display: none !important;
    visibility: hidden !important;
  }
}

/* CMS_AFFILIATE_COMPONENT_HARDENING_20260604
   Final cascade guards for post labs and article content. */
.cms-pc-std__content .cms-content-src__item,
.cms-pc-std__content .cms-content-src:not(.cms-content-style-v2) .cms-content-src__item,
.cms-pc-std__content .cms-content-style-v2 .cms-content-src__item {
  padding: 14px 16px !important;
  border: 1px solid color-mix(in srgb, var(--color-accent, #2563eb) 14%, var(--color-border, #e5e7eb)) !important;
  border-radius: var(--radius-md, 16px) !important;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--color-accent, #2563eb) 8%, transparent), transparent 44%),
    var(--color-bg-alt, #f8fafc) !important;
  box-shadow: none !important;
}

.cms-pc-std__content .cms-content-src__item:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent, #2563eb) 14%, var(--color-border, #e5e7eb)) !important;
}

.cms-pc-std__content :is(.affcmp, .affcmp-comparison-page) a,
.cms-pc-std__content :is(
  .affcmp-card-link,
  .affcmp-buy-podium__card,
  .affcmp-buy-podium__cta,
  .affcmp-rank-card__cta,
  .affcmp-product-card__cta,
  .affcmp-product-card__buy,
  .affcmp-cx-cta,
  .affcmp-button,
  .affcmp-cta,
  .affcmp-line-pick__cta
) {
  text-decoration: none !important;
  text-decoration-line: none !important;
}

.cms-pc-std__content .affcmp-proscons .affcmp-pc,
.cms-pc-std__content .affcmp-proscons :is(.affcmp-pc--pro, .affcmp-pc--con) {
  border-radius: 16px !important;
  color: var(--affcmp-text, var(--color-text, #111827)) !important;
}

.cms-pc-std__content .affcmp-proscons .affcmp-pc--pro {
  border: 1px solid color-mix(in srgb, var(--affcmp-positive, #16a34a) 38%, var(--affcmp-border, var(--color-border, #e5e7eb))) !important;
  background: color-mix(in srgb, var(--affcmp-positive, #16a34a) 16%, var(--affcmp-bg, #fff)) !important;
}

.cms-pc-std__content .affcmp-proscons .affcmp-pc--con {
  border: 1px solid color-mix(in srgb, var(--affcmp-negative, #dc2626) 34%, var(--affcmp-border, var(--color-border, #e5e7eb))) !important;
  background: color-mix(in srgb, var(--affcmp-negative, #dc2626) 13%, var(--affcmp-bg, #fff)) !important;
}

/* CMS_POST_FIRST_SECTION_SPACING_20260610
   Tighten only the first article content section after the visual breadcrumb. */
:is(.page-post, .page-blog-post, .page-cocon, .page-pillar) :is(.ws-layout-section, .fw-post-section),
body.page-tool .ws-layout-section {
  --cms-section-pad-top: clamp(24px, 3.2vw, 42px);
  padding-top: var(--cms-section-pad-top) !important;
}

:is(.page-post, .page-blog-post, .page-cocon, .page-pillar) .da-article-shell {
  padding-top: clamp(24px, 3.2vw, 42px) !important;
}