/* Site-specific additions on top of the original site's CSS (assets/nwfc/nwfc.css):
   pieces the original builds with plugins/React (burger menu, calculator, gallery)
   and the enquiry forms this site uses instead of a cart. */

[hidden] { display: none !important; }

/* Logo link keeps the logo's size */
.custom-logo-link { display: inline-block; line-height: 0; }
.site-title__text { font-family: var(--font-serif); font-size: 1.6rem; color: #fff; }

/* Mega menu also opens from the keyboard. */
.menu-item-has-children:focus-within > .main-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.menu-item-has-children:focus-within > .main-dropdown-menu.mega-menu { transform: translate(-50%) translateY(0); }

/* ---------- Burger + mobile menu (original uses mmenu.js) ---------- */
.nwf-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.nwf-burger span { display: block; width: 100%; height: 2px; background: currentColor; transition: transform 0.2s ease, opacity 0.2s ease; }
.nwf-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nwf-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nwf-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nwf-mobile-menu { padding: 0.5rem 0 1rem; }
/* The original CSS hides #menu below 1024px (mmenu.js shows a clone instead); this menu is shown in place. */
@media (max-width: 63.99rem) { #menu.nwf-mobile-menu:not([hidden]) { display: block !important; } }
.nwf-mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.nwf-mobile-menu > ul > li { border-bottom: 1px solid var(--color-primary-lighter, #dfe1dd); }
.nwf-mobile-menu a { display: block; padding: 0.8rem 0; font-family: var(--font-serif); font-size: 1.1rem; color: var(--color-charcoal, #2f2f2f); }
.nwf-mobile-menu .sub-menu { padding: 0 0 0.6rem 1rem; }
.nwf-mobile-menu .sub-menu a { padding: 0.35rem 0; font-family: var(--font-sans); font-size: 0.9rem; font-weight: 300; }
@media (min-width: 64rem) { .nwf-mobile-menu { display: none !important; } }

/* ---------- Product gallery (the original uses FlexSlider) ---------- */
.nwf-gallery { opacity: 1 !important; }
/* WooCommerce shrinks gallery images 2+ to 25% (FlexSlider undoes that on the original). */
.woocommerce div.product div.images.nwf-gallery .woocommerce-product-gallery__image { display: block; width: 100%; }
.woocommerce div.product div.images.nwf-gallery .woocommerce-product-gallery__image[hidden] { display: none; }
.nwf-gallery .woocommerce-product-gallery__image a { cursor: zoom-in; }

/* Full-screen image view (the original uses PhotoSwipe) */
.nwf-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 4rem;
  background: rgba(20, 18, 15, 0.92);
}
.nwf-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.nwf-lightbox button {
  position: absolute;
  border: 0;
  background: none;
  color: #fff;
  font-size: 2.5rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
}
.nwf-lightbox button:hover { opacity: 1; }
.nwf-lightbox__close { top: 1rem; right: 1.25rem; }
.nwf-lightbox__prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.nwf-lightbox__next { right: 1rem; top: 50%; transform: translateY(-50%); }
.nwf-gallery .woocommerce-product-gallery__image img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.nwf-gallery .flex-control-thumbs { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.nwf-gallery .flex-control-thumbs li { width: 25%; }
.nwf-gallery .flex-control-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; cursor: pointer; opacity: 0.6; transition: opacity 0.2s; }
.nwf-gallery .flex-control-thumbs img.flex-active,
.nwf-gallery .flex-control-thumbs img:hover { opacity: 1; }
.nwf-gallery--mobile { margin: 1.5rem 0; }

/* ---------- Flooring calculator (the original renders it with React) ---------- */
.nwf-flooring-calculator {
  margin-bottom: 1.5rem;
  padding: 1rem 1rem 1.25rem;
  background: var(--color-primary-lightest, #eff0ee);
  font-size: 0.8rem;
}
.nwf-flooring-calculator__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--color-charcoal, #2f2f2f);
}
.nwf-flooring-calculator__note { margin: 0 0 0.4rem; }
.nwf-flooring-calculator__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: end;
  gap: 0.4rem;
  margin-top: 0.75rem;
}
.nwf-flooring-calculator__row label { display: grid; gap: 0.25rem; font-size: 0.7rem; color: var(--color-stone-600, #57534d); }
.nwf-flooring-calculator__op { padding-bottom: 0.6rem; color: var(--color-stone-500, #79716b); }
.nwf-unit-input { position: relative; display: block; }
.nwf-unit-input input {
  width: 100%;
  padding: 0.55rem 1.9rem 0.55rem 0.6rem;
  border: 1px solid var(--color-primary-lighter, #dfe1dd);
  background: #fff;
  font: inherit;
  font-size: 0.8rem;
}
.nwf-unit-input i { position: absolute; right: 0.55rem; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--color-stone-500, #79716b); }
.nwf-flooring-calculator__result { display: block; margin-top: 0.75rem; font-weight: 500; color: var(--color-charcoal, #2f2f2f); }
.nwf-flooring-calculator__result:empty { display: none; }

/* ---------- Quote form in the buy box (instead of Click & Collect) ---------- */
.nwf-quote-form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
.nwf-quote-form .quantity { flex: 1 1 40%; }
.nwf-quote-form .quantity input { width: 100%; height: 100%; min-height: 2.6rem; padding: 0.5rem 0.75rem; border: 1px solid var(--color-stone-400, #a6a09b); text-align: center; font: inherit; }
.nwf-quote-form > .single_add_to_cart_button { flex: 1 1 50%; }
/* Worktops: product code chosen above the number of pieces. */
.nwf-quote-variant { display: grid; gap: 0.25rem; width: 100%; font-size: 0.8rem; }
.nwf-quote-variant select { width: 100%; min-height: 2.6rem; padding: 0.5rem 0.75rem; border: 1px solid var(--color-stone-400, #a6a09b); background: #fff; font: inherit; font-size: 0.9rem; }
.nwf-quote-fields { display: grid; gap: 0.6rem; width: 100%; margin-top: 0.5rem; }
.nwf-quote-fields label { display: grid; gap: 0.25rem; font-size: 0.8rem; }
.nwf-quote-fields input,
.nwf-quote-fields textarea { width: 100%; padding: 0.55rem 0.7rem; border: 1px solid var(--color-stone-400, #a6a09b); font: inherit; font-size: 0.9rem; }
.nwf-quote-form .single_add_to_cart_button {
  padding: 0.7rem 1rem;
  border: 0;
  background: var(--color-secondary, #752a1e);
  color: #fff;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  cursor: pointer;
}
.nwf-quote-form .single_add_to_cart_button:hover { background: var(--color-secondary-dark, #421811); }
.sample-available a.button { text-decoration: none; }

/* ---------- Home: calculator & catalogue form blocks ---------- */
#calculator .nwf-calculator { display: grid; gap: 0.75rem; }
#calculator .nwf-calculator h3 { margin: 0; font-size: 1.6rem; }
#calculator .nwf-calculator input { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--color-stone-400, #a6a09b); font: inherit; }
#calculator .nwf-calculator label { display: grid; gap: 0.3rem; }
#calculator .nwf-calculator p { margin: 0; }
#katalog .nwf-sample-form { margin-top: 2rem; color: var(--color-charcoal, #2f2f2f); }
#katalog h2 { margin-bottom: 0; }

/* Catalogue & contact views inside the original layout */
.nwf-page { padding-block: 2.5rem; }
.nwf-banner { margin-top: 1rem; }
.nwf-enquire { padding: 0; background: none; }

/* ---------- Blog ---------- */
/* Category filter (the original uses FacetWP checkboxes). */
.nwf-blog-filters a { padding: 0.35rem 0.9rem; border: 1px solid var(--color-primary-light, #d1d3cd); font-size: 0.85rem; color: var(--color-stone-700, #44403b); }
.nwf-blog-filters a span { color: var(--color-stone-400, #a6a09b); }
.nwf-blog-filters a:hover,
.nwf-blog-filters a.is-active { background: var(--color-primary, #70796a); border-color: var(--color-primary, #70796a); color: #fff; }
.nwf-blog-filters a.is-active span,
.nwf-blog-filters a:hover span { color: #fff; }
.nwf-pagination .page-numbers { display: inline-block; margin: 0 0.2rem; padding: 0.4rem 0.8rem; border: 1px solid var(--color-primary-light, #d1d3cd); color: var(--color-stone-700, #44403b); }
.nwf-pagination .page-numbers.current,
.nwf-pagination a.page-numbers:hover { background: var(--color-primary, #70796a); border-color: var(--color-primary, #70796a); color: #fff; }
.nwf-post-gallery .swiper-slide img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* Header top line: icons by item, not position (the original CSS sets them by nth-child).
   Dark icons on the white top line of smaller screens, white ones on the green bar from 80rem. */
header .header-topline ul li.catalogue a:before { width: 1.5rem; background-image: url("nwfc/icon-catalogue-dark.svg"); }
header .header-topline ul li.warehouse a:before { width: calc(var(--spacing) * 6.5); background-image: url("nwfc/icon-marker-dark-CIa6a6_r.svg"); }
header .header-topline ul li.phone a:before { width: calc(var(--spacing) * 9); background-image: url("nwfc/icon-telephone-dark-t09FEU11.svg"); }
@media (min-width: 80rem) {
  header .header-topline ul li.catalogue a:before { background-image: url("nwfc/icon-catalogue.svg"); }
  header .header-topline ul li.warehouse a:before { background-image: url("nwfc/icon-marker-BLixzTdm.svg"); }
  header .header-topline ul li.phone a:before { background-image: url("nwfc/icon-telephone-DcleWQd8.svg"); }
}

/* Header: one "Zatraži ponudu i uzorke" icon instead of the original account and cart icons.
   The icon box and the search field share one height, so the icon sits centred on the search bar
   (the original CSS bottom-aligns this area with a margin at 80rem). */
header .header-main .header-search .wp-block-search__input { height: 40px; }
header .header-main .header-access { grid-template-columns: 32px 34px; }
header .header-main .header-access #burger-toggle { display: flex; align-items: center; height: 40px; }
@media (min-width: 64rem) { header .header-main .header-access { grid-template-columns: 40px; } }
@media (min-width: 80rem) { header .header-main .header-access { margin-bottom: 0; } }
.header-access #enquire a { display: flex; align-items: center; justify-content: center; height: 40px; color: var(--color-white, #fff); transition: color .2s; }
.header-access #enquire a:hover { color: var(--color-primary-soft, #d1d3cd); }
.header-access #enquire .icon { width: 32px; height: 32px; }
@media (min-width: 64rem) { .header-access #enquire .icon { width: 40px; height: 40px; } }
/* Swatch fan: the swatches are filled with the header colour so the ones behind are hidden. */
.header-access #enquire .icon__fill { fill: var(--color-primary, #70796a); }

/* Main menu items stay on one line. */
.nav-primary ul.nav > li > a { white-space: nowrap; }

/* Cookie banner (analytics.php) and the footer button that reopens it. */
.nwf-consent {
  position: fixed; z-index: 1000; left: 1rem; right: 1rem; bottom: 1rem;
  max-width: 36rem; margin-inline: auto; padding: 1.25rem;
  background: #fff; color: var(--color-stone-800, #292524); box-shadow: 0 6px 30px rgb(0 0 0 / 0.18);
  font-size: 0.85rem;
}
.nwf-consent[hidden] { display: none; }
.nwf-consent p { margin: 0 0 1rem; }
.nwf-consent__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; }
.nwf-consent-open { margin-top: 0.5rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
@media (min-width: 48rem) { .nwf-consent-open { margin: 0 0 0 1.5rem; } }