/*
 * Site-wide gap-fill CSS for behavior the original Webflow export relied on
 * its own JS interactions system (IX2) for, which isn't present in the
 * static export and can't be replicated by loading webflow.js alone.
 */

/* "Products" nav dropdown: a simple list of subcategory links under the
 * Products nav item, rendered from the standard WP menu (Appearance >
 * Menus) via EZW_Nav_Walker -- .menu-item-has-children is WP core's own
 * class for a parent item, added automatically. Hidden by default, revealed
 * on hover/focus of the parent item. */
.menu-item-has-children {
  position: relative;
  display: flex;
  align-items: center;
  height: 91px;
}

.ezw-simple-dropdown {
  display: none;
  position: absolute;
  top: 91px;
  left: 0;
  min-width: 220px;
  background-color: #fff;
  border-top: 1px solid var(--border-2);
  box-shadow: 0 10px 6px #0000001a;
  padding: 8px 0;
  z-index: 100;
}

.menu-item-has-children:hover .ezw-simple-dropdown,
.menu-item-has-children:focus-within .ezw-simple-dropdown {
  display: block;
}

.ezw-simple-dropdown-link {
  display: block;
  padding: 10px 20px;
  color: #201d1d;
  font-family: Proximanova, sans-serif;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.ezw-simple-dropdown-link:hover {
  background-color: var(--border-1);
}

/* Resource card image tooltip: reveal on hover of the card, same reason --
 * .tooltip is already fully positioned (absolute, negative inset to pop up
 * above the card, box-shadow), it just needs display toggled. */
.resource-card:hover .tooltip {
  display: flex;
}

/* Contact page: two clean columns -- location/message/call content stacked
 * top-aligned on the left with consistent spacing, form on the right.
 * Webflow originally achieved a similar layout via a per-element
 * #w-node-<hash> ID selector (grid-area: span 3 / span 1), which doesn't
 * survive a hand-built rebuild -- a single flex wrapper for the left column
 * gives more predictable, consistent spacing than trying to match the
 * right column's auto-sized grid rows. */
.ezw-contact-col-left {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-self: start;
}

.ezw-contact-col-right {
  align-self: start;
}

/* Solvent product detail page: the image slider should span the full height
 * of the right-hand info column (description/meta/dividers/sizes/resources),
 * with the rest filling column 2 top-to-bottom in source order. Webflow
 * originally achieved this via a per-element #w-node-<hash> ID selector
 * (image: grid-area: span 6 / span 1; everything else: span 1 / span 1),
 * which doesn't survive a hand-built rebuild -- these two rules replicate
 * it without hardcoding the row count. */
.product-detail-grid > .product-image-slider-wrapper {
  grid-column: 1;
  grid-row: 1 / -1;
  /* .product-image-slider itself has a fixed height (400px) plus a
	 * -110px-offset thumbnail strip below it -- without align-self:start,
	 * CSS Grid's default stretch would grow this wrapper to match the
	 * right column's full height, leaving the image visually stranded at
	 * the top of a much taller box instead of the compact, fixed-height
	 * block Webflow intended. */
  align-self: start;
}

.product-detail-grid > *:not(.product-image-slider-wrapper) {
  grid-column: 2;
}

/* Solvent Cements archive: give each subcategory badge its own color so
 * they're distinguishable at a glance, matching existing site brand colors.
 * The ENVIRO badge keeps the original shared `.tag-container` green
 * (--primary-brand-color-3) untouched -- these rules only apply to the
 * subcategory badge, which carries an extra `.subcat-*` class (see
 * ezw_subcategory_badge_class() in functions.php). */
.tag-container.subcat-pvc-cements {
  background-color: var(--primary-brand-color-2);
}

.tag-container.subcat-cpvc-cements {
  background-color: var(--secondary-brand-color-1);
}

.tag-container.subcat-primers-cleaners {
  background-color: var(--secondary-brand-color-2);
}

.tag-container.subcat-specialty-cements {
  background-color: var(--secondary-brand-color-3);
}

.tag-container.subcat-abs-cements {
  background-color: var(--secondary-brand-color-4);
}

.tag-container.subcat-line-complements {
  background-color: var(--slate-grey);
}

.tag-container.subcat-accesories,
.tag-container.subcat-accessories {
  background-color: var(--primary-brand-color-1);
}

/* .display-inlineflex's own declared rules (grid-column-gap, align-items:
 * center) only make sense for a flex container, and the class name says
 * what it's for, but the exported CSS never actually declares `display` --
 * it was rendering as a plain block everywhere the class is used (footer,
 * Contact page, Resources page, product cards, etc.), silently no-op'ing
 * align-items and any justify-content added to it. This is the missing
 * base rule, matching the class's own name and its sibling declarations. */
.display-inlineflex {
  display: inline-flex;
}

/* Solvent Cements archive: center each attribute (color, temperature,
 * SCH40, body) within its cell in the 2x2 attribute grid on each product
 * card. Scoped to .grid-6 (this specific attribute grid) rather than
 * .display-inlineflex generally, so it doesn't affect other pages that
 * share the class but aren't grid cells (Contact page, footer, etc). */
.grid-6 .display-inlineflex {
  justify-content: center;
}

/* Resources page: every tab pane (SDS, Catalogs & Guides, Packaging Sizes,
 * Common Questions) shares this one content wrapper, so a single rule here
 * gives consistent space between whichever tab's content is showing and the
 * footer below it, instead of needing a per-tab/per-content-type override
 * (e.g. a table vs. a card grid vs. an accordion list). */
.tabs-content {
  padding-bottom: 60px;
}