/* ==========================================================================
   TGC components
   --------------------------------------------------------------------------
   Reusable pieces introduced by the premium improvement pass. Anything that was
   previously expressed as repeated inline `style` attributes on a page belongs
   here, so it can be themed and made responsive in one place.

   Uses the breakpoint scale documented in assets/css/tgc-foundation.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header — the dropdown is a real disclosure. The chevron used to be an
   ::after on the parent link, which meant the only way to open the submenu was
   to hover. It is now a button that carries aria-expanded, so the submenu can be
   opened from the keyboard and announces its state.
   -------------------------------------------------------------------------- */

.nav-dropdown > .nav-link::after {
  content: none;
}

.nav-dropdown {
  display: flex;
  align-items: center;
}

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-height: var(--tgc-tap-min);
  padding: 0;
  color: var(--gray-700);
}

/* A chevron pointing down is not direction-sensitive, so the borders stay
   physical: `border-inline-end` would flip it sideways in RTL. */
.nav-dropdown-toggle::before {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.6;
  transition: transform 0.2s, opacity 0.2s;
}

.nav-dropdown:hover .nav-dropdown-toggle::before,
.nav-dropdown-toggle[aria-expanded='true']::before {
  transform: rotate(-135deg) translateY(2px);
  opacity: 1;
}

/* Opened by pointer hover, by keyboard focus, or explicitly by the toggle. */
.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Header call to action — one link, two labels. The short label keeps the CTA
   in the header at tablet widths, where the full navigation does not fit.
   -------------------------------------------------------------------------- */

.nav-cta {
  white-space: nowrap;
}

.nav-cta-short {
  display: none;
}

@media (max-width: 1023px) {
  /* Below the navigation threshold the link list collapses but the call to
     action stays, using its short label. */
  .nav-cta {
    display: inline-flex;
  }

  .nav-cta-full {
    display: none;
  }

  .nav-cta-short {
    display: inline;
  }
}

@media (max-width: 599px) {
  /* Below this the logo, CTA and hamburger cannot share the bar; the CTA lives
     inside the mobile menu instead. */
  .nav-cta {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Hamburger — the icon now reflects the menu state.
   -------------------------------------------------------------------------- */

.nav-hamburger svg {
  width: 22px;
  height: 22px;
}

.nav-hamburger .nav-hamburger-cross,
.nav-hamburger[aria-expanded='true'] .nav-hamburger-bars {
  display: none;
}

.nav-hamburger[aria-expanded='true'] .nav-hamburger-cross {
  display: block;
}

/* --------------------------------------------------------------------------
   Mobile menu — product categories are a nested disclosure rather than a flat
   list indented with inline padding.
   -------------------------------------------------------------------------- */

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mobile-menu-group {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.mobile-menu-parent {
  font-weight: 700;
}

.mobile-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tgc-tap-min);
  min-height: var(--tgc-tap-min);
  color: var(--gray-700);
  border-radius: var(--radius);
}

.mobile-menu-toggle::before {
  content: '';
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s;
}

.mobile-menu-toggle[aria-expanded='true']::before {
  transform: rotate(-135deg) translateY(2px);
}

.mobile-submenu {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-inline-start: 18px;
  border-inline-start: 2px solid var(--gray-200);
  margin: 4px 0 8px;
}

.mobile-submenu[hidden] {
  display: none;
}

.mobile-submenu a {
  font-size: 14px;
  color: var(--gray-600);
}

.mobile-menu-contact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-200);
  font-size: 13.5px;
}

.mobile-menu-contact a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tgc-tap-min);
  color: var(--gray-600);
}

/* --------------------------------------------------------------------------
   Footer — column headings are real headings, and the contact icons are sized
   by a class instead of an inline style repeated on every page.
   -------------------------------------------------------------------------- */

.footer-col-title {
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 18px;
  line-height: 1.4;
}

.footer-contact-icon {
  width: 14px;
  height: 14px;
  color: #0e7c9f;
  flex-shrink: 0;
  margin-top: 5px;
}

/* --------------------------------------------------------------------------
   Promo card — a full-width card that pairs a media panel with a dark copy
   panel. Used for the download-centre entry on the products hub.
   -------------------------------------------------------------------------- */

.tgc-promo-card {
  grid-column: 1 / -1;
}

.tgc-promo-card-inner {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  height: 100%;
  background: linear-gradient(135deg, var(--primary-3), var(--primary));
  border-radius: var(--radius-md);
  overflow: hidden;
}

.tgc-promo-card-media {
  height: 100%;
  background: linear-gradient(135deg, var(--primary-2), var(--primary));
}

.tgc-promo-card-media img {
  opacity: 0.5;
}

.tgc-promo-card-body {
  background: transparent;
  padding: 36px;
}

.tgc-promo-card-body h3 {
  color: #ffffff;
  font-size: 22px;
}

.tgc-promo-card-body p {
  color: #94c5de;
  font-size: 14.5px;
  line-height: 2;
}

.tgc-promo-card-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.tgc-promo-card-tags span {
  font-family: var(--font-num);
  font-size: 11.5px;
  color: #67e8f9;
  padding: 6px 10px;
  background: rgba(103, 232, 249, 0.1);
  border: 1px solid rgba(103, 232, 249, 0.2);
  border-radius: 3px;
}

.tgc-promo-card-actions {
  margin-top: 20px;
}

@media (max-width: 760px) {
  .tgc-promo-card-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .tgc-promo-card-media {
    height: 180px;
  }

  .tgc-promo-card-body {
    padding: 24px;
  }
}

/* --------------------------------------------------------------------------
   Product cards
   --------------------------------------------------------------------------
   Three card conventions grew up independently: `.product-card` on the products,
   valves, fittings and process hubs, `.tank-category-card` on the accessories
   hub, and `.variant` on the tubing and industrial-pipe hubs. Their class names
   stay — page-specific layers depend on them — but the behaviour a visitor
   notices is unified here: the same hover response, the same title-link
   treatment, the same action-row alignment, and image panels that hold their
   aspect ratio instead of collapsing.
   -------------------------------------------------------------------------- */

/* `display` is deliberately left alone: `.product-card` and `.tank-category-card`
   are column flex containers while `.variant` is a two-column grid that puts the
   image beside the copy. Only the shared behaviour is set here. */
.product-card,
.tank-category-card,
.variant {
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.product-card:hover,
.tank-category-card:hover,
.variant:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Action rows line up across a row of cards whose descriptions differ in length.
   Both card bodies are already column flex containers, so `margin-top: auto` on
   the last row is enough. */
.product-card-actions,
.tank-card-actions {
  margin-top: auto;
}

.product-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-card-actions .btn,
.tank-card-actions .btn {
  flex: 1 1 auto;
  justify-content: center;
}

/* Card titles are links; they should not look like body copy on hover. */
.product-card-title-link,
.tank-card-body h3 a,
.variant-body h3 a {
  color: inherit;
  text-decoration: none;
}

.product-card-title-link:hover,
.tank-card-body h3 a:hover,
.variant-body h3 a:hover {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Sibling categories — lets a visitor move sideways between product categories
   without going back up to the products hub. Generated from
   tools/lib/site-map.mjs so every category page carries the same set.
   -------------------------------------------------------------------------- */

.tgc-sibling-nav {
  padding: 40px 0 8px;
  border-top: 1px solid var(--gray-200);
}

.tgc-sibling-nav-title {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-500);
  letter-spacing: 0.02em;
}

.tgc-sibling-nav-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tgc-sibling-nav-list a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: var(--tgc-tap-min);
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.tgc-sibling-nav-list a:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.tgc-sibling-nav-list strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
}

.tgc-sibling-nav-list span {
  font-size: 12px;
  color: var(--gray-500);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Industry sectors — each sector card names the products that sector buys, so it
   links to them instead of being a dead end.
   -------------------------------------------------------------------------- */

.tgc-industry-products {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-200);
}

.tgc-industry-products-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
}

.tgc-industry-products a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tgc-tap-min);
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.tgc-industry-products a:hover {
  color: var(--white);
  background: var(--accent);
  border-color: var(--accent);
}

/* Sector anchors are linked from the homepage and the footer, so the sticky
   header must not cover the heading a visitor just jumped to. */
.industry-card[id] {
  scroll-margin-top: calc(var(--tgc-nav-h) + 24px);
}

/* --------------------------------------------------------------------------
   Trust panel — the three things a process buyer checks before enquiring:
   which standards apply, which documents can be supplied, and what the company
   can actually do. Shared between the about page and the industries page.
   -------------------------------------------------------------------------- */

.tgc-trust-panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.tgc-trust-panel {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
}

.tgc-trust-panel h3 {
  margin: 0 0 8px;
  font-size: 17px;
}

.tgc-trust-panel > p {
  margin: 0 0 16px;
  font-size: 13.5px;
  color: var(--gray-500);
  line-height: 1.95;
}

.tgc-trust-panel ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.tgc-trust-panel li {
  position: relative;
  padding-inline-start: 20px;
  font-size: 13px;
  color: var(--gray-700);
  line-height: 1.85;
}

.tgc-trust-panel li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 50%;
}

/* `margin-top: auto` keeps the actions on one line across a row of panels whose
   lists are different lengths; the list's own bottom margin is the minimum gap. */
.tgc-trust-panel .btn {
  align-self: flex-start;
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   Trust strip — the reference standards a buyer scans for immediately after the
   hero. Deliberately lists standards the products are supplied to, not
   certification schemes the company holds.
   -------------------------------------------------------------------------- */

.tgc-trust-strip {
  padding: 18px 0;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
}

.tgc-trust-strip-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

.tgc-trust-strip-label {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray-500);
  letter-spacing: 0.02em;
}

.tgc-trust-strip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tgc-trust-strip-list li {
  padding: 6px 12px;
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .tgc-trust-strip-inner {
    gap: 10px;
  }

  .tgc-trust-strip-label {
    flex: 1 0 100%;
    font-size: 12px;
  }
}

/* --------------------------------------------------------------------------
   Contact meta row — phone/email pairs that appear under call-to-action bands
   and in the footer. Kept LTR for the numbers while the label stays RTL.
   -------------------------------------------------------------------------- */

.cta-meta a,
.tgc-contact-inline a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tgc-tap-min);
  padding-inline: 4px;
}

/* --------------------------------------------------------------------------
   RFQ form — validation state.

   Nothing on the form used to say which of its 31 fields were required, and the
   only feedback on a bad value was the browser's own bubble, which is unstyled,
   in the wrong language and gone on the next click.
   -------------------------------------------------------------------------- */

.tgc-form-legend {
  margin: 0 0 20px;
  font-size: 12.5px;
  color: var(--gray-500);
}

.tgc-required {
  margin-inline-start: 3px;
  color: var(--tgc-danger);
  font-weight: 700;
}

.tgc-form-errors {
  margin-bottom: 20px;
  padding: 16px 18px;
  font-size: 13.5px;
  color: var(--tgc-danger);
  background: var(--tgc-danger-soft);
  border: 1px solid var(--tgc-danger-border);
  border-radius: var(--radius-md);
}

.tgc-form-errors p {
  margin: 0 0 8px;
  font-weight: 600;
}

.tgc-form-errors ul {
  margin: 0;
  padding-inline-start: 20px;
}

.tgc-form-errors a {
  color: inherit;
  text-decoration: underline;
}

/* An empty slot must not take up space, or every field gains a gap. */
.tgc-field-error:empty {
  display: none;
}

.tgc-field-error {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tgc-danger);
}

/* Colour alone would not carry this, so the border weight changes too. */
.form-field .is-invalid {
  border-color: var(--tgc-danger);
  border-width: 2px;
}

.form-field .is-invalid:focus {
  border-color: var(--tgc-danger);
  box-shadow: 0 0 0 3px var(--tgc-danger-border);
}

/* --------------------------------------------------------------------------
   Sticky contact bar — on a phone, the enquiry route on a product page was a
   button in the hero and another one below several screens of specification
   tables. This keeps both within thumb reach while a visitor reads the tables.
   -------------------------------------------------------------------------- */

.tgc-sticky-contact {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgb(255 255 255 / 96%);
  border-top: 1px solid var(--gray-200);
  box-shadow: 0 -4px 16px rgb(15 23 42 / 8%);
}

.tgc-sticky-contact a {
  display: inline-flex;
  flex: 1 1 0;
  gap: 6px;
  align-items: center;
  justify-content: center;
  min-height: var(--tgc-tap-min);
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius);
}

.tgc-sticky-contact .tgc-sticky-call {
  color: var(--primary);
  background: var(--white);
  border: 1.5px solid var(--primary);
}

.tgc-sticky-contact .tgc-sticky-rfq {
  color: var(--white);
  background: var(--accent);
  border: 1.5px solid var(--accent);
}

.tgc-sticky-contact svg {
  width: 17px;
  height: 17px;
  flex: none;
}

@media (max-width: 760px) {
  .tgc-sticky-contact {
    display: flex;
  }

  /* Reserve the bar's height so it never covers the end of the page. */
  body:has(.tgc-sticky-contact) {
    padding-bottom: 72px;
  }

  /* The open mobile menu owns the screen; two overlays would fight. */
  body.tgc-menu-open .tgc-sticky-contact {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Footer standards row.

   This used to be a row of bare badges — `3-A Sanitary`, `EHEDG` — which reads
   as a set of credentials the company holds. It now names the dimensional and
   product standards orders are supplied to, and says in words what that means,
   because a badge cannot carry a qualification and a sentence can.
   -------------------------------------------------------------------------- */

.footer-standards {
  max-width: var(--container);
  margin: 0 auto;
  padding: 22px 32px 0;
  border-top: 1px solid rgb(255 255 255 / 6%);
}

.footer-standards-line {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #c9dbe6;
  line-height: 2;
}

.footer-standards-line span {
  font-family: var(--font-num);
}

.footer-standards-note {
  margin: 0;
  font-size: 12px;
  color: #93aec2;
  line-height: 1.95;
}

/* The copyright line no longer sits opposite a badge row, so it no longer needs
   to be a two-column flex container. */
.footer-standards + .footer-bottom {
  border-top: 0;
  padding-top: 14px;
}

@media (max-width: 760px) {
  .footer-standards {
    padding-inline: 20px;
  }
}

/* --------------------------------------------------------------------------
   Homepage hero statistics.

   The third cell used to read «+۳۰۰ پروژه» — a figure the owner has not
   verified. It now states the same idea without a count, so the cell has no
   number to sit in the first column and spans the whole width instead.
   -------------------------------------------------------------------------- */

.tgc-hero-card .tgc-hero-card-note {
  grid-template-columns: 1fr;
}

/* The qualification that has to travel with any standards list: a bare list of
   standard names reads as a credential, and a sentence can say what it isn't. */
.tgc-trust-panel-note,
.tgc-trust-strip-note {
  margin: 0 0 18px;
  font-size: 12.5px;
  color: var(--gray-500);
  line-height: 1.9;
}

.tgc-trust-strip-note {
  flex: 1 0 100%;
  margin: 4px 0 0;
}

/* The standards library lists certification schemes alongside dimensional
   standards. Without this line the page reads as a list of credentials. */
.tgc-standards-qualifier {
  max-width: 880px;
  margin: 16px 0 0;
  padding: 14px 18px;
  font-size: 13.5px;
  line-height: 2;
  color: var(--gray-700);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
}