@tailwind base;
@tailwind components;
@tailwind utilities;

/* ===== Brand styles ============================================================
   Anything that can't be expressed cleanly with utilities lives here. We keep
   this short on purpose: the page itself is built from utility classes.
   ============================================================================ */

@layer base {
  body.mms-home {
    @apply bg-cream text-ink font-sans antialiased;
  }
}

@layer components {
  /* The brand wordmark. Cambria is the requested face; Georgia/Times round out
     the stack so it still looks at home on systems without Cambria installed. */
  .mms-logo {
    @apply font-logo font-bold no-underline;
    font-feature-settings: "lnum" 1;
  }

  /* The pink → soft-pink hero card uses a radial sheen overlay to add depth.
     Tailwind has no expressive way to compose that gradient, so it stays here. */
  .mms-product-box {
    background-image: linear-gradient(135deg, #E8A0A0 0%, #D07070 100%);
  }

  .mms-product-box::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
  }

  /* FAQ accordion. The Stimulus controller toggles `.active`; the rule below
     animates the answer pane open. */
  .mms-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
  }
  .mms-faq-item.active .mms-faq-answer {
    max-height: 500px;
    padding: 0 1.5rem 1.5rem;
  }
  .mms-faq-item.active .mms-faq-toggle {
    transform: rotate(45deg);
  }

  /* Product detail accordion. Same toggle pattern as the FAQ, but with longer
     copy so the open height is taller. */
  .mms-detail-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
  }
  [data-accordion-item].active .mms-detail-content {
    max-height: 800px;
    padding: 0 1.5rem 1.5rem;
  }
  [data-accordion-item].active .mms-detail-toggle {
    transform: rotate(45deg);
  }
}
@import url("https://rsms.me/inter/inter.css");
@tailwind base;
@tailwind components;
@tailwind utilities;
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */