/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* Homepage */
.language-container {
  --txt-orange: #ff8a00;
  --txt-orange-2: #ff9f2a;
  --txt-red: #e03e33;
  --txt-border: #f08a00;
  --text: #1f1f1f;
  --muted: #6b6b6b;
  --bg: #ffffff;


  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, auto);
  grid-template-areas:
    "header header header header"
    "main main main main"
    "main main main main"
    "footer footer footer footer";
  gap: 20px;
}

.header { 
	grid-area: header; 
	background: var(--bg); 
	padding: 20px; 
}

.main { 
	grid-area: main; 
	background: var(--bg);
	padding: 20px; 
}

.footer { 
	grid-area: footer; 
	background: var(--bg); 
	padding: 20px; 
}

/* ===========================================
   FLOATING SCREEN-EDGE BUTTONS (unsichtbar)
=========================================== */

.floating-buttons a {
  position: fixed;
  top: 20px;
  padding: 10px 16px;
  background: var(--txt-orange);
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  pointer-events: auto;
  transition: opacity 0.25s ease, background 0.25s ease;
  z-index: 999999;
}

/* Logout stays hidden */
.floating-buttons .logout-button {
  opacity: 0;
}

/* Only visible on hover */
.floating-buttons .logout-button:hover {
  opacity: 1;
}

/* Right button */
.logout-button {
  right: 20px;
}


/*Oval List styling */
/*Working with CSS without webkit options -
Hover-EFFECT:
  Default: solid fill only
  Hover state: two background layers
    - Inner solid fill clipped to "padding-box"
    - Gradient clipped to "border-box" and revealed by a transparent border 
*/

.languageList {
  list-style-type: none;
  width: 100%;
  padding: 0;           /* keep list clean */
  margin: 0;
}


/*
  There are 4 states for the language buttons:
  - Default (background white, thin black border and normal text visual)
  - Active, when clicked (red background, solid black border and white, bold text)
  - Hovering & not active (gradient border with the transition and transparent background, bold, black text)
  - navigation button (independent language, gradient background and border - visual change when hovering)
*/
.languageList .lang-item,
.languageList .lang-navigate {
  display: block;
  text-align: center;
  padding: 15px 30px;
  margin-bottom: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: bold;
  border-radius: 10px;

  /* Create space for the gradient border when needed */
  border: 0.5px solid black;     /* = border thickness */
  cursor: pointer;
  /* Base background (no gradient ring visible initially) */
  background: var(--bg);

  position: relative;
  z-index: 1;
  /* Smooth hover , transitions on the base element of the transition*/
  transition: background 1s ease, color 1s ease, box-shadow 1s ease;
}

/* Hover effect: show gradient border using multiple backgrounds, ONLY when not active */
.languageList .lang-item:not(.active):hover {
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,                 /* inner fill */
    linear-gradient(90deg, var(--txt-orange-2), var(--txt-orange)) border-box;     /* gradient border */
  border-width: 3px;
  /* keep the border transparent so the gradient is visible */
  border-color: transparent;
}

/* active/focus styles for accessibility/feedback */
.languageList .lang-item.active {
  background: linear-gradient(90deg, #ff3b30, #e60000); /* strong red */
  color: #fff;
  border-color: 2px solid black;
  font-weight: 900;
}

/* Ignoring hover state, when active */
.languageList .lang-item:active:hover,
.languageList .lang-item.active:hover {
  background: linear-gradient(90deg, #ff3b30, #e60000); /* strong red */
  color: #fff;
  border-color: 2px solid black;
  font-weight: 700;
} 

/* The navigate list item (initially hidden) */
.languageList .lang-navigate {
  color: #fff;
  background-image: linear-gradient(90deg, var(--txt-orange-2), var(--txt-red));
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  visibility: hidden;         /* hidden until language chosen */
  transition: filter 0.2s ease, transform 0.1 ease;
}

.languageList .lang-navigate:hover { filter: brightness(1.05); }
.languageList .lang-navigate:active { transform: translateY(1px); }

/* When JS activates it */
.languageList .lang-navigate.active-navigation {
  visibility: visible;
}


/* Homepage End -------------- */