/*
 Theme Name:   The Universe Child
 Theme URI:    https://themeforest.net/user/nordstudio/portfolio
 Description:  Child theme for The Universe
 Author:       Nord Studio
 Author URI:   http://themeforest.net/user/nordstudio
 Template:     the-universe
 Version:      1.0
 License:      
 License URI:  http://themeforest.net/licenses
 Tags: one-column, right-sidebar, flexible-header, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, sticky-post, theme-options, threaded-comments, translation-ready
 Text Domain:  the-universe-child
*/

@import url("../the-universe/style.css");

/* =========================================================
   AURORA BOREALIS NAV (Universe theme)
   Targets: .primary-navigation + .sticky-menu
   Colours:
   Text: #22c1c3
   Bg tones: #071a2a + #0b2a3d
   ========================================================= */

/* ---------- 1) Layout + spacing (fix wrap + tighten gaps) ---------- */
.primary-navigation .nav-menu {
  display: flex;
  flex-wrap: nowrap;              /* stops BLOG dropping to a new line */
  align-items: center;
  justify-content: center;        /* keeps the whole menu visually centred */
  gap: 12px;                      /* global spacing between items */
}

/* Remove theme margins that often create the “too wide” look */
.primary-navigation .nav-menu > li {
  margin: 0;
  padding: 0;
}

/* Link padding controls total width and hover-pill size */
.primary-navigation .nav-menu > li > a {
  padding: 9px 12px;              /* tighter than before, still roomy */
  border-radius: 12px;
  line-height: 1.1;
  white-space: nowrap;            /* keep labels on one line */
}

/* ---------- 2) Base menu text colour (always) ---------- */
.primary-navigation,
.primary-navigation a,
.primary-navigation .nav-menu > li > a,
.primary-navigation .nav-menu .sub-menu a {
  color: #22c1c3;
}

/* Subtle readability glow */
.primary-navigation .nav-menu > li > a {
  text-shadow: 0 0 10px rgba(34, 193, 195, 0.18);
}

/* Smooth transitions */
.primary-navigation,
.primary-navigation a,
.sticky-menu,
.sticky-menu .primary-navigation,
.primary-navigation .nav-menu .sub-menu {
  transition: background-color 220ms ease, color 220ms ease, box-shadow 220ms ease, backdrop-filter 220ms ease, transform 220ms ease, opacity 220ms ease;
}

/* ---------- 3) Top of page: transparent ---------- */
.primary-navigation {
  background: transparent;
}

/* ---------- 4) Scrolled: sticky-menu “kicks in” ---------- */
.sticky-menu {
  background: linear-gradient(135deg, #071a2a 0%, #0b2a3d 55%, #071a2a 100%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: fixed; /* matches theme behaviour */
}

/* Prevent inner nav from repainting another background */
.sticky-menu .primary-navigation {
  background: transparent;
}

/* ---------- 5) Hover + current item highlight (aurora glow) ---------- */
.primary-navigation .nav-menu > li > a:hover,
.primary-navigation .nav-menu > li:hover > a,
.primary-navigation .nav-menu > li.current-menu-item > a,
.primary-navigation .nav-menu > li.current_page_item > a {
  color: #22c1c3;
  background: rgba(34, 193, 195, 0.12);
  box-shadow:
    inset 0 -2px 0 rgba(34, 193, 195, 0.60),
    0 0 16px rgba(34, 193, 195, 0.22);
}

/* Optional: tiny lift for hover (feels crisp, not flashy) */
.primary-navigation .nav-menu > li > a:hover {
  transform: translateY(-1px);
}

/* ---------- 6) Submenu background + text ---------- */
.primary-navigation .nav-menu .sub-menu {
  background-color: #0b2a3d;
  border: 1px solid rgba(34, 193, 195, 0.18);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
}

/* submenu item padding and hover */
.primary-navigation .nav-menu .sub-menu a {
  padding: 10px 14px;
  border-radius: 10px;
}

.primary-navigation .nav-menu .sub-menu a:hover,
.primary-navigation .nav-menu .sub-menu li:hover > a {
  background: rgba(34, 193, 195, 0.12);
}

/* ---------- 7) Dropdown arrow beside text (no under-wrap) ---------- */
.primary-navigation .menu-item-has-children > a {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  width: auto;                    /* do NOT force full width, reduces spacing issues */
}

/* If the theme already inserts an icon element, colour it */
.primary-navigation .menu-item-has-children > a svg,
.primary-navigation .menu-item-has-children > a i {
  fill: #22c1c3;
  stroke: #22c1c3;
  color: #22c1c3;
}

/* Pseudo-element arrow (works if theme does not already provide one) */
.primary-navigation .menu-item-has-children > a::after {
  content: "▾";
  display: inline-block;
  width: 1em;
  text-align: center;
  color: #22c1c3;
  opacity: 0.95;
  transform: translateY(0) rotate(0deg);
  transition: transform 200ms ease, opacity 200ms ease;
}

/* Hover: rotate arrow */
.primary-navigation .menu-item-has-children:hover > a::after {
  transform: rotate(180deg);
  opacity: 1;
}

/* When submenu is open (keyboard users), show an X */
.primary-navigation .menu-item-has-children:focus-within > a::after {
  content: "✕";
  transform: none;
  opacity: 1;
}

/* If theme uses a real toggle button, colour it */
.primary-navigation .dropdown-toggle,
.primary-navigation .sub-menu-toggle,
.primary-navigation button[aria-expanded] {
  color: #22c1c3;
}

.primary-navigation .dropdown-toggle svg,
.primary-navigation .sub-menu-toggle svg,
.primary-navigation button[aria-expanded] svg {
  fill: #22c1c3;
  stroke: #22c1c3;
}

/* ---------- 8) Aurora shimmer overlay (subtle) ---------- */
.sticky-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(34, 193, 195, 0.00) 0%,
    rgba(34, 193, 195, 0.10) 35%,
    rgba(34, 193, 195, 0.00) 70%
  );
  opacity: 0.45;
  transform: translateX(-35%);
  animation: auroraSweep 6.5s ease-in-out infinite;
}

@keyframes auroraSweep {
  0%   { transform: translateX(-35%); }
  50%  { transform: translateX(35%); }
  100% { transform: translateX(-35%); }
}

/* =========================================================
   Footer text + credit line (Universe theme)
   NOTE: Do NOT use @import in Additional CSS.
   Put @import only in a child theme style.css if needed.
   ========================================================= */

/* Footer base text */
.site-footer p {
  font-size: 11pt;
  line-height: 1.55;
  color: #eaf4ff;
  margin-bottom: 0.6em;
}

/* Sophia name */
.site-footer p strong {
  color: #22c1c3;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* Credit line (span or element with class footer-credit inside the paragraph) */
.site-footer p .footer-credit {
  font-size: 7pt;
  color: #c98aa5;
  letter-spacing: 0.2px;
  white-space: nowrap; /* prevents awkward wrapping */
}

/* Ghostwriter link: force all states, including visited */
.site-footer p .footer-credit a,
.site-footer p .footer-credit a:link,
.site-footer p .footer-credit a:visited {
  color: #c98aa5 !important;
  font-size: 7pt;
  text-decoration: none;
  opacity: 1;
  transition: color 180ms ease, opacity 180ms ease;
}

/* Hover/focus */
.site-footer p .footer-credit a:hover,
.site-footer p .footer-credit a:focus {
  color: #eaf4ff !important;
}

/* =========================================================
   AURORA FOOTER BACKGROUND (kills grey, adds aurora)
   ========================================================= */

/* Hit the footer and common inner wrappers used by themes */
.site-footer,
.site-footer .footer-inner,
.site-footer .footer-widgets,
.site-footer .site-info,
.site-footer .footer-bottom,
.site-footer .container {
  background: transparent;
}

/* The actual footer base */
.site-footer {
  position: relative;
  overflow: hidden;

  background: linear-gradient(180deg, #050e18 0%, #071a2a 55%, #040c16 100%) !important;
  border-top: 1px solid rgba(34, 193, 195, 0.14);
  box-shadow: 0 -18px 40px rgba(34, 193, 195, 0.06);
}

/* Aurora layers */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(1100px 420px at 20% 30%,
      rgba(34, 193, 195, 0.18),
      rgba(34, 193, 195, 0.00) 60%),
    radial-gradient(900px 380px at 75% 45%,
      rgba(34, 193, 195, 0.12),
      rgba(34, 193, 195, 0.00) 70%),
    radial-gradient(850px 360px at 55% 80%,
      rgba(120, 90, 255, 0.10),
      rgba(120, 90, 255, 0.00) 65%),
    linear-gradient(115deg,
      rgba(34, 193, 195, 0.00) 0%,
      rgba(34, 193, 195, 0.10) 28%,
      rgba(34, 193, 195, 0.00) 55%,
      rgba(120, 90, 255, 0.06) 72%,
      rgba(120, 90, 255, 0.00) 100%
    );
  opacity: 0.9;
}

/* Dark mist so it stays “night”, not “glow blob” */
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(3, 8, 14, 0.35);
}

/* Ensure all footer content sits above aurora layers */
.site-footer * {
  position: relative;
  z-index: 1;
}

/* =========================================================
   FIX: Footer widget area staying grey
   Universe theme footer structure seen:
   footer#colophon.site-footer
     div#secondary.secondary  (widget areas)
     (copyright strip elsewhere)
   ========================================================= */

/* 1) Put the aurora base on the actual footer wrapper */
footer#colophon.site-footer {
  position: relative;
  overflow: hidden;

  background: linear-gradient(180deg, #050e18 0%, #071a2a 55%, #040c16 100%) !important;
  border-top: 1px solid rgba(34, 193, 195, 0.14);
  box-shadow: 0 -18px 40px rgba(34, 193, 195, 0.06);
}

/* Aurora layers across the entire footer (widgets + copyright) */
footer#colophon.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(1100px 420px at 20% 30%,
      rgba(34, 193, 195, 0.18),
      rgba(34, 193, 195, 0.00) 60%),
    radial-gradient(900px 380px at 75% 45%,
      rgba(34, 193, 195, 0.12),
      rgba(34, 193, 195, 0.00) 70%),
    radial-gradient(850px 360px at 55% 80%,
      rgba(120, 90, 255, 0.10),
      rgba(120, 90, 255, 0.00) 65%),
    linear-gradient(115deg,
      rgba(34, 193, 195, 0.00) 0%,
      rgba(34, 193, 195, 0.10) 28%,
      rgba(34, 193, 195, 0.00) 55%,
      rgba(120, 90, 255, 0.06) 72%,
      rgba(120, 90, 255, 0.00) 100%
    );
  opacity: 0.9;
}

/* Dark mist so it reads as night */
footer#colophon.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(3, 8, 14, 0.35);
}

/* 2) Kill the grey background on the widget container itself */
footer#colophon.site-footer #secondary.secondary,
footer#colophon.site-footer .widget-areas,
footer#colophon.site-footer .widget-area,
footer#colophon.site-footer .widget-area > *,
footer#colophon.site-footer .container,
footer#colophon.site-footer .wrap {
  background: transparent !important;
}

/* 3) Ensure all actual footer content stays above aurora layers */
footer#colophon.site-footer #secondary.secondary,
footer#colophon.site-footer #secondary.secondary *,
footer#colophon.site-footer .site-info,
footer#colophon.site-footer .site-info * {
  position: relative;
  z-index: 2;
}

/* Optional: give the widget area a tiny internal separator so it feels intentional */
footer#colophon.site-footer #secondary.secondary {
  padding-top: 34px;
  padding-bottom: 28px;
}

/* =========================================================
   FORCE link-to-button styling (Elementor + Tabs safe)
   ========================================================= */

/* Base button */
.primary-navigation a.soft-button,
.elementor a.soft-button,
.elementor-widget a.soft-button,
.elementor-widget-text-editor a.soft-button,
.elementor-tab-content a.soft-button,
.elementor-tabs-content-wrapper a.soft-button,
.site a.soft-button {
  display: inline-block !important;

  padding: 8px 18px !important;
  margin-top: 10px;

  background-color: #0b2a3d !important;
  color: #ffffff !important;

  font-size: 0.9em;
  font-weight: 500;
  text-decoration: none !important;

  border: 1px solid rgba(34, 193, 195, 0.45) !important;
  border-radius: 20px !important;

  box-shadow: none;

  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease,
    color 200ms ease;
}

/* Kill underline aggressively */
.elementor a.soft-button::after,
.elementor a.soft-button::before {
  display: none !important;
}

/* Hover / focus */
.primary-navigation a.soft-button:hover,
.elementor a.soft-button:hover,
.elementor-widget-text-editor a.soft-button:hover,
.elementor-tab-content a.soft-button:hover,
.site a.soft-button:hover {
  background-color: rgba(31, 80, 110, 0.75) !important;
  border-color: rgba(34, 193, 195, 0.75) !important;
  color: #ffffff !important;

  box-shadow: 0 0 14px rgba(34, 193, 195, 0.25);
}

/* Active (pressed) */
.elementor a.soft-button:active {
  transform: translateY(1px);
}

/* =========================================================
   ElementsKit Lite Tabs
   - Top-align tab layout
   - Remove forced vertical padding
   - Normalize font + icon alignment
   ========================================================= */

/* ---------------------------------------------------------
   1) Force vertical tabs layout to align at the top
   --------------------------------------------------------- */
.ekit-wid-con .elementskit-tab-wraper,
.ekit-wid-con .elementskit-tabs,
.ekit-wid-con .elementskit-tabs-nav,
.ekit-wid-con .elementskit-tab-content-wraper {
  align-items: flex-start;
}

/* ---------------------------------------------------------
   2) Remove ElementsKit's built-in vertical padding
   (this is what causes the content to sit too low)
   --------------------------------------------------------- */
.ekit-wid-con .elementskit-tab-wraper,
.ekit-wid-con .elementskit-tab-content-wraper,
.ekit-wid-con .elementskit-tab-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Kill the “first paragraph push-down” effect */
.ekit-wid-con .elementskit-tab-content > :first-child {
  margin-top: 0 !important;
}

/* ---------------------------------------------------------
   3) Tab title typography (match site body font)
   --------------------------------------------------------- */
.ekit-wid-con .elementskit-tab-title,
.ekit-wid-con .elementskit-tab-title a {
  font-family: Poppins, -apple-system, BlinkMacSystemFont,
               "Helvetica Neue", Helvetica, sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: 0.2px;
}

/* ---------------------------------------------------------
   4) Icon + text alignment inside tab labels
   --------------------------------------------------------- */
.ekit-wid-con .elementskit-tab-title {
  display: flex;
  align-items: center;
  gap: 10px;
}