/* Vimco Rolls: sitewide typography, heading scale, FAQ accordion and mobile rules.
   Loads right after style.css. Design tokens live on :root; product-v2.css reads the same tokens.
   Fonts: Montserrat (headings, 700/800) + Inter (text, 400/600), loaded from Google Fonts in header.php. */

/* ---------- 1. Tokens ---------- */
:root {
  --font-heading: "Montserrat", "Poppins", Arial, sans-serif;
  --font-body: "Inter", "Poppins", Arial, sans-serif;

  --gold: #c0a061;
  --gold-bright: #d9a441;
  --gold-light: #f2d06f;
  --gold-dark: #8a6d45;
  --ink: #111111;
  --text: #2b2b2b;
  --muted: #666666;
  --line: #e4e0d8;
  --soft: #f7f5f1;
  --radius: 8px;

  /* type scale, desktop (ratio about 1.2 from a 16px base) */
  --fs-body: 16px;
  --lh-body: 1.65;
  --fs-article: 17px;
  --lh-article: 1.7;
  --fs-h1: 42px;        /* inner-page banner title */
  --fs-h1-hero: 38px;   /* product page hero title */
  --fs-h2: 30px;
  --fs-h3: 21px;
  --fs-h4: 18px;
  --fs-h5: 17px;
  --fs-h6: 15px;
  --lh-h1: 1.15;
  --lh-h2: 1.25;
  --lh-h3: 1.35;
  --fw-heading: 700;
  --fw-display: 800;
  --track-heading: -0.01em;
  --measure: 70ch;

  --header-h: 132px; /* top bar + fixed main-bar: the strip of every banner that sits under the header */
}

@media (min-width: 768px) and (max-width: 991px) {
  :root {
    --fs-h1: 34px;
    --fs-h1-hero: 32px;
    --fs-h2: 26px;
    --fs-h3: 20px;
  }
}

@media (max-width: 767px) {
  :root {
    --header-h: 128px;
    --fs-article: 16px;
    --lh-article: 1.65;
    --fs-h1: 26px;
    --fs-h1-hero: 27px;
    --fs-h2: 22px;
    --fs-h3: 18px;
    --fs-h4: 17px;
    --fs-h5: 16px;
    --lh-h1: 1.2;
    --lh-h2: 1.3;
  }
}

/* ---------- 2. Base text ---------- */
html { scroll-padding-top: calc(var(--header-h) + 12px); }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p { margin-bottom: 18px; }
strong, b { font-weight: 600; }

/* theme selectors that hard-code Poppins: move them onto the two site faces */
.title-style-2,
.header-nav .nav > li,
.site-list-style-one li,
.site-list-style-two li,
.date-style-2 .wt-post-info,
.date-style-2 .wt-post-meta ul li,
.header-info > ul li strong,
blockquote p,
.blog-post blockquote p,
.form-control,
.site-button,
.site-button-secondry,
.pv-btn,
button,
input,
select,
textarea {
  font-family: var(--font-body);
}

.wt-small-separator,
.since-year span,
.since-year strong,
.since-year2 span,
.since-year2 strong,
.hilite-large-title span,
.wt-breadcrumb li {
  font-family: var(--font-heading);
}

/* ---------- 3. Headings ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  letter-spacing: var(--track-heading);
  color: var(--ink);
  overflow-wrap: break-word;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4 { font-size: var(--fs-h4); line-height: 1.4; }
h5 { font-size: var(--fs-h5); line-height: 1.4; font-weight: var(--fw-heading); }
h6 { font-size: var(--fs-h6); line-height: 1.4; font-weight: var(--fw-heading); }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; }

/* section titles (the theme sets these to 32px under 540px; the scale handles every width) */
.section-head h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
.section-head h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.section-head h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.section-head { margin-bottom: 40px; }

/* gold kicker above section titles */
.wt-small-separator { font-size: 14px; line-height: 1.5; margin-bottom: 12px; }
.wt-small-separator div { font-size: 14px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }

/* gold utility class: colour only, size comes from the element */
h2.site-text-primary:not(.counter), h3.site-text-primary { font-size: inherit; }
h3.site-text-primary { font-size: var(--fs-h3); letter-spacing: 0.02em; }

/* ---------- 4. Inner-page banner ---------- */
/* The header overlays the top of the banner, so the banner carries that height as padding and centres
   its title in the visible area. On phones it grows with the title instead of clipping. */
.wt-bnr-inr {
  height: auto;
  min-height: 500px;
  display: flex;
  align-items: center;
  padding: var(--header-h) 0 40px;
}
.wt-bnr-inr .container { display: block; height: auto; }
.wt-bnr-inr-entry { display: block; text-align: center; }
.wt-bnr-inr .banner-title-name h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gold);
  max-width: 920px;
  margin: 0 auto 14px;
  text-wrap: balance;
}
.wt-breadcrumb { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 0; }
.wt-breadcrumb li {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.5;
  margin: 0;
  padding: 4px 0;
}
.wt-breadcrumb li a { display: inline; padding: 0 2px; }

/* ---------- 5. Navigation, buttons, forms ---------- */
.header-nav .nav > li > a { font-size: 15px; font-weight: 600; letter-spacing: 0.01em; }
.header-style-4 .header-nav-request a { font-family: var(--font-body); font-weight: 600; font-size: 13px; }
.top-bar { font-size: 14px; }

.site-button, .site-button-secondry { font-weight: 600; font-size: 14px; letter-spacing: 0.06em; }
.pv-btn { font-weight: 600; }

.form-control { font-size: 16px; }

/* ---------- 6. Article text (blog posts) ---------- */
.blog-single-post .wt-post-text {
  font-size: var(--fs-article);
  line-height: var(--lh-article);
  color: var(--text);
}
.blog-single-post .wt-post-text p,
.blog-single-post .wt-post-text ul,
.blog-single-post .wt-post-text ol { max-width: var(--measure); }
.blog-single-post .wt-post-text p { margin: 0 0 18px; }
.blog-single-post .wt-post-text p.lead { font-size: calc(var(--fs-article) + 2px); line-height: 1.6; }
.blog-single-post .wt-post-text li { margin-bottom: 8px; }

.blog-single-post .wt-post-text p a,
.blog-single-post .wt-post-text li a,
.blog-single-post .wt-post-text td a {
  display: inline;
  text-transform: none;
  font-weight: 600;
  color: var(--gold-dark);
  text-decoration: underline;
  text-decoration-color: rgba(192, 160, 97, 0.55);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.blog-single-post .wt-post-text p a:hover,
.blog-single-post .wt-post-text li a:hover,
.blog-single-post .wt-post-text td a:hover { color: var(--ink); text-decoration-color: var(--gold); }

/* article section headings use the .h3 / .h5 utility classes; map them onto the scale */
.blog-single-post .wt-post-text h2.h3 { font-size: var(--fs-h2); line-height: var(--lh-h2); margin-top: 36px; margin-bottom: 14px; }
.blog-single-post .wt-post-text h3.h5 { font-size: var(--fs-h3); line-height: var(--lh-h3); margin-top: 26px; margin-bottom: 8px; }
.blog-single-post .wt-post-text h2.h5 { font-size: var(--fs-h3); line-height: var(--lh-h3); }

.blog-single-post .wt-post-text .bg-gray { border-left: 4px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0; }
.blog-single-post .wt-post-text .bg-gray ul { margin-bottom: 0; }

.blog-single-post .wt-post-text figure { margin: 0 0 30px; }
.blog-single-post .wt-post-text figcaption,
.blog-single-post .wt-post-text figcaption.small { font-size: 14px; line-height: 1.5; color: var(--muted); margin-top: 8px; }
.blog-single-post .wt-post-text ul.small { font-size: 14px; line-height: 1.6; }
.blog-single-post .wt-post-text .small { font-size: 13.5px; }

.blog-single-post .wt-post-text .table { font-size: 15px; margin-bottom: 0; }
.blog-single-post .wt-post-text .table th { font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: 0.02em; vertical-align: bottom; padding: 10px 12px !important; }
.blog-single-post .wt-post-text .table td { padding: 10px 12px !important; vertical-align: top; line-height: 1.5; }
.blog-single-post .wt-post-text .table-responsive { border: 1px solid var(--line); border-radius: var(--radius); }

.wt-post-meta li { font-size: 14px; }
.widget_tag_cloud a { font-size: 13px; }
.wt-post-meta .badge { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; padding: 5px 8px; vertical-align: middle; }

/* post cards on the blog hub and the related-articles strip */
.blog-post.card .wt-post-title h3 { font-size: var(--fs-h4); line-height: 1.35; }
.blog-post.card .wt-post-text p { font-size: 15px; line-height: 1.6; text-transform: none; }

/* sidebar */
.side-bar .widget-title { font-size: var(--fs-h4); margin-bottom: 14px; }
.side-bar .widget_services ul li { font-size: 15px; }
.side-bar .widget_services ul li a { display: inline-block; padding: 5px 0; }
.side-bar .widget_services .badge { font-size: 12px; padding: 4px 7px; }
.side-bar .widget .post-title { font-size: 15px; line-height: 1.4; font-weight: 600; }
.side-bar .widget .wt-post-meta li,
.side-bar .widget-post .wt-post-meta ul li { font-size: 13px; }

/* old product-page template: the "Chemical Composition" caption row and the spec table */
.composition .table .thead-dark th {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-heading);
  line-height: var(--lh-h2);
  letter-spacing: var(--track-heading) !important;
  color: var(--ink) !important;
  padding: 0 0 18px !important;
}
.composition .table td, .composition .table th { font-size: 15px; }
.composition .table-responsive { border: 1px solid var(--line); border-radius: var(--radius); }

/* ---------- 7. FAQ accordion (one component, sitewide) ----------
   Markup: <div class="faq-list"><details open><summary>Question</summary><div class="faq-a"><p>Answer</p></div></details></div>
   Native details/summary, no JS. Product pages (pv2_faq) and blog posts share this. */
.faq-list { margin: 0 0 30px; }
.faq-list details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 0 0 10px;
  overflow: hidden;
}
.faq-list summary {
  list-style: none;
  cursor: pointer;
  display: block;
  position: relative;
  padding: 15px 52px 15px 20px;
  min-height: 52px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink);
  transition: color 0.15s ease;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.faq-list summary:hover { color: var(--gold-dark); }
.faq-list summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.faq-list details[open] summary { border-bottom: 1px solid var(--line); }
.faq-list details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq-list .faq-a { padding: 14px 20px 6px; }
.faq-list .faq-a p { margin: 0 0 12px; max-width: none; }
.faq-list .faq-a p:last-child { margin-bottom: 12px; }

/* ---------- 8. Footer ---------- */
.site-footer { font-size: 15px; }
.site-footer p, .site-footer li { line-height: 1.7; }
.footer-style3 .widget-title { font-size: 15px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.site-footer .widget_services ul li a { display: inline-block; padding: 3px 0; }
.footer-dark .footer-bottom .copyrights-text { font-size: 13px; }
.footer-dark .footer-bottom .copyrights-nav li a { font-size: 13px; }

/* ---------- 9. Phones ---------- */
@media (max-width: 767px) {
  .wt-bnr-inr {
    min-height: 0;
    padding: calc(var(--header-h) + 34px) 0 34px;
  }
  .wt-bnr-inr .banner-title-name h1 { margin-bottom: 10px; }
  .wt-breadcrumb li { font-size: 14px; }

  .section-head { margin-bottom: 28px; }
  .wt-small-separator div { font-size: 13px; letter-spacing: 2px; }

  .blog-single-post .wt-post-text h2.h3 { margin-top: 30px; }
  .blog-single-post .wt-post-text .table { min-width: 640px; font-size: 14px; }
  .blog-single-post .wt-post-text .table th,
  .blog-single-post .wt-post-text .table td { padding: 8px 10px !important; }
  .blog-single-post .wt-post-text .table-responsive { margin-bottom: 8px; }

  .side-bar { margin-top: 30px; }

  /* client logo wall: two logos per row instead of one tall column */
  .client-page .icon-font > [class*="col-"] { flex: 0 0 50%; max-width: 50%; margin-bottom: 16px; }
  .client-page .icon-font-block { padding: 10px; min-height: 120px; }

  .composition .table-responsive > .table { min-width: 640px; font-size: 14px; }

  .faq-list summary { font-size: 16px; padding: 13px 46px 13px 16px; min-height: 48px; }
  .faq-list summary::after { right: 18px; }
  .faq-list .faq-a { padding: 12px 16px 4px; }
}