/* BrooKo.UK — small Bootstrap tweaks (keep it light) */

:root {
  --bb-accent: #2ecc71;
  --bb-accent-rgb: 46, 204, 113;
  --bb-card-bg: rgba(12, 16, 26, 0.72);
  --bb-card-border: rgba(148, 163, 184, 0.22);
  --bb-font-mono: ui-monospace, "Cascadia Mono", "Fira Code", "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Override Bootstrap theme colours (keeps the “green terminal vibe”) */
:root, [data-bs-theme="dark"] {
  --bs-primary: var(--bb-accent);
  --bs-primary-rgb: var(--bb-accent-rgb);
  --bs-success: var(--bb-accent);
  --bs-success-rgb: var(--bb-accent-rgb);
  --bs-link-color: var(--bb-accent);
  --bs-link-hover-color: rgba(var(--bb-accent-rgb), .92);
}

/* Fixed background is in critical CSS; keep this light */
body { background: transparent; }

/* Typography */
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.btn,
.navbar .nav-link,
.badge {
  font-family: var(--bb-font-mono) !important;
  letter-spacing: .02em;
}


/* Avatar helpers */
.avatar{
  display:inline-block;
  border-radius: 999px;
  object-fit: cover;
  background: rgba(255,255,255,.04);
}

.avatar-ring{
  border: 3px solid rgba(var(--bb-accent-rgb), .92);
  box-shadow:
    0 0 0 7px rgba(var(--bb-accent-rgb), .10),
    0 0 34px rgba(var(--bb-accent-rgb), .36);
}
.navbar {
  backdrop-filter: blur(10px);
}

.navbar.bg-dark {
  background-color: rgba(8, 10, 16, 0.68) !important;
}


.brand-logo{
  height: 96px;
  width: auto;
  filter: drop-shadow(0 10px 22px rgba(var(--bb-accent-rgb), .16));
}

/* Responsive header: keep menu visible, stack under logo on mobile */
@media (max-width: 768px){
  .brand-logo{ height: 72px; }
  .navbar .container{
    flex-direction: column;
    align-items: center;
    gap: .35rem;
  }
  .navbar-nav{
    margin-left: 0 !important;
    justify-content: center;
    width: 100%;
    gap: .25rem;
  }
  .navbar .nav-link{
    padding: .30rem .55rem;
    font-size: .92rem;
  }
}
@media (max-width: 420px){
  .brand-logo{ height: 64px; }
}

/* Avatars */
.avatar-lg{ width: 128px; height: 128px; }
.avatar-xl{ width: 176px; height: 176px; }
.avatar-hero{ width: 180px; height: 180px; }
@media (max-width: 768px){
  .avatar-hero{ width: 140px; height: 140px; }
  .avatar-xl{ width: 150px; height: 150px; }
}
@media (max-width: 420px){
  .avatar-hero{ width: 120px; height: 120px; }
}

/* Tighter responsive hero headings */
.display-4{ font-size: clamp(2.1rem, 5vw, 3.4rem); }
.navbar .nav-link{
  color: rgba(229, 231, 235, .78);
  padding: .35rem .75rem;
  border-radius: .45rem;
  position: relative;
}
.navbar .nav-link:hover{ color: rgba(229, 231, 235, .92); }
.navbar .nav-link.active{ color: rgba(229, 231, 235, 1); }
.navbar .nav-link.active::after{
  content:"";
  position:absolute;
  left:.75rem;
  right:.75rem;
  bottom:.15rem;
  height:2px;
  background: rgba(var(--bb-accent-rgb), .95);
  border-radius: 2px;
}

.navbar{ padding-top: .5rem; padding-bottom: .5rem; }
.navbar .container{ gap: .5rem; }
.navbar-nav{ flex-wrap: wrap; }

@media (max-width: 576px){
  .navbar{ padding-top: .35rem; padding-bottom: .35rem; }
  .navbar .container{ justify-content: center; }
  .navbar .navbar-nav{ width: 100%; justify-content: center; }
  .navbar .nav-link{ padding: .25rem .55rem; font-size: .85rem; }
  .social-icon{ width: 36px; height: 36px; border-radius: .85rem; }
}

/* Footer */
.site-footer{ padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
.footer-panel{
  background: rgba(8, 10, 16, 0.72);
  border: 1px solid var(--bb-card-border);
  border-radius: 1rem;
  padding: 1rem;
  backdrop-filter: blur(10px);
}
.footer-grid{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap: .9rem;
  min-width: min(520px, 100%);
}
.footer-logo{
  height: 46px;
  width: auto;
  filter: drop-shadow(0 10px 22px rgba(var(--bb-accent-rgb), .14));
}
.footer-owner{ font-family: var(--bb-font-mono); letter-spacing: .02em; }
.footer-links{
  display:flex;
  gap: .4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.footer-link{
  color: rgba(229, 231, 235, .72);
  text-decoration: none;
  padding: .2rem .55rem;
  border-radius: .55rem;
  border: 1px solid transparent;
  font-family: var(--bb-font-mono);
  letter-spacing: .02em;
}
.footer-link:hover{
  color: rgba(229, 231, 235, .92);
  border-color: rgba(var(--bb-accent-rgb), .25);
  background: rgba(var(--bb-accent-rgb), .08);
}
.footer-version{ white-space: nowrap; }


.footer-social{display:flex;flex-direction:column;gap:.45rem;align-items:flex-end;}
.footer-social-links{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;justify-content:flex-end;}
.footer-version{ margin-top:.1rem; }

/* Social icon links (Bootstrap Icons) */
.social-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 36px;
  height: 36px;
  border-radius: .8rem;
  text-decoration: none;
  color: rgba(229, 231, 235, .78);
  border: 1px solid rgba(var(--bb-accent-rgb), .18);
  background: rgba(255,255,255,.03);
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease;
}
.social-icon:hover{
  transform: translateY(-1px);
  color: rgba(229, 231, 235, .95);
  border-color: rgba(var(--bb-accent-rgb), .32);
  background: rgba(var(--bb-accent-rgb), .10);
}
.social-icon:active{ transform: translateY(0); }
.social-icon i{ font-size: 1.15rem; line-height: 1; }
@media (max-width: 576px){
  .footer-panel{ padding: 1rem .95rem; }
  .footer-grid{ flex-direction: column; align-items: center; text-align: center; }
  .footer-brand{ justify-content: center; min-width: 0; }
  .footer-logo{ height: 40px; }
  .footer-links{ justify-content: center; }
  .footer-social-links{ justify-content: center; }
  .footer-social{ align-items: center; }
  .footer-version{ opacity: .9; }
  .social-icon{ width: 34px; height: 34px; border-radius: .8rem; }
}

/* About page: keep the profile panel looking intentional (not a floating block) */
.about-profile-card{ width:100%; max-width: 380px; }


.card.bg-dark {
  background: var(--bb-card-bg) !important;
}

.card.border-secondary {
  border-color: var(--bb-card-border) !important;
}

.btn-success {
  box-shadow: 0 10px 26px rgba(var(--bb-accent-rgb), 0.16);
}

/* Less “bubble” look */
.badge{ border-radius: .55rem; }

/* Slightly nicer list spacing on small screens */
ul { padding-left: 1.1rem; }
li { margin-bottom: .2rem; }

/* Reduce motion for people who prefer it */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}