/*
Theme Name: My T Maker — Astra Child
Theme URI: https://mytmaker.com
Description: Child theme for mytmaker.com. Brand tokens, section modules and GSAP micro-interactions for the My T Maker product site.
Author: Chattanooga Tshirt LLC
Template: astra
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: mytmaker-child
*/

/* =====================================================================
   1. TOKENS — change these, the whole site follows. No other file needs edits.
   ===================================================================== */
:root{
  /* brand (sampled from myTmaker.svg) */
  --mtm-red:#ed453a;
  --mtm-gold:#e2d121;
  --mtm-orange:#d96c2b;
  --mtm-ink:#1b1b1b;
  --mtm-paper:#ffffff;

  /* derived surfaces */
  --mtm-ink-2:#262626;
  --mtm-ink-3:#333333;
  --mtm-muted:#6b6b6b;
  --mtm-muted-dark:#a8a8a8;
  --mtm-line:rgba(27,27,27,.12);
  --mtm-line-dark:rgba(255,255,255,.14);
  --mtm-wash:#faf8f5;

  /* one gradient, reused everywhere */
  --mtm-grad:linear-gradient(100deg,var(--mtm-red) 0%,var(--mtm-orange) 55%,var(--mtm-gold) 100%);

  /* type scale (fluid — no media queries needed) */
  --mtm-fs-display:clamp(2.6rem,6vw,4.75rem);
  --mtm-fs-h2:clamp(1.9rem,3.6vw,3rem);
  --mtm-fs-h3:clamp(1.15rem,1.6vw,1.4rem);
  --mtm-fs-body:clamp(1rem,1.15vw,1.0625rem);
  --mtm-fs-small:.8125rem;

  /* rhythm */
  --mtm-section-y:clamp(4rem,8vw,7.5rem);
  --mtm-gap:clamp(1rem,2vw,2rem);
  --mtm-maxw:1180px;

  /* shape + depth */
  --mtm-r-sm:10px;
  --mtm-r:16px;
  --mtm-r-lg:24px;
  --mtm-shadow:0 1px 2px rgba(27,27,27,.05),0 8px 24px rgba(27,27,27,.07);
  --mtm-shadow-lift:0 18px 48px rgba(27,27,27,.16);
  --mtm-ring:0 0 0 3px rgba(237,69,58,.28);

  /* motion */
  --mtm-ease:cubic-bezier(.22,.61,.36,1);
  --mtm-fast:.18s;
  --mtm-med:.34s;
}

/* =====================================================================
   2. BASE
   ===================================================================== */
.mtm-section{padding-block:var(--mtm-section-y);position:relative;overflow:clip}
.mtm-section>.wp-block-group__inner-container,
.mtm-wrap{max-width:var(--mtm-maxw);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
.mtm-dark{background:var(--mtm-ink);color:var(--mtm-paper)}
.mtm-dark :is(h1,h2,h3,h4){color:var(--mtm-paper)}
.mtm-dark p{color:var(--mtm-muted-dark)}
.mtm-wash{background:var(--mtm-wash)}

.mtm-eyebrow{font-size:var(--mtm-fs-small);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mtm-red);margin:0 0 .75rem}
.mtm-dark .mtm-eyebrow{color:var(--mtm-gold)}
.mtm-title{font-size:var(--mtm-fs-h2);line-height:1.08;letter-spacing:-.02em;font-weight:800;margin:0 0 .75rem}
.mtm-display{font-size:var(--mtm-fs-display);line-height:1.02;letter-spacing:-.03em;font-weight:800;margin:0 0 1rem}
.mtm-lede{font-size:var(--mtm-fs-body);line-height:1.65;color:var(--mtm-muted);max-width:58ch;margin:0 0 1.75rem}
.mtm-grad-text{background:var(--mtm-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mtm-center{text-align:center}
.mtm-center .mtm-lede{margin-inline:auto}

/* =====================================================================
   3. BUTTONS — ink-bleed fill follows the cursor
   ===================================================================== */
.mtm-btn,
.wp-block-button.mtm-btn>.wp-block-button__link{
  --x:50%;--y:50%;
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem 1.9rem;border:0;border-radius:999px;cursor:pointer;
  font-weight:700;font-size:1rem;line-height:1;text-decoration:none;
  background:var(--mtm-ink);color:var(--mtm-paper);
  transition:transform var(--mtm-fast) var(--mtm-ease),box-shadow var(--mtm-med) var(--mtm-ease);
}
.mtm-btn::before,
.wp-block-button.mtm-btn>.wp-block-button__link::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(circle at var(--x) var(--y),var(--mtm-red) 0%,var(--mtm-orange) 45%,var(--mtm-gold) 120%);
  transform:scale(0);transform-origin:var(--x) var(--y);
  transition:transform var(--mtm-med) var(--mtm-ease);
}
.mtm-btn:hover::before,
.wp-block-button.mtm-btn>.wp-block-button__link:hover::before{transform:scale(1.6)}
.mtm-btn:hover,
.wp-block-button.mtm-btn>.wp-block-button__link:hover{transform:translateY(-2px);box-shadow:var(--mtm-shadow-lift);color:var(--mtm-paper)}
.mtm-btn:focus-visible,
.wp-block-button.mtm-btn>.wp-block-button__link:focus-visible{outline:0;box-shadow:var(--mtm-ring)}

.mtm-btn--ghost,
.wp-block-button.mtm-btn--ghost>.wp-block-button__link{background:transparent;color:var(--mtm-ink);box-shadow:inset 0 0 0 1.5px var(--mtm-line)}
.mtm-dark .mtm-btn--ghost,
.mtm-dark .wp-block-button.mtm-btn--ghost>.wp-block-button__link{color:var(--mtm-paper);box-shadow:inset 0 0 0 1.5px var(--mtm-line-dark)}

/* =====================================================================
   4. HERO — fabric unfold + print reveal
   ===================================================================== */
.mtm-hero{padding-block:clamp(3.5rem,7vw,6rem) var(--mtm-section-y);background:var(--mtm-paper)}
.mtm-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (max-width:900px){.mtm-hero__grid{grid-template-columns:1fr;text-align:center}
  .mtm-hero .mtm-lede{margin-inline:auto}.mtm-hero__cta{justify-content:center}}
.mtm-hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.mtm-hero__note{font-size:var(--mtm-fs-small);color:var(--mtm-muted);margin:1rem 0 0}

/* stage: the shirt + the art that "prints" onto it */
.mtm-stage{position:relative;aspect-ratio:1/1;border-radius:var(--mtm-r-lg);background:var(--mtm-wash);
  box-shadow:var(--mtm-shadow);display:grid;place-items:center;overflow:hidden;contain:paint}
.mtm-stage__shirt{width:86%;height:86%;object-fit:contain;filter:drop-shadow(0 12px 28px rgba(27,27,27,.13))}
.mtm-stage__art{position:absolute;width:34%;top:31%;left:50%;translate:-50% 0;
  clip-path:inset(0 0 100% 0);will-change:clip-path}
.mtm-stage__area{position:absolute;top:26%;left:50%;translate:-50% 0;width:42%;height:46%;
  border:2px dashed var(--mtm-red);border-radius:6px;opacity:.55;
  stroke-dasharray:10 8}
/* squeegee sweep that follows the print reveal */
.mtm-stage__squeegee{position:absolute;top:26%;left:50%;translate:-50% 0;width:46%;height:6px;
  background:var(--mtm-grad);border-radius:999px;opacity:0;filter:blur(1px);will-change:transform,opacity}

/* color-blend swatch row */
.mtm-swatches{display:flex;gap:.5rem;justify-content:center;margin-top:1.25rem}
.mtm-swatch{width:28px;height:28px;border-radius:50%;border:2px solid var(--mtm-paper);
  box-shadow:0 0 0 1px var(--mtm-line);cursor:pointer;padding:0;
  transition:transform var(--mtm-fast) var(--mtm-ease)}
.mtm-swatch:hover,.mtm-swatch[aria-pressed="true"]{transform:scale(1.18)}
.mtm-swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--mtm-red)}

/* =====================================================================
   5. LOGO STRIP
   ===================================================================== */
.mtm-logos{padding-block:clamp(1.5rem,3vw,2.5rem);border-block:1px solid var(--mtm-line)}
.mtm-logos__row{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,5vw,3.5rem);align-items:center;justify-content:center}
.mtm-logos p{margin:0;font-size:var(--mtm-fs-small);letter-spacing:.12em;text-transform:uppercase;color:var(--mtm-muted);font-weight:700}

/* =====================================================================
   6. CARD GRIDS — features / steps / docs
   ===================================================================== */
.mtm-grid{display:grid;gap:var(--mtm-gap);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.mtm-card{background:var(--mtm-paper);border:1px solid var(--mtm-line);border-radius:var(--mtm-r);
  padding:clamp(1.25rem,2.5vw,1.75rem);box-shadow:var(--mtm-shadow);
  transition:transform var(--mtm-med) var(--mtm-ease),box-shadow var(--mtm-med) var(--mtm-ease);
  will-change:transform}
.mtm-card:hover{transform:translateY(-6px);box-shadow:var(--mtm-shadow-lift)}
.mtm-card h3{font-size:var(--mtm-fs-h3);font-weight:750;margin:.75rem 0 .4rem;letter-spacing:-.01em}
.mtm-card p{font-size:var(--mtm-fs-body);line-height:1.6;color:var(--mtm-muted);margin:0}
.mtm-dark .mtm-card{background:var(--mtm-ink-2);border-color:var(--mtm-line-dark)}
.mtm-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--mtm-grad);color:var(--mtm-paper);font-size:1.25rem;font-weight:800}

/* numbered steps */
.mtm-step__n{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;background:var(--mtm-ink);color:var(--mtm-paper)}
.mtm-dark .mtm-step__n{background:var(--mtm-grad)}

/* =====================================================================
   7. PRICING
   ===================================================================== */
.mtm-plans{display:grid;gap:var(--mtm-gap);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:stretch}
.mtm-plan{display:flex;flex-direction:column;background:var(--mtm-paper);border:1px solid var(--mtm-line);
  border-radius:var(--mtm-r-lg);padding:clamp(1.5rem,3vw,2rem);box-shadow:var(--mtm-shadow);position:relative;
  transition:transform var(--mtm-med) var(--mtm-ease),box-shadow var(--mtm-med) var(--mtm-ease)}
.mtm-plan:hover{transform:translateY(-6px);box-shadow:var(--mtm-shadow-lift)}
.mtm-plan--featured{border-color:transparent;box-shadow:0 0 0 2px var(--mtm-red),var(--mtm-shadow-lift)}
.mtm-plan__flag{position:absolute;top:-13px;left:50%;translate:-50% 0;background:var(--mtm-grad);color:var(--mtm-paper);
  font-size:.6875rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 14px;border-radius:999px;white-space:nowrap}
.mtm-plan__tier{font-size:var(--mtm-fs-small);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mtm-red)}
.mtm-plan__price{font-size:clamp(2.6rem,4.5vw,3.4rem);font-weight:800;line-height:1;margin:.4rem 0 .1rem;letter-spacing:-.03em}
.mtm-plan__price sup{font-size:.45em;font-weight:700;top:-.7em;margin-right:.06em}
.mtm-plan__price small{font-size:.3em;font-weight:600;color:var(--mtm-muted)}
.mtm-plan__sub{color:var(--mtm-muted);font-size:.9375rem;margin:0 0 1.25rem}
.mtm-plan ul{list-style:none;margin:1.25rem 0 0;padding:0;flex:1}
.mtm-plan li{position:relative;padding:.5rem 0 .5rem 1.75rem;font-size:.9375rem;line-height:1.45;border-top:1px solid var(--mtm-line)}
.mtm-plan li:first-child{border-top:0}
.mtm-plan li[data-yes]::before{content:"✓";position:absolute;left:0;top:.5rem;color:#16a34a;font-weight:800}
.mtm-plan li[data-no]{color:var(--mtm-muted)}
.mtm-plan li[data-no]::before{content:"✕";position:absolute;left:0;top:.5rem;color:#b7b7b7;font-weight:800}

/* =====================================================================
   8. DOCS
   ===================================================================== */
.mtm-doc{display:block;text-decoration:none;color:inherit}
.mtm-doc h3{color:var(--mtm-ink)}
.mtm-dark .mtm-doc h3{color:var(--mtm-paper)}
.mtm-doc__meta{font-size:var(--mtm-fs-small);color:var(--mtm-red);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.mtm-faq{max-width:820px;margin-inline:auto}
.mtm-faq details{border-bottom:1px solid var(--mtm-line);padding:1.1rem 0}
.mtm-faq summary{cursor:pointer;font-weight:700;font-size:1.0625rem;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.mtm-faq summary::-webkit-details-marker{display:none}
.mtm-faq summary::after{content:"+";font-size:1.4rem;font-weight:400;color:var(--mtm-red);transition:transform var(--mtm-med) var(--mtm-ease)}
.mtm-faq details[open] summary::after{transform:rotate(45deg)}
.mtm-faq p{margin:.75rem 0 0;color:var(--mtm-muted);line-height:1.65}

/* =====================================================================
   9. CTA BAND
   ===================================================================== */
.mtm-cta{background:var(--mtm-ink);color:var(--mtm-paper);text-align:center;position:relative}
.mtm-cta::after{content:"";position:absolute;inset:0;background:var(--mtm-grad);opacity:.14;pointer-events:none}
.mtm-cta>*{position:relative;z-index:1}

/* =====================================================================
   10. SCROLL REVEAL (GSAP adds .is-in; CSS provides the no-JS fallback)
   ===================================================================== */
.mtm-reveal{opacity:0;transform:translateY(22px)}
.mtm-reveal.is-in{opacity:1;transform:none;transition:opacity .7s var(--mtm-ease),transform .7s var(--mtm-ease)}
.no-js .mtm-reveal,html:not(.mtm-gsap) .mtm-reveal{opacity:1;transform:none}

/* images: never layout-shift */
.mtm-section img{max-width:100%;height:auto}

/* =====================================================================
   11. ACCESSIBILITY / MOTION
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .mtm-reveal{opacity:1!important;transform:none!important}
  .mtm-stage__art{clip-path:none!important}
}
:where(a,button,summary):focus-visible{outline:2px solid var(--mtm-red);outline-offset:3px;border-radius:4px}
.mtm-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* =====================================================================
   12. REAL PRODUCT SCREENSHOTS
   ===================================================================== */
/* hero: framed app screenshot instead of the mock stage */
.mtm-stage--shot{aspect-ratio:auto;padding:0;background:var(--mtm-ink);display:block}
.mtm-shot{display:block;width:100%;height:auto;border-radius:var(--mtm-r-lg)}
.mtm-stage--shot .mtm-stage__squeegee{top:0;width:100%;height:38%;border-radius:0;
  background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0));mix-blend-mode:screen}

/* dark wordmark band */
.mtm-logoband{padding-block:clamp(2rem,4vw,3rem)}
.mtm-wordmark{width:min(420px,72%);height:auto;display:block;margin:0 auto}
.mtm-logoband__sub{margin:1rem 0 0;font-size:var(--mtm-fs-small);letter-spacing:.1em;
  text-transform:uppercase;color:var(--mtm-muted-dark)}

/* screenshot showcase */
.mtm-shotgrid{display:grid;gap:var(--mtm-gap);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.mtm-shotcard{margin:0;background:var(--mtm-ink);border-radius:var(--mtm-r);overflow:hidden;
  box-shadow:var(--mtm-shadow);transition:transform var(--mtm-med) var(--mtm-ease),box-shadow var(--mtm-med) var(--mtm-ease)}
.mtm-shotcard:hover{transform:translateY(-6px);box-shadow:var(--mtm-shadow-lift)}
.mtm-shotcard img{display:block;width:100%;height:auto}
.mtm-shotcard figcaption{padding:1rem 1.15rem;font-size:.9375rem;line-height:1.55;
  color:var(--mtm-muted-dark);background:var(--mtm-ink)}
.mtm-shotcard figcaption strong{color:var(--mtm-paper)}