/* Nature palette overrides — dark brown stays the primary dark color;
   the tan/gold accent becomes orange, buttons flip to dark-brown-bg +
   orange text, and two homepage sections pick up sky-blue / moss-green
   backgrounds for variety. Loaded after site.css so these win. */

:root {
  --_colors---core-accent-color--accent-primary: #DD7A1F;
  --_colors---core-accent-color--accent-primary-hover: #B8630F;
  --_colors---text-color--text-accent-on-primary: #DD7A1F;
  --_colors---text-color--text-accent-on-primary-hover: #B8630F;

}

/* .button rules reference accent-primary/text-on-accent-primary directly rather than
   the button--button-primary-* tokens above, so override them explicitly.
   Uses walnut-mid (not the darkest walnut) so buttons stay visible against the
   nav bar and hero overlay, which are already the darkest brown. */
.button, .button.on-inverse {
  background-color: var(--_colors---core-accent-color--accent-secondary);
  color: #DD7A1F;
  border: 1px solid #DD7A1F;
}
.button:hover, .button.on-inverse:hover {
  background-color: var(--_colors---core-neutral-color--neutral-inverse);
  color: #DD7A1F;
}
.button:active, .button.on-inverse:active {
  background-color: var(--_colors---core-accent-color--accent-secondary);
  color: #DD7A1F;
}

/* Outline/secondary buttons ("See work") — orange text + border instead of dark ink */
.button.is-secondary {
  color: #DD7A1F;
  box-shadow: 0 0 0 1px #DD7A1F inset;
}
.button.is-secondary:hover {
  box-shadow: 0 0 0 2px #DD7A1F inset;
}

/* Nature-toned section backgrounds */
.section.section-sky {
  background-color: #A9CDE0;
  /* This section's background matches the quote form's right panel right
     above it, so the default section top padding reads as a huge blank
     gap since there's no visible seam. Trim it down. */
  padding-top: 48px;
}
.section.section-moss {
  background-color: #76AD55;
}

/* Header "Request quote" button — distinct from the hero's "Get quote" button
   (that one keeps class w-button; this one is w-inline-block) */
.button.on-inverse.w-inline-block {
  background-color: #85D656;
  color: #FFFFFF;
  border: 1px solid #A9CDE0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.button.on-inverse.w-inline-block:hover {
  background-color: #71B649;
  color: #FFFFFF;
}
.button.on-inverse.w-inline-block:active {
  background-color: #85D656;
  color: #FFFFFF;
}

/* Nav brand name — match the quote form's submit button font, sized 50% larger,
   with the header row grown to fit it. */
[data-brand-name="true"].paragraph_large {
  font-family: 'Playfair Display', serif;
  font-size: 1.7rem;
}
.nav_logo {
  height: 53.19px;
}
/* Mobile dropdown menu — site.css gives it a card shape (padding, rounded
   corners, shadow) but leaves the background transparent, so the menu
   items float directly over the hero image with no backing and are hard
   to read. Give it a solid moss-green background to match. Scoped to the
   same 991px breakpoint site.css uses for the dropdown-card treatment. */
@media screen and (max-width: 991px) {
  .nav_menu {
    background-color: #76AD55;
  }
  /* site.css swaps this to a dark tan for mobile, presumably for a white
     dropdown card — on our green card that's low-contrast, so keep the
     same light cream color the links use on desktop. */
  .nav_link.on-inverse {
    color: #E8DFD0;
  }
}
@media screen and (max-width: 479px) {
  /* Hide the "Request quote" button in the mobile header — there's not
     enough room next to the larger brand text and hamburger icon. */
  .button.on-inverse.w-inline-block {
    display: none;
  }
  [data-brand-name="true"].paragraph_large {
    font-size: 1.3rem;
  }
  .nav_logo {
    height: auto;
    min-height: 2.5rem;
    padding: 0.35rem 0;
  }
}

/* Header "Request quote" button — all caps */
.button.on-inverse.w-inline-block {
  text-transform: uppercase;
}

/* Hero content card — fully transparent instead of the translucent/blurred box */
.card.on-inverse {
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

/* Hero "Get quote" button — green background, white text (leaves "See work",
   which also carries .is-secondary, untouched) */
.button.on-inverse.w-button:not(.is-secondary) {
  background-color: #85D656;
  color: #FFFFFF;
  border: 1px solid #A9CDE0;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.button.on-inverse.w-button:not(.is-secondary):hover {
  background-color: #71B649;
  color: #FFFFFF;
  border-color: #A9CDE0;
}

/* "Detailed mountain designs" tab group — the active tab was picking up an
   unrelated brown color override and visibly swapping color as scroll-driven
   tab switching changed which one was "current". Neutralize the highlight
   entirely so no tab shows a colored background. */
.tab_menu-button.w--current {
  background-color: rgba(255,255,255,0.4);
  color: inherit;
}
.tab_menu-button.w--current:hover {
  background-color: var(--_colors---current-color--current-a05);
  color: inherit;
}

/* Tab cards ("Detailed mountain designs" and its siblings) — title font
   matches the section header, and less gap between title and description */
.tab_menu-button .paragraph_xlarge {
  font-family: 'Fraunces', sans-serif;
  font-size: 17px;
  line-height: 1.2;
}
@media screen and (min-width: 992px) {
  /* Card headers read small next to the large mountain photos on wider
     screens — size up on desktop only, mobile stays as-is. */
  .tab_menu-button .paragraph_xlarge {
    font-size: 22px;
    line-height: 1.25;
  }
}
.tab_menu-button .padding-top_xsmall {
  padding-top: 0.25rem;
}

/* Scroll-triggered text-reveal animation (Webflow IX2 split-text effect)
   isn't completing reliably outside Webflow's own hosting — most heading
   and eyebrow text across the site was stuck at opacity:0/visibility:hidden
   set inline, waiting for a GSAP tween that never ran. Force it visible. */
.gsap_split_word {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Hero text card — span 60% of the page width instead of the default
   medium container size */
.card.max-width_medium.on-inverse {
  max-width: 60vw;
}
@media screen and (max-width: 767px) {
  .card.max-width_medium.on-inverse {
    max-width: 100%;
  }
}

/* Hero H1 — 20% smaller than the default 3rem */
.heading_hero {
  font-size: 2.4rem;
}

/* Tab cards — thin white outline at rest, removed on hover since the
   background tint already signals interactivity; reduced inside padding,
   gap between cards, and a translucent white background */
.tab_menu-button {
  border: 1px solid #FFFFFF;
  background-color: rgba(255,255,255,0.4);
  padding: 0.6em 1em;
}
.tab_menu-button:hover {
  border-color: transparent;
}
.w-tab-menu.flex_vertical {
  row-gap: 14px;
}

/* "Beautiful Craftmanship..." heading — shift up 40px */
#feature-section .heading_primary {
  margin-top: -40px;
}

/* Removed the "What our customers say" eyebrow above the testimonials
   heading — shift the heading up to fill the space */
#testimonials-section .heading_primary {
  margin-top: -40px;
}

/* Feature-section tab image — was forced to a 1:1 square, then to match
   the cards column height, both of which cropped the left/right edges
   via object-fit:cover. Use the image files' real proportions (582x399)
   instead so nothing gets cropped; full width, height follows from the
   ratio and may end up shorter than the cards column, which is fine. */
#feature-section .w-tab-pane {
  height: auto;
}
#feature-section .image-ratio_1x1 {
  aspect-ratio: 582 / 399;
  height: auto;
  width: 100%;
}

/* Trim the large gap between the feature section and "Mountain
   landscapes in wood" below it — both were using the default 112px
   section padding on the sides that face each other. */
#feature-section {
  padding-bottom: 48px;
}
.section.is-secondary {
  padding-top: 48px;
}

/* Only headings on brown/walnut backgrounds get logo-blue; feature and
   testimonials sections are green, so they keep their original color. */
.section.is-secondary .heading_primary {
  color: #A9CDE0;
}

/* Testimonials section hidden for now — content kept in the markup,
   just not rendered, so it's easy to bring back later. */
#testimonials-section {
  display: none;
}

/* Footer brand name — match the header's font treatment now that it
   says the same "Mountain Maker Studio" instead of being all-caps */
.footer-brand-name {
  font-family: 'Playfair Display', serif;
  text-transform: none;
}

/* Footer logo + company title — 1.5x their previous size (40px -> 60px
   icon, 22.4px -> 33.6px text) */
.logo-link {
  height: 3.75rem;
}
.footer-brand-name {
  font-size: 33.6px;
}

/* Main menu (Products/About/Support) — larger text, and on desktop push
   the whole group flush against the "Request quote" button on the right
   instead of floating centered between it and the logo. nav_left and
   nav_right both grow equally by default, which is what centers
   nav_center; giving nav_right flex:none lets nav_left absorb all the
   free space instead. */
.nav_link {
  font-size: 18px;
}
@media screen and (min-width: 992px) {
  .nav_right {
    flex: none;
  }
}

/* "Mountain Landscapes in Wood" grid — the tall left photo (cherry wood
   detail close-up) is dropped on mobile so only the two landscape-ish
   shots (ash, black walnut, oak) show, stacked in the single column
   this grid already collapses to at this breakpoint. */
@media screen and (max-width: 767px) {
  .landscape-photo-tall {
    display: none;
  }
}

/* Mobile dropdown menu — right-justify items so they stack under the
   hamburger button instead of hugging the left edge of the panel. */
@media screen and (max-width: 991px) {
  .nav_menu-list {
    align-items: flex-end;
  }
  .nav_menu-list-item {
    text-align: right;
  }
}