/* Niestandardowe style i definicje kolorów dla Buena Cloud */


/* Użycie zmiennych CSS dla ułatwienia zmiany kolorów (zgodnie z Google) */
:root {
   --color-google-blue: #4285F4;
   --color-google-green: #34A853;
   --color-google-yellow: #FBBC05;
   --color-google-red: #EA4335;
   --color-text-normal: #525252; /* Szary tekst dla linków */
}


/* Definicje klas kolorów używane w Tailwind (jako zamiennik dla domyślnych klas) */
.color-blue { color: var(--color-google-blue); }
.color-green { color: var(--color-google-green); }
.color-yellow { color: var(--color-google-yellow); }
.color-red { color: var(--color-google-red); }


/* Styl dla aktywnego linku w nawigacji */
.nav-active-red {
   /* Kolor, pogrubienie i pozycja dla podkreślenia */
   color: var(--color-google-red) !important;
   font-weight: 700 !important; /* Pogrubienie */
   position: relative;
   /* Usuwamy domyślne podkreślenie */
   text-decoration: none !important;
}


/* Dodajemy wizualne podkreślenie (linia pod tekstem) */
.nav-active-red::after {
   content: '';
   position: absolute;
   bottom: 5px; /* Pozycja linii poniżej tekstu */
   left: 50%;
   transform: translateX(-50%);
   width: 80%; /* Szerokość linii */
   height: 3px;
   background-color: var(--color-google-red);
   border-radius: 9999px;
}


/* Ustawienia widoczności dropdown menu (domyślnie ukryte) */
#products-menu {
   visibility: hidden;
   opacity: 0;
   transition: opacity 0.3s ease, visibility 0.3s ease;
   min-width: 150px; /* Minimalna szerokość menu */
}


/* Klasa 'visible' dodawana przez JavaScript, aby pokazać menu po hoverze */
#products-menu.visible {
   visibility: visible;
   opacity: 1;
}


/* Style dla przycisków CTA, aby miały jednolity cień */
.cta-button {
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
   transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}


.cta-button:hover {
   box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15), 0 4px 6px rgba(0, 0, 0, 0.1);
   transform: translateY(-2px);
}


/* Focus Ring Customization */
.focus-focus-ring {
   box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); /* Jasnoniebieski pierścień */
}
.focus-focus-ring:focus {
   outline: none;
   box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
}


/* Styl dla przycisku kontaktowego w nagłówku (żółty) */
.cta-header-button {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.cta-header-button:hover {
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


/* Responsywny kontener wideo dla osadzonych filmów YT */
.video-responsive {
   position: relative;
   padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
   height: 0;
   overflow: hidden;
   max-width: 100%;
   background: #000;
   border-radius: 0.75rem; /* rounded-xl */
}


.video-responsive iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}