/*
 * public/assets/css/site.css
 * ---------------------------------------------------------------------
 * The public site is laid out with Tailwind (loaded from the CDN, exactly
 * as the original build did), so this file only carries the few rules
 * Tailwind's utilities cannot express: the skip link, the rich-text
 * styling for admin-written page copy, and the flash messages.
 * ---------------------------------------------------------------------
 */

/* Skip link - visible only once it has keyboard focus. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .6rem 1rem;
  background: var(--brand, #e3010f);
  color: #fff;
  border-radius: 0 0 .4rem 0;
}
.skip-link:focus {
  left: 0;
}

/* Honeypot field: off-screen for people, still filled in by bots. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/*
 * Rich text written in the admin panel. The editor stores plain HTML, so
 * these rules give it sensible spacing without the author needing classes.
 */
.prose p { margin-bottom: 1rem; line-height: 1.7; }
.prose h2 { font-size: 1.6rem; font-weight: 700; color: var(--brand, #e3010f); margin: 1.75rem 0 .75rem; }
.prose h3 { font-size: 1.25rem; font-weight: 700; margin: 1.5rem 0 .5rem; }
.prose ul,
.prose ol { margin: 0 0 1rem 1.35rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: .4rem; line-height: 1.65; }
.prose a { color: var(--brand, #e3010f); text-decoration: underline; }
.prose strong { font-weight: 700; }
.prose img { max-width: 100%; height: auto; border-radius: .5rem; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.prose th,
.prose td { border: 1px solid #e5e7eb; padding: .5rem .75rem; text-align: left; }
.prose blockquote {
  border-left: 4px solid var(--brand, #e3010f);
  padding-left: 1rem;
  color: #4b5563;
  margin: 0 0 1rem;
}

/* The About block on the homepage renders paragraphs without .prose. */
.prose-p p { margin-bottom: .75rem; }
.prose-p p:last-child { margin-bottom: 0; }

/* Swiper pagination bullets in the brand colour. */
.swiper-pagination-bullet-active { background: var(--brand, #e3010f) !important; }

/*
 * Desktop navigation fly-outs.
 *
 * The top-level panel (PRODUCTS) opens with Tailwind's group-hover, exactly
 * as the original markup did. The nested panels - HOTEL EQUIPMENT -> GAS
 * BHATTI, HO-RE-CA -> GLASSWARE -> STAINLESS STEEL GLASS - are owned here
 * instead. `.nav-sub` sets display itself rather than relying on Tailwind's
 * .hidden, so there is no specificity race to lose.
 */
.nav-sub { display: none; }

.site-nav li:hover > .nav-sub,
.site-nav .nav-sub.is-open { display: block; }

/*
 * Bridges the few pixels between a row and its fly-out so the panel does
 * not close while the pointer crosses the gap. It sits behind the panel,
 * so it never intercepts a click on a link.
 */
.site-nav .nav-sub::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -0.75rem;
  right: -0.75rem;
  z-index: -1;
}

/*
 * A fly-out that would run off the right edge flips to the other side.
 * Deep branches (GLASSWARE, COOKER, ELECTRIC APPLIANCES, COOKWARE) already
 * open leftwards for this reason; this is the safety net for the rest.
 */
@media (max-width: 1279px) {
  .site-nav .nav-sub.left-full { left: auto; right: 100%; margin-left: 0; margin-right: 0.25rem; }
}