/* graphIT Shop: 2025-ös arculat a régi graphit téma fölé.
 * A színcserék a brand-colors.css-ben vannak (generált); ez a fájl a kézzel
 * írt rész: betűtípusok, logó, címsorok, oldalsáv.
 *
 * Paletta (graphIT Brand Guide 2025):
 *   off-white #f4f3f2 · petrol #0f697a · teal #549eab · sage #acb897
 *   szöveg #333333 · halvány szöveg #5b6d71 · keret #c5d2d3
 */

/* ---- Betűtípusok (OFL, a fonts/ mappából; nem Google-ről töltjük) ---- */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Wix Madefor Display";
  src: url("../fonts/WixMadeforDisplay-Bold.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

body,
input,
select,
textarea,
button {
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
}
body {
  color: #333333;
}

h1, h2, h3, h4, h5, h6,
.page .brand-title span,
.content-shop ul.category-jump li a {
  font-family: "Wix Madefor Display", "IBM Plex Sans", "Segoe UI", sans-serif;
}
.content-shop h1 {
  text-transform: none;
  font-weight: 700;
  color: #0f697a;
}
.page .brand-title span {
  font-weight: 700;
}

/* Szakaszcím: petrol, alatta vékony sage vonal (a guide jellegzetes eleme) */
.content-shop .loop header h2 {
  border-bottom: 2px solid #acb897;
}

/* ---- Logó: 2025-ös, off-white változat a petrol sávon ---- */
.main-header .site-nav-area .site-nav .logo h1 a {
  width: 178px;
  height: 58px;
  background: url("../images/graphIT_LOGO_2025_Brand_LIGHT_Transparent.svg") 0 50% / contain no-repeat;
}
.main-footer .footer-widget-area .footer-widgets .widget.logo img {
  content: url("../images/graphIT_LOGO_2025_Brand_LIGHT_Transparent.svg");
  width: 165px;
  height: auto;
}

/* ---- Siemens partner jelvény a fejlécképen (content-header-image.php) ---- */
.page .page-banner-image .siemens-sp-logo img {
  display: block;
  width: 185px;
  height: auto;
  background: #fff;
  padding: 10px;
  box-sizing: content-box;
}

/* ---- Gombok, linkek: 4 px lekerekítés, petrol ---- */
.content-shop ul.category-jump li a,
.iphorm button.iphorm-submit-element span {
  border-radius: 4px;
}
.content-shop p a:hover {
  text-decoration: underline;
}

/* ---- Storefront oldal (storefront-page.php) ----
 * A fehér doboz belső margója nélkül a storefront saját háttere (#f4f3f2)
 * a doboz teljes, 1170 px-es szélességét kitölti. */
.page.page-storefront {
  padding: 0;
  overflow: hidden;
  border-radius: 6px;
}
.page.page-storefront .content-shop.full {
  width: auto;
}
.page.page-storefront store-template {
  display: block;
}
.page.page-storefront .content-shop.full > p {
  margin: 0;
}
.page.page-storefront .content-shop.full > p:empty {
  display: none;
}

/* ---- Teal sáv a jobb szélen (a guide szerint kb. a szélesség 3 %-a) ----
 * Csak ott, ahol elfér a fehér doboz mellett (1260 px fölött), illetve
 * mobilon keskenyen. 960 és 1260 px között nincs, mert a dobozra lógna. */
@media (min-width: 1260px) {
  body::after {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(3vw, 48px);
    background: #549eab;
    z-index: 5;
    pointer-events: none;
  }
}
@media (max-width: 959px) {
  body::after {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 5px;
    background: #549eab;
    z-index: 5;
    pointer-events: none;
  }
}