/**
 * Theme Name:     Skintiva Child
 * Author:         Jegtheme
 * Template:       skintiva
 * Text Domain:	   skintiva-child
 * Description:    Skintiva is a modern dermatology and beauty clinic website theme, designed for skin specialists, aesthetic clinics, and skincare providers. Ideal for showcasing treatments, featuring results, promoting products, and introducing expert dermatologists. Skintiva blends clean visuals with clinical elegance to build trust and highlight transformation.
 * Theme URI:      https://fse.jegtheme.com/skintiva
 * Author URI:     https://support.jegtheme.com/
 * Version:        1.0.0
 * License:        GNU General Public License v3 or later.
 * License URI:    https://www.gnu.org/licenses/gpl-3.0.html
 * Tags:           grid-layout,block-patterns,full-site-editing,entertainment,news
 */

/* =========================================================
   iDerma — Header split navigation
   ========================================================= */

/* Make logo column hide on mobile, show hamburger instead */
@media (max-width: 767px) {
  .guten-iderma-center {
    display: none !important;
  }
}

/* Logo placeholder — shows border until real logo is uploaded */
.iderma-logo-placeholder[src=""] {
  display: block;
  width: 140px;
  height: 48px;
  background: var(--wp--preset--color--theme-6);
  border: 2px dashed var(--wp--preset--color--theme-9);
  border-radius: 4px;
}

/* =========================================================
   iDerma — CTA "Agendar consulta" button
   The last item in the right nav gets button styling.
   Apply class .iderma-cta to the menu item in WP Admin.
   ========================================================= */
.guten-nav-right .guten-nav-menu > ul > li.iderma-cta > a,
.guten-nav-right .guten-nav-menu > ul > li:last-child > a {
  background-color: var(--wp--preset--color--theme-3);
  color: var(--wp--preset--color--theme-4) !important;
  border-radius: 6px;
  padding: 10px 20px !important;
  transition: background-color 0.2s ease, opacity 0.2s ease;
  border-bottom: none !important;
  white-space: nowrap;
}

.guten-nav-right .guten-nav-menu > ul > li.iderma-cta > a:hover,
.guten-nav-right .guten-nav-menu > ul > li:last-child > a:hover {
  background-color: var(--wp--preset--color--theme-0);
  opacity: 1;
}

/* =========================================================
   iDerma — Mega menu Tratamientos (columnas)
   ========================================================= */
.guten-nav-left .guten-nav-menu .sub-menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 24px;
  min-width: 580px;
  padding: 24px !important;
}

.guten-nav-left .guten-nav-menu .sub-menu li {
  display: block;
}

/* Category titles inside mega menu */
.guten-nav-left .guten-nav-menu .sub-menu > li > a {
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px !important;
  color: var(--wp--preset--color--theme-3) !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid var(--wp--preset--color--theme-9) !important;
  margin-bottom: 8px;
  display: block;
}

.guten-nav-left .guten-nav-menu .sub-menu > li > ul {
  position: static !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  min-width: unset;
}

.guten-nav-left .guten-nav-menu .sub-menu > li > ul > li > a {
  font-size: 14px !important;
  padding: 5px 0 !important;
  font-weight: 400 !important;
}

/* =========================================================
   iDerma — Hero video background
   ========================================================= */

.iderma-hero-section {
  position: relative;
  overflow: hidden;
  min-height: 90vh;
  display: flex;
  align-items: center;
}

.iderma-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.iderma-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.45);
  z-index: 1;
}

.iderma-hero-content {
  position: relative;
  z-index: 2;
  color: var(--wp--preset--color--theme-4);
}

.iderma-hero-content h1,
.iderma-hero-content h2 {
  color: var(--wp--preset--color--theme-4);
}

/* =========================================================
   iDerma — General tweaks
   ========================================================= */

/* Sticky header shadow on scroll (JS adds .is-sticky) */
#iderma-header.is-sticky {
  box-shadow: 0 2px 16px rgba(44, 44, 44, 0.08);
}