/*
 * Final component scale tokens
 *
 * These rules intentionally normalise like-for-like UI only: primary calls to
 * action, the lower type field on the four strain cards and the contact form.
 * Headline hierarchy and the existing section spacing remain untouched.
 */
:root {
  --cta-height: clamp(46px, 3.45vw, 52px);
  --cta-min-width: 190px;
  --cta-font-size: clamp(21px, 1.8vw, 27px);
  --cta-padding-inline: clamp(12px, 1.15vw, 18px);
  --cta-border-width: clamp(2px, .26vw, 4px);
  --cta-shadow-size: clamp(3px, .48vw, 7px);

  --strain-name-size: clamp(32px, 2.78vw, 40px);
  --strain-meta-size: clamp(11px, .98vw, 14px);
  --strain-thc-size: clamp(13px, 1.32vw, 19px);
}

/* All site CTAs use the same visual box. The menu trigger, accordion controls
 * and the age-check actions deliberately keep their respective UI roles. */
.button,
.outline-button {
  min-height: var(--cta-height);
  min-width: var(--cta-min-width);
  padding: 8px var(--cta-padding-inline) 7px;
  border-width: var(--cta-border-width);
  font-size: var(--cta-font-size);
  line-height: 1;
  box-shadow: var(--cta-shadow-size) var(--cta-shadow-size) 2px rgb(0 0 0 / .25);
}

.button--dark {
  border-width: 0;
  box-shadow: var(--cta-shadow-size) var(--cta-shadow-size) 2px rgb(0 0 0 / .25);
}

.button-row .button,
.membership .button,
.join-content .button,
.contact-form .button,
.price-card__cta,
.site-footer .button {
  min-height: var(--cta-height);
  padding: 8px var(--cta-padding-inline) 7px;
  border-width: var(--cta-border-width);
  font-size: var(--cta-font-size);
}

.button-row .button { min-width: 0; }

/* The submit control is part of the form at every layout width. */
.contact-form .button {
  display: inline-flex;
  width: fit-content;
  justify-self: start;
  align-self: start;
  margin-top: 2px;
}

.form-trap {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.form-message {
  display: block;
  min-height: 1.4em;
  color: var(--green);
  font-size: 13px;
}

.form-message.is-error { color: #8f271e; }
.contact-form .button:disabled { cursor: wait; opacity: .68; }

/* Four strain cards share one lower information field. The illustration gets
 * a little more breathing room while the THC line remains clearly legible. */
.strain-copy h3 {
  font-size: var(--strain-name-size);
  line-height: .92;
  letter-spacing: .005em;
}

.strain-copy p {
  margin-top: .5em;
  font-size: var(--strain-meta-size);
  line-height: 1.34;
}

.strain-strength img { width: 66%; }

.strain-strength span {
  padding-bottom: 0;
  font-size: var(--strain-thc-size);
  line-height: 1;
  white-space: nowrap;
}

.strain-detail-link {
  position: absolute;
  z-index: 4;
  inset: 0;
  border: 0;
}

.strain-detail-link:focus-visible {
  outline: 4px solid var(--orange);
  outline-offset: 4px;
}

@media (min-width: 621px) and (max-width: 900px) {
  :root {
    --strain-name-size: clamp(30px, 4.7vw, 38px);
    --strain-meta-size: clamp(11px, 1.75vw, 14px);
    --strain-thc-size: clamp(13px, 2.05vw, 17px);
  }
}

@media (max-width: 620px) {
  :root {
    --cta-height: 46px;
    --cta-font-size: clamp(18px, 4.45vw, 23px);
    --cta-padding-inline: 12px;
    --cta-border-width: 3px;
    --cta-shadow-size: 4px;

    --strain-name-size: clamp(23px, 5.2vw, 29px);
    --strain-meta-size: clamp(9px, 2.45vw, 11.5px);
    --strain-thc-size: clamp(11px, 3vw, 13px);
  }

  .button-row .button {
    min-height: var(--cta-height);
    font-size: var(--cta-font-size);
  }

  .contact-form .button {
    width: fit-content;
    justify-self: start;
  }

  .strain-strength img { width: 68%; }
}

@media (max-width: 420px) {
  .button-row .button { min-height: var(--cta-height); }
}

/* A shorter icon field and a slightly stronger THC label keep all variety
 * cards balanced at every breakpoint without moving their existing copy. */
.strain-strength { justify-content: space-evenly; }

/* Accordion panels open on a real height transition. Opacity and a small
 * vertical shift make the paper feel like it is pulled out from below the
 * heading instead of abruptly appearing. */
@media (max-width: 700px) {
  .why .accordion-trigger {
    transition: color .28s ease, background-color .28s ease;
  }

  .why .accordion-chevron {
    transition: transform .46s cubic-bezier(.22, 1, .36, 1);
  }

  .why .accordion-panel {
    opacity: 0;
    transform: translateY(-10px);
    transition:
      max-height .46s cubic-bezier(.22, 1, .36, 1),
      padding-bottom .46s cubic-bezier(.22, 1, .36, 1),
      opacity .24s ease,
      transform .46s cubic-bezier(.22, 1, .36, 1);
    will-change: max-height, opacity, transform;
  }

  .why .accordion-item.is-open .accordion-panel {
    opacity: 1;
    transform: translateY(0);
  }
}

/* CSC and the membership block are ordinary consecutive sections. Keeping
   the wrapper out of layout preserves their original paper-cut transition
   without sticky positioning, scroll animation, or layered overlap. */
.csc-join-scroll {
  display: contents;
}

/* The varieties CTA is part of the copy hierarchy: it follows the two
   introductory paragraphs before the cards on every breakpoint. */
.varieties .outline-button {
  position: relative;
  inset: auto;
  top: auto;
  right: auto;
  bottom: auto;
  display: inline-flex;
  margin: clamp(22px, 2vw, 30px) 0 0 !important;
  margin-left: 0 !important;
}

/* On phones the two hero actions remain equally sized controls instead of
   stretching into two oversized bars across the complete viewport. */
@media (max-width: 620px) {
  .hero .button-row {
    display: flex !important;
    flex-wrap: nowrap;
    width: 100%;
    max-width: none;
    gap: 8px;
  }

  .hero .button-row .button {
    flex: 0 1 190px;
    width: min(190px, calc((100% - 8px) / 2)) !important;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .why .accordion-panel,
  .why .accordion-chevron {
    transition: none;
  }
}