/*
Theme Name: Banya Child Theme
Theme URI: https://banya.themerex.net/
Description: Banya is a Premium WordPress theme that has built-in support for popular Page Builders, slider with swipe gestures, and is SEO- and Retina-ready. The unique system of inheritance and override options allows setting up individual parameters for different sections of your site and supported plugins.
Author: ThemeREX
Author URI: https://themerex.net/
Version: 1.8.0
Tested up to: 6.8
Requires at least: 5.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, e-commerce, portfolio, grid-layout, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-image-header, featured-images, flexible-header, footer-widgets, full-width-template, microformats, post-formats, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks
Text Domain: banya
Template: banya
*/


/* =Child-Theme customization starts here
------------------------------------------------------------ */

/* LearnDash course pages: remove the blog-author card from course content. */
body.single-sfwd-courses .author_info {
	display: none !important;
}

/* LearnDash Focus Mode: keep course return, remove previous/next module buttons. */
.learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions .ld-content-action:first-child,
.learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions .ld-content-action:last-child {
	display: none !important;
}

.learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions {
	justify-content: center;
}

/* Header breakpoint: keep the full desktop header on laptop widths. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.elementor-element-3d91cb3.elementor-hidden-tablet {
		display: flex !important;
	}

	.elementor-element-5918f59 {
		display: none !important;
	}

	.elementor-element-3d91cb3 > .e-con-inner {
		padding-left: 48px !important;
		padding-right: 48px !important;
	}

	.elementor-element-3d91cb3 .trx-addons-main-nav-menu {
		gap: 0 !important;
	}
}

@media (max-width: 1023px) {
	.elementor-element-3d91cb3 {
		display: none !important;
	}

	.elementor-element-5918f59 {
		display: flex !important;
	}
}

/* =====================================================
   AMYRA MAH — DESIGN SYSTEM
   Extracted from homepage (page 56773)
   Source of truth for all pages.
   ===================================================== */

:root {
  /* --- Colors --- */
  --am-bg-main: #E5E1DB;
  --am-bg-white: #FFFFFF;
  --am-bg-cream: #FAF3EB;
  --am-bg-dark: #4E2A45;
  --am-bg-dark-alt: #502446;
  --am-bg-teal: #6ACCCA;
  --am-bg-teal-light: #ABDCD5;
  --am-bg-header: #614051;
  --am-bg-footer: #614051;

  --am-text-heading: #1A2224;
  --am-text-body: #494747;
  --am-text-muted: #7E7A76;
  --am-text-meta: #AFAAA4;
  --am-text-on-dark: #FDFAF7;
  --am-text-on-teal: #1A2224;

  --am-accent: #B97455;
  --am-accent-hover: #A6684C;
  --am-border: #E5E1DB;

  --am-btn-bg: #0B0B0B;
  --am-btn-text: #FAF3EB;
  --am-btn-hover-bg: #B97455;
  --am-btn-hover-text: #FAF3EB;

  /* --- Typography --- */
  --am-font-display: "Cinzel", serif;
  --am-font-body: "Open Sans", sans-serif;
  --am-font-menu: "Work Sans", sans-serif;

  --am-h1-size: 57px;
  --am-h2-size: 47px;
  --am-h3-size: 35px;
  --am-h4-size: 28px;
  --am-h5-size: 23px;
  --am-h6-size: 19px;
  --am-body-size: 18px;
  --am-small-size: 14px;
  --am-caption-size: 13px;

  --am-heading-weight: 400;
  --am-heading-weight-bold: 500;
  --am-body-weight: 400;
  --am-btn-weight: 600;
  --am-menu-weight: 500;

  --am-body-line-height: 1.6;
  --am-heading-line-height: 1.1;

  /* --- Layout --- */
  --am-container-max: 1500px;
  --am-section-padding-x: 48px;
  --am-section-padding-y-sm: 48px;
  --am-section-padding-y-md: 80px;
  --am-section-padding-y-lg: 100px;
  --am-gap-widgets: 20px;

  /* --- Transitions --- */
  --am-transition-fast: 150ms ease;
  --am-transition-normal: 300ms ease;
  --am-transition-slow: 500ms cubic-bezier(0.16, 1, 0.3, 1);
  --am-entrance-duration: 600ms;
  --am-entrance-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* --- Buttons --- */
  --am-btn-radius: 0px;
  --am-btn-padding: 11px 24px;
  --am-btn-font-size: 13px;
  --am-btn-letter-spacing: 1.1px;
}

/* --- Tablet breakpoint --- */
@media (max-width: 1023px) {
  :root {
    --am-h1-size: 40px;
    --am-h2-size: 34px;
    --am-h3-size: 28px;
    --am-h4-size: 24px;
    --am-h5-size: 20px;
    --am-h6-size: 17px;
    --am-body-size: 16px;
    --am-section-padding-x: 32px;
  }
}

/* --- Mobile breakpoint --- */
@media (max-width: 767px) {
  :root {
    --am-h1-size: 32px;
    --am-h2-size: 28px;
    --am-h3-size: 24px;
    --am-h4-size: 20px;
    --am-h5-size: 18px;
    --am-h6-size: 16px;
    --am-body-size: 16px;
    --am-section-padding-x: 20px;
  }
}

/* =====================================================
   GLOBAL COMPONENT STYLES
   ===================================================== */

/* --- Buttons: Primary (dark bg, cream text, no radius) --- */
.elementor-button {
  background-color: var(--am-btn-bg) !important;
  color: var(--am-btn-text) !important;
  border-radius: var(--am-btn-radius) !important;
  font-family: var(--am-font-body) !important;
  font-size: var(--am-btn-font-size) !important;
  font-weight: var(--am-btn-weight) !important;
  letter-spacing: var(--am-btn-letter-spacing) !important;
  text-transform: uppercase !important;
  transition: background-color var(--am-transition-normal),
              color var(--am-transition-normal) !important;
  border: none !important;
}

.elementor-button:hover,
.elementor-button:focus-visible {
  background-color: var(--am-btn-hover-bg) !important;
  color: var(--am-btn-hover-text) !important;
}

.elementor-button:focus-visible {
  outline: 2px solid var(--am-accent) !important;
  outline-offset: 2px !important;
}

/* --- Links: accent copper color --- */
.elementor-widget-text-editor a:not(.elementor-button) {
  color: var(--am-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--am-transition-fast);
}

.elementor-widget-text-editor a:not(.elementor-button):hover {
  color: var(--am-accent-hover);
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Footer cleanup: hide Banya default footer if custom footer visible --- */
.footer_wrap .elementor-element-62ccbca {
  display: none !important;
}

/* =====================================================
   END DESIGN SYSTEM
   ===================================================== */

/* =====================================================
   FOOTER CLEANUP — Hide Banya demo footer content
   The theme footer (footer-custom-21) contains Banya demo
   content. On the homepage, the inline custom footer (f10a100)
   is used. On other pages, we hide the demo-specific elements.
   TODO: Rebuild footer-21 in Elementor with Amyra content.
   ===================================================== */

/* Hide Banya demo footer address, phone, email */
.footer_wrap [href*="banyawellness"],
.footer_wrap [href*="themerex"],
.footer_wrap [href*="ThemeRex"],
.footer_wrap [href*="dribbble.com/ThemeREX"],
.footer_wrap [href*="behance.net/themerex"],
.footer_wrap [href*="facebook.com/ThemeRex"] {
  display: none !important;
}

/* Hide Banya demo footer links to /services/, /pricing/, /about-us/ */
.footer_wrap a[href*="/services/"],
.footer_wrap a[href*="/pricing/"],
.footer_wrap a[href*="/about-us/"] {
  display: none !important;
}

/* Hide "Quiet bath time" heading and Banya promo text in footer */
.footer_wrap h1:not(:empty) {
  visibility: hidden;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* Hide Vancouver address */
.footer_wrap .elementor-text-editor:first-child {
  display: none !important;
}

/* =====================================================
   SECTION PADDING STANDARDIZATION
   Standard content padding: 48px horizontal.
   Header/footer keep their own spacing.
   ===================================================== */

/* Hero content section — was 70px */
.elementor-element-7c6f558 {
  padding-left: var(--am-section-padding-x) !important;
  padding-right: var(--am-section-padding-x) !important;
}

/* "You Are A Prototype" dark section — was 64px */
.elementor-element-7f2530f {
  padding-left: var(--am-section-padding-x) !important;
  padding-right: var(--am-section-padding-x) !important;
}

/* Testimonials carousel section — was 32px */
.elementor-element-563becd {
  padding-left: var(--am-section-padding-x) !important;
  padding-right: var(--am-section-padding-x) !important;
}

/* =====================================================
   H6 / EYEBROW LABEL STANDARDIZATION
   H6 is used for two roles on the homepage:
   1. Subheadings (sentence case, larger)
   2. Eyebrow labels (UPPERCASE, smaller, tracked)
   We standardize the eyebrow treatment.
   ===================================================== */

/* Eyebrow labels: small uppercase Open Sans with consistent tracking */
.elementor-widget-heading h6[style*="uppercase"],
.elementor-heading-title.elementor-size-default[style*="uppercase"] {
  font-family: var(--am-font-body) !important;
  font-size: var(--am-caption-size) !important;
  font-weight: 500 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
}

/* =====================================================
   MOBILE READABILITY FIXES
   ===================================================== */

/* Ensure card body text is readable on mobile */
@media (max-width: 767px) {
  /* Gateway cards text — bump from 13px to 15px */
  .elementor-element-fbee426 .elementor-widget-text-editor,
  .elementor-element-fbee426 .elementor-text-editor p {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  /* Ensure buttons meet minimum tap target */
  .elementor-button {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* =====================================================
   CARD COLUMN ALIGNMENT (global)
   Cards built as: image -> icon-box -> spacer -> button.
   Uneven description lengths left the buttons on different
   baselines. Make the column a flex stack and push the
   trailing button to the bottom so every card in a row
   ends on the same line, at every breakpoint.
   ===================================================== */

.elementor-widget-wrap:has(> .elementor-widget-icon-box):has(> .elementor-widget-button) {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
}

.elementor-widget-wrap:has(> .elementor-widget-icon-box) > .elementor-widget-button {
  margin-top: auto;
}

/* The fixed-height spacer above the button is redundant once the
   button auto-aligns; collapse it so cards don't gain dead space. */
.elementor-widget-wrap:has(> .elementor-widget-icon-box):has(> .elementor-widget-button)
  > .elementor-widget-spacer:last-of-type {
  display: none;
}

/* -----------------------------------------------------
   Flex-container cards (image panel + text panel + CTA).
   A trailing button is pushed to the bottom of its
   container. Safe globally: margin-top:auto only has an
   effect when the container is taller than its content,
   which is exactly the equal-height card case.
   ----------------------------------------------------- */

.e-con > .elementor-widget-button:last-child,
.e-con-inner > .elementor-widget-button:last-child {
  margin-top: auto;
}

/* Equal-height card panels. Scoped to the Workshops page for
   now; widen the selector once verified on the other templates. */
body.page-id-53128 .e-con-inner > .e-con.e-child > .e-con.e-child:last-child {
  flex-grow: 1;
}