/* MMM additions on top of the carried-over Weebly theme CSS.
   Everything here is invisible to a sighted mouse user unless noted. */

/* The page wrapper must not become a box — theme selectors expect the
   Weebly structure directly under <body>. */
.mmm-page { display: contents; }

/* Skip link: off-screen until focused. */
.mmm-skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; background: #fff; color: #000; padding: 10px 16px; font: 600 14px/1.2 Montserrat, sans-serif; }
.mmm-skip-link:focus { left: 8px; top: 8px; outline: 2px solid #8d5024; }

/* Visible keyboard focus (the theme removes outlines). */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, .menu-toggle:focus-visible { outline: 2px solid #8d5024; outline-offset: 2px; }

/* Contact form status line (new — Weebly showed its own confirmation). */
.mmm-form-status { margin-top: 12px; text-align: center; font-size: 15px; }
.mmm-form-status:empty { margin: 0; } /* takes no space until there is a message */
.mmm-form-status[data-state="error"] { color: #8d5024; }
.mmm-form-status[data-state="ok"] { color: #1b6e2a; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ── Restored Common Ninja widgets (live widgets render 0×0 — lapsed trial).
   Layout follows the vendor's own preview screenshots: "collage" rows of
   2 (wide+narrow) / 3 / 3, 20px gaps, square corners; hover grid of 395px
   tiles with the caption over a dark overlay. */
.mmm-cn { box-sizing: border-box; max-width: 1140px; margin: 0 auto; }
.mmm-cn img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mmm-cn-collage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 20px 0; }
.mmm-cn-collage .mmm-cn-item { display: block; overflow: hidden; aspect-ratio: 440 / 293; }
.mmm-cn-collage .mmm-cn-item:nth-child(8n+1) { grid-column: span 2; aspect-ratio: auto; }
.mmm-cn-collage .mmm-cn-item:nth-child(8n+2) { aspect-ratio: 440 / 600; }
.mmm-cn-collage .mmm-cn-item:nth-child(8n+6), .mmm-cn-collage .mmm-cn-item:nth-child(8n+7), .mmm-cn-collage .mmm-cn-item:nth-child(8n+8) { aspect-ratio: 440 / 660; }
.mmm-cn-collage .mmm-cn-item img { transition: transform .35s ease; }
.mmm-cn-collage .mmm-cn-item:hover img { transform: scale(1.04); }
.mmm-cn-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; padding: 20px 0; }
.mmm-cn-hover { position: relative; margin: 0; width: 395px; max-width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #000; }
.mmm-cn-hover img { opacity: .75; transition: opacity .35s ease; }
.mmm-cn-hover:hover img { opacity: .5; }
.mmm-cn-hover figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px; color: #fff; font: 700 20px/1.3 "Droid Serif", Georgia, serif; text-transform: capitalize; }
@media (max-width: 767px) {
  .mmm-cn-collage { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mmm-cn-collage .mmm-cn-item:nth-child(n) { grid-column: auto; aspect-ratio: 1 / 1; }
  .mmm-cn-collage .mmm-cn-item:nth-child(8n+1) { grid-column: span 2; aspect-ratio: 3 / 2; }
}
.mmm-parity-live .mmm-cn { display: none !important; }

.mmm-lightbox { border: 0; padding: 0; background: transparent; max-width: 92vw; max-height: 92vh; }
.mmm-lightbox::backdrop { background: rgba(0, 0, 0, .85); }
.mmm-lightbox img { display: block; max-width: 92vw; max-height: 92vh; object-fit: contain; }
.mmm-lightbox button { position: fixed; top: 12px; right: 16px; background: none; border: 0; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; }

/* Theme styles input:invalid with a shadow. Our fields carry native `required`
   (Weebly validated in JS), which would make every empty field glow on load.
   Show it only once the visitor has interacted with the field. */
.wsite-form-input:invalid { border-radius: 0; box-shadow: none; }
.wsite-form-input:user-invalid { border-radius: 1px; box-shadow: 0 0 5px rgba(50, 50, 50, .5); }