/* ======================================================================
   anythin' — overrides for Helios template
   Loaded AFTER main.css so these rules win specificity ties.
   ====================================================================== */

/* ----- Logo as image (Helios expects a text logo) ----- */
#header h1 a#logo {
  display: inline-block;
  line-height: 0;
}
#header h1 a#logo img {
  height: 120px;
  width: auto;
  max-width: 90vw;
  vertical-align: middle;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.35));
}
body.homepage #header h1 {
  font-size: 1em;            /* Neutralise the 4em text-logo rule */
  line-height: 1;
  margin: 0 0 0.5em 0;
}
@media (max-width: 736px) {
  #header h1 a#logo img { height: 96px; }
}
@media (max-width: 480px) {
  #header h1 a#logo img { height: 80px; }
}

/* ----- Language toggle (replaces dropdown nav) -----
   Nav floats over the hero photo. Sky is the backdrop; keep buttons minimal —
   white text with slight shadow for readability, a thin red underline marks active.
   No solid pill needed now that the original hi-res photo gives consistent contrast. */
#nav ul.lang {
  display: inline-flex;
  gap: 4px;
  padding: 0;
  margin: 0;
  list-style: none;
}
#nav ul.lang li { padding: 0; border: none; }
#nav ul.lang button {
  background: none;
  border: none;
  padding: 6px 10px 4px 10px;
  font-family: inherit;
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: color .15s ease, border-bottom-color .15s ease;
}
#nav ul.lang button:hover { color: #fff; }
#nav ul.lang button.active {
  color: #fff;
  border-bottom-color: #c30416;
}

/* ----- Language visibility toggle ----- */
/* !important needed to beat Helios's element-specific rules like "article header h3 { display: block }" */
[data-lang="en"] { display: none !important; }
html[lang="en"] [data-lang="pl"] { display: none !important; }
html[lang="en"] [data-lang="en"] { display: revert !important; }

/* ----- Service section: icon-based cards (no featured images) ----- */
#services .row article.special {
  text-align: center;
}
#services .icon.featured {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin: 0 auto 1.5em;
  border-radius: 50%;
  background: #c30416;
  color: #fff;
  font-size: 2.25em;
  box-shadow: 0 8px 24px rgba(195, 4, 22, 0.25);
}
#services .icon.featured:before {
  line-height: 1;
}
#services article.special header h3 {
  min-height: 2.6em; /* keep rows aligned when titles wrap differently */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ----- Technologies section ----- */
#tech {
  text-align: left; /* override .special's center alignment for cards */
}
#tech > header {
  text-align: center;
  margin-bottom: 3em;
}
/* Vendor subheading — no border (caused visual tension with card tops); rely on
   spacing + typography for separation instead.
   CRITICAL: Helios gives every .row `margin-top: -40px` (line 470 of main.css) to
   create gutter compensation. A label placed directly above a .row gets covered
   by the row's children, because the cards' background begins at the label's
   baseline. Add the 40px back to margin-bottom so the label sits clear of the
   grid that follows it. */
#tech .vendor-label {
  font-size: 0.8em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(72, 57, 73, 0.55);
  margin: 3em 0 calc(40px + 0.5em);
  padding: 0;
  border: none;
}
#tech .vendor-label:first-of-type { margin-top: 1em; }
#tech .vendor-label .label-meta {
  margin-left: 0.75em;
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: 0.06em;
  color: rgba(128, 128, 128, 0.7);
}

.tech-grid { margin-bottom: 0; }

.tech-card {
  padding: 1.75em 1.5em !important;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(128, 128, 128, 0.15);
  border-radius: 6px;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.tech-card:hover {
  border-color: rgba(195, 4, 22, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(28, 9, 32, 0.08);
}

/* Card wordmark — placeholder text styled as logo.
   When real logos arrive, replace inner .vendor + .product spans with <img>. */
.tech-logo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 1em;
  min-height: 3.2em; /* keep cards aligned when vendor/product names wrap differently */
}
.tech-logo .vendor {
  font-size: 0.7em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: #c30416;
}
.tech-logo .product {
  font-size: 1.4em;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: #1C0920; /* Helios dark plum */
  line-height: 1.15;
}

.tech-card p {
  font-size: 0.92em;
  line-height: 1.55;
  margin: 0;
  color: rgba(72, 57, 73, 0.82);
}

@media (max-width: 736px) {
  #tech .vendor-label { margin-top: 2em; }
  .tech-card { margin-bottom: 1em; }
}

/* ----- Footer contrast fixes -----
   Helios sets `strong { color: #483949 }` globally (dark plum). On #footer's
   #2b252c background this becomes unreadable. Force light in footer context. */
#footer strong { color: #fff; }
#footer, #footer p, #footer li, #footer a { color: rgba(255, 255, 255, 0.92); }

/* ----- Footer contact list ----- */
.contact-list {
  list-style: none;
  padding: 0;
  margin: 1em 0 0 0;
}
.contact-list li {
  display: flex;
  align-items: baseline;
  gap: 1em;
  padding: 0.75em 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 1.1em;
}
.contact-list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.contact-list .contact-label {
  min-width: 72px;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.5);
}
.contact-list a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.contact-list a:hover {
  border-bottom-color: #c30416;
  color: #fff;
}

/* ----- Privacy page ----- */
.doc {
  max-width: 780px;
  margin: 0 auto;
  padding: 2em 0 4em;
}
.doc h1 {
  font-weight: 300;
  font-size: 2.5em;
  margin-bottom: 1em;
}
.doc h2 {
  font-weight: 300;
  font-size: 1.4em;
  margin: 2.5em 0 0.75em;
  color: #c30416;
}
.doc p, .doc ul {
  margin-bottom: 1em;
  line-height: 1.65;
}
.doc ul { padding-left: 1.5em; }
.doc ul li { margin-bottom: 0.3em; }
.doc .back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  border: none;
  margin-bottom: 2em;
}
.doc .back:hover { color: #fff; }
.doc .meta {
  margin-top: 3em;
  padding-top: 1.5em;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
}

/* ----- Focus rings (accessibility) ----- */
:focus-visible {
  outline: 2px solid #c30416;
  outline-offset: 3px;
}