/*
Theme Name: RetroGeek Child
Template: retrogeek
Description: Custom child theme for MD Labs with oldschool black-green design.
Version: 1.0
Author: MD Labs
*/

body {
    background-color: #000;
    color: #00ff00;
/*    font-family: "Courier New", monospace;*/
}
a {
    text-decoration: none !important;
       position: relative; /* Важно: для позиционирования псевдоэлемента */
    display: inline-block; /* Важно: чтобы применить ширину и избежать проблем с инлайн-блоками */
    /* Добавьте transition, если хотите плавное изменение цвета текста */
    transition: color 0.3s ease-out;
}
a::before {
    content: ''; /* Обязателен для псевдоэлементов */
    position: absolute; /* Позиционируем относительно ссылки */
    bottom: 0; /* Размещаем внизу ссылки */
    left: 0; /* Начинаем слева */
    width: 0; /* Изначально ширина 0, чтобы оно не было видно */
    height: 2px; /* Толщина подчеркивания */
    background-color: #00ff00; /* Цвет подчеркивания (можете изменить) */
    /* Добавляем плавный переход для свойства width */
    transition: width 0.3s ease-out; /* Время и тип анимации */
}
a::before {
    content: ''; /* Обязателен для псевдоэлементов */
    position: absolute; /* Позиционируем относительно ссылки */
    bottom: 0; /* Размещаем внизу ссылки */
    left: 0; /* Начинаем слева */
    width: 0; /* Изначально ширина 0, чтобы оно не было видно */
    height: 2px; /* Толщина подчеркивания */
    background-color: #00ff00; /* Цвет подчеркивания (можете изменить) */
    /* Добавляем плавный переход для свойства width */
    transition: width 0.3s ease-out; /* Время и тип анимации */
}

/* 3. Анимация при наведении на ссылку */
a:hover::before {
    width: 100%; /* При наведении ширина становится 100% */
}
a:hover {
    color: #00ffff; /* Например, меняем цвет текста ссылки при наведении */
}

/* some space */
.site-footer { margin-top: 5px; }
.entry-right { padding-bottom: 5px;}

.wide-field {
  width: 95% !important;
  box-sizing: border-box;
}

.wide-textarea {
  height: auto;
  width: 95% !important;
  min-height: 6em;
  resize: vertical; /* можно убрать, если не хочешь чтобы пользователь менял размер */
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
  width: 95% !important;
  max-width: 100%;
  box-sizing: border-box;
  background-color: #000;
  color: #009900;
  border: 1px solid #009900;
  font-family: "Courier New", Courier, monospace;
  padding: 0.5em;
}

/* Точное управление высотой textarea */
.wpcf7-form textarea {
  min-height: 6em !important;
  resize: vertical;
}

/* Кнопка */
.wpcf7-form input[type="submit"] {
  background-color: #000;
  color: #009900;
  border: 1px solid #009900;
  padding: 0.6em 1.2em;
  font-family: "Courier New", Courier, monospace;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.wpcf7-form input[type="submit"]:hover {
  background-color: #009900;
  color: #000;
}

/* Стили для контейнера круга */
.mouse-wave-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

/* Стили для самого круга */
.mouse-wave {
    position: absolute;
    border: 2px solid rgba(0, 255, 0, 0.7); /* Цвет и толщина волны */
    border-radius: 70%;
    transform: translate(-50%, -50%); /* Центрируем круг относительно курсора */
    opacity: 0; /* Изначально невидимый */
    /* Теперь анимация будет повторяться, но мы будем создавать новые элементы */
    animation: wave-animation 2s ease-out; /* Убрали 'forwards' */
}

/* Keyframes для анимации волны */
@keyframes wave-animation {
    0% {
        width: 0;
        height: 0;
        opacity: 0.7; /* Максимальная непрозрачность в начале */
    }
    100% {
        width: 400px; /* Максимальный размер круга */
        height: 400px;
        opacity: 0; /* Плавно исчезает */
    }
}