/* ==========================================================
   TuS 05 Kostheim – Modern Football Club CSS (Salient)
   Place in: /wp-content/themes/salient-child/style.css
   ========================================================== */

/* ---------------------------
   0) TOKENS / BRAND
--------------------------- */
:root{
  --tus-primary:#050662;
  --tus-secondary:#2F2085;
  --tus-soft:#ABAAD7;
  --tus-bg:#FBFBFE;

  --tus-text:#0f172a;
  --tus-muted:#475569;

  --tus-radius:18px;
  --tus-radius-sm:14px;

  --tus-shadow:0 18px 46px rgba(5,6,98,.14);
  --tus-shadow-sm:0 12px 28px rgba(5,6,98,.10);

  --tus-container:1200px;
  --tus-pad:18px;

  --tus-border:1px solid rgba(171,170,215,.38);
}

/* Salient container variables (wirken oft global) */
:root{
  --container-width: var(--tus-container);
  --container-padding: var(--tus-pad);
  --nectar-resp-container-padding: var(--tus-pad);
}

/* ---------------------------
   1) BASE / TYPO / LINKS
--------------------------- */
html, body{
  background: var(--tus-bg) !important;
  color: var(--tus-text);
}

p, li{
  color: var(--tus-muted);
  line-height: 1.7;
}

a{ color: var(--tus-secondary); }
a:hover{ color: var(--tus-primary); }

h1,h2,h3,h4,h5,h6{
  color: var(--tus-text);
  letter-spacing:-0.01em;
}

/* smoother look */
*{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------------------------
   2) LAYOUT / SPACING
--------------------------- */
.container-wrap{
  padding-top: 26px;
  padding-bottom: 44px;
}

/* VC rows a bit airy */
.wpb_row, .vc_row{ margin-bottom: 18px; }

/* ---------------------------
   3) BUTTONS (modern)
--------------------------- */
.nectar-button,
button,
input[type="submit"],
a.wp-element-button,
a.button{
  border-radius: var(--tus-radius-sm) !important;
  padding: 12px 18px !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
  box-shadow: 0 10px 22px rgba(5,6,98,.14);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.nectar-button:hover,
button:hover,
input[type="submit"]:hover{
  transform: translateY(-2px);
  box-shadow: var(--tus-shadow-sm);
}

/* Salient primary */
.nectar-button,
input[type="submit"]{
  background: var(--tus-primary) !important;
  border-color: var(--tus-primary) !important;
}
.nectar-button:hover,
input[type="submit"]:hover{
  background: var(--tus-secondary) !important;
  border-color: var(--tus-secondary) !important;
}

/* Outline / See-through */
.nectar-button.see-through{
  background: transparent !important;
  border-color: rgba(255,255,255,.55) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* ---------------------------
   4) CARDS / BOX LOOK (news, posts, widgets)
--------------------------- */
article,
.blog-recent .inner-wrap,
.masonry-blog-item,
.post,
.nectar-fancy-box,
.widget,
.wpb_wrapper .wpb_content_element{
  border-radius: var(--tus-radius) !important;
}

/* apply card styling to common content blocks */
article,
.blog-recent .inner-wrap,
.masonry-blog-item,
.post,
.nectar-fancy-box,
.widget{
  background:#fff;
  border: var(--tus-border);
  box-shadow: var(--tus-shadow-sm) !important;
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
article:hover,
.blog-recent .inner-wrap:hover,
.masonry-blog-item:hover,
.post:hover,
.nectar-fancy-box:hover,
.widget:hover{
  transform: translateY(-3px);
  box-shadow: var(--tus-shadow) !important;
}

/* images in cards */
article img,
.post img,
.masonry-blog-item img{
  display:block;
  width:100%;
  height:auto;
}

/* ---------------------------
   5) HEADER / NAV (Football style)
   Mobile + Desktop, Salient + Max Mega Menu
--------------------------- */

/* Header bar club blue */
body #header-outer,
body #header-outer.transparent,
body #header-outer.detached,
body #header-outer.fixed,
body #header-outer.small-nav,
body #header-outer[data-transparent-header="true"]{
  background: var(--tus-primary) !important;
  box-shadow: 0 12px 28px rgba(5,6,98,.18) !important;
}

/* reduce excess height a bit */
body #header-outer #top{
  min-height: 74px !important;
}

/* centered layout container */
body #header-outer .container,
body #header-outer .container > .row,
body #header-outer .container > .row .col{
  max-width: var(--tus-container) !important;
  margin: 0 auto !important;
}

/* Links/icons visible */
body #header-outer a,
body #header-outer .mobile-menu-link,
body #header-outer .mobile-menu-link span,
body #header-outer #search-btn a{
  color:#fff !important;
  opacity:1 !important;
}

/* Salient standard menu links */
body #header-outer #top nav > ul > li > a,
body #header-outer #top .sf-menu > li > a{
  color:#fff !important;
  font-weight: 850 !important;
  opacity: 1 !important;
}

/* hover/active pill */
body #header-outer #top nav > ul > li > a:hover,
body #header-outer #top .sf-menu > li > a:hover,
body #header-outer #top nav > ul > li.current-menu-item > a,
body #header-outer #top .sf-menu > li.current-menu-item > a{
  background: rgba(255,255,255,.12) !important;
  border-radius: 999px;
}

/* Max Mega Menu */
body #header-outer [id^="mega-menu-wrap-"]{
  width:100% !important;
}
body #header-outer [id^="mega-menu-wrap-"] .mega-menu{
  max-width: var(--tus-container) !important;
  margin: 0 auto !important;
  padding: 0 var(--tus-pad) !important;
}
body #header-outer [id^="mega-menu-wrap-"] .mega-menu > li.mega-menu-item > a.mega-menu-link{
  color:#fff !important;
  font-weight: 850 !important;
  opacity:1 !important;
}
body #header-outer [id^="mega-menu-wrap-"] .mega-menu > li.mega-menu-item > a.mega-menu-link:hover,
body #header-outer [id^="mega-menu-wrap-"] .mega-menu > li.mega-current-menu-item > a.mega-menu-link{
  background: rgba(255,255,255,.12) !important;
  border-radius: 999px;
  color:#fff !important;
}

/* dropdown panels modern */
body #header-outer [id^="mega-menu-wrap-"] .mega-menu-panel,
body #header-outer [id^="mega-menu-wrap-"] .mega-sub-menu{
  border-radius: 18px !important;
  overflow: hidden;
  background:#fff !important;
  border: var(--tus-border) !important;
  box-shadow: var(--tus-shadow) !important;
}
body #header-outer [id^="mega-menu-wrap-"] .mega-sub-menu a.mega-menu-link{
  color: var(--tus-text) !important;
  font-weight: 700 !important;
}
body #header-outer [id^="mega-menu-wrap-"] .mega-sub-menu a.mega-menu-link:hover{
  background: rgba(47,32,133,.08) !important;
  color: var(--tus-secondary) !important;
}

/* remove tiny indicators/lines if any */
body #header-outer [id^="mega-menu-wrap-"] .mega-indicator,
body #header-outer [id^="mega-menu-wrap-"] .mega-menu-link:after,
body #header-outer nav > ul > li > a:after{
  display:none !important;
}

/* ---------------------------
   6) HERO / SLIDER polish
--------------------------- */
/* make text readable on hero images (works for many Salient hero setups) */
.swiper-slide .content,
.nectar-slider-wrap .content{
  text-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* ---------------------------
   7) FORMS (modern)
--------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="password"],
textarea,
select{
  border-radius: var(--tus-radius-sm) !important;
  border: 1px solid rgba(171,170,215,.60) !important;
  background: #fff !important;
  padding: 11px 12px !important;
}

input:focus, textarea:focus, select:focus{
  outline: none !important;
  border-color: rgba(47,32,133,.85) !important;
  box-shadow: 0 0 0 4px rgba(47,32,133,.12) !important;
}

/* ---------------------------
   8) FOOTER (clean club look)
--------------------------- */
#footer-outer{
  background: #04054d !important;
  color:#fff !important;
}
#footer-outer a{ color: rgba(255,255,255,.92) !important; }
#footer-outer a:hover{ color:#fff !important; }

/* ---------------------------
   9) MOBILE polish
--------------------------- */
@media (max-width: 999px){
  .container-wrap{ padding-top: 18px; }

  /* make header a touch smaller on mobile */
  body #header-outer #top{ min-height: 68px !important; }

  /* ensure menu button visible */
  body #header-outer .mobile-menu-link,
  body #header-outer #search-btn a{
    color:#fff !important;
  }
}

/* ---------------------------
   10) OPTIONAL: cookie bar readability
--------------------------- */
#klaro, .klaro, .cookie-notice-container{
  font-size: 14px;
}