/* App-level helpers — keeps anything React-specific out of the component CSS. */

.route-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  color: #6b7d8f;
  font-size: 1rem;
}

/* The content wrapper is a transparent pass-through so the preserved page
   sections keep their own full-bleed layout. */
.page-content {
  display: block;
}

/* =====================================================================
   INDEX-PAGE WATER BACKGROUND (test)
   The index page gets a fixed water background. A light-blue gradient is the
   fallback so it works before you add the photo. To use your water image,
   save it to app/public/images/water-bg.jpg (the gradient sits under it).
   On the index, the coloured strips/sections go slightly transparent so the
   water shows through subtly.
   ===================================================================== */
body.is-home {
  background-color: #eef5fc;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(232, 242, 253, 0.35) 45%, rgba(207, 227, 246, 0.5) 100%),
    url('/images/water-bg.jpg');
  background-size: cover, cover;
  background-position: center top, center top;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
}
/* Let sections breathe over the water: light sections become slightly
   translucent on the index only. */
body.is-home .section-light,
body.is-home .section {
  background-color: rgba(255, 255, 255, 0.72) !important;
}
body.is-home section.hero-bg {
  /* keep the hero photo, but allow it as-is */
}
/* Coloured strips (feature-card title bars) — slightly transparent over the
   water background, but only slightly. */
body.is-home .feature-card {
  background: rgba(255, 255, 255, 0.78) !important;
}
body.is-home .feature-card :is(h3, h4) {
  opacity: 0.9;
}

/* =====================================================================
   INDEX-ONLY rotating line-art diagram background on the 3rd section.
   Text-free black graphics (diagram.svg) slowly rotating behind the content.
   ===================================================================== */
body.is-home #main-content > div > section:nth-child(3) {
  position: relative;
  overflow: hidden;
}
body.is-home #main-content > div > section:nth-child(3) > * {
  position: relative;
  z-index: 1;
}
body.is-home #main-content > div > section:nth-child(3)::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150vmax;
  height: 150vmax;
  transform: translate(-50%, -50%);
  background: url('/images/diagram.svg') center / contain no-repeat;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
  animation: rbDiagramSpin 120s linear infinite;
}
@keyframes rbDiagramSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  body.is-home #main-content > div > section:nth-child(3)::before {
    animation: none;
  }
}

/* =====================================================================
   METRO & TUNNELLING case study — isometric urban-diagram backdrop.
   The main content section sits over a faint, large watermark of the
   Västerås-style travel-centre diagram. A soft white veil keeps the text
   crisp. To activate, save the image to:
       app/public/images/metro-tunnelling-bg.jpg
   Until then a light blue-grey gradient stands in.
   ===================================================================== */
/* The 3rd <section> is the area below the main overview (#1 hero, #2 overview,
   #3 "Related Case Studies"). It carries the diagram backdrop. */
body.is-metro-tunnel #main-content > div > section:nth-of-type(3) {
  position: relative;
  background-color: #f4f8fc !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(244, 248, 252, 0.82) 100%),
    url('/images/metro-tunnelling-bg.jpg') !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
}
/* Keep the section's own content above the backdrop. */
body.is-metro-tunnel #main-content > div > section:nth-of-type(3) > * {
  position: relative;
  z-index: 1;
}

/* =====================================================================
   CONTACT PAGE — "Our Global Presence" world-map backdrop on the white
   content area (the first section after the hero). Save the pasted graphic
   to: app/public/images/global-presence-bg.jpg
   A soft white veil keeps the contact details/form readable on top.
   ===================================================================== */
body.is-contact #main-content > div > section:nth-of-type(2) {
  position: relative;
  background-color: #f6f9fc;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(246, 249, 252, 0.8) 100%),
    url('/images/global-presence-bg.jpg');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
body.is-contact #main-content > div > section:nth-of-type(2) > * {
  position: relative;
  z-index: 1;
}

/* Shared "Industries We Serve" pill band above the footer (every page). */
.industries-band {
  padding: 36px 0 40px;
  /* Neutral flat surface so the carved-in tags read correctly. */
  background: #e9eef4;
  border-top: 1px solid #dce6f0;
  text-align: center;
}
.industries-band-title {
  color: #0a2540;
  font-size: 1.375rem;
  margin: 0 0 1.1rem;
}

/* Enforce canonical 3-column layout for explicit card grids using .cards-grid.grid-3. */
@media (min-width: 920px) {
  .cards-grid.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ===== Multilingual Styles ===== */

/* Translation banner */
.translation-banner {
    background: #fef3c7;
    border-bottom: 1px solid #f59e0b;
    padding: 12px 0;
    font-size: 14px;
    color: #92400e;
}
.translation-banner i {
    margin-right: 8px;
}
.translation-banner p {
    margin: 0;
}

/* Language switcher */
.lang-switcher .nav-link {
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 6px;
    background: rgba(255,255,255,0.1);
}
.lang-switcher .dropdown-link {
    font-size: 13px;
}
.lang-dropdown {
    min-width: 160px;
}
.lang-dropdown.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* RTL Support */
.is-rtl {
    direction: rtl;
    text-align: right;
}
.is-rtl .header-inner {
    flex-direction: row-reverse;
}
.is-rtl .nav {
    flex-direction: row-reverse;
}
.is-rtl .footer-grid-4 {
    direction: rtl;
}
.is-rtl .translation-banner i {
    margin-right: 0;
    margin-left: 8px;
}
.is-rtl .lang-switcher {
    margin-right: auto;
    margin-left: 0;
}

/* Mobile: language switcher */
@media (max-width: 1024px) {
    .lang-switcher {
        margin-top: 10px;
        border-top: 1px solid rgba(255,255,255,0.1);
        padding-top: 10px;
    }
}