/*
 * Skills Lab theme overrides
 * Minimal color + typography layer on top of the base Agency/Bootstrap
 * framework in styles.css. Only rules needed to re-skin the template
 * for the Skills Lab brand (purple/gold/black + Oswald/Inter) live here.
 */

:root {
  --sl-purple: #6d28c7;
  --sl-purple-dark: #4a1b8a;
  --sl-black: #0e0a14;
  --sl-gold: #f4b400;
  --sl-gold-dark: #c99400;
  --sl-banner-height: 3.25rem;
  --font-display: "Oswald", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Typography */
body {
  font-family: var(--font-body);
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}

.page-section h2.section-heading,
.page-section .section-heading.h2 {
  color: var(--sl-purple);
}

.page-section h3.section-subheading,
.page-section .section-subheading.h3 {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
}

.btn, .btn-xl, #mainNav .navbar-nav .nav-item .nav-link, #mainNav .navbar-toggler {
  font-family: var(--font-body);
}

.text-gold {
  color: var(--sl-gold) !important;
}

/* Icon badges - purple/gold circles used instead of plain colored glyphs */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
}
.icon-badge--purple {
  background-color: var(--sl-purple);
  color: var(--sl-gold);
}
.icon-badge--gold {
  background-color: var(--sl-gold);
  color: var(--sl-purple-dark);
}

/* Service cards - dark fill, gold outline, purple title, silver body text
   (mirrors the logo's dark/gold/purple layering). Font Awesome's JS kit
   replaces <i> with an inline <svg fill="currentColor">, so set color on
   the card itself rather than an `i` selector that won't match. */
.card--brand {
  background-color: var(--sl-black);
  border: 2px solid var(--sl-gold);
  border-radius: 1.75rem;
  color: var(--sl-gold);
}
.card--brand .card-title {
  color: var(--sl-purple);
}
.card--brand .card-text {
  color: #cfd0d6;
}

/* Safari doesn't reliably stretch a percentage-height (h-100) card against
   a flexbox-stretched grid column, so equal-height cards in the same row
   can end up mismatched. Make the column itself a flex container instead,
   which stretches its card via native flexbox sizing rather than % height. */
.row > [class*="col-"]:has(> .card--brand) {
  display: flex;
}
.row > [class*="col-"]:has(> .card--brand) > .card--brand {
  width: 100%;
}

/* Navbar */
#mainNav {
  position: sticky !important;
  top: var(--sl-banner-height) !important;
  z-index: 1030;
  background-color: var(--sl-black);
  border-bottom: 2px solid var(--sl-gold);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
#mainNav.fixed-top,
#mainNav.fixed-top.navbar-shrink,
#mainNav.navbar-shrink {
  position: sticky !important;
  top: var(--sl-banner-height) !important;
  background-color: var(--sl-black);
  border-bottom: 2px solid var(--sl-gold);
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}
#mainNav .navbar-brand {
  padding: 0;
}
#mainNav .navbar-brand img {
  height: 3rem;
  width: 3rem;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 2px solid var(--sl-gold);
  transition: height 0.3s ease-in-out;
}
@media (min-width: 992px) {
  #mainNav .navbar-brand img {
    height: 3.5rem;
    width: 3.5rem;
  }
  #mainNav.navbar-shrink .navbar-brand img,
  #mainNav.fixed-top.navbar-shrink .navbar-brand img {
    height: 3rem;
    width: 3rem;
  }
}
#mainNav .navbar-toggler {
  color: var(--sl-gold);
  border-color: rgba(244, 180, 0, 0.5);
}
#mainNav .navbar-nav .nav-item .nav-link.active,
#mainNav .navbar-nav .nav-item .nav-link:hover {
  color: var(--sl-gold);
}

/* Buttons */
.btn-primary,
.btn-gold,
.btn-outline-primary {
  border-radius: 0.85rem;
}

.btn-primary {
  color: #fff;
  background-color: var(--sl-purple);
  border-color: var(--sl-purple);
}
.btn-primary:hover {
  color: #fff;
  background-color: var(--sl-purple-dark);
  border-color: var(--sl-purple-dark);
}
.btn-check:focus + .btn-primary,
.btn-primary:focus {
  color: #fff;
  background-color: var(--sl-purple-dark);
  border-color: var(--sl-purple-dark);
  box-shadow: 0 0 0 0.25rem rgba(109, 40, 199, 0.5);
}
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--sl-purple-dark);
  border-color: var(--sl-purple-dark);
}
.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--sl-purple);
  border-color: var(--sl-purple);
}

.btn-outline-primary {
  color: var(--sl-purple);
  border-color: var(--sl-purple);
}
.btn-outline-primary:hover {
  color: #fff;
  background-color: var(--sl-purple);
  border-color: var(--sl-purple);
}
.btn-check:focus + .btn-outline-primary,
.btn-outline-primary:focus {
  box-shadow: 0 0 0 0.25rem rgba(109, 40, 199, 0.5);
}

.btn-social {
  background-color: var(--sl-gold);
  color: var(--sl-black);
}
.btn-social:hover {
  background-color: #fff;
  color: var(--sl-black);
}

.btn-gold {
  color: var(--sl-black);
  background-color: var(--sl-gold);
  border-color: var(--sl-gold);
}
.btn-gold:hover,
.btn-gold:focus {
  color: var(--sl-black);
  background-color: var(--sl-gold-dark);
  border-color: var(--sl-gold-dark);
}
.btn-check:focus + .btn-gold,
.btn-gold:focus {
  box-shadow: 0 0 0 0.25rem rgba(244, 180, 0, 0.5);
}

/* Text / border / background utility overrides used across the page */
.text-primary {
  color: var(--sl-purple) !important;
}
.border-primary {
  border-color: var(--sl-purple) !important;
}
.bg-primary {
  background-color: var(--sl-purple) !important;
}
/* Keep dark sections black (not purple) so purple/gold read as accents, not a wall of color */
.bg-dark {
  background-color: var(--sl-black) !important;
}

a {
  color: var(--sl-gold-dark);
}
a:hover {
  color: var(--sl-gold);
}

.top-banner {
  position: sticky !important;
  top: 0 !important;
  z-index: 1031;
  height: var(--sl-banner-height);
  min-height: var(--sl-banner-height);
  background: linear-gradient(90deg, var(--sl-purple), var(--sl-gold));
  color: var(--sl-black);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.45rem 0;
}
.top-banner .container {
  min-height: 2.2rem;
  height: 100%;
}
.top-banner__links {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.top-banner__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(14, 10, 20, 0.18);
  color: var(--sl-black);
}
.top-banner__links a:hover {
  background: rgba(14, 10, 20, 0.3);
  color: var(--sl-black);
}

/* Small phones: the banner text + social icons don't fit on one line at the
   fixed desktop height, which pushed the icons under the sticky nav below.
   Stack them and grow the shared height variable to match. */
@media (max-width: 575.98px) {
  :root {
    --sl-banner-height: 4.1rem;
  }
  .top-banner {
    height: auto;
    min-height: var(--sl-banner-height);
    padding: 0.4rem 0;
  }
  .top-banner .container {
    flex-direction: column;
    height: auto;
    min-height: auto;
    gap: 0.3rem !important;
    font-size: 0.68rem;
  }
  .top-banner__links a {
    width: 1.6rem;
    height: 1.6rem;
  }
}

.navbar-contact {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
  margin-right: 1rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.navbar-contact a,
.navbar-contact a:hover,
.navbar-contact a:visited,
.navbar-contact a:focus {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
}
.navbar-contact a:hover {
  color: var(--sl-gold);
}
.navbar-contact--mobile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  margin: 0.75rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.social-links .btn-social,
.footer .btn-social {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#facilityCarousel {
  display: none !important;
}

/* Hero - base template's huge padding-top/margin values were tuned for a
   masthead with no heading text; override (unconditionally, so it wins over
   the base template's breakpoint-specific rules) with flex centering so the
   heading and CTA are always visible without scrolling. */
header.masthead {
  background-image: linear-gradient(180deg, rgba(14, 10, 20, 0.55), rgba(14, 10, 20, 0.8)), url("../assets/img/hero-bg.jpg");
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 11rem 1rem 4rem;
  margin-top: 0;
}
header.masthead .masthead-subheading,
header.masthead .masthead-heading {
  font-family: var(--font-display);
  text-align: center;
}
header.masthead .masthead-subheading {
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  line-height: 1.15;
  letter-spacing: 0.04em;
}
header.masthead .masthead-heading {
  font-size: clamp(1.5rem, 2.6vw, 2.8rem);
  letter-spacing: 0.08em;
  line-height: 1.2;
}
header.masthead .btn-xl {
  margin: 1rem 0 0;
  padding: 1rem 2rem;
}

/* Small phones: give the heading breathing room and keep the CTA from
   overflowing the narrow viewport. */
@media (max-width: 400px) {
  header.masthead {
    padding: 8rem 1rem 3rem;
  }
  header.masthead .masthead-subheading {
    font-size: clamp(2rem, 11vw, 2.75rem);
    line-height: 1.2;
    letter-spacing: 0.02em;
  }
  header.masthead .masthead-heading {
    font-size: 1.1rem;
    letter-spacing: 0.04em;
  }
  header.masthead .btn-xl {
    padding: 0.85rem 1.5rem;
    font-size: 1rem;
  }
}

/* Team */
.team-member img {
  border-color: var(--sl-gold);
  background-color: #fff;
}

/* Subpages (Tréningy / Prenájom / Oslavy) */
.back-link {
  display: inline-block;
  margin-bottom: 0.75rem;
  color: var(--sl-gold);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}
.back-link:hover {
  color: #fff;
}

.info-card {
  text-align: left;
}
.info-card .card-body {
  display: flex;
  flex-direction: column;
}
.info-card__center {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.info-card__desc {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.info-card__desc p {
  color: #fff;
}
.info-card__price {
  display: inline-block;
  align-self: flex-start;
  background-color: var(--sl-gold);
  color: var(--sl-black);
  font-weight: 700;
  padding: 0.35rem 0.9rem;
  border-radius: 2rem;
  margin-bottom: 0.75rem;
}
.info-card__meta {
  color: var(--sl-gold);
  font-size: 0.9rem;
}
.info-card__title-center {
  text-align: center;
}
.info-card__center .info-card__price,
.info-card--centered .info-card__price {
  align-self: center;
}
.info-card--centered {
  text-align: center;
}
.info-card--times-white .info-card__meta {
  color: #fff;
}

.feature-list {
  list-style: none;
  padding-left: 0;
  text-align: left;
}
.feature-list li {
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: 0.5rem;
  color: #cfd0d6;
}
.feature-list li::before {
  content: "\2022";
  color: var(--sl-gold);
  position: absolute;
  left: 0;
  font-size: 1.2rem;
  line-height: 1;
}

/* Contact - solid purple / gold panels instead of accent borders */
section#contact .section-heading {
  color: #fff;
}
.contact-panel--purple {
  background-color: var(--sl-purple);
  color: #fff;
}
.contact-panel--gold {
  background-color: var(--sl-gold);
  color: var(--sl-black);
}
.contact-panel--gold p {
  color: var(--sl-black);
}
.contact-panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.contact-panel > h3 {
  width: 100%;
  margin-bottom: 1rem;
}
.contact-panel__content {
  min-height: 15rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.contact-panel--gold p a,
.contact-panel--gold p a:visited,
.contact-panel--gold p a:focus {
  color: #1d0f2d;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
  font-weight: 700;
}
.contact-panel--gold p a:hover {
  color: #2a1440;
}
.contact-panel--gold .phone-link,
.contact-panel--gold .phone-link:hover,
.contact-panel--gold .phone-link:visited,
.contact-panel--gold .phone-link:focus {
  color: #1d0f2d;
  text-decoration: none;
}

/* Facility carousel */
#facilityCarousel .carousel-indicators [data-bs-target] {
  background-color: var(--sl-gold);
}

/* Footer */
.footer {
  background-color: var(--sl-black);
  color: rgba(255, 255, 255, 0.75);
  padding: 2rem 0;
}