/* ======================================================================
   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;
}

/* ======================================================================
   citrix-admin landing additions
   ====================================================================== */

/* ----- Parent-brand credit in footer -----
   Sits above the copyright <hr>. Small, centered, understated — its job is to
   signal "this is part of anythin'" for anyone who lands here cold, without
   competing with the actual footer content. The arrow hints at outbound
   navigation (to anythin.pl). */
#footer .parent-brand {
  text-align: center;
  margin: 0 0 1em;
  padding-top: 0.5em;
}
#footer .parent-brand a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  border: none;
  padding: 0.4em 0.6em;
  border-radius: 3px;
  transition: color .15s ease, background-color .15s ease;
}
#footer .parent-brand a:hover {
  color: #fff;
  background-color: rgba(195, 4, 22, 0.15);
}
#footer .parent-brand a span[aria-hidden] {
  font-size: 1.1em;
  transition: transform .15s ease;
}
#footer .parent-brand a:hover span[aria-hidden] {
  transform: translateX(3px);
}

/* ----- Audience cards (Who this is for section) -----
   2x2 grid, styled the same family as .tech-card on anythin.pl — plain,
   readable, with a subtle hover lift. */
#audience { text-align: left; }
#audience > header { text-align: center; margin-bottom: 3em; }

.audience-grid { row-gap: 1.5em; }

.audience-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;
}
.audience-card:hover {
  border-color: rgba(195, 4, 22, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(28, 9, 32, 0.08);
}
.audience-card > header { margin-bottom: 0.75em; }
.audience-card h3 {
  font-size: 1.1em;
  font-weight: 300;
  color: #1C0920;
  margin: 0;
  line-height: 1.25;
}
.audience-card p {
  font-size: 0.95em;
  line-height: 1.6;
  color: rgba(72, 57, 73, 0.82);
  margin: 0;
}