/*
=================================================================
  Master CSS for Capture2Go
=================================================================
TABLE OF CONTENTS:
- :root (Color Variables)
- General Styles & Typography
- Helper Classes (e.g., for Anchor Scrolling)
- Navigation (Navbar)
- Buttons (General & Specific)
- Page Components
  - Hero Section
  - Information Tiles
  - Pricing Table
  - App Page
  - Extra Pages (Legal, Privacy)
  - Footer
- Media Queries (Responsive Design)
=================================================================
*/

/* outfit-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/fonts/outfit-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* outfit-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  src: url('../assets/fonts/outfit-v15-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* outfit-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  src: url('../assets/fonts/outfit-v15-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* outfit-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  src: url('../assets/fonts/outfit-v15-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ===============================================================
   :root (Color Variables)
   =============================================================== */
:root {
  --primary: #10519e;         /* Dark Blue */
  --primary-light: #2a64a9;  /* Light Blue */
  --primary-lighter: #5c85b9; /* Even Lighter Blue */
  --primary-lightest: #eaf0f6;/* Very light, almost white Blue */
  --secondary: #bf263a;        /* Accent Red */
  --tertiary: #ffc300;         /* Accent Yellow */

  --gradient-blue: #3c97f2; /* Bright, vibrant blue */
  --gradient-red: #e63946; /* Bright, vibrant red */  

  --gradient: linear-gradient(to right, #10519e, #bf263a);
}

/* ===============================================================
   General Styles & Typography
   =============================================================== */


/* Defines the font family for all headings. */
h1, h2, h3, h4, h5, h6 {
  font-family: "Outfit", "Poppins", sans-serif;
}

/* Specific style for the main heading. */
h1 {
  font-size: 60px;
  font-weight: 500;
}

/* Ensures buttons use a standard sans-serif font. */
button {
  font-family: sans-serif;
}

/* Resets default margin and padding for common elements. */
p, ul, h4 {
  margin: 0;
  padding: 0;
}

/* Default styles for anchor tags. */
a {
  color: white;
  text-decoration: none;
}

/* Removes default list bullet points. */
li {
  list-style-type: none;
}

/* Background colors for main sections */
.footer {
  background-color: var(--primary);
}

.location {
  background-color: var(--primary-light);
}

.bottom {
  background-color: black;
}

/* ===============================================================
   Helper Classes
   =============================================================== */

.aos-fix {
  overflow-x: hidden;
}

.aos-fix::before {
  content: " ";
  display: table;
}
/* Corrects the issue where fixed headers cover anchor targets during scroll. */
.scroll-anchor {
  scroll-margin-top: 30px;
}

/* Creates a sticky footer layout for the app page. */
.sticky-footer-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Ensures the body is at least the full viewport height */
}

.app-content {
  flex-grow: 1; /* Tells the <main> area to take up all available space */
}

/* A class for fluid containers with min, preferred, and max widths. */
.container-clamped {
  width: clamp(320px, 90vw, 1140px); /* MIN, PREFERRED, MAX */
  margin-left: auto;
  margin-right: auto;
}

/* Custom light gray background, slightly darker than standard bg-light. */
.bg-custom-light-grey {
  background-color: #e9ecef;
}

select#addressCountry:invalid,
#salutation,
#title {
  color: #6c757d;
}

/* Links inside light content sections (e.g., Privacy, Legal) */
.ex-basic-1 a {
  color: var(--primary); /* Sets the link color to primary blue */
}

.quote-action-row .text-muted a {
  color: var(--primary); 
  text-decoration: underline;
}

.tech-specs-list a {
  color: var(--primary); 
}

.ex-basic-1 a:not(.btn),
.bg-custom-light-grey a:not(.btn) {
  color: var(--primary);
}

.ex-basic-1 a.btn-download {
  color: #fff;
}

.ex-basic-1 a.webapp-badge {
  color: #fff;
}

/* ===============================================================
   Navigation (Navbar)
   =============================================================== */

/* Basic styles for the navbar, apply to both mobile & desktop */
.navbar {
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 0.875rem;
  background-color: var(--primary);
  transition: all 0.2s ease; /* Transition for all changes */
}

nav#navbar {
  padding-top: 10px;
  padding-bottom: 10px;
}

.navbar .logo-image img {
  margin-right: 16px;
  height: 32px;
}

.navbar .logo-text {
  color: #fff;
  font-weight: 500;
  line-height: 1; 
  font-size: 1.575rem;
  text-decoration: none;
}

/* Styles for the navigation links */
.navbar .nav-item .nav-link {
  color: #eee;
  text-decoration: none;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  transition: all 0.2s ease;
}

.navbar .nav-item .nav-link:hover {
  color: var(--gradient-red);
}

/* Style for the active navigation link */
.navbar .nav-item .nav-link.nav-link-active {
  color: var(--gradient-red);
  font-weight: bold;
}

.navbar-collapse.offcanvas-collapse:not(.collapsed) {
       padding-top: 0; 
   }
   

.navbar .navbar-toggler {
  padding: 0;
  border: none;
  font-size: 1.25rem;
}

/* Language Switcher */
.language-switcher a,
.language-switcher .divider {
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  margin: 0 2px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.divider.px-1 {
  color: white;
}

/* Social Media Icons in the Navbar */
.navbar .fa-stack {
  width: 2em;
  font-size: 0.75rem;
  margin-right: 0.25rem;
}

.navbar .fa-stack-2x {
  /* NOTE: This gradient is currently not used as icons are white. */
  background: var(--secondary);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.2s ease;
}

/* Off-Canvas Menu for Mobile */
.offcanvas-collapse {
  position: fixed;
  top: 2.75rem;
  bottom: 0;
  left: 100%;
  width: 100%;
  overflow-y: auto;
  visibility: hidden;
  padding-right: 1rem;
  padding-left: 1rem;
  background-color: var(--primary);
  transition: transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

/* Style for when the off-canvas menu is open */
.offcanvas-collapse.open {
  visibility: visible;
  transform: translateX(-100%);
}

/* ===============================================================
   Buttons
   =============================================================== */

/* Specific Download Button */
.btn-download {
  background-color: #007bff; /* Bootstrap Blue */
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 30px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
}

.btn-download:hover {
  background-color: #0069d9;
  box-shadow: 0 6px 14px rgba(0, 123, 255, 0.45);
  transform: translateY(-2px);
}

/* Specific "Request Quote" Button */
.btn-quote {
  background-color: #28a745; /* Green */
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 30px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3);
}

.btn-quote:hover {
  background-color: #218838;
  box-shadow: 0 6px 14px rgba(40, 167, 69, 0.45);
  transform: translateY(-2px);
}

/* Secondary Outline Button */
.btn-outline {
  background-color: #fff;                         
  color: var(--primary);                          
  border: 1px solid #dee2e6;                      
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.07);      
  border-radius: 50px;
  padding: 10px 30px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-outline:hover {
  background-color: var(--primary);              
  color: #fff;                                    
  border-color: var(--primary);                   
  box-shadow: 0 4px 10px rgba(16, 81, 158, 0.2);  
  transform: translateY(-2px);
}

/* ===============================================================
   Page Components
   =============================================================== */

/* --- Information Tiles --- */
/* Styles the FontAwesome icons within the information tiles.
   A gradient is used as the text color to create a modern look. */
.information .fas {
  padding: 15px 0; 
  background: linear-gradient(to bottom, var(--gradient-red), var(--secondary)); 
  background-clip: text; 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
}

/* Color styles for the feature tiles (Monochromatic Blue Scheme) */
/* Ensures text on the darker tiles is readable by making it light. */
.info-gradient-1, .info-gradient-2, .info-gradient-3 {
    color: #f5f5f5; 
}
.info-gradient-1 h4, .info-gradient-2 h4, .info-gradient-3 h4 {
    color: #fff; 
}

/* The lightest tile needs dark text for readability. */
.info-gradient-4 {
    color: #222; 
}
.info-gradient-4 h4 {
    color: #000; 
}

/* Background colors for the four different tile types, from dark to light. */
.info-gradient-1 { background-color: var(--primary); }         
.info-gradient-2 { background-color: var(--primary-light); }  
.info-gradient-3 { background-color: var(--primary-lighter); } 
.info-gradient-4 { background-color: var(--primary-lightest); }

/* --- Technical Specs Tabs --- */
.tech-specs-tabs .nav-link {
  color: var(--primary-light);
  font-weight: 500;
  border: none;
  border-bottom: 3px solid transparent;
  padding-bottom: 0.75rem;
}

.tech-specs-tabs .nav-link:hover {
  border-bottom-color: var(--primary-lighter);
}

.tech-specs-tabs .nav-link.active {
  color: var(--primary);
  background-color: transparent;
  border-bottom: 3px solid var(--primary);
}

.tech-specs-list li {
  position: relative;
  padding-left: 1.5rem; 
}
.tech-specs-list li::before {
  content: '—'; /* This is the bullet point character */
  position: absolute;
  left: 0;
  top: 0;
  color: var(--primary); 
  font-size: 0.9rem; 
}

/* --- Pricing Table --- */
/* Style for the small, grayed-out text in the pricing table. */
.pricing .text-muted {
  font-size: 0.85rem; 
  line-height: 1.4; 
  color: #666 !important; 
}

/* Styles the container row for quote actions (e.g., input fields and button). */
.quote-action-row {
  background: #fff; 
  border-radius: 16px; 
  box-shadow: 0 4px 24px rgba(30, 144, 255, 0.08); 
  margin-bottom: 2rem; 
}

/* --- Quantity Selector (+/-) --- */
/* Flex container for the quantity selector buttons and input field. */
.quantity-selector {
  display: flex;
  align-items: center; 
  justify-content: center; 
}

/* Styles for the plus (+) and minus (-) buttons. */
.qty-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #ccc; 
  border-radius: 50%; 
  background-color: #f8f9fa; 
  color: #333; 
  font-size: 18px;
  font-weight: 500;
  cursor: pointer; 
  transition: all 0.2s ease-in-out; 
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Style for the buttons on hover. */
.qty-btn:hover {
  background-color: #e9ecef; 
}

/* Styles for the quantity number input field. */
.qty-input {
  width: 70px;
  height: 36px;
  text-align: center; 
  border: 1px solid #ccc; 
  border-radius: 6px; 
  background: #fff; 
  font-size: 16px;
  font-weight: 500;
  color: #333; 
  transition: border-color 0.2s ease, box-shadow 0.2s ease; 
}
/* Style for the input field on focus. */
.qty-input:focus {
  border-color: #007bff; 
  box-shadow: 0 0 3px rgba(0, 123, 255, 0.4); 
  outline: none;
}

/* Input Field Style */
.address-input, .form-select.address-input {
  border-radius: 8px;
  border: 1px solid #dbeafe;
  font-size: 1rem;
  padding: 10px 14px;
  background: #e9ecef;
  box-shadow: 0 1px 4px rgba(30, 144, 255, 0.04);
  transition: border-color 0.2s;
}

.address-input:focus {
  border-color: var(--primary);
  background: #fff;
  outline: none;
}

.form-label {
  font-weight: 500;
  color: #334155;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

/* --- SDK Code Copy Block (Light Theme) --- */
.code-copy-block-light {
  background-color: #f0f2f5;      
  border: 1px solid #dee2e6;       
  color: #212529;                  
  border-radius: 8px;              
  padding: 0.25rem 0.25rem;
}

/* Style for the terminal icon */
.code-copy-block-light .fa-terminal {
  color: #6c757d;                  
}

/* Style for the copy button */
.code-copy-block-light .copy-button {
  background-color: transparent;
  border: none;
  color: #6c757d;                  
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Hover effect for the copy button */
.code-copy-block-light .copy-button:hover {
  background-color: rgba(0, 0, 0, 0.05); 
  color: #000;
}

/* Success state after the text has been copied */
.code-copy-block-light .copy-button.btn-success {
  background-color: #d1e7dd;      
  color: #0f5132;                
}

/* --- App Page --- */
/* Styles for the main title on the app page header. */
.app-header .header-title {
  font-size: 4.5rem; 
  line-height: 1.2;
  overflow-wrap: anywhere; 
  word-break: break-word; 
}
/* Styles for the subtitle on the app page header. */
.app-header .header-subtitle {
  font-size: 1.5rem; 
  color: #e0e0e0; 
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* General card style for the app page. */
.app-card {
  border-radius: 16px; 
  box-shadow: 0 2px 12px rgba(30, 144, 255, 0.07); 
  background: #fff; 
  min-height: 320px; 
  display: flex;
  flex-direction: column; 
  align-items: center;
  justify-content: center;
}
/* Style for the "Open Webapp" badge/button. */
.webapp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 0 20px;
  background-color: #222; 
  color: #fff; 
  font-weight: 500;
  font-size: 16px;
  border-radius: 12px; 
  text-decoration: none; 
  transition: all 0.3s ease; 
}
/* Hover effect for the badge. */
.webapp-badge:hover {
  background-color: #000; 
  color: #fff;
  transform: translateY(-2px); 
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 
}

/* --- Extra Pages (Legal, Privacy) --- */
/* Header style for secondary pages like legal notices or privacy policy. */
.ex-header {
  padding-top: 8.5rem;
  padding-bottom: 4rem;
  background-color: var(--primary); 
}

/* Heading style within the extra header. */
.ex-header h1 {
  color: #fff; 
}

/* --- Footer --- */
/* General footer styling. */
.footer {
    padding: 1rem 0; 
}

/* Default link styles in the footer sections. */
section.footer a,
div.bottom a {
  color: #fff; 
  transition: color 0.2s ease-in-out; 
}

/* Hover styles for links in the footer. */
.footer a:hover,
.bottom a:hover {
  color: var(--secondary); 
}

.location a:hover {
  color: var(--secondary); 
}

.home {
  position: relative;
  background-image: url('/assets/images/background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100vh;
  display: flex;
  align-items: flex-start;
  padding-top: 15vh;
}


/* Dark overlay */
.home::before {
  content: ''; 
  position: absolute; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.0); 
  z-index: 1; 
}
.home .container {
  position: relative; 
  z-index: 2;
}

/* Headline (Capture2Go) */
.home h1.headline {
  font-size: 3.2rem; 
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 0.5rem;
  color: var(--primary); 
}

/* Sensor recording made simple */
.home h2.headline {
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--secondary); 
}

.home .lead {
  color: var(--primary); 
  max-width: 550px; 
}

/* ===============================================================
   Scaling Spec images
   =============================================================== */

#imu-tab-pane img {
  max-width: 70%;
  height: auto;
  display: block;
  margin: 0 auto;
  padding: 16%;
}

#station-tab-pane img {
  max-width: 70%;
  height: auto;
  display: block;
  margin: 0 auto;
  padding: 10%;
}

#accessories-tab-pane img {
  max-width: 70%;
  height: auto;
  display: block;
  margin: 0 auto;
  padding: 2%;
  padding-top: 18%;
  padding-bottom: 18%;
}

/* ===============================================================
   Media Queries (Responsive Design)
   =============================================================== */

/* --- Mobile Navbar Line --- */
@media (max-width: 991.98px) {
  .navbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background-color: var(--secondary);
  }
  
  .offcanvas-collapse {
    top: 51px; 
  }

  .offcanvas-collapse.open .navbar-nav {
    padding-top: 1rem;
  }

  .nav-item {
    display: block;
    padding: 0.5rem 0;
  }

  /* 4. Behandelt den Sprach-Switcher wie einen normalen Menüpunkt */
  .navbar-nav .nav-item.d-flex {
    display: block;
    padding-left: 0; /* Entfernt das extra Padding vom Desktop */
  }
}


/* --- Desktop Styles --- */
@media (min-width: 992px) {
  /* Desktop navbar is slim and has a solid background */
  .navbar {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    border-bottom: 3px solid var(--secondary);
  }

  /* Converts the mobile off-canvas menu into a standard horizontal navbar */
  .navbar-expand-lg .offcanvas-collapse {
    position: static !important;
    width: auto !important;
    transform: none !important;
    visibility: visible !important;
    background-color: transparent !important;
  }
  
  /* Hides the mobile-only horizontal line from the desktop view */
  .offcanvas-collapse::before {
    display: none;
  }
}

/* --- Tablet Breakpoint & Down --- */
@media (max-width: 768px) {
  /* Shrinks the header section on the app page for better mobile viewing */
  .app-header {
    padding-top: 4rem;
    padding-bottom: 3rem;
  }

  /* Resizes the logo in the app header */
  .app-header .header-logo {
    height: 100px;
  }

  /* Adjusts font sizes in the app header */
  .app-header .header-title {
    font-size: 2.2rem;
  }
  .app-header .header-subtitle {
    font-size: 1.1rem;
  }
}

/* --- Small Mobile Breakpoint --- */
@media (max-width: 540px) {
  /* Reduces the global h1 font size on very small screens */
  h1 {
    font-size: 30px;
  }
}

/* --- Specific Component Adjustments --- */

/* App Download Cards: 2 per row on medium tablets */
@media (max-width: 1000px) {
  .app-download .col-md-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* App Download Cards: 1 per row on small tablets/large phones */
@media (max-width: 600px) {
  .app-download .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Further reduces app header title on extra-small screens */
@media (max-width: 576px) {
  .app-header .header-title {
    font-size: 1.9rem;
  }
}

/*
================================================
  FINAL RESPONSIVE FIX FOR TECH SPECS SECTION
================================================
*/

/* --- Medium & Small Screens (Tablet/Mobile) --- */
@media (max-width: 991.98px) {
  #products .col-lg-6:first-child {
    margin-bottom: 2rem;
  }
}