/* ==========================================================================
   Tehnik d.o.o. – main stylesheet
   Mobile first: the basic rules below are for phones.
   The @media blocks at the end add the layout for tablets and desktops.
   ========================================================================== */

/* 1. BRAND COLOURS AND SIZES – change a value here and it changes everywhere */
:root {
  --color-blue: #003865;
  --color-red: #DA291C;          /* reserved for the underscore in the logo only */
  --color-steel: #4D6B89;        /* accent lines; taken from the middle "T" of the logo mark */
  --color-graphite: #50565E;
  --color-paper: #F2EFE9;
  --color-white: #FFFFFF;

  /* One background tone for the whole page: the paper texture on its own,
     with no white layers on top. Header, sections and cards all show
     exactly the same paper. Cards are told apart by a thin outline instead. */
  --color-outline: rgba(77, 107, 137, 0.25);  /* steel blue at 25 %: card outline */

  /* Paper texture used as the background of the whole page, header included.
     The path is relative to this CSS file (static/css → static/img). */
  --paper-texture: url("../img/paper-cloud.webp");

  /* Monospaced typeface, matching the "tehnik_" wordmark.
     The browser uses the first font in the list that the visitor has:
       Consolas          – Windows (installed with every Windows since Vista)
       ui-monospace,
       "SF Mono"         – macOS, iPhone and iPad (Apple's own monospaced font)
       Menlo, Monaco     – older Macs
       "Cascadia Mono"   – newer Windows and Windows Terminal
       "Liberation Mono",
       "DejaVu Sans Mono"– Linux
       "Roboto Mono",
       "Droid Sans Mono" – Android
       monospace         – last resort: any monospaced font on the device */
  --font-main: Consolas, ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono",
               "Liberation Mono", "DejaVu Sans Mono", "Roboto Mono", "Droid Sans Mono",
               monospace;
  --container-width: 72rem;   /* maximum width of the content */
  --space: 1.25rem;           /* basic spacing unit */
  --header-height: 4.5rem;    /* used so menu jumps don't hide headings */
}

/* 2. BASIC RESET – the same starting point in every browser */
*, *::before, *::after { box-sizing: border-box; }

/* Smooth scrolling when a menu link jumps to a section.
   scroll-padding-top keeps the section heading below the sticky header. */
html {
  /* iPhone/iPad enlarge text on their own (e.g. when the phone is turned
     sideways). This keeps the font sizes exactly as set in this file. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

/* Visitors who switched off animations in their system settings
   get an instant jump instead of smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Paper background for the whole page.
   First the plain paper colour (shown while the image loads or if it is
   missing), then the texture repeated across the page.
   "fixed" keeps the texture still while the content scrolls over it,
   so header and page always show one continuous sheet of paper. */
body {
  margin: 0;
  font-family: var(--font-main);
  line-height: 1.6;
  color: var(--color-graphite);
  background-color: var(--color-paper);
  background-image: var(--paper-texture);
  background-repeat: repeat;
  background-size: 600px auto;   /* size of one texture tile */
  background-attachment: fixed;
}

img { display: block; max-width: 100%; height: auto; }  /* images never overflow the screen */
h1, h2, h3 { color: var(--color-blue); line-height: 1.2; }
a { color: var(--color-blue); }

/* 3. CONTAINER – centres the content and keeps side margins on phones */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space);
}

/* 4. SKIP LINK – hidden until reached with the Tab key */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: var(--space);
  top: var(--space);
  z-index: 20;
  padding: 0.5rem 1rem;
  background: var(--color-white);
}

/* 5. HEADER
   Exactly the same paper texture as the page, stays at the top while
   scrolling, steel-blue line underneath.
   Phone: logo and languages in row 1, menu in row 2. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--color-paper);
  background-image: var(--paper-texture);
  background-size: 600px auto;
  background-attachment: fixed;   /* lines the texture up with the page */
  border-bottom: 3px solid var(--color-steel);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-block: 0.75rem;
}

.brand img { width: 160px; }

/* Very narrow phones (under 360 px): a smaller logo leaves room for
   the four language buttons in the same row. */
@media (max-width: 359px) {
  .brand img { width: 130px; }
}

.main-nav { order: 3; width: 100%; }   /* moves the menu to its own row */

.main-nav ul,
.lang-switch {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Phone: the four menu items share the full width evenly, with a slightly
   smaller font so they fit next to each other (monospaced letters are wide).
   On very narrow phones the menu can be swiped sideways instead of breaking. */
.main-nav ul {
  justify-content: space-between;
  gap: 0.25rem;
  overflow-x: auto;
  white-space: nowrap;
  /* Font size follows the screen width (3.6 % of it), between 12 and 14 px,
     so that also longer translations (e.g. Italian) fit in one row. */
  font-size: clamp(0.75rem, 3.6vw, 0.875rem);
}

.main-nav a,
.lang-switch a { font-weight: 600; text-decoration: none; }

.main-nav a { display: inline-block; padding-block: 0.25rem; }

.main-nav a:hover,
.main-nav a:focus { color: var(--color-steel); }

/* Last menu item (Contact) is shown as an outlined button,
   because contacting the company is the main goal of the page. */
.main-nav .nav-cta {
  padding: 0.25rem 0.5rem;            /* narrow on phones; wider from tablet up */
  border: 2px solid var(--color-blue);
  border-radius: 4px;
}

.main-nav .nav-cta:hover,
.main-nav .nav-cta:focus {
  color: var(--color-white);
  background: var(--color-blue);
}

/* Language buttons (EN SL IT HR): compact on phones, so that all four
   fit in the first row next to the logo; normal size from tablet up. */
.lang-switch { gap: 0.125rem; }

.lang-switch a {
  padding: 0.25rem 0.3rem;
  font-size: 0.8rem;
  border: 1px solid transparent;
  border-radius: 4px;
}

.lang-switch a[aria-current="true"] { border-color: var(--color-blue); }  /* current language */

/* 6. HERO – digital-twin illustration across the full content width.
   The SVG has a transparent background, so the paper texture shows through.
   It scales down on phones automatically (img max-width: 100%). */
.hero { padding-block: 2rem 3rem; }

/* Scroll effect (active only when hero-fade.js has added the class
   "hero-fade-on"; without JavaScript the illustration scrolls normally):
   – the hero stays fixed just under the header (sticky),
   – it sits on the lowest layer (z-index 0), so the sections that follow
     slide over it; hero-fade.js makes it fade out at the same time. */
.hero-fade-on .hero {
  position: sticky;
  top: var(--header-offset, 0px);   /* header height, measured by hero-fade.js */
  z-index: 0;
  transform-origin: center top;
  will-change: opacity, transform;  /* hint to the browser: animate smoothly */
}

/* Everything after the hero lies on a higher layer and has its own
   paper background, so it covers the fading illustration.
   "fixed" lines the texture up exactly with the page background,
   so no edge is visible between the layers. */
.hero-fade-on .hero ~ .section {
  position: relative;
  z-index: 1;
  background-color: var(--color-paper);
  background-image: var(--paper-texture);
  background-size: 600px auto;
  background-attachment: fixed;
}

/* Section stack (section-stack.js): every section of the page gets its own
   paper background, so a section sliding over another one covers it.
   "fixed" lines the texture up with the page, so no edge is visible.
   The script sets position: sticky, top, z-index, opacity and scale. */
.stack-on main > section:not(.hero) {
  background-color: var(--color-paper);
  background-image: var(--paper-texture);
  background-size: 600px auto;
  background-attachment: fixed;
  transform-origin: center top;
  will-change: opacity, transform;
}

/* The footer always lies above the stacked sections */
.stack-on .site-footer { position: relative; z-index: 50; }

.hero-figure { margin: 0; }

/* TAGLINE above the illustration: the page's main heading (h1), one
   sentence that tells visitors and search engines what the company does.
   Small and quiet, so the illustration and the slogan stay in front.
   It fades together with the illustration. */
.hero-tagline {
  max-width: 46rem;
  margin: 0 auto 1.25rem;
  font-size: clamp(0.95rem, 2.2vw, 1.3rem);
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  color: var(--color-steel);
}

/* SLOGAN over the illustration.
   Without JavaScript it simply appears below the illustration, centred. */
.hero-slogan-track { padding: 0 var(--space) 2rem; text-align: center; }

.hero-slogan {
  display: inline-block;
  margin: 0;
  padding: 0 0.8em;                /* no extra height: fits above the line */
  font-size: clamp(1rem, 4.4vw, 2.5rem);  /* one line on phones, large on desktop */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-red);           /* brand red, the slogan's accent colour */
  /* Fully transparent background and no underline: the words sit directly
     on the drawing. A soft paper-coloured glow around the letters keeps them
     readable where they cross the lines of the drawing. To remove the glow,
     delete the text-shadow line. */
  background: transparent;
  /* Moves the slogan one letter to the left. In a monospaced font
     1ch is exactly the width of one letter, at any screen size. */
  transform: translateX(-1ch);
  text-shadow: 0 0 6px var(--color-paper), 0 0 12px var(--color-paper), 0 0 18px var(--color-paper);

}

/* TYPEWRITER EFFECT (typewriter.js writes the slogan letter by letter)
   – .type-rest   letters not typed yet: invisible but keep their space,
                  so the slogan does not change size while typing,
   – .type-cursor blinking underscore after the last typed letter. */
.type-rest { visibility: hidden; }

.type-cursor {
  color: var(--color-blue);   /* navy cursor, set apart from the red slogan */
  animation: cursor-blink 1s steps(1) infinite;
}

@keyframes cursor-blink {
  50% { opacity: 0; }
}

/* Visitors who switched off animations get a steady cursor */
@media (prefers-reduced-motion: reduce) {
  .type-cursor { animation: none; }
}

/* With the scroll effect active (hero-fade.js), the slogan is lifted onto
   the illustration, just above its bottom dotted line. hero-fade.js measures
   and passes in as CSS variables:
     --hero-h   – height of the illustration section
     --slogan-y – where the slogan starts, from the top of that section
   – margin-top pulls the track up, so the slogan starts at that spot,
   – height lets the track reach exactly to the bottom of the illustration,
     which is where the Services section begins: that is the moment the
     slogan gets pushed up,
   – top keeps the stuck slogan at the same spot on the screen. */
.hero-fade-on .hero-slogan-track {
  position: relative;
  z-index: 2;                        /* above the illustration and the sections */
  margin-top: calc(var(--slogan-y) - var(--hero-h));
  height: calc(var(--hero-h) - var(--slogan-y));
  padding: 0;
  pointer-events: none;              /* clicks pass through the empty track */
}

.hero-fade-on .hero-slogan {
  position: sticky;
  top: calc(var(--header-offset) + var(--slogan-y));
  pointer-events: auto;
}
.hero-figure img { width: 100%; }

/* Hides an element visually but keeps it for screen readers and search
   engines (used for the h1 slogan above the illustration). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 7. SECTIONS – shared spacing for Services, References, About, Contact.
   All sections share the same paper background. A thin steel-blue line
   at the top of each section separates them without changing the tone.
   (The class "section-tint" is kept in the HTML but has no effect now,
   so a tinted variant can be brought back later in one place.) */
.section {
  padding-block: 3rem;
  border-top: 1px solid var(--color-outline);
}

.section-intro { max-width: 40rem; margin-top: 0; font-size: 1.05rem; }

.subheading { margin-top: 2.5rem; }

/* Introduction on a solution page: slightly larger, the main text of the page */
.solution-intro { max-width: 46rem; }
.solution-intro + .comic { margin-top: 2rem; }

/* Call to action at the end of a solution page */
.solution-cta { margin-top: 2.5rem; }
.solution-cta h2 { margin: 0 0 0.5rem; font-size: 1.2rem; }
.solution-cta .button { margin-top: 0.5rem; }

/* Running text (privacy policy): comfortable line length */
.prose { max-width: 46rem; }
.prose h2 { margin: 2rem 0 0.5rem; font-size: 1.15rem; }
.prose-updated { margin-top: 0; font-size: 0.875rem; color: var(--color-steel); }

/* Page not found */
.not-found-code {
  margin: 0;
  font-size: clamp(3rem, 12vw, 6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-outline);
}
.not-found { min-height: 60vh; }   /* keeps the footer at the bottom of the screen */
.not-found-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }

/* 8. CARDS – phone: stacked in one column */
.cards {
  display: grid;
  gap: var(--space);
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  padding: 1.5rem;
  background: transparent;                  /* same paper as the page */
  border: 1px solid var(--color-outline);   /* thin frame around the card */
  border-top: 4px solid var(--color-steel); /* accent line on top */
}

.card h3 { margin-top: 0; }
.card p { margin-bottom: 0; }

/* 8b. SOLUTION TILES on the home page
   One clickable tile per service: illustration on top, then the title
   and "Read more". All tiles have the same height and the same
   image proportions, so the row looks calm and even.
   Phone: one column; tablet: two; desktop: three (see @media below). */
.service-tiles {
  display: grid;
  gap: var(--space);
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.service-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  border: 1px solid var(--color-outline);
  border-top: 4px solid var(--color-steel);
  border-radius: 0 0 6px 6px;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

/* Illustration area: light paper panel, fixed 7:4 proportion (280 x 160) */
.service-tile-image {
  display: block;
  overflow: hidden;            /* the slight zoom on hover stays inside */
  padding: 0.75rem 1rem 0;
  background: #F7F5F0;
  border-bottom: 1px solid var(--color-outline);
}

.service-tile-image img {
  /* Full width, height from the image's own proportions (all tile
     drawings are 280 x 160), so every browser shows them the same */
  width: 100%;
  height: auto;
  transition: transform 0.3s;
}

/* Text area: number, title, link; "Read more" always sits at the bottom */
.service-tile-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1.5rem 1.25rem;
}

.service-tile-title {
  font-size: clamp(1.35rem, 2.2vw, 1.6rem);   /* larger title, scales with the screen */
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-blue);
}

.service-tile-text {
  font-size: 0.9rem;              /* short description (Solutions overview page) */
  line-height: 1.5;
  color: var(--color-graphite);
}

.service-tile-more {
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-steel);
}

.service-tile-more .arrow {
  display: inline-block;
  transition: transform 0.2s;
}

/* Mouse pointer over the tile (computers only) and keyboard focus:
   frame darkens, tile lifts with a soft shadow, the illustration zooms
   in slightly and the arrow moves to the right.
   "(hover: hover)" = a device with a real mouse. On touch screens
   (iPhone, iPad, Android) a tap would otherwise leave the tile "hovered":
   the illustration would stay enlarged, also after returning with the
   Back button. */
@media (hover: hover) and (pointer: fine) {
  .service-tile:hover {
    border-color: var(--color-blue);
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0, 56, 101, 0.10);
  }
  .service-tile:hover .service-tile-image img { transform: scale(1.04); }
  .service-tile:hover .service-tile-more { color: var(--color-blue); }
  .service-tile:hover .arrow { transform: translateX(4px); }
}

.service-tile:focus-visible {
  border-color: var(--color-blue);
  box-shadow: 0 8px 18px rgba(0, 56, 101, 0.10);
}
.service-tile:focus-visible .service-tile-more { color: var(--color-blue); }

.service-tile:focus-visible {
  outline: 3px solid var(--color-steel);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .service-tile,
  .service-tile-image img,
  .service-tile-more .arrow { transition: none; }
  .service-tile:hover,
  .service-tile:focus-visible,
  .service-tile:hover .service-tile-image img,
  .service-tile:hover .arrow { transform: none; }
}

/* 8c. SOLUTION PAGES – page bar, introduction and call to action
   – approaches: numbered cards side by side (two per row from tablet up),
   – add-on: full-width strip with a steel-blue line on the left. */
/* Page bar on the Solutions page: stays fixed under the site header
   (--header-offset is set by section-stack.js), above the stacked
   sections and below the footer. Same paper background as the page. */
.page-header {
  position: sticky;
  top: var(--header-offset, 4.5rem);
  z-index: 40;
  padding-block: 0.75rem;
  background-color: var(--color-paper);
  background-image: var(--paper-texture);
  background-size: 600px auto;
  background-attachment: fixed;
  border-bottom: 1px solid var(--color-outline);
}

/* Phone: title in row 1, section links in row 2; wider: one line */
.page-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
}

.page-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.page-header h1 {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
}

.back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--color-steel);
  border: 1px solid var(--color-outline);
  border-radius: 50%;
}

.back-link:hover,
.back-link:focus-visible { color: var(--color-blue); border-color: var(--color-blue); }

/* The link row may never be wider than the screen (it scrolls instead) */
.sub-nav { min-width: 0; max-width: 100%; }

.sub-nav ul {
  display: flex;
  gap: 0.35rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;          /* very narrow screens: swipe sideways */
  white-space: nowrap;
}

.sub-nav a {
  display: inline-block;
  padding-block: 0.3rem;
  font-size: 0.85rem;          /* phone; larger from tablet up (see below) */
  font-weight: 600;
  text-decoration: none;
  color: var(--color-steel);
  border-bottom: 2px solid transparent;
}

.sub-nav a:hover,
.sub-nav a:focus-visible { color: var(--color-blue); }

@media (min-width: 768px) {
  .sub-nav a { font-size: 0.95rem; }
}

/* The section currently on screen */
.sub-nav a.is-current {
  color: var(--color-blue);
  border-bottom-color: var(--color-blue);
}

.card h3,
.addon h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--color-blue);
}

/* Small grey label above a card title ("Approach 1", "Also available") */
.card-label {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-steel);
}

.addon {
  margin-top: var(--space);
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--color-outline);
  border-left: 4px solid var(--color-steel);
}

.addon p:last-child { margin-bottom: 0; }

/* 8d. COMIC ILLUSTRATION with numbered captions (solution pages)
   Two layouts of the same panels (see solution.html):
     .comic-phone   – shown below 768 px (e.g. 2 columns x 3 rows),
     .comic-desktop – shown from 768 px (e.g. 3 columns x 2 rows).
   --cols and --gap are set in the HTML from services.json; --gap matches
   the 20 px gap between the panels in the drawing, so the captions line
   up exactly with the panels above them. */
.comic { margin: 0 0 2rem; }

.comic-layout {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: var(--gap);
  row-gap: 0.75rem;
}

.comic-desktop { display: none; }

/* One row of panels: a crop box with the shape of one row of the image.
   Its height comes from --row-ratio (set in the HTML: row height as a
   percentage of the width) through the empty ::before block – a method
   that works in every browser, including older Safari on iPhone/iPad.
   The whole image lies inside, moved up by "top" (set in the HTML), so
   only the wanted row shows through; the rest is cut off (overflow). */
.comic-row {
  position: relative;
  grid-column: 1 / -1;
  overflow: hidden;
}

.comic-row::before {
  content: "";
  display: block;
  padding-top: var(--row-ratio);
}

.comic-row:not(:first-child) { margin-top: 0.75rem; }

.comic-row img {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;      /* the whole image at full width, proportions kept */
  max-width: none;
}

.comic-caption {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Small round step number in front of each caption */
.comic-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.35em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-white);
  background: var(--color-blue);
  border-radius: 50%;
}

@media (min-width: 768px) {
  .comic-phone { display: none; }
  .comic-desktop { display: grid; }
}

/* A single approach card uses the full width */
.cards-one { grid-template-columns: 1fr !important; }


/* 8e. REFERENCE LOGOS on the home page
   Equal boxes in a centred row that wraps (2 per row on phones, up to 4
   on desktops). Logos are shown in grey and calm by default and switch
   to their own colours on hover/focus – a common way to show customer
   logos without letting their colours clash with the page. */
.logo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space);
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.logo-grid li { flex: 0 1 calc(50% - var(--space) / 2); }

.logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 6.5rem;
  padding: 1rem 1.25rem;
  text-decoration: none;
  border: 1px solid var(--color-outline);
  border-radius: 6px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.logo-link img {
  width: auto;                 /* proportions from width/height in the HTML */
  height: auto;
  max-width: 100%;
  max-height: 3.5rem;
  filter: grayscale(1) brightness(var(--grey-brightness, 1));   /* light logos can be darkened per logo */
  opacity: 0.75;
  transition: filter 0.2s, opacity 0.2s;
}

/* Shown until the logo file is added */
.logo-fallback {
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  color: var(--color-steel);
}

/* Logos in colour: under the mouse (computers only, see the tiles above
   for why) and with keyboard focus */
@media (hover: hover) and (pointer: fine) {
  .logo-link:hover {
    border-color: var(--color-blue);
    box-shadow: 0 6px 14px rgba(0, 56, 101, 0.08);
  }
  .logo-link:hover img { filter: none; opacity: 1; }
  .logo-link:hover .logo-fallback { color: var(--color-blue); }
}

.logo-link:focus-visible {
  border-color: var(--color-blue);
  box-shadow: 0 6px 14px rgba(0, 56, 101, 0.08);
}
.logo-link:focus-visible img { filter: none; opacity: 1; }
.logo-link:focus-visible .logo-fallback { color: var(--color-blue); }

.logo-link:focus-visible {
  outline: 3px solid var(--color-steel);
  outline-offset: 3px;
}

@media (min-width: 768px) {
  .logo-grid li { flex-basis: calc((100% - 2 * var(--space)) / 3); }
}

@media (min-width: 1024px) {
  .logo-grid li { flex-basis: calc((100% - 3 * var(--space)) / 4); }
}

/* 9. OUTLOOK – highlighted statement inside the About section */
.outlook {
  margin-top: 2.5rem;
  padding-left: 1.25rem;
  border-left: 4px solid var(--color-blue);
}

.outlook-heading {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-blue);
}

/* 10. BUTTON */
.button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  color: var(--color-white);
  text-decoration: none;
  background: var(--color-blue);
  border-radius: 4px;
}

.button:hover,
.button:focus { background: var(--color-steel); }

/* 10b. CONTACT – phone: message above the address;
   tablet and wider: side by side (see @media below) */
.contact-grid {
  display: grid;
  gap: 2rem;
}

/* Both column headings start at the same height */
.contact-grid h2,
.contact-address h3 { margin-top: 0; }

/* Browsers show <address> in italics by default; keep it upright */
.contact-address address {
  margin-bottom: 0.75rem;
  font-style: normal;
}

.map-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-steel);
  text-decoration: none;
}

.map-link:hover,
.map-link:focus-visible { color: var(--color-blue); }

/* 11. FOOTER – official company details and copyright */
.site-footer {
  padding-block: 1.5rem;
  font-size: 0.875rem;
  color: var(--color-white);
  background: var(--color-blue);
}

.site-footer p { margin: 0; }

/* Privacy link in the footer: white like the rest of the line */
.footer-link { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.footer-link:hover,
.footer-link:focus-visible { text-decoration-thickness: 2px; }



/* Separator dot between footer items, with a little space around it */
.footer-legal .sep { margin-inline: 0.35rem; }

/* Footer address: hidden below 1200 px, where the line would be too long */
.footer-address { display: none; }

@media (min-width: 1200px) {
  .footer-address { display: inline; }
  /* Slightly smaller letters, so the whole line (with the address and the
     privacy link) fits on one row in every language */
  .site-footer { font-size: 0.8rem; }
}

/* Keeps a short phrase on one line (e.g. "VAT ID: SI 40876080") */
.nowrap { white-space: nowrap; }

/* 12. TABLET (768 px and wider) */
@media (min-width: 768px) {
  :root { --header-height: 5rem; }

  .header-inner { flex-wrap: nowrap; }
  .brand { margin-right: auto; }          /* logo left, everything else right */
  .brand img { width: 200px; }
  .main-nav { order: 0; width: auto; }    /* menu back into the header row */
  .main-nav ul { gap: 1rem; overflow: visible; font-size: 0.875rem; }  /* menu in the header row */
  .main-nav .nav-cta { padding-inline: 0.75rem; }
  .lang-switch { gap: 0.25rem; }
  .lang-switch a { padding: 0.25rem 0.45rem; font-size: 0.875rem; }


  .cards { grid-template-columns: repeat(2, 1fr); }  /* two cards per row */
  .service-tiles { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr 1fr; align-items: start; }  /* message | address */
}

/* 13. DESKTOP (1024 px and wider) */
@media (min-width: 1024px) {
  .main-nav ul { gap: 1.25rem; font-size: 1rem; }          /* full-size menu */
  .main-nav .nav-cta { padding-inline: 0.85rem; }
  .cards { grid-template-columns: repeat(4, 1fr); }        /* four cards per row */
  .cards-wide { grid-template-columns: repeat(2, 1fr); }   /* references stay two per row */
  .cards-3 { grid-template-columns: repeat(3, 1fr); }      /* industries: three per row */
  .service-tiles { grid-template-columns: repeat(3, 1fr); }  /* three tiles per row */
}

/* 14. iPHONE AND iPAD (Safari)
   Safari on iPhone/iPad does not support a "fixed" background: it would
   repaint the paper texture on every scroll step. There the texture simply
   scrolls with the page. "-webkit-touch-callout" exists only in Safari on
   iPhone/iPad, so these rules apply only there. */
@supports (-webkit-touch-callout: none) {
  body,
  .site-header,
  .page-header,
  .hero-fade-on .hero ~ .section,
  .stack-on main > section:not(.hero) {
    background-attachment: scroll;
  }
}