/*
Theme Name: Magnetize Marketing Child
Template: magnetize-theme
Author: Magnetize Marketing
Description: Child theme for Magnetize Marketing. Adds a mobile optimisation layer on top of the parent theme. Add your custom CSS below.
Version: 1.1.0
License: GNU General Public License v2 or later
Text Domain: magnetize-child
*/

/* ===========================================================================
   MOBILE OPTIMISATION LAYER
   The parent theme only has one real breakpoint (900px). Everything below
   adds the missing tablet / phone tiers. Safe to edit.
   ========================================================================= */

/* --- 1. Viewport height ---------------------------------------------------
   100vh on mobile includes the address bar, so the hero gets clipped and
   jumps as the bar hides. svh = "small viewport height" = the honest value. */
@supports (height: 100svh) {
  .mm-hero { min-height: 100svh; }
}

/* --- 2. Tablet ---------------------------------------------------------- */
@media (max-width: 900px) {
  .mm-section        { padding: 44px 20px; }
  .mm-wrap,
  .mm-wrap--wide     { padding: 0 20px; }
  .mm-pole           { padding: 40px 28px; min-height: 0; }
  .mm-pole__tag      { font-size: 3.4rem; top: 14px; right: 18px; }
  .mm-layout         { padding: 100px 20px 32px; }

  /* Close the mobile drawer when a link inside it is tapped (see js). */
  .mm-nav__menu      { max-height: calc(100svh - 70px); overflow-y: auto; }
  .mm-nav__menu a    { display: block; padding: 6px 0; }
}

/* --- 3. The interactive rings ------------------------------------------
   These are drag-to-rotate 3D canvases. At 90vh on a phone they swallow
   vertical swipes, so the page can't be scrolled past them. Shrink them and
   let the ring app's own touch handling work in a smaller area. */
@media (max-width: 900px) {
  .mm-ring-embed {
    height: min(560px, 68svh);
  }
  .mm-ring-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }
}

/* --- 4. Phone ----------------------------------------------------------- */
@media (max-width: 600px) {
  .mm-section        { padding: 36px 16px; }
  .mm-wrap,
  .mm-wrap--wide     { padding: 0 16px; }
  .mm-pole           { padding: 32px 20px; flex: 1 1 100%; }
  .mm-pole__tag      { font-size: 2.6rem; opacity: .14; }
  .mm-pole p         { max-width: none; }
  .mm-layout         { padding: 92px 16px 28px; }
  .mm-nav__inner     { padding: 0 16px; }

  /* Buttons: stack full-width instead of overflowing side by side. */
  .mm-hero__content .mm-btn,
  .mm-btn--sm {
    width: 100%;
    justify-content: center;
  }
  .mm-btn {
    padding: 14px 22px;
    min-height: 48px;          /* Apple/Google minimum touch target */
  }

  /* Decorative offset SVG pushes the layout wide on small screens. */
  .mm-rings-svg      { right: -60px; bottom: -60px; width: 200px; height: 200px; }

  .mm-ring-embed     { height: min(460px, 60svh); }
}

/* --- 5. Very small phones (360px and below) ----------------------------- */
@media (max-width: 380px) {
  .mm-section        { padding: 30px 14px; }
  .mm-pole           { padding: 26px 16px; }
  .mm-pole__tag      { display: none; }
}

/* --- 6. Touch targets everywhere --------------------------------------- */
@media (hover: none) {
  .mm-nav__menu a,
  .mm-footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Hover-lift transforms just cause sticky states on touch. */
  .mm-btn:hover,
  [data-mag]:hover { transform: none; }
}

/* ===========================================================================
   YOUR CUSTOM CSS BELOW
   ========================================================================= */
/* .mm-nav__cta { background: var(--color-action); } */