/*
Theme Name: The7 Child – First Frame
Theme URI: Custom child theme for First Frame website
Template: dt-the7
Author: Vaida An
Description: Custom child theme built on The7 framework for the First Frame website. Optimized for Elementor, dark minimal creative design, and smooth portfolio presentation.
Tags: elementor, portfolio, creative, minimal, responsive, dark, first frame, modern, seo friendly
Version: 1,0.1760549657
Updated: 2025-10-15 17:34:17

*/
/* FF — Side header menu accent (works on The7 side header) */
.masthead .main-nav > li > a,
.masthead .navigation > .menu > li > a,
.masthead .menu > li > a {
  position: relative;
  display: block;
  padding-left: 18px; /* vieta kairės juostai */
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}

/* Kairinė animuota juosta – GELTONA */
.masthead .main-nav > li > a::before,
.masthead .navigation > .menu > li > a::before,
.masthead .menu > li > a::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 2px;
  background: #f0ff06; /* geltona */
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .25s ease;
}


/* Hover ir aktyvus */
.masthead .main-nav > li > a:hover::before,
.masthead .navigation > .menu > li > a:hover::before,
.masthead .menu > li.current-menu-item > a::before,
.masthead .menu > li.current-menu-ancestor > a::before {
  transform: scaleY(1);
}

.masthead .main-nav > li > a:hover,
.masthead .navigation > .menu > li > a:hover,
.masthead .menu > li.current-menu-item > a,
.masthead .menu > li.current-menu-ancestor > a {
  color: rgb(233,45,116) !important;
}
/* === The7 + WP + Elementor mygtukai: juodas -> geltonas (hover) === */
.dt-btn,
.shortcode-button .dt-btn,
.button,
a.button,
input[type="submit"],
.wp-block-button__link,
.elementor .elementor-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: #000000 !important;         /* juodas fonas */
  background-image: none !important;       /* nuimti gradientus */
  color: #ffffff !important;               /* baltas tekstas */
  border: 2px solid #f0ff06 !important;    /* geltonas rėmelis */
  box-shadow: none !important;             /* be šešėlių */
  transition: all .25s ease;
}

/* Hover būsena */
.dt-btn:hover,
.shortcode-button .dt-btn:hover,
.button:hover,
a.button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.elementor .elementor-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: #f0ff06 !important;          /* geltonas fonas */
  color: #000000 !important;               /* juodas tekstas */
  border-color: #f0ff06 !important;        /* geltonas rėmelis */
  background-image: none !important;
}
/* --- THE7 social icons: normal -> yellow hover (#f0ff06) --- */

/* Nuimti The7 gradientus ir numatytą foną */
.dt-social-icons .soc-ico a,
.soc-icons .soc-ico a,
.soc-icons a,
.dt-icon-bg-on .soc-ico a {
  background: transparent !important;
  background-image: none !important;
  border: 2px solid transparent !important;
  box-shadow: none !important;
  transition: all .25s ease;
}

/* Ikonos spalva (normal) – balta */
.dt-social-icons .soc-ico a i,
.soc-icons .soc-ico a i,
.soc-icons a i,
.dt-social-icons .soc-ico a svg,
.soc-icons .soc-ico a svg,
.soc-icons a svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Hover – geltonas fonas, juoda ikona */
.dt-social-icons .soc-ico a:hover,
.soc-icons .soc-ico a:hover,
.soc-icons a:hover {
  background-color: #f0ff06 !important;
  border-color: #f0ff06 !important;
}

.dt-social-icons .soc-ico a:hover i,
.soc-icons .soc-ico a:hover i,
.soc-icons a:hover i,
.dt-social-icons .soc-ico a:hover svg,
.soc-icons .soc-ico a:hover svg,
.soc-icons a:hover svg {
  color: #000000 !important;
  fill:  #000000 !important;
}

/* Saugikliai pseudo-elementams (jei The7 naudoja) */
.dt-social-icons .soc-ico a:before,
.dt-social-icons .soc-ico a:after,
.soc-icons .soc-ico a:before,
.soc-icons .soc-ico a:after {
  background: none !important;
  background-image: none !important;
}
/* First Frame – „Žiūrėti daugiau“ mygtukas */
.ff-loadmore .dt-btn,
.ff-loadmore .load-more-button,
.ff-loadmore .ajax-load-more a {
  display: inline-block;
  padding: 10px 26px;
  background-color: transparent;
  border: 1px solid rgb(233, 45, 116);   /* tavo akcentinė spalva */
  color: #ffffff;
  font-weight: 500;
  letter-spacing: 0.5px;
  border-radius: 3px;
  text-decoration: none;
  text-transform: none;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Hover efektas – geltonas fonas, juodas tekstas */
.ff-loadmore .dt-btn:hover,
.ff-loadmore .load-more-button:hover,
.ff-loadmore .ajax-load-more a:hover {
  color: #000000;
  border-color: rgb(233, 45, 116);
}

.ff-loadmore .dt-btn::before,
.ff-loadmore .load-more-button::before,
.ff-loadmore .ajax-load-more a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background-color: rgb(233, 45, 116);
  z-index: -1;
  transition: width 0.3s ease;
}

/* Hover – fonas sklandžiai užsipildo iš kairės į dešinę */
.ff-loadmore .dt-btn:hover::before,
.ff-loadmore .load-more-button:hover::before,
.ff-loadmore .ajax-load-more a:hover::before {
  width: 100%;
}

/* 1) Paslepiam The7 įprastą pliusą/X/SVG */
.side-header .menu > li.menu-item-has-children > .next-level-button,
.side-header .menu > li.menu-item-has-children > .next-level-button svg,
.side-header .menu > li.menu-item-has-children > a .submenu-toggle,
.side-header .menu > li.menu-item-has-children > a .menu-toggle-icon {
  display: none !important;
}

/* 2) Mūsų kukli, plona rodyklė ▾ kaip pavyzdyje */
.side-header .menu > li.menu-item-has-children > a{
  display: inline-flex; align-items: center;
}
.side-header .menu > li.menu-item-has-children > a::after{
  content: "▾";                /* maža žemyn rodyklė (chevron) */
  font-size: 12px;             /* dydis – kaip pavyzdyje; didink jei reikia */
  line-height: 1;
  margin-left: 6px;            /* atstumas nuo žodžio; mažink iki 4px jei nori dar arčiau */
  color: currentColor;         /* tokia pati spalva kaip meniu teksto */
  opacity: .9;                 /* lengvai „plonesnė“ */
  transition: color .2s ease, opacity .2s ease;
}

/* 3) Užvedus ant tėvinio punkto – geltona */
.side-header .menu > li.menu-item-has-children:hover > a::after{
  color: #f0ff06 !important;
  opacity: 1;
}

/* (nebūtina) aktyvi būsena – jei nori, kad geltona liktų aktyviam puslapiui */
.side-header .menu > li.current-menu-ancestor > a::after,
.side-header .menu > li.current-menu-item.menu-item-has-children > a::after{
  color: #f0ff06;
}