/* =========================================================================
   L'ATELIER MATA — COMPONENTS / SALIENT OVERRIDES
   v0.2.0
   ----------------------------------------------------------------------
   Targeted refinements to Salient's stock components. Higher specificity
   than style.css because Salient ships heavy selector chains; we match
   them where needed but never use !important unless Salient's inline
   skin styles force it.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. HEADER & NAVIGATION
   ------------------------------------------------------------------------- */

/* Header surface — bone, hairline rule under, no shadow */
#header-outer {
  background: var(--lm-bg) !important;          /* override Salient skin */
  box-shadow: none !important;
  border-bottom: 1px solid var(--lm-rule);
  transition: background var(--lm-dur-base) var(--lm-ease);
}

#header-outer.detached,
#header-outer.transparent.scroll-down,
.material #header-outer {
  background: var(--lm-bg) !important;
  box-shadow: none !important;
}

/* Top bar height — give it some air, atelier-style */
#header-outer #top {
  padding-top: var(--lm-s-4);
  padding-bottom: var(--lm-s-4);
}

/* Container width — match our token */
#header-outer .container {
  max-width: var(--lm-container);
  padding-left: var(--lm-gutter);
  padding-right: var(--lm-gutter);
}

/* Logo — refined wordmark spacing */
#header-outer #logo,
#header-outer .logo-key,
.logo-key {
  font-family: var(--lm-font-display);
  font-weight: 400;
  letter-spacing: 0.32em;
  font-size: 1.125rem;
  text-transform: uppercase;
  color: var(--lm-text) !important;
}

/* Primary nav menu */
#header-outer #top nav > ul > li > a,
#header-outer .sf-menu > li > a {
  font-family: var(--lm-font-body);
  font-size: var(--lm-fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--lm-tracking-eyebrow);
  color: var(--lm-text) !important;
  padding: var(--lm-s-3) var(--lm-s-4);
  transition: color var(--lm-dur-base) var(--lm-ease);
}

#header-outer #top nav > ul > li > a:hover,
#header-outer .sf-menu > li > a:hover,
#header-outer #top nav > ul > li.current-menu-item > a {
  color: var(--lm-walnut) !important;
}

/* Kill Salient's animated underline — replace with subtle dot indicator */
#header-outer #top nav > ul > li > a:before,
#header-outer #top nav > ul > li > a:after {
  display: none !important;
}

#header-outer #top nav > ul > li.current-menu-item > a span:after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  background: var(--lm-walnut);
  border-radius: 50%;
  margin: 4px auto 0;
}

/* Cart icon refinement */
#header-outer #top nav ul#header-cart-link > li a {
  color: var(--lm-text) !important;
}

/* -------------------------------------------------------------------------
   2. PAGE HEADERS (Salient's hero / title strip)
   ------------------------------------------------------------------------- */

#page-header-bg,
.page-header-no-bg {
  background: var(--lm-bg) !important;
  padding-top: var(--lm-s-9) !important;
  padding-bottom: var(--lm-s-7) !important;
}

#page-header-bg .span_6,
#page-header-bg h1,
.page-header-no-bg h1 {
  font-family: var(--lm-font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
  line-height: var(--lm-lh-tight) !important;
  letter-spacing: var(--lm-tracking-tight) !important;
  color: var(--lm-text) !important;
  text-shadow: none !important;
}

/* Eyebrow / subheader on page headers */
#page-header-bg .subheader,
.page-header-no-bg .subheader {
  font-family: var(--lm-font-body) !important;
  font-size: var(--lm-fs-xs) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--lm-tracking-eyebrow) !important;
  color: var(--lm-text-soft) !important;
  margin-top: var(--lm-s-4) !important;
}

/* -------------------------------------------------------------------------
   3. CONTENT / WPBAKERY ROWS
   Salient + WPBakery generate .vc_row / .wpb_row / .wpb_column blocks
   with their own spacing. We rein it in.
   ------------------------------------------------------------------------- */

.container-wrap {
  background: var(--lm-bg);
}

/* Strip Salient's default content padding excess */
body.wpb-js-composer .vc_row {
  margin-left: 0;
  margin-right: 0;
}

/* Section vertical rhythm — bring in line with our scale */
.wpb_row.vc_row,
.full-width-section,
.full-width-content {
  padding-top: var(--lm-s-9);
  padding-bottom: var(--lm-s-9);
}

/* H1/H2/H3 inside content blocks need our type system */
.wpb_text_column h1,
.wpb_text_column h2,
.wpb_text_column h3,
.wpb_text_column h4 {
  font-family: var(--lm-font-display);
  font-weight: 400;
  letter-spacing: var(--lm-tracking-tight);
  color: var(--lm-text);
}

/* Paragraph sizing inside WPBakery */
.wpb_text_column p {
  font-family: var(--lm-font-body);
  font-size: var(--lm-fs-base);
  line-height: var(--lm-lh-base);
  color: var(--lm-text-mute);
}

/* -------------------------------------------------------------------------
   4. NECTAR BUTTONS (Salient's CTA component)
   ------------------------------------------------------------------------- */

.nectar-button,
a.nectar-button,
.tilt .nectar-button,
.button,
input[type="submit"] {
  font-family: var(--lm-font-body) !important;
  font-size: var(--lm-fs-sm) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--lm-tracking-wide) !important;
  background: var(--lm-ink) !important;
  color: var(--lm-bone) !important;
  border: 1px solid var(--lm-ink) !important;
  border-radius: 0 !important;
  padding: var(--lm-s-4) var(--lm-s-6) !important;
  box-shadow: none !important;
  transition:
    background var(--lm-dur-base) var(--lm-ease),
    color var(--lm-dur-base) var(--lm-ease) !important;
}

.nectar-button:hover,
a.nectar-button:hover,
.button:hover,
input[type="submit"]:hover {
  background: transparent !important;
  color: var(--lm-ink) !important;
}

/* See-through / outline variant */
.nectar-button.see-through {
  background: transparent !important;
  color: var(--lm-ink) !important;
}
.nectar-button.see-through:hover {
  background: var(--lm-ink) !important;
  color: var(--lm-bone) !important;
}

/* -------------------------------------------------------------------------
   5. NECTAR SLIDER (homepage hero)
   The slider on your homepage needs caption-style typography over images.
   ------------------------------------------------------------------------- */

.nectar-slider-wrap .swiper-slide .content h2 {
  font-family: var(--lm-font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(2.5rem, 6vw, 5.5rem) !important;
  line-height: var(--lm-lh-tight) !important;
  letter-spacing: var(--lm-tracking-tight) !important;
  text-shadow: none !important;
}

.nectar-slider-wrap .swiper-slide .content p {
  font-family: var(--lm-font-body) !important;
  font-size: var(--lm-fs-md) !important;
  line-height: var(--lm-lh-base) !important;
  letter-spacing: 0 !important;
  max-width: 50ch;
}

/* Slider pagination dots — minimal */
.nectar-slider-wrap .swiper-pagination-bullet {
  background: rgba(245,241,234,0.4) !important;
  width: 8px !important;
  height: 8px !important;
  margin: 0 6px !important;
  opacity: 1 !important;
}
.nectar-slider-wrap .swiper-pagination-bullet-active {
  background: var(--lm-bone) !important;
}

/* -------------------------------------------------------------------------
   6. PORTFOLIO / GALLERY GRIDS (Salient's project grid)
   Used for the table collection — needs to read like a gallery, not a shop.
   ------------------------------------------------------------------------- */

#portfolio,
.portfolio-wrap {
  background: var(--lm-bg);
}

#portfolio .col {
  padding: var(--lm-s-4);
}

/* Project tile — strip Salient's box hover, replace with subtle scale */
#portfolio .col .work-item {
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: hidden;
}

#portfolio .col .work-item img {
  transition: transform var(--lm-dur-slow) var(--lm-ease);
  filter: saturate(0.95);
}

#portfolio .col .work-item:hover img {
  transform: scale(1.02);
}

/* Project caption */
#portfolio .col .work-item .work-meta,
#portfolio .col .work-item h4 {
  font-family: var(--lm-font-display) !important;
  font-weight: 400 !important;
  font-size: var(--lm-fs-lg) !important;
  letter-spacing: var(--lm-tracking-tight) !important;
  color: var(--lm-text) !important;
  background: transparent !important;
  padding: var(--lm-s-4) 0 0 !important;
  text-align: left !important;
}

#portfolio .col .work-item .work-meta .category,
#portfolio .col .work-item p {
  font-family: var(--lm-font-body) !important;
  font-size: var(--lm-fs-xs) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--lm-tracking-eyebrow) !important;
  color: var(--lm-text-soft) !important;
  margin-top: var(--lm-s-2) !important;
}

/* -------------------------------------------------------------------------
   7. FOOTER
   ------------------------------------------------------------------------- */

#footer-outer {
  background: var(--lm-bg) !important;
  color: var(--lm-text-mute) !important;
  border-top: 1px solid var(--lm-rule);
  padding-top: var(--lm-s-8);
}

#footer-widgets,
#footer-outer #footer-widgets {
  padding-top: var(--lm-s-7) !important;
  padding-bottom: var(--lm-s-7) !important;
  border: 0 !important;
}

#footer-outer #footer-widgets .container .row .col h4,
#footer-outer .widget h4,
#footer-outer .widget-title {
  font-family: var(--lm-font-body) !important;
  font-size: var(--lm-fs-xs) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--lm-tracking-eyebrow) !important;
  color: var(--lm-text-soft) !important;
  margin-bottom: var(--lm-s-5) !important;
}

#footer-outer #footer-widgets .container ul li,
#footer-outer .widget li,
#footer-outer p,
#footer-outer a {
  font-family: var(--lm-font-body) !important;
  font-size: var(--lm-fs-sm) !important;
  color: var(--lm-text-mute) !important;
}

#footer-outer a:hover {
  color: var(--lm-walnut) !important;
}

#footer-outer #copyright {
  background: var(--lm-bg) !important;
  border-top: 1px solid var(--lm-rule) !important;
  padding: var(--lm-s-5) 0 !important;
}

#footer-outer #copyright p {
  font-size: var(--lm-fs-xs) !important;
  letter-spacing: var(--lm-tracking-wide);
  text-transform: uppercase;
  color: var(--lm-text-soft) !important;
}

/* -------------------------------------------------------------------------
   8. WOOCOMMERCE NEUTRAL POSITIONING
   Even though we're moving away from e-comm, the WooCommerce templates
   are still active. Make any visible WC pages match brand register.
   ------------------------------------------------------------------------- */

.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  font-family: var(--lm-font-display) !important;
  color: var(--lm-walnut) !important;
  font-size: var(--lm-fs-lg) !important;
}

.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
  font-family: var(--lm-font-display) !important;
  font-weight: 400 !important;
  letter-spacing: var(--lm-tracking-tight) !important;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  border-radius: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--lm-tracking-wide) !important;
  font-weight: 500 !important;
  background: var(--lm-ink) !important;
  color: var(--lm-bone) !important;
}

/* -------------------------------------------------------------------------
   9. RESPONSIVE — phone/tablet adjustments
   ------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  #header-outer #logo,
  .logo-key {
    letter-spacing: 0.18em;
    font-size: 1rem;
  }
}

@media (max-width: 690px) {
  .nectar-slider-wrap .swiper-slide .content h2 {
    font-size: clamp(1.75rem, 9vw, 3rem) !important;
  }

  .wpb_row.vc_row,
  .full-width-section {
    padding-top: var(--lm-s-7);
    padding-bottom: var(--lm-s-7);
  }
}

/* -------------------------------------------------------------------------
   10. AGGRESSIVE HEADING OVERRIDES — v0.3.0
   Salient injects skin-specific styles inline + via element-targeted
   selectors that beat plain h1..h6 specificity. We blanket-override
   inside .container-wrap so every heading on every page picks up our
   editorial type, regardless of which Salient/WPBakery component wraps
   it (heading-block, fancy-heading, special-heading-content, etc.).
   ------------------------------------------------------------------------- */

.container-wrap h1,
.container-wrap h2,
.container-wrap h3,
.container-wrap h4,
.container-wrap h5,
.container-wrap .heading-block,
.container-wrap .heading-block h1,
.container-wrap .heading-block h2,
.container-wrap .heading-block h3,
.container-wrap .heading-block h4,
.container-wrap .nectar-fancy-box h2,
.container-wrap .nectar-fancy-box h3,
.container-wrap [class*="fancy-heading"],
.container-wrap [class*="fancy-h"],
.container-wrap .special-heading-content,
.container-wrap .divider-with-text {
  font-family: var(--lm-font-display) !important;
  font-weight: 400 !important;
  letter-spacing: var(--lm-tracking-tight) !important;
  color: var(--lm-text) !important;
  text-transform: none !important;
  line-height: var(--lm-lh-tight) !important;
}

/* Cap heading sizes inside WPBakery rows so they don't shout —
   Salient defaults often go to 60-72px which fights luxury restraint. */

.container-wrap .wpb_text_column h1,
.container-wrap .wpb_wrapper h1 {
  font-size: clamp(2.25rem, 5vw, 4rem) !important;
}

.container-wrap .wpb_text_column h2,
.container-wrap .wpb_wrapper h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem) !important;
  max-width: 22ch;                                    /* tight measure */
  margin-left: auto;
  margin-right: auto;
}

.container-wrap .wpb_text_column h3,
.container-wrap .wpb_wrapper h3 {
  font-size: clamp(1.375rem, 2.5vw, 1.875rem) !important;
}

/* Italicise H2 inside content blocks for editorial feel */
.container-wrap .wpb_text_column h2 em,
.container-wrap .wpb_wrapper h2 em {
  font-style: italic;
}

/* -------------------------------------------------------------------------
   11. AGGRESSIVE SECTION SPACING
   Salient's full-width sections often have inline padding that fights us.
   ------------------------------------------------------------------------- */

.container-wrap .full-width-content > .col,
.container-wrap .full-width-section > .row-bg-wrap,
.container-wrap .vc_row.full-width-section {
  padding-top: var(--lm-s-9) !important;
  padding-bottom: var(--lm-s-9) !important;
}

/* Tighten rows that have stacked headings */
.container-wrap .vc_row .wpb_text_column {
  margin-bottom: 0 !important;
}

/* -------------------------------------------------------------------------
   12. SLIDER BUTTON OVERRIDE (heavy hand)
   Salient slider has its own button system with skin classes. Force
   our brand register onto any button-shaped element inside a slide.
   ------------------------------------------------------------------------- */

.nectar-slider-wrap .swiper-slide a.nectar-button,
.nectar-slider-wrap .swiper-slide .button-wrap a,
.nectar-slider-wrap .swiper-slide .nectar-button,
.swiper-slide .button {
  font-family: var(--lm-font-body) !important;
  font-size: var(--lm-fs-sm) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--lm-tracking-wide) !important;
  background: var(--lm-bone) !important;
  color: var(--lm-ink) !important;
  border: 1px solid var(--lm-bone) !important;
  border-radius: 0 !important;
  padding: var(--lm-s-4) var(--lm-s-7) !important;
  box-shadow: none !important;
  min-width: 180px;
  text-align: center;
  transition:
    background var(--lm-dur-base) var(--lm-ease),
    color var(--lm-dur-base) var(--lm-ease) !important;
}

.nectar-slider-wrap .swiper-slide a.nectar-button:hover,
.nectar-slider-wrap .swiper-slide .nectar-button:hover,
.swiper-slide .button:hover {
  background: transparent !important;
  color: var(--lm-bone) !important;
  border-color: var(--lm-bone) !important;
}

/* When the slide has a transparent background, swap the button polarity */
.nectar-slider-wrap .swiper-slide[data-transparent="true"] a.nectar-button {
  background: var(--lm-ink) !important;
  color: var(--lm-bone) !important;
  border-color: var(--lm-ink) !important;
}

/* -------------------------------------------------------------------------
   13. PAGE/SECTION BACKGROUND TONING
   Force bone background on common Salient containers that occasionally
   render white when skin is set to default.
   ------------------------------------------------------------------------- */

#ajax-content-wrap,
.container-wrap,
.main-content,
.row-bg-wrap.using-bg-color,
.full-width-section,
.full-width-content {
  background-color: var(--lm-bg) !important;
}

/* Exception: the slider wrap itself keeps its own bg image */
.nectar-slider-wrap,
.nectar-slider-wrap .swiper-slide {
  background-color: transparent !important;
}

/* -------------------------------------------------------------------------
   14. STRIP DEFAULT SALIENT "FUN" — drop shadows, color washes, etc.
   ------------------------------------------------------------------------- */

#ajax-content-wrap *[class*="nectar-button"],
#ajax-content-wrap .button {
  text-shadow: none !important;
}

.nectar-fancy-box {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 1px solid var(--lm-rule) !important;
}

/* =========================================================================
   END components.css — v0.3.0
   ========================================================================= */