/* Google Fonts (already in your layout) */
/* Bebas Neue + Oswald + Roboto Condensed */

/* Bootstrap variable overrides + dark specimen theme */
:root {
  --bs-primary: #FFFFFF;       /* Pure white for main accents/headings */
  --bs-secondary: #A0A0A0;      /* Light gray for guidelines/subtle text */
  --bs-success: #C5A572;       /* Optional champagne gold accent (if needed) */
  --bs-dark: #1E1E1E;          /* Deep charcoal (specimen background) */
  --bs-light: #2D2D2D;         /* Slightly lighter for cards/overlays */
  --bs-body-bg: #1A1A1A;       /* Main site background – very dark gray */
  --bs-body-color: #E0E0E0;    /* Light gray-white for body text */
}

/* Smooth scroll behavior for anchor links */
html {
  scroll-behavior: smooth;
}

/* Offset anchored elements by navbar height */
:target::before,
[id]::before {
  content: "";
  display: block;
  height: 80px;           /* Slightly more than navbar height */
  margin-top: -80px;      /* Pull the anchor up by the same amount */
  visibility: hidden;
  pointer-events: none;
}

/* Overall site – dark specimen feel */
body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  padding-top: 100px; /* Space for fixed navbar if you add one */
  line-height: 1.6;
}

/* Massive Bebas Neue headings – just like the specimen */
h1, h2, h3, .display-1, .display-2, .display-3, .display-4,
.hero-title, .page-title, .card-title {
  font-family: 'Bebas Neue', sans-serif;
  color: #FFFFFF;
  letter-spacing: 6px;         /* Wide for poster/specimen spread */
  line-height: 1.0;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

/* Extra large hero/title */
h1, .display-1 {
  font-size: 8rem;
  letter-spacing: 10px;
}

/* Subheadings & nav – Oswald with subtle gray */
h4, h5, h6,
.navbar-nav .nav-link,
.card-subtitle {
  font-family: 'Oswald', sans-serif;
  color: var(--bs-secondary);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
}

/* Links */
a {
  color: #FFFFFF;
  text-decoration: none;
}
a:hover {
  color: var(--bs-secondary);
}


/* Navbar (if you add one) – minimalist dark */
.navbar {
  background-color: rgba(26, 26, 26, 0.9) !important;
  backdrop-filter: blur(10px);
   padding-left: 2rem;
  padding-right: 2rem;
}
.navbar .nav-link {
  color: var(--bs-secondary);
}
.navbar .nav-link:hover {
  color: #FFFFFF;
}

.navbar-brand {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 2.5rem;
  letter-spacing: 6px;
  color: #FFFFFF !important;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Subtle glow for drama */
}
.navbar-brand:hover {
  color: #E0E0E0; /* Slight brighten on hover */
}

/* Hamburger icon – make it bright white and visible */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Optional: Style the toggler button itself */
.navbar-toggler {
  border: none;                    /* Remove default border */
  padding: 8px 10px;
}
.navbar-toggler:focus {
  box-shadow: none;                /* Remove Bootstrap's blue focus ring */
}

.navbar-logo {
  height: 80px;                /* Main size – looks good on desktop */
  width: auto;                 /* Maintains aspect ratio (stays square) */
  object-fit: contain;         /* Ensures no cropping/distortion */
  transition: opacity 0.3s ease;
}

.navbar-logo:hover {
  opacity: 0.8;                /* Subtle hover effect */
}

/* Hero exception: Full-bleed with no side padding */
.hero .container-fluid {
  padding-left: 0;
  padding-right: 0;
  max-width: none; /* Override Bootstrap's max-width */
}

/* Optional: If you want vertical padding in hero but no horizontal */
.hero {
  padding-left: 0;
  padding-right: 0;
}

.hero h1.display-1 {
  font-size: 6rem;              /* Base for large desktop */
  line-height: 1;
  letter-spacing: 8px;
}

.hero .btn {
  min-width: 180px;
  padding: 0.8rem 2rem;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Featured button stands out a bit more (solid white instead of outline) */
.hero .btn-light {
  background-color: #FFFFFF;
  color: #000000;
}
.hero .btn-light:hover {
  background-color: #E0E0E0;
}

/* Gallery cards – clean specimens on dark */
.card {
  background-color: transparent;
  border: none;
  text-align: center;
  margin-bottom: 4rem;
  transition: transform 0.4s ease;
}
.card:hover {
  transform: translateY(-20px);
}
.card-img-top {
  border-radius: 0;
  margin-bottom: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  object-fit: cover;
  height: 500px; /* Uniform for gallery feel */
}
.card-title {
  font-size: 4rem;
  margin-bottom: 0.5rem;
}
.card-subtitle {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
.card-text {
  color: var(--bs-secondary);
  max-width: 600px;
  margin: 0 auto;
}

/* Container spacing – lots of breathing room like the specimen */
.container, .container-fluid {
  padding-top: 4rem;
  padding-bottom: 4rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Footer – subtle */
footer {
  background-color: #111111;
  color: var(--bs-secondary);
  padding: 3rem 0;
  text-align: center;
  font-size: 0.9rem;
}

@media (min-width: 1200px) {
.container {
    padding-left: 4rem;
    padding-right: 4rem;
    max-width: 1400px; /* Optional: prevent super-wide on large screens */
  }
  .navbar {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .hero h1.display-1 {
    font-size: 10rem;
  }
}

@media (max-width: 992px) {
  .hero h1.display-1 {
    font-size: 4.5rem;
    letter-spacing: 6px;
  }

   :target::before,
  [id]::before {
    height: 70px;
    margin-top: -70px;
  }

}

@media (max-width: 768px) {

 .hero {
    min-height: 70vh;           /* Instead of 100vh – more content visible */
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .hero h1.display-1 {
    font-size: 3.8rem;
    letter-spacing: 5px;
  }


}

@media (max-width: 576px) {


  .hero h1.display-1 {
    font-size: 3rem;             /* Mobile – still bold but readable */
    letter-spacing: 4px;
  }



    .navbar {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    padding-left:0;
    padding-right:0;
  }

   .navbar>.container-fluid {
      padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .navbar-brand {
    padding-left: 0.3rem;
  }

  .navbar-toggler {
    padding-right: 0.3rem;
    margin-right: 0.3rem;
  }

  .navbar-logo {
     height: 36px;
  }


   :target::before,
  [id]::before {
    height: 60px;
    margin-top: -60px;
  }

}