/*
 Theme Name: Twenty Twenty-Two Child
 Template: twentytwentytwo
 Version: 1.0
*/

/* ==========================================================================
   Responsive font overrides for Elementor headings
   Desktop sizes are set in Elementor; these scale them down for smaller screens.
   ========================================================================== */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
  /* Main page headings: 58px → 40px */
  .elementor-element-850f5d6,  /* Home */
  .elementor-element-38c84ef,  /* Pricing */
  .elementor-element-7ed6000,  /* Register */
  .elementor-element-3bec666 { /* Download */
    font-size: 40px !important;
  }

  /* "COMING SOON!": 47px → 34px */
  .elementor-element-6110a7c {
    font-size: 34px !important;
  }

  /* Subheadings: 29px → 22px */
  .elementor-element-578878b,
  .elementor-element-10d7732 {
    font-size: 22px !important;
  }

  /* Submit button: 31px → 24px */
  .elementor-element-da686f6 .elementor-button {
    font-size: 24px !important;
  }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
  /* Main page headings: 58px → 28px */
  .elementor-element-850f5d6,
  .elementor-element-38c84ef,
  .elementor-element-7ed6000,
  .elementor-element-3bec666 {
    font-size: 28px !important;
  }

  /* "COMING SOON!": 47px → 24px */
  .elementor-element-6110a7c {
    font-size: 24px !important;
  }

  /* Subheadings: 29px → 18px */
  .elementor-element-578878b,
  .elementor-element-10d7732 {
    font-size: 18px !important;
  }

  /* Submit button: 31px → 20px */
  .elementor-element-da686f6 .elementor-button {
    font-size: 20px !important;
  }
}

/* ==========================================================================
   Button label text: must be black (Elementor kit body color can override)
   ========================================================================== */
.image-button {
  padding: 0 !important;
  text-indent: 0 !important;
}
.image-button .button-label {
  color: #000 !important;
  width: 100% !important;
  padding: 4px !important;
  margin: 0 !important;
  text-align: center !important;
  position: static !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   Button panel border: must be dark (not inherited from body color)
   ========================================================================== */
.button-panel {
  border-color: #000 !important;
}

/* Studio Tour tab sidebar panel border */
.sticky-tab-panel .button-panel {
  border-color: #000 !important;
}

/* ==========================================================================
   Register page: fixed 100px side margins → responsive
   ========================================================================== */
.elementor-element-a50af0f {
  margin-left: clamp(16px, 8vw, 100px) !important;
  margin-right: clamp(16px, 8vw, 100px) !important;
}

/* ==========================================================================
   Metal-frame: prevent content clipping on short viewports
   The border-radius causes Elementor to add overflow:hidden, which clips
   content when min-height constrains the box on landscape tablets / laptops.
   ========================================================================== */
.metal-frame {
  overflow: visible !important;
}

/* Keep the rounded corners on the background only (pseudo-element) */
.metal-frame::before {
  border-radius: 12px;
  overflow: hidden;
}

/* On short viewports, reduce min-height so content isn't squeezed */
@media (max-height: 700px) {
  .metal-frame {
    min-height: auto !important;
  }
}

/* ==========================================================================
   Hamburger menu for mobile / tablet (≤ 900px)
   ========================================================================== */

/* Hamburger button — hidden on desktop */
.hamburger-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 1001;
  flex-shrink: 0;
}

.hamburger-btn span {
  display: block;
  width: 28px;
  height: 3px;
  background-color: #FCF4DC;
  margin: 5px 0;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hamburger → X animation when open */
.hamburger-btn.is-open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger-btn.is-open span:nth-child(2) {
  opacity: 0;
}
.hamburger-btn.is-open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobile nav overlay — hidden by default */
.mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 10, 0.95);
  z-index: 1000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.mobile-nav.is-open {
  display: flex;
}

.mobile-nav a {
  display: block;
  padding: 14px 40px;
  color: #FCF4DC;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  border-radius: 6px;
  transition: background-color 0.2s ease;
  width: 220px;
}

.mobile-nav a:hover {
  background-color: rgba(252, 244, 220, 0.1);
}

.mobile-nav a.mobile-active {
  background-color: rgba(252, 244, 220, 0.15);
  color: #fff;
}

/* Close button area at top of mobile nav */
.mobile-nav-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  color: #FCF4DC;
  font-size: 2rem;
  cursor: pointer;
  padding: 8px;
  line-height: 1;
}

/* ==========================================================================
   Studio Tour: responsive tab layout for mobile
   ========================================================================== */
@media (max-width: 900px) {
  /* Tabs: switch from sidebar (row) to stacked (column) */
  .elementor-element-b34e123 {
    --n-tabs-direction: column !important;
    --n-tabs-heading-width: 100% !important;
    --n-tabs-heading-direction: row !important;
    --n-tabs-title-font-size: 16px !important;
    --n-tabs-title-gap: 8px !important;
  }

  /* Tab headings: horizontal scrollable row at top */
  .elementor-element-b34e123 > .e-n-tabs > .e-n-tabs-heading {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  .elementor-element-b34e123 .e-n-tab-title {
    padding: 8px 12px !important;
    font-size: 14px !important;
  }

  /* Tab content: stack text and images vertically */
  .elementor-212 .e-n-tabs-content .e-con {
    --flex-direction: column !important;
    flex-direction: column !important;
  }

  /* Images inside tabs: full width */
  .elementor-212 .e-n-tabs-content img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Text containers: full width */
  .elementor-212 .e-n-tabs-content .e-con > .e-con {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 900px) {
  /* Show hamburger, hide ALL desktop nav elements */
  .hamburger-btn {
    display: block;
  }

  .global-header .button-panel,
  .global-header .button-panel .button-row,
  .global-header .button-panel .button-row .image-button,
  .global-header .header-spacer {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
  }

  /* Adjust header for mobile */
  .global-header {
    align-items: center;
    justify-content: space-between;
  }

  .logo-link {
    width: auto;
  }

  .logo {
    max-width: 80px;
  }

  .logo-text {
    font-size: 14px;
  }
}