/* ================================================================
 * Meta Mint — supplementary utilities
 * Fills gaps not present in the compiled main.css (pre-built from
 * the original static site and therefore missing classes only used
 * in the Laravel Blade views).
 * ================================================================ */

/* --- Aspect ratio ----------------------------------------------- */
.aspect-video  { aspect-ratio: 16 / 9; }
.aspect-square { aspect-ratio: 1 / 1; }

/* --- Height utilities ------------------------------------------ */
.h-0\.5  { height: calc(var(--spacing) * 0.5); }   /* hamburger lines */
.h-9\.5  { height: calc(var(--spacing) * 9.5); }
.h-48    { height: calc(var(--spacing) * 48); }

/* --- Width utilities ------------------------------------------- */
.w-auto  { width: auto; }

/* --- Border utilities ------------------------------------------ */
.border-l-4  { border-left-width: 4px; }

/* --- Spacing (fractional) -------------------------------------- */
.gap-1\.5     { gap: calc(var(--spacing) * 1.5); }
.mb-0\.5      { margin-bottom: calc(var(--spacing) * 0.5); }
.mb-1\.5      { margin-bottom: calc(var(--spacing) * 1.5); }
.mb-2\.5      { margin-bottom: calc(var(--spacing) * 2.5); }
.ml-2\.5      { margin-left: calc(var(--spacing) * 2.5); }
.p-2\.5       { padding: calc(var(--spacing) * 2.5); }
.p-3\.5       { padding: calc(var(--spacing) * 3.5); }
.ps-2\.5      { padding-inline-start: calc(var(--spacing) * 2.5); }
.py-0         { padding-top: 0; padding-bottom: 0; }
.py-2\.5      { padding-top: calc(var(--spacing) * 2.5); padding-bottom: calc(var(--spacing) * 2.5); }
.right-2\.5   { right: calc(var(--spacing) * 2.5); }
.space-y-0\.5 > :not(:last-child) { margin-bottom: calc(var(--spacing) * 0.5); }

/* --- Grid ------------------------------------------------------ */
.grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- Feedback colours (contact form flash + field errors) ------ */
.bg-green-50        { background-color: #f0fdf4; }
.bg-red-50          { background-color: #fef2f2; }
.text-green-700     { color: #15803d; }
.text-red-700       { color: #b91c1c; }
.text-red-500       { color: #ef4444; }
.border-green-200   { border-color: #bbf7d0; }
.border-red-200     { border-color: #fecaca; }
.border-red-400     { border-color: #f87171; }

/* --- Misc. background ------------------------------------------ */
.bg-black\/40       { background-color: rgb(0 0 0 / .4); }
.bg-black\/50       { background-color: rgb(0 0 0 / .5); }

/* --- Hero slider ----------------------------------------------- */
.hero-dot           { width: 0.5rem;  background-color: rgba(255,255,255,.4); }
.hero-dot-active    { width: 1.5rem;  background-color: #fff; }
.hero-dot-inactive  { width: 0.5rem;  background-color: rgba(255,255,255,.4); }

.hero-nav-btn {
  background-color: rgba(255, 255, 255, .12);
  color: #fff;
}
.hero-nav-btn:hover {
  background-color: rgba(255, 255, 255, .28);
}

/* ================================================================
 * Prose — blog post body typography
 * Replaces the missing Tailwind Typography plugin (@tailwindcss/
 * typography) classes: prose, prose-lg, dark:prose-invert, and the
 * subset of prose-* variants used in public/blogs/show.blade.php.
 * ================================================================ */
.prose {
  max-width: 65ch;
  /* body copy a step softer than the headings, still well past AA */
  color: color-mix(in oklab, var(--color-secondary) 82%, transparent);
  font-size: 1rem;
  line-height: 1.75;
}
.prose.max-w-none { max-width: none; }

.prose > :first-child { margin-top: 0 !important; }
.prose > :last-child  { margin-bottom: 0 !important; }

/* Headings */
.prose h1, .prose h2, .prose h3,
.prose h4, .prose h5, .prose h6 {
  color: var(--color-secondary);
  line-height: 1.25;
  margin-top: 1.75em;
  margin-bottom: 0.75em;
}
.prose h1 { font-size: 2em;    font-weight: 700; margin-top: 0; }
.prose h2 { font-size: 1.5em;  font-weight: 600; }
.prose h3 { font-size: 1.25em; font-weight: 600; }
.prose h4 { font-size: 1em;    font-weight: 700; }
.prose h5, .prose h6 { font-size: .875em; font-weight: 700; }

/* Paragraphs & inline. main.css styles every bare <p> as 14px text at 60%
   opacity (the template's card captions); inside an article that made the
   copy smaller than its own list items and too faint to read, so paragraphs
   take the prose size and colour instead. */
.prose p      { margin-top: 1.25em; margin-bottom: 1.25em; font-size: inherit; color: inherit; }
.prose strong { font-weight: 600; color: var(--color-secondary); }
.prose em     { font-style: italic; }
.prose del    { text-decoration: line-through; }
.prose sub, .prose sup { font-size: .75em; }
.prose sup    { vertical-align: super; }
.prose sub    { vertical-align: sub; }

/* Links */
.prose a {
  color: var(--color-primary-500);
  text-decoration: none;
}
.prose a:hover { text-decoration: underline; }

/* Lists */
.prose ul, .prose ol {
  padding-left: 1.5em;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.prose ul  { list-style-type: disc; }
.prose ol  { list-style-type: decimal; }
.prose li  { margin-top: .5em; margin-bottom: .5em; }
.prose li > p { margin-top: .5em; margin-bottom: .5em; }

/* Blockquote */
.prose blockquote {
  border-left: 4px solid var(--color-primary-500);
  padding: .75em 1em;
  margin: 1.5em 0;
  font-style: italic;
  opacity: .75;
}
.prose blockquote p { margin: 0; }

/* Code */
.prose code:not(pre > code) {
  background: var(--color-background-4);
  padding: .15em .35em;
  border-radius: 4px;
  font-size: .875em;
  font-family: var(--font-mono);
}
.prose pre {
  background: var(--color-background-9);
  color: var(--color-accent);
  padding: 1em 1.25em;
  border-radius: 14px;
  overflow-x: auto;
  margin: 1.5em 0;
  font-family: var(--font-mono);
  font-size: .875em;
  line-height: 1.65;
}
.prose pre code { background: transparent; padding: 0; border-radius: 0; }

/* Images */
.prose img {
  border-radius: 14px;
  border: 1px solid var(--color-stroke-1);
  max-width: 100%;
  height: auto;
}
.prose figure   { margin: 1.5em 0; }
.prose figcaption {
  text-align: center;
  font-size: .875em;
  color: var(--color-secondary);
  opacity: .55;
  margin-top: .5em;
}

/* Dividers & tables */
.prose hr { border: 0; border-top: 1px solid var(--color-stroke-1); margin: 2em 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .875em; overflow: hidden; border-radius: 10px; }
.prose th,
.prose td { padding: .75em 1em; border: 1px solid var(--color-stroke-1); text-align: left; }
.prose th { background: var(--color-background-4); font-weight: 600; }
.prose tr:nth-child(even) td { background: var(--color-background-3); }

/* prose-lg — increases base size */
.prose-lg { font-size: 1.125rem; line-height: 1.8; }
.prose-lg h1 { font-size: 1.8em; }
.prose-lg h2 { font-size: 1.45em; }
.prose-lg h3 { font-size: 1.2em; }

/* prose-headings:font-semibold (Tailwind Typography modifier applied inline) */
.prose-headings\:font-semibold h1,
.prose-headings\:font-semibold h2,
.prose-headings\:font-semibold h3,
.prose-headings\:font-semibold h4,
.prose-headings\:font-semibold h5,
.prose-headings\:font-semibold h6 { font-weight: 600; }

/* prose-a:text-primary-500 */
.prose-a\:text-primary-500 a { color: var(--color-primary-500); }

/* prose-a:no-underline */
.prose-a\:no-underline a { text-decoration: none; }

/* prose-img:rounded-[14px] prose-img:border prose-img:border-stroke-1 */
.prose-img\:rounded-\[14px\] img { border-radius: 14px; }
.prose-img\:border img { border-width: 1px; border-style: solid; }
.prose-img\:border-stroke-1 img { border-color: var(--color-stroke-1); }

/* dark:prose-invert — dark mode only. Scoped to a `.dark` ancestor, like
   every other dark: variant in this file. The bare `.dark\:prose-invert`
   selectors that used to sit beside these matched on the light site too,
   because the post body carries that class, and painted every article
   heading in the near-white accent colour. */
.dark .prose {
  color: var(--color-accent);
}
.dark .prose h1, .dark .prose h2, .dark .prose h3,
.dark .prose h4, .dark .prose h5, .dark .prose h6 {
  color: var(--color-accent);
}
.dark .prose code:not(pre > code) {
  background: var(--color-background-7);
}
.dark .prose blockquote {
  border-left-color: var(--color-primary-500);
}
.dark .prose img {
  border-color: var(--color-stroke-5, #1b232f);
}

/* ================================================================
 * Arbitrary-value utilities used by the Blade views but absent from
 * the compiled main.css.
 *
 * main.css was built from the original static template, not from
 * these templates, so any arbitrary Tailwind value the template
 * author had not already used produces no rule at all — the class
 * is inert and the element silently falls back to its intrinsic
 * size. That is what collapsed the Services dropdown to ~195px
 * instead of the 360px its markup asks for.
 *
 * Breakpoints match Tailwind's defaults, which main.css already
 * uses: lg = 64rem, 2xl = 96rem.
 *
 * Regenerate the list with the scan in the commit message, or grep
 * the views for `-[` classes and check them against main.css before
 * adding new ones.
 * ================================================================ */

/* --- Widths ----------------------------------------------------- */
.w-\[110px\] { width: 110px; }
.w-\[360px\] { width: 360px; }   /* Services / Products dropdown panel */

/* --- Sizes ------------------------------------------------------ */
.size-\[90px\] { width: 90px; height: 90px; }

/* --- Padding ---------------------------------------------------- */
.pb-\[30px\] { padding-bottom: 30px; }
.pb-\[40px\] { padding-bottom: 40px; }

@media (min-width: 64rem) {
  .lg\:w-\[680px\]  { width: 680px; }
  .lg\:pt-\[10px\]  { padding-top: 10px; }
  .lg\:pt-\[50px\]  { padding-top: 50px; }

  /* Content + sidebar layouts on the blog and service detail pages. */
  .lg\:grid-cols-\[1fr_300px\] { grid-template-columns: 1fr 300px; }
  .lg\:grid-cols-\[1fr_340px\] { grid-template-columns: 1fr 340px; }
}

@media (min-width: 96rem) {
  /* A class cannot start with a digit, so Tailwind emits "2xl:" as the CSS
     numeric escape `\32 ` followed by "xl". The trailing space terminates the
     escape and is part of the selector — do not delete it. main.css uses the
     same form. */
  .\32 xl\:max-w-\[1440px\] { max-width: 1440px; }
}

/* Hover border for the footer's CRM button. main.css ships .border-accent/10
   and /20 but no hover variant, and it emits accent opacity as plain hex with
   an alpha channel — matched here so the two files stay consistent.
   #fcfcfc is --color-accent; 66 = 40% alpha. */
.hover\:border-accent\/40:hover { border-color: #fcfcfc66; }

/* ================================================================
 * Card, grid and typography utilities used across the Services,
 * Products, blog and detail views but absent from main.css.
 *
 * Same root cause as the arbitrary values above — main.css was built
 * from the original static template, so a utility that template never
 * used emits nothing and the class is inert. The visible symptom was
 * worst on /services and /products: `size-3.5` on the "Learn More"
 * arrows matched no rule, so those SVGs fell back to the intrinsic
 * 300x150px an <svg> takes with no width or height, and every card
 * carried an enormous arrow. The muted body colours and line heights
 * were silently dropped on the same pages.
 *
 * Opacity colours are written as hex with an alpha channel, which is
 * the form main.css itself emits (e.g. `.dark\:text-accent\/40 {
 * color: #fcfcfc66 }`), so the two files stay consistent.
 *   --color-secondary   #1a1a1c    --color-accent      #fcfcfc
 *   --color-primary-500 #2462B7    alpha: 1a=10% 33=20% 4d=30%
 *                                         66=40% 80=50% b3=70%
 * ================================================================ */

/* --- Sizes ------------------------------------------------------ */
.size-3\.5 { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); }
.max-h-16  { max-height: calc(var(--spacing) * 16); }

/* --- Spacing ---------------------------------------------------- */
.mt-0\.5 { margin-top: calc(var(--spacing) * 0.5); }

/* --- Body typography -------------------------------------------- */
/* The scale in main.css stops at tagline-1 (1rem); the Blade views ask for a
   comfortable reading size above it for section intros and CTA copy. */
.text-body-3 { font-size: 1.0625rem; line-height: 1.7; }

.leading-snug    { line-height: 1.375; }
.leading-relaxed { line-height: 1.625; }

/* --- Muted text ------------------------------------------------- */
.text-secondary\/50 { color: #1a1a1c80; }
.text-secondary\/70 { color: #1a1a1cb3; }
.text-white\/20     { color: #ffffff33; }
.text-white\/30     { color: #ffffff4d; }
.text-white\/40     { color: #ffffff66; }

.dark\:text-accent\/50:where(.dark, .dark *) { color: #fcfcfc80; }
.dark\:text-accent\/70:where(.dark, .dark *) { color: #fcfcfcb3; }

/* --- Tinted surfaces -------------------------------------------- */
.bg-primary-500\/10 { background-color: #2462b71a; }

/* --- Interactive states ----------------------------------------- */
.hover\:bg-primary-600:hover { background-color: var(--color-primary-600); }
/* Composed exactly the way main.css writes its own shadow utilities — the
   --tw-* parts are registered custom properties, so the comma-joined list and
   the absence of fallbacks both matter. */
.hover\:shadow-lg:hover {
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #1018281a), 0 4px 6px -4px var(--tw-shadow-color, #1018281a);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

/* `:is(:where(.group):hover *)` is the exact form main.css emits for its own
   group-hover utilities — kept identical so specificity matches. */
.group-hover\:text-primary-500:is(:where(.group):hover *) { color: var(--color-primary-500); }

/* Named group. `.group\/link` is only a marker and needs no rule of its own;
   the variant below is what Tailwind would emit for it. */
.group-hover\/link\:translate-x-0\.5:is(:where(.group\/link):hover *) {
  transform: translateX(calc(var(--spacing) * 0.5));
}

.focus-visible\:outline-2:focus-visible {
  outline-style: solid;
  outline-width: 2px;
}
.focus-visible\:outline-offset-2:focus-visible { outline-offset: 2px; }

/* prose-a modifier used on the blog body alongside prose-a:no-underline. */
.hover\:prose-a\:underline a:hover { text-decoration: underline; }

/* --- Responsive ------------------------------------------------- */
@media (min-width: 40rem) {
  .sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 48rem) {
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:mb-0        { margin-bottom: 0; }
}

@media (min-width: 64rem) {
  .lg\:aspect-auto { aspect-ratio: auto; }
  .lg\:mt-7        { margin-top: calc(var(--spacing) * 7); }
  .lg\:p-12        { padding: calc(var(--spacing) * 12); }
}