/*
Theme Name: PRD Theme
Theme URI: https://pressurereliefdevice.com/
Author: pressurereliefdevice.com
Description: Production theme for pressurereliefdevice.com (Luofu Valve Group). Light hand-written CSS, no framework. assets/css/site.css is the M2 sample sheet copied byte for byte; this file only adds what WordPress output needs.
Version: 0.4.1
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: prd-theme
*/

/* Language switcher: a language that has no pages yet is shown without a link (M4 adds RU and AR). */
.lang a:not([href]) { cursor: default; opacity: 0.6; }
.lang a:not([href]):hover { background: transparent; color: var(--on-dark); }

/* Quform 2.23.1, checked on the live plugin output (2026-10-20). The plugin sheet loads after this file on purpose.
   1. Required mark: the plugin rule has three classes and comes later, so a four-class rule is needed to keep Luofu red,
      the size and the spacing of the M2 sample.
   2. Error state: the plugin marks the element with .quform-has-error (the M2 sheet guessed .quform-element-error). */
.quform .quform-label .quform-label-text .quform-required { color: var(--red); font-size: 100%; margin: 0; margin-inline-start: 2px; }
.quform .quform-has-error .quform-inner .quform-field { border-color: var(--err); }
/* 3. Field hints: the plugin sets them in italics with extra padding; the M2 sample has them upright and tight. */
.quform .quform-inner .quform-description { font-style: normal; padding: 0; }
/* 4. Spacing back to the M2 sample: the plugin adds spacer, input and button margins, and its clearfix
      pseudo-elements become empty rows inside the theme's grid (two extra gaps per list). */
.quform .quform-element .quform-spacer { margin: 0; padding: 0; }
.quform .quform-inner .quform-input { margin: 0; }
.quform .quform-element-submit .quform-button-submit { margin: 0; }
.quform .quform-inner .quform-field-textarea { height: auto; }
.quform .quform-elements::before, .quform .quform-elements::after,
.quform .quform-child-elements::before, .quform .quform-child-elements::after { display: none; }

/* Quotation button always in view (owner 2026-10-20).
   Desktop: the white main bar (logo, menu, red button) sticks to the top; the dark top bar scrolls away.
   Below 1024 px the header button sits inside the folded menu, so a bar with the button stays at the bottom. */
@media (min-width: 1024px) {
  .site-header { position: sticky; inset-block-start: 0; z-index: 50; }
  .admin-bar .site-header { inset-block-start: 32px; }
  html { scroll-padding-block-start: 100px; }
  .aside-card { inset-block-start: calc(84px + var(--space-3)); }
}
.mobile-quote-bar {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 60;
  background: var(--white); border-block-start: 1px solid var(--line);
  padding: var(--space-1) var(--gutter); padding-block-end: calc(var(--space-1) + env(safe-area-inset-bottom));
}
@media (max-width: 1023px) {
  body:has(.mobile-quote-bar) { padding-block-end: 72px; }
}
@media (min-width: 1024px) {
  .mobile-quote-bar { display: none; }
}

/* Quick form card (D033). Home page: next to the quotation steps, steps on the left (D036).
   A template can also put it in the blue quotation band (quick => true); the band's white text rules stop at the card. */
.quick-card { background: var(--paper); border: 1px solid var(--line); border-block-start: 4px solid var(--red); border-radius: var(--radius); padding: var(--space-3); color: var(--ink); }
.quick-card h3 { margin-block-end: var(--space-2); }
.quick-card .quform .quform-elements { max-width: none; }
@media (min-width: 1024px) {
  .process-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); gap: var(--space-4); align-items: start; }
  .process-split .quick-card { position: sticky; inset-block-start: calc(84px + var(--space-3)); }
  .process-split .steps { grid-template-columns: 1fr; gap: var(--space-3); }
  .process-split .steps li { padding-inline-start: 60px; padding-block-start: 0; }
  .process-split .steps li::after { inset-block-start: 52px; inset-block-end: calc(-1 * var(--space-3) + 8px); inset-inline-start: 21px; inset-inline-end: auto; border-block-start: 0; border-inline-start: 2px solid var(--line); }
  .process-split .steps li:nth-child(4n)::after { display: block; }
  .process-split .steps li:last-child::after { display: none; }
}
@media (max-width: 1023px) {
  .process-split .quick-card { margin-block-start: var(--space-4); }
}
@media (min-width: 1024px) {
  .cta-band-form .cta-grid { grid-template-columns: 1fr 1fr; align-items: start; gap: var(--space-4); }
}
.cta-band .quick-card { background: var(--white); border-color: var(--white); }
.cta-band .quick-card p { color: var(--ink-2); }
.cta-band .quick-card a:not(.btn) { color: var(--blue); }
.cta-band .quick-card .quform-success-message p { color: var(--ink); }

/* Small spec rows on product cards (owner 2026-10-20, D037): the label is plain text, so it uses the body font;
   the value keeps the mono font for aligned numbers. Email links stay mono. */
.spec-mini li span:first-child { font-family: var(--font-sans); }

/* Product cards: the photo links to the product page too (owner 2026-10-20, review of M3-2). The photo link is out of
   the tab order and hidden from screen readers (template-parts/product-card.php). Hovering the photo marks the title
   link the same way as hovering the title itself, so the photo shows where it leads. No animation (UI standard). */
a.card-media { text-decoration: none; }
.card:has(a.card-media:hover) .card-body h3 a { color: var(--blue-dark); text-decoration: underline; }

/* Top bar on phones (owner 2026-10-20): the email address stays on one line instead of breaking mid-word
   (site.css lets .email-link break anywhere); smaller type and tighter language buttons make room. */
@media (max-width: 479px) {
  .topbar-row { gap: var(--space-1); }
  .topbar-info .email-link { overflow-wrap: normal; white-space: nowrap; font-size: 12px; }
  .lang a { padding-inline: 6px; }
}
@media (max-width: 359px) {
  .topbar-info .email-link { font-size: 11px; }
}

/* 404 page */
.notfound { padding-block: var(--space-4) var(--space-5); }
.notfound .btn-row { margin-block-start: var(--space-3); }

/* Product pages (M3-2, 2026-10-20). The M2 sample put the series chips in a span and gave the h1 an inline
   top margin; the template prints the chips in .page-chips and the gap comes from here. */
.page-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: var(--space-2); }
/* Quick form card under the list of what we need to quote (D033: on product pages it sits in the main column,
   right after the list, so the side card keeps its M2 place and the form follows the list it asks for). */
.product-main .quick-card { margin-block-start: var(--space-3); }

/* Products overview (M3-2): text on the left, quick form card on the right, as on the home page (D036). */
.form-split { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 1024px) {
  .form-split { grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); }
  .form-split .quick-card { position: sticky; inset-block-start: calc(84px + var(--space-3)); }
}
/* Main navigation: Products stays marked on the product pages below /products/ (aria-current="true", inc/menus.php). */
.site-nav li a[aria-current="true"] { color: var(--red); box-shadow: inset 0 -3px 0 var(--red); }
/* Table headers are labels, not numbers: body font, also over number columns (same rule as D037 for spec labels). */
.table thead th { font-family: var(--font-sans); }
.table-compare th[scope="row"] { font-weight: 600; background: transparent; }
.table-compare td.mono { white-space: nowrap; }
.table-choose td:last-child { white-space: nowrap; }

/* Engineering and standards pages (M3-3, 2026-10-20): same frame as the product pages (main column and side card).
   Short answer box at the top, "On this page" links, tables with up to four columns, term lists, downloads. */
.eng-main > .answer-box { padding: var(--space-3); margin-block-end: var(--space-4); border-block-end: 1px solid var(--line); border-inline-start: 4px solid var(--blue); }
.eng-main > .answer-box h2 { font-size: var(--fs-h3); }
.toc { margin-block-end: var(--space-4); padding-block-end: var(--space-4); border-block-end: 1px solid var(--line); }
.toc h2 { font-size: var(--fs-h3); }
.toc ol { columns: 2 16em; column-gap: var(--space-4); padding-inline-start: 1.4em; margin: 0; }
.toc li { break-inside: avoid; margin-block-end: 4px; }
.toc li::marker { font-family: var(--font-mono); color: var(--blue); font-weight: 600; }
.eng-main { min-width: 0; }
.table-eng td { max-width: none; }
/* Four-column tables (the data sheet blocks, the series table) keep the same column widths from table to table.
   Below 600 px each row stacks into a card: column 1 and 2 on the first line, then each further cell under its
   column heading (data-label), so nothing needs side scrolling on a phone. */
.table-eng.table-cols-4 { table-layout: fixed; }
@media (max-width: 599px) {
  .table-eng.table-cols-4, .table-cols-4 tbody, .table-cols-4 tr, .table-cols-4 td { display: block; width: auto; }
  .table-cols-4 thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table-cols-4 tr { padding: 10px 12px; border-block-end: 1px solid var(--line); }
  .table-cols-4 tbody tr:nth-child(even) { background: var(--paper); }
  .table-cols-4 tbody tr:nth-child(even) td { background: transparent; }
  .table-cols-4 td { padding: 0; border: 0; text-align: start; }
  .table-cols-4 td:nth-child(1), .table-cols-4 td:nth-child(2) { display: inline; font-weight: 600; }
  .table-cols-4 td:nth-child(1)::after { content: " \00B7  "; font-family: var(--font-sans); font-weight: 400; }
  .table-cols-4 td:nth-child(n+3) { margin-block-start: 6px; }
  .table-cols-4 td:nth-child(n+3)::before { content: attr(data-label); display: block; font-size: var(--fs-small); color: var(--ink-2); }
}
.table-cols-4 th:nth-child(2) { width: 26%; }
.table-cols-4 th:nth-child(4) { width: 21%; }
.table-cols-4 th.num:first-child { width: 4em; }
/* Column headings stay in the body font over number columns too (.table th.num would win over .table thead th). */
.table-eng thead th.num { font-family: var(--font-sans); }
.table-eng td p { margin: 0; }
/* Document outline (D041, 2026-10-20): stands in for a certificate image that is not shown (same size as the thumbnails). */
.badge-doc { flex: none; display: block; position: relative; width: 52px; height: 72px; border: 1px solid var(--line); background: var(--paper); }
.badge-doc::after { content: ""; position: absolute; inset-inline-end: 0; inset-block-start: 0; width: 14px; height: 14px; background: var(--white); border-inline-start: 1px solid var(--line); border-block-end: 1px solid var(--line); }
.cert-grid .badge-doc { width: 56px; height: 78px; }
/* Reference note (D039, 2026-10-20): the box with the fallback wording on pages with technical figures. */
.reference-note { margin-block: var(--space-3) var(--space-4); }
.reference-note h2, .reference-note h3 { font-size: var(--fs-h3); margin-block: 0 8px; }
.eng-main > .reference-note { margin-block-start: 0; }
/* M3-4: a code in a two- or three-column table (the patent numbers) stays on one line from 600 px up. */
@media (min-width: 600px) {
  .table-eng:not(.table-cols-4) td .mono { white-space: nowrap; }
}
.terms { margin: 0 0 var(--space-2); border-block-start: 1px solid var(--line); }
.terms > div { padding-block: 12px; border-block-end: 1px solid var(--line); }
.terms dt { font-weight: 700; margin-block-end: 4px; }
.terms dd { margin: 0; }
@media (min-width: 768px) {
  .terms > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-3); }
  .terms dt { margin: 0; }
}
.downloads { list-style: none; padding: 0; margin: 0 0 var(--space-2); display: grid; gap: var(--space-1); }
.downloads li { padding: 12px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.download-link { font-weight: 600; }
.download-meta { display: block; font-size: var(--fs-small); color: var(--ink-2); }

/* M4-1 (2026-10-20) · Russian pages: long words (предохранительные, 17 letters) overflowed the narrow product cards and
   footer columns at 1280 px. Automatic hyphenation for Russian (the html lang attribute is ru-RU) in headings, cards,
   tables, the footer and the breadcrumb, and a break inside a word as the last resort anywhere. English and Arabic
   pages are not affected. */
html[lang|="ru"] body { overflow-wrap: break-word; }
html[lang|="ru"] :is(h1, h2, h3, .card, .table, .site-footer, .breadcrumb, .spec) { -webkit-hyphens: auto; hyphens: auto; }

/* M4-1 (2026-10-20) · Arabic pages: the value cells that site.css keeps as left-to-right islands (spec values, the
   small spec lines on cards, the facts band, number cells, chips and the series cells of tables) now hold Arabic words
   around the numbers (من, إلى, حتى, شفات). Laid out left to right as a whole, those words came out in the wrong order.
   On right-to-left pages these cells take the page direction. Every number, model code, standard number and Latin run
   inside them stays left to right, isolated by the bdi filter of the theme (inc/i18n.php). Email links, code names
   (span.mono) and .ltr keep the island rule. Arabic letters inside the mono font fall back to Cairo. English and
   Russian pages are not affected. */
[dir="rtl"] :is(.num, .chip, td.mono, .spec dd, .spec-mini li span:last-child, .facts-band dd) { direction: rtl; }
html[lang="ar"] { --font-mono: "Noto Sans Mono", "Cairo", "SFMono-Regular", Menlo, Consolas, monospace; }

/* v0.4.1 (2026-10-20, owner D044 item 1) · Russian header on wide screens: the content is at most 1200 px wide, but
   the side padding of the main navigation items grows with the window (0.75vw, up to 13 px at 1734 px). The Russian
   labels are the longest, so from 1592 px the navigation ran over the brand (up to 14 px from 1736 px; the owner's
   MacBook Pro in full screen). On Russian pages the padding stops growing at its 1280 px value. English and Arabic
   keep the original rule (their smallest gap on 1024 to 2560 px is 30 px and 239 px). */
@media (min-width: 1024px) {
  html[lang|="ru"] .site-nav li a { padding-inline: clamp(5px, 0.75vw, 9.6px); }
}

/* v0.4.1 (2026-10-20, owner D044 item 2) · The right-hand sticky card ends level with the left column. Every section
   of .product-main has 40 px padding and 40 px margin below it, the last one too, so at the end of the page the sticky
   card stopped about 80 px below the last line on the left. From 1024 px (where the card is sticky) the last section
   drops them and the layout carries the same 80 px below, so the space before the next band stays the same. */
@media (min-width: 1024px) {
  .product-main > section:last-child { padding-block-end: 0; margin-block-end: 0; }
  .product-layout { padding-block-end: calc(2 * var(--space-4)); }
}