/* Shared header/footer + logo glow styles - Lipht branding */
:root[data-theme="light"]{
  --brand:#2196F3;
  --brand-hover:#1976D2;
  --bg-primary:#FFFFFF;
  --bg-secondary:#F5F8FA;
  --bg-header:rgba(255,255,255,0.95);
  --text-primary:#1A1A1A;
  --text-secondary:#4A4A4A;
  --border-color:rgba(33,150,243,0.2);
  --shadow-color:rgba(33,150,243,0.15);
  --card-bg:#FFFFFF;
}

:root[data-theme="dark"]{
  --brand:#2196F3;
  --brand-hover:#42A5F5;
  --bg-primary:#0D1117;
  --bg-secondary:#161B22;
  --bg-header:rgba(13,17,23,0.95);
  --text-primary:#E6EDF3;
  --text-secondary:#8B949E;
  --border-color:rgba(33,150,243,0.3);
  --shadow-color:rgba(33,150,243,0.2);
  --card-bg:#161B22;
}

:root{
  --brand:#2196F3;
  --bg-900:rgba(20,20,20,0.9);
}

/* Custom scrollbar styling - Webkit browsers (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #F5F8FA;
}

::-webkit-scrollbar-thumb {
  background: #2196F3;
  border-radius: 6px;
  border: 2px solid #F5F8FA;
}

::-webkit-scrollbar-thumb:hover {
  background: #1976D2;
}

/* Dark theme scrollbar override */
:root[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #0D1117;
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #2196F3;
  border-radius: 6px;
  border: 2px solid #0D1117;
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #42A5F5;
}

/* Firefox scrollbar - Default light */
* {
  scrollbar-width: thin;
  scrollbar-color: #2196F3 #F5F8FA;
}

/* Firefox scrollbar - Dark theme */
:root[data-theme="dark"] * {
  scrollbar-color: #2196F3 #0D1117;
}

/* Scroll to top button */
#scrollToTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: var(--brand);
  color: #FFF;
  border: none;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 4px 12px var(--shadow-color);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

#scrollToTop.visible {
  opacity: 1;
  visibility: visible;
}

#scrollToTop:hover {
  background: var(--brand-hover);
  transform: translateY(-3px);
  box-shadow: 0 6px 16px var(--shadow-color);
}

@media (max-width: 600px) {
  #scrollToTop {
    bottom: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
    font-size: 1.3rem;
  }
}

/* Page transition animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

body {
  animation: fadeIn 0.4s ease-in-out;
}

body.fade-out {
  animation: fadeOut 0.3s ease-in-out;
  opacity: 0;
}

/* View Transitions API support for modern browsers */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.4s;
}

/* Reset helpers (kept light; pages keep their own section styles) */
a{ text-decoration:none; color:inherit }
html, body{ max-width:100%; overflow-x:hidden }
/* Theme-aware backgrounds */
html{ background:var(--bg-primary); transition:background-color 0.3s ease; }
body{ background-color:var(--bg-primary); color:var(--text-primary); transition:background-color 0.3s ease, color 0.3s ease; }

/* Header (theme-aware) */
header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.5rem 3rem;
  background:var(--bg-header);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-color);
  position:sticky; top:0; z-index:10;
  flex-wrap:wrap;
  transition:background-color 0.3s ease;
}
.logo{
  display:flex; align-items:center; gap:.75rem;
  font-size:1.5rem; font-weight:700; letter-spacing:1px; color:var(--brand);
  text-shadow: 0 0 20px var(--shadow-color);
  transition:color 0.3s ease, text-shadow 0.3s ease;
}
.logo img{ width:72px; height:72px; object-fit:contain; display:block;
  filter: drop-shadow(0 0 8px var(--shadow-color));
  transition:filter 0.3s ease;
}
@media (max-width:600px){ .logo img{ width:48px; height:48px } }

/* Nav buttons (theme-aware) */
.nav-buttons{ display:flex; gap:1.25rem; align-items:center }
.contact-button{
  padding:.75rem 1.5rem; background:var(--brand); color:#FFF; font-weight:700;
  border:0; border-radius:8px; cursor:pointer;
  box-shadow:0 2px 8px var(--shadow-color);
  transition: all .2s ease;
}
.contact-button:hover{ background:var(--brand-hover); box-shadow:0 4px 12px var(--shadow-color); transform: translateY(-2px) }
#darkModeToggle{ font-size:1.2rem; padding:.5rem .75rem; }

/* Footer (theme-aware) */
footer{ text-align:center; padding:2rem; background:var(--bg-header); border-top:1px solid var(--border-color); font-size:.9rem; color:var(--text-secondary); transition:all 0.3s ease }

/* Small responsive tweak to match MainScreen */
@media (max-width:600px){
  header{ flex-direction:column; align-items:center; padding:1rem 1rem; width:100%; }
  .logo{ margin-bottom:0.75rem; text-align:center; justify-content:center; flex-wrap:wrap; font-size:1.25rem }
  /* Use grid on small screens so all buttons fit without horizontal scroll */
  .nav-buttons{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; width:100%; max-width:420px; margin-top:.5rem; justify-items:stretch }
  .nav-buttons a{ display:block; width:100% }
  .nav-buttons .contact-button{ width:100%; padding:.65rem .9rem; white-space:normal }
}

/* Turn off fixed backgrounds on touch/smaller screens - theme aware */
@media (max-width:1024px), (hover:none) and (pointer:coarse){
  :root[data-theme="light"] body{
    background: linear-gradient(135deg, #F5F8FA 0%, #E3F2FD 100%) no-repeat center top / cover !important;
    background-attachment: scroll !important;
  }
  :root[data-theme="dark"] body{
    background: linear-gradient(135deg, #0D1117 0%, #161B22 100%) no-repeat center top / cover !important;
    background-attachment: scroll !important;
  }
}

/* Very narrow phones: keep 2-column grid but tighten spacing so it fits */
@media (max-width:380px){
  .nav-buttons{ grid-template-columns:repeat(2,1fr); max-width:100%; gap:.45rem }
  .nav-buttons .contact-button{ padding:.55rem .7rem; font-size:.92rem }
}