/* WordPress-only additions. Everything else is assets/css/style.css, shared with the prototype. */

/* ---------- Inquiry dialog: two ways to send ---------- */
.btn--whatsapp {
  background: #1f8f4e;
  color: #fff;
}

.btn--whatsapp:hover {
  background: #17703d;
}

.btn:disabled {
  opacity: 0.55;
  cursor: progress;
}

.inquiry__error {
  margin-top: 18px;
  padding: 12px 14px;
  background: #fdecec;
  border-left: 4px solid #b3261e;
  border-radius: 3px;
  color: #7a1712;
  font-size: 0.9375rem;
}

/* the honeypot field: out of sight for people, still in the form for bots */
.field--trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Ordinary pages and posts ---------- */
.entry {
  max-width: 760px;
}

.entry h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
}

.entry h2 {
  margin-top: 1.6em;
  font-size: clamp(1.625rem, 3vw, 2.125rem);
}

.entry h3 {
  margin-top: 1.4em;
  font-size: 1.375rem;
}

.entry p,
.entry ul,
.entry ol {
  margin-top: 1em;
}

.entry img {
  border-radius: 4px;
}

.entry__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.entry__item + .entry__item {
  margin-top: clamp(40px, 6vw, 72px);
}

/* ---------- The admin bar pushes sticky bars down for logged-in editors ---------- */
.admin-bar .masthead {
  top: 32px;
}

.admin-bar .brand-index {
  top: calc(var(--masthead-h) + 32px);
}

.admin-bar .catalogue__filters {
  top: calc(var(--masthead-h) + 32px + 24px);
}

@media (max-width: 782px) {
  .admin-bar .masthead {
    top: 46px;
  }

  .admin-bar .brand-index {
    top: calc(var(--masthead-h) + 46px);
  }
}

/* below 600px WordPress stops fixing the admin bar, so nothing needs to move */
@media (max-width: 600px) {
  .admin-bar .masthead {
    top: 0;
  }

  .admin-bar .brand-index {
    top: var(--masthead-h);
  }
}

/* ---------- Design preview bar (administrators, range pages) ----------
   The pill and its option buttons come from style.css (.design-switch, shared with the
   prototype). This adds the two save buttons and the status line, and lets the bar wrap. */
.design-switch--wp {
  flex-wrap: wrap;
  justify-content: center;
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 8px 10px 8px 18px;
  border-radius: 18px;
}

.design-switch__actions {
  display: flex;
  gap: 6px;
}

.design-switch .design-switch__actions button {
  background: #fff;
  color: #142544;
  font-weight: 600;
}

.design-switch .design-switch__actions button:hover:not(:disabled) {
  background: #8eb75f;
}

.design-switch .design-switch__actions button:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* the design visitors get right now */
.design-switch button.is-saved::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 7px;
  background: currentColor;
  border-radius: 50%;
  vertical-align: middle;
}

.design-switch__status {
  flex-basis: 100%;
  margin: 2px 0 0;
  color: #c9d5ea;
  font-size: 0.8125rem;
  text-align: center;
}

html[data-has-design-switch] .footer__legal {
  padding-bottom: 120px;
}

@media (max-width: 699px) {
  .design-switch--wp {
    width: auto;
    border-radius: 12px;
  }

  .design-switch--wp .design-switch__options {
    flex-basis: 100%;
  }

  .design-switch__actions {
    flex-basis: 100%;
  }

  .design-switch .design-switch__actions button {
    flex: 1;
  }
}

/* ---------- Brand information (typed fields from Pacexports > Brand fields) ---------- */
.brand-more dd a {
  color: inherit;
  text-underline-offset: 0.18em;
}

.brand-more__heading {
  margin-top: 20px;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
}

.brand-more__scroll {
  overflow-x: auto;
}

.brand-table {
  width: 100%;
  margin-top: 6px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.brand-table th,
.brand-table td {
  padding: 9px 14px 9px 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.brand-table th {
  color: var(--muted);
  font-weight: 600;
}

.brand-table td {
  color: var(--ink);
}

.brand[data-box="ink"] .brand-more__heading,
.brand[data-box="ink"] .brand-table td {
  color: #fff;
}

.brand[data-box="ink"] .brand-table th {
  color: #b9c6dd;
}

/* ---------- Products page: photo behind the list ---------- */
.catalogue--photo {
  position: relative;
  isolation: isolate;
}

.catalogue__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-position: center;
  background-size: cover;
}

/* the veil keeps headings and the status line readable whatever the photo is */
.catalogue--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.9);
}

.catalogue--dark::before {
  background: rgba(12, 24, 48, 0.86);
}

.catalogue--dark .catalogue__intro h2 {
  color: #fff;
}

.catalogue--dark .catalogue__intro p,
.catalogue--dark .catalogue__status {
  color: #c9d5ea;
}

/* ---------- Products page layouts: <html data-products-style="sidebar|tabs|list|poster"> ----------
   "sidebar" is the base look in style.css. The other three put the categories in a row on top. */
:is([data-products-style="tabs"], [data-products-style="list"], [data-products-style="poster"]) .catalogue__layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

:is([data-products-style="tabs"], [data-products-style="list"], [data-products-style="poster"]) .catalogue__filters {
  position: static;
  padding: 0;
  background: transparent;
}

:is([data-products-style="tabs"], [data-products-style="list"], [data-products-style="poster"]) .catalogue__filters h3 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

:is([data-products-style="tabs"], [data-products-style="list"], [data-products-style="poster"]) .filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0; /* style.css turns the list into an edge-to-edge strip on phones; here it wraps */
  overflow: visible;
}

:is([data-products-style="tabs"], [data-products-style="list"], [data-products-style="poster"]) .filter-list a {
  padding: 10px 16px;
  background: var(--mist);
}

:is([data-products-style="tabs"], [data-products-style="list"], [data-products-style="poster"]) .filter-list a[aria-current="true"] {
  background: var(--ink);
}

/* On the dark veil a navy "current" category would vanish into the background: make it green.
   That is always the case for the three layouts above, and for "sidebar" once it has become a
   strip of categories without its own panel (859px and below, see style.css). */
:is([data-products-style="tabs"], [data-products-style="list"], [data-products-style="poster"]) .catalogue--dark .filter-list a[aria-current="true"] {
  background: var(--green);
  color: var(--ink);
}

@media (max-width: 859px) {
  .catalogue--dark .catalogue__filters h3 {
    color: #fff;
  }

  .catalogue--dark .filter-list a[aria-current="true"] {
    background: var(--green);
    color: var(--ink);
  }
}

@media (min-width: 1100px) {
  [data-products-style="tabs"] .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* list: one product per line */
[data-products-style="list"] .product-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

[data-products-style="list"] .product-card {
  flex-direction: row;
  align-items: center;
  gap: clamp(14px, 2.4vw, 28px);
  padding: 12px clamp(12px, 2vw, 22px) 12px 12px;
}

[data-products-style="list"] .product-card__media {
  flex: none;
  width: clamp(96px, 14vw, 150px);
  overflow: hidden;
  border-radius: 3px;
}

[data-products-style="list"] .product-card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto;
  grid-template-areas: "range text more" "name text more" "brand text more";
  column-gap: clamp(16px, 3vw, 40px);
  align-items: center;
  padding: 0;
}

[data-products-style="list"] .product-card__range { grid-area: range; }
[data-products-style="list"] .product-card__name { grid-area: name; margin-top: 2px; font-size: 1.3125rem; }
[data-products-style="list"] .product-card__brand { grid-area: brand; }
[data-products-style="list"] .product-card__text { grid-area: text; margin-top: 0; -webkit-line-clamp: 2; line-clamp: 2; }
[data-products-style="list"] .product-card__more { grid-area: more; margin-top: 0; padding-top: 0; white-space: nowrap; }

@media (max-width: 759px) {
  [data-products-style="list"] .product-card__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "range" "name" "brand";
  }

  [data-products-style="list"] .product-card__text,
  [data-products-style="list"] .product-card__more {
    display: none;
  }
}

/* poster: the photo fills the card, the words sit on it */
[data-products-style="poster"] .product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

[data-products-style="poster"] .product-card {
  isolation: isolate;
  justify-content: flex-end;
  min-height: clamp(280px, 30vw, 380px);
  border: 0;
  border-radius: 6px;
}

[data-products-style="poster"] .product-card__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  aspect-ratio: auto;
}

/* The words carry their own dark ground, so it always starts above the first line however
   tall the text is and however bright the photo. */
[data-products-style="poster"] .product-card__body {
  flex: none;
  padding: 64px 22px 22px;
  background: linear-gradient(180deg, rgba(12, 24, 48, 0) 0, rgba(12, 24, 48, 0.86) 56px, rgba(12, 24, 48, 0.95) 100%);
}

[data-products-style="poster"] .product-card__range { color: #cfe3b8; }
[data-products-style="poster"] .product-card__name { color: #fff; font-size: 1.625rem; }
[data-products-style="poster"] .product-card__brand { color: #fff; }
[data-products-style="poster"] .product-card__text { color: #dbe3f1; -webkit-line-clamp: 2; line-clamp: 2; }
[data-products-style="poster"] .product-card__more { color: #fff; }

@media (max-width: 1099px) {
  [data-products-style="poster"] .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 559px) {
  [data-products-style="poster"] .product-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}