/**
 * Maverick Distilling — Brand Patterns
 *
 * Reusable classes for treatments Elementor's controls cannot produce.
 * Apply them in the editor via a widget's Advanced -> CSS Classes field.
 *
 * Naming: mvk-<block>__<element> -- <modifier>  (BEM, mvk- prefixed)
 *
 * What is deliberately NOT here: one-off colors, paddings, font sizes.
 * Those belong to Elementor controls so the client can edit them.
 */

/* ==================================================================
   1. Eyebrow / overline label
   The site's signature. Gold, wide-tracked, uppercase, above headings.
   ================================================================== */

.mvk-eyebrow {
  display: block;
  font-family: var(--mvk-font-body);
  font-size: var(--mvk-size-eyebrow);
  font-weight: 400;
  letter-spacing: var(--mvk-track-eyebrow);
  text-transform: uppercase;
  color: var(--mvk-gold-deep); /* default: on cream */
}

/* On dark backgrounds, switch to the warm gold and add a shadow.
   The shadow is load-bearing: these labels sit over photography where
   luminance varies, and without it they disappear into bright patches. */
.mvk-eyebrow--on-dark {
  color: var(--mvk-gold-warm);
  text-shadow: 0 1px 14px rgba(15, 13, 11, 0.55);
}

/* ==================================================================
   2. Short gold rule — used under centered headings
   ================================================================== */

.mvk-rule {
  display: block;
  width: 72px;
  height: 1px;
  background: var(--mvk-gold);
  border: 0;
  margin: 0;
}

.mvk-rule--center { margin-inline: auto; }

/* ==================================================================
   3. Hairline grid
   The bordered cell grid used for process steps and value props.
   Achieved with a 1px gap over a rule-colored parent — gives clean
   single-width interior lines with no doubled borders.
   ================================================================== */

.mvk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--mvk-rule-light);
  border: 1px solid var(--mvk-rule-light);
}

.mvk-grid > * { background: var(--mvk-ink-panel); }

.mvk-grid--on-cream {
  background: var(--mvk-rule-dark);
  border-color: var(--mvk-rule-dark);
}

.mvk-grid--on-cream > * { background: var(--mvk-cream); }

/* ==================================================================
   4. Product bottle treatment
   The client's bottle shots are photographed on white. Multiply blend
   dissolves that white into the cream panel so the bottle reads as
   placed rather than pasted. Requires a light parent background —
   it will render as a black box on dark, so guard usage.
   ================================================================== */

.mvk-bottle {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* ==================================================================
   5. Split section — text column beside a full-bleed image column
   The image column runs to the viewport edge; only the text column
   is gutter-padded. Section itself must have zero horizontal padding.
   ================================================================== */

.mvk-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0;
  align-items: stretch;
  width: 100%;
}

.mvk-split__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: var(--mvk-section-y) var(--mvk-gutter);
}

.mvk-split__media {
  min-height: clamp(400px, 60vh, 680px);
  background-size: cover;
  background-position: center;
}

/* ==================================================================
   6. Scroll motion
   Native scroll-driven animations where supported. The .is-visible
   class is the IntersectionObserver fallback (Safari / Firefox) and
   is applied by assets/js/maverick.js.
   ================================================================== */

@keyframes mvkRise {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: none; }
}

@keyframes mvkPan {
  from { transform: scale(var(--mvk-pan-scale)) translateY(-3%); }
  to   { transform: scale(var(--mvk-pan-scale)) translateY(3%); }
}

@keyframes mvkPanSoft {
  from { transform: scale(var(--mvk-pan-scale-soft)) translateY(-1.2%); }
  to   { transform: scale(var(--mvk-pan-scale-soft)) translateY(1.2%); }
}

/* --- Reveal ------------------------------------------------------- */

.mvk-reveal { opacity: 0; }

@supports (animation-timeline: view()) {
  .mvk-reveal {
    opacity: 1;
    animation: mvkRise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }
}

/* Fallback path: JS adds .is-visible on intersection. */
.mvk-reveal.is-visible {
  animation: mvkRise 0.7s cubic-bezier(0.2, 0, 0.2, 1) both;
}

/* --- Parallax ----------------------------------------------------- */

.mvk-parallax { overflow: hidden; }

.mvk-parallax > img,
.mvk-parallax > .mvk-parallax__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@supports (animation-timeline: view()) {
  .mvk-parallax > img,
  .mvk-parallax > .mvk-parallax__img {
    animation: mvkPan linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }

  /* Gentler pan for product imagery — the 14% scale of the standard
     pan crops bottles out of frame. */
  .mvk-parallax--soft > img,
  .mvk-parallax--soft > .mvk-parallax__img {
    animation-name: mvkPanSoft;
  }
}

/* --- Motion preference ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .mvk-reveal,
  .mvk-reveal.is-visible,
  .mvk-parallax > img,
  .mvk-parallax > .mvk-parallax__img {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==================================================================
   7. Sticky header + shrinking logo
   .mvk-stuck is toggled on <body> by assets/js/maverick.js.
   Targets the Elementor Theme Builder header container, which must be
   given the CSS class mvk-header in the editor.
   ================================================================== */

.mvk-header {
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.35s ease, border-color 0.35s ease;
}

.mvk-stuck .mvk-header {
  background: rgba(15, 13, 11, 0.95);
  border-bottom-color: rgba(193, 149, 74, 0.2);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
}

.mvk-header__logo img {
  display: block;
  width: auto;
  height: var(--mvk-logo-h);
  transform-origin: center;
  transition: transform 0.35s var(--mvk-header-ease);
}

.mvk-stuck .mvk-header__logo img { transform: scale(0.56); }

@media (max-width: 700px) {
  .mvk-header__logo img { height: var(--mvk-logo-h-sm); }
  .mvk-stuck .mvk-header__logo img { transform: scale(0.71); }
}

/* ==================================================================
   8. Nav separators
   Thin gold rules between top-level nav items. Applied to an
   Elementor Nav Menu widget carrying the mvk-nav class.
   ================================================================== */

.mvk-nav .elementor-nav-menu > li + li {
  border-left: 1px solid var(--mvk-rule-gold);
}

.mvk-nav .elementor-nav-menu > li + li > a { padding-left: 1.1em; }

/* ==================================================================
   9. Utilities
   ================================================================== */

.mvk-measure     { max-width: 62ch; }
.mvk-measure--sm { max-width: 52ch; }
.mvk-balance     { text-wrap: balance; }
.mvk-pretty      { text-wrap: pretty; }

/* ==================================================================
   10. Rendered Claude Design pages
   The approved design markup is installed inside a full-width Elementor
   HTML widget. These rules provide the small amount of responsive chrome
   and interaction state that the design-only runtime previously supplied.
   ================================================================== */

.mvk-design-page {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  overflow-x: clip;
}

.mvk-design-page,
.mvk-design-page * { box-sizing: border-box; }

.mvk-design-page a:focus-visible,
.mvk-design-page button:focus-visible {
  outline: 2px solid var(--mvk-gold-warm);
  outline-offset: 4px;
}

.mvk-menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(251, 247, 239, 0.28);
  background: transparent;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}

.mvk-menu-toggle .elementor-button {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mvk-text-light);
  font: 10px/1 var(--mvk-font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mvk-menu-toggle span {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--mvk-text-light);
}

.mvk-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  overflow-y: auto;
  padding: 24px var(--mvk-gutter) 60px;
  background: var(--mvk-ink);
  color: var(--mvk-text-light);
  font-family: var(--mvk-font-body);
}

.mvk-mobile-menu.is-open { display: block; }

.mvk-mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
}

.mvk-mobile-menu__header img {
  display: block;
  width: auto;
  height: 46px;
}

.mvk-menu-close {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(251, 247, 239, 0.28);
  background: transparent;
  color: var(--mvk-text-light);
  font: 28px/1 var(--mvk-font-body);
  cursor: pointer;
}

.mvk-menu-close .elementor-button {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: 24px/1 var(--mvk-font-body);
}

.mvk-mobile-menu__links {
  display: flex;
  flex-direction: column;
}

.mvk-mobile-menu__links a {
  padding: 16px 0;
  border-bottom: 1px solid rgba(251, 247, 239, 0.1);
  color: var(--mvk-text-light);
  font-family: var(--mvk-font-display);
  font-size: clamp(23px, 6vw, 30px);
  line-height: 1.2;
  text-decoration: none;
}

.mvk-mobile-menu__links a:hover { color: var(--mvk-gold-warm); }

body.mvk-menu-open { overflow: hidden; }

@media (max-width: 1399px) {
  .mvk-design-nav__desktop { display: none !important; }
  .mvk-menu-toggle { display: flex; }
}

@media (max-width: 700px) {
  .mvk-design-nav { gap: 12px !important; }
  .mvk-design-nav__brand img { height: 62px !important; }
  .mvk-design-nav__actions > a { display: none !important; }
}

.mvk-step__number { color: rgba(251, 247, 239, 0.35); }
.mvk-step__title  { color: rgba(251, 247, 239, 0.72); }
.mvk-step__body   { color: rgba(251, 247, 239, 0.3); }

[data-mvk-step].is-active .mvk-step__number,
.mvk-step.is-active .mvk-step__number { color: var(--mvk-gold-warm); }
[data-mvk-step].is-active .mvk-step__title,
.mvk-step.is-active .mvk-step__title { color: var(--mvk-text-light); }
[data-mvk-step].is-active .mvk-step__body,
.mvk-step.is-active .mvk-step__body { color: rgba(251, 247, 239, 0.8); }

.mvk-step-caption-source { display: none !important; }

/* Scrim over hero photography. Depth values tuned against the
   client's imagery — top and bottom heavy, transparent through the
   middle so the subject stays visible. */
.mvk-scrim { position: relative; }

.mvk-scrim::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(15, 13, 11, 0.84) 0%,
    rgba(15, 13, 11, 0.36) 40%,
    rgba(15, 13, 11, 0.95) 100%
  );
}

.mvk-scrim > * { position: relative; z-index: 1; }

.mvk-design-page {
  --dh: var(--mvk-font-display) !important;
}