/* testimonialsshortcut.css - safer, non-invasive version
   Only styles the Client Stories banner and small helpers.
   It intentionally DOES NOT redefine the navbar/nav-buttons/burger
   so nav.css remains authoritative for the navbar.
*/

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: 'Open Sans', sans-serif, Arial;
}

/* ================== Root Vars ================== */
:root {
  --navbar-height: 80px;        /* adjust if your navbar height differs in nav.css */
  --client-stories-height: 70px;
}

/* ================== Client Stories Banner ================== */
.client-stories-bar {
  position: relative;
  width: 100%;
  height: var(--client-stories-height);
  background-color: #f8cf40;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  /* z-index removed to prevent conflicts */
}

/* ================== Client Stories Link ================== */
.client-stories-link {
  position: relative;
  display: inline-block;
  font-size: 1.05rem;
  font-weight: 600;
  color: #2d2d62;
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
  padding: 0; /* removed padding to ensure underline matches exact text width */
}

/* wrap text in a span to control underline precisely */
.client-stories-link span.text {
  position: relative;
  display: inline-block;
}

/* Hover underline animation */
.client-stories-link .underline {
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 2px;
  background-color: #2d2d62;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: left center;
}

.client-stories-link .underline:nth-of-type(2) {
  bottom: -7px;
  transition-delay: 0.08s;
}

/* Hover state - expands left to right smoothly */
.client-stories-link:hover .underline {
  width: 100%;
}

/* ================== Mobile dropdown helper ================== */
.nav-buttons.show {
  z-index: 3000; /* ensures mobile dropdown appears above the banner */
}

/* ================== Responsive ================== */
@media (max-width: 1024px) {
  .client-stories-link { font-size: 0.95rem; }
}

@media (max-width: 600px) {
  .client-stories-link { font-size: 0.85rem; }
}

/* ---------------------------------------------------------
 Optional: if you want the rest of the page to automatically
 sit below both navbar + banner, uncomment & apply to your
 main content container in YOUR other css.
--------------------------------------------------------- */
/*
main, .page-content, .about-us-section {
  padding-top: calc(var(--navbar-height) + var(--client-stories-height));
}
*/